react-table-edit 0.3.1 → 0.3.2

package/dist/index.d.mts

@@ -152,4 +152,21 @@ declare const notificationError: (param: string) => string;
 declare const notificationSuccess: (param: string) => string;
 declare const messageBoxConfirm2: (t: TFunction<"translation", undefined>, data: any, data2: any, message: string) => Promise<boolean>;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess };
+declare const useOnClickOutside: (ref: any, handler: any) => void;
+declare const isNullOrUndefined: (d: any) => boolean;
+declare const generateUUID: () => string;
+/**
+ * format chuỗi kí tự số
+ * @param str chuỗi số cần format
+ * @param decimalSeparator kí tự thập phân
+ * @param thousandSeparator kí tự phân cách hàng nghìn
+ * @param fraction số kí tự thập phân
+ * @param isDone đã nhập xong
+ * @returns
+ */
+declare const objSymbolDecimal: any;
+declare const objSymbolThousand: any;
+declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
+declare const roundNumber: (num: number, fraction: number) => number;
+
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.d.ts

@@ -152,4 +152,21 @@ declare const notificationError: (param: string) => string;
 declare const notificationSuccess: (param: string) => string;
 declare const messageBoxConfirm2: (t: TFunction<"translation", undefined>, data: any, data2: any, message: string) => Promise<boolean>;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess };
+declare const useOnClickOutside: (ref: any, handler: any) => void;
+declare const isNullOrUndefined: (d: any) => boolean;
+declare const generateUUID: () => string;
+/**
+ * format chuỗi kí tự số
+ * @param str chuỗi số cần format
+ * @param decimalSeparator kí tự thập phân
+ * @param thousandSeparator kí tự phân cách hàng nghìn
+ * @param fraction số kí tự thập phân
+ * @param isDone đã nhập xong
+ * @returns
+ */
+declare const objSymbolDecimal: any;
+declare const objSymbolThousand: any;
+declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
+declare const roundNumber: (num: number, fraction: number) => number;
+
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.js

@@ -31,6 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Table_edit_exports = {};
 __export(Table_edit_exports, {
   default: () => Table_edit_default,
+  formartNumberic: () => formartNumberic,
+  generateUUID: () => generateUUID,
+  isNullOrUndefined: () => isNullOrUndefined,
   messageBoxConfirm: () => messageBoxConfirm,
   messageBoxConfirm2: () => messageBoxConfirm2,
   messageBoxConfirmDelete: () => messageBoxConfirmDelete,
@@ -38,7 +41,11 @@ __export(Table_edit_exports, {
   messageHtmlBoxConfirm: () => messageHtmlBoxConfirm,
   messageHtmlBoxError: () => messageHtmlBoxError,
   notificationError: () => notificationError,
-  notificationSuccess: () => notificationSuccess
+  notificationSuccess: () => notificationSuccess,
+  objSymbolDecimal: () => objSymbolDecimal,
+  objSymbolThousand: () => objSymbolThousand,
+  roundNumber: () => roundNumber,
+  useOnClickOutside: () => useOnClickOutside
 });
 module.exports = __toCommonJS(Table_edit_exports);
 
@@ -269,6 +276,8 @@ var generateUUID = () => {
     return (c === "x" ? r : 3).toString(16);
   });
 };
+var objSymbolDecimal = { 0: ",", 1: "." };
+var objSymbolThousand = { 1: ",", 0: "." };
 var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone) => {
   if (isDone) {
     str = roundNumber(Number(str), fraction);
@@ -281,6 +290,12 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
     if (arr[0].length < 3) {
       return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
     } else {
+      let flagNegative = false;
+      if (arr[0][0] === "-") {
+        flagNegative = true;
+        arr[0] = arr[0].substring(1, arr[0].length);
+        console.log(arr[0].substring(1, arr[0].length));
+      }
       let count = 0;
       for (let i = arr[0].length - 2; i >= 0; i--) {
         if ((arr[0].length - i - count) % 3 === 0 && i > 0) {
@@ -294,6 +309,9 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
       if (isDone) {
         flag = (arr[1]?.substring(0, fraction) ?? "") !== "";
       }
+      if (flagNegative) {
+        arr[0] = "-".concat(arr[0]);
+      }
       return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
     }
   } else {
@@ -1561,28 +1579,30 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   (0, import_react12.useEffect)(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
-    let headerLevelCol = 0;
+    let headerLevelRow = 0;
     if (levelCol) {
-      headerLevelCol = levelCol;
+      headerLevelRow = levelCol;
     } else {
-      headerLevelCol = stretchColumn(columns, 0);
-      setLevelCol(headerLevelCol);
+      headerLevelRow = stretchColumn(columns, 0);
+      setLevelCol(headerLevelRow);
     }
-    for (let i = 0; i < headerLevelCol; i++) {
+    for (let i = 0; i < headerLevelRow; i++) {
       arrHeaderColumns.push([]);
     }
-    getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelCol);
+    console.log(headerLevelRow);
+    getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
     setHeaderColumns(arrHeaderColumns);
+    console.log(arrHeaderColumns);
     setContentColumns(arrContentColumns);
-  }, [columns]);
-  const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevel) => {
-    array.forEach((item) => {
-      const ele = { ...item, visible: item.invisibleDisable ? item.visible : contentColumns[level]?.visible ?? item.visible, rowspan: 1, index: 0 };
+  }, []);
+  const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
+    array.forEach((item, index) => {
+      const ele = { ...item, visible: item.invisibleDisable ? item.visible : contentColumns[index]?.visible ?? item.visible, rowspan: 1, index: 0 };
       if (item.columns && item.columns?.length > 0) {
-        const countLevel = getNestedChildren(item.columns, arrHeaderColumns, arrContentColumns, level + 1, maxLevel);
-        arrHeaderColumns[maxLevel - 1 - countLevel].push(ele);
+        const countLevel = getNestedChildren(item.columns, arrHeaderColumns, arrContentColumns, level + 1, maxLevelRow);
+        arrHeaderColumns[maxLevelRow - 1 - countLevel].push(ele);
       } else {
-        ele.rowspan = maxLevel - level;
+        ele.rowspan = maxLevelRow - level;
         ele.index = arrContentColumns.length;
         arrHeaderColumns[level].push(ele);
         arrContentColumns.push(ele);
@@ -1590,11 +1610,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     });
     return level;
   };
-  const stretchColumn = (subColumns, headerLevelCol) => {
-    let count = headerLevelCol + 1;
+  const stretchColumn = (subColumns, headerLevelRow) => {
+    let count = headerLevelRow + 1;
     subColumns.map((item) => {
       if (item.columns && item.columns.length > 0) {
-        const newCount = stretchColumn(item.columns, headerLevelCol + 1);
+        const newCount = stretchColumn(item.columns, headerLevelRow + 1);
         if (newCount > count) {
           count = newCount;
         }
@@ -2592,7 +2612,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
                   className: (0, import_classnames10.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
-                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
+                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
+                    color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
                   },
                   children: [
                     typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : !col.haveToolTip ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2634,7 +2655,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
             right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
             width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-            minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+            minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
             maxWidth: col.maxWidth
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2723,7 +2744,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               ),
               style: {
                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-                minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+                minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
                 top: `${indexParent * 42}px`,
                 left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
                 right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
@@ -2760,8 +2781,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         style: {
           left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
           right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-          minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+          width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
+          minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
           maxWidth: col.maxWidth,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
@@ -2882,6 +2903,9 @@ var table_default = TableEdit;
 var Table_edit_default = table_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  formartNumberic,
+  generateUUID,
+  isNullOrUndefined,
   messageBoxConfirm,
   messageBoxConfirm2,
   messageBoxConfirmDelete,
@@ -2889,5 +2913,9 @@ var Table_edit_default = table_default;
   messageHtmlBoxConfirm,
   messageHtmlBoxError,
   notificationError,
-  notificationSuccess
+  notificationSuccess,
+  objSymbolDecimal,
+  objSymbolThousand,
+  roundNumber,
+  useOnClickOutside
 });

package/dist/index.mjs

@@ -225,6 +225,8 @@ var generateUUID = () => {
     return (c === "x" ? r : 3).toString(16);
   });
 };
+var objSymbolDecimal = { 0: ",", 1: "." };
+var objSymbolThousand = { 1: ",", 0: "." };
 var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone) => {
   if (isDone) {
     str = roundNumber(Number(str), fraction);
@@ -237,6 +239,12 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
     if (arr[0].length < 3) {
       return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
     } else {
+      let flagNegative = false;
+      if (arr[0][0] === "-") {
+        flagNegative = true;
+        arr[0] = arr[0].substring(1, arr[0].length);
+        console.log(arr[0].substring(1, arr[0].length));
+      }
       let count = 0;
       for (let i = arr[0].length - 2; i >= 0; i--) {
         if ((arr[0].length - i - count) % 3 === 0 && i > 0) {
@@ -250,6 +258,9 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
       if (isDone) {
         flag = (arr[1]?.substring(0, fraction) ?? "") !== "";
       }
+      if (flagNegative) {
+        arr[0] = "-".concat(arr[0]);
+      }
       return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
     }
   } else {
@@ -1527,28 +1538,30 @@ var TableEdit = forwardRef2((props, ref) => {
   useEffect5(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
-    let headerLevelCol = 0;
+    let headerLevelRow = 0;
     if (levelCol) {
-      headerLevelCol = levelCol;
+      headerLevelRow = levelCol;
     } else {
-      headerLevelCol = stretchColumn(columns, 0);
-      setLevelCol(headerLevelCol);
+      headerLevelRow = stretchColumn(columns, 0);
+      setLevelCol(headerLevelRow);
     }
-    for (let i = 0; i < headerLevelCol; i++) {
+    for (let i = 0; i < headerLevelRow; i++) {
       arrHeaderColumns.push([]);
     }
-    getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelCol);
+    console.log(headerLevelRow);
+    getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
     setHeaderColumns(arrHeaderColumns);
+    console.log(arrHeaderColumns);
     setContentColumns(arrContentColumns);
-  }, [columns]);
-  const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevel) => {
-    array.forEach((item) => {
-      const ele = { ...item, visible: item.invisibleDisable ? item.visible : contentColumns[level]?.visible ?? item.visible, rowspan: 1, index: 0 };
+  }, []);
+  const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
+    array.forEach((item, index) => {
+      const ele = { ...item, visible: item.invisibleDisable ? item.visible : contentColumns[index]?.visible ?? item.visible, rowspan: 1, index: 0 };
       if (item.columns && item.columns?.length > 0) {
-        const countLevel = getNestedChildren(item.columns, arrHeaderColumns, arrContentColumns, level + 1, maxLevel);
-        arrHeaderColumns[maxLevel - 1 - countLevel].push(ele);
+        const countLevel = getNestedChildren(item.columns, arrHeaderColumns, arrContentColumns, level + 1, maxLevelRow);
+        arrHeaderColumns[maxLevelRow - 1 - countLevel].push(ele);
       } else {
-        ele.rowspan = maxLevel - level;
+        ele.rowspan = maxLevelRow - level;
         ele.index = arrContentColumns.length;
         arrHeaderColumns[level].push(ele);
         arrContentColumns.push(ele);
@@ -1556,11 +1569,11 @@ var TableEdit = forwardRef2((props, ref) => {
     });
     return level;
   };
-  const stretchColumn = (subColumns, headerLevelCol) => {
-    let count = headerLevelCol + 1;
+  const stretchColumn = (subColumns, headerLevelRow) => {
+    let count = headerLevelRow + 1;
     subColumns.map((item) => {
       if (item.columns && item.columns.length > 0) {
-        const newCount = stretchColumn(item.columns, headerLevelCol + 1);
+        const newCount = stretchColumn(item.columns, headerLevelRow + 1);
         if (newCount > count) {
           count = newCount;
         }
@@ -2558,7 +2571,8 @@ var TableEdit = forwardRef2((props, ref) => {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
                   className: classnames6("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
-                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
+                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
+                    color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
                   },
                   children: [
                     typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : !col.haveToolTip ? /* @__PURE__ */ jsx12("div", { className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }) : /* @__PURE__ */ jsx12(
@@ -2600,7 +2614,7 @@ var TableEdit = forwardRef2((props, ref) => {
             left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
             right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
             width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-            minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+            minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
             maxWidth: col.maxWidth
           },
           children: /* @__PURE__ */ jsx12(
@@ -2689,7 +2703,7 @@ var TableEdit = forwardRef2((props, ref) => {
               ),
               style: {
                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-                minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+                minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
                 top: `${indexParent * 42}px`,
                 left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
                 right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
@@ -2726,8 +2740,8 @@ var TableEdit = forwardRef2((props, ref) => {
         style: {
           left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
           right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-          minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+          width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
+          minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto",
           maxWidth: col.maxWidth,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
@@ -2848,6 +2862,9 @@ var table_default = TableEdit;
 var Table_edit_default = table_default;
 export {
   Table_edit_default as default,
+  formartNumberic,
+  generateUUID,
+  isNullOrUndefined,
   messageBoxConfirm,
   messageBoxConfirm2,
   messageBoxConfirmDelete,
@@ -2855,5 +2872,9 @@ export {
   messageHtmlBoxConfirm,
   messageHtmlBoxError,
   notificationError,
-  notificationSuccess
+  notificationSuccess,
+  objSymbolDecimal,
+  objSymbolThousand,
+  roundNumber,
+  useOnClickOutside
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-table-edit",
   "license": "MIT",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",