react-table-edit 1.4.54 → 1.4.55

package/dist/component/table/key-handlers.d.ts

@@ -1,4 +1,5 @@
 import { KeyboardEvent } from "react";
+import { TFunction } from "react-i18next";
 import { ICellInfo, IColumnTable, IFTableEditPaging } from "../type";
 export interface KeyHandlerParams {
     row: any;
@@ -10,6 +11,7 @@ export interface KeyHandlerParams {
     indexLastEdit: number;
     editDisable?: boolean;
     addDisable?: boolean;
+    t: TFunction<"translation", undefined>;
     pagingSetting?: IFTableEditPaging;
     changeDataSource: (data: any[], numberOfRows?: number) => void;
     rowChange?: (row: any, indexRow: number, field: string) => void;
@@ -20,8 +22,8 @@ export interface KeyHandlerParams {
 }
 export declare const handleArrowRight: (e: KeyboardEvent<any>, params: KeyHandlerParams) => void;
 export declare const handleArrowLeft: (e: KeyboardEvent<any>, params: KeyHandlerParams) => void;
-export declare const handleArrowUp: (e: KeyboardEvent<any>, params: KeyHandlerParams) => void;
-export declare const handleArrowDown: (e: KeyboardEvent<any>, params: KeyHandlerParams) => void;
+export declare const handleArrowUp: (e: KeyboardEvent<any>, params: KeyHandlerParams) => Promise<void>;
+export declare const handleArrowDown: (e: KeyboardEvent<any>, params: KeyHandlerParams) => Promise<void>;
 export declare const handleTab: (e: KeyboardEvent<any>, params: KeyHandlerParams) => void;
 export declare const handleEnter: (e: KeyboardEvent<any>, params: KeyHandlerParams) => void;
 export declare const handleCtrlD: (e: KeyboardEvent<any>, params: KeyHandlerParams) => void;

package/dist/index.js

@@ -42787,7 +42787,7 @@ const PasteData = async (props) => {
                             const rs = column.resultValidate.find((item) => item[column.selectSettings?.fieldValue ?? "value"] === stringData);
                             if (rs) {
                                 if (column.onPaste) {
-                                    dataRow[column.field] = column.onPaste(dataRow, stringData);
+                                    column.onPaste(dataRow, stringData);
                                 }
                                 else {
                                     dataRow[column.field] = stringData;
@@ -42859,7 +42859,7 @@ const PasteData = async (props) => {
                             else if (column.type === "select") {
                                 if (column.selectSettings?.allowCreate) {
                                     if (column.onPaste) {
-                                        dataRow[column.field] = column.onPaste(dataRow, stringData);
+                                        column.onPaste(dataRow, stringData);
                                     }
                                     else {
                                         dataRow[column.field] = stringData;
@@ -42872,7 +42872,7 @@ const PasteData = async (props) => {
                                     const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? "value"] === stringData);
                                     if (rs) {
                                         if (column.onPaste) {
-                                            dataRow[column.field] = column.onPaste(dataRow, stringData);
+                                            column.onPaste(dataRow, stringData);
                                         }
                                         else {
                                             dataRow[column.field] = stringData;
@@ -43097,7 +43097,7 @@ const CellComponent = React__default["default"].memo((props) => {
             setSelectedCell({ minRow, maxRow, minCol, maxCol });
         }
     };
-    const handleMouseUp = () => {
+    const handleMouseUp = async () => {
         if (!typeDragging.current) {
             return;
         }
@@ -43105,13 +43105,40 @@ const CellComponent = React__default["default"].memo((props) => {
             const column = contentColumns[startCell.col];
             const dataCopyRow = dataSource[startCell.row];
             if (!(column.editEnable !== true || col.disabledCondition?.(dataCopyRow))) {
+                let objCallback;
+                if (column.onPasteValidate) {
+                    const rs = await column.onPasteValidate(dataCopyRow[column.field ?? ''], dataCopyRow, startCell?.row);
+                    if (rs && rs.length > 0) {
+                        objCallback = rs[0];
+                    }
+                    else {
+                        notificationError(t("PasteExcelNotExist", { index: startCell.row + 1, field: t(column.headerText ?? ""), value: dataCopyRow[column.field ?? ''] }));
+                        typeDragging.current = 0;
+                        isCopying.current = false;
+                        return;
+                    }
+                }
                 const startIndex = startCell.row > indexRow ? startCell.row - 1 : startCell.row + 1;
                 const condition = (idx) => (startCell.row > indexRow ? idx >= indexRow : idx <= indexRow);
                 for (let index = startIndex; condition(index); (startCell.row > indexRow ? index-- : index++)) {
-                    dataSource[index][column.field ?? ''] = dataCopyRow[column.field ?? ''];
-                    if (column.callback && column.callbackValue) {
-                        const value = column.callbackValue(dataCopyRow);
-                        column.callback(value, index, dataSource[index]);
+                    //copy dữ liệu
+                    if (column.onPaste) {
+                        column.onPaste(dataSource[index], dataCopyRow[column.field ?? '']);
+                    }
+                    else {
+                        dataSource[index][column.field ?? ''] = dataCopyRow[column.field ?? ''];
+                    }
+                    //callback
+                    if (column.callback) {
+                        //Xác thực dữ liệu được paste
+                        if (objCallback) {
+                            column.callback(objCallback, index, dataSource[index]);
+                            //Giá trị trường callback khi copy
+                        }
+                        else if (column.callbackValue) {
+                            objCallback = column.callbackValue(dataCopyRow);
+                            column.callback(objCallback, index, dataSource[index]);
+                        }
                     }
                     if (rowChange) {
                         rowChange(dataSource[index], index, column.field);
@@ -43152,7 +43179,7 @@ const CellComponent = React__default["default"].memo((props) => {
     const content = typeDis === 'template' ? col.template?.(row, indexRow) ?? '' : value;
     const isNegativeNumeric = col.type === 'numeric' && Number(row[col.field]) < 0;
     const displayValue = isNegativeNumeric ? jsxRuntime.jsx("span", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: `${formatSetting?.prefixNegative ?? '-'}${content}${formatSetting?.suffixNegative ?? ''}` }) : content;
-    return (jsxRuntime.jsx("td", { ...commonTdProps, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: jsxRuntime.jsxs("div", { className: classNames$2("r-rowcell-content", { "r-active-cell": (isSelected && editDisable) || isActiveCell }, { "r-cell-disable": col.editEnable !== true || col.disabledCondition?.(row) }, { "r-cell-selected-top": indexRow === selectedCell?.minRow && isActiveCell }, { "r-cell-selected-bottom": indexRow === selectedCell?.maxRow && isActiveCell }, { "r-cell-selected-left": indexCol === selectedCell?.minCol && isActiveCell }, { "r-cell-selected-right": indexCol === selectedCell?.maxCol && isActiveCell }, { "r-cell-selected-single": isSingleCellSelected }), style: { textAlign: col.textAlign ?? "left" }, children: [typeDis === 'edit' ? jsxRuntime.jsx(RenderEditCellComponent, { idTable: idTable, col: col, handleKeyDown: handleKeyDown, handleDataChange: handleDataChange, indexCol: indexCol, indexRow: indexRow, row: row, editDisable: editDisable, formatSetting: formatSetting, gridRef: gridRef }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}-col${indexCol}`, tabIndex: Number(`${indexRow + 1}${indexCol + 1}`), onKeyDown: (e) => handleKeyDown(e, row), onMouseDown: (e) => handleMouseDown(e, 1), onDoubleClick: (e) => { focusEditElementCell(e, indexRow, indexCol); }, style: { justifyContent: col.textAlign === "center" ? "center" : col.textAlign === "right" ? "flex-end" : "flex-start" }, className: "r-cell-text", children: displayValue }), content && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}-col${indexCol}`, children: displayValue }))] }), errorMessage && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `error-row${indexRow}-col${indexCol}`, className: classNames$2("cursor-pointer r-icon-invalid"), children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_537_2)", children: jsxRuntime.jsx("path", { d: "M18.0301 -0.0416304L17.9871 17.5138L0.474868 0.0404105L18.0301 -0.0416304Z", fill: "#da2626ff" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_537_2", children: jsxRuntime.jsx("rect", { width: "18", height: "18", fill: "white" }) }) })] }) }), jsxRuntime.jsx(UncontrolledTooltip, { target: `error-row${indexRow}-col${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? "" })] }), jsxRuntime.jsx("div", { className: "drag-handler", onMouseDown: (e) => handleMouseDown(e, 1, true) }), typeDis !== 'edit' && col.type === 'select' && jsxRuntime.jsx("div", { className: "drop-icon", children: jsxRuntime.jsx("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })] }) }) }));
+    return (jsxRuntime.jsx("td", { ...commonTdProps, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: jsxRuntime.jsxs("div", { className: classNames$2("r-rowcell-content", { "r-active-cell": (isSelected && editDisable) || isActiveCell }, { "r-cell-disable": col.editEnable !== true || col.disabledCondition?.(row) }, { "r-cell-selected-top": indexRow === selectedCell?.minRow && isActiveCell }, { "r-cell-selected-bottom": indexRow === selectedCell?.maxRow && isActiveCell }, { "r-cell-selected-left": indexCol === selectedCell?.minCol && isActiveCell }, { "r-cell-selected-right": indexCol === selectedCell?.maxCol && isActiveCell }, { "r-cell-selected-single": isSingleCellSelected }), style: { textAlign: col.textAlign ?? "left" }, children: [typeDis === 'edit' ? jsxRuntime.jsx(RenderEditCellComponent, { idTable: idTable, col: col, handleKeyDown: handleKeyDown, handleDataChange: handleDataChange, indexCol: indexCol, indexRow: indexRow, row: row, editDisable: editDisable, formatSetting: formatSetting, gridRef: gridRef }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}-col${indexCol}`, tabIndex: Number(`${indexRow + 1}${indexCol + 1}`), onKeyDown: (e) => handleKeyDown(e, row), onMouseDown: (e) => handleMouseDown(e, 1), onDoubleClick: (e) => { focusEditElementCell(e, indexRow, indexCol); }, style: { justifyContent: col.textAlign === "center" ? "center" : col.textAlign === "right" ? "flex-end" : "flex-start" }, className: "r-cell-text", children: displayValue }), !!content && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}-col${indexCol}`, children: displayValue }))] }), errorMessage && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `error-row${indexRow}-col${indexCol}`, className: classNames$2("cursor-pointer r-icon-invalid"), children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_537_2)", children: jsxRuntime.jsx("path", { d: "M18.0301 -0.0416304L17.9871 17.5138L0.474868 0.0404105L18.0301 -0.0416304Z", fill: "#da2626ff" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_537_2", children: jsxRuntime.jsx("rect", { width: "18", height: "18", fill: "white" }) }) })] }) }), jsxRuntime.jsx(UncontrolledTooltip, { target: `error-row${indexRow}-col${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? "" })] }), jsxRuntime.jsx("div", { className: "drag-handler", onMouseDown: (e) => handleMouseDown(e, 1, true) }), typeDis !== 'edit' && col.type === 'select' && jsxRuntime.jsx("div", { className: "drop-icon", children: jsxRuntime.jsx("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })] }) }) }));
 });
 
 const handleArrowRight = (e, params) => {
@@ -43183,20 +43210,44 @@ const handleArrowLeft = (e, params) => {
         e.preventDefault();
     }
 };
-const handleArrowUp = (e, params) => {
-    const { startCell, pagingClient, pagingSetting, handleFocusCell, rowChange, changeDataSource, contentColumns, dataSource, row } = params;
+const handleArrowUp = async (e, params) => {
+    const { startCell, pagingClient, pagingSetting, handleFocusCell, t, rowChange, changeDataSource, contentColumns, dataSource, row } = params;
     if (startCell.row > 0) {
         if ((e.ctrlKey || e.metaKey || e.altKey) && e.shiftKey) {
             const column = contentColumns[startCell.col];
+            let objCallback;
+            if (column.onPasteValidate) {
+                const rs = await column.onPasteValidate(row[column.field ?? ''], row, startCell?.row);
+                if (rs && rs.length > 0) {
+                    objCallback = rs[0];
+                }
+                else {
+                    notificationError(t("PasteExcelNotExist", { index: startCell.row + 1, field: t(column.headerText ?? ""), value: row[column.field ?? ''] }));
+                    return;
+                }
+            }
             for (let index = startCell.row; index >= 0; index--) {
-                const element = dataSource[index];
-                element[column.field ?? ''] = row[column.field ?? ''];
-                if (column.callback && column.callbackValue) {
-                    const value = column.callbackValue(row);
-                    column.callback(value, index, element);
+                //copy dữ liệu
+                if (column.onPaste) {
+                    column.onPaste(dataSource[index], row[column.field ?? '']);
+                }
+                else {
+                    dataSource[index][column.field ?? ''] = row[column.field ?? ''];
+                }
+                //callback
+                if (column.callback) {
+                    //Xác thực dữ liệu được paste
+                    if (objCallback) {
+                        column.callback(objCallback, index, dataSource[index]);
+                        //Giá trị trường callback khi copy
+                    }
+                    else if (column.callbackValue) {
+                        objCallback = column.callbackValue(row);
+                        column.callback(objCallback, index, dataSource[index]);
+                    }
                 }
                 if (rowChange) {
-                    rowChange(element, index, column.field);
+                    rowChange(dataSource[index], index, column.field);
                 }
             }
             changeDataSource(dataSource);
@@ -43210,20 +43261,44 @@ const handleArrowUp = (e, params) => {
         e.preventDefault();
     }
 };
-const handleArrowDown = (e, params) => {
-    const { startCell, totalCount, pagingClient, pagingSetting, handleFocusCell, rowChange, changeDataSource, dataSource, contentColumns, row } = params;
+const handleArrowDown = async (e, params) => {
+    const { t, startCell, totalCount, pagingClient, pagingSetting, handleFocusCell, rowChange, changeDataSource, dataSource, contentColumns, row } = params;
     if (startCell.row < totalCount - 1) {
         if ((e.ctrlKey || e.metaKey || e.altKey) && e.shiftKey) {
             const column = contentColumns[startCell.col];
+            let objCallback;
+            if (column.onPasteValidate) {
+                const rs = await column.onPasteValidate(row[column.field ?? ''], row, startCell?.row);
+                if (rs && rs.length > 0) {
+                    objCallback = rs[0];
+                }
+                else {
+                    notificationError(t("PasteExcelNotExist", { index: startCell.row + 1, field: t(column.headerText ?? ""), value: row[column.field ?? ''] }));
+                    return;
+                }
+            }
             for (let index = startCell.row + 1; index < totalCount; index++) {
-                const element = dataSource[index];
-                element[column.field ?? ''] = row[column.field ?? ''];
-                if (column.callback && column.callbackValue) {
-                    const value = column.callbackValue(row);
-                    column.callback(value, index, element);
+                //copy dữ liệu
+                if (column.onPaste) {
+                    column.onPaste(dataSource[index], row[column.field ?? '']);
+                }
+                else {
+                    dataSource[index][column.field ?? ''] = row[column.field ?? ''];
+                }
+                //callback
+                if (column.callback) {
+                    //Xác thực dữ liệu được paste
+                    if (objCallback) {
+                        column.callback(objCallback, index, dataSource[index]);
+                        //Giá trị trường callback khi copy
+                    }
+                    else if (column.callbackValue) {
+                        objCallback = column.callbackValue(row);
+                        column.callback(objCallback, index, dataSource[index]);
+                    }
                 }
                 if (rowChange) {
-                    rowChange(element, index, column.field);
+                    rowChange(dataSource[index], index, column.field);
                 }
             }
             changeDataSource(dataSource);