@formily-design/formily-antd 1.0.0 → 1.0.2

package/playground/main.tsx

@@ -1,222 +0,0 @@
-import React, { useMemo } from 'react'
-import ReactDOM from 'react-dom/client'
-import {
-  Designer,
-  DesignerToolsWidget,
-  ViewToolsWidget,
-  Workspace,
-  OutlineTreeWidget,
-  ResourceWidget,
-  HistoryWidget,
-  StudioPanel,
-  CompositePanel,
-  WorkspacePanel,
-  ToolbarPanel,
-  ViewportPanel,
-  ViewPanel,
-  SettingsPanel,
-  ComponentTreeWidget,
-} from '@formily-design/react'
-import {
-  SettingsForm,
-  setNpmCDNRegistry,
-} from '@formily-design/react-settings-form'
-import { createDesigner, Shortcut, KeyCode } from '@formily-design/core'
-import {
-  LogoWidget,
-  ActionsWidget,
-  PreviewWidget,
-  SchemaEditorWidget,
-  MarkupSchemaWidget,
-} from './widgets'
-import { saveSchema } from './service'
-import {
-  Form,
-  Field,
-  Input,
-  Select,
-  TreeSelect,
-  Cascader,
-  Radio,
-  Checkbox,
-  Slider,
-  Rate,
-  NumberPicker,
-  Transfer,
-  Password,
-  DatePicker,
-  TimePicker,
-  Upload,
-  Switch,
-  Text,
-  Card,
-  ArrayCards,
-  ObjectContainer,
-  ArrayTable,
-  Space,
-  FormTab,
-  FormCollapse,
-  FormLayout,
-  FormGrid,
-  // FormButtonGroup,
-  // FormButton,
-} from '../src'
-import { AsyncSelect } from './components/AsyncSelect'
-import { FormButtonGroup } from './components/FormButtonGroup'
-import { FormButton } from './components/FormButton'
-import { LocationPicker } from './components/LocationPicker'
-import { FormList } from './components/FormList'
-import './designerLocales'
-
-setNpmCDNRegistry('//unpkg.com')
-
-const App = () => {
-  const engine = useMemo(
-    () =>
-      createDesigner({
-        shortcuts: [
-          new Shortcut({
-            codes: [
-              [KeyCode.Meta, KeyCode.S],
-              [KeyCode.Control, KeyCode.S],
-            ],
-            handler(ctx) {
-              saveSchema(ctx.engine)
-            },
-          }),
-        ],
-        rootComponentName: 'Form',
-      }),
-    []
-  )
-  return (
-    <Designer engine={engine} position="fixed" style={{ height: '100%' }}>
-      <StudioPanel
-        logo={<LogoWidget />}
-        actions={<ActionsWidget />}
-        style={{ height: '100%' }}
-      >
-        <CompositePanel>
-          <CompositePanel.Item title="panels.Component" icon="Component">
-            <ResourceWidget
-              title="sources.Inputs"
-              sources={[
-                Input,
-                Password,
-                NumberPicker,
-                Rate,
-                Slider,
-                Select,
-                TreeSelect,
-                Cascader,
-                Transfer,
-                Checkbox,
-                Radio,
-                DatePicker,
-                TimePicker,
-                Upload,
-                Switch,
-                ObjectContainer,
-                AsyncSelect,
-                FormButtonGroup,
-                FormButton,
-                LocationPicker,
-                FormList,
-              ]}
-            />
-            <ResourceWidget
-              title="sources.Layouts"
-              sources={[
-                Card,
-                FormGrid,
-                FormTab,
-                FormLayout,
-                FormCollapse,
-                Space,
-              ]}
-            />
-            <ResourceWidget
-              title="sources.Arrays"
-              sources={[ArrayCards, ArrayTable]}
-            />
-            <ResourceWidget title="sources.Displays" sources={[Text]} />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
-            <OutlineTreeWidget />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.History" icon="History">
-            <HistoryWidget />
-          </CompositePanel.Item>
-        </CompositePanel>
-        <Workspace id="form">
-          <WorkspacePanel>
-            <ToolbarPanel>
-              <DesignerToolsWidget />
-              <ViewToolsWidget
-                use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}
-              />
-            </ToolbarPanel>
-            <ViewportPanel style={{ height: '100%' }}>
-              <ViewPanel type="DESIGNABLE">
-                {() => (
-                  <ComponentTreeWidget
-                    components={{
-                      Form,
-                      Field,
-                      Input,
-                      Select,
-                      TreeSelect,
-                      Cascader,
-                      Radio,
-                      Checkbox,
-                      Slider,
-                      Rate,
-                      NumberPicker,
-                      Transfer,
-                      Password,
-                      DatePicker,
-                      TimePicker,
-                      Upload,
-                      Switch,
-                      Text,
-                      Card,
-                      ArrayCards,
-                      ArrayTable,
-                      Space,
-                      FormTab,
-                      FormCollapse,
-                      FormGrid,
-                      FormLayout,
-                      ObjectContainer,
-                      AsyncSelect,
-                      FormButtonGroup,
-                      FormButton,
-                      LocationPicker,
-                      FormList,
-                    }}
-                  />
-                )}
-              </ViewPanel>
-              <ViewPanel type="JSONTREE" scrollable={false}>
-                {(tree, onChange) => (
-                  <SchemaEditorWidget tree={tree} onChange={onChange} />
-                )}
-              </ViewPanel>
-              <ViewPanel type="MARKUP" scrollable={false}>
-                {(tree) => <MarkupSchemaWidget tree={tree} />}
-              </ViewPanel>
-              <ViewPanel type="PREVIEW">
-                {(tree) => <PreviewWidget tree={tree} />}
-              </ViewPanel>
-            </ViewportPanel>
-          </WorkspacePanel>
-        </Workspace>
-        <SettingsPanel title="panels.PropertySettings">
-          <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
-        </SettingsPanel>
-      </StudioPanel>
-    </Designer>
-  )
-}
-
-ReactDOM.createRoot(document.getElementById('root')).render(<App />)

package/playground/react-app-env.d.ts

@@ -1,4 +0,0 @@
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}

package/playground/request.ts

@@ -1,123 +0,0 @@
-/**
- * 公共请求方法封装
- */
-
-interface RequestOptions extends RequestInit {
-  /** 请求基础路径 */
-  baseUrl?: string
-  /** 请求路径 */
-  url: string
-  /** URL 参数 */
-  params?: Record<string, string | number | boolean | undefined | null>
-  /** 请求体数据 */
-  data?: unknown
-}
-
-export interface ResponseResult<T = unknown> {
-  code: number
-  data: T
-  message?: string
-}
-
-/**
- * 构建 URL 查询参数
- */
-function buildQueryString(
-  params: Record<string, string | number | boolean | undefined | null>
-): string {
-  const searchParams = new URLSearchParams()
-  Object.entries(params).forEach(([key, value]) => {
-    if (value !== undefined && value !== null) {
-      searchParams.append(key, String(value))
-    }
-  })
-  return searchParams.toString()
-}
-
-/**
- * 公共请求方法
- * @param options 请求配置
- * @returns Promise< ResponseResult<T> >
- */
-export async function request<T = unknown>(
-  options: RequestOptions
-): Promise<ResponseResult<T>> {
-  const { baseUrl = '', url, params, data, headers, ...init } = options
-
-  // 构建完整 URL
-  let fullUrl = `${baseUrl}${url}`
-  if (params) {
-    const queryString = buildQueryString(params)
-    fullUrl += `?${queryString}`
-  }
-
-  // 设置默认请求头
-  const defaultHeaders: HeadersInit = {
-    'Content-Type': 'application/json',
-    ...headers,
-  }
-
-  // 构建请求配置
-  const requestOptions: RequestInit = {
-    ...init,
-    headers: defaultHeaders,
-  }
-
-  // 处理请求体
-  if (data) {
-    // 处理 FormData
-    if (data instanceof FormData) {
-      requestOptions.body = data
-      const headers = requestOptions.headers as
-        | Record<string, string>
-        | undefined
-      // 移除 Content-Type，避免 FormData 数据错误
-      if (headers?.['Content-Type']) {
-        delete headers['Content-Type']
-        requestOptions.headers = headers
-      }
-    } else {
-      requestOptions.body = JSON.stringify(data)
-    }
-  }
-
-  // 发起请求
-  const response = await fetch(fullUrl, requestOptions)
-
-  // 解析响应
-  const result: ResponseResult<T> = await response.json()
-
-  // 处理业务错误
-  // if (!response.ok || result.code !== 0) {
-  //   throw new Error(result.message || '请求失败')
-  // }
-
-  return result
-}
-
-/**
- * GET 请求
- */
-export function get<T = unknown>(
-  url: string,
-  params?: RequestOptions['params'],
-  options?: Omit<RequestOptions, 'url' | 'params' | 'method'>
-): Promise<ResponseResult<T>> {
-  return request<T>({ ...options, url, params, method: 'GET' })
-}
-
-/**
- * POST 请求
- */
-export function post<T = unknown>(
-  url: string,
-  data?: RequestOptions['data'],
-  options?: Omit<RequestOptions, 'url' | 'data'>
-): Promise<ResponseResult<T>> {
-  return request<T>({
-    ...options,
-    url,
-    data,
-    method: options?.method || 'POST',
-  })
-}

package/playground/schemas/FormButton.ts

@@ -1,42 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const FormButton: ISchema = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-      'x-component-props': {
-        defaultValue: '按钮',
-      },
-    },
-    type: {
-      type: 'string',
-      enum: ['primary', 'default', 'dashed', 'link', 'text'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'default',
-      },
-    },
-    htmlType: {
-      type: 'string',
-      enum: ['submit', 'reset', 'button'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'button',
-        optionType: 'button',
-      },
-    },
-    noValidate: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultValue: false,
-      },
-    },
-  },
-}

package/playground/schemas/FormButtonGroup.ts

@@ -1,24 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const FormButtonGroup: ISchema = {
-  type: 'object',
-  properties: {
-    gutter: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 8,
-      },
-    },
-    align: {
-      type: 'string',
-      enum: ['left', 'center', 'right'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'left',
-      },
-    },
-  },
-}

package/playground/schemas/LocationPicker.ts

@@ -1,14 +0,0 @@
-import { ISchema } from '@formily/react'
-import { AllSchemas } from '@formily-design/formily-antd'
-
-export const LocationPicker: ISchema = {
-  type: 'object',
-  properties: {
-    ...(AllSchemas.Input.properties as any),
-    mapApiKey: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-}

package/playground/schemas/all.ts

@@ -1,3 +0,0 @@
-export * from './FormButtonGroup'
-export * from './FormButton'
-export * from './LocationPicker'

package/playground/schemas/index.ts

@@ -1,3 +0,0 @@
-import * as CustomSchemas from './all'
-
-export { CustomSchemas }

package/playground/service/index.ts

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

package/playground/service/schema.ts

@@ -1,22 +0,0 @@
-import { Engine } from '@formily-design/core'
-import {
-  transformToSchema,
-  transformToTreeNode,
-} from '@formily-design/formily-transformer'
-import { message } from 'antd'
-
-export const saveSchema = (designer: Engine) => {
-  localStorage.setItem(
-    'formily-schema',
-    JSON.stringify(transformToSchema(designer.getCurrentTree()))
-  )
-  message.success('Save Success')
-}
-
-export const loadInitialSchema = (designer: Engine) => {
-  try {
-    designer.setCurrentTree(
-      transformToTreeNode(JSON.parse(localStorage.getItem('formily-schema')))
-    )
-  } catch {}
-}

package/playground/template.ejs

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <title>
-    Designable Playground
-  </title>
-  <style>
-    html,body{
-      user-select: none;
-      -webkit-user-select: none;
-    }
-  </style>
-</head>
-<body>
-  <div id="root">
-  </div>
-<!--  <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>-->
-<!--  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>-->
-<!--  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>-->
-<!--  <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>-->
-</body>