render()

in src/pagination/pagination.tsx [103:255]
144 lines of code
13 McCabe index (conditional complexity)

  render() {
    const { overrides = {}, currentPage, labels, numPages, size } = this.props;

    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
    const [MaxLabel, maxLabelProps] = getOverrides(overrides.MaxLabel, StyledMaxLabel);
    const [DropdownContainer, dropdownContainerProps] = getOverrides(
      overrides.DropdownContainer,
      StyledDropdownContainer
    );
    const [Select, selectProps] = getOverrides(overrides.Select, BaseSelect);

    const defaultSelectOverrides = {
      ControlContainer: {
        // @ts-ignore
        style: ({ $theme, $disabled, $isOpen, $error }) => ({
          borderLeftColor: 'transparent',
          borderRightColor: 'transparent',
          borderTopColor: 'transparent',
          borderBottomColor: 'transparent',
          boxShadow: 'none',
          backgroundColor: $disabled
            ? $theme.colors.buttonDisabledFill
            : $isOpen
            ? $theme.colors.buttonTertiaryHover
            : $error
            ? $theme.colors.backgroundLightNegative
            : $theme.colors.buttonTertiaryFill,
          ':hover': {
            backgroundColor: $theme.colors.buttonTertiaryHover,
          },
        }),
      },
      InputContainer: {
        style: {
          marginLeft: 0,
        },
      },
      ValueContainer: {
        style: {
          flexBasis: 'auto',
        },
      },
      SingleValue: {
        // @ts-ignore
        style: ({ $theme }) => ({
          position: 'relative',
          paddingTop: '0',
          paddingBottom: '0',
          paddingLeft: $theme.sizing.scale200,
          paddingRight: $theme.sizing.scale500,
          color: $theme.colors.buttonTertiaryText,
          ...$theme.typography.font350,
          lineHeight: 'unset',
        }),
      },
      SelectArrow: {
        // @ts-ignore
        style: ({ $theme }) => ({
          width: '24px',
          height: '24px',
          color: $theme.colors.buttonTertiaryText,
        }),
      },
    };
    selectProps.overrides = mergeOverrides(defaultSelectOverrides, selectProps.overrides);

    const options = this.getMenuOptions(numPages);

    return (
      <ThemeContext.Consumer>
        {(theme) => (
          <LocaleContext.Consumer>
            {(locale) => (
              <Root data-baseweb="pagination" {...rootProps}>
                <Button
                  aria-label={this.constructAriaWayfinderLabel(
                    locale,
                    'previous page. current page'
                  )}
                  disabled={currentPage <= 1}
                  onClick={this.onPrevClick}
                  startEnhancer={() => {
                    return theme.direction === 'rtl' ? (
                      <ChevronRight title={''} size={24} />
                    ) : (
                      <ChevronLeft title={''} size={24} />
                    );
                  }}
                  kind={KIND.tertiary}
                  overrides={{
                    BaseButton: overrides.PrevButton,
                  }}
                  size={size}
                  type="button"
                >
                  {labels && labels.prevButton ? labels.prevButton : locale.pagination.prev}
                </Button>

                <DropdownContainer
                  $isFocusVisible={this.state.isFocusVisible}
                  {...dropdownContainerProps}
                  onFocus={forkFocus(dropdownContainerProps, this.handleFocus)}
                  onBlur={forkBlur(dropdownContainerProps, this.handleBlur)}
                >
                  <Select
                    aria-label={this.constructAriaWayfinderLabel(locale, 'page')}
                    options={options}
                    labelKey="label"
                    valueKey="label"
                    onChange={this.onMenuItemSelect}
                    searchable={false}
                    clearable={false}
                    value={[{ label: currentPage }]}
                    maxDropdownHeight="200px"
                    size={size}
                    {...selectProps}
                  />
                </DropdownContainer>

                <MaxLabel {...maxLabelProps} aria-hidden={true}>
                  {`${
                    labels && labels.preposition
                      ? labels.preposition
                      : locale.pagination.preposition || ''
                  } ${numPages}`}
                </MaxLabel>
                <Button
                  aria-label={this.constructAriaWayfinderLabel(locale, 'next page. current page')}
                  disabled={currentPage >= numPages}
                  onClick={this.onNextClick}
                  endEnhancer={() => {
                    return theme.direction === 'rtl' ? (
                      <ChevronLeft title={''} size={24} />
                    ) : (
                      <ChevronRight title={''} size={24} />
                    );
                  }}
                  kind={KIND.tertiary}
                  overrides={{
                    BaseButton: overrides.NextButton,
                  }}
                  size={size}
                  type="button"
                >
                  {labels && labels.nextButton ? labels.nextButton : locale.pagination.next}
                </Button>
              </Root>
            )}
          </LocaleContext.Consumer>
        )}
      </ThemeContext.Consumer>
    );
  }