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

本文完,感谢阅读🌹

相关推荐
xcLeigh17 分钟前
HTML5好看的音乐播放器多种风格(附源码)
前端·html·html5
Eternity-52727 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
呼啦啦啦啦啦啦啦啦30 分钟前
每日刷题(有效括号序列,滑动窗口最大值,最小的K个数,寻找第K大)
java·前端·javascript
dr李四维1 小时前
应用商店双弹窗“APP在向用户申请权限时未同步告知用户申请此权限的理由”驳回uni-app应用上线的解决方法
前端·javascript·笔记·uni-app·产品运营·bug·产品经理
秋田君1 小时前
实现 UniApp 右上角按钮“扫一扫”功能实战教学
前端·javascript·uni-app
竣子好逑1 小时前
uniapp 自定义popup 弹窗 简单封装(微信小程序)
前端·微信小程序·小程序·uni-app·uniapp
ZZZ_zzz5551 小时前
Spring—Bean工厂进一步学习
javascript·学习·spring
PleaSure乐事2 小时前
JS/JSP/JSX的区别与关联
前端·javascript·react.js·前端框架·jsp·jsx
晓Ming_2 小时前
css效果
前端·css
夫琅禾费米线3 小时前
[有趣的JavaScript] 为什么typeof null返回 object
开发语言·前端·javascript