分类: antd

TreeSelect 组件

基于 rc-select 中的 generate(options) 提供下拉框处理逻辑,rc-tree-select 实现了自己的 OptionList、Selector 组件以及 internalProps 处理函数。

Select 组件

Select 组件基于 rc-select 组装外观,主要功能包含: 多种展示模式:默认的单选模式、multiple 多选模式、tags 标签模式(支持随意输入值)、combobox 。 搜索功能:通过 props.showSearch、props.onSearch、props.optionFilterProp 配置搜索过滤能力。 选项分组:通过 OptGroup 组件设置选项分组。 扩展菜单:

Upload 组件

Upload 组件构成如下: rc-upload 提供基本的文件上传功能。Upload 组件在 rc-upload 基础上创建外观,实现文件与表单交互,并集成 UploadList 文件列表。 rc-uploadrc-upload 的实现逻辑基于:由隐藏的 input 元素获取上传文件,再通过 ajax 上传 FormData 数据。上传时包含常规的 ajax 功能点以及 input 表单控件的功

聊聊 Ant Design 组件库的构成

底层功能组件rc-utilKeyCode: 记录了各按键的编码,并提供按键判断工具。 hooksuseMergedState(defaultStateValue, option) 主要用于表单项的 value 值状态处理,也可以用于其他状态处理。逻辑上,首先以 option.value、option.defaultValue、defaultStateValue 的顺序设置内部 value 状态值,

DatePicker

新版的 DatePicker 基于 react-hooks 制作,让我们一步步揭开它的面纱。 DatePicker 分为 Picker 单值选择器、RangePicker 范围选择器两类。 公共模块除了时间处理模块可切换使用 day.js 或 moment 以外。Picker、RangePicker 复用了以下三个组件: PickerTrigger: 抽象了弹层展示逻辑的组件,基于 rc-tri

聊聊组件库的测试

antdant-design 基于 jest 断言库、enzyme、react-test-renderer 作测试。有文章认为,enzyme 包含 react-test-renderer 的能力,并且以类 jquery 的方式提供了更便捷的 api 操作。 jest 配置: moduleNameMapper:正则到模块名的 map 映射,这些模块将不会被模拟,无论启动自动模拟与否。 transf

聊聊组件库中样式文件组织

antdantd 基于 normalize.css 制作了重置样式 base.less。 按 babel-plugin-import 按需加载功能的实现机制,样式文件须放在 style 文件夹下,并以 index 文件形式导出。 色彩模式antd 定义了一套 色彩模式(Color Palettes)。可以发现,antd 中的 colorPalette.less 与 @ant-design/colo

聊聊 antd 网站是怎么制作的

翻看 ant-design 仓库,可以发现以下形式的 markdown 文档,这篇文章旨在于解答这样一个问题:ant design 是怎样把这些文档渲染成页面的。 12345678910111213141516171819202122232425262728293031// ant-design Button 组件 demo// 注释:元数据内容---order: 0title: zh-CN:

Menu

antd 中的 Menu 组件用于绘制菜单栏,其实现基于 rc-menu。本文第一部分介绍菜单栏实现的整体结构;第二部分介绍 rc-menu;第三部分介绍 Menu 组件。 需要声明的是,本文使用 RcMenu 指代 rc-menu 输出的 Menu 组件或其实例,使用 Menu 指代 antd 输出的 Menu 组件或其实例、或抽象意义的菜单栏组件,余同。 整体结构在视图上,菜单栏分为水平布局和

Radio, Checkbox

antd 中的 Radio, Checkbox 组件均基于 rc-checkbox 实现。本文第一部分将介绍 rc-checkbox,余下两部分再介绍 Radio, Checkbox 组件。 rc-checkboxrc-checkbox 输出 Checkbox 组件。其处理逻辑较为简单,包含样式类转换、多余 props 剔除等。元素层级上,rc-checkbox 使用 span 包裹 input