Skip to content

Commit

Permalink
feat(next/antd): add tooltipIcon props to FormLayout & FormItem (#2085)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifblooms
ifblooms authored Sep 1, 2021
1 parent 4b18a6b commit 1a81791
Show file tree
Hide file tree
Showing 12 changed files with 26 additions and 6 deletions.
1 change: 1 addition & 0 deletions packages/antd/docs/components/FormItem.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1068,6 +1068,7 @@ export default () => {
| 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 | - |
Expand Down
3 changes: 2 additions & 1 deletion packages/antd/docs/components/FormItem.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1067,7 +1067,8 @@ export default () => {
| className | string | 组件样式类名 | - |
| colon | boolean | 冒号 | true |
| tooltip | ReactNode | 问号提示 | - |
| tooltipLayout | `"icon" \| "text"` | 问提示布局 | `"icon"` |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | `?` |
| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` |
| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false |
| labelWidth | `number \| string` | 标签固定宽度 | - |
Expand Down
1 change: 1 addition & 0 deletions packages/antd/docs/components/FormLayout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,4 +179,5 @@ export default () => (
| shallow | boolean | shallow context transfer | true |
| feedbackLayout | `'loose' \|'terse' \|'popover' \|'none'` | feedback layout | true |
| tooltipLayout | `"icon" \| "text"` | Ask the prompt layout | `"icon"` |
| tooltipIcon | ReactNode | Ask the prompt icon | - |
| bordered | boolean | Is there a border | true |
3 changes: 2 additions & 1 deletion packages/antd/docs/components/FormLayout.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,5 +178,6 @@ export default () => (
| inset | boolean | 内联布局 | false |
| shallow | boolean | 上下文浅层传递 | true |
| feedbackLayout | `'loose' \| 'terse' \| 'popover' \| 'none'` | 反馈布局 | true |
| tooltipLayout | `"icon" \| "text"` | 问提示布局 | `"icon"` |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | - |
| bordered | boolean | 是否有边框 | true |
7 changes: 6 additions & 1 deletion packages/antd/src/form-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface IFormItemProps {
label?: React.ReactNode
colon?: boolean
tooltip?: React.ReactNode
tooltipIcon?: React.ReactNode
layout?: 'vertical' | 'horizontal' | 'inline'
tooltipLayout?: 'icon' | 'text'
labelStyle?: React.CSSProperties
Expand Down Expand Up @@ -76,6 +77,9 @@ const useFormItemLayout = (props: IFormItemProps) => {
feedbackIcon: props.feedbackIcon,
feedbackLayout: props.feedbackLayout ?? layout.feedbackLayout ?? 'loose',
tooltipLayout: props.tooltipLayout ?? layout.tooltipLayout ?? 'icon',
tooltipIcon: props.tooltipIcon ?? layout.tooltipIcon ?? (
<QuestionCircleOutlined />
),
}
}

Expand Down Expand Up @@ -148,6 +152,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
wrapperWrap,
tooltipLayout,
tooltip,
tooltipIcon,
} = formLayout
const labelStyle = { ...formLayout.labelStyle }
const wrapperStyle = { ...formLayout.wrapperStyle }
Expand Down Expand Up @@ -241,7 +246,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
return (
<span className={cls(`${prefixCls}-label-tooltip-icon`)}>
<Tooltip placement="top" align={{ offset: [0, 2] }} title={tooltip}>
<QuestionCircleOutlined />
{tooltipIcon}
</Tooltip>
</span>
)
Expand Down
1 change: 1 addition & 0 deletions packages/antd/src/form-layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface IFormLayoutProps {
inset?: boolean
shallow?: boolean
tooltipLayout?: 'icon' | 'text'
tooltipIcon?: React.ReactNode
feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none'
bordered?: boolean
}
Expand Down
1 change: 1 addition & 0 deletions packages/next/docs/components/FormItem.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1051,6 +1051,7 @@ export default () => {
| 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 | - |
Expand Down
3 changes: 2 additions & 1 deletion packages/next/docs/components/FormItem.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1050,7 +1050,8 @@ export default () => {
| className | string | 组件样式类名 | - |
| colon | boolean | 冒号 | true |
| tooltip | ReactNode | 问号提示 | - |
| tooltipLayout | `"icon" \| "text"` | 问提示布局 | `"icon"` |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | `?` |
| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` |
| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false |
| labelWidth | `number \| string` | 标签固定宽度 | - |
Expand Down
1 change: 1 addition & 0 deletions packages/next/docs/components/FormLayout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,4 +179,5 @@ export default () => (
| shallow | boolean | shallow context transfer | true |
| feedbackLayout | `'loose' \|'terse' \|'popover' \|'none'` | feedback layout | true |
| tooltipLayout | `"icon" \| "text"` | Ask the prompt layout | `"icon"` |
| tooltipIcon | ReactNode | Ask the prompt icon | - |
| bordered | boolean | Is there a border | true |
3 changes: 2 additions & 1 deletion packages/next/docs/components/FormLayout.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,5 +178,6 @@ export default () => (
| inset | boolean | 内联布局 | false |
| shallow | boolean | 上下文浅层传递 | true |
| feedbackLayout | `'loose' \| 'terse' \| 'popover' \| 'none'` | 反馈布局 | true |
| tooltipLayout | `"icon" \| "text"` | 问提示布局 | `"icon"` |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | - |
| bordered | boolean | 是否有边框 | true |
7 changes: 6 additions & 1 deletion packages/next/src/form-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface IFormItemProps {
layout?: 'vertical' | 'horizontal' | 'inline'
tooltip?: React.ReactNode
tooltipLayout?: 'icon' | 'text'
tooltipIcon?: React.ReactNode
labelStyle?: React.CSSProperties
labelAlign?: 'left' | 'right'
labelWrap?: boolean
Expand Down Expand Up @@ -76,6 +77,9 @@ const useFormItemLayout = (props: IFormItemProps) => {
feedbackIcon: props.feedbackIcon,
feedbackLayout: props.feedbackLayout ?? layout.feedbackLayout ?? 'loose',
tooltipLayout: props.tooltipLayout ?? layout.tooltipLayout ?? 'icon',
tooltipIcon: props.tooltipIcon ?? layout.tooltipIcon ?? (
<QuestionCircleOutlined />
),
}
}

Expand Down Expand Up @@ -148,6 +152,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
wrapperWrap,
tooltip,
tooltipLayout,
tooltipIcon,
} = formLayout
const labelStyle = { ...formLayout.labelStyle }
const wrapperStyle = { ...formLayout.wrapperStyle }
Expand Down Expand Up @@ -235,7 +240,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
if (tooltip && tooltipLayout === 'icon' && !overflow) {
return (
<span className={cls(`${prefixCls}-label-tooltip-icon`)}>
<Balloon.Tooltip align="t" trigger={<QuestionCircleOutlined />}>
<Balloon.Tooltip align="t" trigger={tooltipIcon}>
{tooltip}
</Balloon.Tooltip>
</span>
Expand Down
1 change: 1 addition & 0 deletions packages/next/src/form-layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface IFormLayoutProps {
inset?: boolean
shallow?: boolean
tooltipLayout?: 'icon' | 'text'
tooltipIcon?: React.ReactNode
feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none'
bordered?: boolean
}
Expand Down

0 comments on commit 1a81791

Please sign in to comment.