in fronts-client/src/components/FrontsEdit/FrontContent.tsx [434:492]
public render() {
const { front, collectionsError } = this.props;
// TODO remove the false bit when we're happy to actually lock users editing
const isEditingLocked =
false && (this.state.isCollectionsStale || !!collectionsError);
return (
<FrontCollectionsContainer
onScroll={this.handleScroll}
ref={(ref: HTMLDivElement | null) =>
(this.collectionContainerElement = ref)
}
>
<WithDimensions>
{({ width }) => (
<DragAndDropRoot id={this.props.id} data-testid={this.props.id}>
{front.collections.map((collectionId) => (
<CollectionContainer
key={collectionId}
ref={(ref: HTMLDivElement | null) =>
(this.collectionElements[collectionId] = ref)
}
>
{isEditingLocked && (
<EditingLockedCollectionsOverlay>
<h2>Editing Locked</h2>
<span>
We couldn't refresh this collection. It may be out of
date. Please wait or reload.
</span>
</EditingLockedCollectionsOverlay>
)}
<Collection
id={collectionId}
frontId={this.props.id}
priority={front.priority}
browsingStage={this.props.browsingStage}
alsoOn={this.props.alsoOn}
handleInsert={this.handleInsert}
handleMove={this.handleMove}
size={
width && width > 750
? 'wide'
: width && width > 500
? 'default'
: 'medium'
}
selectCard={this.onSelectCard}
handleArticleFocus={this.props.handleArticleFocus}
/>
</CollectionContainer>
))}
</DragAndDropRoot>
)}
</WithDimensions>
</FrontCollectionsContainer>
);
}