LocaleTimePicker
TimePicker
组件位于 packages/semi-ui/timePicker
,默认返回一个 LocaleTimePicker
,它从 ConfigContext
中获取了时区状态,再返回一个有默认时区的 TimePicker

TimePicker
TimePicker
由一个输入框和弹出层组成,当使用 useCustomTrigger
时 TimePicker
使用 Trigger
组件作为弹出层的触发器,否则使用 TimeInput
组件

TimeInput
TimeInput
使用一个 Input
组件


当 TimePicker
激活时弹出时间选择组件

它通过 getPanelElement
方法返回 Combobox
组件

如果是时间范围就返回两个 Combobox

Combobox
Combobox
核心是三列选择器,分别通过 renderHourSelect
, renderMinuteSelect
, renderSecondSelect
渲染,最后使用一个 ScrollList
包含他们,用来添加滚动效果

state,foundation,adapter
TimePicker
的 state
存储了组件内部数据,不算复杂

foundation
是一个 TimePickerFoundation
实例,用来管理组件状态

adapter
监听组件的事件

本文完,感谢阅读🌹