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

SEMI DESIGN

LocaleTimePicker

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

TimePicker

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

TimeInput

TimeInput 使用一个 Input 组件

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

它通过 getPanelElement 方法返回 Combobox 组件

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

Combobox

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

state,foundation,adapter

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

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

adapter 监听组件的事件

本文完,感谢阅读🌹

相关推荐
excel7 分钟前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼3 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping3 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙4 小时前
[译] Composition in CSS
前端·css
白水清风4 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix4 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278004 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端4 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧4 小时前
Promise 的使用
前端·javascript