@hzab/form-render 0.0.1

package/README.md

@@ -0,0 +1,233 @@
+# @hzab/form-render
+
+formily schema 表单渲染组件
+
+# 组件
+
+## 示例
+
+```jsx
+import FormRender from "@hzab/form-render";
+
+// testSchema 为 formily 生成的 schema json
+<FormRender schema={testSchema} />;
+```
+
+#### 组件远程数据
+
+- 使用 schemaScope 传入全局配置变量，在响应器的动作响应中调用
+
+```jsx
+// schema
+{
+  "form": {
+    "labelCol": 6,
+    "wrapperCol": 12
+  },
+  "schema": {
+    "type": "object",
+    "properties": {
+      "parentId": {
+        "type": "string",
+        "title": "上级菜单",
+        "x-decorator": "FormItem",
+        "x-component": "TreeSelect",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-reactions": {
+          "fulfill": {
+            "run": "fetchMenuTree($self);"
+          }
+        },
+        "name": "parentId",
+        "x-designable-id": "i012z5nbd5z",
+        "x-index": 0
+      }
+    }
+  }
+}
+
+// formRender
+  <FormRender
+    schema={testSchema}
+    schemaScope={{
+      fetchMenuTree(field) {
+        // 模拟请求
+        setTimeout(() => {
+          // field 目标组件的 配置参数
+          // 通过 field.component[1] 可以动态配置目标组件的 props
+          // 树选择器 数据源
+          field.component[1].treeData = [{ value: 1, label: 1 }];
+        }, 1000)
+      },
+    }}
+  />
+```
+
+#### 自定义组件
+
+- 使用 components 传入自定义组件，在 schema 中 x-component 配置对应的组件名称
+
+```jsx
+// schema
+{
+  "form": {
+    "labelCol": 6,
+    "wrapperCol": 12
+  },
+  "schema": {
+    "type": "object",
+    "properties": {
+      "parentId": {
+        "type": "string",
+        "title": "图标选择器",
+        "x-decorator": "FormItem",
+        "x-component": "IconSelect",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-reactions": {},
+        "name": "parentId",
+        "x-designable-id": "i012z5nbd5z",
+        "x-index": 0
+      }
+    }
+  }
+}
+
+// formRender
+  <FormRender
+    schema={testSchema}
+    components={{
+      // 自定义组件
+      IconSelect() {
+        return "IconSelect";
+      },
+    }}
+  />
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数          | 类型    | 必填 | 默认值     | 说明                                   |
+| ------------- | ------- | ---- | ---------- | -------------------------------------- | --- |
+| schema        | Object  | 是   | -          | 数据信息的 schema                      |
+| schemaScope   | Object  | 否   | -          | 全局作用域，用于实现协议表达式变量注入 |     |
+| layout        | Object  | 否   | horizontal | 表单布局，horizontal vertical \ inline |
+| initialValues | Object  | 否   | -          | form 初始值                            |
+| components    | Object  | 否   | -          | 自定义组件                             |
+| formOptions   | Object  | 否   | -          | createForm 的参数                      |
+| disabled      | boolean | 否   | -          | 禁用状态                               |
+| readOnly      | boolean | 否   | -          | 只读状态                               |
+
+### 方法 Methods
+
+| 名称 | 参数      | 说明           |
+| ---- | --------- | -------------- |
+| init | form 实例 | 组件初始化执行 |
+
+### Schema
+
+- 使用 表单编辑器生成：https://designable-antd.formilyjs.org/
+
+```json
+{
+  "form": {
+    "labelCol": 6,
+    "wrapperCol": 12
+  },
+  "schema": {
+    "type": "object",
+    "properties": {
+      // 参数 key
+      "parentId": {
+        "type": "string",
+        // 参数 label
+        "title": "上级菜单",
+        "x-decorator": "FormItem",
+        // 渲染的组件
+        "x-component": "TreeSelect",
+        // 组件校验
+        "x-validator": [],
+        // 组件配置
+        "x-component-props": {
+          "virtual": true,
+          "allowClear": true,
+          "showSearch": true
+        },
+        // 容器配置
+        "x-decorator-props": {},
+        // 响应器
+        "x-reactions": {
+          // 依赖字段
+          "dependencies": [
+            {
+              "property": "value",
+              "type": "any"
+            }
+          ],
+          // 响应动作
+          "fulfill": {
+            // 属性响应，只支持 JS 表达式
+            "state": {
+              "visible": "{{$deps.menuType === \"C\" || $deps.menuType === \"F\"}}"
+            },
+            // 动作响应，支持 JS 语句
+            "run": "fetchMenuTree($self);"
+          }
+        },
+        // 参数 key
+        "name": "parentId",
+        // 组件在编辑器中的 ID（必须唯一）
+        "x-designable-id": "i012z5nbd5z",
+        // 组件在表单中的顺序（必须唯一）
+        "x-index": 0,
+        // 是否在 table 中展示，目前需要手动添加配置
+        "inTable": false
+      }
+    }
+  }
+}
+```
+
+# 组件开发流程
+
+- 在 config/webpack.config/webpack.config.dev.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 example/typings.d.ts 中按需修改 declare module 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地测试代码
+- src 组件源码
+- lib 组件打包编译后的代码
+
+## 命令
+
+- 本地运行：npm run dev
+- 测试环境打包编译：npm run build-flow-dev
+- 生产环境打包编译：npm run build
+
+## 发布
+
+- 在 config/webpack.config/webpack.config.prod.js 中按需修改 entry 配置的文件名
+- 编译组件：npm run build
+- 命令：npm publish --access public
+- 发布目录：
+  - lib
+  - src
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/global-config/config.local.js
+- 测试环境配置文件：config/global-config/config.flowDev.js
+- 生产环境配置文件：config/global-config/config.production.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/lib/index.js

@@ -0,0 +1 @@
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("@formily/antd"),require("@formily/core"),require("@formily/react"),require("antd"),require("react")):"function"==typeof define&&define.amd?define(["@formily/antd","@formily/core","@formily/react","antd","react"],r):"object"==typeof exports?exports["form-render"]=r(require("@formily/antd"),require("@formily/core"),require("@formily/react"),require("antd"),require("react")):e["form-render"]=r(e["@formily/antd"],e["@formily/core"],e["@formily/react"],e.antd,e.react)}(self,((e,r,t,n,o)=>(()=>{"use strict";var a={45:(e,r,t)=>{t.d(r,{Z:()=>c});var n=t(81),o=t.n(n),a=t(645),i=t.n(a)()(o());i.push([e.id,"",""]);const c=i},645:e=>{e.exports=function(e){var r=[];return r.toString=function(){return this.map((function(r){var t="",n=void 0!==r[5];return r[4]&&(t+="@supports (".concat(r[4],") {")),r[2]&&(t+="@media ".concat(r[2]," {")),n&&(t+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),t+=e(r),n&&(t+="}"),r[2]&&(t+="}"),r[4]&&(t+="}"),t})).join("")},r.i=function(e,t,n,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var c=0;c<this.length;c++){var u=this[c][0];null!=u&&(i[u]=!0)}for(var l=0;l<e.length;l++){var s=[].concat(e[l]);n&&i[s[0]]||(void 0!==a&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=a),t&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=t):s[2]=t),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),r.push(s))}},r}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var r=[];function t(e){for(var t=-1,n=0;n<r.length;n++)if(r[n].identifier===e){t=n;break}return t}function n(e,n){for(var a={},i=[],c=0;c<e.length;c++){var u=e[c],l=n.base?u[0]+n.base:u[0],s=a[l]||0,f="".concat(l," ").concat(s);a[l]=s+1;var p=t(f),m={css:u[1],media:u[2],sourceMap:u[3],supports:u[4],layer:u[5]};if(-1!==p)r[p].references++,r[p].updater(m);else{var d=o(m,n);n.byIndex=c,r.splice(c,0,{identifier:f,updater:d,references:1})}i.push(f)}return i}function o(e,r){var t=r.domAPI(r);t.update(e);return function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap&&r.supports===e.supports&&r.layer===e.layer)return;t.update(e=r)}else t.remove()}}e.exports=function(e,o){var a=n(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=t(a[i]);r[c].references--}for(var u=n(e,o),l=0;l<a.length;l++){var s=t(a[l]);0===r[s].references&&(r[s].updater(),r.splice(s,1))}a=u}}},569:e=>{var r={};e.exports=function(e,t){var n=function(e){if(void 0===r[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}r[e]=t}return r[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(t)}},216:e=>{e.exports=function(e){var r=document.createElement("style");return e.setAttributes(r,e.attributes),e.insert(r,e.options),r}},565:(e,r,t)=>{e.exports=function(e){var r=t.nc;r&&e.setAttribute("nonce",r)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var r=e.insertStyleElement(e);return{update:function(t){!function(e,r,t){var n="";t.supports&&(n+="@supports (".concat(t.supports,") {")),t.media&&(n+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(n+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),n+=t.css,o&&(n+="}"),t.media&&(n+="}"),t.supports&&(n+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),r.styleTagTransform(n,e,r.options)}(r,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(r)}}}},589:e=>{e.exports=function(e,r){if(r.styleSheet)r.styleSheet.cssText=e;else{for(;r.firstChild;)r.removeChild(r.firstChild);r.appendChild(document.createTextNode(e))}}},54:r=>{r.exports=e},563:e=>{e.exports=r},505:e=>{e.exports=t},721:e=>{e.exports=n},156:e=>{e.exports=o}},i={};function c(e){var r=i[e];if(void 0!==r)return r.exports;var t=i[e]={id:e,exports:{}};return a[e](t,t.exports,c),t.exports}c.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return c.d(r,{a:r}),r},c.d=(e,r)=>{for(var t in r)c.o(r,t)&&!c.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},c.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.nc=void 0;var u={};return(()=>{c.r(u),c.d(u,{default:()=>q});var e={};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function t(e){var t=function(e,t){if("object"!==r(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===r(t)?t:String(t)}function n(e,r,n){return(r=t(r))in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}c.r(e),c.d(e,{Text:()=>b});var o=c(156),a=c.n(o),i=c(563),l=c(505),s=c(54),f=c(721);function p(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var m=["value","mode","content","className"];function d(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?d(Object(t),!0).forEach((function(r){n(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):d(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const b=(0,l.connect)((function(e){var r=e.value,t=e.mode,n=e.content,o=e.className,i=p(e,m),c="normal"!==t&&t?t:"div";return console.log("props",i.readOnly),a().createElement(c,y({className:"formily-text ".concat(o)},i),r||n)}),(0,l.mapProps)((function(e,r){return y(y({},e),{},{form:r.form,field:r})})));var v=c(379),h=c.n(v),O=c(795),S=c.n(O),g=c(569),j=c.n(g),P=c(565),x=c.n(P),w=c(216),T=c.n(w),C=c(589),E=c.n(C),F=c(45),k={};k.styleTagTransform=E(),k.setAttributes=x(),k.insert=j().bind(null,"head"),k.domAPI=S(),k.insertStyleElement=T();h()(F.Z,k);F.Z&&F.Z.locals&&F.Z.locals;function N(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function I(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?N(Object(t),!0).forEach((function(r){n(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):N(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const q=(0,o.forwardRef)((function(r,t){var n=(0,o.useCallback)((0,l.createSchemaField)({components:I(I({Space:s.Space,FormGrid:s.FormGrid,FormLayout:s.FormLayout,FormTab:s.FormTab,FormCollapse:s.FormCollapse,ArrayTable:s.ArrayTable,ArrayCards:s.ArrayCards,FormItem:s.FormItem,DatePicker:s.DatePicker,Checkbox:s.Checkbox,Cascader:s.Cascader,Editable:s.Editable,Input:s.Input,NumberPicker:s.NumberPicker,Switch:s.Switch,Password:s.Password,PreviewText:s.PreviewText,Radio:s.Radio,Reset:s.Reset,Select:s.Select,Submit:s.Submit,TimePicker:s.TimePicker,Transfer:s.Transfer,TreeSelect:s.TreeSelect,Upload:s.Upload,Card:f.Card,Slider:f.Slider,Rate:f.Rate},e),r.components),scope:I({},r.schemaScope)}),[]),c=(0,o.useMemo)((function(){return(0,i.createForm)(I({initialValues:r.initialValues,readOnly:r.readOnly,disabled:r.disabled},r.formOptions||{}))}),[]);return(0,o.useImperativeHandle)(t,(function(){return{formRender:c}})),(0,o.useEffect)((function(){r.init&&r.init(c)}),[]),a().createElement(s.Form,{className:"form-render ".concat(r.className),layout:r.layout,form:c,labelCol:r.schema.form.labelCol,wrapperCol:r.schema.form.wrapperCol,onAutoSubmit:function(e){r.onSubmit(e)},onAutoSubmitFailed:function(e){r.onSubmitFailed(e)}},a().createElement(n,{schema:r.schema.schema}),a().createElement("div",{className:"form-render-footer xxm"},r.Slots&&a().createElement(r.Slots,null)))}))})(),u})()));

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@hzab/form-render",
+  "version": "0.0.1",
+  "description": "",
+  "main": "lib",
+  "module": "index.js",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env development",
+    "build": "webpack -c ./config/webpack.config.js --env production"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "antd": "^4.14.0",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^8.30.0",
+    "eslint-webpack-plugin": "^3.2.0",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^7.2.14",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss-loader": "^7.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpackbar": "^5.0.2"
+  },
+  "peerDependencies": {
+    "antd": "<=4.22.8",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@formily/antd": "^2.2.20",
+    "@formily/core": "^2.2.20",
+    "@formily/react": "^2.2.20"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/src/components/Text/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { connect, mapProps } from "@formily/react";
+
+function Text({ value, mode, content, className, ...props }) {
+  const tagName = mode === "normal" || !mode ? "div" : mode;
+  console.log("props", props.readOnly);
+
+  return React.createElement(
+    tagName,
+    {
+      className: `formily-text ${className}`,
+      ...props,
+    },
+    value || content,
+  );
+}
+
+export default connect(
+  Text,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);

package/src/components/index.tsx

@@ -0,0 +1,3 @@
+import Text from "./Text";
+
+export { Text };

package/src/index.less

@@ -0,0 +1,2 @@
+.form-render {
+}

package/src/index.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useMemo, useImperativeHandle, forwardRef, useCallback } 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";
+import { Card, Slider, Rate } from "antd";
+// 自定义组件
+import * as customComponents from "./components/index";
+
+import "./index.less";
+
+const FormRender = forwardRef((props: any, parentRef) => {
+  const SchemaField = useCallback(
+    createSchemaField({
+      components: {
+        Space,
+        FormGrid,
+        FormLayout,
+        FormTab,
+        FormCollapse,
+        ArrayTable,
+        ArrayCards,
+        FormItem,
+        DatePicker,
+        Checkbox,
+        Cascader,
+        Editable,
+        Input,
+        NumberPicker,
+        Switch,
+        Password,
+        PreviewText,
+        Radio,
+        Reset,
+        Select,
+        Submit,
+        TimePicker,
+        Transfer,
+        TreeSelect,
+        Upload,
+        Card,
+        Slider,
+        Rate,
+        ...customComponents,
+        ...props.components,
+      },
+      scope: { ...props.schemaScope },
+    }),
+    [],
+  );
+
+  const formRender = useMemo(
+    () =>
+      createForm({
+        initialValues: props.initialValues,
+        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        ...(props.formOptions || {}),
+      }),
+    [],
+  );
+
+  // 表单提交方法
+  const autoSubmit = (fromValue) => {
+    props.onSubmit(fromValue);
+  };
+  // 表单校验方法
+  const autoSubmitFailed = (messages) => {
+    props.onSubmitFailed(messages);
+  };
+
+  useImperativeHandle(parentRef, () => ({ formRender }));
+
+  useEffect(() => {
+    props.init && props.init(formRender);
+  }, []);
+
+  return (
+    <Form
+      className={`form-render ${props.className}`}
+      layout={props.layout}
+      form={formRender}
+      labelCol={props.schema.form.labelCol}
+      wrapperCol={props.schema.form.wrapperCol}
+      onAutoSubmit={autoSubmit}
+      onAutoSubmitFailed={autoSubmitFailed}
+    >
+      <SchemaField schema={props.schema.schema}></SchemaField>
+      <div className="form-render-footer xxm">{props.Slots && <props.Slots />}</div>
+    </Form>
+  );
+});
+
+export default FormRender;