react-table-edit 1.2.1 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -27,16 +27,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
27
27
  ));
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
 
30
- // index.ts
31
- var Table_edit_exports = {};
32
- __export(Table_edit_exports, {
30
+ // src/index.ts
31
+ var src_exports = {};
32
+ __export(src_exports, {
33
33
  InputStyleComponent: () => InputStyleComponent,
34
34
  SelectTable: () => SelectTable,
35
35
  SelectTableTree: () => SelectTableTree,
36
36
  TabsMenuComponent: () => TabsMenuComponent,
37
37
  checkDecimalSeparator: () => checkDecimalSeparator,
38
38
  checkThousandSeparator: () => checkThousandSeparator,
39
- default: () => Table_edit_default,
39
+ default: () => src_default,
40
40
  formartNumberic: () => formartNumberic,
41
41
  generateUUID: () => generateUUID,
42
42
  isNullOrUndefined: () => isNullOrUndefined,
@@ -53,16 +53,16 @@ __export(Table_edit_exports, {
53
53
  roundNumber: () => roundNumber,
54
54
  useOnClickOutside: () => useOnClickOutside
55
55
  });
56
- module.exports = __toCommonJS(Table_edit_exports);
56
+ module.exports = __toCommonJS(src_exports);
57
57
 
58
- // test-app/src/component/table/index.tsx
58
+ // src/component/table/index.tsx
59
59
  var import_react16 = require("react");
60
60
  var import_reactstrap11 = require("reactstrap");
61
61
  var import_classnames14 = __toESM(require("classnames"));
62
62
  var import_react_i18next12 = require("react-i18next");
63
63
  var import_becoxy_icons7 = require("becoxy-icons");
64
64
 
65
- // test-app/src/component/react-input/index.tsx
65
+ // src/component/react-input/index.tsx
66
66
  var import_becoxy_icons = require("becoxy-icons");
67
67
  var import_classnames = __toESM(require("classnames"));
68
68
  var import_react = require("react");
@@ -99,7 +99,7 @@ var ReactInput = (props) => {
99
99
  };
100
100
  var react_input_default = ReactInput;
101
101
 
102
- // test-app/src/component/notifications.tsx
102
+ // src/component/notifications.tsx
103
103
  var import_react2 = require("react");
104
104
  var import_sweetalert2 = __toESM(require("sweetalert2"));
105
105
  var import_sweetalert2_react_content = __toESM(require("sweetalert2-react-content"));
@@ -236,7 +236,7 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
236
236
  });
237
237
  };
238
238
 
239
- // test-app/src/component/utils.ts
239
+ // src/component/utils.ts
240
240
  var import_react3 = require("react");
241
241
  var useOnClickOutside = (ref, handler) => {
242
242
  (0, import_react3.useEffect)(
@@ -362,10 +362,10 @@ var roundNumber = (num, fraction) => {
362
362
  return result;
363
363
  };
364
364
 
365
- // test-app/src/component/table/index.tsx
365
+ // src/component/table/index.tsx
366
366
  var import_moment3 = __toESM(require("moment"));
367
367
 
368
- // test-app/src/component/edit-form/index.tsx
368
+ // src/component/edit-form/index.tsx
369
369
  var import_react8 = require("react");
370
370
  var import_reactstrap6 = require("reactstrap");
371
371
  var import_react_hook_form4 = require("react-hook-form");
@@ -373,7 +373,7 @@ var import_yup = require("@hookform/resolvers/yup");
373
373
  var import_react_i18next5 = require("react-i18next");
374
374
  var import_classnames6 = __toESM(require("classnames"));
375
375
 
376
- // test-app/src/component/input-text/index.tsx
376
+ // src/component/input-text/index.tsx
377
377
  var import_react_hook_form = require("react-hook-form");
378
378
  var import_reactstrap2 = require("reactstrap");
379
379
  var import_classnames2 = __toESM(require("classnames"));
@@ -464,7 +464,7 @@ var TextInput = (props) => {
464
464
  };
465
465
  var input_text_default = TextInput;
466
466
 
467
- // test-app/src/component/input-number/index.tsx
467
+ // src/component/input-number/index.tsx
468
468
  var import_react_hook_form2 = require("react-hook-form");
469
469
  var import_reactstrap3 = require("reactstrap");
470
470
  var import_classnames3 = __toESM(require("classnames"));
@@ -598,13 +598,13 @@ var NumberInput = (props) => {
598
598
  };
599
599
  var input_number_default = NumberInput;
600
600
 
601
- // test-app/src/component/edit-form/select-table/index.tsx
601
+ // src/component/edit-form/select-table/index.tsx
602
602
  var import_react_hook_form3 = require("react-hook-form");
603
603
  var import_reactstrap5 = require("reactstrap");
604
604
  var import_classnames5 = __toESM(require("classnames"));
605
605
  var import_react7 = require("react");
606
606
 
607
- // test-app/src/component/select-table/index.tsx
607
+ // src/component/select-table/index.tsx
608
608
  var import_react6 = __toESM(require("react"));
609
609
  var import_reactstrap4 = require("reactstrap");
610
610
  var import_react_i18next3 = require("react-i18next");
@@ -1173,7 +1173,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1173
1173
  );
1174
1174
  });
1175
1175
 
1176
- // test-app/src/component/edit-form/select-table/index.tsx
1176
+ // src/component/edit-form/select-table/index.tsx
1177
1177
  var import_react_i18next4 = require("react-i18next");
1178
1178
  var import_jsx_runtime6 = require("react/jsx-runtime");
1179
1179
  var SelectTableBox = (props) => {
@@ -1290,7 +1290,7 @@ var SelectTableBox = (props) => {
1290
1290
  };
1291
1291
  var select_table_default = SelectTableBox;
1292
1292
 
1293
- // test-app/src/component/edit-form/index.tsx
1293
+ // src/component/edit-form/index.tsx
1294
1294
  var import_jsx_runtime7 = require("react/jsx-runtime");
1295
1295
  var defaultWidth = 200;
1296
1296
  var EditForm = (0, import_react8.forwardRef)((props, ref) => {
@@ -1626,12 +1626,12 @@ var EditForm = (0, import_react8.forwardRef)((props, ref) => {
1626
1626
  });
1627
1627
  var edit_form_default = EditForm;
1628
1628
 
1629
- // test-app/src/component/sidebar-setting-column/index.tsx
1629
+ // src/component/sidebar-setting-column/index.tsx
1630
1630
  var import_react10 = require("react");
1631
1631
  var import_reactstrap7 = require("reactstrap");
1632
1632
  var import_react_i18next7 = require("react-i18next");
1633
1633
 
1634
- // test-app/src/component/modal-header/index.tsx
1634
+ // src/component/modal-header/index.tsx
1635
1635
  var import_becoxy_icons3 = require("becoxy-icons");
1636
1636
  var import_classnames7 = __toESM(require("classnames"));
1637
1637
  var import_react_i18next6 = require("react-i18next");
@@ -1675,7 +1675,7 @@ var ModalHeader = (props) => {
1675
1675
  };
1676
1676
  var modal_header_default = ModalHeader;
1677
1677
 
1678
- // test-app/src/component/sidebar/index.tsx
1678
+ // src/component/sidebar/index.tsx
1679
1679
  var import_becoxy_icons4 = require("becoxy-icons");
1680
1680
  var import_classnames8 = __toESM(require("classnames"));
1681
1681
  var import_react9 = require("react");
@@ -1779,7 +1779,7 @@ var Sidebar = (props) => {
1779
1779
  };
1780
1780
  var sidebar_default = Sidebar;
1781
1781
 
1782
- // test-app/src/component/sidebar-setting-column/index.tsx
1782
+ // src/component/sidebar-setting-column/index.tsx
1783
1783
  var import_classnames9 = __toESM(require("classnames"));
1784
1784
  var import_jsx_runtime10 = require("react/jsx-runtime");
1785
1785
  var SidebarSetColumn = (props) => {
@@ -2031,7 +2031,7 @@ var SidebarSetColumn = (props) => {
2031
2031
  };
2032
2032
  var sidebar_setting_column_default = SidebarSetColumn;
2033
2033
 
2034
- // test-app/src/component/table/paging/index.tsx
2034
+ // src/component/table/paging/index.tsx
2035
2035
  var import_becoxy_icons5 = require("becoxy-icons");
2036
2036
  var import_classnames10 = __toESM(require("classnames"));
2037
2037
  var import_react11 = require("react");
@@ -2117,7 +2117,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
2117
2117
  ] }) });
2118
2118
  };
2119
2119
 
2120
- // test-app/src/component/table/header.tsx
2120
+ // src/component/table/header.tsx
2121
2121
  var import_react12 = require("react");
2122
2122
  var import_classnames11 = __toESM(require("classnames"));
2123
2123
  var import_reactstrap8 = require("reactstrap");
@@ -2207,13 +2207,13 @@ var HeaderTableCol = (props) => {
2207
2207
  };
2208
2208
  var header_default = HeaderTableCol;
2209
2209
 
2210
- // test-app/src/component/table/command.tsx
2210
+ // src/component/table/command.tsx
2211
2211
  var import_react14 = require("react");
2212
2212
  var import_classnames12 = __toESM(require("classnames"));
2213
2213
  var import_reactstrap9 = require("reactstrap");
2214
2214
  var import_react_i18next10 = require("react-i18next");
2215
2215
 
2216
- // test-app/src/component/icon/index.tsx
2216
+ // src/component/icon/index.tsx
2217
2217
  var Icon = __toESM(require("becoxy-icons"));
2218
2218
  var import_react13 = require("react");
2219
2219
  var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -2228,7 +2228,7 @@ var IconCustom = (props) => {
2228
2228
  };
2229
2229
  var icon_default = IconCustom;
2230
2230
 
2231
- // test-app/src/component/table/command.tsx
2231
+ // src/component/table/command.tsx
2232
2232
  var import_jsx_runtime14 = require("react/jsx-runtime");
2233
2233
  var CommandElement = (props) => {
2234
2234
  const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
@@ -2262,7 +2262,7 @@ var CommandElement = (props) => {
2262
2262
  };
2263
2263
  var command_default = CommandElement;
2264
2264
 
2265
- // test-app/src/component/select-table-tree/index.tsx
2265
+ // src/component/select-table-tree/index.tsx
2266
2266
  var import_react15 = __toESM(require("react"));
2267
2267
  var import_reactstrap10 = require("reactstrap");
2268
2268
  var import_react_i18next11 = require("react-i18next");
@@ -2823,7 +2823,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
2823
2823
  );
2824
2824
  });
2825
2825
 
2826
- // test-app/src/component/table/index.tsx
2826
+ // src/component/table/index.tsx
2827
2827
  var import_react_number_format = require("react-number-format");
2828
2828
  var import_jsx_runtime16 = require("react/jsx-runtime");
2829
2829
  var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
@@ -3413,7 +3413,6 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3413
3413
  const focusNewElement = (col, row, onLoad = false) => {
3414
3414
  setTimeout(() => {
3415
3415
  const element = document.getElementById(`${idTable}-col${col}-row${row}`);
3416
- console.log(element);
3417
3416
  if (element) {
3418
3417
  if (element.className.includes("react-select") || element.className.includes("form-edit")) {
3419
3418
  element.getElementsByTagName("input")[0]?.focus();
@@ -3796,92 +3795,163 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3796
3795
  }
3797
3796
  }
3798
3797
  }, [selectedItem]);
3799
- const ContentColComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
3800
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: col.field === "command" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3801
- "td",
3802
- {
3803
- className: (0, import_classnames14.default)(
3804
- `r-rowcell p-0 fix-${col.fixedType}`,
3805
- { "cell-fixed": col.fixedType },
3806
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3807
- ),
3808
- style: {
3809
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3810
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3811
- textAlign: col.textAlign ? col.textAlign : "left"
3812
- },
3813
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
3814
- },
3815
- `col-${indexRow}-${indexCol}`
3816
- ) }) : col.field === "#" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3817
- "td",
3818
- {
3819
- className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
3820
- tabIndex: Number(`${indexRow}${indexCol}`),
3821
- style: {
3822
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3823
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3824
- textAlign: "center"
3825
- },
3826
- onCopy: (e) => {
3827
- if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3828
- navigator.clipboard.writeText(JSON.stringify(row));
3829
- notificationSuccess(t("CopySuccessful"));
3830
- e.stopPropagation();
3831
- }
3798
+ const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
3799
+ if (col.field === "command") {
3800
+ return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3801
+ "td",
3802
+ {
3803
+ className: (0, import_classnames14.default)(
3804
+ `r-rowcell p-0 fix-${col.fixedType}`,
3805
+ { "cell-fixed": col.fixedType },
3806
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
3807
+ ),
3808
+ style: {
3809
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3810
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3811
+ textAlign: col.textAlign ? col.textAlign : "left"
3812
+ },
3813
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
3832
3814
  },
3833
- onPaste: (e) => {
3834
- if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3835
- navigator.clipboard.readText().then((rs) => {
3836
- dataSource[indexRow] = JSON.parse(rs);
3837
- if (fieldKey) {
3838
- dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
3815
+ `col-${indexRow}-${indexCol}`
3816
+ );
3817
+ } else if (col.field === "#") {
3818
+ return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3819
+ "td",
3820
+ {
3821
+ className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
3822
+ tabIndex: Number(`${indexRow}${indexCol}`),
3823
+ style: {
3824
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3825
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3826
+ textAlign: "center"
3827
+ },
3828
+ onCopy: (e) => {
3829
+ if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3830
+ navigator.clipboard.writeText(JSON.stringify(row));
3831
+ notificationSuccess(t("CopySuccessful"));
3832
+ e.stopPropagation();
3833
+ }
3834
+ },
3835
+ onPaste: (e) => {
3836
+ if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3837
+ navigator.clipboard.readText().then((rs) => {
3838
+ dataSource[indexRow] = JSON.parse(rs);
3839
+ if (fieldKey) {
3840
+ dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
3841
+ }
3842
+ changeDataSource(dataSource);
3843
+ notificationSuccess(t("PasteSuccessful"));
3844
+ }).catch((ex) => {
3845
+ alert(ex);
3846
+ });
3847
+ e.stopPropagation();
3848
+ }
3849
+ },
3850
+ onClick: (e) => {
3851
+ if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3852
+ if (!editDisable && indexRow != indexFocus) {
3853
+ setIndexFocus(indexRow);
3839
3854
  }
3840
- changeDataSource(dataSource);
3841
- notificationSuccess(t("PasteSuccessful"));
3842
- }).catch((ex) => {
3843
- alert(ex);
3844
- });
3845
- e.stopPropagation();
3846
- }
3847
- },
3848
- onClick: (e) => {
3849
- if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3850
- if (!editDisable && indexRow != indexFocus) {
3851
- setIndexFocus(indexRow);
3855
+ e.stopPropagation();
3852
3856
  }
3853
- e.stopPropagation();
3854
- }
3855
- },
3856
- onKeyDown: (e) => {
3857
- if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3858
- handleDuplicate(row, indexRow);
3859
- e.preventDefault();
3860
- e.stopPropagation();
3861
- }
3857
+ },
3858
+ onKeyDown: (e) => {
3859
+ if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3860
+ handleDuplicate(row, indexRow);
3861
+ e.preventDefault();
3862
+ e.stopPropagation();
3863
+ }
3864
+ },
3865
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
3862
3866
  },
3863
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
3864
- },
3865
- `col-${indexRow}-${indexCol}`
3866
- ) : col.field === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3867
- "td",
3868
- {
3869
- className: (0, import_classnames14.default)(
3870
- `r-rowcell p-0 fix-${col.fixedType}`,
3871
- { "cell-fixed": col.fixedType },
3872
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3873
- ),
3874
- style: {
3875
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3876
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3877
- textAlign: col.textAlign ? col.textAlign : "center"
3867
+ `col-${indexRow}-${indexCol}`
3868
+ );
3869
+ } else if (col.field === "checkbox") {
3870
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3871
+ "td",
3872
+ {
3873
+ className: (0, import_classnames14.default)(
3874
+ `r-rowcell p-0 fix-${col.fixedType}`,
3875
+ { "cell-fixed": col.fixedType },
3876
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
3877
+ ),
3878
+ style: {
3879
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3880
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3881
+ textAlign: col.textAlign ? col.textAlign : "center"
3882
+ },
3883
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3884
+ "div",
3885
+ {
3886
+ className: "r-rowcell-div cursor-pointer",
3887
+ onClick: (e) => {
3888
+ if (selectEnable) {
3889
+ const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3890
+ if (index > -1) {
3891
+ if (isMulti) {
3892
+ selectedRows?.splice(index, 1);
3893
+ setSelectedRows([...selectedRows]);
3894
+ } else {
3895
+ setSelectedRows([]);
3896
+ }
3897
+ } else {
3898
+ if (isMulti) {
3899
+ setSelectedRows([...selectedRows, row]);
3900
+ } else {
3901
+ setSelectedRows([row]);
3902
+ }
3903
+ }
3904
+ e.stopPropagation();
3905
+ }
3906
+ },
3907
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3908
+ import_reactstrap11.Input,
3909
+ {
3910
+ checked: isSelected,
3911
+ type: "checkbox",
3912
+ className: "cursor-pointer",
3913
+ onChange: () => {
3914
+ },
3915
+ style: { textAlign: col.textAlign ?? "center" }
3916
+ }
3917
+ )
3918
+ }
3919
+ )
3878
3920
  },
3879
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3880
- "div",
3881
- {
3882
- className: "r-rowcell-div cursor-pointer",
3883
- onClick: (e) => {
3884
- if (selectEnable) {
3921
+ `col-${indexRow}-${indexCol}`
3922
+ );
3923
+ } else {
3924
+ let value = row[col.field];
3925
+ if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
3926
+ value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
3927
+ } else if (col.editType === "date") {
3928
+ value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy") : "";
3929
+ } else if (col.editType === "datetime") {
3930
+ value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy HH:mm") : "";
3931
+ }
3932
+ const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
3933
+ const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
3934
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3935
+ "td",
3936
+ {
3937
+ className: (0, import_classnames14.default)(
3938
+ `r-rowcell fix-${col.fixedType}`,
3939
+ { "cell-fixed": col.fixedType },
3940
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
3941
+ ),
3942
+ style: {
3943
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3944
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3945
+ padding: 0,
3946
+ textAlign: col.textAlign ? col.textAlign : "left"
3947
+ },
3948
+ onClick: (e) => {
3949
+ if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3950
+ if (!editDisable && indexRow != indexFocus) {
3951
+ setIndexFocus(indexRow);
3952
+ focusNewElement(indexCol + 1, indexRow + 1, true);
3953
+ }
3954
+ if (selectEnable && editDisable) {
3885
3955
  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3886
3956
  if (index > -1) {
3887
3957
  if (isMulti) {
@@ -3897,116 +3967,51 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3897
3967
  setSelectedRows([row]);
3898
3968
  }
3899
3969
  }
3900
- e.stopPropagation();
3901
3970
  }
3902
- },
3903
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3904
- import_reactstrap11.Input,
3905
- {
3906
- checked: isSelected,
3907
- type: "checkbox",
3908
- className: "cursor-pointer",
3909
- onChange: () => {
3910
- },
3911
- style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
3912
- }
3913
- )
3914
- }
3915
- )
3916
- },
3917
- `col-${indexRow}-${indexCol}`
3918
- ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContenComponent, { col, indexCol, indexRow, isSelected, row }) });
3919
- };
3920
- const ContenComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
3921
- let value = row[col.field];
3922
- if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
3923
- value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
3924
- } else if (col.editType === "date") {
3925
- value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy") : "";
3926
- } else if (col.editType === "datetime") {
3927
- value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy HH:mm") : "";
3928
- }
3929
- const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
3930
- const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
3931
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3932
- "td",
3933
- {
3934
- className: (0, import_classnames14.default)(
3935
- `r-rowcell fix-${col.fixedType}`,
3936
- { "cell-fixed": col.fixedType },
3937
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3938
- ),
3939
- style: {
3940
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3941
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3942
- padding: 0,
3943
- textAlign: col.textAlign ? col.textAlign : "left"
3944
- },
3945
- onClick: (e) => {
3946
- if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3947
- if (!editDisable && indexRow != indexFocus) {
3948
- setIndexFocus(indexRow);
3949
- focusNewElement(indexCol + 1, indexRow + 1, true);
3971
+ e.stopPropagation();
3950
3972
  }
3951
- if (selectEnable && editDisable) {
3952
- const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3953
- if (index > -1) {
3954
- if (isMulti) {
3955
- selectedRows?.splice(index, 1);
3956
- setSelectedRows([...selectedRows]);
3957
- } else {
3958
- setSelectedRows([]);
3959
- }
3960
- } else {
3961
- if (isMulti) {
3962
- setSelectedRows([...selectedRows, row]);
3963
- } else {
3964
- setSelectedRows([row]);
3973
+ },
3974
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3975
+ "div",
3976
+ {
3977
+ className: (0, import_classnames14.default)("r-rowcell-div"),
3978
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
3979
+ "div",
3980
+ {
3981
+ id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
3982
+ className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
3983
+ style: {
3984
+ margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
3985
+ color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
3986
+ },
3987
+ children: [
3988
+ typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
3989
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
3990
+ !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
3991
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3992
+ import_reactstrap11.UncontrolledTooltip,
3993
+ {
3994
+ target: `error-${indexRow}-${indexCol}`,
3995
+ className: "r-tooltip tooltip-error",
3996
+ children: errorMessage?.toString() ?? ""
3997
+ }
3998
+ )
3999
+ ]
3965
4000
  }
3966
- }
4001
+ )
3967
4002
  }
3968
- }
4003
+ )
3969
4004
  },
3970
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3971
- "div",
3972
- {
3973
- className: (0, import_classnames14.default)("r-rowcell-div"),
3974
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
3975
- "div",
3976
- {
3977
- id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
3978
- className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
3979
- style: {
3980
- margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
3981
- color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
3982
- },
3983
- children: [
3984
- typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
3985
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
3986
- !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
3987
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3988
- import_reactstrap11.UncontrolledTooltip,
3989
- {
3990
- target: `error-${indexRow}-${indexCol}`,
3991
- className: "r-tooltip tooltip-error",
3992
- children: errorMessage?.toString() ?? ""
3993
- }
3994
- )
3995
- ]
3996
- }
3997
- )
3998
- }
3999
- )
4000
- },
4001
- `col-${indexRow}-${indexCol}`
4002
- ) }, indexCol);
4005
+ `col-${indexRow}-${indexCol}`
4006
+ ) }, indexCol);
4007
+ }
4003
4008
  };
4004
4009
  const checkOverflow = (indexRow, indexCol) => {
4005
4010
  const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
4006
4011
  return element && element.scrollWidth > element.clientWidth;
4007
4012
  };
4008
- const FooterComponent = ({ col, indexCol }) => {
4009
- return col.visible !== false ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
4013
+ const renderFooterCol = (col, indexCol) => {
4014
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
4010
4015
  "td",
4011
4016
  {
4012
4017
  className: (0, import_classnames14.default)(
@@ -4022,9 +4027,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4022
4027
  return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
4023
4028
  }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
4024
4029
  }
4025
- ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
4030
+ ) }, `summarycell-${indexCol}`);
4026
4031
  };
4027
- const ToolbarTopComponent = () => {
4032
+ const renderToolbarTop = () => {
4028
4033
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
4029
4034
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
4030
4035
  return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
@@ -4037,7 +4042,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4037
4042
  }) })
4038
4043
  ] }) });
4039
4044
  };
4040
- const ToolbarBottomComponent = () => {
4045
+ const renderToolbarBottom = () => {
4041
4046
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
4042
4047
  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-left", children: [
4043
4048
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
@@ -4091,10 +4096,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4091
4096
  }
4092
4097
  return false;
4093
4098
  };
4094
- const TableComponent = () => {
4099
+ const renderData = () => {
4095
4100
  totalCount = 0;
4096
4101
  let countDisplay = -1;
4097
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: dataSource.map((row, indexRow) => {
4102
+ return dataSource.map((row, indexRow) => {
4098
4103
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
4099
4104
  const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
4100
4105
  if (flagSearch) {
@@ -4107,14 +4112,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4107
4112
  {
4108
4113
  className: (0, import_classnames14.default)("r-row", { "fisrt-row": countDisplay === 0 }),
4109
4114
  children: contentColumns.map((col, indexCol) => {
4110
- return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentColComponent, { col, row, indexCol, indexRow, isSelected }, `Content-${indexRow}-${indexCol}`);
4115
+ return renderContentCol(col, row, indexRow, indexCol, isSelected);
4111
4116
  })
4112
4117
  },
4113
4118
  `row-${indexRow}`
4114
4119
  );
4115
4120
  }
4116
4121
  }
4117
- }) });
4122
+ });
4118
4123
  };
4119
4124
  (0, import_react16.useEffect)(() => {
4120
4125
  if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
@@ -4124,7 +4129,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4124
4129
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react16.Fragment, { children: [
4125
4130
  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "react-table-edit", children: [
4126
4131
  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
4127
- toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolbarTopComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
4132
+ toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
4128
4133
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { style: { width: "100%" }, children: [
4129
4134
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
4130
4135
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
@@ -4148,12 +4153,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4148
4153
  );
4149
4154
  }) }, `header-${-indexParent}`);
4150
4155
  }) }),
4151
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TableComponent, {}) }),
4156
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
4152
4157
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
4153
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FooterComponent, { col, indexCol: index }, `summarycell-${index}`);
4158
+ return renderFooterCol(col, index);
4154
4159
  }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) })
4155
4160
  ] }) }),
4156
- toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolbarBottomComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
4161
+ toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
4157
4162
  ] }),
4158
4163
  pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
4159
4164
  PagingComponent,
@@ -4182,7 +4187,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4182
4187
  });
4183
4188
  var table_default = TableEdit;
4184
4189
 
4185
- // test-app/src/component/tab-menu/index.tsx
4190
+ // src/component/tab-menu/index.tsx
4186
4191
  var import_becoxy_icons8 = require("becoxy-icons");
4187
4192
  var import_classnames15 = __toESM(require("classnames"));
4188
4193
  var import_react17 = require("react");
@@ -4318,13 +4323,13 @@ var TabsMenuComponent = ({
4318
4323
  ] });
4319
4324
  };
4320
4325
 
4321
- // test-app/src/component/input-style/index.tsx
4326
+ // src/component/input-style/index.tsx
4322
4327
  var import_becoxy_icons9 = require("becoxy-icons");
4323
4328
  var import_reactstrap13 = require("reactstrap");
4324
4329
  var import_classnames16 = __toESM(require("classnames"));
4325
4330
  var import_react18 = require("react");
4326
4331
 
4327
- // test-app/src/component/input-style/fonts.ts
4332
+ // src/component/input-style/fonts.ts
4328
4333
  var OptionFont = [
4329
4334
  {
4330
4335
  value: 1,
@@ -5180,7 +5185,7 @@ var OptionFont = [
5180
5185
  }
5181
5186
  ];
5182
5187
 
5183
- // test-app/src/component/input-style/index.tsx
5188
+ // src/component/input-style/index.tsx
5184
5189
  var import_jsx_runtime18 = require("react/jsx-runtime");
5185
5190
  var InputStyleComponent = (props) => {
5186
5191
  const {
@@ -5313,8 +5318,8 @@ var InputStyleComponent = (props) => {
5313
5318
  ] }) });
5314
5319
  };
5315
5320
 
5316
- // index.ts
5317
- var Table_edit_default = table_default;
5321
+ // src/index.ts
5322
+ var src_default = table_default;
5318
5323
  // Annotate the CommonJS export names for ESM import in node:
5319
5324
  0 && (module.exports = {
5320
5325
  InputStyleComponent,