public render()

in fronts-client/src/components/FrontsEdit/FrontContainer.tsx [148:213]


	public render() {
		const { overviewIsOpen, id, browsingStage, priority, isFeast } = this.props;
		return (
			<React.Fragment>
				<div
					style={{
						background: theme.base.colors.backgroundColorLight,
						display: this.state.error ? 'block' : 'none',
						padding: '1em',
						position: 'absolute',
						width: '100%',
					}}
				>
					{this.state.error || ''}
				</div>
				<FrontWrapper>
					<FrontContentContainer>
						<SectionContentMetaContainer>
							{priority === 'email' && (
								<DragToAddContainer>
									<DragToAddSnap />
								</DragToAddContainer>
							)}
							{isFeast && (
								<DragToAddContainer>
									<DragToAddFeastCollection />
								</DragToAddContainer>
							)}
							{isFeast && (
								<ButtonInSectionContentMetaContainer
									onClick={() => this.addFrontCollection()}
								>
									Add New Container
								</ButtonInSectionContentMetaContainer>
							)}
							<OverviewHeadingButton onClick={this.handleOpenCollections}>
								<ButtonLabel>Expand all&nbsp;</ButtonLabel>
								<DownCaretIcon fill={theme.base.colors.text} />
							</OverviewHeadingButton>
							<OverviewHeadingButton onClick={this.handleCloseCollections}>
								<ButtonLabel>Collapse all&nbsp;</ButtonLabel>
								<DownCaretIcon direction="up" fill={theme.base.colors.text} />
							</OverviewHeadingButton>
							{!overviewIsOpen && this.overviewToggle(overviewIsOpen)}
						</SectionContentMetaContainer>
						<FrontContent
							id={id}
							browsingStage={browsingStage}
							handleArticleFocus={this.handleArticleFocus}
							onChangeCurrentCollectionId={this.handleChangeCurrentCollectionId}
						/>
					</FrontContentContainer>
					{overviewIsOpen && (
						<FrontDetailContainer>
							{this.overviewToggle(overviewIsOpen)}
							<FrontCollectionsOverview
								id={this.props.id}
								browsingStage={this.props.browsingStage}
								currentCollection={this.state.currentlyScrolledCollectionId}
							/>
						</FrontDetailContainer>
					)}
				</FrontWrapper>
			</React.Fragment>
		);
	}