@formily-design/formily-antd 1.0.0

package/lib/shared.d.ts

@@ -0,0 +1,13 @@
+import { TreeNode, Engine } from '@formily-design/core';
+export type ComponentNameMatcher = string | string[] | ((name: string, node: TreeNode, context?: any) => boolean);
+export declare const matchComponent: (node: TreeNode, name: ComponentNameMatcher, context?: any) => boolean;
+export declare const matchChildComponent: (node: TreeNode, name: ComponentNameMatcher, context?: any) => boolean;
+export declare const includesComponent: (node: TreeNode, names: ComponentNameMatcher[], target?: TreeNode) => boolean;
+export declare const queryNodesByComponentPath: (node: TreeNode, path: ComponentNameMatcher[]) => TreeNode[];
+export declare const findNodeByComponentPath: (node: TreeNode, path: ComponentNameMatcher[]) => TreeNode;
+export declare const hasNodeByComponentPath: (node: TreeNode, path: ComponentNameMatcher[]) => boolean;
+export declare const matchArrayItemsNode: (node: TreeNode) => boolean;
+export declare const createNodeId: (designer: Engine, id: string) => {
+    [x: string]: string;
+};
+export declare const createEnsureTypeItemsNode: (type: string) => (node: TreeNode) => TreeNode;

package/lib/shared.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEnsureTypeItemsNode = exports.createNodeId = exports.matchArrayItemsNode = exports.hasNodeByComponentPath = exports.findNodeByComponentPath = exports.queryNodesByComponentPath = exports.includesComponent = exports.matchChildComponent = exports.matchComponent = void 0;
+const core_1 = require("@formily-design/core");
+const matchComponent = (node, name, context) => {
+    var _a;
+    if (name === '*')
+        return true;
+    const componentName = (_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a['x-component'];
+    if (typeof name === 'function')
+        return name(componentName || '', node, context);
+    if (Array.isArray(name))
+        return name.includes(componentName);
+    return componentName === name;
+};
+exports.matchComponent = matchComponent;
+const matchChildComponent = (node, name, context) => {
+    var _a;
+    if (name === '*')
+        return true;
+    const componentName = (_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a['x-component'];
+    if (!componentName)
+        return false;
+    if (typeof name === 'function')
+        return name(componentName || '', node, context);
+    if (Array.isArray(name))
+        return name.includes(componentName);
+    return componentName.indexOf(`${name}.`) > -1;
+};
+exports.matchChildComponent = matchChildComponent;
+const includesComponent = (node, names, target) => {
+    return names.some((name) => (0, exports.matchComponent)(node, name, target));
+};
+exports.includesComponent = includesComponent;
+const queryNodesByComponentPath = (node, path) => {
+    if ((path === null || path === void 0 ? void 0 : path.length) === 0)
+        return [];
+    if ((path === null || path === void 0 ? void 0 : path.length) === 1) {
+        if ((0, exports.matchComponent)(node, path[0])) {
+            return [node];
+        }
+    }
+    return (0, exports.matchComponent)(node, path[0])
+        ? node.children.reduce((buf, child) => {
+            return buf.concat((0, exports.queryNodesByComponentPath)(child, path.slice(1)));
+        }, [])
+        : [];
+};
+exports.queryNodesByComponentPath = queryNodesByComponentPath;
+const findNodeByComponentPath = (node, path) => {
+    if ((path === null || path === void 0 ? void 0 : path.length) === 0)
+        return;
+    if ((path === null || path === void 0 ? void 0 : path.length) === 1) {
+        if ((0, exports.matchComponent)(node, path[0])) {
+            return node;
+        }
+    }
+    if ((0, exports.matchComponent)(node, path[0])) {
+        for (let i = 0; i < node.children.length; i++) {
+            const next = (0, exports.findNodeByComponentPath)(node.children[i], path.slice(1));
+            if (next) {
+                return next;
+            }
+        }
+    }
+};
+exports.findNodeByComponentPath = findNodeByComponentPath;
+const hasNodeByComponentPath = (node, path) => !!(0, exports.findNodeByComponentPath)(node, path);
+exports.hasNodeByComponentPath = hasNodeByComponentPath;
+const matchArrayItemsNode = (node) => {
+    var _a, _b, _c, _d;
+    return (((_b = (_a = node === null || node === void 0 ? void 0 : node.parent) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.type) === 'array' &&
+        ((_d = (_c = node === null || node === void 0 ? void 0 : node.parent) === null || _c === void 0 ? void 0 : _c.children) === null || _d === void 0 ? void 0 : _d[0]) === node);
+};
+exports.matchArrayItemsNode = matchArrayItemsNode;
+const createNodeId = (designer, id) => {
+    return {
+        [designer.props.nodeIdAttrName]: id,
+    };
+};
+exports.createNodeId = createNodeId;
+const createEnsureTypeItemsNode = (type) => (node) => {
+    const objectNode = node.children.find((child) => child.props['type'] === type);
+    if (objectNode) {
+        return objectNode;
+    }
+    else {
+        const newObjectNode = new core_1.TreeNode({
+            componentName: 'Field',
+            props: {
+                type,
+            },
+        });
+        node.prepend(newObjectNode);
+        return newObjectNode;
+    }
+};
+exports.createEnsureTypeItemsNode = createEnsureTypeItemsNode;

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@formily-design/formily-antd",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "lib",
+  "module": "esm",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/designable.git"
+  },
+  "types": "esm/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/alibaba/designable/issues"
+  },
+  "homepage": "https://github.com/alibaba/designable#readme",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "scripts": {
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && ts-node copy",
+    "build:cjs": "tsc --project tsconfig.build.json",
+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
+    "build:playground": "webpack-cli --config playground/webpack.prod.ts",
+    "start": "webpack-dev-server --config playground/webpack.dev.ts"
+  },
+  "devDependencies": {
+    "@formily-design/react-settings-form": "1.0.0",
+    "@formily/antd-v5": "^1.2.4",
+    "@formily/core": "^2.0.2",
+    "@formily/react": "^2.0.2",
+    "@formily/reactive": "^2.0.2",
+    "@formily/shared": "^2.0.2",
+    "autoprefixer": "^9.0",
+    "file-loader": "^5.0.2",
+    "fs-extra": "^8.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "jsonp": "^0.2.1",
+    "mini-css-extract-plugin": "^1.6.0",
+    "monaco-editor-webpack-plugin": "^4.0.0",
+    "raw-loader": "^4.0.0",
+    "react-monaco-editor": "^0.43.0",
+    "style-loader": "^1.1.3",
+    "tlbs-map-react": "^1.1.1",
+    "ts-loader": "^7.0.4",
+    "typescript": "^5.3.2",
+    "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  },
+  "peerDependencies": {
+    "@formily/antd-v5": "^1.2.4",
+    "@formily/core": "^2.0.2",
+    "@formily/react": "^2.0.2",
+    "@formily/reactive": "^2.0.2",
+    "@formily/shared": "^2.0.2",
+    "@types/react": ">=16.8.0 || >=17.0.0",
+    "@types/react-dom": ">=16.8.0 || >=17.0.0",
+    "antd": "^5.29.3",
+    "react": ">=16.8.0 || >=17.0.0",
+    "react-dom": ">=16.8.0",
+    "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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "f3496a519e4be3f14900ddbe44744ae482247047"
+}

package/playground/components/AsyncSelect/AsyncSelect.tsx

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

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

package/playground/components/AsyncSelect/preview.tsx

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

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

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

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

@@ -0,0 +1,42 @@
+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>
+  )
+}