react-table-edit 1.4.21 → 1.4.23

package/dist/component/input/input-date/index.d.ts

@@ -1,3 +1,4 @@
+import { ClipboardEvent } from 'react';
 interface IFFormInput {
     id?: string;
     onKeyDown: any;
@@ -5,6 +6,7 @@ interface IFFormInput {
     onChange: any;
     className?: string;
     value: Date;
+    onPaste?: (e: ClipboardEvent<HTMLElement>) => void;
 }
 declare const DateInput: (props: IFFormInput) => import("react/jsx-runtime").JSX.Element;
 export default DateInput;

package/dist/index.js

@@ -39911,13 +39911,18 @@ if (process.env.NODE_ENV === 'production') {
 var InputMask = reactInputMask.exports;
 
 const DateInput = (props) => {
-    const { id, onKeyDown, dateFormat, className, onChange, value } = props;
+    const { id, onKeyDown, dateFormat, className, onChange, value, onPaste } = props;
     const [open, setOpen] = React$5.useState(false);
     return (jsxRuntime.jsx(DatePicker, { id: id, open: open, className: className, selected: value, onChange: (date) => {
             if (onChange) {
                 onChange(date);
             }
-        }, dateFormat: dateFormat, locale: "vi", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", isClearable: true, onCalendarClose: () => setOpen(false), onCalendarOpen: () => setOpen(true), customInput: jsxRuntime.jsx(InputMask, { mask: "99/99/9999", placeholder: dateFormat }), onKeyDown: (e) => {
+        }, dateFormat: dateFormat, locale: "vi", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", isClearable: true, onCalendarClose: () => setOpen(false), onCalendarOpen: () => setOpen(true), customInput: jsxRuntime.jsx(InputMask, { mask: "99/99/9999", placeholder: dateFormat, onPaste: (e) => {
+                if (onPaste) {
+                    onPaste(e);
+                    setOpen(false);
+                }
+            } }), onKeyDown: (e) => {
             if (e.code === 'Space') {
                 setOpen(!open);
                 setTimeout(() => {
@@ -39927,12 +39932,10 @@ const DateInput = (props) => {
                     }
                 }, 100);
             }
-            else {
-                if (onKeyDown && !open) {
-                    const rs = onKeyDown(e);
-                    if (rs) {
-                        setOpen(false);
-                    }
+            else if (onKeyDown && (!open || ((e.ctrlKey || e.metaKey || e.altKey) && e.shiftKey))) {
+                const rs = onKeyDown(e);
+                if (rs) {
+                    setOpen(false);
                 }
             }
         } }));
@@ -42791,6 +42794,11 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
                             return true;
                         }
+                    }, onPaste: (e) => {
+                        if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                            pasteDataFromExcel(indexRow, indexCol, e);
+                            e.preventDefault();
+                        }
                     } }));
             case 'datetime':
                 return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$1('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
@@ -42801,6 +42809,11 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         handleDataChange(row, col, indexRow);
                     }, dateFormat: "dd/MM/yyyy HH:mm", onKeyDown: (e) => {
                         checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+                    }, onPaste: (e) => {
+                        if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                            pasteDataFromExcel(indexRow, indexCol, e);
+                            e.preventDefault();
+                        }
                     } }));
             case 'select':
                 let valueSelect;
@@ -43183,7 +43196,28 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             }
                             else {
                                 if (column.editType === 'date') {
-                                    const date = new Date(stringData);
+                                    const [day, month, year] = stringData.split('/');
+                                    const date = new Date(`${year}-${month}-${day}`);
+                                    if (!isNaN(date.getTime())) {
+                                        if (column.onPaste) {
+                                            dataRow[column.field] = column.onPaste(dataRow, date);
+                                        }
+                                        else {
+                                            dataRow[column.field] = date;
+                                        }
+                                        if (column.callback) {
+                                            column.callback(date, currenRowIndex + indexRow, dataRow);
+                                        }
+                                    }
+                                    else {
+                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                    }
+                                }
+                                else if (column.editType === 'datetime') {
+                                    const [datePart, timePart] = stringData.split(' ');
+                                    const [day, month, year] = datePart.split('/');
+                                    const [hour, minute] = timePart.split(':');
+                                    const date = new Date(year, month - 1, day, hour, minute);
                                     if (!isNaN(date.getTime())) {
                                         if (column.onPaste) {
                                             dataRow[column.field] = column.onPaste(dataRow, date);
@@ -65522,19 +65556,14 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
                 }, placeholder: t('Select') }) }));
     };
     const handleSave = () => {
-        if (valueFilter || valueFilter === 0) {
-            if (filter) {
-                filter.ope = operator;
-                filter.value = valueFilter;
-            }
-            else {
-                filterBy.push({ key: column.field, ope: operator, value: valueFilter });
-            }
-            changeFilter([...filterBy]);
+        if (filter) {
+            filter.ope = operator;
+            filter.value = valueFilter ?? '';
         }
         else {
-            changeFilter(filterBy.filter((x) => x.key !== column.field));
+            filterBy.push({ key: column.field, ope: operator, value: valueFilter ?? '' });
         }
+        changeFilter([...filterBy]);
         setOpenFilter(false);
     };
     return (jsxRuntime.jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
@@ -65542,7 +65571,7 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
                 handleSave();
                 e.stopPropagation();
             }
-        }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1, { outline: true, color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50', outline: true, style: { borderRadius: 3 }, onClick: () => {
+        }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50  fw-bold', outline: true, style: { borderRadius: 3 }, onClick: () => {
                             if (filterBy) {
                                 changeFilter(filterBy.filter((x) => x.key !== column.field));
                             }
@@ -65725,7 +65754,7 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
             }
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
+    return (jsxRuntime.jsxs("div", { className: "react-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
                                                     setFilterBy([...val]);
                                                     if (changeFilter) {
                                                         changeFilter(val);