jjb-lc-designable/react-settings-form/components/FoldItem/index.js

基于alibaba-designable源码二次封装的表单设计器。

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { Fragment, useRef, useMemo } from 'react';
import { FormItem } from 'jjb-lc-formily/antd';
import { useField, observer } from 'jjb-lc-formily/react';
import { observable } from 'jjb-lc-formily/reactive';
import { IconWidget, usePrefix } from 'jjb-lc-designable/react';
import cls from 'classnames';
import './styles.less';
const ExpandedMap = new Map();
export const FoldItem = observer(({
  className,
  style,
  children,
  ...props
}) => {
  const prefix = usePrefix('fold-item');
  const field = useField();
  const expand = useMemo(() => observable.ref(ExpandedMap.get(field.address.toString())), []);
  const slots = useRef({
    base: null,
    extra: null
  });
  React.Children.forEach(children, node => {
    if ( /*#__PURE__*/React.isValidElement(node)) {
      if (node?.['type']?.['displayName'] === 'FoldItem.Base') {
        slots.current.base = node['props'].children;
      }
      if (node?.['type']?.['displayName'] === 'FoldItem.Extra') {
        slots.current.extra = node['props'].children;
      }
    }
  });
  return /*#__PURE__*/React.createElement("div", {
    className: cls(prefix, className)
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-base',
    onClick: () => {
      expand.value = !expand.value;
      ExpandedMap.set(field.address.toString(), expand.value);
    }
  }, /*#__PURE__*/React.createElement(FormItem.BaseItem, _extends({}, props, {
    label: /*#__PURE__*/React.createElement("span", {
      className: cls(prefix + '-title', {
        expand: expand.value
      })
    }, slots.current.extra && /*#__PURE__*/React.createElement(IconWidget, {
      infer: "Expand",
      size: 10
    }), props.label)
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%'
    },
    onClick: e => {
      e.stopPropagation();
    }
  }, slots.current.base))), expand.value && slots.current.extra && /*#__PURE__*/React.createElement("div", {
    className: prefix + '-extra'
  }, slots.current.extra));
});
const Base = () => {
  return /*#__PURE__*/React.createElement(Fragment, null);
};
Base.displayName = 'FoldItem.Base';
const Extra = () => {
  return /*#__PURE__*/React.createElement(Fragment, null);
};
Extra.displayName = 'FoldItem.Extra';
FoldItem.Base = Base;
FoldItem.Extra = Extra;