jjb-lc-designable/react/widgets/ComponentTreeWidget/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, useEffect } from 'react';
import { useTree, usePrefix, useDesigner, useComponents } from '../../hooks';
import { TreeNodeContext, DesignerComponentsContext } from '../../context';
import { GlobalRegistry } from 'jjb-lc-designable/core';
import { observer } from 'jjb-lc-formily/reactive-react';
import cls from 'classnames';
import './styles.less';
export const TreeNodeWidget = observer(props => {
  const designer = useDesigner(props.node?.designerProps?.effects);
  const components = useComponents();
  const node = props.node;
  const renderChildren = () => {
    if (node?.designerProps?.selfRenderChildren) return [];
    return node?.children?.map(child => {
      return /*#__PURE__*/React.createElement(TreeNodeWidget, {
        key: child.id,
        node: child
      });
    });
  };
  const renderProps = (extendsProps = {}) => {
    const props = {
      ...node.designerProps?.defaultProps,
      ...extendsProps,
      ...node.props,
      ...node.designerProps?.getComponentProps?.(node)
    };
    if (node.depth === 0) {
      delete props.style;
    }
    return props;
  };
  const renderComponent = () => {
    const componentName = node.componentName;
    const Component = components[componentName];
    const dataId = {};
    if (Component) {
      if (designer) {
        dataId[designer?.props?.nodeIdAttrName] = node.id;
      }
      return /*#__PURE__*/React.createElement(Component, renderProps(dataId), ...renderChildren());
    } else {
      if (node?.children?.length) {
        return /*#__PURE__*/React.createElement(Fragment, null, renderChildren());
      }
    }
  };
  if (!node) return null;
  if (node.hidden) return null;
  return /*#__PURE__*/React.createElement(TreeNodeContext.Provider, {
    value: node
  }, renderComponent());
});
export const ComponentTreeWidget = observer(props => {
  const tree = useTree();
  const prefix = usePrefix('component-tree');
  const designer = useDesigner();
  const dataId = {};
  if (designer && tree) {
    dataId[designer?.props?.nodeIdAttrName] = tree.id;
  }
  useEffect(() => {
    GlobalRegistry.registerDesignerBehaviors(props.components);
  }, []);
  return /*#__PURE__*/React.createElement("div", _extends({
    style: {
      ...props.style,
      ...tree?.props?.style
    },
    className: cls(prefix, props.className)
  }, dataId), /*#__PURE__*/React.createElement(DesignerComponentsContext.Provider, {
    value: props.components
  }, /*#__PURE__*/React.createElement(TreeNodeWidget, {
    node: tree
  })));
});
ComponentTreeWidget.displayName = 'ComponentTreeWidget';