FormItemLabel.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import QuestionCircleOutlined from "@ant-design/icons/es/icons/QuestionCircleOutlined";
  12. import classNames from 'classnames';
  13. import convertToTooltipProps from '../_util/convertToTooltipProps';
  14. import Col from '../grid/col';
  15. import { useLocale } from '../locale';
  16. import defaultLocale from '../locale/en_US';
  17. import Tooltip from '../tooltip';
  18. import { FormContext } from './context';
  19. const FormItemLabel = ({
  20. prefixCls,
  21. label,
  22. htmlFor,
  23. labelCol,
  24. labelAlign,
  25. colon,
  26. required,
  27. requiredMark,
  28. tooltip,
  29. vertical
  30. }) => {
  31. var _a;
  32. const [formLocale] = useLocale('Form');
  33. const {
  34. labelAlign: contextLabelAlign,
  35. labelCol: contextLabelCol,
  36. labelWrap,
  37. colon: contextColon
  38. } = React.useContext(FormContext);
  39. if (!label) {
  40. return null;
  41. }
  42. const mergedLabelCol = labelCol || contextLabelCol || {};
  43. const mergedLabelAlign = labelAlign || contextLabelAlign;
  44. const labelClsBasic = `${prefixCls}-item-label`;
  45. const labelColClassName = classNames(labelClsBasic, mergedLabelAlign === 'left' && `${labelClsBasic}-left`, mergedLabelCol.className, {
  46. [`${labelClsBasic}-wrap`]: !!labelWrap
  47. });
  48. let labelChildren = label;
  49. // Keep label is original where there should have no colon
  50. const computedColon = colon === true || contextColon !== false && colon !== false;
  51. const haveColon = computedColon && !vertical;
  52. // Remove duplicated user input colon
  53. if (haveColon && typeof label === 'string' && label.trim()) {
  54. labelChildren = label.replace(/[:|:]\s*$/, '');
  55. }
  56. // Tooltip
  57. const tooltipProps = convertToTooltipProps(tooltip);
  58. if (tooltipProps) {
  59. const {
  60. icon = /*#__PURE__*/React.createElement(QuestionCircleOutlined, null)
  61. } = tooltipProps,
  62. restTooltipProps = __rest(tooltipProps, ["icon"]);
  63. const tooltipNode = /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, restTooltipProps), /*#__PURE__*/React.cloneElement(icon, {
  64. className: `${prefixCls}-item-tooltip`,
  65. title: '',
  66. onClick: e => {
  67. // Prevent label behavior in tooltip icon
  68. // https://github.com/ant-design/ant-design/issues/46154
  69. e.preventDefault();
  70. },
  71. tabIndex: null
  72. }));
  73. labelChildren = /*#__PURE__*/React.createElement(React.Fragment, null, labelChildren, tooltipNode);
  74. }
  75. // Required Mark
  76. const isOptionalMark = requiredMark === 'optional';
  77. const isRenderMark = typeof requiredMark === 'function';
  78. const hideRequiredMark = requiredMark === false;
  79. if (isRenderMark) {
  80. labelChildren = requiredMark(labelChildren, {
  81. required: !!required
  82. });
  83. } else if (isOptionalMark && !required) {
  84. labelChildren = /*#__PURE__*/React.createElement(React.Fragment, null, labelChildren, /*#__PURE__*/React.createElement("span", {
  85. className: `${prefixCls}-item-optional`,
  86. title: ""
  87. }, (formLocale === null || formLocale === void 0 ? void 0 : formLocale.optional) || ((_a = defaultLocale.Form) === null || _a === void 0 ? void 0 : _a.optional)));
  88. }
  89. // https://github.com/ant-design/ant-design/pull/52950#discussion_r1980880316
  90. let markType;
  91. if (hideRequiredMark) {
  92. markType = 'hidden';
  93. } else if (isOptionalMark || isRenderMark) {
  94. markType = 'optional';
  95. }
  96. const labelClassName = classNames({
  97. [`${prefixCls}-item-required`]: required,
  98. [`${prefixCls}-item-required-mark-${markType}`]: markType,
  99. [`${prefixCls}-item-no-colon`]: !computedColon
  100. });
  101. return /*#__PURE__*/React.createElement(Col, Object.assign({}, mergedLabelCol, {
  102. className: labelColClassName
  103. }), /*#__PURE__*/React.createElement("label", {
  104. htmlFor: htmlFor,
  105. className: labelClassName,
  106. title: typeof label === 'string' ? label : ''
  107. }, labelChildren));
  108. };
  109. export default FormItemLabel;