@formily-design/formily-antd 1.0.0 → 1.0.2

package/playground/webpack.base.ts

@@ -1,123 +0,0 @@
-import path from 'path'
-import fs from 'fs-extra'
-import { GlobSync } from 'glob'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import autoprefixer from 'autoprefixer'
-import yaml from 'js-yaml'
-//import { getThemeVariables } from 'antd/dist/theme'
-
-const getWorkspaceAlias = () => {
-  const basePath = path.resolve(__dirname, '../../../')
-  const results: Record<string, string> = {}
-
-  const pkg = fs.readJSONSync(path.resolve(basePath, 'package.json')) || {}
-
-  let workspaces: string[] = []
-
-  if (Array.isArray(pkg.workspaces)) {
-    workspaces = pkg.workspaces
-  } else {
-    const pnpmWorkspacePath = path.resolve(basePath, 'pnpm-workspace.yaml')
-    if (fs.existsSync(pnpmWorkspacePath)) {
-      const pnpmWorkspace = yaml.load(
-        fs.readFileSync(pnpmWorkspacePath, 'utf-8')
-      ) as { packages?: string[] }
-      workspaces = pnpmWorkspace.packages || []
-    }
-  }
-
-  if (workspaces.length > 0) {
-    workspaces.forEach((pattern) => {
-      const { found } = new GlobSync(pattern, { cwd: basePath })
-      found.forEach((name) => {
-        const pkgJson = fs.readJSONSync(
-          path.resolve(basePath, name, './package.json')
-        )
-        results[pkgJson.name] = path.resolve(basePath, name, './src')
-      })
-    })
-  }
-
-  const currentPkg = fs.readJSONSync(path.resolve(__dirname, '../package.json'))
-  results[currentPkg.name] = path.resolve(__dirname, '../src')
-
-  return results
-}
-
-export default {
-  mode: 'development',
-  devtool: 'inline-source-map', // 嵌入到源文件中
-  stats: {
-    entrypoints: false,
-    children: false,
-  },
-  entry: {
-    playground: path.resolve(__dirname, './main'),
-  },
-  output: {
-    path: path.resolve(__dirname, '../build'),
-    filename: '[name].[hash].bundle.js',
-  },
-  resolve: {
-    modules: [path.resolve(__dirname, '../../../node_modules'), 'node_modules'],
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.mjs'],
-    alias: getWorkspaceAlias(),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: [
-          {
-            loader: require.resolve('ts-loader'),
-            options: {
-              transpileOnly: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          { loader: 'css-loader' },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => autoprefixer(),
-            },
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              // modifyVars: getThemeVariables({
-              //   dark: true, // 开启暗黑模式
-              // }),
-              javascriptEnabled: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: ['url-loader'],
-      },
-      {
-        test: /\.html?$/,
-        loader: require.resolve('file-loader'),
-        options: {
-          name: '[name].[ext]',
-        },
-      },
-      {
-        test: /\.mjs$/,
-        include: /node_modules/,
-        type: 'javascript/auto',
-      },
-    ],
-  },
-}

package/playground/webpack.dev.ts

@@ -1,64 +0,0 @@
-import baseConfig from './webpack.base'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
-//import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
-import webpack from 'webpack'
-import path from 'path'
-
-const PORT = 3001
-
-const createPages = (pages) => {
-  return pages.map(({ filename, template, chunk }) => {
-    return new HtmlWebpackPlugin({
-      filename,
-      template,
-      inject: 'body',
-      chunks: chunk,
-    })
-  })
-}
-
-for (const key in baseConfig.entry) {
-  if (Array.isArray(baseConfig.entry[key])) {
-    baseConfig.entry[key].push(
-      require.resolve('webpack/hot/dev-server'),
-      `${require.resolve('webpack-dev-server/client')}?http://localhost:${PORT}`
-    )
-  }
-}
-
-export default {
-  ...baseConfig,
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
-      chunkFilename: '[id].[hash].css',
-    }),
-    ...createPages([
-      {
-        filename: 'index.html',
-        template: path.resolve(__dirname, './template.ejs'),
-        chunk: ['playground'],
-      },
-    ]),
-    new webpack.HotModuleReplacementPlugin(),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
-    // new BundleAnalyzerPlugin()
-  ],
-  devServer: {
-    host: '127.0.0.1',
-    open: true,
-    port: PORT,
-    proxy: {
-      '/apimap': {
-        target: 'https://apis.map.qq.com/ws',
-        changeOrigin: true,
-        secure: false,
-        pathRewrite: { '^/apimap': '' },
-      },
-    },
-  },
-}

package/playground/webpack.prod.ts

@@ -1,46 +0,0 @@
-import baseConfig from './webpack.base'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
-import path from 'path'
-
-const createPages = (pages) => {
-  return pages.map(({ filename, template, chunk }) => {
-    return new HtmlWebpackPlugin({
-      filename,
-      template,
-      inject: 'body',
-      chunks: chunk,
-    })
-  })
-}
-
-export default {
-  ...baseConfig,
-  mode: 'production',
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
-      chunkFilename: '[id].[hash].css',
-    }),
-    ...createPages([
-      {
-        filename: 'index.html',
-        template: path.resolve(__dirname, './template.ejs'),
-        chunk: ['playground'],
-      },
-    ]),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
-  ],
-  optimization: {
-    minimize: true,
-  },
-  externals: {
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    moment: 'moment',
-    antd: 'antd',
-  },
-}

package/playground/widgets/ActionsWidget.tsx

@@ -1,58 +0,0 @@
-import React, { useEffect } from 'react'
-import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
-import { useDesigner, TextWidget } from '@formily-design/react'
-import { GlobalRegistry } from '@formily-design/core'
-import { observer } from '@formily/react'
-import { loadInitialSchema, saveSchema } from '../service'
-
-export const ActionsWidget = observer(() => {
-  const designer = useDesigner()
-  useEffect(() => {
-    loadInitialSchema(designer)
-  }, [])
-  const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
-  useEffect(() => {
-    if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
-      GlobalRegistry.setDesignerLanguage('zh-cn')
-    }
-  }, [])
-  return (
-    <Space style={{ marginRight: 10 }}>
-      <Button href="https://designable-fusion.formilyjs.org">
-        Alibaba Fusion
-      </Button>
-      <Radio.Group
-        value={GlobalRegistry.getDesignerLanguage()}
-        optionType="button"
-        options={[
-          { label: 'English', value: 'en-us' },
-          { label: '简体中文', value: 'zh-cn' },
-          { label: '한국어', value: 'ko-kr' },
-        ]}
-        onChange={(e) => {
-          GlobalRegistry.setDesignerLanguage(e.target.value)
-        }}
-      />
-      <Button href="https://github.com/alibaba/designable" target="_blank">
-        <GithubOutlined />
-        Github
-      </Button>
-      <Button
-        onClick={() => {
-          saveSchema(designer)
-        }}
-      >
-        <TextWidget>Save</TextWidget>
-      </Button>
-      <Button
-        type="primary"
-        onClick={() => {
-          saveSchema(designer)
-        }}
-      >
-        <TextWidget>Publish</TextWidget>
-      </Button>
-    </Space>
-  )
-})

package/playground/widgets/LogoWidget.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { useTheme } from '@formily-design/react'
-
-const logo = {
-  dark: '//img.alicdn.com/imgextra/i2/O1CN01NTUDi81fHLQvZCPnc_!!6000000003981-55-tps-1141-150.svg',
-  light:
-    '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
-}
-
-export const LogoWidget: React.FC = () => {
-  const url = logo[useTheme()]
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
-      <img
-        src={url}
-        style={{ margin: '12px 8px', height: 18, width: 'auto' }}
-      />
-    </div>
-  )
-}

package/playground/widgets/MarkupSchemaWidget.tsx

@@ -1,164 +0,0 @@
-import React from 'react'
-import { TreeNode } from '@formily-design/core'
-import { MonacoInput } from '@formily-design/react-settings-form'
-import { isEmpty, isPlainObj } from '@formily/shared'
-
-export interface IMarkupSchemaWidgetProps {
-  tree: TreeNode
-}
-
-const transformToMarkupSchemaCode = (tree: TreeNode) => {
-  const printAttribute = (node: TreeNode) => {
-    if (!node) return ''
-    const props = { ...node.props }
-    if (node.depth !== 0) {
-      props.name = node.props.name || node.id
-    }
-    return `${Object.keys(props)
-      .map((key) => {
-        if (
-          key === 'x-designable-id' ||
-          key === 'x-designable-source-name' ||
-          key === '_isJSONSchemaObject' ||
-          key === 'version' ||
-          key === 'type'
-        )
-          return ''
-        const value = props[key]
-        if (isPlainObj(value) && isEmpty(value)) return ''
-        if (typeof value === 'string') return `${key}="${value}"`
-        return `${key}={${JSON.stringify(value)}}`
-      })
-      .join(' ')}`
-  }
-  const printChildren = (node: TreeNode) => {
-    if (!node) return ''
-    return node.children
-      .map((child) => {
-        return printNode(child)
-      })
-      .join('')
-  }
-  const printTag = (node: TreeNode) => {
-    if (node.props.type === 'string') return 'SchemaField.String'
-    if (node.props.type === 'number') return 'SchemaField.Number'
-    if (node.props.type === 'boolean') return 'SchemaField.Boolean'
-    if (node.props.type === 'date') return 'SchemaField.Date'
-    if (node.props.type === 'datetime') return 'SchemaField.DateTime'
-    if (node.props.type === 'array') return 'SchemaField.Array'
-    if (node.props.type === 'object') return 'SchemaField.Object'
-    if (node.props.type === 'void') return 'SchemaField.Void'
-    return 'SchemaField.Markup'
-  }
-  const printNode = (node: TreeNode) => {
-    if (!node) return ''
-    return `<${printTag(node)} ${printAttribute(node)} ${
-      node.children.length
-        ? `>${printChildren(node)}</${printTag(node)}>`
-        : '/>'
-    }`
-  }
-  const root = tree.find((child) => {
-    return child.componentName === 'Form' || child.componentName === 'Root'
-  })
-  return `import React, { useMemo } from 'react'
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/react'
-import {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-} from '@formily/antd-v5'
-import { Card, Slider, Rate } from 'antd'
-
-const Text: React.FC<{
-  value?: string
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-}> = ({ value, mode, content, ...props }) => {
-  const tagName = mode === 'normal' || !mode ? 'div' : mode
-  return React.createElement(tagName, props, value || content)
-}
-
-const SchemaField = createSchemaField({
-  components: {
-    Space,
-    FormGrid,
-    FormLayout,
-    FormTab,
-    FormCollapse,
-    ArrayTable,
-    ArrayCards,
-    FormItem,
-    DatePicker,
-    Checkbox,
-    Cascader,
-    Editable,
-    Input,
-    Text,
-    NumberPicker,
-    Switch,
-    Password,
-    PreviewText,
-    Radio,
-    Reset,
-    Select,
-    Submit,
-    TimePicker,
-    Transfer,
-    TreeSelect,
-    Upload,
-    Card,
-    Slider,
-    Rate,
-  },
-})
-
-export default ()=>{
-  const form = useMemo(() => createForm(), [])
-
-  return <Form form={form} ${printAttribute(root)}>
-    <SchemaField>
-      ${printChildren(root)}
-    </SchemaField>
-  </Form>
-}
-  
-`
-}
-
-export const MarkupSchemaWidget: React.FC<IMarkupSchemaWidgetProps> = (
-  props
-) => {
-  return (
-    <MonacoInput
-      {...props}
-      options={{ readOnly: true }}
-      value={transformToMarkupSchemaCode(props.tree)}
-      language="typescript"
-    />
-  )
-}

package/playground/widgets/PreviewWidget.tsx

@@ -1,188 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import { createForm, onFormSubmitSuccess } from '@formily/core'
-import { connect, createSchemaField, mapProps } from '@formily/react'
-import {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-  // FormButtonGroup,
-  FormProps,
-} from '@formily/antd-v5'
-import { Card, Slider, Rate, Spin } from 'antd'
-import { TreeNode } from '@formily-design/core'
-import { transformToSchema } from '@formily-design/formily-transformer'
-import {
-  transformSchema,
-  executeFormApi,
-  IFormApiConfig,
-  getLocalStorageData,
-} from '../utils'
-import { FormButtonGroup } from '../components/FormButtonGroup/FormButtonGroup'
-import { FormButton } from '../components/FormButton/FormButton'
-import { LocationPicker } from '../components/LocationPicker/LocationPicker'
-import { FormList } from '../components/FormList/FormList'
-
-const Text: React.FC<{
-  value?: string
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-}> = ({ value, mode, content, ...props }) => {
-  const tagName = mode === 'normal' || !mode ? 'div' : mode
-  return React.createElement(tagName, props, value || content)
-}
-
-// 重置 LocationPicker 组件属性
-const LocationPickerComponent = connect(
-  LocationPicker,
-  mapProps((props) => {
-    return {
-      ...props,
-      // 将组件值映射为业务字段
-      fieldNames: {
-        address: 'fullAddress',
-        lat: 'latitude',
-        lng: 'longitude',
-        ...props.fieldNames,
-      },
-    }
-  })
-)
-
-const SchemaField = createSchemaField({
-  components: {
-    Space,
-    FormGrid,
-    FormLayout,
-    FormTab,
-    FormCollapse,
-    ArrayTable,
-    ArrayCards,
-    FormItem,
-    DatePicker,
-    Checkbox,
-    Cascader,
-    Editable,
-    Input,
-    Text,
-    NumberPicker,
-    Switch,
-    Password,
-    PreviewText,
-    Radio,
-    Reset,
-    Select,
-    Submit,
-    TimePicker,
-    Transfer,
-    TreeSelect,
-    Upload,
-    Card,
-    Slider,
-    Rate,
-    FormButtonGroup,
-    FormButton,
-    LocationPicker: LocationPickerComponent,
-    FormList,
-  },
-})
-
-export interface IPreviewWidgetProps {
-  tree: TreeNode
-}
-
-interface IFormSetterProps extends FormProps {
-  api?: IFormApiConfig
-  initApi?: IFormApiConfig
-}
-
-export const PreviewWidget: React.FC<IPreviewWidgetProps> = (props) => {
-  const form = useMemo(
-    () =>
-      createForm({
-        /** effects 里可以配置各种逻辑，如：字段联动、事件监听、observable + reaction 组合的响应式状态  */
-        effects() {
-          /** 监听表单提交成功 */
-          onFormSubmitSuccess((form) => {
-            // 处理表单提交后返回页面逻辑
-            // console.log('onFormSubmitSuccess', form)
-          })
-        },
-      }),
-    []
-  )
-  const { form: transformForm, schema } = useMemo(
-    () => transformToSchema(props.tree),
-    [props.tree]
-  )
-  const [detailLoading, setDetailLoading] = useState(false)
-  const formProps = transformForm as IFormSetterProps
-  // 接口需要的业务参数
-  const apiParams = {}
-  const scope = {
-    /** 所有 localStorage 数据 */
-    $localStorage: getLocalStorageData(),
-    /** 表单请求接口需要的业务参数 */
-    apiParams,
-    /** 全局数据 */
-    $globalData: {
-      ...apiParams,
-    },
-  }
-  useEffect(() => {
-    // TODO: 需要添加业务数据参数判断
-    if (form && formProps.initApi) {
-      setDetailLoading(true)
-      // 加载初始数据
-      executeFormApi(formProps.initApi, {})
-        .then((data) => {
-          form.setInitialValues(data)
-        })
-        .finally(() => {
-          setDetailLoading(false)
-        })
-    }
-  }, [form, formProps.initApi])
-  return (
-    <Spin spinning={detailLoading}>
-      <Form {...formProps} form={form}>
-        <SchemaField
-          schema={transformSchema(schema, { $globalData: scope.$globalData })}
-          scope={{
-            ...scope,
-            /** 表单提交作用域表达式 - 执行 form 配置的 API */
-            submitFormApi: formProps.api
-              ? (formValues: Record<string, any>) =>
-                  executeFormApi(formProps.api, formValues, {
-                    apiParams,
-                    scope,
-                  })
-              : undefined,
-          }}
-        />
-      </Form>
-    </Spin>
-  )
-}

package/playground/widgets/SchemaEditorWidget.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import {
-  transformToSchema,
-  transformToTreeNode,
-} from '@formily-design/formily-transformer'
-import { TreeNode, ITreeNode } from '@formily-design/core'
-import { MonacoInput } from '@formily-design/react-settings-form'
-
-export interface ISchemaEditorWidgetProps {
-  tree: TreeNode
-  onChange?: (tree: ITreeNode) => void
-}
-
-export const SchemaEditorWidget: React.FC<ISchemaEditorWidgetProps> = (
-  props
-) => {
-  return (
-    <MonacoInput
-      {...props}
-      value={JSON.stringify(transformToSchema(props.tree), null, 2)}
-      onChange={(value) => {
-        props.onChange?.(transformToTreeNode(JSON.parse(value)))
-      }}
-      language="json"
-    />
-  )
-}

package/playground/widgets/index.ts

@@ -1,5 +0,0 @@
-export * from './LogoWidget'
-export * from './ActionsWidget'
-export * from './PreviewWidget'
-export * from './SchemaEditorWidget'
-export * from './MarkupSchemaWidget'