@cloudtower/eagle 0.22.40 → 0.23.0

package/dist/umd/index.js

@@ -3620,6 +3620,15 @@
     ) : void 0);
   };
 
+  const CheckboxColumnHeaderCell = ({ onChange }) => {
+    const _onChange = React.useCallback(
+      (e) => {
+        onChange(e.target.checked, true);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ React.createElement(antd.Checkbox, { onChange: _onChange });
+  };
   const CheckboxColumnBodyCell = ({ data, column, index, onChange }) => {
     const value = data[index][column.key] === void 0 ? column.defaultValue : data[index][column.key];
     const _onChange = React.useCallback(
@@ -3757,11 +3766,7 @@
       column.subTitle
     );
   };
-  const TextColumnBodyCell = ({
-    data,
-    column,
-    index
-  }) => {
+  const TextColumnBodyCell = ({ data, column, index }) => {
     const text = column.displayText || data[index][column.key];
     const CellDescription = React.useMemo(() => {
       var _a, _b;
@@ -3790,7 +3795,7 @@
     input: InputColumnHeaderCell,
     password: InputColumnHeaderCell,
     affix: AffixColumnHeaderCell,
-    checkbox: TextColumnHeaderCell
+    checkbox: CheckboxColumnHeaderCell
   };
   const ColumnBodyImpls = {
     text: TextColumnBodyCell,
@@ -3810,10 +3815,17 @@
     return /* @__PURE__ */React.createElement(antd.Form.Item, {
       className: FormItemStyle,
       validateStatus,
-      help: validateStatus ? message : ""
+      help: validateStatus && message ? message : void 0
     }, children);
   };
 
+  var ValidateTriggerType = /* @__PURE__ */ ((ValidateTriggerType2) => {
+    ValidateTriggerType2[ValidateTriggerType2["Normal"] = 0] = "Normal";
+    ValidateTriggerType2[ValidateTriggerType2["Aggressive"] = 1] = "Aggressive";
+    ValidateTriggerType2[ValidateTriggerType2["Lazy"] = 2] = "Lazy";
+    return ValidateTriggerType2;
+  })(ValidateTriggerType || {});
+
   var __defProp$5 = Object.defineProperty;
   var __defProps$5 = Object.defineProperties;
   var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
@@ -3836,40 +3848,77 @@
   const TableFormBodyCell = (props) => {
     const {
       column,
-      disabled,
       index: rowIndex,
       data,
-      onChange,
       latestData,
+      validateTriggerType,
       isRowError,
-      onBlur
+      getRowValidateResult,
+      disabled,
+      onChange,
+      onBlur,
+      validateAll
     } = props;
+    const [validateResult, setValidateResult] = React.useState();
+    const isTouched = React.useRef(false);
     const width = typeof column.width === "number" ? column.width + "px" : column.width;
-    const _onChange = React.useCallback(
-      (value, data2) => {
-        const newData = data2.map(
-          (row, i) => i === rowIndex ? __spreadProps$5(__spreadValues$5({}, row), { [column.key]: value }) : row
-        );
-        onChange == null ? void 0 : onChange(newData, rowIndex, column.key);
+    const triggerValidate = React.useCallback(
+      (currentValue) => {
+        var _a;
+        const value = currentValue || data[rowIndex][column.key];
+        const rowData = __spreadProps$5(__spreadValues$5({}, data[rowIndex]), { [column.key]: value });
+        const rowValidateRes = getRowValidateResult(rowData);
+        if (rowValidateRes) {
+          return;
+        }
+        const result = (_a = column.validator) == null ? void 0 : _a.call(column, {
+          value,
+          rowIndex,
+          rowData: data[rowIndex]
+        });
+        const isError = result ? typeof result === "string" : false;
+        setValidateResult({ msg: result || "", isError });
       },
-      [rowIndex, onChange, column]
+      [data, column, rowIndex, getRowValidateResult]
     );
+    React.useEffect(() => {
+      if (validateAll) {
+        isTouched.current = true;
+        triggerValidate();
+      }
+    }, [validateAll, triggerValidate]);
+    const _onChange = (value, data2) => {
+      const newData = data2.map(
+        (row, i) => i === rowIndex ? __spreadProps$5(__spreadValues$5({}, row), { [column.key]: value }) : row
+      );
+      onChange == null ? void 0 : onChange(newData, rowIndex, column.key);
+      if (validateTriggerType === ValidateTriggerType.Normal && isTouched.current || validateTriggerType === ValidateTriggerType.Aggressive) {
+        triggerValidate(value);
+      }
+    };
     const _onBlur = React.useCallback(() => {
+      isTouched.current = true;
+      triggerValidate();
       onBlur == null ? void 0 : onBlur(data, rowIndex, column.key);
-    }, [rowIndex, column, onBlur, data]);
+    }, [rowIndex, column, onBlur, data, triggerValidate]);
     const renderDefaultComponent = () => {
       if (!column.type)
         return null;
       const CellComponent = ColumnBodyImpls[column.type];
       return /* @__PURE__ */ React.createElement(
         CellComponent,
-        __spreadProps$5(__spreadValues$5({}, props), {
-          customData: column.customData,
+        {
+          disabled,
+          data,
+          index: rowIndex,
+          latestData,
+          column,
+          visible: props.visible,
           onChange: (val) => {
             _onChange(val, data);
           },
           onBlur: _onBlur
-        })
+        }
       );
     };
     const Cell = column.render ? column.render({
@@ -3894,24 +3943,6 @@
       })) || null;
       return typeof Result === "string" ? /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l4_regular, "cell-description") }, Result) : Result;
     }, [rowIndex, data, latestData, column]);
-    const validateResult = React.useMemo(() => {
-      var _a;
-      if (isRowError) {
-        return {
-          msg: "",
-          isError: true
-        };
-      }
-      const value = data[rowIndex][column.key];
-      const result = (_a = column.validator) == null ? void 0 : _a.call(column, {
-        value,
-        rowIndex,
-        rowData: data[rowIndex]
-      });
-      if (typeof result === "string" && result) {
-        return { msg: result, isError: true };
-      }
-    }, [data, column, rowIndex, isRowError]);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -3925,8 +3956,8 @@
       /* @__PURE__ */ React.createElement(
         FormItem,
         {
-          validateStatus: (validateResult == null ? void 0 : validateResult.isError) ? "error" : "",
-          message: (validateResult == null ? void 0 : validateResult.isError) && validateResult.msg ? validateResult.msg : void 0
+          validateStatus: isRowError || (validateResult == null ? void 0 : validateResult.isError) ? "error" : "",
+          message: isRowError ? "" : validateResult == null ? void 0 : validateResult.msg
         },
         Cell
       ),
@@ -3960,24 +3991,35 @@
       latestData,
       disabled,
       passwordVisible,
-      deletable,
+      deleteConfig,
       draggable,
       rowIndex,
       provided,
       snapshot,
+      validateTriggerType = ValidateTriggerType.Normal,
       updateData,
       onBodyBlur,
       renderRowDescription,
-      rowValidator
+      rowValidator,
+      validateAll
     } = props;
     const rowData = data[rowIndex];
-    const deleteRow = (index, data2) => {
-      const newData = [...data2];
-      newData.splice(index, 1);
-      updateData(newData);
-    };
-    const getRowActions = (index, rowDeletable) => {
-      const isRowDeleteDisabled = rowDeletable === false;
+    const [rowError, setRowError] = React.useState();
+    const deleteRow = React.useCallback(
+      (index, data2) => {
+        const newData = [...data2];
+        newData.splice(index, 1);
+        updateData(newData);
+      },
+      [updateData]
+    );
+    const RowActions = React.useMemo(() => {
+      var _a;
+      const isRowDeleteDisabled = (_a = deleteConfig == null ? void 0 : deleteConfig.specifyRowDeleteDisabled) == null ? void 0 : _a.call(
+        deleteConfig,
+        rowIndex,
+        data
+      );
       const DeleteIcon = /* @__PURE__ */ React.createElement(
         Icon,
         {
@@ -3987,20 +4029,21 @@
           onClick: () => {
             if (isRowDeleteDisabled)
               return;
-            deleteRow(index, data);
+            deleteRow(rowIndex, data);
           }
         }
       );
       const FinalRenderIcon = isRowDeleteDisabled ? DeleteIcon : /* @__PURE__ */ React.createElement(Tooltip, { title: parrot.parrotI18n.t("components.remove") }, DeleteIcon);
-      return deletable ? [FinalRenderIcon] : void 0;
-    };
-    const RowValidateResult = React.useMemo(() => {
-      const result = rowValidator == null ? void 0 : rowValidator(rowIndex, data[rowIndex]);
-      if (typeof result === "string" && result) {
-        return /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l4_regular, "row-error-message") }, result);
-      }
-      return null;
-    }, [rowValidator, rowIndex, data]);
+      return (deleteConfig == null ? void 0 : deleteConfig.deletable) ? [FinalRenderIcon] : void 0;
+    }, [rowIndex, deleteConfig, data, deleteRow]);
+    const getRowValidateResult = React.useCallback(
+      (rowData2) => {
+        const result = rowValidator == null ? void 0 : rowValidator(rowIndex, rowData2);
+        setRowError(result);
+        return result;
+      },
+      [rowValidator, rowIndex]
+    );
     const Cells = columns.map((col) => {
       return /* @__PURE__ */ React.createElement(
         TableFormBodyCell,
@@ -4014,7 +4057,10 @@
           onChange: updateData,
           onBlur: onBodyBlur,
           visible: passwordVisible,
-          isRowError: !!RowValidateResult
+          validateTriggerType,
+          isRowError: !!rowError,
+          getRowValidateResult,
+          validateAll
         }
       );
     });
@@ -4044,11 +4090,11 @@
           "eagle-table-form-row",
           (snapshot == null ? void 0 : snapshot.isDragging) && "isDragging"
         ),
-        actions: getRowActions(rowIndex, rowData.deletable)
+        actions: RowActions
       },
       DraggableHandle,
       Cells,
-      RowValidateResult,
+      rowError ? /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l4_regular, "row-error-message") }, rowError) : null,
       RowDescription
     );
   };
@@ -4116,7 +4162,7 @@
     const [errMsg, setErrMsg] = React.useState();
     const width = Number.isNaN(Number(column.width)) ? column.width : column.width + "px";
     const headerOnChange = React.useCallback(
-      (value) => {
+      (value, shouldUpdateData = false) => {
         var _a;
         const err = (_a = column.validator) == null ? void 0 : _a.call(column, { value, isHeader: true });
         setErrMsg(err || void 0);
@@ -4126,7 +4172,7 @@
             [column.key]: shouldAutoIncrease && typeof value === "string" ? increaseLastNumber(value, rowIndex) : value
           });
         });
-        onChange == null ? void 0 : onChange(newData, column.key);
+        onChange == null ? void 0 : onChange(newData, column.key, shouldUpdateData);
       },
       [onChange, data, column]
     );
@@ -4162,14 +4208,14 @@
           visibility: column.hidden ? "hidden" : "visible"
         }
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l3_bold_title, TitleStyle) }, column.title),
+      disableBatchFilling ? null : /* @__PURE__ */ React.createElement(
         FormItem,
         {
           validateStatus: typeof errMsg === "string" && errMsg ? "error" : "",
           message: errMsg || void 0
         },
-        /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l3_bold_title, TitleStyle) }, column.title),
-        disableBatchFilling ? null : renderCell()
+        renderCell()
       )
     );
   };
@@ -4196,16 +4242,18 @@
   const DEFAULT_ROW_COUNT = 3;
   const TableForm = React.forwardRef(
     ({
-      defaultData,
+      defaultData = [],
       columns,
       disabled,
       rowAddConfig,
-      deletable,
+      deleteConfig,
       size = "default",
       className,
       draggable,
       disableBatchFilling = false,
       rowSplitType = "border",
+      validateTriggerType,
+      maxHeight,
       renderRowDescription,
       rowValidator,
       onHeaderChange,
@@ -4213,12 +4261,10 @@
       onBodyChange,
       onBodyBlur
     }, ref) => {
-      const treatedDefaultData = React.useMemo(() => {
-        return defaultData || [...Array(DEFAULT_ROW_COUNT)].map(() => genEmptyRow(columns));
-      }, [defaultData, columns]);
-      const [data, setData] = React.useState(treatedDefaultData);
+      const [data, setData] = React.useState(defaultData);
       const [passwordVisible, setPasswordVisible] = React.useState(false);
-      const [latestData, setLatestData] = React.useState(treatedDefaultData);
+      const [latestData, setLatestData] = React.useState(defaultData);
+      const [validateAll, setValidateAll] = React.useState(false);
       const updateData = React.useCallback(
         (value, rowIndex, columnKey) => {
           setLatestData(value);
@@ -4227,12 +4273,23 @@
         },
         [onBodyChange]
       );
+      React.useLayoutEffect(() => {
+        if (defaultData.length === 0) {
+          updateData(
+            [...Array(DEFAULT_ROW_COUNT)].map(() => genEmptyRow(columns))
+          );
+        }
+      }, []);
       const handleBatchChange = React.useCallback(
-        (newData, columnKey) => {
+        (newData, columnKey, shouldUpdateData) => {
           setLatestData(newData);
           onHeaderChange == null ? void 0 : onHeaderChange(newData, columnKey);
+          if (shouldUpdateData) {
+            setData(newData);
+            onBodyChange == null ? void 0 : onBodyChange(newData, void 0, columnKey);
+          }
         },
-        [onHeaderChange]
+        [onHeaderChange, onBodyChange]
       );
       const handleBatchBlur = React.useCallback(
         (key, error) => {
@@ -4257,6 +4314,9 @@
         () => ({
           setData: (data2) => {
             updateData(data2);
+          },
+          validateWholeFields() {
+            setValidateAll(true);
           }
         }),
         [updateData]
@@ -4277,31 +4337,46 @@
           }
         );
       });
-      return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(TableFormWrapper, { className: `table-form row-split-by-${rowSplitType}` }, /* @__PURE__ */ React.createElement(antd.List, { size, className: `size-${size}` }, /* @__PURE__ */ React.createElement(
-        antd.List.Item,
+      const tableFormWrapperStyle = React.useMemo(
+        () => maxHeight ? {
+          maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight
+        } : void 0,
+        []
+      );
+      return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
+        TableFormWrapper,
         {
-          className: "eagle-table-form-header",
-          actions: deletable ? [/* @__PURE__ */ React.createElement(React.Fragment, null)] : void 0
+          className: `table-form row-split-by-${rowSplitType}`,
+          style: tableFormWrapperStyle
         },
-        draggable ? /* @__PURE__ */ React.createElement(DraggableHandleWrapper, null) : null,
-        headerCells
-      ), /* @__PURE__ */ React.createElement(
-        TableFormBodyRows,
-        {
-          data,
-          latestData,
-          columns,
-          passwordVisible,
-          deletable,
-          disabled,
-          draggable,
-          rowSplitType,
-          onBodyBlur,
-          updateData,
-          renderRowDescription,
-          rowValidator
-        }
-      ))), (rowAddConfig == null ? void 0 : rowAddConfig.addible) ? /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(antd.List, { size, className: `size-${size}` }, /* @__PURE__ */ React.createElement(
+          antd.List.Item,
+          {
+            className: "eagle-table-form-header",
+            actions: (deleteConfig == null ? void 0 : deleteConfig.deletable) ? [/* @__PURE__ */ React.createElement(React.Fragment, null)] : void 0
+          },
+          draggable ? /* @__PURE__ */ React.createElement(DraggableHandleWrapper, null) : null,
+          headerCells
+        ), /* @__PURE__ */ React.createElement(
+          TableFormBodyRows,
+          {
+            data,
+            latestData,
+            columns,
+            passwordVisible,
+            deleteConfig,
+            disabled,
+            draggable,
+            rowSplitType,
+            validateTriggerType,
+            onBodyBlur,
+            updateData,
+            renderRowDescription,
+            rowValidator,
+            validateAll
+          }
+        ))
+      ), (rowAddConfig == null ? void 0 : rowAddConfig.addible) ? /* @__PURE__ */ React.createElement(
         AddRowButton,
         {
           config: rowAddConfig,
@@ -4409,7 +4484,7 @@
       input: {}
     }, defaultTz ? /* @__PURE__ */React.createElement(antd.Select.Option, {
       value: DefaultTimeValue,
-      label: parrot.parrotI18n.t("components.default_time_zone"),
+      label: `${parrot.parrotI18n.t("components.default_time_zone")} (${getUTCOffsetText(defaultTz.offset)})`,
       className: OptionWrapperStyle
     }, /* @__PURE__ */React.createElement(TimeZoneOption, {
       key: DefaultTimeValue,
@@ -4417,7 +4492,7 @@
       timeZone: defaultTz
     })) : void 0, /* @__PURE__ */React.createElement(antd.Select.Option, {
       value: BrowserTimeValue,
-      label: parrot.parrotI18n.t("components.browser_time_zone"),
+      label: `${parrot.parrotI18n.t("components.browser_time_zone")} (${getUTCOffsetText(browserTz.offset)})`,
       className: OptionWrapperStyle
     }, /* @__PURE__ */React.createElement(TimeZoneOption, {
       key: BrowserTimeValue,
@@ -4437,18 +4512,20 @@
       }
     })), timeZoneOptionGroups);
   };
+  function getUTCOffsetText(offset) {
+    if (offset === 0) {
+      return "UTC";
+    } else if (offset < 0) {
+      return `UTC${offset}:00`;
+    } else {
+      return `UTC+${offset}:00`;
+    }
+  }
   const TimeZoneOption = ({
     timeZone,
     customLabel
   }) => {
-    let tagText = "";
-    if (timeZone.offset === 0) {
-      tagText = "UTC";
-    } else if (timeZone.offset < 0) {
-      tagText = `UTC${timeZone.offset}:00`;
-    } else {
-      tagText = `UTC+${timeZone.offset}:00`;
-    }
+    let tagText = getUTCOffsetText(timeZone.offset);
     return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
       className: OptionFirstLineStyle
     }, /* @__PURE__ */React.createElement("span", {
@@ -4726,6 +4803,7 @@
   exports.UIKitProvider = UIKitProvider;
   exports.UIKitStore = UIKitStore;
   exports.UserSource = UserSource;
+  exports.ValidateTriggerType = ValidateTriggerType;
   exports.antdKit = antdKit;
   exports.closeModal = closeModal;
   exports.createBatchMessageMethods = createBatchMessageMethods;