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