FormItemInput.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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 classNames from 'classnames';
  12. import { get, set } from 'rc-util';
  13. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  14. import Col from '../grid/col';
  15. import { FormContext, FormItemPrefixContext } from './context';
  16. import ErrorList from './ErrorList';
  17. import FallbackCmp from './style/fallbackCmp';
  18. const GRID_MAX = 24;
  19. const FormItemInput = props => {
  20. const {
  21. prefixCls,
  22. status,
  23. labelCol,
  24. wrapperCol,
  25. children,
  26. errors,
  27. warnings,
  28. _internalItemRender: formItemRender,
  29. extra,
  30. help,
  31. fieldId,
  32. marginBottom,
  33. onErrorVisibleChanged,
  34. label
  35. } = props;
  36. const baseClassName = `${prefixCls}-item`;
  37. const formContext = React.useContext(FormContext);
  38. const mergedWrapperCol = React.useMemo(() => {
  39. let mergedWrapper = Object.assign({}, wrapperCol || formContext.wrapperCol || {});
  40. if (label === null && !labelCol && !wrapperCol && formContext.labelCol) {
  41. const list = [undefined, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
  42. list.forEach(size => {
  43. const _size = size ? [size] : [];
  44. const formLabel = get(formContext.labelCol, _size);
  45. const formLabelObj = typeof formLabel === 'object' ? formLabel : {};
  46. const wrapper = get(mergedWrapper, _size);
  47. const wrapperObj = typeof wrapper === 'object' ? wrapper : {};
  48. if ('span' in formLabelObj && !('offset' in wrapperObj) && formLabelObj.span < GRID_MAX) {
  49. mergedWrapper = set(mergedWrapper, [].concat(_size, ['offset']), formLabelObj.span);
  50. }
  51. });
  52. }
  53. return mergedWrapper;
  54. }, [wrapperCol, formContext]);
  55. const className = classNames(`${baseClassName}-control`, mergedWrapperCol.className);
  56. // Pass to sub FormItem should not with col info
  57. const subFormContext = React.useMemo(() => {
  58. const {
  59. labelCol,
  60. wrapperCol
  61. } = formContext,
  62. rest = __rest(formContext, ["labelCol", "wrapperCol"]);
  63. return rest;
  64. }, [formContext]);
  65. const extraRef = React.useRef(null);
  66. const [extraHeight, setExtraHeight] = React.useState(0);
  67. useLayoutEffect(() => {
  68. if (extra && extraRef.current) {
  69. setExtraHeight(extraRef.current.clientHeight);
  70. } else {
  71. setExtraHeight(0);
  72. }
  73. }, [extra]);
  74. const inputDom = /*#__PURE__*/React.createElement("div", {
  75. className: `${baseClassName}-control-input`
  76. }, /*#__PURE__*/React.createElement("div", {
  77. className: `${baseClassName}-control-input-content`
  78. }, children));
  79. const formItemContext = React.useMemo(() => ({
  80. prefixCls,
  81. status
  82. }), [prefixCls, status]);
  83. const errorListDom = marginBottom !== null || errors.length || warnings.length ? (/*#__PURE__*/React.createElement(FormItemPrefixContext.Provider, {
  84. value: formItemContext
  85. }, /*#__PURE__*/React.createElement(ErrorList, {
  86. fieldId: fieldId,
  87. errors: errors,
  88. warnings: warnings,
  89. help: help,
  90. helpStatus: status,
  91. className: `${baseClassName}-explain-connected`,
  92. onVisibleChanged: onErrorVisibleChanged
  93. }))) : null;
  94. const extraProps = {};
  95. if (fieldId) {
  96. extraProps.id = `${fieldId}_extra`;
  97. }
  98. // If extra = 0, && will goes wrong
  99. // 0&&error -> 0
  100. const extraDom = extra ? (/*#__PURE__*/React.createElement("div", Object.assign({}, extraProps, {
  101. className: `${baseClassName}-extra`,
  102. ref: extraRef
  103. }), extra)) : null;
  104. const additionalDom = errorListDom || extraDom ? (/*#__PURE__*/React.createElement("div", {
  105. className: `${baseClassName}-additional`,
  106. style: marginBottom ? {
  107. minHeight: marginBottom + extraHeight
  108. } : {}
  109. }, errorListDom, extraDom)) : null;
  110. const dom = formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? formItemRender.render(props, {
  111. input: inputDom,
  112. errorList: errorListDom,
  113. extra: extraDom
  114. }) : (/*#__PURE__*/React.createElement(React.Fragment, null, inputDom, additionalDom));
  115. return /*#__PURE__*/React.createElement(FormContext.Provider, {
  116. value: subFormContext
  117. }, /*#__PURE__*/React.createElement(Col, Object.assign({}, mergedWrapperCol, {
  118. className: className
  119. }), dom), /*#__PURE__*/React.createElement(FallbackCmp, {
  120. prefixCls: prefixCls
  121. }));
  122. };
  123. export default FormItemInput;