@sunspirytus/xflow-extension 1.0.52

package/lib/canvas-json-schema-form/schema-form/control-map/select/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var antd_1 = require("antd");
+var form_item_wrapper_1 = require("../../common/form-item-wrapper");
+var tooltip_1 = require("../../common/tooltip");
+var Select = function (props) {
+    var controlSchema = props.controlSchema;
+    var required = controlSchema.required, tooltip = controlSchema.tooltip, extra = controlSchema.extra, name = controlSchema.name, label = controlSchema.label, placeholder = controlSchema.placeholder, _a = controlSchema.options, options = _a === void 0 ? [] : _a, rules = controlSchema.rules;
+    return (react_1.default.createElement(form_item_wrapper_1.FormItemWrapper, { schema: controlSchema }, function (_a) {
+        var hidden = _a.hidden, disabled = _a.disabled, initialValue = _a.initialValue;
+        return (react_1.default.createElement(antd_1.Form.Item, { name: name, label: label, initialValue: initialValue, tooltip: tooltip, extra: (0, tooltip_1.renderFormItemExtra)(extra), required: required, hidden: hidden, rules: rules },
+            react_1.default.createElement(antd_1.Select, { disabled: disabled, placeholder: placeholder, options: options.map(function (option) { return ({
+                    label: option.title,
+                    value: option.value
+                }); }) })));
+    }));
+};
+exports.Select = Select;
+//# sourceMappingURL=index.js.map

package/lib/canvas-json-schema-form/schema-form/control-map/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/canvas-json-schema-form/schema-form/control-map/select/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,6BAA8C;AAE9C,oEAAgE;AAChE,gDAA0D;AAMnD,IAAM,MAAM,GAAoB,UAAA,KAAK;IAClC,IAAA,aAAa,GAAK,KAAK,cAAV,CAAU;IACvB,IAAA,QAAQ,GAAoE,aAAa,SAAjF,EAAE,OAAO,GAA2D,aAAa,QAAxE,EAAE,KAAK,GAAoD,aAAa,MAAjE,EAAE,IAAI,GAA8C,aAAa,KAA3D,EAAE,KAAK,GAAuC,aAAa,MAApD,EAAE,WAAW,GAA0B,aAAa,YAAvC,EAAE,KAAwB,aAAa,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAK,GAAK,aAAa,MAAlB,CAAkB;IAEjG,OAAO,CACL,8BAAC,mCAAe,IAAC,MAAM,EAAE,aAAa,IACnC,UAAC,EAAkC;YAAhC,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAAA;QAChC,OAAO,CACL,8BAAC,WAAI,CAAC,IAAI,IACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAA,6BAAmB,EAAC,KAAK,CAAC,EACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK;YAEZ,8BAAC,aAAO,IACN,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,UAAA,MAAM,IAAI,OAAA,CAAC;oBAC9B,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAC,EAH6B,CAG7B,CAAC,GACH,CACQ,CACb,CAAA;IACH,CAAC,CACe,CACnB,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,MAAM,UA+BlB"}

package/lib/canvas-json-schema-form/schema-form/control-map/string-input/index.css

@@ -0,0 +1,7 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.xflow-form-input :global .ant-input-clear-icon {
+  color: rgba(0, 0, 0, 0.25);
+}

package/lib/canvas-json-schema-form/schema-form/control-map/string-input/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IControlSchema } from '../../../interface';
+interface Props {
+    controlSchema: IControlSchema;
+}
+export declare const StringInput: React.FC<Props>;
+export {};

package/lib/canvas-json-schema-form/schema-form/control-map/string-input/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StringInput = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var antd_1 = require("antd");
+var tooltip_1 = require("../../common/tooltip");
+var form_item_wrapper_1 = require("../../common/form-item-wrapper");
+var StringInput = function (props) {
+    var controlSchema = props.controlSchema;
+    var required = controlSchema.required, tooltip = controlSchema.tooltip, extra = controlSchema.extra, name = controlSchema.name, label = controlSchema.label, placeholder = controlSchema.placeholder, rules = controlSchema.rules;
+    return (react_1.default.createElement(form_item_wrapper_1.FormItemWrapper, { schema: controlSchema }, function (_a) {
+        var disabled = _a.disabled, hidden = _a.hidden, initialValue = _a.initialValue;
+        return (react_1.default.createElement(antd_1.Form.Item, { name: name, label: label, initialValue: initialValue, tooltip: tooltip, extra: (0, tooltip_1.renderFormItemExtra)(extra), required: required, hidden: hidden, rules: rules },
+            react_1.default.createElement(antd_1.Input, { className: 'xflow-form-input', allowClear: true, placeholder: placeholder, disabled: disabled })));
+    }));
+};
+exports.StringInput = StringInput;
+//# sourceMappingURL=index.js.map

package/lib/canvas-json-schema-form/schema-form/control-map/string-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/canvas-json-schema-form/schema-form/control-map/string-input/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,6BAAkC;AAElC,gDAA0D;AAC1D,oEAAgE;AAMzD,IAAM,WAAW,GAAoB,UAAA,KAAK;IACvC,IAAA,aAAa,GAAK,KAAK,cAAV,CAAU;IACvB,IAAA,QAAQ,GAAsD,aAAa,SAAnE,EAAE,OAAO,GAA6C,aAAa,QAA1D,EAAE,KAAK,GAAsC,aAAa,MAAnD,EAAE,IAAI,GAAgC,aAAa,KAA7C,EAAE,KAAK,GAAyB,aAAa,MAAtC,EAAE,WAAW,GAAY,aAAa,YAAzB,EAAE,KAAK,GAAK,aAAa,MAAlB,CAAkB;IAEnF,OAAO,CACL,8BAAC,mCAAe,IAAC,MAAM,EAAE,aAAa,IACnC,UAAC,EAAkC;YAAhC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,YAAY,kBAAA;QAChC,OAAO,CACL,8BAAC,WAAI,CAAC,IAAI,IACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAA,6BAAmB,EAAC,KAAK,CAAC,EACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK;YAEZ,8BAAC,YAAK,IACJ,SAAS,EAAE,kBAAkB,EAC7B,UAAU,QACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,CACQ,CACb,CAAA;IACH,CAAC,CACe,CACnB,CAAA;AACH,CAAC,CAAA;AA7BY,QAAA,WAAW,eA6BvB"}

package/lib/canvas-json-schema-form/schema-form/control-map/string-input/index.less

@@ -0,0 +1,9 @@
+@import '~antd/es/style/themes/default.less';
+
+.xflow-form-input {
+  :global {
+    .@{ant-prefix}-input-clear-icon {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+}

package/lib/canvas-json-schema-form/schema-form/control-map/text-area/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IControlSchema } from '../../../interface';
+interface Props {
+    controlSchema: IControlSchema;
+}
+export declare const TextArea: React.FC<Props>;
+export {};

package/lib/canvas-json-schema-form/schema-form/control-map/text-area/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var antd_1 = require("antd");
+var form_item_wrapper_1 = require("../../common/form-item-wrapper");
+var tooltip_1 = require("../../common/tooltip");
+var TextArea = function (props) {
+    var controlSchema = props.controlSchema;
+    var required = controlSchema.required, tooltip = controlSchema.tooltip, extra = controlSchema.extra, name = controlSchema.name, label = controlSchema.label, placeholder = controlSchema.placeholder, rules = controlSchema.rules;
+    return (react_1.default.createElement(form_item_wrapper_1.FormItemWrapper, { schema: controlSchema }, function (_a) {
+        var hidden = _a.hidden, disabled = _a.disabled, initialValue = _a.initialValue;
+        return (react_1.default.createElement(antd_1.Form.Item, { name: name, label: label, initialValue: initialValue, tooltip: tooltip, extra: (0, tooltip_1.renderFormItemExtra)(extra), required: required, hidden: hidden, rules: rules },
+            react_1.default.createElement(antd_1.Input.TextArea, { allowClear: true, placeholder: placeholder, rows: 3, disabled: disabled })));
+    }));
+};
+exports.TextArea = TextArea;
+//# sourceMappingURL=index.js.map

package/lib/canvas-json-schema-form/schema-form/control-map/text-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/canvas-json-schema-form/schema-form/control-map/text-area/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,6BAAkC;AAElC,oEAAgE;AAChE,gDAA0D;AAMnD,IAAM,QAAQ,GAAoB,UAAA,KAAK;IACpC,IAAA,aAAa,GAAK,KAAK,cAAV,CAAU;IACvB,IAAA,QAAQ,GAAsD,aAAa,SAAnE,EAAE,OAAO,GAA6C,aAAa,QAA1D,EAAE,KAAK,GAAsC,aAAa,MAAnD,EAAE,IAAI,GAAgC,aAAa,KAA7C,EAAE,KAAK,GAAyB,aAAa,MAAtC,EAAE,WAAW,GAAY,aAAa,YAAzB,EAAE,KAAK,GAAK,aAAa,MAAlB,CAAkB;IAEnF,OAAO,CACL,8BAAC,mCAAe,IAAC,MAAM,EAAE,aAAa,IACnC,UAAC,EAAkC;YAAhC,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAAA;QAChC,OAAO,CACL,8BAAC,WAAI,CAAC,IAAI,IACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAA,6BAAmB,EAAC,KAAK,CAAC,EACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK;YAEZ,8BAAC,YAAK,CAAC,QAAQ,IAAC,UAAU,QAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1E,CACb,CAAA;IACH,CAAC,CACe,CACnB,CAAA;AACH,CAAC,CAAA;AAxBY,QAAA,QAAQ,YAwBpB"}

package/lib/canvas-json-schema-form/schema-form/index.css

@@ -0,0 +1,83 @@
+.xflow-json-form {
+  height: 100%;
+}
+.xflow-json-form label {
+  font-size: 12px;
+}
+.xflow-json-form .ant-form-item {
+  margin-bottom: 12px;
+}
+.xflow-json-form .ant-form-item .ant-form-item-label {
+  padding-bottom: 4px;
+}
+.xflow-json-form .ant-form-item .ant-form-item-label > label {
+  color: #666;
+}
+.xflow-json-form .ant-form-item .ant-form-item-control .ant-checkbox-wrapper {
+  color: #666;
+}
+.xflow-json-form .ant-form-item-explain,
+.xflow-json-form .ant-form-item-extra {
+  font-size: 12px;
+}
+.xflow-json-form .ant-form-item-explain-error > div {
+  word-break: break-all;
+}
+.xflow-json-form .ant-form-item-extra {
+  margin-top: 4px;
+}
+.xflow-json-form .tabs {
+  flex-direction: column;
+  height: 100%;
+}
+.xflow-json-form .tabs .ant-tabs-nav {
+  box-shadow: 0 0 16px -5px rgba(0, 0, 0, 0.2);
+}
+.xflow-json-form .tabs .ant-tabs-nav .ant-tabs-nav-list {
+  width: 100%;
+}
+.xflow-json-form .tabs .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab {
+  font-size: 12px;
+}
+.xflow-json-form .tabs .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab-active {
+  border-bottom-width: 0;
+}
+.xflow-json-form .tabs .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab .ant-tabs-tab-btn {
+  font-weight: normal;
+  text-align: center;
+}
+.xflow-json-form .tabs .ant-tabs-content-holder {
+  padding: 0 16px;
+  overflow-y: auto;
+}
+.xflow-json-form .tabs.xTab .ant-tabs-nav .ant-tabs-nav-list {
+  box-sizing: border-box;
+  height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #d9d9d9;
+}
+.xflow-json-form .tabs.xTab .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab {
+  background-color: #fff;
+}
+.xflow-json-form .tabs.xTab .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab .ant-tabs-tab-btn {
+  width: 100%;
+}
+.xflow-json-form .tabs.singleTab .ant-tabs-tab {
+  width: 100%;
+}
+.xflow-json-form .tabs.coupleTab .ant-tabs-tab {
+  width: 50%;
+  margin-right: 0;
+  border-right-width: 0;
+}
+.xflow-json-form .tabs.coupleTab .ant-tabs-tab:last-of-type {
+  border-right-width: 1px;
+}
+.xflow-json-form .tabs.ternateTab .ant-tabs-tab {
+  width: 33%;
+  margin-right: 0;
+  border-right-width: 0;
+}
+.xflow-json-form .tabs.ternateTab .ant-tabs-tab:last-of-type {
+  border-right-width: 1px;
+}

package/lib/canvas-json-schema-form/schema-form/index.d.ts

@@ -0,0 +1,16 @@
+import type { FormInstance, FormProps } from 'antd/es/form';
+import type { IControlMap } from './control-map/index';
+import type { IControlProps, IAfterUpdatingCallback, ISchema } from '../interface';
+export type { Props as IFromItemWrapperProps } from './common/form-item-wrapper';
+import React from 'react';
+export { FormItemWrapper } from './common/form-item-wrapper';
+interface Props extends FormProps {
+    schema: ISchema;
+    className?: string;
+    form?: FormInstance;
+    controlMap: IControlMap;
+    defaultControlRender?: React.ComponentType<IControlProps>;
+    triggerUpdate?: (form: FormInstance, values: Record<string, any>) => Promise<void>;
+    afterUpdatingCb?: IAfterUpdatingCallback;
+}
+export declare const SchemaForm: React.FC<Props>;

package/lib/canvas-json-schema-form/schema-form/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaForm = exports.FormItemWrapper = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var antd_1 = require("antd");
+var index_1 = require("./control-map/index");
+var form_item_wrapper_1 = require("./common/form-item-wrapper");
+Object.defineProperty(exports, "FormItemWrapper", { enumerable: true, get: function () { return form_item_wrapper_1.FormItemWrapper; } });
+var TabPane = antd_1.Tabs.TabPane;
+var SchemaForm = function (props) {
+    var _a;
+    var _b;
+    var schema = props.schema, formInstance = props.form, className = props.className, triggerUpdate = props.triggerUpdate, defaultControlRender = props.defaultControlRender, afterUpdatingCb = props.afterUpdatingCb, controlMapfromParent = props.controlMap, otherProps = tslib_1.__rest(props, ["schema", "form", "className", "triggerUpdate", "defaultControlRender", "afterUpdatingCb", "controlMap"]);
+    var tabs = schema.tabs;
+    var form = antd_1.Form.useForm(formInstance)[0];
+    var controlMap = react_1.default.useMemo(function () { return (props.controlMap ? props.controlMap : (0, index_1.makeControlMap)(index_1.xflowDefaultControls)); }, [props.controlMap]);
+    var innerTriggerUpdate = (0, react_1.useCallback)(function (values) {
+        if (typeof triggerUpdate === 'function') {
+            triggerUpdate(form, values);
+        }
+    }, [form, triggerUpdate]);
+    /** 初次挂载时设置一次值以激活首次联动 */
+    (0, react_1.useEffect)(function () {
+        form.setFieldsValue({});
+    }, [form]);
+    /** 切换标签时激活联动 */
+    var onClickTab = (0, react_1.useCallback)(function () {
+        requestAnimationFrame(function () {
+            form.setFieldsValue({});
+        });
+    }, [form]);
+    return (react_1.default.createElement(antd_1.Form, tslib_1.__assign({ size: "small", form: form, layout: "vertical", className: (0, classnames_1.default)('xflow-json-form', className) }, otherProps),
+        react_1.default.createElement(antd_1.Tabs, { type: "card", defaultActiveKey: (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.name, className: (0, classnames_1.default)((_a = {},
+                _a['tabs'] = true,
+                _a['xTab'] = true,
+                _a['singleTab'] = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1,
+                _a['coupleTab'] = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 2,
+                _a['ternateTab'] = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 3,
+                _a)), onTabClick: onClickTab }, tabs.map(function (tab) {
+            var tabName = tab.name, groups = tab.groups;
+            return (react_1.default.createElement(TabPane, { key: tabName, tab: tabName },
+                groups.length === 0 && react_1.default.createElement(antd_1.Empty, { style: { padding: '24px 0' } }),
+                groups.length > 0 &&
+                    groups.map(function (group) {
+                        var _a = group.controls, groupControls = _a === void 0 ? [] : _a;
+                        if (groupControls.length === 0) {
+                            return react_1.default.createElement(antd_1.Empty, { style: { padding: '24px 0' } });
+                        }
+                        return groupControls.map(function (control) {
+                            var shape = control.shape, controlName = control.name;
+                            var ControlComponent = (0, index_1.getControlFromMap)(shape, controlMap, defaultControlRender);
+                            if (!ControlComponent) {
+                                console.error('未找到对应的控件:', shape);
+                                return null;
+                            }
+                            return (react_1.default.createElement(ControlComponent, { key: controlName, form: form, controlSchema: control, triggerUpdate: innerTriggerUpdate, afterUpdatingCb: afterUpdatingCb }));
+                        });
+                    })));
+        }))));
+};
+exports.SchemaForm = SchemaForm;
+//# sourceMappingURL=index.js.map

package/lib/canvas-json-schema-form/schema-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/canvas-json-schema-form/schema-form/index.tsx"],"names":[],"mappings":"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"}

package/lib/canvas-json-schema-form/schema-form/index.less

@@ -0,0 +1,126 @@
+@import (reference) '~antd/es/style/themes/default.less';
+
+@backgroundColor: #fff;
+@fontSize: 12px;
+@color: #666;
+
+.xflow-json-form {
+  height: 100%;
+
+  label {
+    font-size: @fontSize;
+  }
+
+  .@{ant-prefix}-form-item {
+    margin-bottom: 12px;
+
+    .@{ant-prefix}-form-item-label {
+      padding-bottom: 4px;
+
+      & > label {
+        color: @color;
+      }
+    }
+
+    .@{ant-prefix}-form-item-control {
+      .@{ant-prefix}-checkbox-wrapper {
+        color: @color;
+      }
+    }
+  }
+
+  .@{ant-prefix}-form-item-explain,
+  .@{ant-prefix}-form-item-extra {
+    font-size: @fontSize;
+  }
+
+  .@{ant-prefix}-form-item-explain-error > div {
+    word-break: break-all;
+  }
+
+  .@{ant-prefix}-form-item-extra {
+    margin-top: 4px;
+  }
+
+  .tabs {
+    flex-direction: column;
+    height: 100%;
+
+    .@{ant-prefix}-tabs-nav {
+      box-shadow: ~'0 0 16px -5px rgba(0, 0, 0, 0.2)';
+      .@{ant-prefix}-tabs-nav-list {
+        width: 100%;
+
+        .@{ant-prefix}-tabs-tab {
+          font-size: @fontSize;
+
+          &-active {
+            border-bottom-width: 0;
+
+            .@{ant-prefix}-tabs-tab-btn {
+              // color: #1890ff;
+            }
+          }
+
+          .@{ant-prefix}-tabs-tab-btn {
+            font-weight: normal;
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    .@{ant-prefix}-tabs-content-holder {
+      padding: 0 16px;
+      overflow-y: auto;
+    }
+
+    &.xTab {
+      .@{ant-prefix}-tabs-nav {
+        .@{ant-prefix}-tabs-nav-list {
+          box-sizing: border-box;
+          height: 40px;
+          background-color: @backgroundColor;
+          border-bottom: 1px solid #d9d9d9;
+
+          .@{ant-prefix}-tabs-tab {
+            background-color: @backgroundColor;
+
+            .@{ant-prefix}-tabs-tab-btn {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    &.singleTab {
+      .@{ant-prefix}-tabs-tab {
+        width: 100%;
+      }
+    }
+
+    &.coupleTab {
+      .@{ant-prefix}-tabs-tab {
+        width: 50%;
+        margin-right: 0;
+        border-right-width: 0;
+
+        &:last-of-type {
+          border-right-width: 1px;
+        }
+      }
+    }
+
+    &.ternateTab {
+      .@{ant-prefix}-tabs-tab {
+        width: 33%;
+        margin-right: 0;
+        border-right-width: 0;
+        &:last-of-type {
+          border-right-width: 1px;
+        }
+      }
+    }
+  }
+}

package/lib/canvas-json-schema-form/service.d.ts

@@ -0,0 +1,24 @@
+import type { IGraphCommandService, IModelService } from '@sunspirytus/xflow-core';
+import type { IProps, ISchema, TargetType, TargetData } from './interface';
+import type { Cell } from '@antv/x6';
+export declare namespace NsJsonSchemaFormModel {
+    const id = "XFLOW_JSON_SCHEMA_FORM";
+    interface IState {
+        loading: boolean;
+        schema: ISchema;
+        targetType: TargetType;
+        targetData: TargetData;
+        targetCell: Cell | null;
+    }
+    const useModel: (model: IModelService) => Promise<import("@sunspirytus/xflow-core").NsModel.IModel<IState>>;
+}
+/** 方便其他组件执行Command改变Panel内部状态 */
+export declare const executeJsonSchemaFormCommand: (cmds: IGraphCommandService, updateModel: (state: NsJsonSchemaFormModel.IState) => Promise<void>) => void;
+export declare const useJsonSchemaFormModel: (props: IProps) => {
+    commandService: any;
+    modelService: any;
+    state: NsJsonSchemaFormModel.IState;
+    setState: import("@sunspirytus/xflow-core").NsModel.ISetValue<NsJsonSchemaFormModel.IState>;
+    model: import("@sunspirytus/xflow-core").RxModel<NsJsonSchemaFormModel.IState>;
+    isModelReady: boolean;
+};

package/lib/canvas-json-schema-form/service.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useJsonSchemaFormModel = exports.executeJsonSchemaFormCommand = exports.NsJsonSchemaFormModel = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var xflow_core_2 = require("@sunspirytus/xflow-core");
+var NsJsonSchemaFormModel;
+(function (NsJsonSchemaFormModel) {
+    var _this = this;
+    NsJsonSchemaFormModel.id = 'XFLOW_JSON_SCHEMA_FORM';
+    NsJsonSchemaFormModel.useModel = function (model) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            return [2 /*return*/, model.awaitModel(NsJsonSchemaFormModel.id)];
+        });
+    }); };
+})(NsJsonSchemaFormModel = exports.NsJsonSchemaFormModel || (exports.NsJsonSchemaFormModel = {}));
+/** 方便其他组件执行Command改变Panel内部状态 */
+var executeJsonSchemaFormCommand = function (cmds, updateModel) {
+    cmds.executeCommand(xflow_core_2.XFlowModelCommands.UPDATE_MODEL.id, {
+        getModel: function (modelService) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                return [2 /*return*/, NsJsonSchemaFormModel.useModel(modelService)];
+            });
+        }); },
+        updateModel: updateModel,
+    });
+};
+exports.executeJsonSchemaFormCommand = executeJsonSchemaFormCommand;
+var useJsonSchemaFormModel = function (props) {
+    var app = (0, xflow_core_1.useXFlowApp)();
+    var commandService = app.commandService, modelService = app.modelService, getGraphInstance = app.getGraphInstance;
+    var formSchemaService = props.formSchemaService;
+    var _a = (0, xflow_core_1.createComponentModel)({
+        schema: { tabs: [] },
+        targetType: null,
+        targetData: null,
+        targetCell: null,
+        loading: false,
+    }), state = _a[0], setState = _a[1], model = _a[2], isModelReady = _a[3];
+    /** 注册全局的model */
+    react_1.default.useEffect(function () {
+        if (!app || !app.modelService) {
+            return;
+        }
+        var toDispose = new xflow_core_1.DisposableCollection();
+        var deferredModel = app.modelService.findDeferredModel(NsJsonSchemaFormModel.id);
+        if (!deferredModel) {
+            var d = app.modelService.registerModel({
+                id: NsJsonSchemaFormModel.id,
+                modelFactory: function () { return model; },
+                /** 监听SELECTED_CELL的变化 */
+                watchChange: function (self, modelSerccie) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    var selectedCellModel, nodeDisposable;
+                    return tslib_1.__generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, xflow_core_2.MODELS.SELECTED_CELL.getModel(modelSerccie)];
+                            case 1:
+                                selectedCellModel = _a.sent();
+                                nodeDisposable = selectedCellModel.watch(function (cell) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                                    var updateState, getCellType, targetCellType;
+                                    return tslib_1.__generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                updateState = function (targetCell, type) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                                                    var targetData, graph, schema;
+                                                    return tslib_1.__generator(this, function (_a) {
+                                                        switch (_a.label) {
+                                                            case 0:
+                                                                self.setValue(function (m) {
+                                                                    m.loading = true;
+                                                                    m.schema = { tabs: [] };
+                                                                    m.targetType = null;
+                                                                    m.targetData = null;
+                                                                    m.targetCell = null;
+                                                                });
+                                                                targetData = targetCell ? targetCell.getData() : null;
+                                                                if (!formSchemaService) {
+                                                                    return [2 /*return*/];
+                                                                }
+                                                                return [4 /*yield*/, getGraphInstance()];
+                                                            case 1:
+                                                                graph = _a.sent();
+                                                                return [4 /*yield*/, formSchemaService({
+                                                                        commandService: commandService,
+                                                                        modelService: modelService,
+                                                                        targetData: targetData,
+                                                                        cell: targetCell,
+                                                                        targetType: type,
+                                                                        graph: graph,
+                                                                    })];
+                                                            case 2:
+                                                                schema = _a.sent();
+                                                                self.setValue({
+                                                                    loading: false,
+                                                                    schema: schema,
+                                                                    targetType: type,
+                                                                    targetCell: targetCell,
+                                                                    targetData: targetData,
+                                                                });
+                                                                return [2 /*return*/];
+                                                        }
+                                                    });
+                                                }); };
+                                                getCellType = function (targetCell) {
+                                                    if (!targetCell) {
+                                                        return 'canvas';
+                                                    }
+                                                    else if (targetCell.isNode &&
+                                                        targetCell.isNode() &&
+                                                        targetCell.getProp('isGroup')) {
+                                                        return 'group';
+                                                    }
+                                                    else if (targetCell.isNode && targetCell.isNode()) {
+                                                        return 'node';
+                                                    }
+                                                    else if (targetCell.isEdge && targetCell.isEdge()) {
+                                                        return 'edge';
+                                                    }
+                                                    else {
+                                                        return 'canvas';
+                                                    }
+                                                };
+                                                targetCellType = getCellType(cell);
+                                                if (!(props.targetType || ['node', 'canvas']).includes(targetCellType)) return [3 /*break*/, 2];
+                                                return [4 /*yield*/, updateState(cell, targetCellType)];
+                                            case 1:
+                                                _a.sent();
+                                                _a.label = 2;
+                                            case 2: return [2 /*return*/];
+                                        }
+                                    });
+                                }); });
+                                return [2 /*return*/, xflow_core_2.Disposable.create(function () {
+                                        nodeDisposable.dispose();
+                                        toDispose.push(nodeDisposable);
+                                    })];
+                        }
+                    });
+                }); },
+            });
+            toDispose.push(d);
+        }
+        return function () {
+            toDispose.dispose();
+        };
+        /* eslint-disable-next-line  */
+    }, []);
+    return { commandService: commandService, modelService: modelService, state: state, setState: setState, model: model, isModelReady: isModelReady };
+};
+exports.useJsonSchemaFormModel = useJsonSchemaFormModel;
+//# sourceMappingURL=service.js.map

package/lib/canvas-json-schema-form/service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../src/canvas-json-schema-form/service.tsx"],"names":[],"mappings":"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"}

package/lib/canvas-json-schema-form/style/index.css

@@ -0,0 +1,31 @@
+.xflow-json-schema-form {
+  border-left: 1px solid #d9d9d9;
+}
+.xflow-json-schema-form-body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.xflow-json-schema-form-header {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-bottom: 1px solid #d9d9d9;
+}
+.xflow-json-schema-form-header-title {
+  font-size: 16px;
+}
+.xflow-json-schema-form-footer {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-top: 1px solid #d9d9d9;
+}
+.xflow-json-schema-form-footer-title {
+  font-size: 16px;
+}
+.text-truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}