Skip to content

Commit 52a0d54

Browse files
olzzonolzzon
committed
feat: use context.consumer instead of wrapping
1 parent ba03df0 commit 52a0d54

File tree

5 files changed

+260
-308
lines changed

5 files changed

+260
-308
lines changed

‎packages/webui/src/client/ui/SegmentContainer/withResolvedSegment.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ export interface IResolvedSegmentProps {
9090
fixedSegmentDuration: boolean | undefined
9191
studioMode: boolean
9292
showDurationSourceLayers?: Set<ISourceLayer['_id']>
93-
isSelected: boolean
9493
}
9594

9695
export interface SegmentNoteCounts {
@@ -296,7 +295,6 @@ export function withResolvedSegment<T extends IResolvedSegmentProps, IState = {}
296295
if (
297296
props.followLiveSegments !== nextProps.followLiveSegments ||
298297
props.onContextMenu !== nextProps.onContextMenu ||
299-
props.isSelected !== nextProps.isSelected ||
300298
props.onSegmentScroll !== nextProps.onSegmentScroll ||
301299
props.segmentId !== nextProps.segmentId ||
302300
props.segmentRef !== nextProps.segmentRef ||

‎packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx‎

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { SegmentTimeAnchorTime } from '../RundownView/RundownTiming/SegmentTimeA
5656
import { logger } from '../../lib/logging'
5757
import * as RundownResolver from '../../lib/RundownResolver'
5858
import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
59+
import { SelectedElementsContext } from '../RundownView/SelectedElementsContext'
5960

6061
interface IProps {
6162
id: string
@@ -101,9 +102,7 @@ interface IProps {
101102
showCountdownToSegment: boolean
102103
showDurationSourceLayers?: Set<ISourceLayer['_id']>
103104
fixedSegmentDuration: boolean | undefined
104-
onSegmentSelect: (segmentId: SegmentId) => void
105-
clearSelections: () => void
106-
isSelected: boolean
105+
// isSelected: boolean
107106
}
108107
interface IStateHeader {
109108
timelineWidth: number
@@ -118,7 +117,7 @@ interface IStateHeader {
118117
}
119118
>
120119
useTimeOfDayCountdowns: boolean
121-
isSelected: boolean
120+
// isSelected: boolean
122121
}
123122

124123
interface IZoomPropsHeader {
@@ -277,7 +276,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
277276
`segment.${props.segment._id}.useTimeOfDayCountdowns`,
278277
!!props.playlist.timeOfDayCountdowns
279278
),
280-
isSelected: props.isSelected,
279+
// isSelected: props.isSelected,
281280
}
282281
}
283282

@@ -1061,74 +1060,78 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
10611060
holdToDisplay={contextMenuHoldToDisplayTime()}
10621061
renderTag="div"
10631062
>
1064-
<div
1065-
onDoubleClick={() => {
1066-
if (this.props.studio.settings.enableUserEdits && this.props.onSegmentSelect) {
1067-
if (!this.props.isSelected) {
1068-
this.props.onSegmentSelect(this.props.segment._id)
1069-
} else {
1070-
this.props.clearSelections()
1071-
}
1072-
}
1073-
}}
1074-
>
1075-
<h2
1076-
id={`segment-name-${this.props.segment._id}`}
1077-
className={
1078-
'segment-timeline__title__label' +
1079-
(this.props.segment.identifier ? ' identifier' : '') +
1080-
(this.state.isSelected ? ' selected' : '')
1081-
}
1082-
data-identifier={this.props.segment.identifier}
1083-
>
1084-
{/* for debugging: */ this.props.isSelected && <span>!!</span>}
1085-
{this.props.segment.name}
1086-
</h2>
1087-
{(criticalNotes > 0 || warningNotes > 0) && (
1088-
<div className="segment-timeline__title__notes">
1089-
{criticalNotes > 0 && (
1090-
<div
1091-
className="segment-timeline__title__notes__note segment-timeline__title__notes__note--critical"
1092-
onClick={() =>
1093-
this.props.onHeaderNoteClick &&
1094-
this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.ERROR)
1063+
<SelectedElementsContext.Consumer>
1064+
{(selectElementContext) => (
1065+
<div
1066+
onDoubleClick={() => {
1067+
if (this.props.studio.settings.enableUserEdits) {
1068+
if (!selectElementContext.isSelected(this.props.segment._id)) {
1069+
selectElementContext.clearAndSetSelection({ type: 'segment', elementId: this.props.segment._id })
1070+
} else {
1071+
selectElementContext.clearSelections()
10951072
}
1096-
aria-label={t('Critical problems')}
1097-
>
1098-
<CriticalIconSmall />
1099-
<div className="segment-timeline__title__notes__count">{criticalNotes}</div>
1073+
}
1074+
}}
1075+
>
1076+
<h2
1077+
id={`segment-name-${this.props.segment._id}`}
1078+
className={
1079+
'segment-timeline__title__label' +
1080+
(this.props.segment.identifier ? ' identifier' : '') +
1081+
(selectElementContext.isSelected(this.props.segment._id) ? ' selected' : '')
1082+
}
1083+
data-identifier={this.props.segment.identifier}
1084+
>
1085+
{/* for debugging: */ selectElementContext.isSelected(this.props.segment._id) && <span>!!</span>}
1086+
{this.props.segment.name}
1087+
</h2>
1088+
{(criticalNotes > 0 || warningNotes > 0) && (
1089+
<div className="segment-timeline__title__notes">
1090+
{criticalNotes > 0 && (
1091+
<div
1092+
className="segment-timeline__title__notes__note segment-timeline__title__notes__note--critical"
1093+
onClick={() =>
1094+
this.props.onHeaderNoteClick &&
1095+
this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.ERROR)
1096+
}
1097+
aria-label={t('Critical problems')}
1098+
>
1099+
<CriticalIconSmall />
1100+
<div className="segment-timeline__title__notes__count">{criticalNotes}</div>
1101+
</div>
1102+
)}
1103+
{warningNotes > 0 && (
1104+
<div
1105+
className="segment-timeline__title__notes__note segment-timeline__title__notes__note--warning"
1106+
onClick={() =>
1107+
this.props.onHeaderNoteClick &&
1108+
this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.WARNING)
1109+
}
1110+
aria-label={t('Warnings')}
1111+
>
1112+
<WarningIconSmall />
1113+
<div className="segment-timeline__title__notes__count">{warningNotes}</div>
1114+
</div>
1115+
)}
11001116
</div>
11011117
)}
1102-
{warningNotes > 0 && (
1103-
<div
1104-
className="segment-timeline__title__notes__note segment-timeline__title__notes__note--warning"
1105-
onClick={() =>
1106-
this.props.onHeaderNoteClick &&
1107-
this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.WARNING)
1108-
}
1109-
aria-label={t('Warnings')}
1110-
>
1111-
<WarningIconSmall />
1112-
<div className="segment-timeline__title__notes__count">{warningNotes}</div>
1118+
{identifiers.length > 0 && (
1119+
<div className="segment-timeline__part-identifiers">
1120+
{identifiers.map((ident) => (
1121+
<div
1122+
className="segment-timeline__part-identifiers__identifier"
1123+
key={ident.partId + ''}
1124+
onClick={() => this.onClickPartIdent(ident.partId)}
1125+
>
1126+
{ident.ident}
1127+
</div>
1128+
))}
11131129
</div>
11141130
)}
1131+
<HeaderEditStates userEditOperations={this.props.segment.userEditOperations} />
11151132
</div>
11161133
)}
1117-
{identifiers.length > 0 && (
1118-
<div className="segment-timeline__part-identifiers">
1119-
{identifiers.map((ident) => (
1120-
<div
1121-
className="segment-timeline__part-identifiers__identifier"
1122-
key={ident.partId + ''}
1123-
onClick={() => this.onClickPartIdent(ident.partId)}
1124-
>
1125-
{ident.ident}
1126-
</div>
1127-
))}
1128-
</div>
1129-
)}
1130-
<HeaderEditStates userEditOperations={this.props.segment.userEditOperations} />
1131-
</div>
1134+
</SelectedElementsContext.Consumer>
11321135
</ContextMenuTrigger>
11331136
<div className="segment-timeline__duration" tabIndex={0}>
11341137
{this.props.playlist &&

‎packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx‎

Lines changed: 4 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -137,45 +137,11 @@ export function SegmentTimelineContainer(props: Readonly<IProps>): JSX.Element {
137137
// past infinites subscription
138138
useSubscription(CorelibPubSub.piecesInfiniteStartingBefore, props.rundownId, sortedSegmentIds, sortedRundownIds)
139139

140-
return <SegmentTimelineContainerWithSelection {...props} />
141-
}
142-
143-
function SegmentTimelineContainerWithSelection(props: Readonly<IProps>): JSX.Element {
144-
const { clearAndSetSelection, isSelected, clearSelections } = useSelection()
145-
146-
const handleSegmentSelect = (segmentId: SegmentId) => {
147-
console.log('handleSegmentSelect', segmentId)
148-
clearAndSetSelection({
149-
type: 'segment',
150-
elementId: segmentId,
151-
})
152-
}
153-
154-
const isElementSelected = () => {
155-
return isSelected(props.segmentId)
156-
}
157-
158-
return (
159-
<SegmentTimelineContainerContent
160-
{...props}
161-
isSelected={isElementSelected()}
162-
onSegmentSelect={handleSegmentSelect}
163-
clearSelections={clearSelections}
164-
/>
165-
)
166-
}
167-
168-
interface IWithSelectionProps extends IProps {
169-
isSelected: boolean
170-
onSegmentSelect: (segmentId: SegmentId) => void
171-
clearSelections: () => void
140+
return <SegmentTimelineContainerContent {...props} />
172141
}
173142

174143
const SegmentTimelineContainerContent = withResolvedSegment(
175-
class SegmentTimelineContainerContent extends React.Component<
176-
IWithSelectionProps & ITrackedResolvedSegmentProps,
177-
IState
178-
> {
144+
class SegmentTimelineContainerContent extends React.Component<IProps & ITrackedResolvedSegmentProps, IState> {
179145
static contextTypes = {
180146
durations: PropTypes.object.isRequired,
181147
syncedDurations: PropTypes.object.isRequired,
@@ -194,7 +160,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
194160
syncedDurations: RundownTimingContext
195161
}
196162

197-
constructor(props: IWithSelectionProps & ITrackedResolvedSegmentProps) {
163+
constructor(props: IProps & ITrackedResolvedSegmentProps) {
198164
super(props)
199165

200166
this.state = {
@@ -683,10 +649,6 @@ const SegmentTimelineContainerContent = withResolvedSegment(
683649
this.onTimeScaleChange(newScale)
684650
}
685651

686-
handleSegmentSelect = (segmentId: SegmentId) => {
687-
this.props.onSegmentSelect(segmentId)
688-
}
689-
690652
render(): JSX.Element | null {
691653
return this.props.segmentui ? (
692654
<React.Fragment key={unprotectString(this.props.segmentui._id)}>
@@ -733,9 +695,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
733695
showCountdownToSegment={this.props.showCountdownToSegment}
734696
fixedSegmentDuration={this.props.fixedSegmentDuration}
735697
showDurationSourceLayers={this.props.showDurationSourceLayers}
736-
onSegmentSelect={this.handleSegmentSelect}
737-
clearSelections={this.props.clearSelections}
738-
isSelected={this.props.isSelected}
698+
//isSelected={this.props.isSelected}
739699
/>
740700
)}
741701
{this.props.segmentui.showShelf && this.props.adLibSegmentUi && (

0 commit comments

Comments
 (0)