react-table-edit 1.1.9 → 1.2.1

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.
Files changed (3) hide show
  1. package/dist/index.js +204 -210
  2. package/dist/index.mjs +204 -210
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1102,8 +1102,6 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
1102
1102
  setOptionsLoad(arr);
1103
1103
  }, 500);
1104
1104
  }
1105
- } else {
1106
- loadOptions(void 0);
1107
1105
  }
1108
1106
  setSearchTerm(val.target.value);
1109
1107
  },
@@ -3415,6 +3413,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3415
3413
  const focusNewElement = (col, row, onLoad = false) => {
3416
3414
  setTimeout(() => {
3417
3415
  const element = document.getElementById(`${idTable}-col${col}-row${row}`);
3416
+ console.log(element);
3418
3417
  if (element) {
3419
3418
  if (element.className.includes("react-select") || element.className.includes("form-edit")) {
3420
3419
  element.getElementsByTagName("input")[0]?.focus();
@@ -3797,168 +3796,92 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3797
3796
  }
3798
3797
  }
3799
3798
  }, [selectedItem]);
3800
- const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
3801
- if (col.field === "command") {
3802
- return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3803
- "td",
3804
- {
3805
- className: (0, import_classnames14.default)(
3806
- `r-rowcell p-0 fix-${col.fixedType}`,
3807
- { "cell-fixed": col.fixedType },
3808
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3809
- ),
3810
- style: {
3811
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3812
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3813
- textAlign: col.textAlign ? col.textAlign : "left"
3814
- },
3815
- 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 }) })
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"
3816
3812
  },
3817
- `col-${indexRow}-${indexCol}`
3818
- );
3819
- } else if (col.field === "#") {
3820
- return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3821
- "td",
3822
- {
3823
- className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
3824
- tabIndex: Number(`${indexRow}${indexCol}`),
3825
- style: {
3826
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3827
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3828
- textAlign: "center"
3829
- },
3830
- onCopy: (e) => {
3831
- if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3832
- navigator.clipboard.writeText(JSON.stringify(row));
3833
- notificationSuccess(t("CopySuccessful"));
3834
- e.stopPropagation();
3835
- }
3836
- },
3837
- onPaste: (e) => {
3838
- if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3839
- navigator.clipboard.readText().then((rs) => {
3840
- dataSource[indexRow] = JSON.parse(rs);
3841
- if (fieldKey) {
3842
- dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
3843
- }
3844
- changeDataSource(dataSource);
3845
- notificationSuccess(t("PasteSuccessful"));
3846
- }).catch((ex) => {
3847
- alert(ex);
3848
- });
3849
- e.stopPropagation();
3850
- }
3851
- },
3852
- onClick: (e) => {
3853
- if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3854
- if (!editDisable && indexRow != indexFocus) {
3855
- setIndexFocus(indexRow);
3856
- }
3857
- e.stopPropagation();
3858
- }
3859
- },
3860
- onKeyDown: (e) => {
3861
- if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3862
- handleDuplicate(row, indexRow);
3863
- e.preventDefault();
3864
- e.stopPropagation();
3865
- }
3866
- },
3867
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
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"
3868
3825
  },
3869
- `col-${indexRow}-${indexCol}`
3870
- );
3871
- } else if (col.field === "checkbox") {
3872
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3873
- "td",
3874
- {
3875
- className: (0, import_classnames14.default)(
3876
- `r-rowcell p-0 fix-${col.fixedType}`,
3877
- { "cell-fixed": col.fixedType },
3878
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3879
- ),
3880
- style: {
3881
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3882
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3883
- textAlign: col.textAlign ? col.textAlign : "center"
3884
- },
3885
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3886
- "div",
3887
- {
3888
- className: "r-rowcell-div cursor-pointer",
3889
- onClick: (e) => {
3890
- if (selectEnable) {
3891
- const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3892
- if (index > -1) {
3893
- if (isMulti) {
3894
- selectedRows?.splice(index, 1);
3895
- setSelectedRows([...selectedRows]);
3896
- } else {
3897
- setSelectedRows([]);
3898
- }
3899
- } else {
3900
- if (isMulti) {
3901
- setSelectedRows([...selectedRows, row]);
3902
- } else {
3903
- setSelectedRows([row]);
3904
- }
3905
- }
3906
- e.stopPropagation();
3907
- }
3908
- },
3909
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3910
- import_reactstrap11.Input,
3911
- {
3912
- checked: isSelected,
3913
- type: "checkbox",
3914
- className: "cursor-pointer",
3915
- onChange: () => {
3916
- },
3917
- style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
3918
- }
3919
- )
3920
- }
3921
- )
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
+ }
3922
3832
  },
3923
- `col-${indexRow}-${indexCol}`
3924
- );
3925
- } else {
3926
- let value = row[col.field];
3927
- if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
3928
- value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
3929
- } else if (col.editType === "date") {
3930
- value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy") : "";
3931
- } else if (col.editType === "datetime") {
3932
- value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy HH:mm") : "";
3933
- }
3934
- const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
3935
- const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
3936
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3937
- "td",
3938
- {
3939
- className: (0, import_classnames14.default)(
3940
- `r-rowcell fix-${col.fixedType}`,
3941
- { "cell-fixed": col.fixedType },
3942
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3943
- ),
3944
- style: {
3945
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3946
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3947
- padding: 0,
3948
- textAlign: col.textAlign ? col.textAlign : "left"
3949
- },
3950
- onFocus: (e) => {
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];
3839
+ }
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") {
3951
3850
  if (!editDisable && indexRow != indexFocus) {
3952
3851
  setIndexFocus(indexRow);
3953
3852
  }
3954
3853
  e.stopPropagation();
3955
- },
3956
- onClick: (e) => {
3957
- if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3958
- if (!editDisable && indexRow != indexFocus) {
3959
- setIndexFocus(indexRow);
3960
- }
3961
- if (selectEnable && editDisable) {
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
+ }
3862
+ },
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"
3878
+ },
3879
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3880
+ "div",
3881
+ {
3882
+ className: "r-rowcell-div cursor-pointer",
3883
+ onClick: (e) => {
3884
+ if (selectEnable) {
3962
3885
  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3963
3886
  if (index > -1) {
3964
3887
  if (isMulti) {
@@ -3974,51 +3897,116 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3974
3897
  setSelectedRows([row]);
3975
3898
  }
3976
3899
  }
3900
+ e.stopPropagation();
3901
+ }
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 }
3977
3912
  }
3978
- e.stopPropagation();
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);
3979
3950
  }
3980
- },
3981
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3982
- "div",
3983
- {
3984
- className: (0, import_classnames14.default)("r-rowcell-div"),
3985
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
3986
- "div",
3987
- {
3988
- id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
3989
- className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
3990
- style: {
3991
- margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
3992
- color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
3993
- },
3994
- children: [
3995
- 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 }),
3996
- /* @__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 }) }),
3997
- !(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 }),
3998
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3999
- import_reactstrap11.UncontrolledTooltip,
4000
- {
4001
- target: `error-${indexRow}-${indexCol}`,
4002
- className: "r-tooltip tooltip-error",
4003
- children: errorMessage?.toString() ?? ""
4004
- }
4005
- )
4006
- ]
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([]);
4007
3959
  }
4008
- )
3960
+ } else {
3961
+ if (isMulti) {
3962
+ setSelectedRows([...selectedRows, row]);
3963
+ } else {
3964
+ setSelectedRows([row]);
3965
+ }
3966
+ }
4009
3967
  }
4010
- )
3968
+ }
4011
3969
  },
4012
- `col-${indexRow}-${indexCol}`
4013
- ) }, indexCol);
4014
- }
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);
4015
4003
  };
4016
4004
  const checkOverflow = (indexRow, indexCol) => {
4017
4005
  const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
4018
4006
  return element && element.scrollWidth > element.clientWidth;
4019
4007
  };
4020
- const renderFooterCol = (col, indexCol) => {
4021
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
4008
+ const FooterComponent = ({ col, indexCol }) => {
4009
+ return col.visible !== false ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
4022
4010
  "td",
4023
4011
  {
4024
4012
  className: (0, import_classnames14.default)(
@@ -4034,9 +4022,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4034
4022
  return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
4035
4023
  }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
4036
4024
  }
4037
- ) }, `summarycell-${indexCol}`);
4025
+ ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
4038
4026
  };
4039
- const renderToolbarTop = () => {
4027
+ const ToolbarTopComponent = () => {
4040
4028
  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: [
4041
4029
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
4042
4030
  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}`) : "";
@@ -4049,7 +4037,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4049
4037
  }) })
4050
4038
  ] }) });
4051
4039
  };
4052
- const renderToolbarBottom = () => {
4040
+ const ToolbarBottomComponent = () => {
4053
4041
  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: [
4054
4042
  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-left", children: [
4055
4043
  /* @__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") }) }),
@@ -4074,13 +4062,19 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4074
4062
  }),
4075
4063
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
4076
4064
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_reactstrap11.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
4077
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.Info, { className: "cursor-pointer" }) }),
4078
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
4079
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
4080
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
4081
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
4082
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\xE1n h\xE0ng" })
4083
- ] }) })
4065
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownToggle, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.Info, { className: "cursor-pointer text-primary" }) }),
4066
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
4067
+ import_reactstrap11.DropdownMenu,
4068
+ {
4069
+ className: "formula-dropdown icon-dropdown",
4070
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("ul", { className: "mb-0 pe-50", children: [
4071
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
4072
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
4073
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
4074
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\xE1n h\xE0ng" })
4075
+ ] })
4076
+ }
4077
+ )
4084
4078
  ] }) })
4085
4079
  ] })
4086
4080
  ] }) });
@@ -4097,10 +4091,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4097
4091
  }
4098
4092
  return false;
4099
4093
  };
4100
- const renderData = () => {
4094
+ const TableComponent = () => {
4101
4095
  totalCount = 0;
4102
4096
  let countDisplay = -1;
4103
- return dataSource.map((row, indexRow) => {
4097
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: dataSource.map((row, indexRow) => {
4104
4098
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
4105
4099
  const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
4106
4100
  if (flagSearch) {
@@ -4113,14 +4107,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4113
4107
  {
4114
4108
  className: (0, import_classnames14.default)("r-row", { "fisrt-row": countDisplay === 0 }),
4115
4109
  children: contentColumns.map((col, indexCol) => {
4116
- return renderContentCol(col, row, indexRow, indexCol, isSelected);
4110
+ return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentColComponent, { col, row, indexCol, indexRow, isSelected }, `Content-${indexRow}-${indexCol}`);
4117
4111
  })
4118
4112
  },
4119
4113
  `row-${indexRow}`
4120
4114
  );
4121
4115
  }
4122
4116
  }
4123
- });
4117
+ }) });
4124
4118
  };
4125
4119
  (0, import_react16.useEffect)(() => {
4126
4120
  if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
@@ -4130,7 +4124,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4130
4124
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react16.Fragment, { children: [
4131
4125
  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "react-table-edit", children: [
4132
4126
  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
4133
- toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
4127
+ toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolbarTopComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
4134
4128
  /* @__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: [
4135
4129
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
4136
4130
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
@@ -4154,12 +4148,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4154
4148
  );
4155
4149
  }) }, `header-${-indexParent}`);
4156
4150
  }) }),
4157
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
4151
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TableComponent, {}) }),
4158
4152
  /* @__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) => {
4159
- return renderFooterCol(col, index);
4153
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FooterComponent, { col, indexCol: index }, `summarycell-${index}`);
4160
4154
  }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) })
4161
4155
  ] }) }),
4162
- toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
4156
+ toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolbarBottomComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
4163
4157
  ] }),
4164
4158
  pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
4165
4159
  PagingComponent,
package/dist/index.mjs CHANGED
@@ -1063,8 +1063,6 @@ var SelectTable = forwardRef((props, ref) => {
1063
1063
  setOptionsLoad(arr);
1064
1064
  }, 500);
1065
1065
  }
1066
- } else {
1067
- loadOptions(void 0);
1068
1066
  }
1069
1067
  setSearchTerm(val.target.value);
1070
1068
  },
@@ -3384,6 +3382,7 @@ var TableEdit = forwardRef4((props, ref) => {
3384
3382
  const focusNewElement = (col, row, onLoad = false) => {
3385
3383
  setTimeout(() => {
3386
3384
  const element = document.getElementById(`${idTable}-col${col}-row${row}`);
3385
+ console.log(element);
3387
3386
  if (element) {
3388
3387
  if (element.className.includes("react-select") || element.className.includes("form-edit")) {
3389
3388
  element.getElementsByTagName("input")[0]?.focus();
@@ -3766,168 +3765,92 @@ var TableEdit = forwardRef4((props, ref) => {
3766
3765
  }
3767
3766
  }
3768
3767
  }, [selectedItem]);
3769
- const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
3770
- if (col.field === "command") {
3771
- return col.visible !== false && /* @__PURE__ */ jsx16(
3772
- "td",
3773
- {
3774
- className: classnames9(
3775
- `r-rowcell p-0 fix-${col.fixedType}`,
3776
- { "cell-fixed": col.fixedType },
3777
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3778
- ),
3779
- style: {
3780
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3781
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3782
- textAlign: col.textAlign ? col.textAlign : "left"
3783
- },
3784
- children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
3768
+ const ContentColComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
3769
+ return /* @__PURE__ */ jsx16(Fragment21, { children: col.field === "command" ? /* @__PURE__ */ jsx16(Fragment21, { children: /* @__PURE__ */ jsx16(
3770
+ "td",
3771
+ {
3772
+ className: classnames9(
3773
+ `r-rowcell p-0 fix-${col.fixedType}`,
3774
+ { "cell-fixed": col.fixedType },
3775
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
3776
+ ),
3777
+ style: {
3778
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3779
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3780
+ textAlign: col.textAlign ? col.textAlign : "left"
3785
3781
  },
3786
- `col-${indexRow}-${indexCol}`
3787
- );
3788
- } else if (col.field === "#") {
3789
- return col.visible !== false && /* @__PURE__ */ jsx16(
3790
- "td",
3791
- {
3792
- className: classnames9(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
3793
- tabIndex: Number(`${indexRow}${indexCol}`),
3794
- style: {
3795
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3796
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3797
- textAlign: "center"
3798
- },
3799
- onCopy: (e) => {
3800
- if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3801
- navigator.clipboard.writeText(JSON.stringify(row));
3802
- notificationSuccess(t("CopySuccessful"));
3803
- e.stopPropagation();
3804
- }
3805
- },
3806
- onPaste: (e) => {
3807
- if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3808
- navigator.clipboard.readText().then((rs) => {
3809
- dataSource[indexRow] = JSON.parse(rs);
3810
- if (fieldKey) {
3811
- dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
3812
- }
3813
- changeDataSource(dataSource);
3814
- notificationSuccess(t("PasteSuccessful"));
3815
- }).catch((ex) => {
3816
- alert(ex);
3817
- });
3818
- e.stopPropagation();
3819
- }
3820
- },
3821
- onClick: (e) => {
3822
- if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3823
- if (!editDisable && indexRow != indexFocus) {
3824
- setIndexFocus(indexRow);
3825
- }
3826
- e.stopPropagation();
3827
- }
3828
- },
3829
- onKeyDown: (e) => {
3830
- if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3831
- handleDuplicate(row, indexRow);
3832
- e.preventDefault();
3833
- e.stopPropagation();
3834
- }
3835
- },
3836
- children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div", children: indexRow + 1 })
3782
+ children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
3783
+ },
3784
+ `col-${indexRow}-${indexCol}`
3785
+ ) }) : col.field === "#" ? /* @__PURE__ */ jsx16(
3786
+ "td",
3787
+ {
3788
+ className: classnames9(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
3789
+ tabIndex: Number(`${indexRow}${indexCol}`),
3790
+ style: {
3791
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3792
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3793
+ textAlign: "center"
3837
3794
  },
3838
- `col-${indexRow}-${indexCol}`
3839
- );
3840
- } else if (col.field === "checkbox") {
3841
- return /* @__PURE__ */ jsx16(
3842
- "td",
3843
- {
3844
- className: classnames9(
3845
- `r-rowcell p-0 fix-${col.fixedType}`,
3846
- { "cell-fixed": col.fixedType },
3847
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3848
- ),
3849
- style: {
3850
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3851
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3852
- textAlign: col.textAlign ? col.textAlign : "center"
3853
- },
3854
- children: /* @__PURE__ */ jsx16(
3855
- "div",
3856
- {
3857
- className: "r-rowcell-div cursor-pointer",
3858
- onClick: (e) => {
3859
- if (selectEnable) {
3860
- const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3861
- if (index > -1) {
3862
- if (isMulti) {
3863
- selectedRows?.splice(index, 1);
3864
- setSelectedRows([...selectedRows]);
3865
- } else {
3866
- setSelectedRows([]);
3867
- }
3868
- } else {
3869
- if (isMulti) {
3870
- setSelectedRows([...selectedRows, row]);
3871
- } else {
3872
- setSelectedRows([row]);
3873
- }
3874
- }
3875
- e.stopPropagation();
3876
- }
3877
- },
3878
- children: /* @__PURE__ */ jsx16(
3879
- Input9,
3880
- {
3881
- checked: isSelected,
3882
- type: "checkbox",
3883
- className: "cursor-pointer",
3884
- onChange: () => {
3885
- },
3886
- style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
3887
- }
3888
- )
3889
- }
3890
- )
3795
+ onCopy: (e) => {
3796
+ if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3797
+ navigator.clipboard.writeText(JSON.stringify(row));
3798
+ notificationSuccess(t("CopySuccessful"));
3799
+ e.stopPropagation();
3800
+ }
3891
3801
  },
3892
- `col-${indexRow}-${indexCol}`
3893
- );
3894
- } else {
3895
- let value = row[col.field];
3896
- if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
3897
- value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
3898
- } else if (col.editType === "date") {
3899
- value = value ? moment3(value).format("DD/MM/yyyy") : "";
3900
- } else if (col.editType === "datetime") {
3901
- value = value ? moment3(value).format("DD/MM/yyyy HH:mm") : "";
3902
- }
3903
- const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
3904
- const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
3905
- return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
3906
- "td",
3907
- {
3908
- className: classnames9(
3909
- `r-rowcell fix-${col.fixedType}`,
3910
- { "cell-fixed": col.fixedType },
3911
- { "r-active": isSelected && editDisable || indexFocus === indexRow }
3912
- ),
3913
- style: {
3914
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3915
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3916
- padding: 0,
3917
- textAlign: col.textAlign ? col.textAlign : "left"
3918
- },
3919
- onFocus: (e) => {
3802
+ onPaste: (e) => {
3803
+ if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3804
+ navigator.clipboard.readText().then((rs) => {
3805
+ dataSource[indexRow] = JSON.parse(rs);
3806
+ if (fieldKey) {
3807
+ dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
3808
+ }
3809
+ changeDataSource(dataSource);
3810
+ notificationSuccess(t("PasteSuccessful"));
3811
+ }).catch((ex) => {
3812
+ alert(ex);
3813
+ });
3814
+ e.stopPropagation();
3815
+ }
3816
+ },
3817
+ onClick: (e) => {
3818
+ if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3920
3819
  if (!editDisable && indexRow != indexFocus) {
3921
3820
  setIndexFocus(indexRow);
3922
3821
  }
3923
3822
  e.stopPropagation();
3924
- },
3925
- onClick: (e) => {
3926
- if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3927
- if (!editDisable && indexRow != indexFocus) {
3928
- setIndexFocus(indexRow);
3929
- }
3930
- if (selectEnable && editDisable) {
3823
+ }
3824
+ },
3825
+ onKeyDown: (e) => {
3826
+ if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
3827
+ handleDuplicate(row, indexRow);
3828
+ e.preventDefault();
3829
+ e.stopPropagation();
3830
+ }
3831
+ },
3832
+ children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div", children: indexRow + 1 })
3833
+ },
3834
+ `col-${indexRow}-${indexCol}`
3835
+ ) : col.field === "checkbox" ? /* @__PURE__ */ jsx16(
3836
+ "td",
3837
+ {
3838
+ className: classnames9(
3839
+ `r-rowcell p-0 fix-${col.fixedType}`,
3840
+ { "cell-fixed": col.fixedType },
3841
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
3842
+ ),
3843
+ style: {
3844
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3845
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3846
+ textAlign: col.textAlign ? col.textAlign : "center"
3847
+ },
3848
+ children: /* @__PURE__ */ jsx16(
3849
+ "div",
3850
+ {
3851
+ className: "r-rowcell-div cursor-pointer",
3852
+ onClick: (e) => {
3853
+ if (selectEnable) {
3931
3854
  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3932
3855
  if (index > -1) {
3933
3856
  if (isMulti) {
@@ -3943,51 +3866,116 @@ var TableEdit = forwardRef4((props, ref) => {
3943
3866
  setSelectedRows([row]);
3944
3867
  }
3945
3868
  }
3869
+ e.stopPropagation();
3870
+ }
3871
+ },
3872
+ children: /* @__PURE__ */ jsx16(
3873
+ Input9,
3874
+ {
3875
+ checked: isSelected,
3876
+ type: "checkbox",
3877
+ className: "cursor-pointer",
3878
+ onChange: () => {
3879
+ },
3880
+ style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
3946
3881
  }
3947
- e.stopPropagation();
3882
+ )
3883
+ }
3884
+ )
3885
+ },
3886
+ `col-${indexRow}-${indexCol}`
3887
+ ) : /* @__PURE__ */ jsx16(ContenComponent, { col, indexCol, indexRow, isSelected, row }) });
3888
+ };
3889
+ const ContenComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
3890
+ let value = row[col.field];
3891
+ if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
3892
+ value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
3893
+ } else if (col.editType === "date") {
3894
+ value = value ? moment3(value).format("DD/MM/yyyy") : "";
3895
+ } else if (col.editType === "datetime") {
3896
+ value = value ? moment3(value).format("DD/MM/yyyy HH:mm") : "";
3897
+ }
3898
+ const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
3899
+ const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
3900
+ return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
3901
+ "td",
3902
+ {
3903
+ className: classnames9(
3904
+ `r-rowcell fix-${col.fixedType}`,
3905
+ { "cell-fixed": col.fixedType },
3906
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
3907
+ ),
3908
+ style: {
3909
+ left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
3910
+ right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
3911
+ padding: 0,
3912
+ textAlign: col.textAlign ? col.textAlign : "left"
3913
+ },
3914
+ onClick: (e) => {
3915
+ if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
3916
+ if (!editDisable && indexRow != indexFocus) {
3917
+ setIndexFocus(indexRow);
3918
+ focusNewElement(indexCol + 1, indexRow + 1, true);
3948
3919
  }
3949
- },
3950
- children: /* @__PURE__ */ jsx16(
3951
- "div",
3952
- {
3953
- className: classnames9("r-rowcell-div"),
3954
- children: /* @__PURE__ */ jsxs15(
3955
- "div",
3956
- {
3957
- id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
3958
- className: classnames9("r-rowcell-content", { "r-is-invalid": errorMessage }),
3959
- style: {
3960
- margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
3961
- color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
3962
- },
3963
- children: [
3964
- typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
3965
- /* @__PURE__ */ jsx16("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx16(AlertCircle, { fontSize: 15.5 }) }),
3966
- !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
3967
- /* @__PURE__ */ jsx16(
3968
- UncontrolledTooltip5,
3969
- {
3970
- target: `error-${indexRow}-${indexCol}`,
3971
- className: "r-tooltip tooltip-error",
3972
- children: errorMessage?.toString() ?? ""
3973
- }
3974
- )
3975
- ]
3920
+ if (selectEnable && editDisable) {
3921
+ const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
3922
+ if (index > -1) {
3923
+ if (isMulti) {
3924
+ selectedRows?.splice(index, 1);
3925
+ setSelectedRows([...selectedRows]);
3926
+ } else {
3927
+ setSelectedRows([]);
3976
3928
  }
3977
- )
3929
+ } else {
3930
+ if (isMulti) {
3931
+ setSelectedRows([...selectedRows, row]);
3932
+ } else {
3933
+ setSelectedRows([row]);
3934
+ }
3935
+ }
3978
3936
  }
3979
- )
3937
+ }
3980
3938
  },
3981
- `col-${indexRow}-${indexCol}`
3982
- ) }, indexCol);
3983
- }
3939
+ children: /* @__PURE__ */ jsx16(
3940
+ "div",
3941
+ {
3942
+ className: classnames9("r-rowcell-div"),
3943
+ children: /* @__PURE__ */ jsxs15(
3944
+ "div",
3945
+ {
3946
+ id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
3947
+ className: classnames9("r-rowcell-content", { "r-is-invalid": errorMessage }),
3948
+ style: {
3949
+ margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
3950
+ color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
3951
+ },
3952
+ children: [
3953
+ typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
3954
+ /* @__PURE__ */ jsx16("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx16(AlertCircle, { fontSize: 15.5 }) }),
3955
+ !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
3956
+ /* @__PURE__ */ jsx16(
3957
+ UncontrolledTooltip5,
3958
+ {
3959
+ target: `error-${indexRow}-${indexCol}`,
3960
+ className: "r-tooltip tooltip-error",
3961
+ children: errorMessage?.toString() ?? ""
3962
+ }
3963
+ )
3964
+ ]
3965
+ }
3966
+ )
3967
+ }
3968
+ )
3969
+ },
3970
+ `col-${indexRow}-${indexCol}`
3971
+ ) }, indexCol);
3984
3972
  };
3985
3973
  const checkOverflow = (indexRow, indexCol) => {
3986
3974
  const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
3987
3975
  return element && element.scrollWidth > element.clientWidth;
3988
3976
  };
3989
- const renderFooterCol = (col, indexCol) => {
3990
- return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
3977
+ const FooterComponent = ({ col, indexCol }) => {
3978
+ return col.visible !== false ? /* @__PURE__ */ jsx16(
3991
3979
  "td",
3992
3980
  {
3993
3981
  className: classnames9(
@@ -4003,9 +3991,9 @@ var TableEdit = forwardRef4((props, ref) => {
4003
3991
  return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
4004
3992
  }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
4005
3993
  }
4006
- ) }, `summarycell-${indexCol}`);
3994
+ ) : /* @__PURE__ */ jsx16(Fragment21, {});
4007
3995
  };
4008
- const renderToolbarTop = () => {
3996
+ const ToolbarTopComponent = () => {
4009
3997
  return /* @__PURE__ */ jsx16("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
4010
3998
  /* @__PURE__ */ jsx16("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
4011
3999
  return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
@@ -4018,7 +4006,7 @@ var TableEdit = forwardRef4((props, ref) => {
4018
4006
  }) })
4019
4007
  ] }) });
4020
4008
  };
4021
- const renderToolbarBottom = () => {
4009
+ const ToolbarBottomComponent = () => {
4022
4010
  return /* @__PURE__ */ jsx16("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__ */ jsxs15("div", { className: "r-toolbar-items", children: [
4023
4011
  /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-left", children: [
4024
4012
  /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
@@ -4043,13 +4031,19 @@ var TableEdit = forwardRef4((props, ref) => {
4043
4031
  }),
4044
4032
  /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
4045
4033
  /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs15(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
4046
- /* @__PURE__ */ jsx16(DropdownToggle4, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx16(Info2, { className: "cursor-pointer" }) }),
4047
- /* @__PURE__ */ jsx16(DropdownMenu4, { children: /* @__PURE__ */ jsxs15("div", { className: "d-flex flex-column p-50 py-25", children: [
4048
- /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
4049
- /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
4050
- /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
4051
- /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\xE1n h\xE0ng" })
4052
- ] }) })
4034
+ /* @__PURE__ */ jsx16(DropdownToggle4, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx16(Info2, { className: "cursor-pointer text-primary" }) }),
4035
+ /* @__PURE__ */ jsx16(
4036
+ DropdownMenu4,
4037
+ {
4038
+ className: "formula-dropdown icon-dropdown",
4039
+ children: /* @__PURE__ */ jsxs15("ul", { className: "mb-0 pe-50", children: [
4040
+ /* @__PURE__ */ jsx16("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
4041
+ /* @__PURE__ */ jsx16("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
4042
+ /* @__PURE__ */ jsx16("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
4043
+ /* @__PURE__ */ jsx16("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\xE1n h\xE0ng" })
4044
+ ] })
4045
+ }
4046
+ )
4053
4047
  ] }) })
4054
4048
  ] })
4055
4049
  ] }) });
@@ -4066,10 +4060,10 @@ var TableEdit = forwardRef4((props, ref) => {
4066
4060
  }
4067
4061
  return false;
4068
4062
  };
4069
- const renderData = () => {
4063
+ const TableComponent = () => {
4070
4064
  totalCount = 0;
4071
4065
  let countDisplay = -1;
4072
- return dataSource.map((row, indexRow) => {
4066
+ return /* @__PURE__ */ jsx16(Fragment21, { children: dataSource.map((row, indexRow) => {
4073
4067
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
4074
4068
  const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
4075
4069
  if (flagSearch) {
@@ -4082,14 +4076,14 @@ var TableEdit = forwardRef4((props, ref) => {
4082
4076
  {
4083
4077
  className: classnames9("r-row", { "fisrt-row": countDisplay === 0 }),
4084
4078
  children: contentColumns.map((col, indexCol) => {
4085
- return renderContentCol(col, row, indexRow, indexCol, isSelected);
4079
+ return col.visible !== false && /* @__PURE__ */ jsx16(ContentColComponent, { col, row, indexCol, indexRow, isSelected }, `Content-${indexRow}-${indexCol}`);
4086
4080
  })
4087
4081
  },
4088
4082
  `row-${indexRow}`
4089
4083
  );
4090
4084
  }
4091
4085
  }
4092
- });
4086
+ }) });
4093
4087
  };
4094
4088
  useEffect9(() => {
4095
4089
  if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
@@ -4099,7 +4093,7 @@ var TableEdit = forwardRef4((props, ref) => {
4099
4093
  return /* @__PURE__ */ jsxs15(Fragment20, { children: [
4100
4094
  /* @__PURE__ */ jsxs15("div", { className: "react-table-edit", children: [
4101
4095
  /* @__PURE__ */ jsxs15("div", { className: "r-grid", ref: gridRef, children: [
4102
- toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx16(Fragment21, {}),
4096
+ toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(ToolbarTopComponent, {}) : /* @__PURE__ */ jsx16(Fragment21, {}),
4103
4097
  /* @__PURE__ */ jsx16("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs15("table", { style: { width: "100%" }, children: [
4104
4098
  /* @__PURE__ */ jsx16("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
4105
4099
  return /* @__PURE__ */ jsx16("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
@@ -4123,12 +4117,12 @@ var TableEdit = forwardRef4((props, ref) => {
4123
4117
  );
4124
4118
  }) }, `header-${-indexParent}`);
4125
4119
  }) }),
4126
- /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: renderData() }),
4120
+ /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: /* @__PURE__ */ jsx16(TableComponent, {}) }),
4127
4121
  /* @__PURE__ */ jsx16("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx16("tr", { className: "r-row", children: contentColumns.map((col, index) => {
4128
- return renderFooterCol(col, index);
4122
+ return /* @__PURE__ */ jsx16(FooterComponent, { col, indexCol: index }, `summarycell-${index}`);
4129
4123
  }) }) : /* @__PURE__ */ jsx16(Fragment21, {}) })
4130
4124
  ] }) }),
4131
- toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx16(Fragment21, {})
4125
+ toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(ToolbarBottomComponent, {}) : /* @__PURE__ */ jsx16(Fragment21, {})
4132
4126
  ] }),
4133
4127
  pagingSetting?.allowPaging ? /* @__PURE__ */ jsx16(
4134
4128
  PagingComponent,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "1.1.9",
4
+ "version": "1.2.1",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",