@formily-design/formily-antd 1.0.0

package/playground/components/FormList/preview.tsx

@@ -0,0 +1,429 @@
+import React from 'react'
+import { Flex } from 'antd'
+import {
+  ITreeNode,
+  TreeNode,
+  createBehavior,
+  createResource,
+} from '@formily-design/core'
+import {
+  useTreeNode,
+  TreeNodeWidget,
+  DroppableWidget,
+  useNodeIdProps,
+  DnFC,
+} from '@formily-design/react'
+import { ArrayBase } from '@formily/antd-v5'
+import { ISchema, observer } from '@formily/react'
+import cls from 'classnames'
+import {
+  createEnsureTypeItemsNode,
+  createNodeId,
+  findNodeByComponentPath,
+  queryNodesByComponentPath,
+} from '../../../src/shared'
+import { useDropTemplate } from '../../../src/hooks'
+import { LoadTemplate } from '../../../src/common/LoadTemplate'
+import {
+  AllLocales,
+  createFieldSchema,
+  createVoidFieldSchema,
+} from '@formily-design/formily-antd'
+import { FormListProps } from './FormList'
+
+const ensureObjectItemsNode = createEnsureTypeItemsNode('object')
+
+const isFormListOperation = (name: string) =>
+  name === 'FormList.Remove' ||
+  name === 'FormList.MoveDown' ||
+  name === 'FormList.MoveUp'
+
+// const isOperationsComponent = (schema: Schema) => {
+//   return schema['x-component']?.indexOf('Operations') > -1
+// }
+
+// const isAdditionComponent = (schema: Schema) => {
+//   return schema['x-component']?.indexOf('Addition') > -1
+// }
+// const useAddition = () => {
+//   const schema = useFieldSchema()
+//   return schema?.reduceProperties((addition, schema, key) => {
+//     if (isAdditionComponent(schema)) {
+//       return <RecursionField schema={schema} name={key} />
+//     }
+//     return addition
+//   }, null)
+// }
+
+const FormListSchemas: ISchema & { Addition: ISchema } = {
+  type: 'array',
+  properties: {
+    size: {
+      type: 'string',
+      enum: ['large', 'small', 'middle'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        defaultValue: 'small',
+      },
+    },
+  },
+  Addition: {
+    type: 'object',
+    properties: {
+      method: {
+        type: 'string',
+        enum: ['push', 'unshift'],
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio.Group',
+        'x-component-props': {
+          defaultValue: 'push',
+          optionType: 'button',
+        },
+      },
+      defaultValue: {
+        type: 'string',
+        'x-decorator': 'FormItem',
+        'x-component': 'ValueInput',
+      },
+    },
+  },
+}
+const FormListLocales = {
+  'zh-CN': {
+    title: '自增表单列表',
+    addIndex: '添加索引',
+    addOperation: '添加操作',
+    settings: {
+      'x-component-props': {
+        size: '大小',
+      },
+    },
+  },
+  'en-US': {
+    title: 'Form List',
+    addIndex: 'Add Index',
+    addOperation: 'Add Operation',
+    settings: {
+      'x-component-props': {
+        size: 'Size',
+      },
+    },
+  },
+}
+const createArrayBehavior = (name: string) => {
+  return createBehavior(
+    {
+      name,
+      extends: ['Field'],
+      selector: (node) => node.props?.['x-component'] === name,
+      designerProps: {
+        droppable: true,
+        propsSchema: createFieldSchema(FormListSchemas),
+      },
+      designerLocales: FormListLocales,
+    },
+    {
+      name: `${name}.Addition`,
+      extends: ['Field'],
+      selector: (node) => node.props?.['x-component'] === `${name}.Addition`,
+      designerProps: {
+        allowDrop(parent) {
+          return parent.props?.['x-component'] === name
+        },
+        /** 不允许拖拽 */
+        draggable: false,
+        propsSchema: createVoidFieldSchema(FormListSchemas.Addition),
+      },
+      designerLocales: AllLocales.ArrayAddition,
+    },
+    {
+      name: `${name}.Remove`,
+      extends: ['Field'],
+      selector: (node) => node.props?.['x-component'] === `${name}.Remove`,
+      designerProps: {
+        allowDrop(parent) {
+          return parent.props?.['x-component'] === name
+        },
+        draggable: false,
+        propsSchema: createVoidFieldSchema(),
+      },
+      designerLocales: AllLocales.ArrayRemove,
+    },
+    {
+      name: `${name}.Index`,
+      extends: ['Field'],
+      selector: (node) => node.props?.['x-component'] === `${name}.Index`,
+      designerProps: {
+        allowDrop(parent) {
+          return parent.props?.['x-component'] === name
+        },
+        propsSchema: createVoidFieldSchema(),
+      },
+      designerLocales: AllLocales.ArrayIndex,
+    },
+    {
+      name: `${name}.MoveUp`,
+      extends: ['Field'],
+      selector: (node) => node.props?.['x-component'] === `${name}.MoveUp`,
+      designerProps: {
+        allowDrop(parent) {
+          return parent.props?.['x-component'] === name
+        },
+        draggable: false,
+        propsSchema: createVoidFieldSchema(),
+      },
+      designerLocales: AllLocales.ArrayMoveUp,
+    },
+    {
+      name: `${name}.MoveDown`,
+      extends: ['Field'],
+      selector: (node) => node.props?.['x-component'] === `${name}.MoveDown`,
+      designerProps: {
+        allowDrop(parent) {
+          return parent.props?.['x-component'] === 'ArrayCards'
+        },
+        draggable: false,
+        propsSchema: createVoidFieldSchema(),
+      },
+      designerLocales: AllLocales.ArrayMoveDown,
+    }
+  )
+}
+
+/** 创建添加节点 */
+function createAdditionNode(node: ITreeNode) {
+  return new TreeNode({
+    componentName: node.componentName,
+    props: {
+      type: 'void',
+      title: '新增一项',
+      'x-component': 'FormList.Addition',
+    },
+  })
+}
+
+export const FormList: DnFC<FormListProps> = observer(({ title, ...props }) => {
+  const node = useTreeNode()
+  const nodeId = useNodeIdProps()
+  const designer = useDropTemplate('FormList', (source) => {
+    const indexNode = new TreeNode({
+      componentName: node.componentName,
+      props: {
+        type: 'void',
+        'x-component': 'FormList.Index',
+      },
+    })
+    const additionNode = createAdditionNode(node)
+    const removeNode = new TreeNode({
+      componentName: node.componentName,
+      props: {
+        type: 'void',
+        // title: 'Addition',
+        'x-component': 'FormList.Remove',
+      },
+    })
+    const moveDownNode = new TreeNode({
+      componentName: node.componentName,
+      props: {
+        type: 'void',
+        // title: 'Addition',
+        'x-component': 'FormList.MoveDown',
+      },
+    })
+    const moveUpNode = new TreeNode({
+      componentName: node.componentName,
+      props: {
+        type: 'void',
+        // title: 'Addition',
+        'x-component': 'FormList.MoveUp',
+      },
+    })
+
+    const objectNode = new TreeNode({
+      componentName: node.componentName,
+      props: {
+        type: 'object',
+      },
+      children: [indexNode, ...source, removeNode, moveDownNode, moveUpNode],
+    })
+    return [objectNode, additionNode]
+  })
+  const renderFormList = () => {
+    if (node.children.length === 0) return <DroppableWidget />
+    const additions = queryNodesByComponentPath(node, [
+      'FormList',
+      'FormList.Addition',
+    ])
+    // const indexes = queryNodesByComponentPath(node, [
+    //   'FormList',
+    //   '*',
+    //   'FormList.Index',
+    // ])
+    const operations = queryNodesByComponentPath(node, [
+      'FormList',
+      '*',
+      isFormListOperation,
+    ])
+    const children = queryNodesByComponentPath(node, [
+      'FormList',
+      '*',
+      (name) => !name.includes('FormList.'),
+    ])
+    return (
+      <ArrayBase disabled>
+        <ArrayBase.Item index={0} record={{}}>
+          <div
+            {...props}
+            className={cls('ant-formily-array-form-list-item', props.className)}
+          >
+            <div>
+              <span data-content-editable="x-component-props.title">
+                {title}
+              </span>
+            </div>
+            <div {...createNodeId(designer, ensureObjectItemsNode(node).id)}>
+              {children.length ? (
+                children.map((node) => (
+                  <Flex gap={8} key={node.id}>
+                    <div style={{ flex: 1 }}>
+                      <TreeNodeWidget key={node.id} node={node} />
+                    </div>
+                    <div>
+                      {operations.map((node) => (
+                        <TreeNodeWidget key={node.id} node={node} />
+                      ))}
+                    </div>
+                  </Flex>
+                ))
+              ) : (
+                <DroppableWidget hasChildren={false} />
+              )}
+            </div>
+          </div>
+        </ArrayBase.Item>
+        {additions.map((node) => (
+          <TreeNodeWidget key={node.id} node={node} />
+        ))}
+      </ArrayBase>
+    )
+  }
+
+  return (
+    <div {...nodeId} className="dn-array-form-list">
+      {renderFormList()}
+      <LoadTemplate
+        actions={[
+          /** 添加索引 */
+          // {
+          //   title: node.getMessage('addIndex'),
+          //   icon: 'AddIndex',
+          //   onClick: () => {
+          //     if (
+          //       hasNodeByComponentPath(node, [
+          //         'FormList',
+          //         '*',
+          //         'FormList.Index',
+          //       ])
+          //     )
+          //       return
+          //     const indexNode = new TreeNode({
+          //       componentName: node.componentName,
+          //       props: {
+          //         type: 'void',
+          //         'x-component': 'FormList.Index',
+          //       },
+          //     })
+          //     ensureObjectItemsNode(node).append(indexNode)
+          //   },
+          // },
+          /** 添加操作 */
+          {
+            title: node.getMessage('addOperation'),
+            icon: 'AddOperation',
+            onClick: () => {
+              const oldAdditionNode = findNodeByComponentPath(node, [
+                'FormList',
+                'FormList.Addition',
+              ])
+              /** 不存在，才添加 */
+              if (!oldAdditionNode) {
+                const additionNode = createAdditionNode(node)
+                ensureObjectItemsNode(node).insertAfter(additionNode)
+              }
+              const oldRemoveNode = findNodeByComponentPath(node, [
+                'FormList',
+                '*',
+                'FormList.Remove',
+              ])
+              const oldMoveDownNode = findNodeByComponentPath(node, [
+                'FormList',
+                '*',
+                'FormList.MoveDown',
+              ])
+              const oldMoveUpNode = findNodeByComponentPath(node, [
+                'FormList',
+                '*',
+                'FormList.MoveUp',
+              ])
+              if (!oldRemoveNode) {
+                ensureObjectItemsNode(node).append(
+                  new TreeNode({
+                    componentName: node.componentName,
+                    props: {
+                      type: 'void',
+                      'x-component': 'FormList.Remove',
+                    },
+                  })
+                )
+              }
+              if (!oldMoveDownNode) {
+                ensureObjectItemsNode(node).append(
+                  new TreeNode({
+                    componentName: node.componentName,
+                    props: {
+                      type: 'void',
+                      'x-component': 'FormList.MoveDown',
+                    },
+                  })
+                )
+              }
+              if (!oldMoveUpNode) {
+                ensureObjectItemsNode(node).append(
+                  new TreeNode({
+                    componentName: node.componentName,
+                    props: {
+                      type: 'void',
+                      'x-component': 'FormList.MoveUp',
+                    },
+                  })
+                )
+              }
+            },
+          },
+        ]}
+      />
+    </div>
+  )
+})
+
+ArrayBase.mixin(FormList)
+
+FormList.Behavior = createArrayBehavior('FormList')
+
+FormList.Resource = createResource({
+  icon: 'ArrayCardsSource',
+  elements: [
+    {
+      componentName: 'Field',
+      props: {
+        type: 'array',
+        'x-decorator': 'FormItem',
+        'x-component': 'FormList',
+        'x-component-props': {
+          title: `Title`,
+        },
+      },
+    },
+  ],
+})