vap1 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Box/Box.js +5 -0
- package/components/Tables/VTable.js +7 -5
- package/components/UForm/UForm.js +6 -8
- package/components/_adapt/Col.js +3 -1
- package/components/_adapt/Row.js +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/uform/FormEditor.d.ts +21 -0
- package/uform/FormEditor.js +101 -0
- package/uform/FormViewer.d.ts +12 -0
- package/uform/FormViewer.js +71 -0
- package/uform/hooks/useEditor.d.ts +28 -0
- package/uform/hooks/useEditor.js +144 -0
- package/uform/hooks/useForm.d.ts +4 -0
- package/uform/hooks/useForm.js +7 -0
- package/uform/index.d.ts +5 -0
- package/uform/index.js +35 -0
- package/uform/inputs/_advance.d.ts +2 -0
- package/uform/inputs/_advance.js +57 -0
- package/uform/inputs/_date.d.ts +2 -0
- package/uform/inputs/_date.js +178 -0
- package/uform/inputs/_input.d.ts +6 -0
- package/uform/inputs/_input.js +139 -0
- package/uform/inputs/_select.d.ts +2 -0
- package/uform/inputs/_select.js +241 -0
- package/uform/inputs/_specific.d.ts +2 -0
- package/uform/inputs/_specific.js +107 -0
- package/uform/inputs/index.d.ts +6 -0
- package/uform/inputs/index.js +18 -0
- package/uform/inputs/register.d.ts +25 -0
- package/uform/inputs/register.js +47 -0
- package/uform/panel/Editor/GroupEditor.d.ts +7 -0
- package/uform/panel/Editor/GroupEditor.js +126 -0
- package/uform/panel/Editor/ListEditor.d.ts +4 -0
- package/uform/panel/Editor/ListEditor.js +77 -0
- package/uform/panel/Editor/_FieldItems.d.ts +5 -0
- package/uform/panel/Editor/_FieldItems.js +45 -0
- package/uform/panel/Editor/_GroupCollapse.d.ts +3 -0
- package/uform/panel/Editor/_GroupCollapse.js +24 -0
- package/uform/panel/Editor/_GroupDefault.d.ts +3 -0
- package/uform/panel/Editor/_GroupDefault.js +24 -0
- package/uform/panel/Editor/_GroupStep.d.ts +3 -0
- package/uform/panel/Editor/_GroupStep.js +49 -0
- package/uform/panel/Editor/_GroupTab.d.ts +3 -0
- package/uform/panel/Editor/_GroupTab.js +41 -0
- package/uform/panel/Editor/index.d.ts +3 -0
- package/uform/panel/Editor/index.js +83 -0
- package/uform/panel/Items/index.d.ts +3 -0
- package/uform/panel/Items/index.js +23 -0
- package/uform/panel/Propreties/CanvasProperties.d.ts +3 -0
- package/uform/panel/Propreties/CanvasProperties.js +42 -0
- package/uform/panel/Propreties/Component/FieldPlugin.d.ts +12 -0
- package/uform/panel/Propreties/Component/FieldPlugin.js +39 -0
- package/uform/panel/Propreties/Component/LinkAsyncFunction.d.ts +8 -0
- package/uform/panel/Propreties/Component/LinkAsyncFunction.js +171 -0
- package/uform/panel/Propreties/Component/LinkSyncFunction.d.ts +8 -0
- package/uform/panel/Propreties/Component/LinkSyncFunction.js +149 -0
- package/uform/panel/Propreties/Component/Links.d.ts +3 -0
- package/uform/panel/Propreties/Component/Links.js +114 -0
- package/uform/panel/Propreties/Component/OptionTable.d.ts +3 -0
- package/uform/panel/Propreties/Component/OptionTable.js +144 -0
- package/uform/panel/Propreties/Component/RegexpModal.d.ts +5 -0
- package/uform/panel/Propreties/Component/RegexpModal.js +74 -0
- package/uform/panel/Propreties/Component/Validate.d.ts +3 -0
- package/uform/panel/Propreties/Component/Validate.js +93 -0
- package/uform/panel/Propreties/Component/ValidateAsyncFunction.d.ts +3 -0
- package/uform/panel/Propreties/Component/ValidateAsyncFunction.js +83 -0
- package/uform/panel/Propreties/Component/ValidateSyncFunction.d.ts +3 -0
- package/uform/panel/Propreties/Component/ValidateSyncFunction.js +77 -0
- package/uform/panel/Propreties/FieldOptions.d.ts +6 -0
- package/uform/panel/Propreties/FieldOptions.js +131 -0
- package/uform/panel/Propreties/FieldProperties.d.ts +3 -0
- package/uform/panel/Propreties/FieldProperties.js +60 -0
- package/uform/panel/Propreties/GroupProperties.d.ts +3 -0
- package/uform/panel/Propreties/GroupProperties.js +17 -0
- package/uform/panel/Propreties/_ItemAdvance.d.ts +4 -0
- package/uform/panel/Propreties/_ItemAdvance.js +140 -0
- package/uform/panel/Propreties/_ItemBase.d.ts +4 -0
- package/uform/panel/Propreties/_ItemBase.js +34 -0
- package/uform/panel/Propreties/_ItemLink.d.ts +4 -0
- package/uform/panel/Propreties/_ItemLink.js +15 -0
- package/uform/panel/Propreties/_ItemValidate.d.ts +4 -0
- package/uform/panel/Propreties/_ItemValidate.js +67 -0
- package/uform/panel/Propreties/_util.d.ts +9 -0
- package/uform/panel/Propreties/_util.js +2 -0
- package/uform/plugins/index.d.ts +15 -0
- package/uform/plugins/index.js +47 -0
- package/uform/schema.d.ts +155 -0
- package/uform/schema.js +2 -0
- package/uform/utils/Const.d.ts +20 -0
- package/uform/utils/Const.js +24 -0
- package/uform/utils/Convert.d.ts +3 -0
- package/uform/utils/Convert.js +274 -0
- package/uform/utils/SchemaConvert.d.ts +6 -0
- package/uform/utils/SchemaConvert.js +169 -0
- package/uform/utils/arr.d.ts +12 -0
- package/uform/utils/arr.js +175 -0
package/components/Box/Box.js
CHANGED
|
@@ -96,6 +96,11 @@ exports.Box = (0, react_1.forwardRef)((props, ref) => {
|
|
|
96
96
|
style.height = '100%';
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
+
(0, react_1.useEffect)(() => {
|
|
100
|
+
if (state && state.height && contextRef && contextRef.current) {
|
|
101
|
+
contextRef.current.style.height = (state.height + 'px');
|
|
102
|
+
}
|
|
103
|
+
}, [state === null || state === void 0 ? void 0 : state.height]);
|
|
99
104
|
const resize = () => {
|
|
100
105
|
if (props.mode == undefined || props.mode == 'common' || app == null) {
|
|
101
106
|
if (state === null)
|
|
@@ -137,11 +137,13 @@ const _VTable = (0, react_1.forwardRef)((props, ref) => {
|
|
|
137
137
|
// if (props.mode == undefined || props.mode == 'common') return;
|
|
138
138
|
// let height = state?.height;
|
|
139
139
|
// if (!height) return;
|
|
140
|
-
//
|
|
141
|
-
//
|
|
142
|
-
//
|
|
143
|
-
//
|
|
144
|
-
//
|
|
140
|
+
// // VAP1.5 scroll table bug
|
|
141
|
+
// root.current.style.height = height + 'px';
|
|
142
|
+
// // setTimeout(() => {
|
|
143
|
+
// // height -= getHeightByTagName(root.current, 'thead');
|
|
144
|
+
// // setScroll({ y: Math.ceil(height), x: true })
|
|
145
|
+
// // }, 2);
|
|
146
|
+
// }, [state?.height]);
|
|
145
147
|
// @ts-ignore
|
|
146
148
|
const effectKey = props.model.effect;
|
|
147
149
|
(0, react_1.useEffect)(() => {
|
|
@@ -40,8 +40,6 @@ const react_1 = __importStar(require("react"));
|
|
|
40
40
|
const lodash_1 = __importDefault(require("lodash"));
|
|
41
41
|
const utils_1 = require("../../utils");
|
|
42
42
|
const antd_1 = require("antd");
|
|
43
|
-
const Row_1 = require("../_adapt/Row");
|
|
44
|
-
const Col_1 = require("../_adapt/Col");
|
|
45
43
|
const Popconfirm_1 = require("../_adapt/Popconfirm");
|
|
46
44
|
const Popover_1 = require("../_adapt/Popover");
|
|
47
45
|
const Button_1 = require("../_adapt/Button");
|
|
@@ -220,7 +218,7 @@ const renderFormField = (state, field, form, update, data) => {
|
|
|
220
218
|
itemProps.wrapperCol = { span: 24 - label };
|
|
221
219
|
}
|
|
222
220
|
}
|
|
223
|
-
return react_1.default.createElement(
|
|
221
|
+
return react_1.default.createElement(antd_1.Col, Object.assign({}, colProps),
|
|
224
222
|
react_1.default.createElement(antd_1.Form.Item, Object.assign({}, itemProps), form.getFieldDecorator(field.field, options)(react_1.default.createElement(input.component, {
|
|
225
223
|
form,
|
|
226
224
|
field,
|
|
@@ -239,10 +237,10 @@ const renderFormActions = (state, buttons, form, initRef) => {
|
|
|
239
237
|
if (btns.length == 0)
|
|
240
238
|
return utils_1.Const.NONE;
|
|
241
239
|
var labelWidth = (state.labelSpan / 24) * (1 / state.cols) * 100;
|
|
242
|
-
return react_1.default.createElement(
|
|
243
|
-
react_1.default.createElement(
|
|
244
|
-
react_1.default.createElement(
|
|
245
|
-
react_1.default.createElement(
|
|
240
|
+
return react_1.default.createElement(antd_1.Col, { span: 24, className: 'c-form-buttons' },
|
|
241
|
+
react_1.default.createElement(antd_1.Row, null,
|
|
242
|
+
react_1.default.createElement(antd_1.Col, { style: { width: utils_1.Format.formatPercent(labelWidth) } }),
|
|
243
|
+
react_1.default.createElement(antd_1.Col, { style: { width: utils_1.Format.formatPercent(99 - labelWidth) }, className: 'c-form-actions' }, btns.map(btn => {
|
|
246
244
|
if (btn.roleCode && !utils_1.PageUtil.hasRole(btn.roleCode))
|
|
247
245
|
return utils_1.Const.NONE;
|
|
248
246
|
let onClick;
|
|
@@ -394,7 +392,7 @@ const _FormGroup = (props) => {
|
|
|
394
392
|
if (group == null || group === false)
|
|
395
393
|
return utils_1.Const.NONE;
|
|
396
394
|
return react_1.default.createElement(react_1.default.Fragment, null,
|
|
397
|
-
react_1.default.createElement(
|
|
395
|
+
react_1.default.createElement(antd_1.Col, { span: 24, className: "c-form-group-title" }, utils_1.i18n.getText(group.ik, group.title)),
|
|
398
396
|
group.fields.map(field => {
|
|
399
397
|
if (field == null || field === false)
|
|
400
398
|
return utils_1.Const.NONE;
|
package/components/_adapt/Col.js
CHANGED
|
@@ -40,7 +40,9 @@ const Col = (props) => {
|
|
|
40
40
|
if (props.className) {
|
|
41
41
|
clazz.push(props.className);
|
|
42
42
|
}
|
|
43
|
-
if (lodash_1.default.has(props, 'span') || lodash_1.default.has(props, 'width') || lodash_1.default.has(props, 'height')
|
|
43
|
+
if (lodash_1.default.has(props, 'span') || lodash_1.default.has(props, 'width') || lodash_1.default.has(props, 'height')
|
|
44
|
+
|| lodash_1.default.has(props, 'sm') || lodash_1.default.has(props, 'md') || lodash_1.default.has(props, 'lg')
|
|
45
|
+
|| (lodash_1.default.has(props, 'style') && (lodash_1.default.has(props.style, 'width') || lodash_1.default.has(props.style, 'height')))) {
|
|
44
46
|
clazz.push('v-col-fix');
|
|
45
47
|
}
|
|
46
48
|
else {
|
package/components/_adapt/Row.js
CHANGED
|
@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
|
|
|
8
8
|
const antd_1 = require("antd");
|
|
9
9
|
const Global_1 = require("../../utils/Global");
|
|
10
10
|
const Row = (props) => {
|
|
11
|
-
let clazz = ['v-row'];
|
|
11
|
+
let clazz = ['ant-row', 'v-row'];
|
|
12
12
|
if (props.className)
|
|
13
13
|
clazz.push(props.className);
|
|
14
14
|
if (props.wrap)
|
package/index.d.ts
CHANGED
|
@@ -132,7 +132,7 @@ export { VTable, ApiTable, ApiTableModal, STable, TopTable, TopTableModal } from
|
|
|
132
132
|
export { STree, DTree, FTree } from './components/Trees';
|
|
133
133
|
export { UploadFile, UploadImage, UploadModal } from './components/Upload';
|
|
134
134
|
export { SList } from './components/Lists/SList';
|
|
135
|
-
export type { UFromProps, UModalProps, UFormField, UFormFieldGroup, LinkResult, UDescriptionsProps, UFormRef } from './components/UForm';
|
|
135
|
+
export type { UFromProps, UModalProps, UFormField, UFormFieldGroup, LinkResult, UDescriptionsProps, UFormRef, Link, LinkValue } from './components/UForm';
|
|
136
136
|
export type { TableColumn } from './components/Tables/index';
|
|
137
137
|
export type { VTableProps, VTableRef } from './components/Tables/VTable';
|
|
138
138
|
export type { ApiTableProps } from './components/Tables/ApiTable';
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"vap1","version":"0.1.
|
|
1
|
+
{"name":"vap1","version":"0.1.5","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { FormSchema } from './schema';
|
|
3
|
+
/**
|
|
4
|
+
* TODO
|
|
5
|
+
* 1. input-with-select
|
|
6
|
+
* select 宽度
|
|
7
|
+
* select 位置
|
|
8
|
+
* 2. fieldCount>2 默认值
|
|
9
|
+
* 3. 默认显示/disable
|
|
10
|
+
* 4. tree-select
|
|
11
|
+
* 5. dtree-select
|
|
12
|
+
* 6. 所有日期:日期格式设置
|
|
13
|
+
* */
|
|
14
|
+
type FormEditorProps = {
|
|
15
|
+
data?: string | FormSchema;
|
|
16
|
+
name?: string;
|
|
17
|
+
onSave: (schema: string, isCtrlS?: boolean) => void;
|
|
18
|
+
onBack?: () => void;
|
|
19
|
+
};
|
|
20
|
+
export declare const FormEditor: React.FC<FormEditorProps>;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.FormEditor = void 0;
|
|
30
|
+
const react_1 = __importStar(require("react"));
|
|
31
|
+
const lodash_1 = __importDefault(require("lodash"));
|
|
32
|
+
const index_1 = require("../index");
|
|
33
|
+
const index_2 = __importDefault(require("./panel/Items/index"));
|
|
34
|
+
const index_3 = __importDefault(require("./panel/Editor/index"));
|
|
35
|
+
const useForm_1 = require("./hooks/useForm");
|
|
36
|
+
const FormViewer_1 = require("./FormViewer");
|
|
37
|
+
const CanvasProperties_1 = __importDefault(require("./panel/Propreties/CanvasProperties"));
|
|
38
|
+
const FieldProperties_1 = __importDefault(require("./panel/Propreties/FieldProperties"));
|
|
39
|
+
const GroupProperties_1 = __importDefault(require("./panel/Propreties/GroupProperties"));
|
|
40
|
+
const useEditor_1 = require("./hooks/useEditor");
|
|
41
|
+
const FormViewer_2 = require("./FormViewer");
|
|
42
|
+
const FormEditor = (props) => {
|
|
43
|
+
const schema = (0, react_1.useMemo)(() => (0, FormViewer_2.initSchama)(props.data), [props.data]);
|
|
44
|
+
const editor = (0, useEditor_1.useFormEditor)(schema);
|
|
45
|
+
const [open, setOpen] = (0, react_1.useState)(false);
|
|
46
|
+
const save = (isCtrlS = false) => {
|
|
47
|
+
props.onSave(JSON.stringify(editor.getForm()), isCtrlS);
|
|
48
|
+
};
|
|
49
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
50
|
+
const onKeyDown = (evt) => {
|
|
51
|
+
if (evt.ctrlKey && (evt.key == 's' || evt.key == 'S')) {
|
|
52
|
+
evt.preventDefault();
|
|
53
|
+
evt.stopPropagation();
|
|
54
|
+
save(true);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
document.addEventListener('keydown', onKeyDown, false);
|
|
58
|
+
return () => document.removeEventListener('keydown', onKeyDown);
|
|
59
|
+
}, []);
|
|
60
|
+
return react_1.default.createElement(useForm_1.UFORM.Provider, { value: editor.form },
|
|
61
|
+
react_1.default.createElement(useEditor_1.FORM_EDITOR.Provider, { value: editor },
|
|
62
|
+
react_1.default.createElement(index_1.Row, { className: 'uform-editor' },
|
|
63
|
+
react_1.default.createElement(index_1.Col, { style: { width: 210, flexShrink: 0 } },
|
|
64
|
+
react_1.default.createElement(index_2.default, null)),
|
|
65
|
+
react_1.default.createElement(index_1.Col, { style: { flexGrow: 1 } },
|
|
66
|
+
react_1.default.createElement("div", { className: 'panel-title' },
|
|
67
|
+
"\u8868\u5355 ",
|
|
68
|
+
props.name && react_1.default.createElement("small", null,
|
|
69
|
+
react_1.default.createElement("b", null, props.name)),
|
|
70
|
+
react_1.default.createElement(index_1.Button.Group, { style: { float: 'right', marginRight: 6, display: 'block' } },
|
|
71
|
+
editor.form.isGroup && react_1.default.createElement(index_1.Button, { icon: "plus", onClick: () => editor.addGroup() }, "\u6DFB\u52A0\u5206\u7EC4"),
|
|
72
|
+
react_1.default.createElement(index_1.Button, { icon: 'eye', type: "primary", onClick: () => {
|
|
73
|
+
if (schema.fields && schema.fields.length > 1) {
|
|
74
|
+
setOpen(true);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
index_1.message.error('至少添加一个字段');
|
|
78
|
+
}
|
|
79
|
+
} }, "\u9884\u89C8"))),
|
|
80
|
+
react_1.default.createElement(index_3.default, null)),
|
|
81
|
+
react_1.default.createElement(index_1.Col, { style: { width: 320, flexShrink: 0 }, className: "uform-prperties" },
|
|
82
|
+
react_1.default.createElement("div", { className: 'panel-title' },
|
|
83
|
+
"\u5C5E\u6027",
|
|
84
|
+
react_1.default.createElement(index_1.Button.Group, { style: { float: 'right', marginRight: 6, display: 'block' } },
|
|
85
|
+
lodash_1.default.isFunction(props.onBack) && react_1.default.createElement(index_1.Button, { icon: 'rollback', onClick: () => props.onBack() }, "\u8FD4\u56DE"),
|
|
86
|
+
react_1.default.createElement(index_1.Button, { onClick: () => save(), icon: 'save', type: 'primary' }, "\u4FDD\u5B58"))),
|
|
87
|
+
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))))),
|
|
88
|
+
react_1.default.createElement(FormViewer_1.FormModal, { title: editor.form.title || '表单预览', schema: editor.form, open: open, onOk: (data) => {
|
|
89
|
+
setOpen(false);
|
|
90
|
+
index_1.notification.info({
|
|
91
|
+
role: 'alert',
|
|
92
|
+
style: { padding: 0 },
|
|
93
|
+
icon: react_1.default.createElement(react_1.default.Fragment, null),
|
|
94
|
+
placement: 'top',
|
|
95
|
+
message: react_1.default.createElement(react_1.default.Fragment, null,
|
|
96
|
+
react_1.default.createElement("h4", null, "JSON \u9884\u89C8"),
|
|
97
|
+
react_1.default.createElement("pre", null, JSON.stringify(data, null, 1)))
|
|
98
|
+
});
|
|
99
|
+
}, onCancel: () => setOpen(false) })));
|
|
100
|
+
};
|
|
101
|
+
exports.FormEditor = FormEditor;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { FormSchema } from './schema';
|
|
3
|
+
import type { UModalProps, PlainObject } from '../index';
|
|
4
|
+
type ModalProps = Pick<UModalProps, 'open' | 'onOk' | 'onCancel' | 'title' | 'data'>;
|
|
5
|
+
type FormViewProps = {
|
|
6
|
+
schema: FormSchema | string;
|
|
7
|
+
data?: PlainObject;
|
|
8
|
+
};
|
|
9
|
+
export declare const initSchama: (data: string | FormSchema) => FormSchema;
|
|
10
|
+
export declare const FormViewer: React.FC<FormViewProps>;
|
|
11
|
+
export declare const FormModal: React.FC<FormViewProps & ModalProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.FormModal = exports.FormViewer = exports.initSchama = void 0;
|
|
30
|
+
const lodash_1 = __importDefault(require("lodash"));
|
|
31
|
+
const react_1 = __importStar(require("react"));
|
|
32
|
+
const index_1 = require("../index");
|
|
33
|
+
const Convert_1 = require("./utils/Convert");
|
|
34
|
+
const DEFAULT = { fields: [] };
|
|
35
|
+
const initSchama = (data) => {
|
|
36
|
+
if (lodash_1.default.isString(data)) {
|
|
37
|
+
try {
|
|
38
|
+
const schema = JSON.parse(data);
|
|
39
|
+
if (lodash_1.default.isPlainObject(schema) && lodash_1.default.isArray(schema.fields)) {
|
|
40
|
+
return schema;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
catch (_a) {
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
else if (lodash_1.default.isPlainObject(data) && lodash_1.default.isArray(data.fields)) {
|
|
47
|
+
return data;
|
|
48
|
+
}
|
|
49
|
+
return DEFAULT;
|
|
50
|
+
};
|
|
51
|
+
exports.initSchama = initSchama;
|
|
52
|
+
const _FormRender = props => {
|
|
53
|
+
const uformProps = (0, react_1.useMemo)(() => (0, Convert_1.schemaToForm)(props.schema), [props]);
|
|
54
|
+
return react_1.default.createElement(index_1.UForm, Object.assign({}, uformProps, { data: props.data }));
|
|
55
|
+
};
|
|
56
|
+
const _ModalRender = props => {
|
|
57
|
+
const uformProps = (0, react_1.useMemo)(() => (0, Convert_1.schemaToForm)(props.schema), [props]);
|
|
58
|
+
let modalProps = {};
|
|
59
|
+
modalProps.title = props.title || props.schema.title || '';
|
|
60
|
+
return react_1.default.createElement(index_1.UFormModal, Object.assign({}, uformProps, modalProps, { data: props.data, open: props.open, onOk: props.onOk, onCancel: props.onCancel }));
|
|
61
|
+
};
|
|
62
|
+
const FormViewer = props => {
|
|
63
|
+
const schema = (0, react_1.useMemo)(() => (0, exports.initSchama)(props.schema), [props.schema]);
|
|
64
|
+
return react_1.default.createElement(_FormRender, { schema: schema, data: props.data });
|
|
65
|
+
};
|
|
66
|
+
exports.FormViewer = FormViewer;
|
|
67
|
+
const FormModal = props => {
|
|
68
|
+
const schema = (0, react_1.useMemo)(() => (0, exports.initSchama)(props.schema), [props.schema]);
|
|
69
|
+
return react_1.default.createElement(_ModalRender, Object.assign({}, props, { schema: schema }));
|
|
70
|
+
};
|
|
71
|
+
exports.FormModal = FormModal;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { FormGroup, FormItem, FormSchema, Cursor } from '../schema';
|
|
3
|
+
type CurrentSelected = {
|
|
4
|
+
group?: string;
|
|
5
|
+
field?: string;
|
|
6
|
+
};
|
|
7
|
+
type FormEditorContext = {
|
|
8
|
+
form: FormSchema;
|
|
9
|
+
selected: CurrentSelected;
|
|
10
|
+
baseSpan: number;
|
|
11
|
+
getForm: () => FormSchema;
|
|
12
|
+
setSelected: (selected: {
|
|
13
|
+
field?: string;
|
|
14
|
+
group?: string;
|
|
15
|
+
}) => void;
|
|
16
|
+
deleteField: (groupId?: string) => void;
|
|
17
|
+
addGroup: () => void;
|
|
18
|
+
deleteGroup: (groupId: string) => void;
|
|
19
|
+
getSelect: () => FormItem | FormGroup;
|
|
20
|
+
sortField: (itemId: string, targetPos: any, groupId?: string) => void;
|
|
21
|
+
addField: (type: string, pointer?: Cursor, groupId?: string) => void;
|
|
22
|
+
setFormProperties: (param: Partial<FormSchema>) => void;
|
|
23
|
+
setFieldProperties: (properties: string, value: any) => void;
|
|
24
|
+
};
|
|
25
|
+
export declare const FORM_EDITOR: import("react").Context<FormEditorContext>;
|
|
26
|
+
export declare const useEditor: () => FormEditorContext;
|
|
27
|
+
export declare const useFormEditor: (dataJson: FormSchema) => FormEditorContext;
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useFormEditor = exports.useEditor = exports.FORM_EDITOR = void 0;
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const hooks_1 = require("../../hooks");
|
|
9
|
+
const utils_1 = require("../../utils");
|
|
10
|
+
const lodash_1 = __importDefault(require("lodash"));
|
|
11
|
+
const arr_1 = require("../utils/arr");
|
|
12
|
+
exports.FORM_EDITOR = (0, react_1.createContext)(null);
|
|
13
|
+
const useEditor = () => (0, react_1.useContext)(exports.FORM_EDITOR);
|
|
14
|
+
exports.useEditor = useEditor;
|
|
15
|
+
const BASESPAN_MAP = new Map([['simple', 24], ['compress', 8], ['common', 12]]);
|
|
16
|
+
const useFormEditor = (dataJson) => {
|
|
17
|
+
const [form, setForm] = (0, hooks_1.useSetState)(dataJson);
|
|
18
|
+
const FORM_REF = (0, react_1.useRef)(form);
|
|
19
|
+
const { layout, isGroup, fields } = form;
|
|
20
|
+
(0, react_1.useLayoutEffect)(() => { FORM_REF.current = form; }, [form]);
|
|
21
|
+
const [selected, setSelected] = (0, react_1.useState)(null);
|
|
22
|
+
const setFields = (fields) => setForm({ fields });
|
|
23
|
+
const baseSpan = (0, react_1.useMemo)(() => {
|
|
24
|
+
if (layout && BASESPAN_MAP.has(layout))
|
|
25
|
+
return BASESPAN_MAP.get(layout);
|
|
26
|
+
if (!isGroup)
|
|
27
|
+
return fields.length >= 8 ? 12 : 24;
|
|
28
|
+
let len = lodash_1.default.sum(fields.map(group => group.fields.length));
|
|
29
|
+
return len >= 8 ? 12 : 24;
|
|
30
|
+
}, [isGroup, layout, fields === null || fields === void 0 ? void 0 : fields.length]);
|
|
31
|
+
// 添加字段
|
|
32
|
+
const addField = (type, temPosition, groupId) => {
|
|
33
|
+
if (groupId) {
|
|
34
|
+
setFields((0, arr_1.insertInGroup)(type, fields, groupId, temPosition));
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
setFields((0, arr_1.insertInList)(type, fields, temPosition));
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
// 删除字段
|
|
41
|
+
const deleteField = () => {
|
|
42
|
+
if (selected == null || selected.field == undefined) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
if (!isGroup) {
|
|
46
|
+
setSelected(null);
|
|
47
|
+
setFields(lodash_1.default.filter(fields, item => item.id != selected.field));
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
let list = fields;
|
|
51
|
+
let gdx = lodash_1.default.findIndex(list, { id: selected.group });
|
|
52
|
+
if (gdx < 0) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
let idx = lodash_1.default.findIndex(list[gdx].fields, { id: selected.field });
|
|
56
|
+
if (idx < 0) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
setSelected(null);
|
|
60
|
+
let group = Object.assign(Object.assign({}, list[gdx]), { fields: lodash_1.default.filter(list[gdx].fields, (f => f.id != selected.field)) });
|
|
61
|
+
setFields([...lodash_1.default.slice(list, 0, gdx), group, ...lodash_1.default.slice(list, gdx + 1)]);
|
|
62
|
+
};
|
|
63
|
+
// 删除分组
|
|
64
|
+
const deleteGroup = (groupId) => {
|
|
65
|
+
setSelected(null);
|
|
66
|
+
setFields(lodash_1.default.filter(fields, item => item.id != groupId));
|
|
67
|
+
};
|
|
68
|
+
// 字段/分组 排序
|
|
69
|
+
const sortField = (itemId, targetPos, groupId) => {
|
|
70
|
+
if (groupId) {
|
|
71
|
+
setFields((0, arr_1.sortListInGroup)(itemId, fields, groupId, targetPos));
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
setFields((0, arr_1.sortList)(itemId, fields, targetPos));
|
|
75
|
+
}
|
|
76
|
+
setSelected(null);
|
|
77
|
+
};
|
|
78
|
+
// 获取当前选中项
|
|
79
|
+
const getSelect = () => {
|
|
80
|
+
if (selected == null) {
|
|
81
|
+
return null;
|
|
82
|
+
}
|
|
83
|
+
if (isGroup) {
|
|
84
|
+
let group = lodash_1.default.find(fields, { id: selected.group });
|
|
85
|
+
if (group) {
|
|
86
|
+
if (selected.field) {
|
|
87
|
+
let p = lodash_1.default.find(group.fields, { id: selected.field });
|
|
88
|
+
if (p) {
|
|
89
|
+
return p;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
return group;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
let p = lodash_1.default.find(fields, { id: selected.field });
|
|
99
|
+
if (p) {
|
|
100
|
+
return p;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
return null;
|
|
104
|
+
};
|
|
105
|
+
// // 设置表单属性
|
|
106
|
+
// const setFormProperties = (key: string, value: any) => {
|
|
107
|
+
// setForm({ [key]: value })
|
|
108
|
+
// }
|
|
109
|
+
// 设置字段/分组属性
|
|
110
|
+
const setFieldProperties = (property, value) => {
|
|
111
|
+
if (selected == null) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
if (isGroup && selected.field) {
|
|
115
|
+
setFields((0, arr_1.setPropertiesInGroup)(fields, selected.group, selected.field, property, value));
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
setFields((0, arr_1.setProperties)(fields, selected.field || selected.group, property, value));
|
|
119
|
+
};
|
|
120
|
+
// 添加分组
|
|
121
|
+
const addGroup = () => {
|
|
122
|
+
if (!form.isGroup)
|
|
123
|
+
return;
|
|
124
|
+
let id = utils_1.StringUtil.genKey();
|
|
125
|
+
setFields([...fields, { title: '新分组 ' + id, id, fields: [] }]);
|
|
126
|
+
};
|
|
127
|
+
// const getForm = useCallback(()=>{})
|
|
128
|
+
return {
|
|
129
|
+
form,
|
|
130
|
+
selected,
|
|
131
|
+
baseSpan,
|
|
132
|
+
getForm: () => FORM_REF.current,
|
|
133
|
+
setSelected,
|
|
134
|
+
deleteField,
|
|
135
|
+
deleteGroup,
|
|
136
|
+
getSelect,
|
|
137
|
+
sortField,
|
|
138
|
+
addGroup,
|
|
139
|
+
addField,
|
|
140
|
+
setFormProperties: setForm,
|
|
141
|
+
setFieldProperties,
|
|
142
|
+
};
|
|
143
|
+
};
|
|
144
|
+
exports.useFormEditor = useFormEditor;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useForm = exports.UFORM = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
exports.UFORM = (0, react_1.createContext)({ fields: [] });
|
|
6
|
+
const useForm = () => (0, react_1.useContext)(exports.UFORM);
|
|
7
|
+
exports.useForm = useForm;
|
package/uform/index.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { FormEditor } from './FormEditor';
|
|
2
|
+
export { FormViewer, FormModal } from './FormViewer';
|
|
3
|
+
export { registerEditorPlugin, registerFieldPlugin, registerGroupPlugin } from './plugins';
|
|
4
|
+
import { registerCustom } from './inputs/register';
|
|
5
|
+
export { registerCustom };
|
package/uform/index.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.registerCustom = exports.registerGroupPlugin = exports.registerFieldPlugin = exports.registerEditorPlugin = exports.FormModal = exports.FormViewer = exports.FormEditor = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const index_1 = require("../index");
|
|
9
|
+
const lodash_1 = __importDefault(require("lodash"));
|
|
10
|
+
var FormEditor_1 = require("./FormEditor");
|
|
11
|
+
Object.defineProperty(exports, "FormEditor", { enumerable: true, get: function () { return FormEditor_1.FormEditor; } });
|
|
12
|
+
var FormViewer_1 = require("./FormViewer");
|
|
13
|
+
Object.defineProperty(exports, "FormViewer", { enumerable: true, get: function () { return FormViewer_1.FormViewer; } });
|
|
14
|
+
Object.defineProperty(exports, "FormModal", { enumerable: true, get: function () { return FormViewer_1.FormModal; } });
|
|
15
|
+
var plugins_1 = require("./plugins");
|
|
16
|
+
Object.defineProperty(exports, "registerEditorPlugin", { enumerable: true, get: function () { return plugins_1.registerEditorPlugin; } });
|
|
17
|
+
Object.defineProperty(exports, "registerFieldPlugin", { enumerable: true, get: function () { return plugins_1.registerFieldPlugin; } });
|
|
18
|
+
Object.defineProperty(exports, "registerGroupPlugin", { enumerable: true, get: function () { return plugins_1.registerGroupPlugin; } });
|
|
19
|
+
const register_1 = require("./inputs/register");
|
|
20
|
+
Object.defineProperty(exports, "registerCustom", { enumerable: true, get: function () { return register_1.registerCustom; } });
|
|
21
|
+
const picOptions = lodash_1.default.range(1, 17).map((key) => ({ label: key, value: `/data/images/dashboard/${key}.png` }));
|
|
22
|
+
(0, register_1.registerCustom)({
|
|
23
|
+
type: 'dashboard-cover',
|
|
24
|
+
title: '快速图片选择',
|
|
25
|
+
icon: 'text.png',
|
|
26
|
+
Component: () => {
|
|
27
|
+
const width = 144, height = 81;
|
|
28
|
+
return react_1.default.createElement("div", null,
|
|
29
|
+
react_1.default.createElement(index_1.Upload, { name: "file", withCredentials: true, listType: "picture", showUploadList: false, onChange: () => { }, accept: "image/*", className: 'upload-icon-empty', data: { namespace: 'app-data', } }, react_1.default.createElement("div", { style: { width, height, marginRight: 6, textAlign: 'center', paddingTop: 12, cursor: 'pointer', borderRadius: 4, marginBottom: 6, border: '1px solid rgb(24 144 255 / 24%)' } },
|
|
30
|
+
react_1.default.createElement(index_1.Icon, { type: 'plus' }),
|
|
31
|
+
react_1.default.createElement("div", { className: "ant-upload-text" }, "\u4E0A\u4F20"))),
|
|
32
|
+
react_1.default.createElement(index_1.Row, { style: { height: 140, width: 436, overflowX: 'hidden', overflowY: 'auto', flexWrap: 'wrap' }, gutter: 8 }, picOptions.map((img) => react_1.default.createElement(index_1.Col, { span: 6, style: { height: 64, marginBottom: 6, cursor: 'pointer' } },
|
|
33
|
+
react_1.default.createElement("img", { style: { height: '100%', width: '100%', borderWidth: 1, borderStyle: 'solid', borderRadius: 6, borderColor: 'transparent' }, src: img.value })))));
|
|
34
|
+
}
|
|
35
|
+
});
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.FROM_ADVANCE = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const index_1 = require("../../index");
|
|
9
|
+
const defaultPlaceholder = '请上传';
|
|
10
|
+
const style = { pointerEvents: 'none' };
|
|
11
|
+
// 内置输入
|
|
12
|
+
exports.FROM_ADVANCE = [
|
|
13
|
+
{
|
|
14
|
+
type: 'file',
|
|
15
|
+
title: '上传文件',
|
|
16
|
+
icon: 'text.png',
|
|
17
|
+
defaultPlaceholder,
|
|
18
|
+
fieldCount: 2,
|
|
19
|
+
Component: props => react_1.default.createElement(index_1.Button, { style: style, icon: "upload" }, props.placeholder || '上传文件')
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
type: 'img',
|
|
23
|
+
title: '上传图片',
|
|
24
|
+
icon: 'text.png',
|
|
25
|
+
defaultPlaceholder,
|
|
26
|
+
Component: props => react_1.default.createElement(index_1.UploadImage, { onChange: () => { } })
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
type: 'organization',
|
|
30
|
+
title: '机构选择',
|
|
31
|
+
icon: 'text.png',
|
|
32
|
+
fieldCount: 4,
|
|
33
|
+
defaultPlaceholder: "请选择",
|
|
34
|
+
Component: props => react_1.default.createElement(index_1.Button, { style: style, icon: "upload" }, props.placeholder || '请选择机构')
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
type: 'role',
|
|
38
|
+
title: '角色选择',
|
|
39
|
+
icon: 'text.png',
|
|
40
|
+
defaultPlaceholder: "请选择",
|
|
41
|
+
Component: props => react_1.default.createElement(index_1.Select, { style: style, placeholder: props.placeholder || '请选择角色' })
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
type: 'roles',
|
|
45
|
+
title: '角色多选',
|
|
46
|
+
icon: 'text.png',
|
|
47
|
+
defaultPlaceholder: "请选择",
|
|
48
|
+
Component: props => react_1.default.createElement(index_1.Select, { style: style, placeholder: props.placeholder || '请选择角色' })
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
type: 'json-array',
|
|
52
|
+
title: '列表',
|
|
53
|
+
icon: 'text.png',
|
|
54
|
+
defaultPlaceholder: "请选择",
|
|
55
|
+
Component: props => react_1.default.createElement(index_1.Table, { style: style, locale: { emptyText: react_1.default.createElement(index_1.Empty, { description: "\u4EC5\u4E3A\u9884\u89C8\u6548\u679C\uFF0C\u8868\u683C\u914D\u7F6E\u6B63\u5728\u652F\u6301\u4E2D" }) } })
|
|
56
|
+
}
|
|
57
|
+
];
|