jjb-lc-designable/formily-antd/components/ArrayTable/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 from 'react';
import { Table } from 'antd';
import { TreeNode, createBehavior, createResource } from 'jjb-lc-designable/core';
import { useTreeNode, TreeNodeWidget, DroppableWidget, useNodeIdProps } from 'jjb-lc-designable/react';
import { ArrayBase } from 'jjb-lc-formily/antd';
import { observer } from 'jjb-lc-formily/react';
import { LoadTemplate } from '../../common/LoadTemplate';
import cls from 'classnames';
import { queryNodesByComponentPath, hasNodeByComponentPath, findNodeByComponentPath, createEnsureTypeItemsNode } from '../../shared';
import { useDropTemplate } from '../../hooks';
import { createArrayBehavior } from '../ArrayBase';
import './styles.less';
import { createVoidFieldSchema } from '../Field';
import { AllSchemas } from '../../schemas';
import { AllLocales } from '../../locales';
const ensureObjectItemsNode = createEnsureTypeItemsNode('object');
const HeaderCell = props => {
  return /*#__PURE__*/React.createElement("th", _extends({}, props, {
    "data-designer-node-id": props.className.match(/data-id\:([^\s]+)/)?.[1]
  }), props.children);
};
const BodyCell = props => {
  return /*#__PURE__*/React.createElement("td", _extends({}, props, {
    "data-designer-node-id": props.className.match(/data-id\:([^\s]+)/)?.[1]
  }), props.children);
};
export const ArrayTable = observer(props => {
  const node = useTreeNode();
  const nodeId = useNodeIdProps();
  useDropTemplate('ArrayTable', source => {
    const sortHandleNode = new TreeNode({
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'ArrayTable.Column',
        'x-component-props': {
          title: `Title`
        }
      },
      children: [{
        componentName: 'Field',
        props: {
          type: 'void',
          'x-component': 'ArrayTable.SortHandle'
        }
      }]
    });
    const indexNode = new TreeNode({
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'ArrayTable.Column',
        'x-component-props': {
          title: `Title`
        }
      },
      children: [{
        componentName: 'Field',
        props: {
          type: 'void',
          'x-component': 'ArrayTable.Index'
        }
      }]
    });
    const columnNode = new TreeNode({
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'ArrayTable.Column',
        'x-component-props': {
          title: `Title`
        }
      },
      children: source.map(node => {
        node.props.title = undefined;
        return node;
      })
    });
    const operationNode = new TreeNode({
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'ArrayTable.Column',
        'x-component-props': {
          title: `Title`
        }
      },
      children: [{
        componentName: 'Field',
        props: {
          type: 'void',
          'x-component': 'ArrayTable.Remove'
        }
      }, {
        componentName: 'Field',
        props: {
          type: 'void',
          'x-component': 'ArrayTable.MoveDown'
        }
      }, {
        componentName: 'Field',
        props: {
          type: 'void',
          'x-component': 'ArrayTable.MoveUp'
        }
      }]
    });
    const objectNode = new TreeNode({
      componentName: 'Field',
      props: {
        type: 'object'
      },
      children: [sortHandleNode, indexNode, columnNode, operationNode]
    });
    const additionNode = new TreeNode({
      componentName: 'Field',
      props: {
        type: 'void',
        title: 'Addition',
        'x-component': 'ArrayTable.Addition'
      }
    });
    return [objectNode, additionNode];
  });
  const columns = queryNodesByComponentPath(node, ['ArrayTable', '*', 'ArrayTable.Column']);
  const additions = queryNodesByComponentPath(node, ['ArrayTable', 'ArrayTable.Addition']);
  const defaultRowKey = () => {
    return node.id;
  };
  const renderTable = () => {
    if (node.children.length === 0) return /*#__PURE__*/React.createElement(DroppableWidget, null);
    return /*#__PURE__*/React.createElement(ArrayBase, {
      disabled: true
    }, /*#__PURE__*/React.createElement(Table, _extends({
      size: "small",
      bordered: true
    }, props, {
      scroll: {
        x: '100%'
      },
      className: cls('ant-formily-array-table', props.className),
      style: {
        marginBottom: 10,
        ...props.style
      },
      rowKey: defaultRowKey,
      dataSource: [{
        id: '1'
      }],
      pagination: false,
      components: {
        header: {
          cell: HeaderCell
        },
        body: {
          cell: BodyCell
        }
      }
    }), columns.map(node => {
      const children = node.children.map(child => {
        return /*#__PURE__*/React.createElement(TreeNodeWidget, {
          node: child,
          key: child.id
        });
      });
      const props = node.props['x-component-props'];
      return /*#__PURE__*/React.createElement(Table.Column, _extends({}, props, {
        title: /*#__PURE__*/React.createElement("div", {
          "data-content-editable": "x-component-props.title"
        }, props.title),
        dataIndex: node.id,
        className: `data-id:${node.id}`,
        key: node.id,
        render: (value, record, key) => {
          return /*#__PURE__*/React.createElement(ArrayBase.Item, {
            key: key,
            index: key,
            record: null
          }, children.length > 0 ? children : 'Droppable');
        }
      }));
    }), columns.length === 0 && /*#__PURE__*/React.createElement(Table.Column, {
      render: () => /*#__PURE__*/React.createElement(DroppableWidget, null)
    })), additions.map(child => {
      return /*#__PURE__*/React.createElement(TreeNodeWidget, {
        node: child,
        key: child.id
      });
    }));
  };
  useDropTemplate('ArrayTable.Column', source => {
    return source.map(node => {
      node.props.title = undefined;
      return node;
    });
  });
  return /*#__PURE__*/React.createElement("div", _extends({}, nodeId, {
    className: "dn-array-table"
  }), renderTable(), /*#__PURE__*/React.createElement(LoadTemplate, {
    actions: [{
      title: node.getMessage('addSortHandle'),
      icon: 'AddSort',
      onClick: () => {
        if (hasNodeByComponentPath(node, ['ArrayTable', '*', 'ArrayTable.Column', 'ArrayTable.SortHandle'])) return;
        const tableColumn = new TreeNode({
          componentName: 'Field',
          props: {
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              title: `Title`
            }
          },
          children: [{
            componentName: 'Field',
            props: {
              type: 'void',
              'x-component': 'ArrayTable.SortHandle'
            }
          }]
        });
        ensureObjectItemsNode(node).prepend(tableColumn);
      }
    }, {
      title: node.getMessage('addIndex'),
      icon: 'AddIndex',
      onClick: () => {
        if (hasNodeByComponentPath(node, ['ArrayTable', '*', 'ArrayTable.Column', 'ArrayTable.Index'])) return;
        const tableColumn = new TreeNode({
          componentName: 'Field',
          props: {
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              title: `Title`
            }
          },
          children: [{
            componentName: 'Field',
            props: {
              type: 'void',
              'x-component': 'ArrayTable.Index'
            }
          }]
        });
        const sortNode = findNodeByComponentPath(node, ['ArrayTable', '*', 'ArrayTable.Column', 'ArrayTable.SortHandle']);
        if (sortNode) {
          sortNode.parent.insertAfter(tableColumn);
        } else {
          ensureObjectItemsNode(node).prepend(tableColumn);
        }
      }
    }, {
      title: node.getMessage('addColumn'),
      icon: 'AddColumn',
      onClick: () => {
        const operationNode = findNodeByComponentPath(node, ['ArrayTable', '*', 'ArrayTable.Column', name => {
          return name === 'ArrayTable.Remove' || name === 'ArrayTable.MoveDown' || name === 'ArrayTable.MoveUp';
        }]);
        const tableColumn = new TreeNode({
          componentName: 'Field',
          props: {
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              title: `Title`
            }
          }
        });
        if (operationNode) {
          operationNode.parent.insertBefore(tableColumn);
        } else {
          ensureObjectItemsNode(node).append(tableColumn);
        }
      }
    }, {
      title: node.getMessage('addOperation'),
      icon: 'AddOperation',
      onClick: () => {
        const oldOperationNode = findNodeByComponentPath(node, ['ArrayTable', '*', 'ArrayTable.Column', name => {
          return name === 'ArrayTable.Remove' || name === 'ArrayTable.MoveDown' || name === 'ArrayTable.MoveUp';
        }]);
        const oldAdditionNode = findNodeByComponentPath(node, ['ArrayTable', 'ArrayTable.Addition']);
        if (!oldOperationNode) {
          const operationNode = new TreeNode({
            componentName: 'Field',
            props: {
              type: 'void',
              'x-component': 'ArrayTable.Column',
              'x-component-props': {
                title: `Title`
              }
            },
            children: [{
              componentName: 'Field',
              props: {
                type: 'void',
                'x-component': 'ArrayTable.Remove'
              }
            }, {
              componentName: 'Field',
              props: {
                type: 'void',
                'x-component': 'ArrayTable.MoveDown'
              }
            }, {
              componentName: 'Field',
              props: {
                type: 'void',
                'x-component': 'ArrayTable.MoveUp'
              }
            }]
          });
          ensureObjectItemsNode(node).append(operationNode);
        }
        if (!oldAdditionNode) {
          const additionNode = new TreeNode({
            componentName: 'Field',
            props: {
              type: 'void',
              title: 'Addition',
              'x-component': 'ArrayTable.Addition'
            }
          });
          ensureObjectItemsNode(node).insertAfter(additionNode);
        }
      }
    }]
  }));
});
ArrayBase.mixin(ArrayTable);
ArrayTable.Behavior = createBehavior(createArrayBehavior('ArrayTable'), {
  name: 'ArrayTable.Column',
  extends: ['Field'],
  selector: node => node.props['x-component'] === 'ArrayTable.Column',
  designerProps: {
    droppable: true,
    allowDrop: node => node.props['type'] === 'object' && node.parent?.props?.['x-component'] === 'ArrayTable',
    propsSchema: createVoidFieldSchema(AllSchemas.ArrayTable.Column)
  },
  designerLocales: AllLocales.ArrayTableColumn
});
ArrayTable.Resource = createResource({
  icon: 'ArrayTableSource',
  elements: [{
    componentName: 'Field',
    props: {
      type: 'array',
      'x-decorator': 'FormItem',
      'x-component': 'ArrayTable'
    }
  }]
});