@formily-design/formily-antd 1.0.0

package/playground/components/FormButton/preview.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { createBehavior, createResource } from '@formily-design/core'
+import { DnFC } from '@formily-design/react'
+import { ClickEventSetter } from '../ClickEventSetter'
+import { FormButton as FormButtonComponent } from './FormButton'
+import { CustomSchemas } from '../../schemas'
+import { CustomLocales } from '../../locales'
+
+export const FormButton: DnFC<
+  React.ComponentProps<typeof FormButtonComponent>
+> = FormButtonComponent
+
+FormButton.Behavior = createBehavior({
+  name: 'FormButton',
+  extends: ['Field'],
+  selector: (node) => node.props['x-component'] === 'FormButton',
+  designerProps: {
+    droppable: false,
+    propsSchema: {
+      type: 'object',
+      properties: {
+        'component-group': {
+          type: 'void',
+          'x-component': 'CollapseItem',
+          properties: {
+            'x-component-props': CustomSchemas.FormButton,
+          },
+        },
+        'event-group': {
+          type: 'void',
+          'x-component': 'CollapseItem',
+          properties: {
+            'x-component-props.onEvent.click': {
+              type: 'object',
+              'x-component': ClickEventSetter,
+            },
+          },
+        },
+      },
+    },
+  },
+  designerLocales: CustomLocales.FormButton,
+})
+
+FormButton.Resource = createResource({
+  icon: 'SelectSource',
+  elements: [
+    {
+      componentName: 'Field',
+      props: {
+        type: 'void',
+        title: 'FormButton',
+        'x-component': 'FormButton',
+        'x-component-props': {
+          title: '按钮',
+        },
+      },
+    },
+  ],
+})

package/playground/components/FormButton/utils/actionExecutors.ts

@@ -0,0 +1,96 @@
+import { message } from 'antd'
+import {
+  IEventAction,
+  INavigationAction,
+  IRequestAction,
+  IDownloadAction,
+} from '../../ClickEventSetter/types'
+import { executeFormApi } from '../../../utils'
+
+/**
+ * 执行页面跳转动作
+ */
+export function executeNavigationAction(action: INavigationAction) {
+  const { url, target = '_self' } = action
+  if (target === '_blank') {
+    window.open(url, '_blank')
+  } else {
+    window.location.href = url
+  }
+}
+
+/**
+ * 执行服务请求动作
+ */
+export async function executeRequestAction(
+  action: IRequestAction,
+  formValues?: Record<string, any>,
+  apiParams?: Record<string, any>
+): Promise<void> {
+  const { successMessage } = action
+
+  await executeFormApi(action, formValues, { apiParams })
+
+  if (successMessage) {
+    message.success(successMessage)
+  }
+}
+
+/**
+ * 执行下载文件动作
+ */
+export function executeDownloadAction(action: IDownloadAction) {
+  const { url } = action
+  const link = document.createElement('a')
+  link.href = url
+  link.download = ''
+  link.target = '_blank'
+  link.style.display = 'none'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+/**
+ * 根据动作类型执行对应的动作
+ */
+export async function executeAction(
+  action: IEventAction,
+  formValues?: Record<string, any>,
+  apiParams?: Record<string, any>
+): Promise<void> {
+  switch (action.type) {
+    case 'navigation':
+      return executeNavigationAction(action)
+    case 'request':
+      return executeRequestAction(action, formValues, apiParams)
+    case 'download':
+      return executeDownloadAction(action)
+    default:
+      console.warn(`未知的动作类型: ${(action as any).type}`)
+  }
+}
+
+/**
+ * 按顺序执行所有动作
+ */
+export async function executeActions(
+  actions: IEventAction[],
+  formValues?: Record<string, any>,
+  apiParams?: Record<string, any>,
+  onError?: (error: Error, index: number) => void
+): Promise<void> {
+  for (let i = 0; i < actions.length; i++) {
+    try {
+      await executeAction(actions[i], formValues, apiParams)
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error))
+      if (onError) {
+        onError(err, i)
+      } else {
+        console.error(`动作 ${i + 1} 执行失败:`, err)
+      }
+      // 继续执行后续动作
+    }
+  }
+}

package/playground/components/FormButtonGroup/FormButtonGroup.tsx

@@ -0,0 +1,21 @@
+import { connect, mapProps } from '@formily/react'
+import { FormButtonGroup as ButtonGroup } from '@formily/antd-v5'
+
+/**
+ * 表单按钮组
+ * 为了实现只读模式下不显示按钮，特殊处理一下 FormButtonGroup 组件
+ * 判断表单模式，如果是只读模式，不显示内部所有按钮
+ */
+export const FormButtonGroup = connect(
+  ButtonGroup,
+  mapProps((props, field) => {
+    return {
+      ...props,
+      // 只读模式下不显示按钮
+      children:
+        field.form.pattern === 'readOnly' || field.form.pattern === 'readPretty'
+          ? null
+          : props.children,
+    }
+  })
+)

package/playground/components/FormButtonGroup/index.ts

@@ -0,0 +1 @@
+export * from './preview'

package/playground/components/FormButtonGroup/preview.tsx

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,164 @@
+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

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