@formily-design/formily-antd 1.0.0 → 1.0.2

package/playground/components/ClickEventSetter/index.tsx

@@ -1,90 +0,0 @@
-import React, { Fragment, useState, useMemo } from 'react'
-import { Modal, Button } from 'antd'
-import { usePrefix, TextWidget } from '@formily-design/react'
-import { IEventAction, IEventConfig } from './types'
-import { ActionList } from './ActionList'
-import { ActionConfigModal } from './ActionConfigModal'
-import './styles.less'
-
-export interface IClickEventSetterProps {
-  className?: string
-  style?: React.CSSProperties
-  onChange: (value: IEventConfig) => void
-  value?: IEventConfig
-}
-
-export const ClickEventSetter: React.FC<IClickEventSetterProps> = (props) => {
-  const { value, onChange } = props
-  const prefix = usePrefix('click-event-setter')
-  const [modalVisible, setModalVisible] = useState(false)
-  const [editingAction, setEditingAction] = useState<IEventAction | null>(null)
-  const [editingIndex, setEditingIndex] = useState<number>(-1)
-
-  const actions = useMemo(() => value?.actions || [], [value])
-
-  const openModal = () => setModalVisible(true)
-  const closeModal = () => {
-    setModalVisible(false)
-    setEditingAction(null)
-    setEditingIndex(-1)
-  }
-
-  const handleEditAction = (action: IEventAction, index: number) => {
-    setEditingAction(action)
-    setEditingIndex(index)
-    setModalVisible(true)
-  }
-
-  const handleDeleteAction = (index: number) => {
-    const newActions = [...actions]
-    newActions.splice(index, 1)
-    onChange({ actions: newActions })
-  }
-
-  const handleSaveAction = (action: IEventAction) => {
-    const newActions = [...actions]
-    if (editingIndex >= 0) {
-      newActions[editingIndex] = action
-    } else {
-      newActions.push(action)
-    }
-    onChange({ actions: newActions })
-    closeModal()
-  }
-
-  return (
-    <Fragment>
-      <div className={`${prefix}-container`}>
-        <Button block onClick={openModal} className={`${prefix}-trigger`}>
-          <TextWidget token="SettingComponents.ClickEventSetter.configureEvents" />
-        </Button>
-        {actions.length > 0 && (
-          <ActionList
-            actions={actions}
-            onEdit={handleEditAction}
-            onDelete={handleDeleteAction}
-          />
-        )}
-      </div>
-      <Modal
-        title={
-          <TextWidget token="SettingComponents.ClickEventSetter.configureEvents" />
-        }
-        width={700}
-        styles={{ body: { padding: 10 } }}
-        transitionName=""
-        maskTransitionName=""
-        open={modalVisible}
-        onCancel={closeModal}
-        footer={null}
-        destroyOnClose
-      >
-        <ActionConfigModal
-          editingAction={editingAction}
-          onSave={handleSaveAction}
-          onCancel={closeModal}
-        />
-      </Modal>
-    </Fragment>
-  )
-}

package/playground/components/ClickEventSetter/styles.less

@@ -1,89 +0,0 @@
-// @click-event-setter-prefix: ~'click-event-setter';
-@click-event-setter-prefix: 'dn-click-event-setter';
-
-.dn-click-event-setter-container {
-  width: 100%;
-}
-
-.dn-click-event-setter-trigger {
-  margin-bottom: 8px;
-}
-
-/* Action List Styles */
-.click-event-action-list {
-  width: 100%;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-
-  .click-event-action-item {
-    padding: 4px;
-    border-bottom: 1px solid #f0f0f0;
-    word-break: break-all;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    .ant-list-item-action {
-      margin-inline-start: 0;
-    }
-
-    .click-event-action-title {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-
-      .click-event-action-description {
-        color: #666;
-        font-size: 12px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 300px;
-      }
-    }
-  }
-}
-
-/* Action Config Modal Styles */
-.action-config-modal {
-  .action-config-basic {
-    padding: 8px 0;
-  }
-
-  .action-config-panel {
-    padding: 8px 0;
-  }
-
-  .action-config-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #f0f0f0;
-  }
-}
-
-/* Request Panel Styles */
-.request-panel {
-  &-section {
-    padding: 8px 0;
-  }
-
-  &-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-}
-
-/* Navigation Panel Styles */
-.navigation-panel {
-  padding: 8px 0;
-}
-
-/* Download Panel Styles */
-.download-panel {
-  padding: 8px 0;
-}

package/playground/components/ClickEventSetter/types.ts

@@ -1,43 +0,0 @@
-// 事件动作类型
-export type EventActionType = 'navigation' | 'request' | 'download'
-
-// 事件配置结构
-export interface IEventConfig {
-  actions: IEventAction[]
-}
-
-// 单个事件动作基础接口
-export interface IEventActionBase {
-  id: string
-  type: EventActionType
-  description?: string
-}
-
-// 页面跳转动作
-export interface INavigationAction extends IEventActionBase {
-  type: 'navigation'
-  url: string
-  target?: '_blank' | '_self'
-}
-
-// 服务请求动作
-export interface IRequestAction extends IEventActionBase {
-  type: 'request'
-  url: string
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
-  headers?: Record<string, string>
-  params?: Record<string, string>
-  beforeRequest?: string
-  dataHandler?: string
-  successMessage?: string
-  dataKey?: string
-}
-
-// 下载文件动作
-export interface IDownloadAction extends IEventActionBase {
-  type: 'download'
-  url: string
-}
-
-// 联合类型
-export type IEventAction = INavigationAction | IRequestAction | IDownloadAction

package/playground/components/FormButton/FormButton.tsx

@@ -1,189 +0,0 @@
-import React from 'react'
-import { DnFC } from '@formily-design/react'
-import { Button as AntButton, ButtonProps } from 'antd'
-import { Reset, Submit } from '@formily/antd-v5'
-import { useForm, observer, useExpressionScope } from '@formily/react'
-import { IEventAction } from '../ClickEventSetter/types'
-import {
-  useEventActionExecutor,
-  hasActionOfType,
-} from './hooks/useEventActionExecutor'
-
-interface IFormButtonSetterProps {
-  /** 是否禁用表单验证 */
-  noValidate?: boolean
-  /** 事件配置 */
-  onEvent?: {
-    /** 点击事件配置 */
-    click?: {
-      /** 点击事件动作列表 */
-      actions: IEventAction[]
-    }
-  }
-}
-
-export interface IFormButtonProps extends IFormButtonSetterProps, ButtonProps {
-  onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void
-  title?: string
-}
-
-export const FormButton: DnFC<IFormButtonProps> = (props: IFormButtonProps) => {
-  const { htmlType } = props
-
-  if (htmlType === 'reset')
-    return <ResetButton {...props}>{props.title}</ResetButton>
-  if (htmlType === 'submit')
-    return <SubmitButton {...props}>{props.title}</SubmitButton>
-  return <Button {...props}>{props.title}</Button>
-}
-
-/**
- * 获取点击事件动作列表
- */
-function getClickActions(
-  onEvent?: IFormButtonSetterProps['onEvent']
-): IEventAction[] | undefined {
-  return onEvent?.click?.actions
-}
-
-/**
- * 重置
- * 为什么使用 observer 包裹？
- * 因为 useForm() 获取的 form 实例是响应式的，observer 可以确保组件在 form 状态变化时重新渲染。使用 connect 或 observer 都可以达到这个目的。
- * https://react.formilyjs.org/zh-CN/api/shared/observer
- */
-const ResetButton = observer(
-  ({
-    children,
-    onEvent,
-    ...props
-  }: React.ComponentProps<typeof Reset> & IFormButtonSetterProps) => {
-    const form = useForm()
-    const actions = getClickActions(onEvent)
-    const { execute: executeEvents, executing } = useEventActionExecutor(
-      actions,
-      form
-    )
-
-    const handleClick = async () => {
-      if (actions && actions.length > 0) {
-        await executeEvents()
-      }
-      // 执行表单重置
-      form.reset()
-    }
-
-    return (
-      <Reset
-        {...props}
-        htmlType="button"
-        loading={executing}
-        onClick={handleClick}
-      >
-        {children}
-      </Reset>
-    )
-  }
-)
-
-/** 提交 */
-const SubmitButton = observer(
-  ({
-    children,
-    noValidate,
-    onEvent,
-    ...props
-  }: React.ComponentProps<typeof Submit> & IFormButtonSetterProps) => {
-    const form = useForm()
-    const actions = getClickActions(onEvent)
-    const hasRequestAction = hasActionOfType(actions, 'request')
-    const { execute: executeEvents, executing } = useEventActionExecutor(
-      actions,
-      form
-    )
-    // useExpressionScope 读取表达式作用域，获取表单配置的提交 API submitFormApi
-    const { submitFormApi, apiParams } = useExpressionScope()
-    const handleClick = async () => {
-      if (noValidate) {
-        // 获取表单值
-        const values = form.values
-        // 手动更新表单状态为提交中
-        form.setSubmitting(true)
-        try {
-          if (hasRequestAction) {
-            // 有 request 动作时，仅执行事件动作，不执行表单提交
-            await executeEvents(values, apiParams)
-          } else if (actions && actions.length > 0) {
-            // 有事件但无 request 动作时，先执行事件再提交
-            await executeEvents(values, apiParams)
-            await doSubmit(values)
-          } else {
-            // 无事件配置时，直接提交
-            await doSubmit(values)
-          }
-        } finally {
-          form.setSubmitting(false)
-        }
-      } else {
-        form.submit(async (values) => {
-          if (hasRequestAction) {
-            // 有 request 动作时，仅执行事件动作，不执行表单提交
-            await executeEvents(values, apiParams)
-          } else if (actions && actions.length > 0) {
-            // 有事件但无 request 动作时，先执行事件再提交
-            await executeEvents(values, apiParams)
-            await doSubmit(values)
-          } else {
-            // 无事件配置时，直接提交
-            await doSubmit(values)
-          }
-        })
-      }
-    }
-
-    /** 表单提交 - 执行 form 配置的 API */
-    const doSubmit = async (values: Record<string, any>) => {
-      await submitFormApi?.(values)
-    }
-    return (
-      <Submit
-        {...props}
-        htmlType="button"
-        loading={executing || form.submitting}
-        onClick={handleClick}
-      >
-        {children}
-      </Submit>
-    )
-  }
-)
-
-/** 按钮 */
-const Button = observer(
-  ({
-    children,
-    onEvent,
-    ...props
-  }: React.ComponentProps<typeof AntButton> & IFormButtonSetterProps) => {
-    const form = useForm()
-    const actions = getClickActions(onEvent)
-    // useExpressionScope 读取表达式作用域
-    const { apiParams } = useExpressionScope()
-    const { execute: executeEvents, executing } = useEventActionExecutor(
-      actions,
-      form
-    )
-
-    const handleClick = async () => {
-      if (actions && actions.length > 0) {
-        await executeEvents(form.values, apiParams)
-      }
-    }
-
-    return (
-      <AntButton {...props} loading={executing} onClick={handleClick}>
-        {children}
-      </AntButton>
-    )
-  }
-)

package/playground/components/FormButton/hooks/useEventActionExecutor.ts

@@ -1,65 +0,0 @@
-import { useState, useCallback } from 'react'
-import { IEventAction } from '../../ClickEventSetter/types'
-import { executeActions } from '../utils/actionExecutors'
-import { Form } from '@formily/core'
-
-interface UseEventActionExecutorOptions {
-  onComplete?: () => void
-  onError?: (error: Error) => void
-}
-
-interface UseEventActionExecutorReturn {
-  executing: boolean
-  execute: (
-    formValues?: Record<string, any>,
-    apiParams?: Record<string, any>
-  ) => Promise<void>
-}
-
-export function useEventActionExecutor(
-  actions: IEventAction[] | undefined,
-  form: Form,
-  options?: UseEventActionExecutorOptions
-): UseEventActionExecutorReturn {
-  const [executing, setExecuting] = useState(false)
-
-  const execute = useCallback(
-    async (
-      formValues?: Record<string, any>,
-      apiParams?: Record<string, any>
-    ) => {
-      if (!actions || actions.length === 0) {
-        return
-      }
-      setExecuting(true)
-      try {
-        await executeActions(actions, formValues, apiParams, (error, index) => {
-          console.error(`动作 ${index + 1} 执行失败:`, error)
-        })
-        options?.onComplete?.()
-      } catch (error) {
-        const err = error instanceof Error ? error : new Error(String(error))
-        options?.onError?.(err)
-      } finally {
-        setExecuting(false)
-      }
-    },
-    [actions, form, options]
-  )
-
-  return {
-    executing,
-    execute,
-  }
-}
-
-/**
- * 检查动作配置中是否包含指定类型的动作
- */
-export function hasActionOfType(
-  actions: IEventAction[] | undefined,
-  type: string
-): boolean {
-  if (!actions) return false
-  return actions.some((action) => action.type === type)
-}

package/playground/components/FormButton/index.ts

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

package/playground/components/FormButton/preview.tsx

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

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

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

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