jjb-lc-designable/formily-antd/components/FormTab/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 { Tabs } from 'antd';
import { TreeNode, createBehavior, createResource } from 'jjb-lc-designable/core';
import { useNodeIdProps, useTreeNode, TreeNodeWidget, DroppableWidget } from 'jjb-lc-designable/react';
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 parseTabs = parent => {
  const tabs = [];
  parent.children.forEach(node => {
    if (matchComponent(node, 'FormTab.TabPane')) {
      tabs.push(node);
    }
  });
  return tabs;
};
const getCorrectActiveKey = (activeKey, tabs) => {
  if (tabs.length === 0) return;
  if (tabs.some(node => node.id === activeKey)) return activeKey;
  return tabs[tabs.length - 1].id;
};
export const FormTab = observer(props => {
  const [activeKey, setActiveKey] = useState();
  const nodeId = useNodeIdProps();
  const node = useTreeNode();
  const designer = useDropTemplate('FormTab', source => {
    return [new TreeNode({
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'FormTab.TabPane',
        'x-component-props': {
          tab: `Unnamed Title`
        }
      },
      children: source
    })];
  });
  const tabs = parseTabs(node);
  const renderTabs = () => {
    if (!node.children?.length) return /*#__PURE__*/React.createElement(DroppableWidget, null);
    return /*#__PURE__*/React.createElement(Tabs, _extends({}, props, {
      activeKey: getCorrectActiveKey(activeKey, tabs),
      onChange: id => {
        setActiveKey(id);
      }
    }), tabs.map(tab => {
      const props = tab.props['x-component-props'] || {};
      return /*#__PURE__*/React.createElement(Tabs.TabPane, _extends({}, props, {
        style: {
          ...props.style
        },
        tab: /*#__PURE__*/React.createElement("span", {
          "data-content-editable": "x-component-props.tab",
          "data-content-editable-node-id": tab.id
        }, props.tab),
        key: tab.id
      }), /*#__PURE__*/React.createElement('div', {
        [designer.props.nodeIdAttrName]: tab.id,
        style: {
          padding: '20px 0'
        }
      }, tab.children.length ? /*#__PURE__*/React.createElement(TreeNodeWidget, {
        node: tab
      }) : /*#__PURE__*/React.createElement(DroppableWidget, {
        node: tab
      })));
    }));
  };
  return /*#__PURE__*/React.createElement("div", nodeId, renderTabs(), /*#__PURE__*/React.createElement(LoadTemplate, {
    actions: [{
      title: node.getMessage('addTabPane'),
      icon: 'AddPanel',
      onClick: () => {
        const tabPane = new TreeNode({
          componentName: 'Field',
          props: {
            type: 'void',
            'x-component': 'FormTab.TabPane',
            'x-component-props': {
              tab: `Unnamed Title`
            }
          }
        });
        node.append(tabPane);
        setActiveKey(tabPane.id);
      }
    }]
  }));
});
FormTab.TabPane = props => {
  return /*#__PURE__*/React.createElement(Fragment, null, props.children);
};
FormTab.Behavior = createBehavior({
  name: 'FormTab',
  extends: ['Field'],
  selector: node => node.props['x-component'] === 'FormTab',
  designerProps: {
    droppable: true,
    allowAppend: (target, source) => target.children.length === 0 || source.every(node => node.props['x-component'] === 'FormTab.TabPane'),
    propsSchema: createVoidFieldSchema(AllSchemas.FormTab)
  },
  designerLocales: AllLocales.FormTab
}, {
  name: 'FormTab.TabPane',
  extends: ['Field'],
  selector: node => node.props['x-component'] === 'FormTab.TabPane',
  designerProps: {
    droppable: true,
    allowDrop: node => node.props['x-component'] === 'FormTab',
    propsSchema: createVoidFieldSchema(AllSchemas.FormTab.TabPane)
  },
  designerLocales: AllLocales.FormTabPane
});
FormTab.Resource = createResource({
  icon: 'TabSource',
  elements: [{
    componentName: 'Field',
    props: {
      type: 'void',
      'x-component': 'FormTab'
    }
  }]
});