react-table-edit 0.9.9 → 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.
- package/dist/index.d.mts +7 -6
- package/dist/index.d.ts +7 -6
- package/dist/index.js +74 -117
- package/dist/index.mjs +72 -117
- package/package.json +2 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
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:
|
|
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:
|
|
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:
|
|
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;
|
|
@@ -1046,7 +1078,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
|
|
|
1046
1078
|
e.preventDefault();
|
|
1047
1079
|
},
|
|
1048
1080
|
tag: "div",
|
|
1049
|
-
style: { width:
|
|
1081
|
+
style: { width: "100%" },
|
|
1050
1082
|
className: (0, import_classnames4.default)("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
|
|
1051
1083
|
children: [
|
|
1052
1084
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "select-table-container", children: [
|
|
@@ -1109,7 +1141,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
|
|
|
1109
1141
|
container: component,
|
|
1110
1142
|
className: "formula-dropdown icon-dropdown p-0",
|
|
1111
1143
|
style: {
|
|
1112
|
-
width: "min-content",
|
|
1144
|
+
width: width ? width + 2 : "min-content",
|
|
1113
1145
|
position: "fixed",
|
|
1114
1146
|
borderRadius: 3,
|
|
1115
1147
|
zIndex: 9999
|
|
@@ -2519,8 +2551,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
|
|
|
2519
2551
|
type: "checkbox",
|
|
2520
2552
|
className: "cursor-pointer",
|
|
2521
2553
|
onChange: () => {
|
|
2522
|
-
}
|
|
2523
|
-
style: { textAlign: "center" }
|
|
2554
|
+
}
|
|
2524
2555
|
}
|
|
2525
2556
|
)
|
|
2526
2557
|
]
|
|
@@ -2613,7 +2644,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
|
|
|
2613
2644
|
),
|
|
2614
2645
|
row[fieldChildren ?? "children"] && row.expanded && row[fieldChildren ?? "children"].map((child, indexChild) => {
|
|
2615
2646
|
if (checkSearch(searchTerm, child, columns ? columns : defaultColumns)) {
|
|
2616
|
-
const isSelectedChild = isMulti ? value?.some((x) => x === child[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === child[fieldValue ?? "value"];
|
|
2647
|
+
const isSelectedChild = value && (isMulti ? value?.some((x) => x === child[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === child[fieldValue ?? "value"]);
|
|
2617
2648
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderElement, { isSelected: isSelectedChild, indexRow: indexChild, row: child, level: level + 1 }, `select-table-${indexRow}-${indexChild}`);
|
|
2618
2649
|
}
|
|
2619
2650
|
})
|
|
@@ -2665,7 +2696,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
|
|
|
2665
2696
|
] }) }),
|
|
2666
2697
|
options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: "r-select-gridcontent", children: options?.map((row, indexRow) => {
|
|
2667
2698
|
if (checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
|
|
2668
|
-
const isSelected = isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"];
|
|
2699
|
+
const isSelected = value && (isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
|
|
2669
2700
|
countDisplay++;
|
|
2670
2701
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
|
|
2671
2702
|
}
|
|
@@ -2812,6 +2843,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
|
|
|
2812
2843
|
});
|
|
2813
2844
|
|
|
2814
2845
|
// test-app/src/component/table/index.tsx
|
|
2846
|
+
var import_react_number_format = require("react-number-format");
|
|
2815
2847
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2816
2848
|
var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
2817
2849
|
const { t } = (0, import_react_i18next12.useTranslation)();
|
|
@@ -2979,51 +3011,11 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
2979
3011
|
};
|
|
2980
3012
|
const handleDataChange = (row, col, indexRow) => {
|
|
2981
3013
|
if (rowChange) {
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
|
|
2988
|
-
if (element) {
|
|
2989
|
-
if (element.className.includes("input-element")) {
|
|
2990
|
-
element.value = row[contentColumns[index].field] ?? "";
|
|
2991
|
-
} else if (element.className.includes("input-numeric")) {
|
|
2992
|
-
element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
|
|
2993
|
-
} else if (element.className.includes("input-checkbox")) {
|
|
2994
|
-
element.checked = row[contentColumns[index].field] ?? false;
|
|
2995
|
-
}
|
|
2996
|
-
}
|
|
2997
|
-
}
|
|
2998
|
-
}
|
|
2999
|
-
changeDataSource(dataSource);
|
|
3000
|
-
if (dataSourceChange) {
|
|
3001
|
-
dataSourceChange(dataSource);
|
|
3002
|
-
}
|
|
3003
|
-
});
|
|
3004
|
-
} else {
|
|
3005
|
-
for (let index = 0; index <= contentColumns.length; index++) {
|
|
3006
|
-
if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
|
|
3007
|
-
const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
|
|
3008
|
-
if (element) {
|
|
3009
|
-
if (element.className.includes("input-element")) {
|
|
3010
|
-
element.value = row[contentColumns[index].field] ?? "";
|
|
3011
|
-
} else if (element.className.includes("input-numeric")) {
|
|
3012
|
-
element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
|
|
3013
|
-
} else if (element.className.includes("input-checkbox")) {
|
|
3014
|
-
element.checked = row[contentColumns[index].field] ?? false;
|
|
3015
|
-
}
|
|
3016
|
-
}
|
|
3017
|
-
}
|
|
3018
|
-
}
|
|
3019
|
-
if (dataSourceChange) {
|
|
3020
|
-
dataSourceChange(dataSource);
|
|
3021
|
-
}
|
|
3022
|
-
}
|
|
3023
|
-
} else {
|
|
3024
|
-
if (dataSourceChange) {
|
|
3025
|
-
dataSourceChange(dataSource);
|
|
3026
|
-
}
|
|
3014
|
+
rowChange(row, indexRow, col.field);
|
|
3015
|
+
}
|
|
3016
|
+
changeDataSource(dataSource);
|
|
3017
|
+
if (dataSourceChange) {
|
|
3018
|
+
dataSourceChange(dataSource);
|
|
3027
3019
|
}
|
|
3028
3020
|
};
|
|
3029
3021
|
const handleKeyPress = (e) => {
|
|
@@ -3056,7 +3048,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3056
3048
|
} else {
|
|
3057
3049
|
toolbarTopOption = [...defaultToolbarOption];
|
|
3058
3050
|
}
|
|
3059
|
-
const
|
|
3051
|
+
const RenderEdit = (row, col, indexCol, indexRow) => {
|
|
3060
3052
|
switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
|
|
3061
3053
|
case "date":
|
|
3062
3054
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
@@ -3140,7 +3132,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3140
3132
|
options: optionsSelect,
|
|
3141
3133
|
rowData: row,
|
|
3142
3134
|
onChange: (val) => {
|
|
3143
|
-
if (isMulti) {
|
|
3135
|
+
if (col.selectSettings?.isMulti) {
|
|
3144
3136
|
row[col.field] = !isNullOrUndefined(val) ? val : [];
|
|
3145
3137
|
} else {
|
|
3146
3138
|
row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
|
|
@@ -3223,7 +3215,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3223
3215
|
options: optionsSelectTree,
|
|
3224
3216
|
rowData: row,
|
|
3225
3217
|
onChange: (val) => {
|
|
3226
|
-
if (isMulti) {
|
|
3218
|
+
if (col.selectSettings?.isMulti) {
|
|
3227
3219
|
row[col.field] = !isNullOrUndefined(val) ? val : [];
|
|
3228
3220
|
} else {
|
|
3229
3221
|
row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
|
|
@@ -3292,82 +3284,45 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3292
3284
|
}
|
|
3293
3285
|
);
|
|
3294
3286
|
case "numeric":
|
|
3295
|
-
|
|
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]);
|
|
3296
3295
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3297
|
-
|
|
3296
|
+
import_react_number_format.NumericFormat,
|
|
3298
3297
|
{
|
|
3299
3298
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
3300
3299
|
style: { textAlign: col.textAlign, height: 29 },
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
|
|
3309
|
-
} else {
|
|
3310
|
-
newVal = val.target?.value.replaceAll(thousandSeparator, "");
|
|
3311
|
-
}
|
|
3312
|
-
} else {
|
|
3313
|
-
newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3314
|
-
}
|
|
3315
|
-
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;
|
|
3316
3307
|
},
|
|
3317
3308
|
onFocus: (e) => {
|
|
3318
3309
|
e.target.setSelectionRange(0, e.target.innerText.length - 1);
|
|
3319
3310
|
},
|
|
3320
|
-
onBlur: (
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
if (val.target?.value.endsWith(decimalSeparator)) {
|
|
3324
|
-
newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3325
|
-
} else {
|
|
3326
|
-
newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3327
|
-
}
|
|
3328
|
-
if (decimalSeparator === ",") {
|
|
3329
|
-
newVal = newVal.replaceAll(",", ".");
|
|
3330
|
-
}
|
|
3331
|
-
let value = flag ? 0 - Number(newVal) : Number(newVal);
|
|
3332
|
-
if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
|
|
3333
|
-
val.currentTarget.value = col.numericSettings?.max.toString();
|
|
3334
|
-
value = col.numericSettings?.max;
|
|
3335
|
-
} else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
|
|
3336
|
-
value = col.numericSettings?.min;
|
|
3337
|
-
val.currentTarget.value = col.numericSettings?.min.toString();
|
|
3338
|
-
}
|
|
3339
|
-
if (newVal !== row[col.field]) {
|
|
3340
|
-
row[col.field] = value;
|
|
3311
|
+
onBlur: () => {
|
|
3312
|
+
if (floatValue !== row[col.field]) {
|
|
3313
|
+
row[col.field] = floatValue;
|
|
3341
3314
|
if (col.callback) {
|
|
3342
|
-
col.callback(
|
|
3315
|
+
col.callback(floatValue, indexRow);
|
|
3343
3316
|
}
|
|
3344
3317
|
handleDataChange(row, col, indexRow);
|
|
3345
3318
|
}
|
|
3346
3319
|
},
|
|
3347
3320
|
onKeyDown: (e) => {
|
|
3348
3321
|
if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
|
|
3349
|
-
|
|
3350
|
-
|
|
3351
|
-
if (e.target?.value.endsWith(decimalSeparator)) {
|
|
3352
|
-
newVal = e.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3353
|
-
} else {
|
|
3354
|
-
newVal = e.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3355
|
-
}
|
|
3356
|
-
if (decimalSeparator === ",") {
|
|
3357
|
-
newVal = newVal.replaceAll(",", ".");
|
|
3358
|
-
}
|
|
3359
|
-
let value = flag ? 0 - Number(newVal) : Number(newVal);
|
|
3360
|
-
if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
|
|
3361
|
-
e.target.value = col.numericSettings?.max.toString();
|
|
3362
|
-
value = col.numericSettings?.max;
|
|
3363
|
-
} else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
|
|
3364
|
-
value = col.numericSettings?.min;
|
|
3365
|
-
e.target.value = col.numericSettings?.min.toString();
|
|
3366
|
-
}
|
|
3367
|
-
if (newVal !== row[col.field]) {
|
|
3368
|
-
row[col.field] = value;
|
|
3322
|
+
if (floatValue !== row[col.field]) {
|
|
3323
|
+
row[col.field] = floatValue;
|
|
3369
3324
|
if (col.callback) {
|
|
3370
|
-
col.callback(
|
|
3325
|
+
col.callback(floatValue, indexRow);
|
|
3371
3326
|
}
|
|
3372
3327
|
handleDataChange(row, col, indexRow);
|
|
3373
3328
|
}
|
|
@@ -3804,7 +3759,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3804
3759
|
changeDataSource(dataSource);
|
|
3805
3760
|
};
|
|
3806
3761
|
const changeDataSource = (data, haveNew = false) => {
|
|
3807
|
-
if (!editDisable &&
|
|
3762
|
+
if (!editDisable && setDataSource) {
|
|
3808
3763
|
if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
|
|
3809
3764
|
if (searchSetting?.setSearchTerm) {
|
|
3810
3765
|
searchSetting?.setSearchTerm("");
|
|
@@ -3812,7 +3767,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
3812
3767
|
setSearchTerm("");
|
|
3813
3768
|
}
|
|
3814
3769
|
}
|
|
3815
|
-
if (haveNew) {
|
|
3770
|
+
if (haveNew && !addDisable) {
|
|
3816
3771
|
data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
|
|
3817
3772
|
setDataSource([...data]);
|
|
3818
3773
|
} else {
|
|
@@ -4057,7 +4012,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
4057
4012
|
color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
|
|
4058
4013
|
},
|
|
4059
4014
|
children: [
|
|
4060
|
-
typeDis === 1 && !refreshRow ?
|
|
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 }),
|
|
4061
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 }) }),
|
|
4062
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 }),
|
|
4063
4018
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
@@ -5392,6 +5347,8 @@ var Table_edit_default = table_default;
|
|
|
5392
5347
|
SelectTable,
|
|
5393
5348
|
SelectTableTree,
|
|
5394
5349
|
TabsMenuComponent,
|
|
5350
|
+
checkDecimalSeparator,
|
|
5351
|
+
checkThousandSeparator,
|
|
5395
5352
|
formartNumberic,
|
|
5396
5353
|
generateUUID,
|
|
5397
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;
|
|
@@ -1009,7 +1039,7 @@ var SelectTable = forwardRef((props, ref) => {
|
|
|
1009
1039
|
e.preventDefault();
|
|
1010
1040
|
},
|
|
1011
1041
|
tag: "div",
|
|
1012
|
-
style: { width:
|
|
1042
|
+
style: { width: "100%" },
|
|
1013
1043
|
className: classnames3("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
|
|
1014
1044
|
children: [
|
|
1015
1045
|
/* @__PURE__ */ jsxs5("div", { className: "select-table-container", children: [
|
|
@@ -1072,7 +1102,7 @@ var SelectTable = forwardRef((props, ref) => {
|
|
|
1072
1102
|
container: component,
|
|
1073
1103
|
className: "formula-dropdown icon-dropdown p-0",
|
|
1074
1104
|
style: {
|
|
1075
|
-
width: "min-content",
|
|
1105
|
+
width: width ? width + 2 : "min-content",
|
|
1076
1106
|
position: "fixed",
|
|
1077
1107
|
borderRadius: 3,
|
|
1078
1108
|
zIndex: 9999
|
|
@@ -2490,8 +2520,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
|
|
|
2490
2520
|
type: "checkbox",
|
|
2491
2521
|
className: "cursor-pointer",
|
|
2492
2522
|
onChange: () => {
|
|
2493
|
-
}
|
|
2494
|
-
style: { textAlign: "center" }
|
|
2523
|
+
}
|
|
2495
2524
|
}
|
|
2496
2525
|
)
|
|
2497
2526
|
]
|
|
@@ -2584,7 +2613,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
|
|
|
2584
2613
|
),
|
|
2585
2614
|
row[fieldChildren ?? "children"] && row.expanded && row[fieldChildren ?? "children"].map((child, indexChild) => {
|
|
2586
2615
|
if (checkSearch(searchTerm, child, columns ? columns : defaultColumns)) {
|
|
2587
|
-
const isSelectedChild = isMulti ? value?.some((x) => x === child[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === child[fieldValue ?? "value"];
|
|
2616
|
+
const isSelectedChild = value && (isMulti ? value?.some((x) => x === child[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === child[fieldValue ?? "value"]);
|
|
2588
2617
|
return /* @__PURE__ */ jsx15(RenderElement, { isSelected: isSelectedChild, indexRow: indexChild, row: child, level: level + 1 }, `select-table-${indexRow}-${indexChild}`);
|
|
2589
2618
|
}
|
|
2590
2619
|
})
|
|
@@ -2636,7 +2665,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
|
|
|
2636
2665
|
] }) }),
|
|
2637
2666
|
options.length > 0 && /* @__PURE__ */ jsx15(Fragment18, { children: /* @__PURE__ */ jsx15("tbody", { className: "r-select-gridcontent", children: options?.map((row, indexRow) => {
|
|
2638
2667
|
if (checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
|
|
2639
|
-
const isSelected = isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"];
|
|
2668
|
+
const isSelected = value && (isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
|
|
2640
2669
|
countDisplay++;
|
|
2641
2670
|
return /* @__PURE__ */ jsx15(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
|
|
2642
2671
|
}
|
|
@@ -2783,6 +2812,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
|
|
|
2783
2812
|
});
|
|
2784
2813
|
|
|
2785
2814
|
// test-app/src/component/table/index.tsx
|
|
2815
|
+
import { NumericFormat } from "react-number-format";
|
|
2786
2816
|
import { Fragment as Fragment20, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2787
2817
|
var TableEdit = forwardRef4((props, ref) => {
|
|
2788
2818
|
const { t } = useTranslation12();
|
|
@@ -2950,51 +2980,11 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
2950
2980
|
};
|
|
2951
2981
|
const handleDataChange = (row, col, indexRow) => {
|
|
2952
2982
|
if (rowChange) {
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
|
|
2959
|
-
if (element) {
|
|
2960
|
-
if (element.className.includes("input-element")) {
|
|
2961
|
-
element.value = row[contentColumns[index].field] ?? "";
|
|
2962
|
-
} else if (element.className.includes("input-numeric")) {
|
|
2963
|
-
element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
|
|
2964
|
-
} else if (element.className.includes("input-checkbox")) {
|
|
2965
|
-
element.checked = row[contentColumns[index].field] ?? false;
|
|
2966
|
-
}
|
|
2967
|
-
}
|
|
2968
|
-
}
|
|
2969
|
-
}
|
|
2970
|
-
changeDataSource(dataSource);
|
|
2971
|
-
if (dataSourceChange) {
|
|
2972
|
-
dataSourceChange(dataSource);
|
|
2973
|
-
}
|
|
2974
|
-
});
|
|
2975
|
-
} else {
|
|
2976
|
-
for (let index = 0; index <= contentColumns.length; index++) {
|
|
2977
|
-
if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
|
|
2978
|
-
const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
|
|
2979
|
-
if (element) {
|
|
2980
|
-
if (element.className.includes("input-element")) {
|
|
2981
|
-
element.value = row[contentColumns[index].field] ?? "";
|
|
2982
|
-
} else if (element.className.includes("input-numeric")) {
|
|
2983
|
-
element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
|
|
2984
|
-
} else if (element.className.includes("input-checkbox")) {
|
|
2985
|
-
element.checked = row[contentColumns[index].field] ?? false;
|
|
2986
|
-
}
|
|
2987
|
-
}
|
|
2988
|
-
}
|
|
2989
|
-
}
|
|
2990
|
-
if (dataSourceChange) {
|
|
2991
|
-
dataSourceChange(dataSource);
|
|
2992
|
-
}
|
|
2993
|
-
}
|
|
2994
|
-
} else {
|
|
2995
|
-
if (dataSourceChange) {
|
|
2996
|
-
dataSourceChange(dataSource);
|
|
2997
|
-
}
|
|
2983
|
+
rowChange(row, indexRow, col.field);
|
|
2984
|
+
}
|
|
2985
|
+
changeDataSource(dataSource);
|
|
2986
|
+
if (dataSourceChange) {
|
|
2987
|
+
dataSourceChange(dataSource);
|
|
2998
2988
|
}
|
|
2999
2989
|
};
|
|
3000
2990
|
const handleKeyPress = (e) => {
|
|
@@ -3027,7 +3017,7 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
3027
3017
|
} else {
|
|
3028
3018
|
toolbarTopOption = [...defaultToolbarOption];
|
|
3029
3019
|
}
|
|
3030
|
-
const
|
|
3020
|
+
const RenderEdit = (row, col, indexCol, indexRow) => {
|
|
3031
3021
|
switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
|
|
3032
3022
|
case "date":
|
|
3033
3023
|
return /* @__PURE__ */ jsx16(
|
|
@@ -3111,7 +3101,7 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
3111
3101
|
options: optionsSelect,
|
|
3112
3102
|
rowData: row,
|
|
3113
3103
|
onChange: (val) => {
|
|
3114
|
-
if (isMulti) {
|
|
3104
|
+
if (col.selectSettings?.isMulti) {
|
|
3115
3105
|
row[col.field] = !isNullOrUndefined(val) ? val : [];
|
|
3116
3106
|
} else {
|
|
3117
3107
|
row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
|
|
@@ -3194,7 +3184,7 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
3194
3184
|
options: optionsSelectTree,
|
|
3195
3185
|
rowData: row,
|
|
3196
3186
|
onChange: (val) => {
|
|
3197
|
-
if (isMulti) {
|
|
3187
|
+
if (col.selectSettings?.isMulti) {
|
|
3198
3188
|
row[col.field] = !isNullOrUndefined(val) ? val : [];
|
|
3199
3189
|
} else {
|
|
3200
3190
|
row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
|
|
@@ -3263,82 +3253,45 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
3263
3253
|
}
|
|
3264
3254
|
);
|
|
3265
3255
|
case "numeric":
|
|
3266
|
-
|
|
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]);
|
|
3267
3264
|
return /* @__PURE__ */ jsx16(
|
|
3268
|
-
|
|
3265
|
+
NumericFormat,
|
|
3269
3266
|
{
|
|
3270
3267
|
id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
|
|
3271
3268
|
style: { textAlign: col.textAlign, height: 29 },
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
|
|
3280
|
-
} else {
|
|
3281
|
-
newVal = val.target?.value.replaceAll(thousandSeparator, "");
|
|
3282
|
-
}
|
|
3283
|
-
} else {
|
|
3284
|
-
newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3285
|
-
}
|
|
3286
|
-
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;
|
|
3287
3276
|
},
|
|
3288
3277
|
onFocus: (e) => {
|
|
3289
3278
|
e.target.setSelectionRange(0, e.target.innerText.length - 1);
|
|
3290
3279
|
},
|
|
3291
|
-
onBlur: (
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
if (val.target?.value.endsWith(decimalSeparator)) {
|
|
3295
|
-
newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3296
|
-
} else {
|
|
3297
|
-
newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3298
|
-
}
|
|
3299
|
-
if (decimalSeparator === ",") {
|
|
3300
|
-
newVal = newVal.replaceAll(",", ".");
|
|
3301
|
-
}
|
|
3302
|
-
let value = flag ? 0 - Number(newVal) : Number(newVal);
|
|
3303
|
-
if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
|
|
3304
|
-
val.currentTarget.value = col.numericSettings?.max.toString();
|
|
3305
|
-
value = col.numericSettings?.max;
|
|
3306
|
-
} else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
|
|
3307
|
-
value = col.numericSettings?.min;
|
|
3308
|
-
val.currentTarget.value = col.numericSettings?.min.toString();
|
|
3309
|
-
}
|
|
3310
|
-
if (newVal !== row[col.field]) {
|
|
3311
|
-
row[col.field] = value;
|
|
3280
|
+
onBlur: () => {
|
|
3281
|
+
if (floatValue !== row[col.field]) {
|
|
3282
|
+
row[col.field] = floatValue;
|
|
3312
3283
|
if (col.callback) {
|
|
3313
|
-
col.callback(
|
|
3284
|
+
col.callback(floatValue, indexRow);
|
|
3314
3285
|
}
|
|
3315
3286
|
handleDataChange(row, col, indexRow);
|
|
3316
3287
|
}
|
|
3317
3288
|
},
|
|
3318
3289
|
onKeyDown: (e) => {
|
|
3319
3290
|
if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
if (e.target?.value.endsWith(decimalSeparator)) {
|
|
3323
|
-
newVal = e.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
|
|
3324
|
-
} else {
|
|
3325
|
-
newVal = e.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
|
-
e.target.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
|
-
e.target.value = col.numericSettings?.min.toString();
|
|
3337
|
-
}
|
|
3338
|
-
if (newVal !== row[col.field]) {
|
|
3339
|
-
row[col.field] = value;
|
|
3291
|
+
if (floatValue !== row[col.field]) {
|
|
3292
|
+
row[col.field] = floatValue;
|
|
3340
3293
|
if (col.callback) {
|
|
3341
|
-
col.callback(
|
|
3294
|
+
col.callback(floatValue, indexRow);
|
|
3342
3295
|
}
|
|
3343
3296
|
handleDataChange(row, col, indexRow);
|
|
3344
3297
|
}
|
|
@@ -3775,7 +3728,7 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
3775
3728
|
changeDataSource(dataSource);
|
|
3776
3729
|
};
|
|
3777
3730
|
const changeDataSource = (data, haveNew = false) => {
|
|
3778
|
-
if (!editDisable &&
|
|
3731
|
+
if (!editDisable && setDataSource) {
|
|
3779
3732
|
if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
|
|
3780
3733
|
if (searchSetting?.setSearchTerm) {
|
|
3781
3734
|
searchSetting?.setSearchTerm("");
|
|
@@ -3783,7 +3736,7 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
3783
3736
|
setSearchTerm("");
|
|
3784
3737
|
}
|
|
3785
3738
|
}
|
|
3786
|
-
if (haveNew) {
|
|
3739
|
+
if (haveNew && !addDisable) {
|
|
3787
3740
|
data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
|
|
3788
3741
|
setDataSource([...data]);
|
|
3789
3742
|
} else {
|
|
@@ -4028,7 +3981,7 @@ var TableEdit = forwardRef4((props, ref) => {
|
|
|
4028
3981
|
color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
|
|
4029
3982
|
},
|
|
4030
3983
|
children: [
|
|
4031
|
-
typeDis === 1 && !refreshRow ?
|
|
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 }),
|
|
4032
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 }) }),
|
|
4033
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 }),
|
|
4034
3987
|
/* @__PURE__ */ jsx16(
|
|
@@ -5362,6 +5315,8 @@ export {
|
|
|
5362
5315
|
SelectTable,
|
|
5363
5316
|
SelectTableTree,
|
|
5364
5317
|
TabsMenuComponent,
|
|
5318
|
+
checkDecimalSeparator,
|
|
5319
|
+
checkThousandSeparator,
|
|
5365
5320
|
Table_edit_default as default,
|
|
5366
5321
|
formartNumberic,
|
|
5367
5322
|
generateUUID,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-table-edit",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "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
|
},
|