form-driver 0.4.0 → 0.4.1

package/lib/m3.js

@@ -19502,7 +19502,7 @@ var SortDrag = /*#__PURE__*/React.memo(function (props) {
   var sortList = props.sortList,
       changeOriginDataSource = props.changeOriginDataSource;
 
-  var _useState = React.useState([]),
+  var _useState = React.useState(sortList),
       items = _useState[0],
       setItems = _useState[1]; // 记录当前拖拽的 item id
 
@@ -19601,22 +19601,6 @@ var SortDrag = /*#__PURE__*/React.memo(function (props) {
       });
     };
   }, [items]);
-  React.useEffect(function () {
-    var checkedItems = sortList.filter(function (item) {
-      return item.isChecked;
-    }).sort(function (a, b) {
-      return a.checkedIndex - b.checkedIndex;
-    });
-    var unCheckedItems = sortList.filter(function (item) {
-      return !item.isChecked;
-    });
-    console.log("DRAG: 排序之后实际展示的数据", {
-      sortList: sortList,
-      checkedItems: checkedItems,
-      unCheckedItems: unCheckedItems
-    });
-    setItems([].concat(checkedItems, unCheckedItems));
-  }, [sortList]);
   return jsxRuntime.jsx("div", {
     className: "sortDrag",
     children: items.map(function (item, index) {
@@ -19721,15 +19705,12 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState, snapshot) {
-    var _this2 = this;
-
-    setTimeout(function () {
-      console.log("DRAG: 组件更新", _this2.checkFields, _this2.state.data);
+    setTimeout(function () {// console.log("DRAG: 组件更新", this.checkFields, this.state.data);
     }, 2000);
   };
 
   _proto.element = function element(ctx) {
-    var _this3 = this,
+    var _this2 = this,
         _ref;
 
     var data = this.state.data;
@@ -19744,30 +19725,30 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
     var checkboxs = this.checkFields.map(function (m, index) {
       var _ctx$rootProps$schema;
 
-      var isShow = MUtil.isShow(_this3.props.database, (_ctx$rootProps$schema = ctx.rootProps.schema) == null ? void 0 : _ctx$rootProps$schema.objectFields, m.showIf);
+      var isShow = MUtil.isShow(_this2.props.database, (_ctx$rootProps$schema = ctx.rootProps.schema) == null ? void 0 : _ctx$rootProps$schema.objectFields, m.showIf);
       if (!isShow) return null;
       var checkIndex = values == null ? void 0 : values.findIndex(function (e) {
         return e === m.value;
       });
 
       if (m.remark === "openOption") {
-        var _this3$props$schema$o;
+        var _this2$props$schema$o;
 
-        var key = _this3._inputBoxValue;
+        var key = _this2._inputBoxValue;
         var checked = values == null ? void 0 : values.findIndex(function (e) {
           return e === key;
         });
         return [jsxRuntime.jsxs(DIYCheckbox, {
-          disabled: _this3.props.disable,
+          disabled: _this2.props.disable,
           checked: checked !== -1,
           checkedIcon: checked ? checked + 1 : 1,
           onChange: function onChange(e) {
-            var max = _this3.props.schema.max;
+            var max = _this2.props.schema.max;
 
             if (max > 0 && e.target.checked) {
               var len = values ? values.length : 0; // 选择第 max + 1 项时，提示并组织
 
-              if (len >= _this3.props.schema.max) {
+              if (len >= _this2.props.schema.max) {
                 antd.Modal.info({
                   title: "\u6B64\u9898\u6700\u591A\u53EA\u80FD\u9009\u62E9 " + max + " \u9879",
                   okText: "确认",
@@ -19779,13 +19760,13 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
               }
             }
 
-            var currentCheckValue = MSetType.change(e.target.checked, key, values, _this3.props.schema, true);
-            console.log("当前选中的数据ccc", currentCheckValue);
-            _this3.dataRef = currentCheckValue;
+            var currentCheckValue = MSetType.change(e.target.checked, key, values, _this2.props.schema, true); // console.log("当前选中的数据ccc", currentCheckValue);
+
+            _this2.dataRef = currentCheckValue;
             setTimeout(function () {
-              _Viewer.prototype.changeValue.call(_this3, currentCheckValue);
+              _Viewer.prototype.changeValue.call(_this2, currentCheckValue);
 
-              _this3.setState({
+              _this2.setState({
                 data: currentCheckValue
               });
             }, 0);
@@ -19794,36 +19775,35 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
             style: {
               marginRight: "10px"
             },
-            children: (_this3$props$schema$o = _this3.props.schema.openOption.label) != null ? _this3$props$schema$o : "其他"
+            children: (_this2$props$schema$o = _this2.props.schema.openOption.label) != null ? _this2$props$schema$o : "其他"
           }), jsxRuntime.jsx("span", {
             onBlurCapture: function onBlurCapture(e) {
-              console.log("输入框失去焦点", _this3.dataRef);
+              // console.log("输入框失去焦点", this.dataRef);
               setTimeout(function () {
-                _Viewer.prototype.changeValue.call(_this3, _this3.dataRef);
+                _Viewer.prototype.changeValue.call(_this2, _this2.dataRef);
 
-                _this3.setState({
-                  data: _this3.dataRef
+                _this2.setState({
+                  data: _this2.dataRef
                 });
               }, 0);
             },
             children: jsxRuntime.jsx(MFieldViewer, {
-              morph: _this3.props.morph,
-              schema: _this3.props.schema.openOption,
-              database: _this3,
+              morph: _this2.props.morph,
+              schema: _this2.props.schema.openOption,
+              database: _this2,
               path: "_inputBoxValue",
               afterChange: function afterChange(path, str, final) {
-                var matchEnum = _this3.checkFields.find(function (e) {
+                var matchEnum = _this2.checkFields.find(function (e) {
                   return e.value === str && e.remark !== "openOption";
-                });
+                }); // console.log("输入框 afterChange", str, values, matchEnum);
 
-                console.log("输入框 afterChange", str, values, matchEnum);
 
                 if (matchEnum) {
                   // 不能让用户输入某个枚举值
-                  _this3._inputBoxValue = "";
+                  _this2._inputBoxValue = "";
 
                   ___default["default"].remove(values, function (e) {
-                    return !_this3.checkValues.includes(e);
+                    return !_this2.checkValues.includes(e);
                   });
 
                   if (!values.includes(str)) {
@@ -19831,15 +19811,15 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
                   }
 
                   queueMicrotask(function () {
-                    _Viewer.prototype.changeValueEx.call(_this3, values, true, final);
+                    _Viewer.prototype.changeValueEx.call(_this2, values, true, final);
 
-                    _this3.setState({
+                    _this2.setState({
                       data: values
                     });
                   });
                 } else {
                   var idx = values.findIndex(function (v) {
-                    var index = _this3.checkFields.filter(function (e) {
+                    var index = _this2.checkFields.filter(function (e) {
                       return e.remark !== "openOption";
                     }).findIndex(function (e) {
                       return e.value === v;
@@ -19849,24 +19829,24 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
                   });
 
                   if (!___default["default"].isNil(idx) || str === "") {
-                    _this3._inputBoxValue = str;
+                    _this2._inputBoxValue = str;
                     values[idx] = str;
-                    _this3.dataRef = values;
-                    _this3.checkFields = _this3.checkFields.map(function (e) {
+                    _this2.dataRef = values;
+                    _this2.checkFields = _this2.checkFields.map(function (e) {
                       return e.remark === "openOption" ? _objectSpread$9(_objectSpread$9({}, e), {}, {
                         value: str
                       }) : e;
-                    });
-                    console.log("输入框数据", {
-                      values: values,
-                      checkFields: _this3.checkFields,
-                      dataRef: _this3.dataRef
-                    });
-                    MUtil.set(_this3.props.database, _this3.props.path, values);
+                    }); // console.log("输入框数据", {
+                    //   values,
+                    //   checkFields: this.checkFields,
+                    //   dataRef: this.dataRef,
+                    // });
+
+                    MUtil.set(_this2.props.database, _this2.props.path, values);
                   }
                 }
               },
-              parent: _this3.props.schema,
+              parent: _this2.props.schema,
               forceValid: false,
               disable: openIndex < 0,
               style: {
@@ -19874,22 +19854,22 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
               }
             })
           })]
-        }, "openOption"), _this3._createBr()];
+        }, "openOption"), _this2._createBr()];
       }
 
       return [jsxRuntime.jsx(DIYCheckbox, {
-        disabled: _this3.props.disable,
+        disabled: _this2.props.disable,
         checkedIcon: checkIndex === -1 ? 1 : checkIndex + 1,
         checked: ___default["default"].includes(values, m.value),
         onChange: function onChange(e) {
-          var currentCheckValue = MSetType.change(e.target.checked, m.value, values, _this3.props.schema, true);
-          console.log("当前变化的 value", values, currentCheckValue);
-          var max = _this3.props.schema.max;
+          var currentCheckValue = MSetType.change(e.target.checked, m.value, values, _this2.props.schema, true); // console.log("当前变化的 value", values, currentCheckValue);
+
+          var max = _this2.props.schema.max;
 
           if (max > 0 && e.target.checked) {
             var len = values ? values.length : 0; // 选择第 max + 1 项时，提示并组织
 
-            if (len >= _this3.props.schema.max) {
+            if (len >= _this2.props.schema.max) {
               antd.Modal.info({
                 title: "\u6B64\u9898\u6700\u591A\u53EA\u80FD\u9009\u62E9 " + max + " \u9879",
                 okText: "确认",
@@ -19901,22 +19881,22 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
             }
           }
 
-          _this3.dataRef = currentCheckValue;
+          _this2.dataRef = currentCheckValue;
           queueMicrotask(function () {
-            _Viewer.prototype.changeValue.call(_this3, currentCheckValue);
+            _Viewer.prototype.changeValue.call(_this2, currentCheckValue);
 
-            _this3.setState({
+            _this2.setState({
               data: currentCheckValue
             });
           });
         },
         children: ACheckBoxLabel(m)
-      }, m.value), _this3._createBr()];
+      }, m.value), _this2._createBr()];
     }); // 定义更换数据源的方法
 
     var changeOriginDataSource = function changeOriginDataSource(newData) {
-      console.log("新数据", newData); // 更新排序后的选项数据
-
+      // console.log("新数据", newData);
+      // 更新排序后的选项数据
       var sortedCheckFields = newData.map(function (item) {
         return _objectSpread$9(_objectSpread$9({}, item), {}, {
           label: item.label,
@@ -19930,12 +19910,12 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
         return item.id;
       }); // 同时更新schema中的option顺序，以确保后续操作基于新的排序
 
-      var newSchema = _objectSpread$9({}, _this3.props.schema);
+      var newSchema = _objectSpread$9({}, _this2.props.schema);
 
       var isHaveOpenOption = sortedCheckFields.filter(function (e) {
         return e.remark === "openOption";
-      });
-      console.log("isHaveOpenOption", isHaveOpenOption);
+      }); // console.log("isHaveOpenOption", isHaveOpenOption);
+
       newSchema.option = isHaveOpenOption ? sortedCheckFields == null ? void 0 : sortedCheckFields.filter(function (e) {
         return e.remark !== "openOption";
       }) : sortedCheckFields;
@@ -19946,52 +19926,60 @@ var ACheckDrag = /*#__PURE__*/function (_Viewer) {
       //   newSchema,
       // });
 
-      _this3.checkFields = sortedCheckFields;
-      _this3.dataRef = sortedData;
+      _this2.checkFields = sortedCheckFields;
+      _this2.dataRef = sortedData;
       setTimeout(function () {
-        _this3.setState({
+        _this2.setState({
           data: sortedData
         });
 
-        MUtil.set(_this3.props.database, _this3.props.path, sortedData);
+        MUtil.set(_this2.props.database, _this2.props.path, sortedData);
       }, 0);
     };
 
-    return jsxRuntime.jsx(SortDrag, {
-      changeOriginDataSource: changeOriginDataSource,
-      sortList: (_ref = checkboxs != null ? checkboxs : []) == null ? void 0 : _ref.map(function (cpn, index) {
-        var _this3$checkFields$in, _this3$checkFields$in2, _this3$dataRef, _this3$dataRef2, _this3$checkFields$in3, _this3$checkFields$in4;
-
-        var checkFieldsValue;
-        checkFieldsValue = (_this3$checkFields$in = _this3.checkFields[index]) == null ? void 0 : _this3$checkFields$in.value;
-        var isOpenOp = ((_this3$checkFields$in2 = _this3.checkFields[index]) == null ? void 0 : _this3$checkFields$in2.remark) === "openOption";
+    var sortList = (_ref = checkboxs != null ? checkboxs : []) == null ? void 0 : _ref.map(function (cpn, index) {
+      var _this2$checkFields$in, _this2$checkFields$in2, _this2$dataRef, _this2$dataRef2, _this2$checkFields$in3, _this2$checkFields$in4;
+
+      var checkFieldsValue;
+      checkFieldsValue = (_this2$checkFields$in = _this2.checkFields[index]) == null ? void 0 : _this2$checkFields$in.value;
+      var isOpenOp = ((_this2$checkFields$in2 = _this2.checkFields[index]) == null ? void 0 : _this2$checkFields$in2.remark) === "openOption";
+
+      if (isOpenOp) {
+        checkFieldsValue = _this2._inputBoxValue;
+      } // console.log("DRAG: 实际传递进如 SortDrag的数据", {
+      //   data,
+      //   dataRef: this.dataRef,
+      //   checkFields: this.checkFields,
+      //   schema: this.props.database,
+      //   isOpenOp,
+      //   openValue: this._inputBoxValue,
+      // });
 
-        if (isOpenOp) {
-          checkFieldsValue = _this3._inputBoxValue;
-        }
 
-        console.log("DRAG: 实际传递进如 SortDrag的数据", {
-          data: data,
-          dataRef: _this3.dataRef,
-          checkFields: _this3.checkFields,
-          schema: _this3.props.database,
-          isOpenOp: isOpenOp,
-          openValue: _this3._inputBoxValue
-        });
-        return {
-          isChecked: _this3.dataRef ? ((_this3$dataRef = _this3.dataRef) == null ? void 0 : _this3$dataRef.findIndex(function (e) {
-            return e === checkFieldsValue;
-          })) !== -1 : false,
-          checkedIndex: ((_this3$dataRef2 = _this3.dataRef) == null ? void 0 : _this3$dataRef2.findIndex(function (e) {
-            return e === checkFieldsValue;
-          })) + 1,
-          cpn: cpn,
-          id: "" + checkFieldsValue,
-          label: (_this3$checkFields$in3 = _this3.checkFields[index]) == null ? void 0 : _this3$checkFields$in3.label,
-          remark: (_this3$checkFields$in4 = _this3.checkFields[index]) == null ? void 0 : _this3$checkFields$in4.remark
-        };
-      })
+      return {
+        isChecked: _this2.dataRef ? ((_this2$dataRef = _this2.dataRef) == null ? void 0 : _this2$dataRef.findIndex(function (e) {
+          return e === checkFieldsValue;
+        })) !== -1 : false,
+        checkedIndex: ((_this2$dataRef2 = _this2.dataRef) == null ? void 0 : _this2$dataRef2.findIndex(function (e) {
+          return e === checkFieldsValue;
+        })) + 1,
+        cpn: cpn,
+        id: "" + checkFieldsValue,
+        label: (_this2$checkFields$in3 = _this2.checkFields[index]) == null ? void 0 : _this2$checkFields$in3.label,
+        remark: (_this2$checkFields$in4 = _this2.checkFields[index]) == null ? void 0 : _this2$checkFields$in4.remark
+      };
     });
+    var finalSortList = sortList.filter(function (item) {
+      return item.isChecked;
+    }).sort(function (a, b) {
+      return a.checkedIndex - b.checkedIndex;
+    }).concat(sortList.filter(function (item) {
+      return !item.isChecked;
+    }));
+    return jsxRuntime.jsx(SortDrag, {
+      changeOriginDataSource: changeOriginDataSource,
+      sortList: finalSortList
+    }, MUtil.unique());
   };
 
   return ACheckDrag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [

package/src/ui/editor/complex/ACheckDrag.tsx

@@ -95,7 +95,7 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
     snapshot?: any
   ): void {
     setTimeout(() => {
-      console.log("DRAG: 组件更新", this.checkFields, this.state.data);
+      // console.log("DRAG: 组件更新", this.checkFields, this.state.data);
     }, 2000);
   }
 
@@ -150,7 +150,7 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
                 this.props.schema,
                 true
               );
-              console.log("当前选中的数据ccc", currentCheckValue);
+              // console.log("当前选中的数据ccc", currentCheckValue);
               this.dataRef = currentCheckValue;
               setTimeout(() => {
                 super.changeValue(currentCheckValue);
@@ -165,7 +165,7 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
             </span>
             <span
               onBlurCapture={(e) => {
-                console.log("输入框失去焦点", this.dataRef);
+                // console.log("输入框失去焦点", this.dataRef);
                 setTimeout(() => {
                   super.changeValue(this.dataRef);
                   this.setState({
@@ -183,7 +183,7 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
                   const matchEnum = this.checkFields.find(
                     (e) => e.value === str && e.remark !== "openOption"
                   );
-                  console.log("输入框 afterChange", str, values, matchEnum);
+                  // console.log("输入框 afterChange", str, values, matchEnum);
                   if (matchEnum) {
                     // 不能让用户输入某个枚举值
                     this._inputBoxValue = "";
@@ -212,11 +212,11 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
                       this.checkFields = this.checkFields.map((e) =>
                         e.remark === "openOption" ? { ...e, value: str } : e
                       );
-                      console.log("输入框数据", {
-                        values,
-                        checkFields: this.checkFields,
-                        dataRef: this.dataRef,
-                      });
+                      // console.log("输入框数据", {
+                      //   values,
+                      //   checkFields: this.checkFields,
+                      //   dataRef: this.dataRef,
+                      // });
                       MUtil.set(this.props.database, this.props.path, values);
                     }
                   }
@@ -246,7 +246,7 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
               this.props.schema,
               true
             );
-            console.log("当前变化的 value", values, currentCheckValue);
+            // console.log("当前变化的 value", values, currentCheckValue);
             const max = this.props.schema.max;
             if (max > 0 && e.target.checked) {
               const len = values ? values.length : 0;
@@ -279,7 +279,7 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
 
     // 定义更换数据源的方法
     const changeOriginDataSource = (newData) => {
-      console.log("新数据", newData);
+      // console.log("新数据", newData);
       // 更新排序后的选项数据
       const sortedCheckFields = newData.map((item) => ({
         ...item,
@@ -296,7 +296,7 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
       const isHaveOpenOption = sortedCheckFields.filter(
         (e) => e.remark === "openOption"
       );
-      console.log("isHaveOpenOption", isHaveOpenOption);
+      // console.log("isHaveOpenOption", isHaveOpenOption);
       newSchema.option = isHaveOpenOption
         ? sortedCheckFields?.filter((e) => e.remark !== "openOption")
         : sortedCheckFields;
@@ -319,37 +319,43 @@ export class ACheckDrag extends Viewer<ACheckDragState> {
       }, 0);
     };
 
+    const sortList = (checkboxs ?? [])?.map((cpn, index) => {
+      let checkFieldsValue;
+      checkFieldsValue = this.checkFields[index]?.value;
+      const isOpenOp = this.checkFields[index]?.remark === "openOption";
+      if (isOpenOp) {
+        checkFieldsValue = this._inputBoxValue;
+      }
+      // console.log("DRAG: 实际传递进如 SortDrag的数据", {
+      //   data,
+      //   dataRef: this.dataRef,
+      //   checkFields: this.checkFields,
+      //   schema: this.props.database,
+      //   isOpenOp,
+      //   openValue: this._inputBoxValue,
+      // });
+
+      return {
+        isChecked: this.dataRef
+          ? this.dataRef?.findIndex((e) => e === checkFieldsValue) !== -1
+          : false,
+        checkedIndex:
+          this.dataRef?.findIndex((e) => e === checkFieldsValue) + 1,
+        cpn,
+        id: "" + checkFieldsValue,
+        label: this.checkFields[index]?.label,
+        remark: this.checkFields[index]?.remark,
+      };
+    });
+    const finalSortList = sortList
+      .filter((item) => item.isChecked)
+      .sort((a, b) => a.checkedIndex - b.checkedIndex)
+      .concat(sortList.filter((item) => !item.isChecked));
     return (
       <SortDrag
+        key={MUtil.unique()}
         changeOriginDataSource={changeOriginDataSource}
-        sortList={(checkboxs ?? [])?.map((cpn, index) => {
-          let checkFieldsValue;
-          checkFieldsValue = this.checkFields[index]?.value;
-          const isOpenOp = this.checkFields[index]?.remark === "openOption";
-          if (isOpenOp) {
-            checkFieldsValue = this._inputBoxValue;
-          }
-          console.log("DRAG: 实际传递进如 SortDrag的数据", {
-            data,
-            dataRef: this.dataRef,
-            checkFields: this.checkFields,
-            schema: this.props.database,
-            isOpenOp,
-            openValue: this._inputBoxValue,
-          });
-
-          return {
-            isChecked: this.dataRef
-              ? this.dataRef?.findIndex((e) => e === checkFieldsValue) !== -1
-              : false,
-            checkedIndex:
-              this.dataRef?.findIndex((e) => e === checkFieldsValue) + 1,
-            cpn,
-            id: "" + checkFieldsValue,
-            label: this.checkFields[index]?.label,
-            remark: this.checkFields[index]?.remark,
-          };
-        })}
+        sortList={finalSortList}
       />
     );
   }

package/src/ui/widget/SortDrag.less

@@ -7,7 +7,7 @@
     // border: 1px solid #d9d9d9;
     // border-radius: 4px;
     // box-shadow: 0 1px 2px #00000008;
-    font-size: 16px;
+    font-size: 14px;
     transition: background 0.2s, box-shadow 0.2s;
     cursor: grab;
 

package/src/ui/widget/SortDrag.tsx

@@ -21,7 +21,7 @@ type SortDragProps = {
 
 const SortDrag: React.FC<SortDragProps> = memo((props) => {
   const { sortList, changeOriginDataSource } = props;
-  const [items, setItems] = useState<SortDragProps["sortList"]>([]);
+  const [items, setItems] = useState<SortDragProps["sortList"]>(sortList);
 
   // 记录当前拖拽的 item id
   const [draggingId, setDraggingId] = useState<string | null>(null);
@@ -99,19 +99,6 @@ const SortDrag: React.FC<SortDragProps> = memo((props) => {
     };
   }, [items]);
 
-  useEffect(() => {
-    const checkedItems = sortList
-      .filter((item) => item.isChecked)
-      .sort((a, b) => a.checkedIndex - b.checkedIndex);
-    const unCheckedItems = sortList.filter((item) => !item.isChecked);
-    console.log("DRAG: 排序之后实际展示的数据", {
-      sortList,
-      checkedItems,
-      unCheckedItems,
-    });
-    setItems([...checkedItems, ...unCheckedItems]);
-  }, [sortList]);
-
   return (
     <div className="sortDrag">
       {items.map((item, index) => {