alibaba / formily-editor

SchemaEditor

Formily-Schema-Editor

从表单数据结构出发，帮助你快速搭建表单。

背景

Formily提供了JSON SCHEMA开发表单的能力，因此我们可以实现通过一份JSON SCHEMA渲染出一个表单。

这份SCHEMA可以通过开发者手写，但是更多的时候需要开放给非技术人员通过配置的方式生成。

因此，Formily-Schema-Editor出现了，它帮助不熟悉具体技术细节的用户生产SCHEMA，进而可以自己设计属于他们的表单。

功能

安装

import { SchemaEditor } from "@formily-editor/schema-editor";
import extensions from "@formily-editor/extensions";

const renderToolbar = (context) => {
  // 定制你的导航
}

const demo = () => {
  return <SchemaEditor 
    extensions={Object.values(extensions)} // 扩展组件
    renderToolbar={renderToolbar} // 定制导航
    schema={schema} // 初始schema
  />
}

Demo

使用示例

贡献代码

LICENSE

Formily-Schema-Editor is open source software licensed as MIT.

formily-editor's Issues

下拉菜单（动态数据源）无法渲染

DEMO 中导出数据跟实际编辑的进度不一致

我在查看 readme 中的 demo地址： https://codesandbox.io/s/formlily-schema-editor-vb0ch?file=/index.js 的时候，发现：

在表单编辑器中修改部分属性或者新增组件，这个时候点击导出数据和保存数据，发现两者弹出来的输出格式对不上，点击保存取到的数据为最新的编辑状态数据，而导出则不是。

点击导出数据如下：

{
  "x-component-props": {
    "size": "medium",
    "labelAlign": "left",
    "wrapperCol": 12,
    "labelTextAlign": "right",
    "labelCol": 7
  },
  "type": "object",
  "properties": {
    "xx": {
      "type": "string",
      "x-component": "input",
      "x-component-props": {
        "addonTextBefore": "",
        "trim": true,
        "hasClear": true,
        "placeholder": "",
        "addonTextAfter": ""
      },
      "title": "xx",
      "x-index": 0,
      "key": "xx"
    }
  }
}

点击保存的格式如下：

{
  "x-component-props": {
    "size": "medium",
    "labelAlign": "left",
    "labelTextAlign": "right",
    "labelCol": 7,
    "wrapperCol": 12
  },
  "type": "object",
  "properties": {
    "3333": {
      "x-component": "switch",
      "type": "boolean",
      "key": "3333",
      "x-index": 0,
      "x-component-props": {}
    },
    "xx": {
      "key": "xx",
      "type": "string",
      "x-component": "input",
      "x-component-props": {
        "addonTextBefore": "",
        "trim": true,
        "hasClear": true,
        "placeholder": "",
        "addonTextAfter": ""
      },
      "title": "xx",
      "x-index": 1
    }
  }
}

支持formily2.0

SchemaEditor传递onChange无效

The demo is broken

https://codesandbox.io/s/formlily-schema-editor-vb0ch?file=/index.js

请问yarn build报这个错，是什么原因？

yarn run v1.22.5
$ rimraf -rf packages/*/lib && lerna run build
lerna notice cli v3.22.1
lerna info versioning independent
lerna info Executing command in 2 packages: "npm run build"
lerna ERR! npm run build exited 2 in '@formily-editor/extensions'
lerna ERR! npm run build stdout:

@formily-editor/[email protected] build D:\formily-editor-master\formily-editor-master\packages\extensions
tsc

../../node_modules/@types/react/index.d.ts(3057,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
node_modules/@types/react/index.d.ts(3054,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
node_modules/@types/react/index.d.ts(3067,13): error TS2717: Subsequent property declarations must have the same type. Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>'.
node_modules/@types/react/index.d.ts(3068,13): error TS2717: Subsequent property declarations must have the same type. Property 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>'.

文档地址打不开

产品介绍文档和架构文档的地址都是内网的地址，求更新？