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

本文完,感谢阅读🌹

相关推荐
zhangxingchao4 分钟前
Android开发者如何快速上手Flutter开发
前端
空&白19 分钟前
css元素的after制作斜向的删除线
前端·css
海盐泡泡龟19 分钟前
“组件、路由懒加载”,在 Vue3 和 React 中分别如何实现? (copy)
前端·javascript·react.js
coding随想28 分钟前
深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙
javascript
_揽1 小时前
html如何在一张图片上的某一个区域做到点击事件
前端·html
踢足球的,程序猿1 小时前
从 Vue 2.0 进阶到 Vue 3.0 的核心技术解析指南
前端·javascript·vue.js·前端框架·html
冷凌爱1 小时前
Fetch与Axios:区别、联系、优缺点及使用差异
前端·node.js·js
袁煦丞1 小时前
跨平台终端王者Tabby:cpolar内网穿透实验室第632个成功挑战
前端·程序员·远程工作
Sailing1 小时前
Grafana-mcp-analyzer:基于 MCP 的轻量 AI 分析监控图表的运维神器!
前端·node.js·mcp
阿山同学.2 小时前
AWS 亚马逊 S3存储桶直传 前端demo 复制即可使用
前端·javascript·aws