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

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["children"];
import * as React from 'react';
import classNames from 'classnames';
import { createFormActions, FormEffectHooks } from '@formily/next';
import { FormHelper } from "../formItem/index";
var onFieldValueChange$ = FormEffectHooks.onFieldValueChange$;
export var ChildContainer = function ChildContainer(_ref) {
  var _props$form$getFormSt, _props$form, _classNames, _props$props;

  var children = _ref.children,
      props = _objectWithoutPropertiesLoose(_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 = classNames((_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(FormHelper, _extends({
    editable: editable
  }, props), /*#__PURE__*/React.createElement("div", {
    className: CLASS_PREFIX + "-content",
    style: style
  }, children)));
};
export var effectChildDisplay = function effectChildDisplay(_ref2) {
  var parent = _ref2.parent,
      child = _ref2.child,
      condition = _ref2.condition;

  var _createFormActions = 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);
    }
  });
};