From 531bd68f17896332b4cabf8a6149c100c01c701d Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sat, 12 Aug 2023 20:16:46 -0500 Subject: [PATCH] release v1.1.1 - fix edit cancel bugs --- .../pages/changelog.mdx | 7 +++++- packages/mantine-react-table/package.json | 2 +- .../src/buttons/MRT_EditActionButtons.tsx | 2 +- .../mantine-react-table/src/column.utils.ts | 8 ++++--- .../src/hooks/useMRT_Effects.ts | 11 +++++++-- .../src/inputs/MRT_EditCellTextInput.tsx | 4 ++-- .../src/modals/MRT_EditRowModal.tsx | 23 +++++++++++-------- 7 files changed, 37 insertions(+), 20 deletions(-) diff --git a/apps/mantine-react-table-docs/pages/changelog.mdx b/apps/mantine-react-table-docs/pages/changelog.mdx index 7e682cc43..d22030adc 100644 --- a/apps/mantine-react-table-docs/pages/changelog.mdx +++ b/apps/mantine-react-table-docs/pages/changelog.mdx @@ -12,10 +12,15 @@ import Head from 'next/head'; ### V1 +#### V1.1.1 - 2023-08-12 + +- Fixed editing cancel button not restoring original row data in modal editDisplayMode + #### V1.1.0 - 2023-08-12 -- Fixed editing cancel button not restoring original row data +- Fixed editing cancel button not restoring original row data in inline row editDisplayMode - Fixed Filter Range Slider initial range min and max sometimes not being set correctly after loading data +- Removed Edit Modal Title by default - Replaced `"Unsorted"` tooltip on header sort icon buttons with sort by next sort direction tooltip - Added ar translations that can be imported from `'material-react-table/locales/ar'` diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json index a5f4d8a42..257c690c2 100644 --- a/packages/mantine-react-table/package.json +++ b/packages/mantine-react-table/package.json @@ -1,5 +1,5 @@ { - "version": "1.1.0", + "version": "1.1.1", "license": "MIT", "name": "mantine-react-table", "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.", diff --git a/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.tsx b/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.tsx index f0341883a..f9b7ca865 100644 --- a/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.tsx +++ b/packages/mantine-react-table/src/buttons/MRT_EditActionButtons.tsx @@ -39,7 +39,7 @@ export const MRT_EditActionButtons = = {}>({ onEditingRowCancel?.({ row, table }); setEditingRow(null); } - row._valuesCache = row.original; + row._valuesCache = {} as any; //reset values cache }; const handleSubmitRow = () => { diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts index cef64cdc2..ebd879b60 100644 --- a/packages/mantine-react-table/src/column.utils.ts +++ b/packages/mantine-react-table/src/column.utils.ts @@ -436,9 +436,11 @@ export const createRow = = {}>( originalRow ?? Object.assign( {}, - ...getAllLeafColumnDefs(table.options.columns).map((col) => ({ - [getColumnId(col)]: '', - })), + ...getAllLeafColumnDefs(table.options.columns) + .filter((c) => c.columnDefType === 'data') + .map((col) => ({ + [getColumnId(col)]: '', + })), ), -1, 0, diff --git a/packages/mantine-react-table/src/hooks/useMRT_Effects.ts b/packages/mantine-react-table/src/hooks/useMRT_Effects.ts index fc7e1ecd1..41a50b45b 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_Effects.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_Effects.ts @@ -9,7 +9,14 @@ export const useMRT_Effects = = {}>( getState, options: { enablePagination, rowCount }, } = table; - const { globalFilter, isFullScreen, pagination, sorting } = getState(); + const { + globalFilter, + isFullScreen, + pagination, + sorting, + isLoading, + showSkeletons, + } = getState(); const isMounted = useRef(false); const initialBodyHeight = useRef(); @@ -41,7 +48,7 @@ export const useMRT_Effects = = {}>( //if page index is out of bounds, set it to the last page useEffect(() => { - if (!enablePagination) return; + if (!enablePagination || isLoading || showSkeletons) return; const { pageIndex, pageSize } = pagination; const totalRowCount = rowCount ?? table.getPrePaginationRowModel().rows.length; diff --git a/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx index 4f6906715..bb9753ba2 100644 --- a/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx +++ b/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx @@ -78,9 +78,9 @@ export const MRT_EditCellTextInput = = {}>({ //@ts-ignore row._valuesCache[column.id] = newValue; if (isCreating) { - setCreatingRow({ ...row }); + setCreatingRow(row); } else if (isEditing) { - setEditingRow({ ...row }); + setEditingRow(row); } }; diff --git a/packages/mantine-react-table/src/modals/MRT_EditRowModal.tsx b/packages/mantine-react-table/src/modals/MRT_EditRowModal.tsx index 866084a77..02dd834ea 100644 --- a/packages/mantine-react-table/src/modals/MRT_EditRowModal.tsx +++ b/packages/mantine-react-table/src/modals/MRT_EditRowModal.tsx @@ -50,21 +50,24 @@ export const MRT_EditRowModal = = {}>({ )); + const handleCancel = () => { + if (creatingRow) { + onCreatingRowCancel?.({ row, table }); + setCreatingRow(null); + } else { + onEditingRowCancel?.({ row, table }); + setEditingRow(null); + } + row._valuesCache = {} as any; //reset values cache + modalProps.onClose?.(); + }; + return ( { - if (creatingRow) { - onCreatingRowCancel?.({ row, table }); - setCreatingRow(null); - } else { - onEditingRowCancel?.({ row, table }); - setEditingRow(null); - } - }} opened={open} withCloseButton={false} {...modalProps} + onClose={handleCancel} key={row.id} > {((creatingRow &&