render()

in desktop/flipper-plugin/src/ui/Sidebar.tsx [140:208]

• 65 lines of code
• 21 McCabe index (conditional complexity)

  render() {
    const {onResize, position, children, gutter} = this.props;
    let height: number | undefined;
    let minHeight: number | undefined;
    let maxHeight: number | undefined;
    let width: number | undefined;
    let minWidth: number | undefined;
    let maxWidth: number | undefined;

    // TODO: memo
    const resizable: {[key: string]: boolean} = {};
    if (position === 'left') {
      resizable.right = true;
      ({width, minWidth, maxWidth} = this.props);
    } else if (position === 'top') {
      resizable.bottom = true;
      ({height, minHeight, maxHeight} = this.props);
    } else if (position === 'right') {
      resizable.left = true;
      ({width, minWidth, maxWidth} = this.props);
    } else if (position === 'bottom') {
      resizable.top = true;
      ({height, minHeight, maxHeight} = this.props);
    }

    const horizontal = position === 'left' || position === 'right';
    const gutterWidth = gutter ? theme.space.large : 0;

    if (horizontal) {
      width = width == null ? 200 : width;
      minWidth = (minWidth == null ? 100 : minWidth) + gutterWidth;
      maxWidth = maxWidth == null ? 600 : maxWidth;
    } else {
      height = height == null ? 200 : height;
      minHeight = minHeight == null ? 100 : minHeight;
      maxHeight = maxHeight == null ? 600 : maxHeight;
    }
    return (
      <SidebarInteractiveContainer
        className={this.props.className}
        minWidth={minWidth}
        maxWidth={maxWidth}
        width={
          horizontal
            ? !children
              ? gutterWidth
              : onResize
              ? width
              : this.state.width
            : undefined
        }
        minHeight={minHeight}
        maxHeight={maxHeight}
        height={
          !horizontal ? (onResize ? height : this.state.height) : undefined
        }
        resizable={resizable}
        onResize={this.onResize}
        gutterWidth={gutter ? theme.space.large : undefined}>
        <SidebarContainer position={position} unstyled={gutter}>
          {gutter ? (
            <GutterWrapper position={position}>{children}</GutterWrapper>
          ) : (
            children
          )}
        </SidebarContainer>
      </SidebarInteractiveContainer>
    );
  }