react-table-edit 1.0.0 → 1.0.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 (5) hide show
  1. package/dist/index.d.mts +7 -6
  2. package/dist/index.d.ts +7 -6
  3. package/dist/index.js +67 -109
  4. package/dist/index.mjs +65 -109
  5. package/package.json +2 -1
package/dist/index.d.mts CHANGED
@@ -1,5 +1,4 @@
1
- import * as react from 'react';
2
- import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
1
+ import React, { ReactNode, Dispatch, SetStateAction } from 'react';
3
2
  import { TFunction } from 'react-i18next';
4
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
4
 
@@ -46,7 +45,7 @@ type Props$1 = {
46
45
  showFooter?: boolean;
47
46
  onPaste?: any;
48
47
  };
49
- declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
48
+ declare const SelectTable: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<unknown>>;
50
49
 
51
50
  type ITextAlign = 'center' | 'left' | 'right';
52
51
  type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -212,7 +211,7 @@ type IHeaderColumnTable = {
212
211
  fixedType?: 'left' | 'right' | undefined;
213
212
  index?: number;
214
213
  };
215
- declare const TableEdit: react.ForwardRefExoticComponent<IFTableEditProps & react.RefAttributes<IFRef>>;
214
+ declare const TableEdit: React.ForwardRefExoticComponent<IFTableEditProps & React.RefAttributes<IFRef>>;
216
215
 
217
216
  type FromItemsField = {
218
217
  name: string;
@@ -235,6 +234,8 @@ declare const notificationSuccess: (param: string) => string;
235
234
  declare const messageBoxConfirm2: (t: TFunction<"translation", undefined>, data: any, data2: any, message: string) => Promise<boolean>;
236
235
 
237
236
  declare const useOnClickOutside: (ref: any, handler: any) => void;
237
+ declare const checkThousandSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
238
+ declare const checkDecimalSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
238
239
  declare const isNullOrUndefined: (d: any) => boolean;
239
240
  declare const generateUUID: () => string;
240
241
  /**
@@ -308,7 +309,7 @@ type Props = {
308
309
  selectChilds?: boolean;
309
310
  onPaste?: any;
310
311
  };
311
- declare const SelectTableTree: react__default.ForwardRefExoticComponent<Props & react__default.RefAttributes<unknown>>;
312
+ declare const SelectTableTree: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
312
313
 
313
314
  interface IFDataStyleSetting {
314
315
  color: string;
@@ -333,4 +334,4 @@ interface IFDataInputStyle {
333
334
  }
334
335
  declare const InputStyleComponent: (props: IFDataInputStyle) => react_jsx_runtime.JSX.Element;
335
336
 
336
- export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
337
+ export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import * as react from 'react';
2
- import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
1
+ import React, { ReactNode, Dispatch, SetStateAction } from 'react';
3
2
  import { TFunction } from 'react-i18next';
4
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
4
 
@@ -46,7 +45,7 @@ type Props$1 = {
46
45
  showFooter?: boolean;
47
46
  onPaste?: any;
48
47
  };
49
- declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
48
+ declare const SelectTable: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<unknown>>;
50
49
 
51
50
  type ITextAlign = 'center' | 'left' | 'right';
52
51
  type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -212,7 +211,7 @@ type IHeaderColumnTable = {
212
211
  fixedType?: 'left' | 'right' | undefined;
213
212
  index?: number;
214
213
  };
215
- declare const TableEdit: react.ForwardRefExoticComponent<IFTableEditProps & react.RefAttributes<IFRef>>;
214
+ declare const TableEdit: React.ForwardRefExoticComponent<IFTableEditProps & React.RefAttributes<IFRef>>;
216
215
 
217
216
  type FromItemsField = {
218
217
  name: string;
@@ -235,6 +234,8 @@ declare const notificationSuccess: (param: string) => string;
235
234
  declare const messageBoxConfirm2: (t: TFunction<"translation", undefined>, data: any, data2: any, message: string) => Promise<boolean>;
236
235
 
237
236
  declare const useOnClickOutside: (ref: any, handler: any) => void;
237
+ declare const checkThousandSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
238
+ declare const checkDecimalSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
238
239
  declare const isNullOrUndefined: (d: any) => boolean;
239
240
  declare const generateUUID: () => string;
240
241
  /**
@@ -308,7 +309,7 @@ type Props = {
308
309
  selectChilds?: boolean;
309
310
  onPaste?: any;
310
311
  };
311
- declare const SelectTableTree: react__default.ForwardRefExoticComponent<Props & react__default.RefAttributes<unknown>>;
312
+ declare const SelectTableTree: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
312
313
 
313
314
  interface IFDataStyleSetting {
314
315
  color: string;
@@ -333,4 +334,4 @@ interface IFDataInputStyle {
333
334
  }
334
335
  declare const InputStyleComponent: (props: IFDataInputStyle) => react_jsx_runtime.JSX.Element;
335
336
 
336
- export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
337
+ export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
package/dist/index.js CHANGED
@@ -34,6 +34,8 @@ __export(Table_edit_exports, {
34
34
  SelectTable: () => SelectTable,
35
35
  SelectTableTree: () => SelectTableTree,
36
36
  TabsMenuComponent: () => TabsMenuComponent,
37
+ checkDecimalSeparator: () => checkDecimalSeparator,
38
+ checkThousandSeparator: () => checkThousandSeparator,
37
39
  default: () => Table_edit_default,
38
40
  formartNumberic: () => formartNumberic,
39
41
  generateUUID: () => generateUUID,
@@ -261,6 +263,36 @@ var useOnClickOutside = (ref, handler) => {
261
263
  [ref, handler]
262
264
  );
263
265
  };
266
+ var checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
267
+ if (thousandSeparator) {
268
+ if (decimalSeparator) {
269
+ if (thousandSeparator === decimalSeparator) {
270
+ return ",";
271
+ } else {
272
+ return thousandSeparator;
273
+ }
274
+ } else {
275
+ return thousandSeparator;
276
+ }
277
+ } else {
278
+ return ",";
279
+ }
280
+ };
281
+ var checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
282
+ if (decimalSeparator) {
283
+ if (thousandSeparator) {
284
+ if (thousandSeparator === decimalSeparator) {
285
+ return ".";
286
+ } else {
287
+ return decimalSeparator;
288
+ }
289
+ } else {
290
+ return decimalSeparator;
291
+ }
292
+ } else {
293
+ return ".";
294
+ }
295
+ };
264
296
  var isNullOrUndefined = (d) => {
265
297
  if (d === null || d === void 0) {
266
298
  return true;
@@ -2811,6 +2843,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
2811
2843
  });
2812
2844
 
2813
2845
  // test-app/src/component/table/index.tsx
2846
+ var import_react_number_format = require("react-number-format");
2814
2847
  var import_jsx_runtime16 = require("react/jsx-runtime");
2815
2848
  var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
2816
2849
  const { t } = (0, import_react_i18next12.useTranslation)();
@@ -2978,51 +3011,11 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
2978
3011
  };
2979
3012
  const handleDataChange = (row, col, indexRow) => {
2980
3013
  if (rowChange) {
2981
- const rs = rowChange(row, indexRow, col.field);
2982
- if (rs && rs?.then) {
2983
- rs.then(() => {
2984
- for (let index = 0; index <= contentColumns.length; index++) {
2985
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
2986
- const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
2987
- if (element) {
2988
- if (element.className.includes("input-element")) {
2989
- element.value = row[contentColumns[index].field] ?? "";
2990
- } else if (element.className.includes("input-numeric")) {
2991
- element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
2992
- } else if (element.className.includes("input-checkbox")) {
2993
- element.checked = row[contentColumns[index].field] ?? false;
2994
- }
2995
- }
2996
- }
2997
- }
2998
- changeDataSource(dataSource);
2999
- if (dataSourceChange) {
3000
- dataSourceChange(dataSource);
3001
- }
3002
- });
3003
- } else {
3004
- for (let index = 0; index <= contentColumns.length; index++) {
3005
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
3006
- const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
3007
- if (element) {
3008
- if (element.className.includes("input-element")) {
3009
- element.value = row[contentColumns[index].field] ?? "";
3010
- } else if (element.className.includes("input-numeric")) {
3011
- element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
3012
- } else if (element.className.includes("input-checkbox")) {
3013
- element.checked = row[contentColumns[index].field] ?? false;
3014
- }
3015
- }
3016
- }
3017
- }
3018
- if (dataSourceChange) {
3019
- dataSourceChange(dataSource);
3020
- }
3021
- }
3022
- } else {
3023
- if (dataSourceChange) {
3024
- dataSourceChange(dataSource);
3025
- }
3014
+ rowChange(row, indexRow, col.field);
3015
+ }
3016
+ changeDataSource(dataSource);
3017
+ if (dataSourceChange) {
3018
+ dataSourceChange(dataSource);
3026
3019
  }
3027
3020
  };
3028
3021
  const handleKeyPress = (e) => {
@@ -3055,7 +3048,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3055
3048
  } else {
3056
3049
  toolbarTopOption = [...defaultToolbarOption];
3057
3050
  }
3058
- const renderEdit = (row, col, indexRow, indexCol) => {
3051
+ const RenderEdit = (row, col, indexCol, indexRow) => {
3059
3052
  switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
3060
3053
  case "date":
3061
3054
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -3291,82 +3284,45 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3291
3284
  }
3292
3285
  );
3293
3286
  case "numeric":
3294
- let valueCurrency = row[col.field];
3287
+ const numericFormatProps = {
3288
+ value: !isNullOrUndefined(row[col.field]) ? row[col.field] : "",
3289
+ thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
3290
+ decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
3291
+ // allowNegative: (allowNegative ? allowNegative : configNumber?.allowNegative) ?? false,
3292
+ decimalScale: col.numericSettings?.fraction ?? 0
3293
+ };
3294
+ let floatValue = parseFloat(row[col.field]);
3295
3295
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
3296
- import_reactstrap11.Input,
3296
+ import_react_number_format.NumericFormat,
3297
3297
  {
3298
3298
  id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
3299
3299
  style: { textAlign: col.textAlign, height: 29 },
3300
- defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
3301
- className: (0, import_classnames14.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
3302
- onChange: (val) => {
3303
- let newVal = "";
3304
- const flag = val.target?.value.startsWith("-");
3305
- if (val.target?.value.endsWith(decimalSeparator)) {
3306
- if ((val.target?.value.match(new RegExp(decimalSeparator === "," ? "," : "\\.", "g")) || []).length > 1 || col.numericSettings?.fraction === 0) {
3307
- newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
3308
- } else {
3309
- newVal = val.target?.value.replaceAll(thousandSeparator, "");
3310
- }
3311
- } else {
3312
- newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3313
- }
3314
- val.target.value = flag && col.numericSettings?.min !== 0 ? `-${formartNumberic(newVal, decimalSeparator, thousandSeparator, col.numericSettings?.fraction)}` : formartNumberic(newVal, decimalSeparator, thousandSeparator, col.numericSettings?.fraction);
3300
+ ...numericFormatProps,
3301
+ defaultValue: formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
3302
+ className: (0, import_classnames14.default)("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
3303
+ onValueChange: (values) => {
3304
+ floatValue = values?.floatValue;
3305
+ const textBeforeDot = values?.value.split(".")[1];
3306
+ row[col.field] = textBeforeDot ? parseFloat(values?.value).toFixed(textBeforeDot.length) : values?.floatValue;
3315
3307
  },
3316
3308
  onFocus: (e) => {
3317
3309
  e.target.setSelectionRange(0, e.target.innerText.length - 1);
3318
3310
  },
3319
- onBlur: (val) => {
3320
- let newVal = "";
3321
- const flag = val.target?.value.startsWith("-");
3322
- if (val.target?.value.endsWith(decimalSeparator)) {
3323
- newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3324
- } else {
3325
- newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3326
- }
3327
- if (decimalSeparator === ",") {
3328
- newVal = newVal.replaceAll(",", ".");
3329
- }
3330
- let value = flag ? 0 - Number(newVal) : Number(newVal);
3331
- if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
3332
- val.currentTarget.value = col.numericSettings?.max.toString();
3333
- value = col.numericSettings?.max;
3334
- } else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
3335
- value = col.numericSettings?.min;
3336
- val.currentTarget.value = col.numericSettings?.min.toString();
3337
- }
3338
- if (newVal !== row[col.field]) {
3339
- row[col.field] = value;
3311
+ onBlur: () => {
3312
+ if (floatValue !== row[col.field]) {
3313
+ row[col.field] = floatValue;
3340
3314
  if (col.callback) {
3341
- col.callback(val.target.value, indexRow);
3315
+ col.callback(floatValue, indexRow);
3342
3316
  }
3343
3317
  handleDataChange(row, col, indexRow);
3344
3318
  }
3345
3319
  },
3346
3320
  onKeyDown: (e) => {
3347
3321
  if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
3348
- let newVal = "";
3349
- const flag = e.target?.value.startsWith("-");
3350
- if (e.target?.value.endsWith(decimalSeparator)) {
3351
- newVal = e.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3352
- } else {
3353
- newVal = e.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3354
- }
3355
- if (decimalSeparator === ",") {
3356
- newVal = newVal.replaceAll(",", ".");
3357
- }
3358
- let value = flag ? 0 - Number(newVal) : Number(newVal);
3359
- if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
3360
- e.target.value = col.numericSettings?.max.toString();
3361
- value = col.numericSettings?.max;
3362
- } else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
3363
- value = col.numericSettings?.min;
3364
- e.target.value = col.numericSettings?.min.toString();
3365
- }
3366
- if (newVal !== row[col.field]) {
3367
- row[col.field] = value;
3322
+ if (floatValue !== row[col.field]) {
3323
+ row[col.field] = floatValue;
3368
3324
  if (col.callback) {
3369
- col.callback(e.target.value, indexRow);
3325
+ col.callback(floatValue, indexRow);
3370
3326
  }
3371
3327
  handleDataChange(row, col, indexRow);
3372
3328
  }
@@ -3803,7 +3759,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3803
3759
  changeDataSource(dataSource);
3804
3760
  };
3805
3761
  const changeDataSource = (data, haveNew = false) => {
3806
- if (!editDisable && !addDisable && setDataSource) {
3762
+ if (!editDisable && setDataSource) {
3807
3763
  if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
3808
3764
  if (searchSetting?.setSearchTerm) {
3809
3765
  searchSetting?.setSearchTerm("");
@@ -3811,7 +3767,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
3811
3767
  setSearchTerm("");
3812
3768
  }
3813
3769
  }
3814
- if (haveNew) {
3770
+ if (haveNew && !addDisable) {
3815
3771
  data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
3816
3772
  setDataSource([...data]);
3817
3773
  } else {
@@ -4056,7 +4012,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
4056
4012
  color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
4057
4013
  },
4058
4014
  children: [
4059
- typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__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 }),
4015
+ 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 }),
4060
4016
  /* @__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 }) }),
4061
4017
  !(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 }),
4062
4018
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -5391,6 +5347,8 @@ var Table_edit_default = table_default;
5391
5347
  SelectTable,
5392
5348
  SelectTableTree,
5393
5349
  TabsMenuComponent,
5350
+ checkDecimalSeparator,
5351
+ checkThousandSeparator,
5394
5352
  formartNumberic,
5395
5353
  generateUUID,
5396
5354
  isNullOrUndefined,
package/dist/index.mjs CHANGED
@@ -206,6 +206,36 @@ var useOnClickOutside = (ref, handler) => {
206
206
  [ref, handler]
207
207
  );
208
208
  };
209
+ var checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
210
+ if (thousandSeparator) {
211
+ if (decimalSeparator) {
212
+ if (thousandSeparator === decimalSeparator) {
213
+ return ",";
214
+ } else {
215
+ return thousandSeparator;
216
+ }
217
+ } else {
218
+ return thousandSeparator;
219
+ }
220
+ } else {
221
+ return ",";
222
+ }
223
+ };
224
+ var checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
225
+ if (decimalSeparator) {
226
+ if (thousandSeparator) {
227
+ if (thousandSeparator === decimalSeparator) {
228
+ return ".";
229
+ } else {
230
+ return decimalSeparator;
231
+ }
232
+ } else {
233
+ return decimalSeparator;
234
+ }
235
+ } else {
236
+ return ".";
237
+ }
238
+ };
209
239
  var isNullOrUndefined = (d) => {
210
240
  if (d === null || d === void 0) {
211
241
  return true;
@@ -2782,6 +2812,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
2782
2812
  });
2783
2813
 
2784
2814
  // test-app/src/component/table/index.tsx
2815
+ import { NumericFormat } from "react-number-format";
2785
2816
  import { Fragment as Fragment20, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
2786
2817
  var TableEdit = forwardRef4((props, ref) => {
2787
2818
  const { t } = useTranslation12();
@@ -2949,51 +2980,11 @@ var TableEdit = forwardRef4((props, ref) => {
2949
2980
  };
2950
2981
  const handleDataChange = (row, col, indexRow) => {
2951
2982
  if (rowChange) {
2952
- const rs = rowChange(row, indexRow, col.field);
2953
- if (rs && rs?.then) {
2954
- rs.then(() => {
2955
- for (let index = 0; index <= contentColumns.length; index++) {
2956
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
2957
- const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
2958
- if (element) {
2959
- if (element.className.includes("input-element")) {
2960
- element.value = row[contentColumns[index].field] ?? "";
2961
- } else if (element.className.includes("input-numeric")) {
2962
- element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
2963
- } else if (element.className.includes("input-checkbox")) {
2964
- element.checked = row[contentColumns[index].field] ?? false;
2965
- }
2966
- }
2967
- }
2968
- }
2969
- changeDataSource(dataSource);
2970
- if (dataSourceChange) {
2971
- dataSourceChange(dataSource);
2972
- }
2973
- });
2974
- } else {
2975
- for (let index = 0; index <= contentColumns.length; index++) {
2976
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
2977
- const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
2978
- if (element) {
2979
- if (element.className.includes("input-element")) {
2980
- element.value = row[contentColumns[index].field] ?? "";
2981
- } else if (element.className.includes("input-numeric")) {
2982
- element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
2983
- } else if (element.className.includes("input-checkbox")) {
2984
- element.checked = row[contentColumns[index].field] ?? false;
2985
- }
2986
- }
2987
- }
2988
- }
2989
- if (dataSourceChange) {
2990
- dataSourceChange(dataSource);
2991
- }
2992
- }
2993
- } else {
2994
- if (dataSourceChange) {
2995
- dataSourceChange(dataSource);
2996
- }
2983
+ rowChange(row, indexRow, col.field);
2984
+ }
2985
+ changeDataSource(dataSource);
2986
+ if (dataSourceChange) {
2987
+ dataSourceChange(dataSource);
2997
2988
  }
2998
2989
  };
2999
2990
  const handleKeyPress = (e) => {
@@ -3026,7 +3017,7 @@ var TableEdit = forwardRef4((props, ref) => {
3026
3017
  } else {
3027
3018
  toolbarTopOption = [...defaultToolbarOption];
3028
3019
  }
3029
- const renderEdit = (row, col, indexRow, indexCol) => {
3020
+ const RenderEdit = (row, col, indexCol, indexRow) => {
3030
3021
  switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
3031
3022
  case "date":
3032
3023
  return /* @__PURE__ */ jsx16(
@@ -3262,82 +3253,45 @@ var TableEdit = forwardRef4((props, ref) => {
3262
3253
  }
3263
3254
  );
3264
3255
  case "numeric":
3265
- let valueCurrency = row[col.field];
3256
+ const numericFormatProps = {
3257
+ value: !isNullOrUndefined(row[col.field]) ? row[col.field] : "",
3258
+ thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
3259
+ decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
3260
+ // allowNegative: (allowNegative ? allowNegative : configNumber?.allowNegative) ?? false,
3261
+ decimalScale: col.numericSettings?.fraction ?? 0
3262
+ };
3263
+ let floatValue = parseFloat(row[col.field]);
3266
3264
  return /* @__PURE__ */ jsx16(
3267
- Input9,
3265
+ NumericFormat,
3268
3266
  {
3269
3267
  id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
3270
3268
  style: { textAlign: col.textAlign, height: 29 },
3271
- defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
3272
- className: classnames9("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
3273
- onChange: (val) => {
3274
- let newVal = "";
3275
- const flag = val.target?.value.startsWith("-");
3276
- if (val.target?.value.endsWith(decimalSeparator)) {
3277
- if ((val.target?.value.match(new RegExp(decimalSeparator === "," ? "," : "\\.", "g")) || []).length > 1 || col.numericSettings?.fraction === 0) {
3278
- newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
3279
- } else {
3280
- newVal = val.target?.value.replaceAll(thousandSeparator, "");
3281
- }
3282
- } else {
3283
- newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3284
- }
3285
- val.target.value = flag && col.numericSettings?.min !== 0 ? `-${formartNumberic(newVal, decimalSeparator, thousandSeparator, col.numericSettings?.fraction)}` : formartNumberic(newVal, decimalSeparator, thousandSeparator, col.numericSettings?.fraction);
3269
+ ...numericFormatProps,
3270
+ defaultValue: formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
3271
+ className: classnames9("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
3272
+ onValueChange: (values) => {
3273
+ floatValue = values?.floatValue;
3274
+ const textBeforeDot = values?.value.split(".")[1];
3275
+ row[col.field] = textBeforeDot ? parseFloat(values?.value).toFixed(textBeforeDot.length) : values?.floatValue;
3286
3276
  },
3287
3277
  onFocus: (e) => {
3288
3278
  e.target.setSelectionRange(0, e.target.innerText.length - 1);
3289
3279
  },
3290
- onBlur: (val) => {
3291
- let newVal = "";
3292
- const flag = val.target?.value.startsWith("-");
3293
- if (val.target?.value.endsWith(decimalSeparator)) {
3294
- newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3295
- } else {
3296
- newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3297
- }
3298
- if (decimalSeparator === ",") {
3299
- newVal = newVal.replaceAll(",", ".");
3300
- }
3301
- let value = flag ? 0 - Number(newVal) : Number(newVal);
3302
- if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
3303
- val.currentTarget.value = col.numericSettings?.max.toString();
3304
- value = col.numericSettings?.max;
3305
- } else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
3306
- value = col.numericSettings?.min;
3307
- val.currentTarget.value = col.numericSettings?.min.toString();
3308
- }
3309
- if (newVal !== row[col.field]) {
3310
- row[col.field] = value;
3280
+ onBlur: () => {
3281
+ if (floatValue !== row[col.field]) {
3282
+ row[col.field] = floatValue;
3311
3283
  if (col.callback) {
3312
- col.callback(val.target.value, indexRow);
3284
+ col.callback(floatValue, indexRow);
3313
3285
  }
3314
3286
  handleDataChange(row, col, indexRow);
3315
3287
  }
3316
3288
  },
3317
3289
  onKeyDown: (e) => {
3318
3290
  if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
3319
- let newVal = "";
3320
- const flag = e.target?.value.startsWith("-");
3321
- if (e.target?.value.endsWith(decimalSeparator)) {
3322
- newVal = e.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3323
- } else {
3324
- newVal = e.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
3325
- }
3326
- if (decimalSeparator === ",") {
3327
- newVal = newVal.replaceAll(",", ".");
3328
- }
3329
- let value = flag ? 0 - Number(newVal) : Number(newVal);
3330
- if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
3331
- e.target.value = col.numericSettings?.max.toString();
3332
- value = col.numericSettings?.max;
3333
- } else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
3334
- value = col.numericSettings?.min;
3335
- e.target.value = col.numericSettings?.min.toString();
3336
- }
3337
- if (newVal !== row[col.field]) {
3338
- row[col.field] = value;
3291
+ if (floatValue !== row[col.field]) {
3292
+ row[col.field] = floatValue;
3339
3293
  if (col.callback) {
3340
- col.callback(e.target.value, indexRow);
3294
+ col.callback(floatValue, indexRow);
3341
3295
  }
3342
3296
  handleDataChange(row, col, indexRow);
3343
3297
  }
@@ -3774,7 +3728,7 @@ var TableEdit = forwardRef4((props, ref) => {
3774
3728
  changeDataSource(dataSource);
3775
3729
  };
3776
3730
  const changeDataSource = (data, haveNew = false) => {
3777
- if (!editDisable && !addDisable && setDataSource) {
3731
+ if (!editDisable && setDataSource) {
3778
3732
  if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
3779
3733
  if (searchSetting?.setSearchTerm) {
3780
3734
  searchSetting?.setSearchTerm("");
@@ -3782,7 +3736,7 @@ var TableEdit = forwardRef4((props, ref) => {
3782
3736
  setSearchTerm("");
3783
3737
  }
3784
3738
  }
3785
- if (haveNew) {
3739
+ if (haveNew && !addDisable) {
3786
3740
  data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
3787
3741
  setDataSource([...data]);
3788
3742
  } else {
@@ -4027,7 +3981,7 @@ var TableEdit = forwardRef4((props, ref) => {
4027
3981
  color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
4028
3982
  },
4029
3983
  children: [
4030
- typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
3984
+ 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 }),
4031
3985
  /* @__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 }) }),
4032
3986
  !(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 }),
4033
3987
  /* @__PURE__ */ jsx16(
@@ -5361,6 +5315,8 @@ export {
5361
5315
  SelectTable,
5362
5316
  SelectTableTree,
5363
5317
  TabsMenuComponent,
5318
+ checkDecimalSeparator,
5319
+ checkThousandSeparator,
5364
5320
  Table_edit_default as default,
5365
5321
  formartNumberic,
5366
5322
  generateUUID,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "1.0.0",
4
+ "version": "1.0.1",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",
@@ -51,6 +51,7 @@
51
51
  "ts-loader": "^9.5.1",
52
52
  "webpack": "^5.94.0",
53
53
  "webpack-cli": "^5.1.4",
54
+ "react-number-format": "^5.3.3",
54
55
  "webpack-dev-server": "^5.1.0",
55
56
  "yup": "^0.32.11"
56
57
  },