123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440 |
- import React from 'react'
- import { Table, TableProps } from 'antd'
- import { TreeNode, createBehavior, createResource } from '@designable/core'
- import {
- useTreeNode,
- TreeNodeWidget,
- DroppableWidget,
- useNodeIdProps,
- DnFC
- } from '@designable/react'
- import { ArrayBase } from '@formily/antd'
- import { observer } from '@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: React.FC = (props: any) => {
- return (
- <th {...props} data-designer-node-id={props.className.match(/data-id\:([^\s]+)/)?.[1]}>
- {props.children}
- </th>
- )
- }
- const BodyCell: React.FC = (props: any) => {
- return (
- <td {...props} data-designer-node-id={props.className.match(/data-id\:([^\s]+)/)?.[1]}>
- {props.children}
- </td>
- )
- }
- export const ArrayTable: DnFC<TableProps<any>> = 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 <DroppableWidget />
- return (
- <ArrayBase disabled>
- <Table
- size="small"
- bordered
- {...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 <TreeNodeWidget node={child} key={child.id} />
- })
- const props = node.props['x-component-props']
- return (
- <Table.Column
- {...props}
- title={<div data-content-editable="x-component-props.title">{props.title}</div>}
- dataIndex={node.id}
- className={`data-id:${node.id}`}
- key={node.id}
- render={(value, record, key) => {
- return (
- <ArrayBase.Item key={key} index={key} record={null}>
- {children.length > 0 ? children : 'Droppable'}
- </ArrayBase.Item>
- )
- }}
- />
- )
- })}
- {columns.length === 0 && <Table.Column render={() => <DroppableWidget />} />}
- </Table>
- {additions.map(child => {
- return <TreeNodeWidget node={child} key={child.id} />
- })}
- </ArrayBase>
- )
- }
- useDropTemplate('ArrayTable.Column', source => {
- return source.map(node => {
- node.props.title = undefined
- return node
- })
- })
- return (
- <div {...nodeId} className="dn-array-table">
- {renderTable()}
- <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)
- }
- }
- }
- ]}
- />
- </div>
- )
- })
- 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'
- }
- }
- ]
- })
|