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

本文完,感谢阅读🌹

相关推荐
社恐的下水道蟑螂1 分钟前
LangChain 进阶实战:从玩具 Demo 到生产级 AI 应用(JS/TS 全栈版)
前端·langchain·openai
Fairy要carry3 分钟前
项目01-手搓Agent之loop
前端·javascript·python
亲亲小宝宝鸭8 分钟前
Ctrl ACV工程师的提效之路:删掉项目中的冗余
前端
kyriewen12 分钟前
DOM树与节点操作:用JS给网页“动手术”
前端·javascript·面试
米饭同学i15 分钟前
基于腾讯云COS的小程序素材上传功能实现
前端·javascript·react.js
cxxcode15 分钟前
前端性能指标接入 Prometheus 技术方案
前端
辣椒炒代码16 分钟前
🚀 AI Agent 入门实战:基于 LangChain + MCP 构建智能导游助手
前端
ruanCat20 分钟前
前端工程化工具链从零配置:simple-git-hooks + lint-staged + commitlint
前端·git·代码规范
光影少年22 分钟前
如何开发一个CLI工具?
javascript·测试工具·前端框架·node.js
哈__33 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-fingerprint-scanner
javascript·react native·react.js