render()

in src/components/BreakpointContainer.tsx [82:151]
59 lines of code
11 McCabe index (conditional complexity)

	render() {
		const {
			identifier = ID_DEFAULT,
			className,
			containerClass,
			noBpClasses = false,
			debug = null,
			customBreakpoints,
			children,
		} = this.props;

		// Debug mode - component flag, and account for opt-out of global flag
		const isDebugActive = debug || (debug !== false && DEBUG_BPC);

		return (
			<BreakpointDefinitions.Consumer>
				{breakpoints => {
					const breakpointList = customBreakpoints || breakpoints;

					const matchingBps = Object.keys(breakpointList).filter(
						bpName => (this.state.size || 0) >= breakpointList[bpName],
					);
					const currentBp = matchingBps[matchingBps.length - 1];

					// Formatted breakpoints for className output
					const classBps = matchingBps
						.map(bpName => `${CLASSES.BP_PREFIX}${bpName}`)
						.join(' ');

					return (
						<div
							className={cx(CLASSES.CORE, containerClass, {
								[classBps]: !noBpClasses,
								[CLASSES.DEBUG_MODIFIER]: isDebugActive,
								// If there are no class name outputs, BUT debug mode is on,
								// render the active bp as a class to enable CSS debug indicator
								[`${CLASSES.BP_PREFIX}${currentBp}`]: debug && noBpClasses,
							})}
						>
							<ReactResizeDetector
								handleWidth
								onResize={size => this.setState({ size, currentBp })}
							/>

							<div className={cx(SELECTORS.BP_CONTENT, className)}>
								<WithContext {...{ identifier, currentBp }}>
									{typeof children === 'function'
										? (children as Function)(currentBp, this.state.size)
										: children}
								</WithContext>
							</div>

							{isDebugActive && (
								<>
									<span className={SELECTORS.DEBUG_INDICATOR}>
										{currentBp || 'none'}
									</span>
									{identifier !== ID_DEFAULT && identifier !== ID_BROWSER && (
										<span className={SELECTORS.DEBUG_IDENTIFIER}>
											{identifier}
										</span>
									)}
								</>
							)}
						</div>
					);
				}}
			</BreakpointDefinitions.Consumer>
		);
	}