Repository: h2oai/wave
File: ui/src/time_picker.tsx (TypeScript)

Code before:
        {theme && AdapterDateFns && format
          ? <ThemeProvider theme={theme}>
            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <TimePicker
                value={value}
                label={label}
                open={isDialogOpen}
                onChange={onChangeTime}
                onAccept={onSelectTime}
                onClose={() => setIsDialogOpen(false)}
                ampm={hour_format === '12'}
                showToolbar
                ToolbarComponent={({ parsedValue, setOpenView, ampm }) =>
                  // Traps focus inside the popover.
                  // TODO: Check why focus gets back to the textfield after opening the popover from dialog.
                  <Fluent.FocusTrapZone isClickableOutsideFocusTrap>
                    <Toolbar
                      setOpenView={setOpenView}
                      time={
                        parsedValue
                          ? formatDateToTimeString(value && isOutOfBounds(parsedValue as D, minTime, maxTime) ? value : parsedValue as D, ampm ? '12' : '24')
                          : null
                      }
                      label={label}
                      switchAmPm={switchAmPm}
                      amPmDisabled={value ? !canSwitchAmPm(value, minTime, maxTime) : false}
                    />
                  </Fluent.FocusTrapZone>
                }
                PopperProps={{ ref: popperRef, anchorEl: () => textInputRef.current as VirtualElement, onBlur, ...popoverProps }}
                minTime={min ? minTime : undefined}
                maxTime={max ? maxTime : undefined}
                minutesStep={allowedMinutesSteps[minutes_step]}
                disabled={disabled}
                onOpen={onOpen}
                renderInput={({ inputProps }: TextFieldProps) =>
                  <div ref={textInputRef} data-test={m.name}>
                    <Fluent.TextField
                      iconProps={{ iconName: 'Clock' }}
                      onClick={() => setIsDialogOpen(true)}
                      onChange={inputProps?.onChange}
                      placeholder={placeholder}
                      disabled={disabled}
                      readOnly
                      value={value ? formatDateToTimeString(value, hour_format) : ''}
                      label={label}
                      required={required}
                      styles={{ field: { cursor: 'pointer', height: 32 }, icon: { bottom: 7 } }}
                    />
                  </div>
                }

Review comment (suggestion):
Can be simplified.

```suggestion
                      amPmDisabled={!value || !canSwitchAmPm(value, minTime, maxTime)}
```

Code after:
                  </Fluent.FocusTrapZone>
                }
                PopperProps={{ ref: popperRef, anchorEl: () => textInputRef.current as VirtualElement, onBlur, ...popoverProps }}
                minTime={min ? minTime : undefined}
                maxTime={max ? maxTime : undefined}
                minutesStep={allowedMinutesSteps[minutes_step]}
                disabled={disabled}
                onOpen={onOpen}
                renderInput={() =>
                  <div ref={textInputRef} data-test={m.name}>
                    <Fluent.TextField
                      iconProps={{ iconName: 'Clock' }}
                      onClick={() => setIsDialogOpen(true)}
                      placeholder={placeholder}
                      disabled={disabled}
                      readOnly
                      value={value ? formatDateToTimeString(value, hour_format) : ''}
                      label={label}
                      required={required}
                      styles={{ field: { cursor: 'pointer', height: 32 }, icon: { bottom: 7 } }}
                    />
                  </div>
                }
              />
            </LocalizationProvider>
          </ThemeProvider>
          : <LazyLoadPlaceholder />
        }
      </React.Suspense>
    </>
  }