render()

in src/datepicker/datepicker_DO_NOT_USE.tsx [583:669]
84 lines of code
4 McCabe index (conditional complexity)

  render() {
    const { overrides = {}, startDateLabel = 'Start Date', endDateLabel = 'End Date' } = this.props;
    const [PopoverComponent, popoverProps] = getOverrides(overrides.Popover, Popover);
    const [InputWrapper, inputWrapperProps] = getOverrides(
      overrides.InputWrapper,
      StyledInputWrapper
    );
    const [StartDate, startDateProps] = getOverrides(overrides.StartDate, StyledStartDate);
    const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
    const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);

    const singleDateFormatString = this.props.formatString || DEFAULT_DATE_FORMAT;
    const formatString: string = this.props.range
      ? `${singleDateFormatString} ${INPUT_DELIMITER} ${singleDateFormatString}`
      : singleDateFormatString;

    return (
      <LocaleContext.Consumer>
        {(locale) => (
          <React.Fragment>
            <PopoverComponent
              accessibilityType={ACCESSIBILITY_TYPE.none}
              focusLock={false}
              autoFocus={false}
              mountNode={this.props.mountNode}
              placement={PLACEMENT.bottom}
              isOpen={this.state.isOpen}
              onClickOutside={this.close}
              onEsc={this.handleEsc}
              content={
                <Calendar
                  adapter={this.props.adapter}
                  autoFocusCalendar={this.state.calendarFocused}
                  trapTabbing={true}
                  value={this.props.value}
                  onChange={this.onCalendarSelect}
                  selectedInput={this.state.selectedInput}
                  hasLockedBehavior={this.hasLockedBehavior()}
                  primaryButton={{
                    label: 'Done',
                    onClick: this.close,
                  }}
                  secondaryButton={{
                    label: 'Cancel',
                    onClick: this.close,
                  }}
                  id={this.calendarID}
                  {...this.props}
                />
              }
              {...popoverProps}
            >
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  gap: '8px',
                }}
              >
                <InputWrapper {...inputWrapperProps} $separateRangeInputs={this.props.range}>
                  {this.props.range ? (
                    <>
                      <StartDate {...startDateProps}>
                        <InputLabel {...inputLabelProps}>{startDateLabel}</InputLabel>
                        {this.renderInputComponent(locale, INPUT_ROLE.startDate)}
                      </StartDate>

                      <EndDate {...endDateProps}>
                        <InputLabel {...inputLabelProps}>{endDateLabel}</InputLabel>
                        {this.renderInputComponent(locale, INPUT_ROLE.endDate)}
                      </EndDate>
                    </>
                  ) : (
                    <>
                      <InputLabel {...inputLabelProps}>{startDateLabel}</InputLabel>
                      {this.renderInputComponent(locale)}
                    </>
                  )}
                </InputWrapper>
                <div style={{ marginTop: '28px' }}>{this.renderCalendarSelect()}</div>
              </div>
            </PopoverComponent>
          </React.Fragment>
        )}
      </LocaleContext.Consumer>
    );
  }