@iimm/formily-mui/dist/esm/layout/FormItem/FormItemBase.js

form field components based on @mui/material and @formily/react

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { useCreation } from "ahooks";
import { observer } from "@formily/react";
import { Tooltip } from "@mui/material";
import { ErrorOutlineOutlined, HighlightOffOutlined, CheckCircleOutline, RemoveOutlined, HelpOutline } from "@mui/icons-material";
import { Popover } from "mui-component";
import { useOverflow } from "@iimm/react-shared";
import cls from "classnames";
import "./index.scss";
import { prefixCls } from "../../utils";

/** 当包裹内容时，一些用来传递给FormItemBase的props,主要用来自定义组件 */
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var ICON_MAP = {
  error: /*#__PURE__*/_jsx(HighlightOffOutlined, {
    fontSize: "small"
  }),
  success: /*#__PURE__*/_jsx(CheckCircleOutline, {
    fontSize: "small"
  }),
  warning: /*#__PURE__*/_jsx(ErrorOutlineOutlined, {
    fontSize: "small"
  })
};
export var FormItemBase = observer(function (props) {
  var labelPosition = props.labelPosition,
    labelWidth = props.labelWidth,
    labelAlign = props.labelAlign,
    labelWrap = props.labelWrap,
    wrapperAlign = props.wrapperAlign,
    wrapperWrap = props.wrapperWrap,
    wrapperWidth = props.wrapperWidth,
    fullWidth = props.fullWidth,
    colon = props.colon,
    tooltipIcon = props.tooltipIcon,
    tooltipLayout = props.tooltipLayout,
    showFeedback = props.showFeedback,
    feedbackLayout = props.feedbackLayout,
    noLabel = props.noLabel,
    label = props.label,
    labelSx = props.labelStyle,
    wrapperSx = props.wrapperStyle,
    tooltip = props.tooltip,
    required = props.required,
    feedbackStatus = props.feedbackStatus,
    feedbackText = props.feedbackText,
    feedbackIcon = props.feedbackIcon,
    extra = props.extra,
    addonBefore = props.addonBefore,
    addonAfter = props.addonAfter,
    children = props.children,
    className = props.className,
    style = props.style,
    error = props.error,
    feedbackCls = props.feedbackCls,
    extraCls = props.extraCls,
    keepTopSpace = props.keepTopSpace,
    keepFeedbackSpace = props.keepFeedbackSpace;
  var prefix = "".concat(prefixCls, "-form-item");
  var _useOverflow = useOverflow(),
    overflow = _useOverflow.overflow,
    containerRef = _useOverflow.containerRef,
    contentRef = _useOverflow.contentRef;
  var labelStyle = useCreation(function () {
    var sx = labelSx || {};
    if (labelWidth && labelPosition === "left") {
      sx.width = labelWidth === "auto" ? undefined : labelWidth;
      sx.maxWidth = labelWidth === "auto" ? undefined : labelWidth;
    }
    return sx;
  }, [labelSx, labelWidth, labelPosition]);
  var wrapperStyle = useCreation(function () {
    var sx = wrapperSx || {};
    if (wrapperWidth) {
      sx.width = wrapperWidth === "auto" ? undefined : wrapperWidth;
      sx.maxWidth = wrapperWidth === "auto" ? undefined : wrapperWidth;
    }
    return sx;
  }, [wrapperSx, wrapperWidth]);
  var getOverflowTooltip = function getOverflowTooltip() {
    if (overflow) {
      return /*#__PURE__*/_jsxs("div", {
        children: [/*#__PURE__*/_jsx("div", {
          children: label
        }), !!tooltip && tooltip === "text" && /*#__PURE__*/_jsx("div", {
          children: tooltip
        })]
      });
    }
  };
  var renderLabelText = function renderLabelText() {
    if (labelPosition === "inner" && keepTopSpace) {
      return /*#__PURE__*/_jsx("div", {
        className: "".concat(prefix, "-label-content"),
        children: /*#__PURE__*/_jsx("span", {
          children: /*#__PURE__*/_jsx("label", {
            children: "\xA0"
          })
        })
      });
    }
    var labelChildren = /*#__PURE__*/_jsx("div", {
      className: cls(_defineProperty({}, "".concat(prefix, "-label-content"), true)),
      ref: containerRef,
      children: /*#__PURE__*/_jsxs("span", {
        ref: contentRef,
        children: [required && /*#__PURE__*/_jsx("span", {
          className: "".concat(prefix, "-required"),
          children: "*"
        }), /*#__PURE__*/_jsx("label", {
          children: label
        })]
      })
    });
    if (tooltipLayout === "text" && tooltip || overflow) {
      return /*#__PURE__*/_jsx(Tooltip, {
        placement: "top",
        arrow: true,
        title: getOverflowTooltip(),
        children: labelChildren
      });
    }
    return labelChildren;
  };
  var renderTooltipIcon = function renderTooltipIcon() {
    if (tooltip && (tooltipLayout === "icon" || !tooltipLayout) && labelPosition !== "inner") {
      return /*#__PURE__*/_jsx("span", {
        children: /*#__PURE__*/_jsx(Tooltip, {
          placement: "top",
          title: tooltip,
          arrow: true,
          children: /*#__PURE__*/_jsx("span", {
            style: {
              cursor: "help"
            },
            children: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : /*#__PURE__*/_jsx(HelpOutline, {
              fontSize: "small"
            })
          })
        })
      });
    }
  };
  var renderLabel = function renderLabel() {
    if (noLabel || !label || labelPosition === "inner" && !keepTopSpace) return null;
    return /*#__PURE__*/_jsxs("div", {
      style: labelStyle,
      className: cls(_defineProperty(_defineProperty({}, "".concat(prefix, "-label"), true), "".concat(prefix, "-label-tooltip"), !!tooltip && tooltipLayout === "text" && labelPosition !== "inner")),
      children: [renderLabelText(), renderTooltipIcon(), label !== " " && labelPosition !== "inner" && !!colon && /*#__PURE__*/_jsx("span", {
        className: "".concat(prefix, "-colon"),
        children: ":"
      })]
    });
  };
  return /*#__PURE__*/_jsxs("div", {
    style: style,
    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix), true), "".concat(prefix, "-").concat(feedbackStatus), !!feedbackStatus), "".concat(prefix, "-feedback-has-text"), !!feedbackText), "".concat(prefix, "-fullness"), !!fullWidth || !!feedbackIcon), "".concat(prefix, "-label-align-").concat(labelAlign), true), "".concat(prefix, "-control-align-").concat(wrapperAlign), true), "".concat(prefix, "-label-wrap"), !!labelWrap), "".concat(prefix, "-control-wrap"), !!wrapperWrap), "".concat(className), !!className)),
    children: [/*#__PURE__*/_jsxs("div", {
      className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-row"), labelPosition === "left"), "".concat(prefix, "-column"), labelPosition === "top" || !labelPosition), "".concat(prefix, "-error"), !!error), "".concat(prefix, "-").concat(feedbackStatus, "-help"), ["warning", "error"].includes(feedbackStatus)), "".concat(prefix, "-default-help"), !["warning", "error"].includes(feedbackStatus) && !error)),
      children: [renderLabel(), /*#__PURE__*/_jsx("div", {
        className: "".concat(prefix, "-control"),
        children: /*#__PURE__*/_jsxs("div", {
          className: cls("".concat(prefix, "-control-content")),
          children: [!!addonBefore && /*#__PURE__*/_jsx("div", {
            className: cls("".concat(prefix, "-addon-before")),
            children: addonBefore
          }), /*#__PURE__*/_jsxs("div", {
            style: wrapperStyle,
            className: cls(_defineProperty(_defineProperty({}, "".concat(prefix, "-control-content-component"), true), "".concat(prefix, "-control-content-component-has-feedback-icon"), feedbackLayout === "popover")),
            children: [children, showFeedback && feedbackLayout === "popover" && (["warning", "error", "success"].includes(feedbackStatus) ? /*#__PURE__*/_jsx(Popover, {
              triggerType: "hover",
              trigger: /*#__PURE__*/_jsx("div", {
                className: cls(_defineProperty(_defineProperty({}, "".concat(prefix, "-feedback-icon}"), true), "".concat(prefix, "-").concat(feedbackStatus, "-help"), !!feedbackStatus)),
                children: feedbackIcon !== null && feedbackIcon !== void 0 ? feedbackIcon : ICON_MAP[feedbackStatus]
              }),
              content: /*#__PURE__*/_jsxs("div", {
                className: cls(_defineProperty({}, "".concat(prefix, "-help"), true)),
                children: [/*#__PURE__*/_jsx("span", {
                  className: "".concat(prefix, "-").concat(feedbackStatus, "-help"),
                  children: ICON_MAP[feedbackStatus]
                }), feedbackText]
              })
            }) : /*#__PURE__*/_jsx("div", {
              className: cls(_defineProperty(_defineProperty({}, "".concat(prefix, "-feedback-icon}"), true), "".concat(prefix, "-blank-help"), true)),
              children: feedbackIcon !== null && feedbackIcon !== void 0 ? feedbackIcon : /*#__PURE__*/_jsx(RemoveOutlined, {
                fontSize: "small"
              })
            }))]
          }), !!addonAfter && /*#__PURE__*/_jsx("div", {
            className: cls("".concat(prefix, "-addon-after")),
            children: addonAfter
          })]
        })
      })]
    }), showFeedback && feedbackLayout !== "popover" && /*#__PURE__*/_jsx("div", {
      className: cls(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-").concat(feedbackStatus, "-help"), !!feedbackStatus), "".concat(prefix, "-help"), true), "".concat(feedbackCls), !!feedbackCls)),
      children: feedbackText || keepFeedbackSpace !== false && /*#__PURE__*/_jsx(_Fragment, {
        children: "\xA0"
      })
    }), !!extra && /*#__PURE__*/_jsx("div", {
      className: cls(_defineProperty(_defineProperty({}, "".concat(prefix, "-extra"), true), "".concat(extraCls), !!extraCls)),
      children: extra
    })]
  });
}, {
  displayName: "iimm.Mui.Formily.FormItemBase"
});