Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import React from "react"; import { TimeSelect } from "./TimeSelect"; import { TimePickerProps } from "./TimeProps"; import { getValidTimeValue, genShowHourMinuteSecond, getHourMinuteSecond, getDisabledHours, getDisabledMinutes, getDisabledSeconds, } from "./util"; import { DateChangeContext } from "../calendar/DateProps"; type SelectType = "hour" | "minute" | "second"; export function Combobox({ value: _value, onChange, format = "HH:mm:ss", hourStep = 1, minuteStep = 1, secondStep = 1, ...props }: Partial<TimePickerProps>) { const value = getValidTimeValue(_value, props, format); const { showHour, showMinute, showSecond } = genShowHourMinuteSecond(format); const { hour = null, minute = null, second = null } = _value ? getHourMinuteSecond(value) : {}; const handleItemChange = (type: SelectType) => ( selectValue: number, context: DateChangeContext ): void => { const newValue = value.clone(); switch (type) { case "hour": newValue.hour(selectValue); break; case "minute": newValue.minute(selectValue); break; case "second": newValue.second(selectValue); break; } onChange(getValidTimeValue(newValue, props, format), context); }; return ( <> {showHour && ( <TimeSelect value={hour} to={23} step={hourStep} disabledValues={getDisabledHours(props)} onChange={handleItemChange("hour")} /> )} {showMinute && ( <TimeSelect value={minute} to={59} step={minuteStep} disabledValues={getDisabledMinutes(hour, props)} onChange={handleItemChange("minute")} /> )} {showSecond && ( <TimeSelect value={second} to={59} step={secondStep} disabledValues={getDisabledSeconds(hour, minute, props)} onChange={handleItemChange("second")} /> )} </> ); } |