react-table-edit 1.5.25 → 1.5.27

package/dist/index.js

@@ -39794,7 +39794,7 @@ const SettingColumn = React__default["default"].memo((props) => {
         ];
         return (jsxRuntime.jsx(SelectTable, { component: gridRef, options: optionsFix, textAlign: 'left', isClearable: true, onChange: (val) => {
                 if (dataSource) {
-                    dataSource[index].fixedType = val?.value ?? null;
+                    dataSource[index].fixedType = val?.value;
                     setDataSource([...dataSource]);
                 }
             }, value: item.fixedType ? optionsFix.find((x) => x.value === item.fixedType) : undefined }));
@@ -39821,10 +39821,9 @@ const SettingColumn = React__default["default"].memo((props) => {
                 }
             } }));
     };
-    const RowSetting = React__default["default"].memo(({ item, index }) => {
-        return (jsxRuntime.jsxs("div", { className: "r-setting-row", children: [jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsxRuntime.jsx(SvgDragDrop, { fontSize: 12, className: "drag-icon cursor-move" }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: jsxRuntime.jsx(HeaderDisplayTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: jsxRuntime.jsx(VisibleTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: jsxRuntime.jsx(FixColumnTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: jsxRuntime.jsx(WidthColumnTemplate, { item: item, index: index }) })] }));
-    });
-    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxRuntime.jsxs("div", { className: "r-setting-container", children: [jsxRuntime.jsxs("div", { style: { fontWeight: 700, color: '#000' }, className: "r-setting-row r-setting-header me-75", children: [jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsxRuntime.jsx("div", { className: "r-setting-content", style: { height: windowSize.innerHeight - 140 }, children: jsxRuntime.jsx(dist.exports.ReactSortable, { tag: "div", list: dataSource, handle: ".drag-icon", setList: (newState) => setDataSource(newState), filter: "input,textarea,select", preventOnFilter: false, children: dataSource.map((item, index) => (jsxRuntime.jsx(RowSetting, { item: item, index: index }, index))) }) })] }), jsxRuntime.jsxs("div", { style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && (jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] })) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && (jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
+    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxRuntime.jsxs("div", { className: "r-setting-container", children: [jsxRuntime.jsxs("div", { style: { fontWeight: 700, color: '#000' }, className: "r-setting-row r-setting-header me-75", children: [jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsxRuntime.jsx("div", { className: "r-setting-content", style: { height: windowSize.innerHeight - 140 }, children: jsxRuntime.jsx(dist.exports.ReactSortable, { tag: "div", list: dataSource, handle: ".drag-icon", setList: (newState) => setDataSource(newState), children: dataSource.map((item, index) => {
+                                return (jsxRuntime.jsxs("div", { className: "r-setting-row", children: [jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsxRuntime.jsx(SvgDragDrop, { fontSize: 12, className: "drag-icon cursor-move" }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: jsxRuntime.jsx(HeaderDisplayTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: jsxRuntime.jsx(VisibleTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: jsxRuntime.jsx(FixColumnTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: jsxRuntime.jsx(WidthColumnTemplate, { item: item, index: index }) })] }));
+                            }) }) })] }), jsxRuntime.jsxs("div", { style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && (jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] })) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && (jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
 });
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting }) => {
@@ -40245,6 +40244,18 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     const toggleSidebar = React$5.useCallback(() => {
         setOpenPopupSetupColumn((prev) => !prev);
     }, []);
+    const handleSetColumn = React$5.useCallback((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]);
     return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
                                 handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                             }, setContentColumns: (newColumns) => {
@@ -40268,11 +40279,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                 handleInsertBefore(dataSource, startCell.row, defaultValue, changeDataSource, toolbarSetting, buttonSetting, editDisable, addDisable);
                             }, handleDeleteAll: () => {
                                 handleDeleteAll(t, messageBoxConfirmDelete, handleFocusCell, changeDataSource, editDisable, addDisable, toolbarSetting, buttonSetting);
-                            }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, focusRow: startCell.row, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns }))] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: toggleSidebar, 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 })));
-                        }
-                    } })] }) }));
+                            }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, focusRow: startCell.row, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns }))] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: toggleSidebar, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: contentColumns, resetDefaultColumns: resetDefaultColumns, setColumn: handleSetColumn })] }) }));
 });
 
 const OptionFont = [