@formily-design/formily-antd 1.0.0 → 1.0.2

package/playground/components/FormButtonGroup/preview.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import { FormButtonGroup as FormilyButtonGroup } from '@formily/antd-v5'
-import { createBehavior, createResource } from '@formily-design/core'
-import { DnFC } from '@formily-design/react'
-import { CustomSchemas } from '../../schemas'
-import { CustomLocales } from '../../locales'
-
-export const FormButtonGroup: DnFC<
-  React.ComponentProps<typeof FormilyButtonGroup>
-> = FormilyButtonGroup
-
-FormButtonGroup.Behavior = createBehavior({
-  name: 'FormButtonGroup',
-  extends: ['Field'],
-  selector: (node) => node.props?.['x-component'] === 'FormButtonGroup',
-  designerProps: {
-    droppable: true,
-    propsSchema: {
-      type: 'object',
-      properties: {
-        'x-component-props': CustomSchemas.FormButtonGroup,
-      },
-    },
-  },
-  designerLocales: CustomLocales.FormButtonGroup,
-})
-
-FormButtonGroup.Resource = createResource({
-  icon: 'SelectSource',
-  elements: [
-    {
-      componentName: 'Field',
-      props: {
-        type: 'void',
-        title: 'FormButtonGroup',
-        'x-decorator': 'FormButtonGroup.FormItem',
-        'x-component': 'FormButtonGroup',
-      },
-      children: [
-        {
-          componentName: 'Field',
-          props: {
-            type: 'void',
-            'x-component': 'FormButton',
-            'x-component-props': {
-              title: '重置',
-              htmlType: 'reset',
-            },
-          },
-        },
-        {
-          componentName: 'Field',
-          props: {
-            type: 'void',
-            'x-component': 'FormButton',
-            'x-component-props': {
-              title: '提交',
-              type: 'primary',
-              htmlType: 'submit',
-            },
-          },
-        },
-      ],
-    },
-  ],
-})

package/playground/components/FormList/FormList.tsx

@@ -1,164 +0,0 @@
-import React from 'react'
-import { Empty, Flex } from 'antd'
-import { ArrayField } from '@formily/core'
-import {
-  useField,
-  observer,
-  useFieldSchema,
-  RecursionField,
-} from '@formily/react'
-import cls from 'classnames'
-import { ISchema } from '@formily/json-schema'
-import { ArrayBase } from '@formily/antd-v5'
-
-export interface FormListProps {
-  title?: string
-  className?: string
-}
-
-type ComposedFormList = React.FC<React.PropsWithChildren<FormListProps>>
-
-const isAdditionComponent = (schema: ISchema) => {
-  return schema['x-component']?.indexOf('Addition') > -1
-}
-
-const isIndexComponent = (schema: ISchema) => {
-  return schema['x-component']?.indexOf?.('Index') > -1
-}
-
-const isRemoveComponent = (schema: ISchema) => {
-  return schema['x-component']?.indexOf?.('Remove') > -1
-}
-
-const isCopyComponent = (schema: ISchema) => {
-  return schema['x-component']?.indexOf?.('Copy') > -1
-}
-
-const isMoveUpComponent = (schema: ISchema) => {
-  return schema['x-component']?.indexOf?.('MoveUp') > -1
-}
-
-const isMoveDownComponent = (schema: ISchema) => {
-  return schema['x-component']?.indexOf?.('MoveDown') > -1
-}
-
-const isOperationComponent = (schema: ISchema) => {
-  return (
-    isAdditionComponent(schema) ||
-    isRemoveComponent(schema) ||
-    isCopyComponent(schema) ||
-    isMoveDownComponent(schema) ||
-    isMoveUpComponent(schema)
-  )
-}
-
-export const InternalFormList: ComposedFormList = observer((props) => {
-  const field = useField<ArrayField>()
-  const schema = useFieldSchema()
-  const dataSource = Array.isArray(field.value) ? field.value : []
-  const prefixCls = 'formily-array-cards'
-
-  if (!schema) throw new Error('can not found schema object')
-
-  const renderItems = () => {
-    return dataSource?.map((item, index) => {
-      const items = Array.isArray(schema.items)
-        ? schema.items[index] || schema.items[0]
-        : schema.items
-      // const title = (
-      //   <span>
-      //     <RecursionField
-      //       schema={items}
-      //       name={index}
-      //       filterProperties={(schema) => {
-      //         if (!isIndexComponent(schema)) return false
-      //         return true
-      //       }}
-      //       onlyRenderProperties
-      //     />
-      //     {props.title || field.title}
-      //   </span>
-      // )
-      // const extra = (
-      //   <span>
-      //     <RecursionField
-      //       schema={items}
-      //       name={index}
-      //       filterProperties={(schema) => {
-      //         if (!isOperationComponent(schema)) return false
-      //         return true
-      //       }}
-      //       onlyRenderProperties
-      //     />
-      //     {props.extra}
-      //   </span>
-      // )
-      const content = items ? (
-        <RecursionField
-          schema={items}
-          name={index}
-          filterProperties={(schema) => {
-            if (isIndexComponent(schema)) return false
-            if (isOperationComponent(schema)) return false
-            return true
-          }}
-        />
-      ) : null
-      const operations = items ? (
-        <RecursionField
-          schema={items}
-          name={index}
-          filterProperties={(schema) => {
-            if (!isOperationComponent(schema)) return false
-            return true
-          }}
-          onlyRenderProperties
-        />
-      ) : null
-      return (
-        <ArrayBase.Item
-          key={index}
-          index={index}
-          record={() => field.value?.[index]}
-        >
-          <Flex gap={8}>
-            <div style={{ flex: 1 }}>{content}</div>
-            <div>{operations}</div>
-          </Flex>
-        </ArrayBase.Item>
-      )
-    })
-  }
-
-  const renderAddition = () => {
-    return schema.reduceProperties((addition, schema, key) => {
-      if (isAdditionComponent(schema)) {
-        return <RecursionField schema={schema} name={key} />
-      }
-      return addition
-    }, null)
-  }
-
-  const renderEmpty = () => {
-    if (dataSource?.length) return
-    return (
-      <div className={cls(`${prefixCls}-item`, props.className)}>
-        <Empty />
-      </div>
-    )
-  }
-
-  return (
-    <ArrayBase>
-      {renderEmpty()}
-      {renderItems()}
-      {renderAddition()}
-    </ArrayBase>
-  )
-})
-
-InternalFormList.displayName = 'FormList'
-
-export const FormList = ArrayBase.mixin(InternalFormList)
-
-export default FormList

package/playground/components/FormList/index.tsx

@@ -1 +0,0 @@
-export { FormList } from './preview'

package/playground/components/FormList/preview.tsx

@@ -1,429 +0,0 @@
-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`,
-        },
-      },
-    },
-  ],
-})