render()

in static/src/javascripts/projects/common/modules/crosswords/crossword.js [720:817]
89 lines of code
3 McCabe index (conditional complexity)

	render() {
		const focused = this.clueInFocus();

		const anagramHelper = this.state.showAnagramHelper && (
			<AnagramHelper
				crossword={this}
				focussedEntry={focused}
				entries={this.props.data.entries}
				grid={this.state.grid}
				close={this.onToggleAnagramHelper}
			/>
		);

		const gridProps = {
			rows: this.rows,
			columns: this.columns,
			cells: this.state.grid,
			separators: buildSeparatorMap(this.props.data.entries),
			crossword: this,
			focussedCell: this.state.cellInFocus,
			ref: (grid) => {
				this.grid = grid;
			},
		};

		return (
			<div
				className={`crossword__container crossword__container--${this.props.data.dimensions.cols}cell crossword__container--react`}
				data-link-name="Crosswords"
			>
				<div
					className="crossword__container__game"
					ref={(game) => {
						this.game = game;
					}}
				>
					<div
						className="crossword__sticky-clue-wrapper"
						ref={(stickyClueWrapper) => {
							this.stickyClueWrapper = stickyClueWrapper;
						}}
					>
						<div
							className={classNames({
								'crossword__sticky-clue': true,
								'is-hidden': !focused,
							})}
						>
							{focused && (
								<div className="crossword__sticky-clue__inner">
									<div className="crossword__sticky-clue__inner__inner">
										<strong>
											{focused.number}{' '}
											<span className="crossword__sticky-clue__direction">
												{focused.direction}{' '}
											</span>
										</strong>
										<span
											dangerouslySetInnerHTML={{
												__html: focused.clue,
											}}
										/>
									</div>
								</div>
							)}
						</div>
					</div>
					<div
						className="crossword__container__grid-wrapper"
						ref={(gridWrapper) => {
							this.gridWrapper = gridWrapper;
						}}
					>
						{Grid(gridProps)}
						<HiddenInput
							crossword={this}
							value={this.hiddenInputValue()}
							ref={(hiddenInputComponent) => {
								this.hiddenInputComponent =
									hiddenInputComponent;
							}}
						/>
						{anagramHelper}
					</div>
				</div>
				<Controls
					hasSolutions={this.hasSolutions()}
					clueInFocus={focused}
					crossword={this}
				/>
				<Clues
					clues={this.cluesData()}
					focussed={focused}
					setReturnPosition={this.setReturnPosition.bind(this)}
				/>
			</div>
		);
	}