@aliretail/react-materials-components/lib/FormComponents/childContainer/index.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.effectChildDisplay = exports.ChildContainer = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var React = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _next = require("@formily/next");

var _index = require("../formItem/index");

var _excluded = ["children"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var onFieldValueChange$ = _next.FormEffectHooks.onFieldValueChange$;

var ChildContainer = function ChildContainer(_ref) {
  var _props$form$getFormSt, _props$form, _classNames, _props$props;

  var children = _ref.children,
      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
  var _props$schema = props.schema,
      style = _props$schema.style,
      className = _props$schema.className;
  var formState = (_props$form$getFormSt = props === null || props === void 0 ? void 0 : (_props$form = props.form) === null || _props$form === void 0 ? void 0 : _props$form.getFormState()) !== null && _props$form$getFormSt !== void 0 ? _props$form$getFormSt : {};
  var _formState$editable = formState.editable,
      editable = _formState$editable === void 0 ? true : _formState$editable;
  var CLASS_PREFIX = 'aliretail-form-child-container';
  var classes = (0, _classnames["default"])((_classNames = {}, _classNames[CLASS_PREFIX] = true, _classNames[className] = !!className, _classNames));
  var isRequired = props.required || (props === null || props === void 0 ? void 0 : (_props$props = props.props) === null || _props$props === void 0 ? void 0 : _props$props.required) || children.find(function (item) {
    var _item$props$schema$ge, _item$props, _item$props$schema;

    var itemProps = (_item$props$schema$ge = item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : (_item$props$schema = _item$props.schema) === null || _item$props$schema === void 0 ? void 0 : _item$props$schema.getSelfProps()) !== null && _item$props$schema$ge !== void 0 ? _item$props$schema$ge : {};
    var itemXProps = itemProps['x-component-props'];
    return ((itemProps === null || itemProps === void 0 ? void 0 : itemProps.required) || (itemXProps === null || itemXProps === void 0 ? void 0 : itemXProps.required)) && item.visible !== false;
  });
  Object.assign(props, {
    required: isRequired
  });

  if (props.props) {
    Object.assign(props.props, {
      required: isRequired
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    className: classes
  }, /*#__PURE__*/React.createElement(_index.FormHelper, (0, _extends2["default"])({
    editable: editable
  }, props), /*#__PURE__*/React.createElement("div", {
    className: CLASS_PREFIX + "-content",
    style: style
  }, children)));
};

exports.ChildContainer = ChildContainer;

var effectChildDisplay = function effectChildDisplay(_ref2) {
  var parent = _ref2.parent,
      child = _ref2.child,
      condition = _ref2.condition;

  var _createFormActions = (0, _next.createFormActions)(),
      setFieldState = _createFormActions.setFieldState,
      getFieldState = _createFormActions.getFieldState;

  var changeDisplay = function changeDisplay(status) {
    setFieldState(child, function (state) {
      state.display = status;
    });
  };

  getFieldState(parent, function (state) {
    if (condition(state.value)) {
      changeDisplay(true);
    } else {
      // 当判断不成功时，则设置子容器不显示
      changeDisplay(false);
    }
  });
  onFieldValueChange$(parent).subscribe(function (fieldState) {
    if (condition(fieldState.value)) {
      changeDisplay(true);
    } else {
      changeDisplay(false);
    }
  });
};

exports.effectChildDisplay = effectChildDisplay;