SEMI DESIGN 源码学习（九）时间选择器

SEMI DESIGN

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 监听组件的事件

本文完，感谢阅读🌹