分类: antd

聊聊 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

Grid 栅格

antd 提供的 24 栅格系统由 Row, Col 组件实现。 Row栅格布局组件 Row 用于设定整行 row 内各组 col 的布局风格。当 props.type 为 ‘flex’ 时,意味着整行采用 flex 布局。在 flex 布局的基础上,props.justify 通过 justify-content 样式影响各 col 元素的水平排列方式;props.align 通过 align-

Layout 布局

antd 提供 Layout, Header, Sider, Content, Footer 组件用于划定页面布局。实现上,侧边栏 Sider 组件比较特殊,将在第一部分加以介绍;其余组件均将在第一部分加以介绍。 Layout布局容器 Layout, 顶部布局 Header, 内容部分 Content, 底部布局 Footer 在实现上大体相当:都是通过 generator(props) = Ba

antd-Input 组件

Input 组件Input 组件只关乎布局,其余均为常规处理。props.addonBefore 为前置标签,props.addonAfter 为后置标签,props.prefix 前缀图标,props.suffix 后缀图标。参看官方图例: Input 组件在 render 方法执行阶段将绘制出 input 原生组件。鉴于 react 的实现机制,对于 input 原生组件的处理,有受控组件和