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

本文完,感谢阅读🌹

相关推荐
秋天的一阵风3 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风4 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺24 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺24 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码25 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou26 分钟前
组件测试
前端
数据智能老司机28 分钟前
React关键概念——理解React组件与JSX
react native·react.js·前端框架
JustHappy28 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可42 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron