ronds-metadata 1.2.28 → 1.2.30

package/es/comps/Editable/comps/Texty.less

@@ -7,7 +7,6 @@
 }
 
 [data-texty-tooltip] {
-  margin: 6px 0;
   padding: 4px 10px;
   border-radius: 4px;
   background-color: #222;

package/es/comps/FormGenerator/comps/Canvas/index.js

@@ -67,7 +67,7 @@ var Canvas = function Canvas() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%',
-      width: '60%',
+      width: '100%',
       padding: '4px'
     }
   }, /*#__PURE__*/React.createElement("div", {

package/es/comps/FormGenerator/comps/Settings/index.js

@@ -111,7 +111,7 @@ var Settings = function Settings() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%',
-      width: '23%',
+      width: '100%',
       padding: '4px'
     }
   }, /*#__PURE__*/React.createElement(_Tabs, {

package/es/comps/FormGenerator/comps/Sidebar/index.js

@@ -8,7 +8,7 @@ var Sidebar = function Sidebar() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%',
-      width: '17%',
+      width: '100%',
       padding: '4px',
       overflowY: 'auto'
     }

package/es/comps/FormGenerator/index.js

@@ -4,11 +4,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2023-02-04 13:45:31
- * @LastEditTime: 2023-03-23 13:53:13
+ * @LastEditTime: 2023-04-01 09:37:13
  */
 import React from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import Split from '../Split';
 import Canvas from './comps/Canvas';
 import Settings from './comps/Settings';
 import Sidebar from './comps/Sidebar';
@@ -42,7 +43,7 @@ var FormGenerator = function FormGenerator(props) {
     var birthday = robot.date('birthday').label('出身年月').require().valueOf();
 
     var detail = robot.object([name, age], 'detail').valueOf();
-    var arr = robot.create([name, age, address, sex, birthday, detail]);
+    var arr = robot.create([name, age, address, sex, birthday, detail]).grid(2).toString();
   }, []);
   React.useEffect(function () {
     if (defaultSchema) {
@@ -77,7 +78,10 @@ var FormGenerator = function FormGenerator(props) {
     context: window
   }, /*#__PURE__*/React.createElement("div", {
     className: "form-generator-container"
-  }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Canvas, null), /*#__PURE__*/React.createElement(Settings, null)))));
+  }, /*#__PURE__*/React.createElement(Split, {
+    sizes: [20, 60, 20],
+    gutterSize: 0
+  }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Canvas, null), /*#__PURE__*/React.createElement(Settings, null))))));
 };
 
 export default FormGenerator;

package/es/comps/FormGenerator/index.less

@@ -1,5 +1,4 @@
 .form-generator-container {
-  display: flex;
   width: 100%;
   height: 100%;
 

package/es/comps/FormGenerator/transformer.js

@@ -4,7 +4,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 /*
  * @Author: wangxian
  * @Date: 2023-02-08 14:45:46
- * @LastEditTime: 2023-03-22 11:28:46
+ * @LastEditTime: 2023-03-25 11:33:24
  */
 import { deepClone } from '../../utils';
 import { basicComps, complexComps, layoutComps } from './settings';
@@ -90,7 +90,7 @@ export var transFG2Schema = function transFG2Schema(nodes, settings, _types, sch
       props.push(_prop);
     }
 
-    schema[0].properties = [].concat(props);
+    schema[0].properties = [].concat(props); // 整个表格的扩展规则
 
     if (settings && (settings === null || settings === void 0 ? void 0 : settings.formSetting)) {
       schema[0].fields[0].value = deepClone(settings.formSetting);

package/es/comps/MetadataForm/DataCell/Input.js

@@ -17,7 +17,7 @@ import _Input from "antd/es/input";
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-03-08 15:50:12
+ * @LastEditTime: 2023-04-04 09:20:39
  */
 import React from 'react';
 import { UploadOutlined } from '@ant-design/icons';
@@ -76,6 +76,8 @@ function Index(props) {
 
       case 'textarea':
         return /*#__PURE__*/React.createElement(TextArea, {
+          showCount: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.showCount,
+          maxLength: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxLength,
           rows: (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.textareaRows) || 4,
           disabled: (_extraInfo$disabled2 = extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.disabled) !== null && _extraInfo$disabled2 !== void 0 ? _extraInfo$disabled2 : disabled,
           placeholder: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.placeholder
@@ -114,6 +116,8 @@ function Index(props) {
               value: v
             }, v);
           }))) : undefined,
+          showCount: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.showCount,
+          maxLength: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxLength,
           disabled: (_extraInfo$disabled6 = extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.disabled) !== null && _extraInfo$disabled6 !== void 0 ? _extraInfo$disabled6 : disabled,
           placeholder: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.placeholder,
           allowClear: true,

package/es/comps/MetadataForm/DataCell/Select.js

@@ -23,6 +23,10 @@ import "antd/es/tree-select/style";
 import _TreeSelect from "antd/es/tree-select";
 import "antd/es/cascader/style";
 import _Cascader from "antd/es/cascader";
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import "antd/es/tag/style";
+import _Tag from "antd/es/tag";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
@@ -34,7 +38,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author:wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-03-10 11:38:33
+ * @LastEditTime: 2023-04-03 15:47:01
  */
 import React from 'react';
 import { MetadataFormContext, MetadataRefContext } from '../interface';
@@ -417,6 +421,23 @@ function Index(props) {
     }
   };
 
+  var maxTagPlaceholder = function maxTagPlaceholder(omittedValues) {
+    if (omittedValues) {
+      return /*#__PURE__*/React.createElement(_Tooltip, {
+        title: omittedValues.map(function (it) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: it.key,
+            style: {
+              paddingBottom: '8px'
+            }
+          }, /*#__PURE__*/React.createElement(_Tag, null, it === null || it === void 0 ? void 0 : it.label));
+        })
+      }, "+ ", omittedValues.length, " ...");
+    } else {
+      return '...';
+    }
+  };
+
   var processSelectType = function processSelectType(isCascader, isTreeSelect, isPagination) {
     if (isCascader) {
       var _extraInfo$disabled;
@@ -453,11 +474,10 @@ function Index(props) {
         treeData: treeData,
         allowClear: true,
         disabled: (_extraInfo$disabled2 = extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.disabled) !== null && _extraInfo$disabled2 !== void 0 ? _extraInfo$disabled2 : disabled,
-        placeholder: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.placeholder // treeDefaultExpandAll
-        ,
+        placeholder: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.placeholder,
         maxTagCount: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagCount,
         maxTagTextLength: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagTextLength,
-        maxTagPlaceholder: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagPlaceholder
+        maxTagPlaceholder: (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagPlaceholder) || maxTagPlaceholder
       });
     } else if (isPagination) {
       var _extraInfo$disabled3;
@@ -545,7 +565,7 @@ function Index(props) {
         onChange: onSelectChange,
         maxTagCount: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagCount,
         maxTagTextLength: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagTextLength,
-        maxTagPlaceholder: extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagPlaceholder
+        maxTagPlaceholder: (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.maxTagPlaceholder) || maxTagPlaceholder
       });
     }
   };

package/es/comps/MetadataForm/index.js

@@ -121,7 +121,7 @@ var MetadataForm = function MetadataForm(props) {
         if (firstLoadValue.current) {
           firstLoadValue.current = false;
           stream$.next({
-            type: 'onValuesChange',
+            type: STREAM_EVENT_TYPE.ON_VALUES_CHANGE,
             payload: {
               val: vals,
               allVals: vals,

package/es/comps/MetadataForm/index.less

@@ -13,6 +13,12 @@
     padding: 0 0 2px !important;
   }
 
+  // .ant-select-selection-overflow {
+  //   flex-wrap: nowrap;
+  //   overflow: hidden !important;
+  //   min-height: 26px;
+  // }
+
   .ant-input-number,
   .ant-picker {
     width: 100%;

package/es/comps/Split/index.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import './index.less';
+interface IPrpos {
+    sizes?: number[];
+    minSize?: number | number[];
+    expandToMin?: boolean;
+    gutterSize?: number;
+    gutterAlign?: 'center' | 'start' | 'end';
+    snapOffset?: number;
+    dragInterval?: number;
+    direction?: 'horizontal' | 'vertical';
+    cursor?: string;
+    gutter?: (index: number, direction: any) => HTMLElement;
+    elementStyle?: (dimension: 'width' | 'height', elementSize: number, gutterSize: number, index: number) => Partial<CSSStyleDeclaration>;
+    gutterStyle?: (dimension: 'width' | 'height', gutterSize: number, index: number) => Partial<CSSStyleDeclaration>;
+    onDrag?: (sizes: number[]) => void;
+    onDragStart?: (sizes: number[]) => void;
+    onDragEnd?: (sizes: number[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    children: ReactNode;
+}
+/** antd的card不能直接放在children里 外层套一个div */
+declare const Index: (props: IPrpos) => JSX.Element;
+export default Index;

package/es/comps/Split/index.js

@@ -0,0 +1,52 @@
+/*
+ * @Author: wangxian
+ * @Date: 2023-03-25 09:31:21
+ * @LastEditTime: 2023-03-25 10:22:21
+ */
+import React from 'react';
+import Split from 'react-split';
+import './index.less';
+import classNames from 'classnames';
+/** antd的card不能直接放在children里 外层套一个div */
+
+var Index = function Index(props) {
+  var className = props.className,
+      style = props.style,
+      _props$sizes = props.sizes,
+      sizes = _props$sizes === void 0 ? [20, 80] : _props$sizes,
+      _props$gutterSize = props.gutterSize,
+      gutterSize = _props$gutterSize === void 0 ? 5 : _props$gutterSize,
+      _props$dragInterval = props.dragInterval,
+      dragInterval = _props$dragInterval === void 0 ? 1 : _props$dragInterval,
+      _props$minSize = props.minSize,
+      minSize = _props$minSize === void 0 ? 0 : _props$minSize,
+      children = props.children,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+      _props$cursor = props.cursor,
+      cursor = _props$cursor === void 0 ? 'col-resize' : _props$cursor,
+      gutter = props.gutter,
+      elementStyle = props.elementStyle,
+      gutterStyle = props.gutterStyle,
+      onDrag = props.onDrag,
+      onDragStart = props.onDragStart,
+      onDragEnd = props.onDragEnd;
+  return /*#__PURE__*/React.createElement(Split, {
+    className: classNames('split-panel', className),
+    dragInterval: dragInterval,
+    gutterSize: gutterSize,
+    sizes: sizes,
+    minSize: minSize,
+    direction: direction,
+    style: style,
+    cursor: cursor,
+    gutter: gutter,
+    elementStyle: elementStyle,
+    gutterStyle: gutterStyle,
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
+  }, children);
+};
+
+export default Index;

package/es/comps/Split/index.less

@@ -0,0 +1,29 @@
+.split-panel {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .gutter {
+    width: 100%;
+    height: 100%;
+
+    background-color: #bebebe;
+    background-repeat: no-repeat;
+    background-position: 50%;
+
+    .gutter-vertical {
+      cursor: row-resize;
+    }
+
+    .gutter-horizontal {
+      cursor: col-resize;
+    }
+  }
+
+  > * {
+    height: 100%;
+    width: 100%;
+    float: left;
+    position: relative;
+  }
+}

package/es/framework/RxStore/demo/index.d.ts

@@ -0,0 +1 @@
+export default function (): JSX.Element;

package/es/framework/RxStore/demo/index.js

@@ -0,0 +1,115 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useState } from 'react';
+import { from, of } from 'rxjs';
+import { debounceTime, map, startWith, switchMap, endWith, catchError } from 'rxjs/operators';
+import { useRxObservable, useRxStore, useRxEffect } from '../hooks';
+export default function () {
+  // 创建一个可观察的对象
+  var store = useRxStore({
+    initialValue: {
+      a: 1,
+      b: 2,
+      c: 0,
+      loading: ''
+    }
+  });
+  var storeVal = useRxObservable(function () {
+    return store.select(function (p) {
+      return p;
+    });
+  }); // console.log('storeVal', storeVal);
+  // 将流转换为state
+
+  var a = useRxObservable(function () {
+    return store.select(function (p) {
+      return p.a;
+    });
+  });
+  var c1 = useRxObservable(function () {
+    return store.select(function (p) {
+      return p.c;
+    });
+  });
+  var b = useRxObservable(function () {
+    return store.valueChanges.pipe(map(function (p) {
+      return p.b;
+    }));
+  });
+  var c = useRxObservable(function () {
+    return store.select(function (p) {
+      return {
+        a: p.a,
+        b: p.b
+      };
+    }).pipe(debounceTime(1000), map(function (p) {
+      return store.value.a * store.value.b;
+    }));
+  });
+  var d = useRxEffect(function (event$) {
+    event$.pipe(debounceTime(100)).subscribe(function (p) {
+      store.update(function (pre) {
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          b: pre.b + 100
+        });
+      });
+    });
+  });
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      count = _useState2[0],
+      setCount = _useState2[1];
+
+  var getData = function getData() {
+    return new Promise(function (resolve, reject) {
+      setTimeout(function () {
+        resolve(store.value.a * store.value.b); // reject('dddd');
+      }, 3000);
+    });
+  };
+
+  var e = useRxEffect(function (event$) {
+    return event$.pipe( // debounceTime(1000),
+    // distinctUntilChanged(),
+    switchMap(function (p) {
+      return from(getData()).pipe(map(function (p) {
+        store.update(function (a) {
+          return _objectSpread(_objectSpread({}, a), {}, {
+            c: p,
+            loading: 'success'
+          });
+        });
+        return p;
+      }), startWith(function () {
+        return store.updatePartial({
+          loading: 'start'
+        });
+      }), endWith(function () {
+        return store.updatePartial({
+          loading: 'end'
+        });
+      }), catchError(function (ex) {
+        return of(store.updatePartial({
+          loading: 'error'
+        }));
+      }));
+    }));
+  }, [count]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick(e) {
+      store.update(function (pre) {
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          a: pre.a + 1
+        });
+      });
+      setCount(function (pre) {
+        return pre + 1000;
+      });
+    }
+  }, "a+"), "a:", a, '   ', "b:", b, '   c:', c, '   ', "loading: ", storeVal === null || storeVal === void 0 ? void 0 : storeVal.loading, "state c: ", c1, /*#__PURE__*/React.createElement("button", {
+    onClick: d
+  }, "b+"), /*#__PURE__*/React.createElement("button", {
+    onClick: e
+  }, "ajax test"));
+}

package/es/framework/RxStore/hooks.d.ts

@@ -0,0 +1,54 @@
+import { Observable, BehaviorSubject } from 'rxjs';
+import { DependencyList } from 'react';
+import { Store, StoreInitOptions } from './store';
+export declare type RestrictArray<T> = T extends any[] ? T : [];
+export declare type VoidAsNull<T> = T extends void ? null : T;
+export declare type Not<P, T, F> = P extends false ? T : F;
+/**
+ * 将对象转换为常量
+ */
+export declare function useConstant<T>(fn: () => T): T;
+export declare type InputFactory<State> = (state$: Observable<State>) => Observable<State>;
+export declare type InputFactoryWithInputs<State, Inputs> = (state$: Observable<State>, inputs$: Observable<RestrictArray<Inputs>>) => Observable<State>;
+/**
+ *
+ *
+ * @export
+ * @template State
+ * @param {InputFactory<State>} inputFactory
+ * @returns {(State | null)}
+ */
+export declare function useRxObservable<State>(inputFactory: InputFactory<State>): State | null;
+export declare function useRxObservable<State>(inputFactory: InputFactory<State>, initialState: State): State;
+export declare function useRxObservable<State, Inputs>(inputFactory: InputFactoryWithInputs<State, Inputs>, initialState: State, inputs: RestrictArray<Inputs>): State;
+export declare type VoidableEventCallback<EventValue> = EventValue extends void ? () => void : (e: EventValue) => void;
+export declare type EventCallbackState<EventValue, State, Inputs = void> = [
+    VoidableEventCallback<EventValue>,
+    [
+        State extends void ? null : State,
+        BehaviorSubject<State | null>,
+        BehaviorSubject<RestrictArray<Inputs> | null>
+    ]
+];
+export declare type ReturnedState<EventValue, State, Inputs> = [
+    EventCallbackState<EventValue, State, Inputs>[0],
+    EventCallbackState<EventValue, State, Inputs>[1][0]
+];
+export declare type EventCallback<EventValue, State, Inputs> = Not<Inputs extends void ? true : false, (eventSource$: Observable<EventValue>, state$: Observable<State>, inputs$: Observable<RestrictArray<Inputs>>) => Observable<State>, (eventSource$: Observable<EventValue>, state$: Observable<State>) => Observable<State>>;
+export declare function useEventCallback<EventValue>(callback: EventCallback<EventValue, void, void>): ReturnedState<EventValue, void | null, void>;
+export declare function useEventCallback<EventValue, State>(callback: EventCallback<EventValue, State, void>, initialState: State): ReturnedState<EventValue, State, void>;
+export declare function useEventCallback<EventValue, State, Inputs>(callback: EventCallback<EventValue, State, Inputs>, initialState: State, inputs: RestrictArray<Inputs>): ReturnedState<EventValue, State, Inputs>;
+/**
+ * 创建一个可监听的对象
+ */
+export declare function useRxStore<T>(options: StoreInitOptions<T>): Store<T>;
+/** 处理副作用 */
+export declare function useRxEffect<EventValue>(factory: ((event$: Observable<EventValue>) => void) | ((event$: Observable<EventValue>) => Observable<any>), deps?: DependencyList): (e: EventValue) => void;
+/** 创建一个单例的store */
+export declare function createSingletonStore<T>(options: StoreInitOptions<T>, key: string): Store<T>;
+/** 通过key获取store */
+export declare function getStoreByKey<T>(key: string): Store<T>;
+/**
+ * 转换State到Observable
+ */
+export declare function useRxObservableState<T>(v: T): void;

package/es/framework/RxStore/hooks.js

@@ -0,0 +1,201 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Observable, BehaviorSubject, Subject } from 'rxjs';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Store } from './store';
+/**
+ * 将对象转换为常量
+ */
+
+export function useConstant(fn) {
+  var ref = useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}
+export function useRxObservable(inputFactory, initialState, inputs) {
+  var _useState = useState(typeof initialState !== 'undefined' ? initialState : null),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var state$ = useConstant(function () {
+    return new BehaviorSubject(initialState);
+  });
+  var inputs$ = useConstant(function () {
+    return new BehaviorSubject(inputs);
+  });
+  useEffect(function () {
+    inputs$.next(inputs);
+  }, inputs || []);
+  useEffect(function () {
+    var output$;
+
+    if (inputs) {
+      output$ = inputFactory(state$, inputs$);
+    } else {
+      output$ = inputFactory(state$);
+    } // console.log('output', output$);
+
+
+    var subscription = output$.subscribe(function (value) {
+      state$.next(value);
+      setState(value);
+    });
+    return function () {
+      subscription.unsubscribe();
+      inputs$.complete();
+      state$.complete();
+    };
+  }, []); // immutable forever
+
+  return state;
+}
+export function useEventCallback(callback, initialState, inputs) {
+  var initialValue = typeof initialState !== 'undefined' ? initialState : null;
+
+  var _useState3 = useState(initialValue),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  var event$ = useConstant(function () {
+    return new Subject();
+  });
+  var state$ = useConstant(function () {
+    return new BehaviorSubject(initialValue);
+  });
+  var inputs$ = useConstant(function () {
+    return new BehaviorSubject(typeof inputs === 'undefined' ? null : inputs);
+  });
+
+  function eventCallback(e) {
+    return event$.next(e);
+  }
+
+  var returnedCallback = useCallback(eventCallback, []);
+  useEffect(function () {
+    inputs$.next(inputs);
+  }, inputs || []);
+  useEffect(function () {
+    setState(initialValue);
+    var value$;
+
+    if (!inputs) {
+      value$ = callback(event$, state$);
+    } else {
+      value$ = callback(event$, state$, inputs$);
+    }
+
+    var subscription = value$.subscribe(function (value) {
+      state$.next(value);
+      setState(value);
+    });
+    return function () {
+      subscription.unsubscribe();
+      state$.complete();
+      inputs$.complete();
+      event$.complete();
+    };
+  }, []);
+  return [returnedCallback, state];
+}
+/**
+ * 创建一个可监听的对象
+ */
+
+export function useRxStore(options) {
+  var store = useConstant(function () {
+    return new Store(options);
+  });
+  useEffect(function () {
+    return function () {
+      return store.dispose();
+    };
+  }, []);
+  return store;
+}
+var storeFactory = {};
+/** 处理副作用 */
+
+export function useRxEffect(factory, deps) {
+  // const event$ = useConstant(() => new Subject<EventValue>());
+  var event$ = useConstant(function () {
+    return new Subject();
+  });
+
+  var eventCallback = function eventCallback(e) {
+    event$.next(e);
+  };
+
+  var returnedCallback = useCallback(eventCallback, []);
+  useEffect(function () {
+    var res = factory(event$);
+    var subscription;
+
+    if (res instanceof Observable) {
+      subscription = res.subscribe(function (p) {
+        // console.log('subscribe', p);
+        if (typeof p === 'function') {
+          p();
+        }
+      });
+    }
+
+    return function () {
+      var _subscription;
+
+      (_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.unsubscribe(); // event$.unsubscribe();
+    };
+  }, deps ? deps : []);
+  useEffect(function () {
+    return function () {
+      event$.unsubscribe();
+    };
+  }, []);
+  return returnedCallback;
+}
+/** 创建一个单例的store */
+
+export function createSingletonStore(options, key) {
+  if (key) {
+    if (storeFactory[key]) {
+      return storeFactory[key];
+    }
+  }
+
+  var store = new Store(options);
+
+  if (key) {
+    storeFactory[key] = store;
+  }
+
+  return store;
+}
+/** 通过key获取store */
+
+export function getStoreByKey(key) {
+  return storeFactory[key];
+}
+/**
+ * 转换State到Observable
+ */
+
+export function useRxObservableState(v) {
+  var value$ = useConstant(function () {
+    return new BehaviorSubject(v);
+  });
+  useEffect(function () {
+    value$.next(v);
+  }, [v]);
+  useEffect(function () {
+    return function () {
+      value$.unsubscribe();
+      value$.complete();
+    };
+  }, []);
+}

package/es/framework/RxStore/index.d.ts

@@ -0,0 +1,2 @@
+export { useConstant, useEventCallback, useRxObservable, useRxStore } from './hooks';
+export { Store } from './store';

package/es/framework/RxStore/index.js

@@ -0,0 +1,2 @@
+export { useConstant, useEventCallback, useRxObservable, useRxStore } from './hooks';
+export { Store } from './store';

package/es/framework/RxStore/store.d.ts

@@ -0,0 +1,39 @@
+import { Observable } from 'rxjs';
+export declare type StoreUpdateChange<T> = {
+    previousValue: T;
+    currentValue: T;
+    label?: string;
+};
+export declare type StoreOnUpdateFn<T> = (change: StoreUpdateChange<T>) => void;
+export declare type StoreInitOptions<T> = {
+    initialValue: T;
+};
+export declare type CommandOptions = {
+    label?: string;
+};
+export declare const RESET = "store/reset";
+/**
+ * 创建一个可监听的对象
+ */
+export declare class Store<T> {
+    private valueSubject;
+    private storeUpdateChangeSubject;
+    private initialValue;
+    get valueChanges(): Observable<T>;
+    get value(): T;
+    get storeUpdateChanges(): Observable<StoreUpdateChange<T>>;
+    dispose(): void;
+    constructor(initOptions: StoreInitOptions<T>);
+    /** 全量更新 */
+    update(command: T | ((state: T) => T), options?: CommandOptions): void;
+    /** 分布更新 */
+    updatePartial(value: Partial<T> | T, options?: CommandOptions): void;
+    /**
+     *  监听一部分属性
+     */
+    select<V>(selectFn: (state: T) => V): Observable<V>;
+    /**
+     * 重置到初始值
+     */
+    reset(options?: CommandOptions): void;
+}

package/es/framework/RxStore/store.js

@@ -0,0 +1,108 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { BehaviorSubject, Subject } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+export var RESET = 'store/reset';
+/**
+ * 创建一个可监听的对象
+ */
+
+export var Store = /*#__PURE__*/function () {
+  function Store(initOptions) {
+    _classCallCheck(this, Store);
+
+    this.valueSubject = void 0;
+    this.storeUpdateChangeSubject = void 0;
+    this.initialValue = void 0;
+    this.valueSubject = new BehaviorSubject(initOptions.initialValue);
+    this.storeUpdateChangeSubject = new Subject();
+    this.initialValue = initOptions.initialValue;
+  }
+  /** 全量更新 */
+
+
+  _createClass(Store, [{
+    key: "valueChanges",
+    get: function get() {
+      return this.valueSubject.asObservable();
+    }
+  }, {
+    key: "value",
+    get: function get() {
+      return this.valueSubject.getValue();
+    }
+  }, {
+    key: "storeUpdateChanges",
+    get: function get() {
+      return this.storeUpdateChangeSubject.asObservable();
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var _this$valueSubject;
+
+      (_this$valueSubject = this.valueSubject) === null || _this$valueSubject === void 0 ? void 0 : _this$valueSubject.unsubscribe();
+      this.valueSubject = null;
+      this.storeUpdateChangeSubject.unsubscribe();
+      this.storeUpdateChangeSubject = null;
+      this.initialValue = null;
+    }
+  }, {
+    key: "update",
+    value: function update(command) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var previousValue = this.valueSubject.getValue();
+      var currentValue = typeof command === 'function' ? command(previousValue) : command;
+      this.valueSubject.next(currentValue);
+      this.storeUpdateChangeSubject.next({
+        previousValue: previousValue,
+        currentValue: currentValue,
+        label: options.label
+      });
+    }
+    /** 分布更新 */
+
+  }, {
+    key: "updatePartial",
+    value: function updatePartial(value) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var previousValue = this.valueSubject.getValue();
+      var currentValue = _typeof(value) === 'object' ? _objectSpread(_objectSpread({}, previousValue), value) : value;
+      this.valueSubject.next(currentValue);
+      this.storeUpdateChangeSubject.next({
+        previousValue: previousValue,
+        currentValue: currentValue,
+        label: options.label
+      });
+    }
+    /**
+     *  监听一部分属性
+     */
+
+  }, {
+    key: "select",
+    value: function select(selectFn) {
+      return this.valueSubject.pipe(map(selectFn), distinctUntilChanged());
+    }
+    /**
+     * 重置到初始值
+     */
+
+  }, {
+    key: "reset",
+    value: function reset() {
+      var _this = this;
+
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+        label: RESET
+      };
+      this.update(function () {
+        return _this.initialValue;
+      }, options);
+    }
+  }]);
+
+  return Store;
+}();

package/es/framework/fg/index.d.ts

@@ -33,6 +33,16 @@ interface IReturnMethod {
     valueOf(): void;
     toString(): void;
 }
+declare type ICreateData = {
+    /**
+     * 表单的属性集合
+     */
+    nodes: FG.Node[];
+    /**
+     * 整个表单的扩展规则
+     */
+    setting: {};
+};
 export declare type IFormRobot = ICreate & IComps;
 /**
  * 链式调用 组件元数据表单的机器人
@@ -41,12 +51,12 @@ export declare class FormRobot implements IFormRobot {
     /**
      * 构建每个字段的值
      */
-    _data: FG.Node | FG.Node[];
+    _data: FG.Node | ICreateData;
     /**
      * 用来判断是否已经初始化过数据
      */
     _hasInitData: boolean;
-    constructor(data?: FG.Node | FG.Node[]);
+    constructor(data?: FG.Node | ICreateData);
     /**
      * 创建表单的入口
      * @param arr

package/es/framework/fg/index.js

@@ -1,8 +1,7 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-
-/* eslint-disable */
 import { transFG2Schema } from '../../comps/FormGenerator/transformer';
 import { renderBasicFormProps, renderLayoutFormProps, renderSetting } from './utils';
 /**
@@ -46,10 +45,15 @@ export var FormRobot = /*#__PURE__*/function () {
   _createClass(FormRobot, [{
     key: "create",
     value: function create(arr) {
-      var _init = this._hasInitData ? this._data : [];
-
-      var _data = [].concat(_toConsumableArray(_init), _toConsumableArray(arr));
-
+      var _init = this._hasInitData ? this._data : {
+        nodes: [],
+        setting: {}
+      };
+
+      var _data = {
+        nodes: [].concat(_toConsumableArray(_init.nodes), _toConsumableArray(arr)),
+        setting: _init.setting
+      };
       return new FormRobot(_data);
     } //*********************************表单基本类型__START************************************//
 
@@ -264,10 +268,17 @@ export var FormRobot = /*#__PURE__*/function () {
   }, {
     key: "grid",
     value: function grid(_vaule) {
-      var _init = this._hasInitData ? this._data : {};
-
-      var _data = renderSetting(_init, 'colSpan', _vaule);
-
+      var _init = this._hasInitData ? this._data : {
+        nodes: [],
+        setting: {}
+      };
+
+      var _data = {
+        nodes: _toConsumableArray(_init.nodes),
+        setting: _objectSpread(_objectSpread({}, _init.setting), {}, {
+          colSpan: 24 / _vaule
+        })
+      };
       return new FormRobot(_data);
     } //*********************************表单布局的扩展规则__END************************************//
     //*********************************拿到最终的数据方法__START************************************//
@@ -275,9 +286,13 @@ export var FormRobot = /*#__PURE__*/function () {
   }, {
     key: "valueOf",
     value: function valueOf() {
-      if (Array.isArray(this._data)) {
+      var _this$_data, _this$_data2;
+
+      if (((_this$_data = this._data) === null || _this$_data === void 0 ? void 0 : _this$_data.nodes) && Array.isArray((_this$_data2 = this._data) === null || _this$_data2 === void 0 ? void 0 : _this$_data2.nodes)) {
         //是数组,说明是create方法,需要转换成元数据
-        return transFG2Schema(this._data);
+        return transFG2Schema(this._data.nodes, {
+          formSetting: this._data.setting
+        });
       } else {
         return this._data;
       }

package/es/framework/rxjs-hooks/useObservable.js

@@ -1,7 +1,7 @@
 /*
  * @Author: wangxian
  * @Date: 2022-03-30 10:12:11
- * @LastEditTime: 2022-07-14 08:33:58
+ * @LastEditTime: 2023-04-03 09:30:52
  */
 import React from 'react';
 
@@ -14,7 +14,7 @@ var useObservable = function useObservable(fn) {
       fn(p);
     }));
     return function () {
-      return subscription && subscription.unsubscribe();
+      subscription && subscription.unsubscribe(); // dep[0] && dep[0].complete();
     };
   }, dep);
 };

package/es/index.d.ts

@@ -13,6 +13,7 @@ export { default as FormGenerator } from './comps/FormGenerator';
 export { default as DynamicPorts } from './comps/DynamicPorts';
 export { default as DragNode } from './comps/DynamicPorts/comps/DragNode';
 export { default as Icon } from './comps/Icons';
+export { default as Split } from './comps/Split';
 export * from './framework/metadata/index';
 export { default as http, addInterceptor } from './framework/http/index';
 export { default as useMemoSubject } from './framework/rxjs-hooks/useMemoSubject';

package/es/index.js

@@ -18,6 +18,7 @@ export { default as FormGenerator } from './comps/FormGenerator';
 export { default as DynamicPorts } from './comps/DynamicPorts';
 export { default as DragNode } from './comps/DynamicPorts/comps/DragNode';
 export { default as Icon } from './comps/Icons';
+export { default as Split } from './comps/Split';
 export * from './framework/metadata/index';
 export { default as http, addInterceptor } from './framework/http/index';
 export { default as useMemoSubject } from './framework/rxjs-hooks/useMemoSubject';

package/es/theme.less

@@ -1,77 +1,77 @@
-.ronds-metadata-dark {
-  --ronds-metadata-color-border-1: #314162;
-  --ronds-metadata-color-border-2: #0d9af3;
-  --ronds-metadata-color-bg-2: #0d1f40;
-  --ronds-metadata-color-bg-3: #021125;
-  --ronds-metadata-color-bg-4: #1c3771;
-  --ronds-metadata-color-text-1: #ffffff;
-  --ronds-metadata-color-text-2: #ffffff;
-  --ronds-metadata-color-text-3: #ffffff;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    overflow: auto;
-  }
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-    color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
-    background: var(--scrollbar-color);
-    min-height: 25px;
-    min-width: 25px;
-    border-radius: 3px;
-
-    &:hover {
-      border-radius: 2px;
-      // box-shadow: inset 0 0 5px var(--scrollbar-color-hover);
-      background: var(--scrollbar-color-hover);
-    }
-
-    &:active {
-      // box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
-      background: var(--scrollbar-color-hover);
-    }
-  }
-}
-
-.ronds-metadata-normal {
-  --ronds-metadata-color-border-1: #d9d9d9;
-  --ronds-metadata-color-border-2: #165dff;
-  --ronds-metadata-color-bg-2: rgba(229, 238, 255, 0.85);
-  --ronds-metadata-color-bg-3: #f6f5f6;
-  --ronds-metadata-color-bg-4: #ffffff;
-  --ronds-metadata-color-text-1: #1d2129;
-  --ronds-metadata-color-text-2: #24292f;
-  --ronds-metadata-color-text-3: #f2f3f5;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    overflow: auto;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-color);
-    min-height: 25px;
-    min-width: 25px;
-    border-radius: 3px;
-
-    &:hover {
-      background-color: #a8a8a8;
-    }
-
-    &:active {
-      background-color: #787878;
-    }
-
-    /* border: 1px solid #e0e0e0; */
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: #f7f7f7;
-  }
-}
+.ronds-metadata-dark {
+  --ronds-metadata-color-border-1: #314162;
+  --ronds-metadata-color-border-2: #0d9af3;
+  --ronds-metadata-color-bg-2: #0d1f40;
+  --ronds-metadata-color-bg-3: #021125;
+  --ronds-metadata-color-bg-4: #1c3771;
+  --ronds-metadata-color-text-1: #ffffff;
+  --ronds-metadata-color-text-2: #ffffff;
+  --ronds-metadata-color-text-3: #ffffff;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+    color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+    background: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      border-radius: 2px;
+      // box-shadow: inset 0 0 5px var(--scrollbar-color-hover);
+      background: var(--scrollbar-color-hover);
+    }
+
+    &:active {
+      // box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+      background: var(--scrollbar-color-hover);
+    }
+  }
+}
+
+.ronds-metadata-normal {
+  --ronds-metadata-color-border-1: #d9d9d9;
+  --ronds-metadata-color-border-2: #165dff;
+  --ronds-metadata-color-bg-2: rgba(229, 238, 255, 0.85);
+  --ronds-metadata-color-bg-3: #f6f5f6;
+  --ronds-metadata-color-bg-4: #ffffff;
+  --ronds-metadata-color-text-1: #1d2129;
+  --ronds-metadata-color-text-2: #24292f;
+  --ronds-metadata-color-text-3: #f2f3f5;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: #a8a8a8;
+    }
+
+    &:active {
+      background-color: #787878;
+    }
+
+    /* border: 1px solid #e0e0e0; */
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #f7f7f7;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.2.28",
+  "version": "1.2.30",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -58,6 +58,7 @@
     "react-markdown": "^8.0.3",
     "react-markdown-editor-lite": "^1.3.2",
     "react-popper": "^2.2.3",
+    "react-split": "^2.0.14",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",