render()

in src/datepicker/datepicker.tsx [521:649]

• 125 lines of code
• 15 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 && !this.props.separateRangeInputs
        ? `${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}
                  {...this.props}
                  onChange={this.onCalendarSelect}
                  selectedInput={this.state.selectedInput}
                  hasLockedBehavior={this.hasLockedBehavior()}
                />
              }
              {...popoverProps}
            >
              <InputWrapper
                {...inputWrapperProps}
                $separateRangeInputs={this.props.range && this.props.separateRangeInputs}
              >
                {this.props.range && this.props.separateRangeInputs ? (
                  <>
                    <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>
                  </>
                ) : (
                  <>{this.renderInputComponent(locale)}</>
                )}
              </InputWrapper>
            </PopoverComponent>
            <p
              // @ts-ignore
              id={this.state.ariaDescribedby}
              style={{
                position: 'fixed',
                width: '0px',
                height: '0px',
                borderLeftWidth: 0,
                borderRightWidth: 0,
                borderTopWidth: 0,
                borderBottomWidth: 0,
                padding: 0,
                overflow: 'hidden',
                clip: 'rect(0, 0, 0, 0)',
                clipPath: 'inset(100%)',
              }}
            >
              {getInterpolatedString(locale.datepicker.screenReaderMessageInput, {
                formatString: formatString,
              })}
            </p>
            <p
              aria-live="assertive"
              style={{
                position: 'fixed',
                width: '0px',
                height: '0px',
                borderLeftWidth: 0,
                borderRightWidth: 0,
                borderTopWidth: 0,
                borderBottomWidth: 0,
                padding: 0,
                overflow: 'hidden',
                clip: 'rect(0, 0, 0, 0)',
                clipPath: 'inset(100%)',
              }}
            >
              {
                // No date selected
                !this.props.value ||
                (Array.isArray(this.props.value) && !this.props.value[0] && !this.props.value[1])
                  ? ''
                  : // Date selected in a non-range picker
                  !Array.isArray(this.props.value)
                  ? getInterpolatedString(locale.datepicker.selectedDate, {
                      date: this.state.inputValue || '',
                    })
                  : // Start and end dates are selected in a range picker
                  this.props.value[0] && this.props.value[1]
                  ? getInterpolatedString(locale.datepicker.selectedDateRange, {
                      startDate: this.formatDisplayValue(this.props.value[0]),
                      endDate: this.formatDisplayValue(this.props.value[1]),
                    })
                  : // A single date selected in a range picker
                    `${getInterpolatedString(locale.datepicker.selectedDate, {
                      date: this.formatDisplayValue(this.props.value[0]),
                    })} ${locale.datepicker.selectSecondDatePrompt}`
              }
            </p>
          </React.Fragment>
        )}
      </LocaleContext.Consumer>
    );
  }