From 9ada03d443e6998eecc17a9a8595ef1d16a67cd8 Mon Sep 17 00:00:00 2001 From: henryzp Date: Sat, 11 Dec 2021 19:49:48 +0800 Subject: [PATCH 1/3] feat(antd-component): provide `getPopupContainer` prop for `FormItem`, when use popover feedback --- packages/antd/docs/components/FormItem.md | 65 ++++++++++--------- .../antd/docs/components/FormItem.zh-CN.md | 65 ++++++++++--------- packages/antd/src/form-item/index.tsx | 5 ++ 3 files changed, 71 insertions(+), 64 deletions(-) diff --git a/packages/antd/docs/components/FormItem.md b/packages/antd/docs/components/FormItem.md index ad608422a8b..c5d7570b1a2 100644 --- a/packages/antd/docs/components/FormItem.md +++ b/packages/antd/docs/components/FormItem.md @@ -1058,38 +1058,39 @@ export default () => { ### FormItem -| Property name | Type | Description | Default value | -| -------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------- | -| label | ReactNode | label | - | -| style | CSSProperties | Style | - | -| labelStyle | CSSProperties | Label style | - | -| wrapperStyle | CSSProperties | Component container style | - | -| className | string | Component style class name | - | -| colon | boolean | colon | true | -| tooltip | ReactNode | Question mark prompt | - | -| tooltipLayout | `"icon" \| "text"` | Ask the prompt layout | `"icon"` | -| tooltipIcon | ReactNode | Ask the prompt icon | `?` | -| labelAlign | `"left"` \| `"right"` | Label text alignment | `"right"` | -| labelWrap | boolean | Label change, otherwise an ellipsis appears, hover has tooltip | false | -| labelWidth | `number \| string` | Label fixed width | - | -| wrapperWidth | `number \| string` | Content fixed width | - | -| labelCol | number | The number of columns occupied by the label grid, and the number of content columns add up to 24 | - | -| wrapperCol | number | The number of columns occupied by the content grid, and the number of label columns add up to 24 | - | -| wrapperAlign | `"left"` \| `"right"` | Content text alignment ⻬ | `"left"` | -| wrapperWrap | boolean | Change the content, otherwise an ellipsis appears, and hover has tooltip | false | -| fullness | boolean | fullness | false | -| addonBefore | ReactNode | Prefix content | - | -| addonAfter | ReactNode | Suffix content | - | -| size | `"small"` \| `"default"` \| `"large"` | 尺⼨ | - | -| inset | boolean | Is it an inline layout | false | -| extra | ReactNode | Extended description script | - | -| feedbackText | ReactNode | Feedback Case | - | -| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | Feedback layout | - | -| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | Feedback layout | - | -| feedbackIcon | ReactNode | Feedback icon | - | -| asterisk | boolean | Asterisk reminder | - | -| gridSpan | number | Grid layout occupies width | - | -| bordered | boolean | Is there a border | - | +| Property name | Type | Description | Default value | +| ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | ------------------- | +| label | ReactNode | label | - | +| style | CSSProperties | Style | - | +| labelStyle | CSSProperties | Label style | - | +| wrapperStyle | CSSProperties | Component container style | - | +| className | string | Component style class name | - | +| colon | boolean | colon | true | +| tooltip | ReactNode | Question mark prompt | - | +| tooltipLayout | `"icon" \| "text"` | Ask the prompt layout | `"icon"` | +| tooltipIcon | ReactNode | Ask the prompt icon | `?` | +| labelAlign | `"left"` \| `"right"` | Label text alignment | `"right"` | +| labelWrap | boolean | Label change, otherwise an ellipsis appears, hover has tooltip | false | +| labelWidth | `number \| string` | Label fixed width | - | +| wrapperWidth | `number \| string` | Content fixed width | - | +| labelCol | number | The number of columns occupied by the label grid, and the number of content columns add up to 24 | - | +| wrapperCol | number | The number of columns occupied by the content grid, and the number of label columns add up to 24 | - | +| wrapperAlign | `"left"` \| `"right"` | Content text alignment | `"left"` | +| wrapperWrap | boolean | Change the content, otherwise an ellipsis appears, and hover has tooltip | false | +| fullness | boolean | fullness | false | +| addonBefore | ReactNode | Prefix content | - | +| addonAfter | ReactNode | Suffix content | - | +| size | `"small"` \| `"default"` \| `"large"` | size | - | +| inset | boolean | Is it an inline layout | false | +| extra | ReactNode | Extended description script | - | +| feedbackText | ReactNode | Feedback Case | - | +| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | Feedback layout | - | +| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | Feedback layout | - | +| feedbackIcon | ReactNode | Feedback icon | - | +| getPopupContainer | function(triggerNode) | when `feedbackLayout` is popover， The DOM container of the tip, the default behavior is to create a div element in body | () => document.body | +| asterisk | boolean | Asterisk reminder | - | +| gridSpan | number | Grid layout occupies width | - | +| bordered | boolean | Is there a border | - | ### FormItem.BaseItem diff --git a/packages/antd/docs/components/FormItem.zh-CN.md b/packages/antd/docs/components/FormItem.zh-CN.md index f392b0ee45d..fc51e29d479 100644 --- a/packages/antd/docs/components/FormItem.zh-CN.md +++ b/packages/antd/docs/components/FormItem.zh-CN.md @@ -1058,38 +1058,39 @@ export default () => { ### FormItem -| 属性名 | 类型 | 描述 | 默认值 | -| -------------- | ------------------------------------------------------ | ------------------------------------------- | --------- | -| label | ReactNode | 标签 | - | -| style | CSSProperties | 样式 | - | -| labelStyle | CSSProperties | 标签样式 | - | -| wrapperStyle | CSSProperties | 组件容器样式 | - | -| className | string | 组件样式类名 | - | -| colon | boolean | 冒号 | true | -| tooltip | ReactNode | 问号提示 | - | -| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` | -| tooltipIcon | ReactNode | 问号提示图标 | `?` | -| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` | -| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false | -| labelWidth | `number \| string` | 标签固定宽度 | - | -| wrapperWidth | `number \| string` | 内容固定宽度 | - | -| labelCol | number | 标签⽹格所占列数，和内容列数加起来总和为 24 | - | -| wrapperCol | number | 内容⽹格所占列数，和标签列数加起来总和为 24 | - | -| wrapperAlign | `"left"` \| `"right"` | 内容文本对齐方式⻬ | `"left"` | -| wrapperWrap | boolean | 内容换⾏，否则出现省略号，hover 有 tooltip | false | -| fullness | boolean | 内容撑满 | false | -| addonBefore | ReactNode | 前缀内容 | - | -| addonAfter | ReactNode | 后缀内容 | - | -| size | `"small"` \| `"default"` \| `"large"` | 尺⼨ | - | -| inset | boolean | 是否是内嵌布局 | false | -| extra | ReactNode | 扩展描述⽂案 | - | -| feedbackText | ReactNode | 反馈⽂案 | - | -| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | 反馈布局 | - | -| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | 反馈布局 | - | -| feedbackIcon | ReactNode | 反馈图标 | - | -| asterisk | boolean | 星号提醒 | - | -| gridSpan | number | ⽹格布局占宽 | - | -| bordered | boolean | 是否有边框 | - | +| 属性名 | 类型 | 描述 | 默认值 | +| ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------- | ------------------- | +| label | ReactNode | 标签 | - | +| style | CSSProperties | 样式 | - | +| labelStyle | CSSProperties | 标签样式 | - | +| wrapperStyle | CSSProperties | 组件容器样式 | - | +| className | string | 组件样式类名 | - | +| colon | boolean | 冒号 | true | +| tooltip | ReactNode | 问号提示 | - | +| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` | +| tooltipIcon | ReactNode | 问号提示图标 | `?` | +| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` | +| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false | +| labelWidth | `number \| string` | 标签固定宽度 | - | +| wrapperWidth | `number \| string` | 内容固定宽度 | - | +| labelCol | number | 标签⽹格所占列数，和内容列数加起来总和为 24 | - | +| wrapperCol | number | 内容⽹格所占列数，和标签列数加起来总和为 24 | - | +| wrapperAlign | `"left"` \| `"right"` | 内容文本对齐方式⻬ | `"left"` | +| wrapperWrap | boolean | 内容换⾏，否则出现省略号，hover 有 tooltip | false | +| fullness | boolean | 内容撑满 | false | +| addonBefore | ReactNode | 前缀内容 | - | +| addonAfter | ReactNode | 后缀内容 | - | +| size | `"small"` \| `"default"` \| `"large"` | 尺⼨ | - | +| inset | boolean | 是否是内嵌布局 | false | +| extra | ReactNode | 扩展描述⽂案 | - | +| feedbackText | ReactNode | 反馈⽂案 | - | +| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | 反馈布局 | - | +| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | 反馈布局 | - | +| feedbackIcon | ReactNode | 反馈图标 | - | +| getPopupContainer | function(triggerNode) | 当 feedbackLayout 为 popover 时，浮层渲染父节点，默认渲染到 body 上 | () => document.body | +| asterisk | boolean | 星号提醒 | - | +| gridSpan | number | ⽹格布局占宽 | - | +| bordered | boolean | 是否有边框 | - | ### FormItem.BaseItem diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx index d5cf076c36a..208b3556856 100644 --- a/packages/antd/src/form-item/index.tsx +++ b/packages/antd/src/form-item/index.tsx @@ -42,6 +42,7 @@ export interface IFormItemProps { feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none' | (string & {}) feedbackStatus?: 'error' | 'warning' | 'success' | 'pending' | (string & {}) feedbackIcon?: React.ReactNode + getPopupContainer?: (node: HTMLElement) => HTMLElement asterisk?: boolean gridSpan?: number bordered?: boolean @@ -136,6 +137,7 @@ export const BaseItem: React.FC = ({ children, ...props }) => { fullness, feedbackLayout, feedbackIcon, + getPopupContainer, inset, bordered = true, labelWidth, @@ -189,6 +191,9 @@ export const BaseItem: React.FC = ({ children, ...props }) => { } visible={!!feedbackText} + getPopupContainer={ + getPopupContainer ? getPopupContainer : () => document.body + } > {children} From 9809bf88024f59fbcf38e549faba30241e341801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E7=BF=BC?= Date: Sun, 12 Dec 2021 14:59:51 +0800 Subject: [PATCH 2/3] Update index.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: 优化代码 --- packages/antd/src/form-item/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx index 208b3556856..204e4135c48 100644 --- a/packages/antd/src/form-item/index.tsx +++ b/packages/antd/src/form-item/index.tsx @@ -191,9 +191,7 @@ export const BaseItem: React.FC = ({ children, ...props }) => { } visible={!!feedbackText} - getPopupContainer={ - getPopupContainer ? getPopupContainer : () => document.body - } + getPopupContainer={getPopupContainer} > {children} From 5a3383914f724fa02fa436b5172a6c95902e9953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E7=BF=BC?= Date: Mon, 13 Dec 2021 09:57:36 +0800 Subject: [PATCH 3/3] feat(antd-component): optimized code --- packages/antd/src/form-item/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx index 204e4135c48..9d6c43386c9 100644 --- a/packages/antd/src/form-item/index.tsx +++ b/packages/antd/src/form-item/index.tsx @@ -210,7 +210,7 @@ export const BaseItem: React.FC = ({ children, ...props }) => { ) } - return tooltip + return tooltip } const renderLabelText = () => {