From 857cbe1b23c71f217c9bcdf6dfde8ac9b9fb0111 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 14 Dec 2020 16:04:23 +0800 Subject: [PATCH] fix: Fixed columns z-index issue (#28346) * fix: Fixed columns z-index issue * fix lint --- .prettierignore | 2 -- components/alert/index.en-US.md | 8 +++---- components/auto-complete/index.en-US.md | 8 +++---- components/auto-complete/index.zh-CN.md | 8 +++---- components/breadcrumb/index.en-US.md | 6 ++--- components/breadcrumb/index.zh-CN.md | 6 ++--- components/form/index.en-US.md | 22 +++++++++--------- components/form/index.zh-CN.md | 30 ++++++++++++------------- components/modal/index.zh-CN.md | 2 +- components/table/index.en-US.md | 10 ++++++--- components/table/index.zh-CN.md | 20 ++++++++++------- components/table/style/index.less | 1 - components/tree/index.en-US.md | 6 ++--- components/tree/index.zh-CN.md | 6 ++--- docs/react/introduce.en-US.md | 3 +-- docs/react/introduce.zh-CN.md | 3 +-- 16 files changed, 72 insertions(+), 69 deletions(-) diff --git a/.prettierignore b/.prettierignore index 329a7f4e28..915ee45abe 100644 --- a/.prettierignore +++ b/.prettierignore @@ -21,8 +21,6 @@ yarn-error.log *.snap components/*/*.js components/*/*.jsx -components/*/*.md -docs/**/*.md .gitignore .npmignore .prettierignore diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index b7822fb7fb..ea8a7046ca 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -30,7 +30,7 @@ Alert component for feedback. ### Alert.ErrorBoundary -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| description | Custom error description to show | ReactNode | {{ error stack }} | | -| message | Custom error message to show | ReactNode | {{ error }} | | +| Property | Description | Type | Default | Version | +| ----------- | -------------------------------- | --------- | ----------------- | ------- | +| description | Custom error description to show | ReactNode | {{ error stack }} | | +| message | Custom error message to show | ReactNode | {{ error }} | | diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 1b465c342b..557b3256ec 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -42,10 +42,10 @@ When there is a need for autocomplete functionality. ## Methods -| Name | Description | Version | -| --- | --- | --- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| ------- | ------------ | ------- | +| blur() | Remove focus | | +| focus() | Get focus | | ## FAQ diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 0dc26c27e2..f661e2c905 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -50,10 +50,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg ## 方法 -| 名称 | 描述 | 版本 | -| --- | --- | --- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| ------- | -------- | ---- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | ## FAQ diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index 742eb462ca..943bea9cc0 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -36,9 +36,9 @@ A breadcrumb displays the current location within a hierarchy. It allows going b ### Breadcrumb.Separator -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| children | Custom separator | ReactNode | `/` | | +| Property | Description | Type | Default | Version | +| -------- | ---------------- | --------- | ------- | ------- | +| children | Custom separator | ReactNode | `/` | | > When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear. diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index cdda39bf5e..421158253d 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -37,9 +37,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg ### Breadcrumb.Separator -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| children | 要显示的分隔符 | ReactNode | `/` | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| -------- | -------------- | --------- | ------ | ---- | +| children | 要显示的分隔符 | ReactNode | `/` | | > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。 diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 72211d5d78..416340d892 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -94,7 +94,7 @@ Form field component for data bidirectional binding, validation, layout, and so | rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)\[] | - | | | shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 | -| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` | | +| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` | | | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | | | validateTrigger | When to validate the value of children node | string \| string\[] | `onChange` | | @@ -203,9 +203,9 @@ Some operator functions in render form of Form.List. New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item). -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| errors | Error list | ReactNode\[] | - | +| Property | Description | Type | Default | +| -------- | ----------- | ------------ | ------- | +| errors | Error list | ReactNode\[] | - | ## Form.Provider @@ -286,13 +286,13 @@ validateFields() #### FieldData -| Name | Description | Type | -| --- | --- | --- | -| errors | Error messages | string\[] | -| name | Field name path | [NamePath](#NamePath)\[] | -| touched | Whether is operated | boolean | -| validating | Whether is in validating | boolean | -| value | Field value | any | +| Name | Description | Type | +| ---------- | ------------------------ | ------------------------ | +| errors | Error messages | string\[] | +| name | Field name path | [NamePath](#NamePath)\[] | +| touched | Whether is operated | boolean | +| validating | Whether is in validating | boolean | +| value | Field value | any | #### Rule diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 957492de02..824b49c18e 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -195,19 +195,19 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到 Form.List 渲染表单相关操作函数。 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 | -| move | 移动表单项 | (from: number, to: number) => void | - | -| remove | 删除表单项 | (index: number \| number\[]) => void | number\[]: 4.5.0 | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---------- | -------------------------------------------------- | ------------------ | +| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 | +| move | 移动表单项 | (from: number, to: number) => void | - | +| remove | 删除表单项 | (index: number \| number\[]) => void | number\[]: 4.5.0 | ## Form.ErrorList 4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#components-form-demo-dynamic-form-item)。 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| errors | 错误列表 | ReactNode\[] | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | -------- | ------------ | ------ | +| errors | 错误列表 | ReactNode\[] | - | ## Form.Provider @@ -288,13 +288,13 @@ validateFields() #### FieldData -| 名称 | 说明 | 类型 | -| --- | --- | --- | -| errors | 错误信息 | string\[] | -| name | 字段名称 | [NamePath](#NamePath)\[] | -| touched | 是否被用户操作过 | boolean | -| validating | 是否正在校验 | boolean | -| value | 字段对应值 | any | +| 名称 | 说明 | 类型 | +| ---------- | ---------------- | ------------------------ | +| errors | 错误信息 | string\[] | +| name | 字段名称 | [NamePath](#NamePath)\[] | +| touched | 是否被用户操作过 | boolean | +| validating | 是否正在校验 | boolean | +| value | 字段对应值 | any | #### Rule diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index e7641a0d0c..8f666e1c57 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -127,7 +127,7 @@ browserHistory.listen(() => { ### Modal.useModal() -当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#Modal.method()) 相同的创建通知方法。 +当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](<#Modal.method()>) 相同的创建通知方法。 ```jsx const [modal, contextHolder] = Modal.useModal(); diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 4c8377d13f..e6594a2955 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -147,9 +147,9 @@ One of the Table `columns` prop for describing the table's columns, Column has t ### ColumnGroup -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| title | Title of the column group | ReactNode | - | +| Property | Description | Type | Default | +| -------- | ------------------------- | --------- | ------- | +| title | Title of the column group | ReactNode | - | ### pagination @@ -300,3 +300,7 @@ In order to improve user experience, Pagination show size changer by default whe ### Why Table fully render when state change? Table can not tell what state used in `columns.render`, so it always need fully render to avoid sync issue. You can use `column.shouldCellUpdate` to control render. + +### How to handle fixed column display over the mask layout? + +Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve. diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 76047f319b..28270cd0b4 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -154,9 +154,9 @@ const columns = [ ### ColumnGroup -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| title | 列头显示文字 | ReactNode | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----- | ------------ | --------- | ------ | +| title | 列头显示文字 | ReactNode | - | ### pagination @@ -220,11 +220,11 @@ const columns = [ ### selection -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| key | React 需要的 key，建议设置 | string | - | -| text | 选择项显示的文字 | ReactNode | - | -| onSelect | 选择项点击回调 | function(changeableRowKeys) | - | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | -------------------------- | --------------------------- | ------ | +| key | React 需要的 key，建议设置 | string | - | +| text | 选择项显示的文字 | ReactNode | - | +| onSelect | 选择项点击回调 | function(changeableRowKeys) | - | ## 在 TypeScript 中使用 @@ -305,3 +305,7 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou ### 为什么 更新 state 会导致全表渲染？ 由于 `columns` 支持 `render` 方法，因而 Table 无法知道哪些单元会受到影响。你可以通过 `column.shouldCellUpdate` 来控制单元格的渲染。 + +### 固定列穿透到最上层该怎么办？ + +固定列通过 `z-index` 属性将其悬浮于非固定列之上，这使得有时候你会发现在 Table 上放置遮罩层时固定列会被透过的情况。为遮罩层设置更高的 `z-index` 覆盖住固定列即可。 diff --git a/components/table/style/index.less b/components/table/style/index.less index b4661322ed..e09d71a5e3 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -21,7 +21,6 @@ .@{table-prefix-cls} { .reset-component; position: relative; - z-index: 0; font-size: @table-font-size; background: @table-bg; border-radius: @border-radius-base; diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index 98a922ea4b..6c63345105 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -17,7 +17,7 @@ Almost anything can be represented in a tree structure. Examples include directo | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| allowDrop | Whether to allow dropping on the node | ({ dropNode, dropPosition }) => boolean | - | | +| allowDrop | Whether to allow dropping on the node | ({ dropNode, dropPosition }) => boolean | - | | | autoExpandParent | Whether to automatically expand a parent treeNode | boolean | false | | | blockNode | Whether treeNode fill remaining horizontal space | boolean | false | | | checkable | Add a Checkbox before the treeNodes | boolean | false | | @@ -96,8 +96,8 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t ### Tree Methods -| Name | Description | -| --- | --- | +| Name | Description | +| ----------------- | ------------------------------------ | | scrollTo({ key }) | Scroll to key item in virtual scroll | ## FAQ diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 07c088d020..af893ed64d 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -18,7 +18,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| allowDrop | 是否允许拖拽时放置在该节点 | ({ dropNode, dropPosition }) => boolean | - | | +| allowDrop | 是否允许拖拽时放置在该节点 | ({ dropNode, dropPosition }) => boolean | - | | | autoExpandParent | 是否自动展开父节点 | boolean | false | | | blockNode | 是否节点占据一行 | boolean | false | | | checkable | 节点前添加 Checkbox 复选框 | boolean | false | | @@ -97,8 +97,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg ### Tree 方法 -| 名称 | 说明 | -| --- | --- | +| 名称 | 说明 | +| ----------------- | ------------------------------- | | scrollTo({ key }) | 虚拟滚动下，滚动到指定 key 条目 | ## FAQ diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index 57f3c3d8c4..b974cf257c 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -46,8 +46,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t Polyfills are needed for IE browsers. We recommend [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/). -> We drop support of IE8 after `antd@2.0`, -> We drop support of React 15 and IE9/10 after `antd@4.0`, +> We drop support of IE8 after `antd@2.0`, We drop support of React 15 and IE9/10 after `antd@4.0`, ## Version diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index dd674d3ea7..511381cc18 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -46,8 +46,7 @@ title: Ant Design of React 对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。 -> `antd@2.0` 之后不再支持 IE8。 -> `antd@4.0` 之后不再支持 React 15 和 IE9/10。 +> `antd@2.0` 之后不再支持 IE8。 `antd@4.0` 之后不再支持 React 15 和 IE9/10。 ## 版本