@iimm/formily-mui/dist/esm/layout/FormLayout/index.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); }
var _excluded = ["colon", "labelAlign", "labelPosition", "wrapperAlign", "labelWrap", "labelWidth", "wrapperWidth", "wrapperWrap", "fullWidth", "tooltipIcon", "tooltipLayout", "showFeedback", "feedbackLayout", "withFormItem", "showInnerLabel", "xs", "sm", "md", "lg", "xl", "defaultCols", "noField", "noForm", "children", "spacing", "keepFeedbackSpace"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import { createContext, useContext, Children } from "react";
import { observer, useForm } from "@formily/react";
import { useCreation } from "ahooks";
import { Grid } from "@mui/material";
import { HelpOutline } from "@mui/icons-material";
import { jsx as _jsx } from "react/jsx-runtime";
export var FormLayoutContext = /*#__PURE__*/createContext(null);
export var useFormLayout = function useFormLayout() {
  return useContext(FormLayoutContext);
};
function getItemColsProps(props) {
  var _ref = props || {},
    xs = _ref.xs,
    sm = _ref.sm,
    md = _ref.md,
    lg = _ref.lg,
    xl = _ref.xl;
  var newProps = {};
  if (hasValue(xs)) newProps.xs = xs;
  if (hasValue(sm)) newProps.sm = sm;
  if (hasValue(md)) newProps.md = md;
  if (hasValue(lg)) newProps.lg = lg;
  if (hasValue(xl)) newProps.xl = xl;
  return newProps;
}
var hasValue = function hasValue(size) {
  return !!size || size == 0 || size === false;
};
var defaultTooltipIcon = /*#__PURE__*/_jsx(HelpOutline, {
  fontSize: "small"
});
var defaultLayoutCols = {
  xs: 6,
  sm: 4,
  md: 3,
  xl: 2
};
export var FormLayout = observer(function (props) {
  var colon = props.colon,
    labelAlign = props.labelAlign,
    labelPosition = props.labelPosition,
    wrapperAlign = props.wrapperAlign,
    labelWrap = props.labelWrap,
    _props$labelWidth = props.labelWidth,
    labelWidth = _props$labelWidth === void 0 ? 80 : _props$labelWidth,
    wrapperWidth = props.wrapperWidth,
    wrapperWrap = props.wrapperWrap,
    _props$fullWidth = props.fullWidth,
    fullWidth = _props$fullWidth === void 0 ? true : _props$fullWidth,
    _props$tooltipIcon = props.tooltipIcon,
    tooltipIcon = _props$tooltipIcon === void 0 ? defaultTooltipIcon : _props$tooltipIcon,
    _props$tooltipLayout = props.tooltipLayout,
    tooltipLayout = _props$tooltipLayout === void 0 ? "icon" : _props$tooltipLayout,
    showFeedback = props.showFeedback,
    _props$feedbackLayout = props.feedbackLayout,
    feedbackLayout = _props$feedbackLayout === void 0 ? "text" : _props$feedbackLayout,
    _props$withFormItem = props.withFormItem,
    withFormItem = _props$withFormItem === void 0 ? true : _props$withFormItem,
    showInnerLabel = props.showInnerLabel,
    xs = props.xs,
    sm = props.sm,
    md = props.md,
    lg = props.lg,
    xl = props.xl,
    _props$defaultCols = props.defaultCols,
    defaultCols = _props$defaultCols === void 0 ? defaultLayoutCols : _props$defaultCols,
    noField = props.noField,
    noForm = props.noForm,
    children = props.children,
    _props$spacing = props.spacing,
    spacing = _props$spacing === void 0 ? 0.5 : _props$spacing,
    keepFeedbackSpace = props.keepFeedbackSpace,
    restProps = _objectWithoutProperties(props, _excluded);
  var itemBaseProps = getItemColsProps(hasValue(xs) || hasValue(sm) || hasValue(md) || hasValue(lg) || hasValue(xl) ? {
    xs: xs,
    sm: sm,
    md: md,
    lg: lg,
    xl: xl
  } : defaultCols);
  var form = useForm();
  var layout = useCreation(function () {
    return {
      colon: colon,
      labelAlign: labelAlign,
      labelPosition: labelPosition,
      wrapperAlign: wrapperAlign,
      labelWrap: labelWrap,
      labelWidth: labelWidth,
      wrapperWidth: wrapperWidth,
      wrapperWrap: wrapperWrap,
      fullWidth: fullWidth,
      tooltipIcon: tooltipIcon,
      tooltipLayout: tooltipLayout,
      showFeedback: showFeedback,
      feedbackLayout: feedbackLayout,
      noField: noField,
      withFormItem: withFormItem,
      showInnerLabel: showInnerLabel,
      keepFeedbackSpace: keepFeedbackSpace
    };
  }, [colon, labelAlign, labelPosition, wrapperAlign, labelWrap, labelWidth, wrapperWidth, wrapperWrap, fullWidth, tooltipIcon, tooltipLayout, showFeedback, feedbackLayout, noField, withFormItem, showInnerLabel, keepFeedbackSpace]);
  return /*#__PURE__*/_jsx(FormLayoutContext.Provider, {
    value: layout,
    children: /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({
      spacing: spacing
    }, restProps), {}, {
      container: true,
      children: Children.map(children, function (child) {
        var _type, _type2, _type3, _type4;
        if (!child) {
          return null;
        }
        if (["Grid", "Grid2"].includes((child === null || child === void 0 || (_type = child.type) === null || _type === void 0 ? void 0 : _type.displayName) || (child === null || child === void 0 || (_type2 = child.type) === null || _type2 === void 0 || (_type2 = _type2.render) === null || _type2 === void 0 ? void 0 : _type2.name))) {
          return child;
        }
        if (!noForm && form && ["Field", "ObjectField", "ArrayField", "VoidField"].includes((child === null || child === void 0 || (_type3 = child.type) === null || _type3 === void 0 ? void 0 : _type3.displayName) || (child === null || child === void 0 || (_type4 = child.type) === null || _type4 === void 0 || (_type4 = _type4.render) === null || _type4 === void 0 ? void 0 : _type4.name))) {
          var _props, _form$query$take$disp, _form$query, _form$query2;
          var name = child === null || child === void 0 || (_props = child.props) === null || _props === void 0 ? void 0 : _props.name;
          if (!name) {
            return null;
          }
          var display = (_form$query$take$disp = form === null || form === void 0 || (_form$query = form.query("".concat(name))) === null || _form$query === void 0 || (_form$query = _form$query.take()) === null || _form$query === void 0 ? void 0 : _form$query.display) !== null && _form$query$take$disp !== void 0 ? _form$query$take$disp : form === null || form === void 0 || (_form$query2 = form.query("*.".concat(name))) === null || _form$query2 === void 0 || (_form$query2 = _form$query2.take()) === null || _form$query2 === void 0 ? void 0 : _form$query2.display;
          if (display && display !== "visible") {
            return null;
          }
        }
        return /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({
          item: true
        }, _objectSpread(_objectSpread({}, itemBaseProps), getItemColsProps(child === null || child === void 0 ? void 0 : child.props))), {}, {
          children: child
        }));
      })
    }))
  });
}, {
  displayName: "iimm.Mui.Formily.FormLayout"
});