SEMI DESIGN 源码学习(三)选择器

1,340 阅读1分钟

Select 组件位于 packages/semi-ui/select/index.tsx, 一共 1467 行代码,看起来挺复杂的。

image.png

照旧是一些属性接口的定义

image.png

值得留意的是这里用了 typeinterface 两种关键字来定义,其中 type类型别名,用于给各种类型定义别名,让 TS 写起来更简洁、清晰。 interface接口,用于描述一个对象。

一般使用组合或者交叉类型的时候用 type, 要用类的 extends 或 implements 时,用 interface

类似于 InputSelect 组件同样有一个 foundation 属性,不过这里是 SelectFoundation

image.png

同样是传入一个 adapter 用来管理内部值,处理事件,这样可以复用这一套逻辑。

image.png

最后的渲染函数返回一个 Popover 组件

image.png

内部判断是否使用 useCustomTrigger 再判断是否是多选。

image.png

OptionOptionGroup 比较简单,就是普通的无状态组件。

image.png

后面研究一下这个 adapter 模式,本文完。