2024-04-08 14:04:08 +08:00
|
|
|
|
import * as React from 'react';
|
2020-09-17 17:11:45 +08:00
|
|
|
|
import QuestionCircleOutlined from '@ant-design/icons/QuestionCircleOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
|
import classNames from 'classnames';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
|
2022-05-07 14:31:54 +08:00
|
|
|
|
import type { ColProps } from '../grid/col';
|
|
|
|
|
import Col from '../grid/col';
|
2023-03-21 13:08:43 +08:00
|
|
|
|
import { useLocale } from '../locale';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
import defaultLocale from '../locale/en_US';
|
2022-05-07 14:31:54 +08:00
|
|
|
|
import type { TooltipProps } from '../tooltip';
|
|
|
|
|
import Tooltip from '../tooltip';
|
2022-06-22 14:57:09 +08:00
|
|
|
|
import type { FormContextProps } from './context';
|
|
|
|
|
import { FormContext } from './context';
|
|
|
|
|
import type { RequiredMark } from './Form';
|
|
|
|
|
import type { FormLabelAlign } from './interface';
|
2020-09-17 17:11:45 +08:00
|
|
|
|
|
|
|
|
|
export type WrapperTooltipProps = TooltipProps & {
|
|
|
|
|
icon?: React.ReactElement;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export type LabelTooltipType = WrapperTooltipProps | React.ReactNode;
|
|
|
|
|
|
|
|
|
|
function toTooltipProps(tooltip: LabelTooltipType): WrapperTooltipProps | null {
|
|
|
|
|
if (!tooltip) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-10 13:32:27 +08:00
|
|
|
|
if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) {
|
2020-09-17 17:11:45 +08:00
|
|
|
|
return tooltip as WrapperTooltipProps;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
title: tooltip,
|
|
|
|
|
};
|
|
|
|
|
}
|
2019-07-03 20:14:39 +08:00
|
|
|
|
|
|
|
|
|
export interface FormItemLabelProps {
|
|
|
|
|
colon?: boolean;
|
2019-07-04 15:00:11 +08:00
|
|
|
|
htmlFor?: string;
|
2019-07-03 20:14:39 +08:00
|
|
|
|
label?: React.ReactNode;
|
|
|
|
|
labelAlign?: FormLabelAlign;
|
|
|
|
|
labelCol?: ColProps;
|
2023-04-10 12:02:06 +08:00
|
|
|
|
/**
|
|
|
|
|
* @internal Used for pass `requiredMark` from `<Form />`
|
|
|
|
|
*/
|
2020-08-21 12:58:14 +08:00
|
|
|
|
requiredMark?: RequiredMark;
|
2020-09-17 17:11:45 +08:00
|
|
|
|
tooltip?: LabelTooltipType;
|
2019-07-03 20:14:39 +08:00
|
|
|
|
}
|
|
|
|
|
|
2020-01-17 11:50:06 +08:00
|
|
|
|
const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixCls: string }> = ({
|
2019-07-03 20:14:39 +08:00
|
|
|
|
prefixCls,
|
|
|
|
|
label,
|
|
|
|
|
htmlFor,
|
|
|
|
|
labelCol,
|
|
|
|
|
labelAlign,
|
|
|
|
|
colon,
|
|
|
|
|
required,
|
2020-08-21 12:58:14 +08:00
|
|
|
|
requiredMark,
|
2020-09-17 17:11:45 +08:00
|
|
|
|
tooltip,
|
2019-07-03 20:14:39 +08:00
|
|
|
|
}) => {
|
2023-02-24 10:51:59 +08:00
|
|
|
|
const [formLocale] = useLocale('Form');
|
2020-08-21 12:58:14 +08:00
|
|
|
|
|
2023-01-01 21:17:05 +08:00
|
|
|
|
const {
|
|
|
|
|
vertical,
|
|
|
|
|
labelAlign: contextLabelAlign,
|
|
|
|
|
labelCol: contextLabelCol,
|
|
|
|
|
labelWrap,
|
|
|
|
|
colon: contextColon,
|
|
|
|
|
} = React.useContext<FormContextProps>(FormContext);
|
|
|
|
|
|
|
|
|
|
if (!label) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const mergedLabelCol: ColProps = labelCol || contextLabelCol || {};
|
|
|
|
|
|
|
|
|
|
const mergedLabelAlign: FormLabelAlign | undefined = labelAlign || contextLabelAlign;
|
|
|
|
|
|
|
|
|
|
const labelClsBasic = `${prefixCls}-item-label`;
|
|
|
|
|
const labelColClassName = classNames(
|
|
|
|
|
labelClsBasic,
|
|
|
|
|
mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
|
|
|
|
|
mergedLabelCol.className,
|
|
|
|
|
{
|
|
|
|
|
[`${labelClsBasic}-wrap`]: !!labelWrap,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
2023-07-25 19:47:05 +08:00
|
|
|
|
let labelChildren: React.ReactNode = label;
|
2023-01-01 21:17:05 +08:00
|
|
|
|
|
|
|
|
|
// Keep label is original where there should have no colon
|
|
|
|
|
const computedColon = colon === true || (contextColon !== false && colon !== false);
|
|
|
|
|
const haveColon = computedColon && !vertical;
|
|
|
|
|
|
|
|
|
|
// Remove duplicated user input colon
|
|
|
|
|
if (haveColon && typeof label === 'string' && (label as string).trim() !== '') {
|
|
|
|
|
labelChildren = (label as string).replace(/[:|:]\s*$/, '');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Tooltip
|
|
|
|
|
const tooltipProps = toTooltipProps(tooltip);
|
|
|
|
|
|
|
|
|
|
if (tooltipProps) {
|
|
|
|
|
const { icon = <QuestionCircleOutlined />, ...restTooltipProps } = tooltipProps;
|
2023-07-25 19:47:05 +08:00
|
|
|
|
const tooltipNode: React.ReactNode = (
|
2023-01-01 21:17:05 +08:00
|
|
|
|
<Tooltip {...restTooltipProps}>
|
2023-11-30 09:53:23 +08:00
|
|
|
|
{React.cloneElement(icon, {
|
|
|
|
|
className: `${prefixCls}-item-tooltip`,
|
|
|
|
|
title: '',
|
|
|
|
|
onClick: (e: React.MouseEvent) => {
|
|
|
|
|
// Prevent label behavior in tooltip icon
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/46154
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
},
|
|
|
|
|
tabIndex: null,
|
|
|
|
|
})}
|
2023-01-01 21:17:05 +08:00
|
|
|
|
</Tooltip>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
labelChildren = (
|
|
|
|
|
<>
|
|
|
|
|
{labelChildren}
|
|
|
|
|
{tooltipNode}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-07 15:11:06 +08:00
|
|
|
|
// Required Mark
|
|
|
|
|
const isOptionalMark = requiredMark === 'optional';
|
|
|
|
|
const isRenderMark = typeof requiredMark === 'function';
|
|
|
|
|
|
|
|
|
|
if (isRenderMark) {
|
|
|
|
|
labelChildren = requiredMark(labelChildren, { required: !!required });
|
|
|
|
|
} else if (isOptionalMark && !required) {
|
2023-01-01 21:17:05 +08:00
|
|
|
|
labelChildren = (
|
|
|
|
|
<>
|
|
|
|
|
{labelChildren}
|
|
|
|
|
<span className={`${prefixCls}-item-optional`} title="">
|
|
|
|
|
{formLocale?.optional || defaultLocale.Form?.optional}
|
|
|
|
|
</span>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const labelClassName = classNames({
|
|
|
|
|
[`${prefixCls}-item-required`]: required,
|
2023-08-07 15:11:06 +08:00
|
|
|
|
[`${prefixCls}-item-required-mark-optional`]: isOptionalMark || isRenderMark,
|
2023-01-01 21:17:05 +08:00
|
|
|
|
[`${prefixCls}-item-no-colon`]: !computedColon,
|
|
|
|
|
});
|
2019-07-03 20:14:39 +08:00
|
|
|
|
|
|
|
|
|
return (
|
2023-01-01 21:17:05 +08:00
|
|
|
|
<Col {...mergedLabelCol} className={labelColClassName}>
|
2023-12-15 13:53:51 +08:00
|
|
|
|
<label
|
|
|
|
|
htmlFor={htmlFor}
|
|
|
|
|
className={labelClassName}
|
|
|
|
|
title={typeof label === 'string' ? label : ''}
|
|
|
|
|
>
|
2023-01-01 21:17:05 +08:00
|
|
|
|
{labelChildren}
|
|
|
|
|
</label>
|
|
|
|
|
</Col>
|
2019-07-03 20:14:39 +08:00
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default FormItemLabel;
|