react-table-edit 1.5.36 → 1.5.38

package/dist/index.mjs

@@ -68714,9 +68714,24 @@ const RenderContentCol = (props) => {
         const element = document.getElementById(cellId);
         return element && element.scrollWidth > element.clientWidth;
     };
+    const toggleSelect = () => {
+        const idx = selectedRows?.findIndex((x) => x?.[fieldKey] === row?.[fieldKey]);
+        if (idx > -1) {
+            if (isMulti) {
+                return selectedRows?.filter((_, i) => i !== idx);
+            }
+            return [];
+        }
+        if (isMulti) {
+            return [...selectedRows, row];
+        }
+        return [row];
+    };
     const RenderElement = () => {
         if (col.field === '#' || col.type === '#') {
-            return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', { 'r-active-cell': isSelected }), style: {
+            return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
+                    'r-active-cell': isSelected
+                }), style: {
                     fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
                     fontStyle: row.haveItalicType ? 'italic' : 'normal'
                 }, onDoubleClick: (e) => {
@@ -68726,25 +68741,14 @@ const RenderContentCol = (props) => {
                 }, children: indexRow + 1 }));
         }
         else if (col.type === 'checkbox' || col.field === 'checkbox') {
-            return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', { 'r-active-cell': isSelected }), style: { display: 'flex', justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start', alignItems: 'center' }, onClick: (e) => {
-                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-                    if (index > -1) {
-                        if (isMulti) {
-                            selectedRows?.splice(index, 1);
-                            setSelectedRows([...selectedRows]);
-                        }
-                        else {
-                            setSelectedRows([]);
-                        }
-                    }
-                    else {
-                        if (isMulti) {
-                            setSelectedRows([...selectedRows, row]);
-                        }
-                        else {
-                            setSelectedRows([row]);
-                        }
-                    }
+            return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
+                    'r-active-cell': isSelected
+                }), style: {
+                    display: 'flex',
+                    justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
+                    alignItems: 'center'
+                }, onClick: (e) => {
+                    setSelectedRows(toggleSelect());
                     e.stopPropagation();
                 }, children: jsx(Input$1, { defaultChecked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }));
         }
@@ -68771,13 +68775,11 @@ const RenderContentCol = (props) => {
             const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
             const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
             const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
-            return (jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', { 'r-active-cell': isSelected }), style: {
+            return (jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
+                    'r-active-cell': isSelected
+                }), style: {
                     fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
                     fontStyle: row.haveItalicType ? 'italic' : 'normal'
-                }, onDoubleClick: (e) => {
-                    e.preventDefault();
-                    handleCloseContext();
-                    handleDoubleClick?.(row, col);
                 }, children: [jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
                             justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
@@ -68794,31 +68796,40 @@ const RenderContentCol = (props) => {
                             }, children: displayText }) }))] }));
         }
     };
-    return (jsx(Fragment$1, { children: col.visible !== false && col.isGroup !== true && (jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': isSelected }), style: {
+    const clickTimerRef = useRef(null);
+    return (jsx(Fragment$1, { children: col.visible !== false && col.isGroup !== true && (jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
+                'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight)
+            }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                 right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
             }, onClick: (e) => {
-                if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
-                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-                    if (index > -1) {
-                        if (isMulti) {
-                            selectedRows?.splice(index, 1);
-                            setSelectedRows([...selectedRows]);
-                        }
-                        else {
-                            setSelectedRows([]);
-                        }
-                    }
-                    else {
-                        if (isMulti) {
-                            setSelectedRows([...selectedRows, row]);
-                        }
-                        else {
-                            setSelectedRows([row]);
-                        }
-                    }
-                    e.stopPropagation();
+                const tag = e.target?.nodeName;
+                if (tag !== 'DIV' && tag !== 'TD') {
+                    return;
                 }
+                if (clickTimerRef.current) {
+                    window.clearTimeout(clickTimerRef.current);
+                }
+                if (handleDoubleClick) {
+                    clickTimerRef.current = window.setTimeout(() => {
+                        setSelectedRows(toggleSelect());
+                        clickTimerRef.current = null;
+                    }, 200);
+                }
+                else {
+                    setSelectedRows(toggleSelect());
+                    clickTimerRef.current = null;
+                }
+            }, onDoubleClick: (e) => {
+                // hủy single click pending để không đổi style trước
+                if (clickTimerRef.current) {
+                    window.clearTimeout(clickTimerRef.current);
+                }
+                clickTimerRef.current = null;
+                handleCloseContext();
+                handleDoubleClick?.(row, col);
+                e.preventDefault();
+                e.stopPropagation();
             }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
 };
 
@@ -68953,7 +68964,11 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         return (jsx("div", { className: "me-50 r-search", children: jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
     };
     const groupbtnTemplate = () => {
-        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText) } : undefined, onChange: (val) => {
+        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
+                                            ? {
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText)
+                                            }
+                                            : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[0] = val.field;
                                             }
@@ -68961,7 +68976,11 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
+                                            ? {
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText)
+                                            }
+                                            : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[1] = val.field;
                                             }
@@ -68969,7 +68988,11 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
+                                            ? {
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText)
+                                            }
+                                            : undefined, onChange: (val) => {
                                             if (groupSetting) {
                                                 if (val) {
                                                     groupColumns[2] = val.field;
@@ -68980,7 +69003,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 setGroupColumns([...groupColumns]);
                                             }
                                         }, isClearable: groupColumns?.length === 3 }) })] }), jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
-                                        groupSetting?.onGroup({ columnGrouped: groupColumns.filter((x) => x) });
+                                        groupSetting?.onGroup({
+                                            columnGrouped: groupColumns.filter((x) => x)
+                                        });
                                         document.getElementById('group-dropdown-toggle')?.click();
                                     }, children: `${t('Apply')}` }), jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
                                         groupSetting?.onGroup({ columnGrouped: [] });
@@ -69033,8 +69058,6 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
     };
     useEffect(() => {
-        console.log(selectedRows);
-        console.log(isMulti);
         if (setSelectedItem) {
             if (isMulti) {
                 if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
@@ -69103,7 +69126,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                     if (col.template) {
                         value = col.template(row, indexRow) ?? '';
                     }
-                    return (jsxs(Fragment$1, { children: [jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxs("div", { className: "r-rowcell-div", children: [jsx(SvgChevronRight, { style: { marginLeft: level * 20, transform: expand ? 'rotate(90deg)' : 'rotate(0deg)' }, fontSize: 15, onClick: () => {
+                    return (jsxs(Fragment$1, { children: [jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxs("div", { className: "r-rowcell-div", children: [jsx(SvgChevronRight, { style: {
+                                                        marginLeft: level * 20,
+                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
+                                                    }, fontSize: 15, onClick: () => {
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
@@ -69124,12 +69150,18 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 sumValue = '';
                                             }
                                         }
-                                        return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
+                                        return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: {
+                                                    justifyContent: colSum.textAlign ? colSum.textAlign : 'left'
+                                                }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? (jsxs("div", { style: {
+                                                        color: formatSetting?.colorNegative ?? 'red'
+                                                    }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
                                     })] }), expand && jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                    return (jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', { 'r-last-row': level === 0 && indexRow === viewData.length - 1 }), onContextMenu: (e) => {
+                    return (jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
+                            'r-last-row': level === 0 && indexRow === viewData.length - 1
+                        }), onContextMenu: (e) => {
                             e.preventDefault();
                             handleContextMenu(e, row);
                         }, children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
@@ -69159,7 +69191,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             virtualDivRef.current.style.height = '0px';
         }
     }, [context]);
-    return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, position: 'relative' }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
+    return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
+                            height: `${height ? `${height}px` : 'auto'}`,
+                            position: 'relative'
+                        }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
                                             return (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                                         setFilterBy([...val]);
                                                         if (querySetting?.changeFilter) {
@@ -69189,7 +69224,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                                                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                                                         textAlign: col.textAlign ? col.textAlign : 'left'
-                                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `summarycell-${indexCol}`));
+                                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? (jsxs("div", { style: {
+                                                                color: formatSetting?.colorNegative ?? 'red'
+                                                            }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
                                             }) })) })] }), jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
                                         return (jsxs("div", { className: "r-context-item", onClick: () => {
                                                 handleCloseContext();
@@ -69199,7 +69236,14 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {
-                        saveSettingColumn(newColumns.map((x, index) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width, sortOrder: index + 1 })));
+                        saveSettingColumn(newColumns.map((x, index) => ({
+                            field: x.field,
+                            headerText: x.headerDisplay,
+                            visible: x.visible,
+                            fixedType: x.fixedType,
+                            width: x.width,
+                            sortOrder: index + 1
+                        })));
                     }
                 } })] }));
 };