-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix: 修复徽章显示错误的问题 * feat: 添加列的的 `headerRenderer` 属性来自定义渲染 fix: 修复carousel的ts类型问题 * fix: 修复表格在弹出框中无法正确的显示编辑框 * fix: 修复eslint * fix: 修复eslint * fix: 修复无法在照片墙上进行调用删除文件 * fix: 调整上传组件 * feat: 添加表格的改变事件 * fix: 合并代码 Co-authored-by: jhoneybee <[email protected]> Co-authored-by: jhonebee <[email protected]>
- Loading branch information
3 people
authored
Mar 31, 2021
1 parent
83ac640
commit dc01c63
Showing
20 changed files
with
3,057 additions
and
18,659 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,46 @@ | ||
| --- | ||
| nav: | ||
| title: 组件 | ||
| path: /components | ||
| group: | ||
| path: /components/base | ||
| title: 基础组件 | ||
| title: Breadcrumb 面包屑 | ||
| --- | ||
|
|
||
| # Breadcrumb 面包屑 | ||
|
|
||
| ## 代码演示 | ||
|
|
||
| <code src="./demo/simple.tsx" /> | ||
|
|
||
| ## API | ||
|
|
||
| ### Descriptions | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |itemRender |自定义链接函数，和 react-router 配置使用| `(route, params, routes, paths) => ReactNode` | - | ||
| |params |路由的参数 | `object` | - | ||
| |routes |router 的路由栈信息 | `routes[]` | - | ||
| |separator |分隔符自定义 | `ReactNode` | `/` | ||
|
|
||
|
|
||
| ### Breadcrumb.Item | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |dropdownProps|弹出下拉菜单的自定义配置 |`Dropdown` | - | ||
| |href |链接的目的地 |`string`| - | ||
| |overlay |下拉菜单的内容 |`Menu` \| `() => Menu`| - | ||
| |onClick |单击事件 |`(e:MouseEvent) => void`| - | ||
|
|
||
| ### Breadcrumb.Separator | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |children |要显示的分隔符 |`ReactNode` | `/` | ||
|
|
||
| > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。 | ||
|
|
||
| --- | ||
| nav: | ||
| title: 组件 | ||
| path: /components | ||
| group: | ||
| path: /components/base | ||
| title: 基础组件 | ||
| title: Breadcrumb 面包屑 | ||
| --- | ||
|
|
||
| # Breadcrumb 面包屑 | ||
|
|
||
| ## 代码演示 | ||
|
|
||
| <code src="./demo/simple.tsx" /> | ||
|
|
||
| ## API | ||
|
|
||
| ### Descriptions | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |itemRender |自定义链接函数，和 react-router 配置使用| `(route, params, routes, paths) => ReactNode` | - | ||
| |params |路由的参数 | `object` | - | ||
| |routes |router 的路由栈信息 | `routes[]` | - | ||
| |separator |分隔符自定义 | `ReactNode` | `/` | ||
|
|
||
|
|
||
| ### Breadcrumb.Item | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |dropdownProps|弹出下拉菜单的自定义配置 |`Dropdown` | - | ||
| |href |链接的目的地 |`string`| - | ||
| |overlay |下拉菜单的内容 |`Menu` \| `() => Menu`| - | ||
| |onClick |单击事件 |`(e:MouseEvent) => void`| - | ||
|
|
||
| ### Breadcrumb.Separator | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |children |要显示的分隔符 |`ReactNode` | `/` | ||
|
|
||
| > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,39 @@ | ||
| --- | ||
| nav: | ||
| title: 组件 | ||
| path: /components | ||
| group: | ||
| path: /components/display | ||
| title: 数据展现 | ||
| title: Descriptions 描述列表 | ||
| --- | ||
|
|
||
| # Descriptions 描述列表 | ||
|
|
||
| ## 代码演示 | ||
|
|
||
| <code src="./demo/simple.tsx" /> | ||
|
|
||
| ## API | ||
|
|
||
| ### Descriptions | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |bordered |是否展示边框 |`boolean` | `false` | ||
| |colon |配置 `Descriptions.Item` 的 `colon` 的默认值|`boolean` | `true` | ||
| |column |一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`|`number` | `3` | ||
| |extra |描述列表的操作区域，显示在右上方|`ReactNode` | - | ||
| |layout |描述布局| `horizontal` \| `vertical` | `horizontal` | ||
| |size |设置列表的大小。可以设置为 `middle`, `small`, 或不填(只有设置 `bordered={true}` 生效)| `default` \| `middle` \| `small` | ||
| |title |描述列表的标题，显示在最顶部| `ReactNode` | ||
|
|
||
|
|
||
| ### Descriptions.Item | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |label |内容的描述 |`ReactNode`| - | ||
| |span |包含列的数量 |`number` | `1` | ||
|
|
||
|
|
||
| --- | ||
| nav: | ||
| title: 组件 | ||
| path: /components | ||
| group: | ||
| path: /components/display | ||
| title: 数据展现 | ||
| title: Descriptions 描述列表 | ||
| --- | ||
|
|
||
| # Descriptions 描述列表 | ||
|
|
||
| ## 代码演示 | ||
|
|
||
| <code src="./demo/simple.tsx" /> | ||
|
|
||
| ## API | ||
|
|
||
| ### Descriptions | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |bordered |是否展示边框 |`boolean` | `false` | ||
| |colon |配置 `Descriptions.Item` 的 `colon` 的默认值|`boolean` | `true` | ||
| |column |一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`|`number` | `3` | ||
| |extra |描述列表的操作区域，显示在右上方|`ReactNode` | - | ||
| |layout |描述布局| `horizontal` \| `vertical` | `horizontal` | ||
| |size |设置列表的大小。可以设置为 `middle`, `small`, 或不填(只有设置 `bordered={true}` 生效)| `default` \| `middle` \| `small` | ||
| |title |描述列表的标题，显示在最顶部| `ReactNode` | ||
|
|
||
|
|
||
| ### Descriptions.Item | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | ||
| |------- |----- |----- |------- | ||
| |label |内容的描述 |`ReactNode`| - | ||
| |span |包含列的数量 |`number` | `1` | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,86 @@ | ||
| --- | ||
| nav: | ||
| title: 组件 | ||
| path: /components | ||
| group: | ||
| path: /components/input | ||
| title: 数据录入 | ||
| title: Form 表单组件 | ||
| --- | ||
|
|
||
| # Form 表单组件 | ||
|
|
||
| ## 代码演示 | ||
|
|
||
|
|
||
| <code src="./demo/simple.tsx" /> | ||
|
|
||
| <code src="./demo/linkage.tsx" /> | ||
|
|
||
| <code src="./demo/modal.tsx" /> | ||
|
|
||
| ## API | ||
|
|
||
| Form属性说明如下： | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |cols | 当前列的总数 | `number` | `5` | ||
| |onFinish | 提交表单且数据验证成功后回调事件 | `Function(values)` | | ||
| |onFinishFailed | 提交表单且数据验证失败后回调事件 | `Function({ values, errorFields, outOfDate })`| | ||
| |onFieldsChange | 字段更新时触发回调事件 | `Function(changedFields, allFields)` | ||
| |onValuesChange | 字段值更新时触发回调事件 | `Function(changedValues, allValues)` | ||
| |form | form实例对象 | `React.MutableRefObject` | - | ||
|
|
||
|
|
||
| ## Form.Item | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |label | 标签的文本 | `string` | - | ||
| |name | 字段名 | `string` | - | ||
| |rules | 字段校验规则 | `Rule[]` | - | ||
| |shouldUpdate | 自定义字段更新逻辑| `(prevValue, curValue) => boolean` | - | ||
| |validateFirst| 当某一规则校验不通过时，是否停止剩下的规则的校验 | `boolean` | `false` | ||
| |hidden | 是否隐藏字段（依然会收集和校验字段） | `boolean`| `false` | ||
| |dependencies | 设置依赖字段 | `string[]` | - | ||
| |labelWidth | 固定Form的宽度 | `number`| - | ||
|
|
||
| ### dependencies | ||
| 当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的"密码"与"确认密码"字段。"确认密码"校验依赖于"密码"字段，设置 `dependencies` 后，“密码”字段更新会重新触发 "校验密码" 的校验逻辑。 | ||
|
|
||
|
|
||
| ## FormInstance | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |getFieldInstance | 获取对应字段示例 | `(name: NamePath) => any` | ||
| |getFieldValue | 获取对应字段名的值 |`(name: NamePath) => any` | ||
| |getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回| `(nameList?: NamePath[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any` | ||
| |getFieldError | 获取对应字段名的错误信息|`(name: NamePath) => string[]` | ||
| |getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式|`(nameList?: NamePath[]) => FieldError[] ` | ||
| |isFieldTouched | 检查对应字段是否被用户操作过|`(name: NamePath) => boolean` | ||
| |isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过|`(nameList?: NamePath[], allTouched?: boolean) => boolean` | ||
| |isFieldValidating | 检查一组字段是否正在校验|`(name: NamePath) => boolean` | ||
| |resetFields | 重置一组字段到 `initialValues`|`(fields?: NamePath[]) => void` | ||
| |scrollToField | 滚动到对应字段位置|`(name: NamePath, options: [ScrollOptions]) => void` | ||
| |setFields | 设置一组字段状态|`(fields: FieldData[]) => void` | ||
| |setFieldsValue | 设置表单的值|`(values) => void` | ||
| |submit | 提交表单，与点击 `submit` 按钮效果相同|`() => void` | ||
| |validateFields | 触发表单验证|`(nameList?: NamePath[]) => Promise` | ||
|
|
||
| ## Rule | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |enum |是否匹配枚举中的值| `any[]` | ||
| |len |string 类型时为字符串长度;number 类型时为确定数字; array 类型时为数组长度|`number` | ||
| |max |必须设置 type:string 类型为字符串最大长度;number 类型时为最大值;array 类型时为数组最大长度|`number` | ||
| |message |错误信息，不设置时会通过模板自动生成|`string` | ||
| |min |必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度|`number` | ||
| |pattern |正则表达式匹配|`RegExp` | ||
| |required |是否为必选字段|`boolean` | ||
| |transform |将字段值转换成目标值后进行校验|`(value) => any` | ||
| |type |类型，常见有 string \|number \|boolean \|url \| email。更多请参考此处|`string` | ||
| |validator |自定义校验，接收 Promise 作为返回值。示例参考|`(rule, value) => Promise` | ||
| |whitespace |如果字段仅包含空格则校验不通过| `boolean` | ||
| --- | ||
| nav: | ||
| title: 组件 | ||
| path: /components | ||
| group: | ||
| path: /components/input | ||
| title: 数据录入 | ||
| title: Form 表单组件 | ||
| --- | ||
|
|
||
| # Form 表单组件 | ||
|
|
||
| ## 代码演示 | ||
|
|
||
|
|
||
| <code src="./demo/simple.tsx" /> | ||
|
|
||
| <code src="./demo/linkage.tsx" /> | ||
|
|
||
| <code src="./demo/modal.tsx" /> | ||
|
|
||
| ## API | ||
|
|
||
| Form属性说明如下： | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |cols | 当前列的总数 | `number` | `5` | ||
| |onFinish | 提交表单且数据验证成功后回调事件 | `Function(values)` | | ||
| |onFinishFailed | 提交表单且数据验证失败后回调事件 | `Function({ values, errorFields, outOfDate })`| | ||
| |onFieldsChange | 字段更新时触发回调事件 | `Function(changedFields, allFields)` | ||
| |onValuesChange | 字段值更新时触发回调事件 | `Function(changedValues, allValues)` | ||
| |form | form实例对象 | `React.MutableRefObject` | - | ||
|
|
||
|
|
||
| ## Form.Item | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |label | 标签的文本 | `string` | - | ||
| |name | 字段名 | `string` | - | ||
| |rules | 字段校验规则 | `Rule[]` | - | ||
| |shouldUpdate | 自定义字段更新逻辑| `(prevValue, curValue) => boolean` | - | ||
| |validateFirst| 当某一规则校验不通过时，是否停止剩下的规则的校验 | `boolean` | `false` | ||
| |hidden | 是否隐藏字段（依然会收集和校验字段） | `boolean`| `false` | ||
| |dependencies | 设置依赖字段 | `string[]` | - | ||
| |labelWidth | 固定Form的宽度 | `number`| - | ||
|
|
||
| ### dependencies | ||
| 当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的"密码"与"确认密码"字段。"确认密码"校验依赖于"密码"字段，设置 `dependencies` 后，“密码”字段更新会重新触发 "校验密码" 的校验逻辑。 | ||
|
|
||
|
|
||
| ## FormInstance | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |getFieldInstance | 获取对应字段示例 | `(name: NamePath) => any` | ||
| |getFieldValue | 获取对应字段名的值 |`(name: NamePath) => any` | ||
| |getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回| `(nameList?: NamePath[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any` | ||
| |getFieldError | 获取对应字段名的错误信息|`(name: NamePath) => string[]` | ||
| |getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式|`(nameList?: NamePath[]) => FieldError[] ` | ||
| |isFieldTouched | 检查对应字段是否被用户操作过|`(name: NamePath) => boolean` | ||
| |isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过|`(nameList?: NamePath[], allTouched?: boolean) => boolean` | ||
| |isFieldValidating | 检查一组字段是否正在校验|`(name: NamePath) => boolean` | ||
| |resetFields | 重置一组字段到 `initialValues`|`(fields?: NamePath[]) => void` | ||
| |scrollToField | 滚动到对应字段位置|`(name: NamePath, options: [ScrollOptions]) => void` | ||
| |setFields | 设置一组字段状态|`(fields: FieldData[]) => void` | ||
| |setFieldsValue | 设置表单的值|`(values) => void` | ||
| |submit | 提交表单，与点击 `submit` 按钮效果相同|`() => void` | ||
| |validateFields | 触发表单验证|`(nameList?: NamePath[]) => Promise` | ||
|
|
||
| ## Rule | ||
|
|
||
| |属性 |说明 |类型 |默认值 | ||
| |----- |------ |----- |------- | ||
| |enum |是否匹配枚举中的值| `any[]` | ||
| |len |string 类型时为字符串长度;number 类型时为确定数字; array 类型时为数组长度|`number` | ||
| |max |必须设置 type:string 类型为字符串最大长度;number 类型时为最大值;array 类型时为数组最大长度|`number` | ||
| |message |错误信息，不设置时会通过模板自动生成|`string` | ||
| |min |必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度|`number` | ||
| |pattern |正则表达式匹配|`RegExp` | ||
| |required |是否为必选字段|`boolean` | ||
| |transform |将字段值转换成目标值后进行校验|`(value) => any` | ||
| |type |类型，常见有 string \|number \|boolean \|url \| email。更多请参考此处|`string` | ||
| |validator |自定义校验，接收 Promise 作为返回值。示例参考|`(rule, value) => Promise` | ||
| |whitespace |如果字段仅包含空格则校验不通过| `boolean` |
Oops, something went wrong.
dc01c63There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: