SEMI DESIGN 源码学习(九)时间选择器

375 阅读1分钟

SEMI DESIGN

LocaleTimePicker

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

image.png

TimePicker

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

image.png

TimeInput

TimeInput 使用一个 Input 组件

image.png

image.png

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

image.png

它通过 getPanelElement 方法返回 Combobox 组件

image.png

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

image.png

Combobox

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

image.png

state,foundation,adapter

TimePickerstate 存储了组件内部数据,不算复杂

image.png

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

image.png

adapter 监听组件的事件

image.png

本文完,感谢阅读🌹