vap1 0.1.4 → 0.1.6

package/components/_setup/UForm/UFormJSONTable.js

@@ -0,0 +1,157 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const index_1 = require("../../../index");
+const components_1 = require("../../../components");
+const hooks_1 = require("../../../hooks");
+const renderColumn = (txt, column) => {
+    if (column.options) {
+        let find = lodash_1.default.find(column.options, { value: txt });
+        if (find) {
+            return find.name;
+        }
+    }
+    return txt;
+};
+// json-table 不支持被联动，可联动其它
+// 基础组件 JSON 数组, json-array 升级版本，适用于复杂的表格
+(0, components_1.registerFormField)('json-table', props => {
+    const { field, disabled, value, } = props;
+    const config = field.config;
+    const rowKey = lodash_1.default.has(config, 'rowKey') ? config.rowKey : 'id';
+    const { modalState: { modalProps }, showAdd, showEdit, showInfo, hide } = (0, hooks_1.useModals)();
+    const onChange = (arr) => {
+        if (field.dataType == 'array') {
+            props.onChange(arr);
+        }
+        else {
+            props.onChange(JSON.stringify(arr));
+        }
+    };
+    const arr = (0, react_1.useMemo)(() => {
+        let arr = [];
+        if (lodash_1.default.isArray(value)) {
+            arr = [...props.value];
+        }
+        else if (lodash_1.default.isString(value)) {
+            try {
+                arr = JSON.parse(value);
+                if (!lodash_1.default.isArray(arr))
+                    arr = [];
+            }
+            catch (_a) { }
+        }
+        arr.map(item => {
+            if (!lodash_1.default.has(item, rowKey)) {
+                lodash_1.default.set(item, rowKey, utils_1.StringUtil.genKey());
+            }
+        });
+        return arr;
+    }, [value]);
+    const formFields = (0, react_1.useMemo)(() => {
+        if (lodash_1.default.has(config, 'formFields'))
+            return config.formFields;
+        let fields = [];
+        config.columns.map((col) => {
+            let field = { field: col.dataIndex, title: col.title, };
+            if (col.type)
+                field.type = col.type;
+            if (col.required)
+                field.required = true;
+            if (lodash_1.default.isArray(col.options))
+                field.options = col.options;
+            fields.push(field);
+        });
+        return fields;
+    }, []);
+    const tableColumns = (0, react_1.useMemo)(() => {
+        let columns = [];
+        config.columns.map((item) => {
+            let col = lodash_1.default.omit(item, ['type', 'options', 'required']);
+            if (!col.render && lodash_1.default.isArray(item.options)) {
+                col.render = utils_1.Renders.ListRender(item.options);
+            }
+            columns.push(col);
+        });
+        return columns;
+    }, []);
+    const add = (0, react_1.useCallback)((data) => onChange(utils_1.ArrayUtil.add(arr, Object.assign(Object.assign({}, data), { [rowKey]: utils_1.StringUtil.genKey() }))), [arr]);
+    const update = (0, react_1.useCallback)((data) => onChange(utils_1.ArrayUtil.update(arr, data, rowKey)), [arr]);
+    const del = (0, react_1.useCallback)((data) => onChange(utils_1.ArrayUtil.del(arr, data, rowKey)), [arr]);
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.STable, { list: arr, locale: {
+                emptyText: react_1.default.createElement(index_1.Empty, { description: react_1.default.createElement(index_1.Button, { type: "primary", icon: "plus", onClick: showAdd },
+                        "\u6DFB\u52A0",
+                        field.title) })
+            }, columns: [
+                ...tableColumns,
+                index_1.VTable.COL_OPERACTION((record) => [
+                    react_1.default.createElement(index_1.VTable.INFO, { onClick: () => showInfo(record) }),
+                    react_1.default.createElement(index_1.VTable.EDIT, { onClick: () => showEdit(record) }),
+                    react_1.default.createElement(index_1.VTable.DELETE, { onClick: () => del(record) }),
+                ])
+            ], pagination: false, footer: () => {
+                if (arr.length == 0 || disabled) {
+                    return null;
+                }
+                return react_1.default.createElement(index_1.Button, { type: "primary", icon: "plus", onClick: showAdd },
+                    "\u6DFB\u52A0",
+                    field.title);
+            } }),
+        react_1.default.createElement(index_1.UModal, Object.assign({}, modalProps, { autoTitle: field.title, fields: formFields, default: config.formDefault || {}, onOk: (data) => {
+                hide();
+                if (modalProps.isEdit) {
+                    update(data);
+                }
+                else {
+                    add(data);
+                }
+            } })));
+}, {
+    breakCol: true,
+    breakTitle: true,
+    render: (value, data, field) => {
+        let list = [];
+        try {
+            list = JSON.parse(value);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return react_1.default.createElement(index_1.STable
+        // className="c-table json-array-table"
+        // size="small"
+        , { 
+            // className="c-table json-array-table"
+            // size="small"
+            locale: { emptyText: react_1.default.createElement(index_1.Empty, { description: "\u6682\u65E0\u6570\u636E" }) }, list: list, columns: field.config.columns.map(item => (Object.assign(Object.assign({}, item), { render: (txt) => renderColumn(txt, item) }))), pagination: false });
+    }
+});

package/components/_setup/UForm/UFormSelect.js

@@ -82,6 +82,25 @@ const Const_1 = require("../Const");
             onChange(isCheck ? field.options[CHECKED].value : field.options[UNCHECKED].value);
         } }));
 });
+// 用法与 switch 相同
+(0, _register_1.registerFormField)('switch-checkbox', (props) => {
+    const { field, disabled, value, onChange, options } = props;
+    if (options.length <= 1) {
+        console.warn('Type Switch Must have 2 Options');
+        return utils_1.Const.NONE;
+    }
+    let CHECKED = utils_1.GLOBAL.CONFIG.FORM.SWITCH_DEFAULT_CHECKED;
+    if (lodash_1.default.has(field.config, 'reverse') && field.config.reverse)
+        CHECKED = 1 - CHECKED;
+    let UNCHECKED = 1 - CHECKED;
+    const isCheck = value == field.options[CHECKED].value;
+    return react_1.default.createElement(antd_1.Checkbox, Object.assign({}, field.config, { disabled: disabled, checked: isCheck, onChange: evt => {
+            utils_1.PageUtil.stopEvent(evt.nativeEvent);
+            const checked = evt.target.checked;
+            onChange(checked ? field.options[CHECKED].value : field.options[UNCHECKED].value);
+        } }),
+        react_1.default.createElement("span", { style: { userSelect: 'none' } }, isCheck ? field.options[CHECKED].label : field.options[UNCHECKED].label));
+});
 // 单选
 (0, _register_1.registerFormField)('radio', (props) => {
     const { field, disabled, value, onChange, options } = props;

package/components/_setup/index.d.ts

@@ -16,6 +16,7 @@ import './UForm/UFormRole';
 import './UForm/UFormOrg';
 import './UForm/UFormSearch';
 import './UForm/UFormJSON';
+import './UForm/UFormJSONTable';
 import './UForm/UFormCrontab';
 import './UForm/UFormAdvanceInput';
 import './UForm/UFormAdvanceSelect';

package/components/_setup/index.js

@@ -20,6 +20,7 @@ require("./UForm/UFormRole"); // 高阶类型：角色
 require("./UForm/UFormOrg"); // 高阶类型：机构
 require("./UForm/UFormSearch"); // 高阶类型：自动填充/自动搜索（API接口获取数据）
 require("./UForm/UFormJSON"); // 高阶类型：JSON Array, JSON Object
+require("./UForm/UFormJSONTable"); // 高阶类型：JSON Array 升级版本
 require("./UForm/UFormCrontab"); // 高阶类型：Crontab
 require("./UForm/UFormAdvanceInput"); // 高阶类型：高级输入
 require("./UForm/UFormAdvanceSelect"); // 高阶类型：高级选择

package/hooks/_list.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_STATE = void 0;
+const Global_1 = require("../utils/Global");
 exports.DEFAULT_STATE = {
     rowKey: 'id',
     list: [],
     isQuerying: false,
     pageNo: 1,
-    pageSize: 15,
+    pageSize: Global_1.CONFIG.PAGINATION.SIZE_DEFAULT,
     total: 0,
     totalAcc: 0,
     param: {},

package/hooks/useArray.d.ts

@@ -1,5 +1,5 @@
 import type { StaticListState, ListInit } from './_list';
-type ArrayOption = ListInit & {
+export type UseArrayOption = ListInit & {
     /**
      * 页面大小，默认为 VLIST 大小
      * 默认为 0 ：为0时，不分页，非0时分页
@@ -17,5 +17,4 @@ type ArrayOption = ListInit & {
  * 静态数组 Table，支持 CRUD（不调接口）
  * 同样适用于 VTable 等组件
 */
-export declare const useArray: (options: ArrayOption) => StaticListState;
-export {};
+export declare const useArray: (options: UseArrayOption) => StaticListState;

package/hooks/useArray.js

@@ -46,21 +46,43 @@ const getList = (result) => {
  * 同样适用于 VTable 等组件
 */
 const useArray = (options) => {
-    const AllRef = (0, react_1.useRef)(null);
-    const BASE = Object.assign(Object.assign({}, _list_1.DEFAULT_STATE), { pageSize: 0 });
+    const [ALL, setList] = (0, react_1.useState)(options.list || []);
+    const BASE = Object.assign(Object.assign({}, _list_1.DEFAULT_STATE), { pageSize: 0, list: [] });
     if (options.rowKey)
         BASE.rowKey = options.rowKey;
-    let lastQueryRef = (0, react_1.useRef)(options.param || {});
-    let pageToRef = (0, react_1.useRef)(null);
-    let orderByRef = (0, react_1.useRef)(null);
     if (options.pageSize && options.pageSize > 0)
         BASE.pageSize = options.pageSize;
+    let lastQueryRef = (0, react_1.useRef)(options.param || {});
+    let pageToRef = (0, react_1.useRef)({ pageNo: 1, pageSize: BASE.pageSize > 0 ? BASE.pageSize : 99999 });
+    let orderByRef = (0, react_1.useRef)(null);
     const [state, setState] = (0, useSetState_1.useSetState)(BASE);
+    (0, useEffectFunction_1.useEffectFunction)(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (ALL.length > 0 || options.api == null)
+            return;
+        setState({ isQuerying: true });
+        const param = options.param || {};
+        let response;
+        if (options.param) {
+            response = utils_1.Ajax.POST(options.api, options.param);
+        }
+        else {
+            response = utils_1.Ajax.GET(options.api);
+            ;
+        }
+        const resp = yield response;
+        const list = getList(resp);
+        setList(list);
+        setState({ isQuerying: false, param });
+    }));
+    (0, react_1.useLayoutEffect)(() => {
+        setState({ total: ALL.length, totalAcc: ALL.length });
+        queryRef();
+    }, [ALL]);
     const queryRef = () => {
         const param = lastQueryRef.current;
         const pageTo = pageToRef.current;
         const orderBy = orderByRef.current;
-        let list = AllRef.current.slice(0);
+        let list = ALL.slice(0);
         lodash_1.default.keys(param).map(field => {
             if (lodash_1.default.endsWith('_'))
                 return;
@@ -76,28 +98,13 @@ const useArray = (options) => {
             list = lodash_1.default.orderBy(list, orderBy.order, orderBy.by);
         }
         if (pageTo == null) {
-            setState({ isQuerying: false, list, total: list.length, totalAcc: list.length, param, pageNo: 1, });
+            setState({ isQuerying: false, list, param, pageNo: 1, total: list.length, totalAcc: list.length });
             return;
         }
         let start = pageTo.pageSize * (pageTo.pageNo - 1);
         let count = pageTo.pageSize;
-        setState({ isQuerying: false, list: list.slice(start, count), total: list.length, totalAcc: list.length, param, pageNo: 1, });
+        setState({ isQuerying: false, list: list.slice(start, start + count), param, pageNo: pageTo.pageNo, pageSize: pageTo.pageSize, total: list.length, totalAcc: list.length });
     };
-    const queryApi = () => __awaiter(void 0, void 0, void 0, function* () {
-        const param = lastQueryRef.current;
-        setState({ isQuerying: true });
-        const resp = yield utils_1.Ajax.POST(options.api, param);
-        const list = getList(resp);
-        AllRef.current = list;
-        const pageTo = pageToRef.current;
-        if (pageTo == null) {
-            setState({ isQuerying: false, list, total: list.length, totalAcc: list.length, param, pageNo: 1, });
-            return;
-        }
-        let start = pageTo.pageSize * (pageTo.pageNo - 1);
-        let count = pageTo.pageSize;
-        setState({ isQuerying: false, list: list.slice(start, count), total: list.length, totalAcc: list.length, param, pageNo: 1, });
-    });
     const query = (param, clean) => {
         if (clean) {
             lastQueryRef.current = param || {};
@@ -113,42 +120,20 @@ const useArray = (options) => {
         }
         if (options.pageSize && options.pageSize > 0) {
             pageToRef.current = { pageNo: 1, pageSize: options.pageSize };
+            setState({ pageNo: 1, pageSize: options.pageSize });
         }
         else {
             pageToRef.current = null;
         }
-        if (options.api) {
-            queryApi();
-        }
-        else if (AllRef.current != null && lodash_1.default.isArray(AllRef.current)) {
-            queryRef();
-        }
-        else {
-            console.error('list 与　api 到少需要指定一项');
-        }
+        queryRef();
     };
-    (0, useEffectFunction_1.useEffectFunction)(() => {
-        if (lodash_1.default.isArray(options.list))
-            AllRef.current = options.list;
-        if (options.autoLoad !== false)
-            query(options.param || {}, true);
-    });
     const pageTo = (pageNo, pageSize) => {
-        if (options.pageSize && options.pageSize > 0) {
-            // pageToRef.current = { pageNo: 1, pageSize: options.pageSize }
+        if (options.pageSize == null || options.pageSize == 0) {
             console.error('静态Array默认不翻页，如果需要翻页，需要指定pageSize');
             return;
         }
         pageToRef.current = { pageNo, pageSize };
-        if (AllRef.current != null && lodash_1.default.isArray(AllRef.current)) {
-            queryRef();
-        }
-        else if (options.api) {
-            queryApi();
-        }
-        else {
-            console.error('list 与　api 到少需要指定一项');
-        }
+        queryRef();
     };
     const orderBy = (order, by) => {
         if (order == null || by == null) {
@@ -157,24 +142,6 @@ const useArray = (options) => {
         else {
             orderByRef.current = { order, by };
         }
-        if (AllRef.current != null && lodash_1.default.isArray(AllRef.current)) {
-            queryRef();
-        }
-        else if (options.api) {
-            queryApi();
-        }
-        else {
-            console.error('list 与　api 到少需要指定一项');
-        }
-    };
-    const setList = (list) => {
-        AllRef.current = list.slice();
-        if (options.pageSize && options.pageSize > 0) {
-            pageToRef.current = { pageNo: 1, pageSize: options.pageSize };
-        }
-        else {
-            pageToRef.current = null;
-        }
         queryRef();
     };
     return Object.assign(Object.assign({}, state), { mode: 'static', query, pageTo, orderBy, setList });

package/index.d.ts

@@ -132,7 +132,7 @@ export { VTable, ApiTable, ApiTableModal, STable, TopTable, TopTableModal } from
 export { STree, DTree, FTree } from './components/Trees';
 export { UploadFile, UploadImage, UploadModal } from './components/Upload';
 export { SList } from './components/Lists/SList';
-export type { UFromProps, UModalProps, UFormField, UFormFieldGroup, LinkResult, UDescriptionsProps, UFormRef } from './components/UForm';
+export type { UFromProps, UModalProps, UFormField, UFormFieldGroup, LinkResult, UDescriptionsProps, UFormRef, Link, LinkValue } from './components/UForm';
 export type { TableColumn } from './components/Tables/index';
 export type { VTableProps, VTableRef } from './components/Tables/VTable';
 export type { ApiTableProps } from './components/Tables/ApiTable';

package/package.json

@@ -1 +1 @@
-{"name":"vap1","version":"0.1.4","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}
+{"name":"vap1","version":"0.1.6","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}

package/uform/FormEditor.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { FormSchema } from './schema';
+/**
+ * TODO
+ * 1. input-with-select
+ *      select 宽度
+ *      select 位置
+ * 2. fieldCount>2 默认值
+ * 3. 默认显示/disable
+ * 4. tree-select
+ * 5. dtree-select
+ * 6. 所有日期：日期格式设置
+ * */
+type FormEditorProps = {
+    data?: string | FormSchema;
+    name?: string;
+    onSave: (schema: string, isCtrlS?: boolean) => void;
+    onBack?: () => void;
+};
+export declare const FormEditor: React.FC<FormEditorProps>;
+export {};

package/uform/FormEditor.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormEditor = void 0;
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const index_1 = require("../index");
+const index_2 = __importDefault(require("./panel/Items/index"));
+const index_3 = __importDefault(require("./panel/Editor/index"));
+const useForm_1 = require("./hooks/useForm");
+const FormViewer_1 = require("./FormViewer");
+const CanvasProperties_1 = __importDefault(require("./panel/Propreties/CanvasProperties"));
+const FieldProperties_1 = __importDefault(require("./panel/Propreties/FieldProperties"));
+const GroupProperties_1 = __importDefault(require("./panel/Propreties/GroupProperties"));
+const useEditor_1 = require("./hooks/useEditor");
+const FormViewer_2 = require("./FormViewer");
+const FormEditor = (props) => {
+    const schema = (0, react_1.useMemo)(() => (0, FormViewer_2.initSchama)(props.data), [props.data]);
+    const editor = (0, useEditor_1.useFormEditor)(schema);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const save = (isCtrlS = false) => {
+        props.onSave(JSON.stringify(editor.getForm()), isCtrlS);
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        const onKeyDown = (evt) => {
+            if (evt.ctrlKey && (evt.key == 's' || evt.key == 'S')) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                save(true);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown, false);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, []);
+    return react_1.default.createElement(useForm_1.UFORM.Provider, { value: editor.form },
+        react_1.default.createElement(useEditor_1.FORM_EDITOR.Provider, { value: editor },
+            react_1.default.createElement(index_1.Row, { className: 'uform-editor' },
+                react_1.default.createElement(index_1.Col, { style: { width: 210, flexShrink: 0 } },
+                    react_1.default.createElement(index_2.default, null)),
+                react_1.default.createElement(index_1.Col, { style: { flexGrow: 1 } },
+                    react_1.default.createElement("div", { className: 'panel-title' },
+                        "\u8868\u5355 ",
+                        props.name && react_1.default.createElement("small", null,
+                            react_1.default.createElement("b", null, props.name)),
+                        react_1.default.createElement(index_1.Button.Group, { style: { float: 'right', marginRight: 6, display: 'block' } },
+                            editor.form.isGroup && react_1.default.createElement(index_1.Button, { icon: "plus", onClick: () => editor.addGroup() }, "\u6DFB\u52A0\u5206\u7EC4"),
+                            react_1.default.createElement(index_1.Button, { icon: 'eye', type: "primary", onClick: () => {
+                                    if (schema.fields && schema.fields.length > 1) {
+                                        setOpen(true);
+                                    }
+                                    else {
+                                        index_1.message.error('至少添加一个字段');
+                                    }
+                                } }, "\u9884\u89C8"))),
+                    react_1.default.createElement(index_3.default, null)),
+                react_1.default.createElement(index_1.Col, { style: { width: 320, flexShrink: 0 }, className: "uform-prperties" },
+                    react_1.default.createElement("div", { className: 'panel-title' },
+                        "\u5C5E\u6027",
+                        react_1.default.createElement(index_1.Button.Group, { style: { float: 'right', marginRight: 6, display: 'block' } },
+                            lodash_1.default.isFunction(props.onBack) && react_1.default.createElement(index_1.Button, { icon: 'rollback', onClick: () => props.onBack() }, "\u8FD4\u56DE"),
+                            react_1.default.createElement(index_1.Button, { onClick: () => save(), icon: 'save', type: 'primary' }, "\u4FDD\u5B58"))),
+                    react_1.default.createElement(index_1.Form, { className: 'panel-content', labelCol: { sm: 6 }, wrapperCol: { sm: 17 } }, editor.selected == null ? react_1.default.createElement(CanvasProperties_1.default, null) : (editor.selected.field ? react_1.default.createElement(FieldProperties_1.default, null) : react_1.default.createElement(GroupProperties_1.default, null))))),
+            react_1.default.createElement(FormViewer_1.FormModal, { title: editor.form.title || '表单预览', schema: editor.form, open: open, onOk: (data) => {
+                    setOpen(false);
+                    index_1.notification.info({
+                        role: 'alert',
+                        style: { padding: 0 },
+                        icon: react_1.default.createElement(react_1.default.Fragment, null),
+                        placement: 'top',
+                        message: react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("h4", null, "JSON \u9884\u89C8"),
+                            react_1.default.createElement("pre", null, JSON.stringify(data, null, 1)))
+                    });
+                }, onCancel: () => setOpen(false) })));
+};
+exports.FormEditor = FormEditor;

package/uform/FormViewer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { FormSchema } from './schema';
+import type { UModalProps, PlainObject } from '../index';
+type ModalProps = Pick<UModalProps, 'open' | 'onOk' | 'onCancel' | 'title' | 'data'>;
+type FormViewProps = {
+    schema: FormSchema | string;
+    data?: PlainObject;
+};
+export declare const initSchama: (data: string | FormSchema) => FormSchema;
+export declare const FormViewer: React.FC<FormViewProps>;
+export declare const FormModal: React.FC<FormViewProps & ModalProps>;
+export {};

package/uform/FormViewer.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormModal = exports.FormViewer = exports.initSchama = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importStar(require("react"));
+const index_1 = require("../index");
+const Convert_1 = require("./utils/Convert");
+const DEFAULT = { fields: [] };
+const initSchama = (data) => {
+    if (lodash_1.default.isString(data)) {
+        try {
+            const schema = JSON.parse(data);
+            if (lodash_1.default.isPlainObject(schema) && lodash_1.default.isArray(schema.fields)) {
+                return schema;
+            }
+        }
+        catch (_a) {
+        }
+    }
+    else if (lodash_1.default.isPlainObject(data) && lodash_1.default.isArray(data.fields)) {
+        return data;
+    }
+    return DEFAULT;
+};
+exports.initSchama = initSchama;
+const _FormRender = props => {
+    const uformProps = (0, react_1.useMemo)(() => (0, Convert_1.schemaToForm)(props.schema), [props]);
+    return react_1.default.createElement(index_1.UForm, Object.assign({}, uformProps, { data: props.data }));
+};
+const _ModalRender = props => {
+    const uformProps = (0, react_1.useMemo)(() => (0, Convert_1.schemaToForm)(props.schema), [props]);
+    let modalProps = {};
+    modalProps.title = props.title || props.schema.title || '';
+    return react_1.default.createElement(index_1.UFormModal, Object.assign({}, uformProps, modalProps, { data: props.data, open: props.open, onOk: props.onOk, onCancel: props.onCancel }));
+};
+const FormViewer = props => {
+    const schema = (0, react_1.useMemo)(() => (0, exports.initSchama)(props.schema), [props.schema]);
+    return react_1.default.createElement(_FormRender, { schema: schema, data: props.data });
+};
+exports.FormViewer = FormViewer;
+const FormModal = props => {
+    const schema = (0, react_1.useMemo)(() => (0, exports.initSchama)(props.schema), [props.schema]);
+    return react_1.default.createElement(_ModalRender, Object.assign({}, props, { schema: schema }));
+};
+exports.FormModal = FormModal;

package/uform/hooks/useEditor.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { FormGroup, FormItem, FormSchema, Cursor } from '../schema';
+type CurrentSelected = {
+    group?: string;
+    field?: string;
+};
+type FormEditorContext = {
+    form: FormSchema;
+    selected: CurrentSelected;
+    baseSpan: number;
+    getForm: () => FormSchema;
+    setSelected: (selected: {
+        field?: string;
+        group?: string;
+    }) => void;
+    deleteField: (groupId?: string) => void;
+    addGroup: () => void;
+    deleteGroup: (groupId: string) => void;
+    getSelect: () => FormItem | FormGroup;
+    sortField: (itemId: string, targetPos: any, groupId?: string) => void;
+    addField: (type: string, pointer?: Cursor, groupId?: string) => void;
+    setFormProperties: (param: Partial<FormSchema>) => void;
+    setFieldProperties: (properties: string, value: any) => void;
+};
+export declare const FORM_EDITOR: import("react").Context<FormEditorContext>;
+export declare const useEditor: () => FormEditorContext;
+export declare const useFormEditor: (dataJson: FormSchema) => FormEditorContext;
+export {};