@formily-design/formily-antd 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formily-design/formily-antd",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -24,7 +24,7 @@
     "start": "webpack-dev-server --config playground/webpack.dev.ts"
   },
   "devDependencies": {
-    "@formily-design/react-settings-form": "1.0.0",
+    "@formily-design/react-settings-form": "1.0.2",
     "@formily/antd-v5": "^1.2.4",
     "@formily/core": "^2.0.2",
     "@formily/react": "^2.0.2",
@@ -62,14 +62,14 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@formily-design/core": "1.0.0",
-    "@formily-design/formily-setters": "1.0.0",
-    "@formily-design/formily-transformer": "1.0.0",
-    "@formily-design/react": "1.0.0",
-    "@formily-design/shared": "1.0.0"
+    "@formily-design/core": "1.0.2",
+    "@formily-design/formily-setters": "1.0.2",
+    "@formily-design/formily-transformer": "1.0.2",
+    "@formily-design/react": "1.0.2",
+    "@formily-design/shared": "1.0.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f3496a519e4be3f14900ddbe44744ae482247047"
+  "gitHead": "c705befab75f6f60346a8d931480ada43a4081e1"
 }

package/.umirc.js

@@ -1,44 +0,0 @@
-import { resolve } from 'path'
-export default {
-  mode: 'site',
-  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
-  title: 'Formily',
-  hash: true,
-  favicon:
-    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
-  outputPath: './doc-site',
-  navs: [
-    {
-      title: 'Ant Design',
-      path: '/components',
-    },
-    {
-      title: '主站',
-      path: 'https://v2.formilyjs.org',
-    },
-    {
-      title: 'GITHUB',
-      path: 'https://github.com/alibaba/formily',
-    },
-  ],
-  styles: [
-    `.__dumi-default-navbar-logo{
-      height: 60px !important;
-      width: 150px !important;
-      padding-left:0 !important;
-      color: transparent !important;
-    }
-    .__dumi-default-navbar{
-      padding: 0 28px !important;
-    }
-    .__dumi-default-layout-hero{
-      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-    }
-    nav a{
-      text-decoration: none !important;
-    }
-    `,
-  ],
-}

package/copy.ts

@@ -1,6 +0,0 @@
-import { runCopy } from '../../scripts/build-style'
-
-runCopy({
-  esStr: 'antd/es/',
-  libStr: 'antd/lib/',
-})

package/playground/components/AsyncSelect/AsyncSelect.tsx

@@ -1,38 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons'
-import { PreviewText } from '@formily/antd-v5'
-import { isField } from '@formily/core'
-import { connect, mapProps, mapReadPretty, useField } from '@formily/react'
-import { Select, SelectProps } from 'antd'
-import React from 'react'
-
-export type AsyncSelectProps = SelectProps
-function AsyncSelectComponent(props: AsyncSelectProps) {
-  const field = useField()
-  console.info('AsyncSelectComponent', props, field)
-  return <Select {...props} />
-}
-export const AsyncSelect: React.FC<AsyncSelectProps> = connect(
-  AsyncSelectComponent,
-  mapProps(
-    {
-      dataSource: 'options',
-      data: true,
-      loading: true,
-    },
-    (props, field) => {
-      if (isField(field)) {
-        return {
-          ...props,
-          suffixIcon:
-            field?.loading || field?.validating ? (
-              <LoadingOutlined />
-            ) : (
-              props.suffixIcon
-            ),
-        }
-      }
-      return props
-    }
-  ),
-  mapReadPretty(PreviewText.Select)
-)

package/playground/components/AsyncSelect/index.tsx

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

package/playground/components/AsyncSelect/preview.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { createBehavior, createResource } from '@formily-design/core'
-import { DnFC } from '@formily-design/react'
-import { AsyncSelect as SelectComponent } from './AsyncSelect'
-import {
-  AllLocales,
-  AllSchemas,
-  createFieldSchema,
-} from '@formily-design/formily-antd'
-
-export const AsyncSelect: DnFC<React.ComponentProps<typeof SelectComponent>> =
-  SelectComponent
-
-AsyncSelect.Behavior = createBehavior({
-  name: 'AsyncSelect',
-  extends: ['Field'],
-  selector: (node) => node.props?.['x-component'] === 'AsyncSelect',
-  designerProps: {
-    propsSchema: createFieldSchema(AllSchemas.Select),
-  },
-  designerLocales: AllLocales.Select,
-})
-
-AsyncSelect.Resource = createResource({
-  icon: 'SelectSource',
-  elements: [
-    {
-      componentName: 'Field',
-      props: {
-        title: 'AsyncSelect',
-        'x-decorator': 'FormItem',
-        'x-component': 'AsyncSelect',
-      },
-    },
-  ],
-})

package/playground/components/ClickEventSetter/ActionConfigModal.tsx

@@ -1,173 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Form, Tabs, Button, Input, Select } from 'antd'
-import { TextWidget } from '@formily-design/react'
-import { IEventAction, EventActionType, IRequestAction } from './types'
-import { RequestPanel } from './RequestPanel'
-import { NavigationPanel } from './NavigationPanel'
-import { DownloadPanel } from './DownloadPanel'
-import './styles.less'
-
-export interface IActionConfigModalProps {
-  editingAction: IEventAction | null
-  onSave: (action: IEventAction) => void
-  onCancel: () => void
-}
-
-type IActionConfigFormValues =
-  | Exclude<IEventAction, IRequestAction>
-  | (Omit<IRequestAction, 'headers' | 'params'> & {
-      headers: { key: string; value: string }[]
-      params: { key: string; value: string }[]
-    })
-
-/** 转换配置数据为表单数据 */
-function toFormValues(action: IEventAction): IActionConfigFormValues {
-  if (action.type === 'request') {
-    const { headers, params } = action
-    let headersValue: { key: string; value: string }[] = []
-    let paramsValue: { key: string; value: string }[] = []
-    if (headers) {
-      headersValue = Object.entries(headers).map(([key, value]) => ({
-        key,
-        value,
-      }))
-    }
-    if (params) {
-      paramsValue = Object.entries(params).map(([key, value]) => ({
-        key,
-        value,
-      }))
-    }
-    return { ...action, headers: headersValue, params: paramsValue }
-  }
-  return action
-}
-
-/** 转换表单数据为配置数据 */
-function toActionData(values: IActionConfigFormValues): IEventAction {
-  if (values.type === 'request') {
-    const { headers, params } = values
-    let headersValue: Record<string, string> = {}
-    let paramsValue: Record<string, string> = {}
-    // 转换为对象
-    if (headers) {
-      headersValue = headers.reduce((pre, cur) => {
-        pre[cur.key] = cur.value
-        return pre
-      }, {} as Record<string, string>)
-    }
-    // 转换为对象
-    if (params) {
-      paramsValue = params.reduce((pre, cur) => {
-        pre[cur.key] = cur.value
-        return pre
-      }, {} as Record<string, string>)
-    }
-    return { ...values, headers: headersValue, params: paramsValue }
-  }
-  return values
-}
-
-export const ActionConfigModal: React.FC<IActionConfigModalProps> = (props) => {
-  const { editingAction, onSave, onCancel } = props
-  const [form] = Form.useForm()
-  const [actionType, setActionType] = useState<EventActionType>('request')
-
-  useEffect(() => {
-    if (editingAction) {
-      setActionType(editingAction.type)
-      form.setFieldsValue(toFormValues(editingAction))
-    } else {
-      setActionType('request')
-      form.resetFields()
-    }
-  }, [editingAction])
-
-  const handleActionTypeChange = (value: EventActionType) => {
-    setActionType(value)
-  }
-
-  const handleSubmit = () => {
-    const values = toActionData(form.getFieldsValue())
-    onSave({
-      ...values,
-      id: editingAction?.id || `action-${Date.now()}`,
-      type: actionType,
-    } as IEventAction)
-  }
-
-  const tabsItems = [
-    {
-      key: 'basic',
-      label: (
-        <TextWidget token="SettingComponents.ClickEventSetter.basicConfig" />
-      ),
-      children: (
-        <div className="action-config-basic">
-          <Form.Item
-            label={
-              <TextWidget token="SettingComponents.ClickEventSetter.actionType" />
-            }
-            name="type"
-            initialValue="request"
-          >
-            <Select
-              options={[
-                {
-                  label: '服务请求',
-                  value: 'request',
-                },
-                {
-                  label: '页面跳转',
-                  value: 'navigation',
-                },
-                {
-                  label: '下载文件',
-                  value: 'download',
-                },
-              ]}
-              onChange={handleActionTypeChange}
-            />
-          </Form.Item>
-          <Form.Item
-            label={
-              <TextWidget token="SettingComponents.ClickEventSetter.description" />
-            }
-            name="description"
-          >
-            <Input placeholder="请输入动作描述（可选）" />
-          </Form.Item>
-        </div>
-      ),
-    },
-    {
-      key: 'action',
-      label: (
-        <TextWidget token="SettingComponents.ClickEventSetter.actionConfig" />
-      ),
-      children: (
-        <div className="action-config-panel">
-          {actionType === 'request' && <RequestPanel />}
-          {actionType === 'navigation' && <NavigationPanel />}
-          {actionType === 'download' && <DownloadPanel />}
-        </div>
-      ),
-    },
-  ]
-
-  return (
-    <div className="action-config-modal">
-      <Form form={form} layout="vertical" onFinish={handleSubmit}>
-        <Tabs items={tabsItems} defaultActiveKey="basic" size="small" />
-        <div className="action-config-footer">
-          <Button onClick={onCancel}>
-            <TextWidget token="SettingComponents.ClickEventSetter.cancel" />
-          </Button>
-          <Button type="primary" htmlType="submit">
-            <TextWidget token="SettingComponents.ClickEventSetter.confirm" />
-          </Button>
-        </div>
-      </Form>
-    </div>
-  )
-}

package/playground/components/ClickEventSetter/ActionList.tsx

@@ -1,67 +0,0 @@
-import React from 'react'
-import { List, Button, Tag } from 'antd'
-import { TextWidget } from '@formily-design/react'
-import { IEventAction } from './types'
-import './styles.less'
-
-export interface IActionListProps {
-  actions: IEventAction[]
-  onEdit: (action: IEventAction, index: number) => void
-  onDelete: (index: number) => void
-}
-
-const actionTypeLabels: Record<string, { label: string; color: string }> = {
-  navigation: { label: '页面跳转', color: 'blue' },
-  request: { label: '服务请求', color: 'green' },
-  download: { label: '下载文件', color: 'orange' },
-}
-
-export const ActionList: React.FC<IActionListProps> = (props) => {
-  const { actions, onEdit, onDelete } = props
-
-  return (
-    <List
-      className="click-event-action-list"
-      dataSource={actions}
-      renderItem={(action, index) => {
-        const typeInfo = actionTypeLabels[action.type] || {
-          label: action.type,
-          color: 'default',
-        }
-        return (
-          <List.Item
-            className="click-event-action-item"
-            actions={[
-              <Button
-                type="text"
-                onClick={() => onEdit(action, index)}
-                key="edit"
-                size="small"
-              >
-                <TextWidget token="SettingComponents.ClickEventSetter.edit" />
-              </Button>,
-              <Button
-                type="text"
-                danger
-                onClick={() => onDelete(index)}
-                key="delete"
-                size="small"
-              >
-                <TextWidget token="SettingComponents.ClickEventSetter.delete" />
-              </Button>,
-            ]}
-          >
-            <List.Item.Meta
-              title={
-                <div className="click-event-action-title">
-                  <Tag color={typeInfo.color}>{typeInfo.label}</Tag>
-                </div>
-              }
-              description={action.description || ''}
-            />
-          </List.Item>
-        )
-      }}
-    />
-  )
-}

package/playground/components/ClickEventSetter/DownloadPanel.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { Form, Input } from 'antd'
-import { TextWidget } from '@formily-design/react'
-import './styles.less'
-
-export interface IDownloadPanelProps {
-  form?: any
-}
-
-export const DownloadPanel: React.FC<IDownloadPanelProps> = () => {
-  return (
-    <div className="download-panel">
-      <Form.Item
-        label={
-          <TextWidget token="SettingComponents.ClickEventSetter.downloadUrl" />
-        }
-        name="url"
-        rules={[{ required: true, message: '请输入下载文件地址' }]}
-      >
-        <Input placeholder="https://example.com/file/download" />
-      </Form.Item>
-    </div>
-  )
-}

package/playground/components/ClickEventSetter/NavigationPanel.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Form, Input, Select } from 'antd'
-import { TextWidget } from '@formily-design/react'
-import './styles.less'
-
-export interface INavigationPanelProps {
-  form?: any
-}
-
-export const NavigationPanel: React.FC<INavigationPanelProps> = () => {
-  return (
-    <div className="navigation-panel">
-      <Form.Item
-        label={<TextWidget token="SettingComponents.ClickEventSetter.url" />}
-        name="url"
-        rules={[{ required: true, message: '请输入跳转地址' }]}
-      >
-        <Input placeholder="https://example.com/page" />
-      </Form.Item>
-      <Form.Item
-        label={
-          <TextWidget token="SettingComponents.ClickEventSetter.openMode" />
-        }
-        name="target"
-        initialValue="_self"
-      >
-        <Select
-          options={[
-            {
-              label: '当前窗口',
-              value: '_self',
-            },
-            {
-              label: '新窗口',
-              value: '_blank',
-            },
-          ]}
-        />
-      </Form.Item>
-    </div>
-  )
-}

package/playground/components/ClickEventSetter/RequestPanel.tsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import { Form, Input, Select, Tabs, Button } from 'antd'
-import { MonacoInput } from '@formily-design/react-settings-form'
-import { TextWidget } from '@formily-design/react'
-import './styles.less'
-
-export interface IRequestPanelProps {
-  form?: any
-}
-
-export const RequestPanel: React.FC<IRequestPanelProps> = () => {
-  const tabsItems = [
-    {
-      key: 'basic',
-      label: <TextWidget token="SettingComponents.RemoteDataSource.basic" />,
-      children: (
-        <div className="request-panel-section">
-          <Form.Item
-            label={
-              <TextWidget token="SettingComponents.RemoteDataSource.url" />
-            }
-            name="url"
-            rules={[{ required: true, message: '请输入请求地址' }]}
-          >
-            <Input placeholder="https://api.example.com/data" />
-          </Form.Item>
-          <Form.Item
-            label={
-              <TextWidget token="SettingComponents.RemoteDataSource.method" />
-            }
-            name="method"
-            initialValue="POST"
-          >
-            <Select
-              options={[
-                { label: 'GET', value: 'GET' },
-                { label: 'POST', value: 'POST' },
-                { label: 'PUT', value: 'PUT' },
-                { label: 'DELETE', value: 'DELETE' },
-                { label: 'PATCH', value: 'PATCH' },
-              ]}
-            />
-          </Form.Item>
-          <Form.Item
-            label={
-              <TextWidget token="SettingComponents.ClickEventSetter.successMessage" />
-            }
-            name="successMessage"
-          >
-            <Input placeholder="请输入成功提示文案（可选）" />
-          </Form.Item>
-        </div>
-      ),
-    },
-    {
-      key: 'headers',
-      label: <TextWidget token="SettingComponents.RemoteDataSource.headers" />,
-      children: (
-        <div className="request-panel-section">
-          <Form.List name="headers">
-            {(fields, { add, remove }) => (
-              <>
-                {fields.map((field) => (
-                  <div key={field.key} className="request-panel-row">
-                    <Form.Item
-                      {...field}
-                      label=""
-                      style={{ marginBottom: 0 }}
-                      name={[field.name, 'key']}
-                    >
-                      <Input placeholder="Key" style={{ width: '45%' }} />
-                    </Form.Item>
-                    <span style={{ margin: '0 8px' }}>-</span>
-                    <Form.Item
-                      style={{ marginBottom: 0 }}
-                      name={[field.name, 'value']}
-                    >
-                      <Input placeholder="Value" style={{ width: '45%' }} />
-                    </Form.Item>
-                    <Button
-                      type="text"
-                      danger
-                      onClick={() => remove(field.name)}
-                      style={{ marginLeft: 8 }}
-                    >
-                      X
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  type="dashed"
-                  onClick={() => add({ key: '', value: '' })}
-                  block
-                >
-                  <TextWidget token="SettingComponents.RemoteDataSource.addHeader" />
-                </Button>
-              </>
-            )}
-          </Form.List>
-        </div>
-      ),
-    },
-    {
-      key: 'params',
-      label: <TextWidget token="SettingComponents.RemoteDataSource.params" />,
-      children: (
-        <div className="request-panel-section">
-          <Form.List name="params">
-            {(fields, { add, remove }) => (
-              <>
-                {fields.map((field) => (
-                  <div key={field.key} className="request-panel-row">
-                    <Form.Item
-                      {...field}
-                      label=""
-                      style={{ marginBottom: 0 }}
-                      name={[field.name, 'key']}
-                    >
-                      <Input placeholder="参数名" style={{ width: '45%' }} />
-                    </Form.Item>
-                    <span style={{ margin: '0 8px' }}>-</span>
-                    <Form.Item
-                      style={{ marginBottom: 0 }}
-                      name={[field.name, 'value']}
-                    >
-                      <Input placeholder="表单字段" style={{ width: '45%' }} />
-                    </Form.Item>
-                    <Button
-                      type="text"
-                      danger
-                      onClick={() => remove(field.name)}
-                      style={{ marginLeft: 8 }}
-                    >
-                      X
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  type="dashed"
-                  onClick={() => add({ key: '', field: '' })}
-                  block
-                >
-                  <TextWidget token="SettingComponents.RemoteDataSource.addParam" />
-                </Button>
-              </>
-            )}
-          </Form.List>
-        </div>
-      ),
-    },
-    {
-      key: 'handlers',
-      label: <TextWidget token="SettingComponents.RemoteDataSource.handlers" />,
-      children: (
-        <div className="request-panel-section">
-          <Form.Item
-            label={
-              <TextWidget token="SettingComponents.RemoteDataSource.beforeRequest" />
-            }
-            name="beforeRequest"
-          >
-            <MonacoInput
-              language="javascript.expression"
-              height={120}
-              helpLink={false}
-            />
-          </Form.Item>
-          <Form.Item
-            label={
-              <TextWidget token="SettingComponents.RemoteDataSource.dataHandler" />
-            }
-            name="dataHandler"
-          >
-            <MonacoInput
-              language="javascript.expression"
-              height={120}
-              helpLink={false}
-            />
-          </Form.Item>
-        </div>
-      ),
-    },
-  ]
-
-  return (
-    <div className="request-panel">
-      <Tabs items={tabsItems} defaultActiveKey="basic" size="small" />
-    </div>
-  )
-}