jjb-lc-designable/formily-antd/components/FormCollapse/preview.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, useState } from 'react';
import { observer } from 'jjb-lc-formily/react';
import { Collapse } from 'antd';
import { TreeNode, createBehavior, createResource } from 'jjb-lc-designable/core';
import { useTreeNode, useNodeIdProps, DroppableWidget, TreeNodeWidget } from 'jjb-lc-designable/react';
import { toArr } from 'jjb-lc-formily/shared';
import { LoadTemplate } from '../../common/LoadTemplate';
import { useDropTemplate } from '../../hooks';
import { createVoidFieldSchema } from '../Field';
import { AllSchemas } from '../../schemas';
import { AllLocales } from '../../locales';
import { matchComponent } from '../../shared';
const parseCollapse = parent => {
  const tabs = [];
  parent.children.forEach(node => {
    if (matchComponent(node, 'FormCollapse.CollapsePanel')) {
      tabs.push(node);
    }
  });
  return tabs;
};
export const FormCollapse = observer(props => {
  const [activeKey, setActiveKey] = useState([]);
  const node = useTreeNode();
  const nodeId = useNodeIdProps();
  const designer = useDropTemplate('FormCollapse', source => {
    const panelNode = new TreeNode({
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'FormCollapse.CollapsePanel',
        'x-component-props': {
          header: `Unnamed Title`
        }
      },
      children: source
    });
    setActiveKey(toArr(activeKey).concat(panelNode.id));
    return [panelNode];
  });
  const panels = parseCollapse(node);
  const renderCollapse = () => {
    if (!node.children?.length) return /*#__PURE__*/React.createElement(DroppableWidget, null);
    return /*#__PURE__*/React.createElement(Collapse, _extends({}, props, {
      activeKey: panels.map(tab => tab.id)
    }), panels.map(panel => {
      const props = panel.props['x-component-props'] || {};
      return /*#__PURE__*/React.createElement(Collapse.Panel, _extends({}, props, {
        style: {
          ...props.style
        },
        header: /*#__PURE__*/React.createElement("span", {
          "data-content-editable": "x-component-props.header",
          "data-content-editable-node-id": panel.id
        }, props.header),
        key: panel.id
      }), /*#__PURE__*/React.createElement('div', {
        [designer.props.nodeIdAttrName]: panel.id,
        style: {
          padding: '20px 0'
        }
      }, panel.children.length ? /*#__PURE__*/React.createElement(TreeNodeWidget, {
        node: panel
      }) : /*#__PURE__*/React.createElement(DroppableWidget, null)));
    }));
  };
  return /*#__PURE__*/React.createElement("div", nodeId, renderCollapse(), /*#__PURE__*/React.createElement(LoadTemplate, {
    actions: [{
      title: node.getMessage('addCollapsePanel'),
      icon: 'AddPanel',
      onClick: () => {
        const tabPane = new TreeNode({
          componentName: 'Field',
          props: {
            type: 'void',
            'x-component': 'FormCollapse.CollapsePanel',
            'x-component-props': {
              header: `Unnamed Title`
            }
          }
        });
        node.append(tabPane);
        const keys = toArr(activeKey);
        setActiveKey(keys.concat(tabPane.id));
      }
    }]
  }));
});
FormCollapse.CollapsePanel = props => {
  return /*#__PURE__*/React.createElement(Fragment, null, props.children);
};
FormCollapse.Behavior = createBehavior({
  name: 'FormCollapse',
  extends: ['Field'],
  selector: node => node.props['x-component'] === 'FormCollapse',
  designerProps: {
    droppable: true,
    allowAppend: (target, source) => target.children.length === 0 || source.every(node => node.props['x-component'] === 'FormCollapse.CollapsePanel'),
    propsSchema: createVoidFieldSchema(AllSchemas.FormCollapse)
  },
  designerLocales: AllLocales.FormCollapse
}, {
  name: 'FormCollapse.CollapsePanel',
  extends: ['Field'],
  selector: node => node.props['x-component'] === 'FormCollapse.CollapsePanel',
  designerProps: {
    droppable: true,
    allowDrop: node => node.props['x-component'] === 'FormCollapse',
    propsSchema: createVoidFieldSchema(AllSchemas.FormCollapse.CollapsePanel)
  },
  designerLocales: AllLocales.FormCollapsePanel
});
FormCollapse.Resource = createResource({
  icon: 'CollapseSource',
  elements: [{
    componentName: 'Field',
    props: {
      type: 'void',
      'x-component': 'FormCollapse'
    }
  }]
});