function TimeRangeDropdown()

in src/components/Search/TimeRangeDropdown.tsx [21:98]

• 54 lines of code
• 2 McCabe index (conditional complexity)

function TimeRangeDropdown({
  timeRangeValue,
  onChange,
}: TimeRangeDropdownProps) {
  const mode = useAppSelector((state) => state.theme.mode);

  const styles = {
    container: style({
      width: '100%',

      $nest: {
        '.MuiInputBase-root': {
          ...(mode === 'light'
            ? ButtonsLightRaw.Dropdown
            : ButtonsDarkRaw.Dropdown),
        },
      },
    }),
    menuItem: style({
      display: 'block',
    }),
    // This extra flexible div is needed, so that the information looks the same in
    // both the MenuItem (in the dropdown options) and the SelectedItem (in
    // the dropdown, when the dropdown is closed).
    dateRange: style({
      display: 'flex',
      justifyContent: 'space-between',
    }),
  };

  const handleTimeRangeSelect = (event: SelectChangeEvent) => {
    const value = +event.target.value as TimeRange['value'];
    onChange(value);
  };

  return (
    <>
      <FormControl className={`timerange-dropdown ${styles.container}`}>
        <Select
          data-testid='dropdown-select-timerange'
          label={strings.selectLabel}
          value={`${timeRangeValue}`}
          labelId='select-timerange-label'
          className='dropdown-select'
          variant='standard'
          onChange={(e) => void handleTimeRangeSelect(e)}
          name='selectedTimeRange'
          MenuProps={{
            classes: {
              paper: `paper-repo paper-${mode === 'light' ? 'light' : 'dark'}`,
            },
          }}
        >
          {Object.entries(timeRangeMap).map(([value, text]) => (
            <MenuItem
              value={value}
              key={value}
              className={`timerange-dropdown-item ${styles.menuItem}`}
            >
              <div className={styles.dateRange}>
                {text}
                <Box
                  sx={{ color: 'text.secondary' }}
                  className={FontSize.Small}
                >
                  {`(${formatDateRange(
                    new Date(Date.now() - Number(value) * 1000),
                    new Date(),
                  )})`}
                </Box>
              </div>
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </>
  );
}