Skip to content

Commit 0e0a98a

Browse files
glebtvglebtv
committed
feat: bump mantine to 7.3.0, fix mobile sider collapse, fix examples/import-export-mantine
1 parent 001845f commit 0e0a98a

File tree

11 files changed

+98
-11816
lines changed

11 files changed

+98
-11816
lines changed

‎examples/base-mantine/src/components/table/columnFilter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const ColumnFilter: React.FC<ColumnButtonProps> = ({ column }) => {
7575
{!!state && (
7676
<Stack p="xs" spacing="xs">
7777
{renderFilterElement()}
78-
<Group position="right" spacing={6} noWrap>
78+
<Group position="right" spacing={6} wrap="nowrap">
7979
<ActionIcon
8080
size="md"
8181
color="gray"

‎examples/base-mantine/src/pages/posts/list.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const PostList: React.FC = () => {
9393
enableSorting: false,
9494
cell: function render({ getValue }) {
9595
return (
96-
<Group spacing="xs" noWrap>
96+
<Group spacing="xs" wrap="nowrap">
9797
<ShowButton
9898
hideText
9999
recordItemId={getValue() as number}
@@ -156,7 +156,7 @@ export const PostList: React.FC = () => {
156156
return (
157157
<th key={header.id}>
158158
{!header.isPlaceholder && (
159-
<Group spacing="xs" noWrap>
159+
<Group spacing="xs" wrap="nowrap">
160160
<Box>
161161
{flexRender(
162162
header.column
@@ -165,7 +165,7 @@ export const PostList: React.FC = () => {
165165
header.getContext(),
166166
)}
167167
</Box>
168-
<Group spacing="xs" noWrap>
168+
<Group spacing="xs" wrap="nowrap">
169169
<ColumnSorter
170170
column={
171171
header.column

‎examples/import-export-mantine/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
},
1111
"dependencies": {
1212
"@emotion/react": "^11.8.2",
13-
"@mantine/core": "^5.10.4",
14-
"@mantine/form": "^5.10.4",
15-
"@mantine/hooks": "^5.10.4",
16-
"@mantine/notifications": "^5.10.4",
13+
"@mantine/core": "^7.5.1",
14+
"@mantine/hooks": "^7.5.1",
15+
"@mantine/form": "^7.5.1",
16+
"@mantine/notifications": "^7.5.1",
1717
"@refinedev/cli": "^2.16.24",
1818
"@refinedev/core": "^4.47.1",
1919
"@refinedev/mantine": "^2.29.4",

‎examples/import-export-mantine/src/App.tsx

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1+
import '@mantine/core/styles.css';
2+
import '@mantine/notifications/styles.css';
3+
14
import { GitHubBanner, Refine } from "@refinedev/core";
25
import {
36
ThemedLayoutV2,
47
ErrorComponent,
58
useNotificationProvider,
69
RefineThemes,
710
} from "@refinedev/mantine";
8-
import { NotificationsProvider } from "@mantine/notifications";
9-
import { MantineProvider, Global } from "@mantine/core";
11+
import { Notifications } from "@mantine/notifications";
12+
import { MantineProvider } from "@mantine/core";
1013
import dataProvider from "@refinedev/simple-rest";
1114
import routerProvider, {
1215
NavigateToResource,
@@ -23,50 +26,46 @@ const App: React.FC = () => {
2326
<GitHubBanner />
2427
<MantineProvider
2528
theme={RefineThemes.Blue}
26-
withNormalizeCSS
27-
withGlobalStyles
2829
>
29-
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
30-
<NotificationsProvider position="top-right">
31-
<Refine
32-
dataProvider={dataProvider(
33-
"https://api.fake-rest.refine.dev",
34-
)}
35-
routerProvider={routerProvider}
36-
notificationProvider={useNotificationProvider}
37-
resources={[
38-
{
39-
name: "posts",
40-
list: "/posts",
41-
},
42-
]}
43-
options={{
44-
syncWithLocation: true,
45-
warnWhenUnsavedChanges: true,
46-
}}
47-
>
48-
<Routes>
30+
<Refine
31+
dataProvider={dataProvider(
32+
"https://api.fake-rest.refine.dev",
33+
)}
34+
routerProvider={routerProvider}
35+
notificationProvider={useNotificationProvider}
36+
resources={[
37+
{
38+
name: "posts",
39+
list: "/posts",
40+
},
41+
]}
42+
options={{
43+
syncWithLocation: true,
44+
warnWhenUnsavedChanges: true,
45+
}}
46+
>
47+
<Routes>
48+
<Route
49+
element={
50+
<ThemedLayoutV2>
51+
<Outlet />
52+
</ThemedLayoutV2>
53+
}
54+
>
4955
<Route
56+
index
5057
element={
51-
<ThemedLayoutV2>
52-
<Outlet />
53-
</ThemedLayoutV2>
58+
<NavigateToResource resource="posts" />
5459
}
55-
>
56-
<Route
57-
index
58-
element={
59-
<NavigateToResource resource="posts" />
60-
}
61-
/>
62-
<Route path="/posts" element={<PostList />} />
63-
<Route path="*" element={<ErrorComponent />} />
64-
</Route>
65-
</Routes>
66-
<UnsavedChangesNotifier />
67-
<DocumentTitleHandler />
68-
</Refine>
69-
</NotificationsProvider>
60+
/>
61+
<Route path="/posts" element={<PostList />} />
62+
<Route path="*" element={<ErrorComponent />} />
63+
</Route>
64+
</Routes>
65+
<Notifications />
66+
<UnsavedChangesNotifier />
67+
<DocumentTitleHandler />
68+
</Refine>
7069
</MantineProvider>
7170
</BrowserRouter>
7271
);

‎examples/import-export-mantine/src/components/table/columnFilter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const ColumnFilter: React.FC<ColumnButtonProps> = ({ column }) => {
7575
{!!state && (
7676
<Stack p="xs" spacing="xs">
7777
{renderFilterElement()}
78-
<Group position="right" spacing={6} noWrap>
78+
<Group justify="right" gap={6} wrap="nowrap">
7979
<ActionIcon
8080
size="md"
8181
color="gray"

‎examples/import-export-mantine/src/pages/posts/list.tsx

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export const PostList: React.FC = () => {
9999
enableSorting: false,
100100
cell: function render({ getValue }) {
101101
return (
102-
<Group spacing="xs" noWrap>
102+
<Group gap="xs" wrap="nowrap">
103103
<DeleteButton
104104
hideText
105105
recordItemId={getValue() as number}
@@ -183,14 +183,14 @@ export const PostList: React.FC = () => {
183183
}
184184
>
185185
<Table highlightOnHover>
186-
<thead>
186+
<Table.Thead>
187187
{getHeaderGroups().map((headerGroup) => (
188-
<tr key={headerGroup.id}>
188+
<Table.Tr key={headerGroup.id}>
189189
{headerGroup.headers.map((header) => {
190190
return (
191-
<th key={header.id}>
191+
<Table.Th key={header.id}>
192192
{!header.isPlaceholder && (
193-
<Group spacing="xs" noWrap>
193+
<Group gap="xs" wrap="nowrap">
194194
<Box>
195195
{flexRender(
196196
header.column
@@ -199,7 +199,7 @@ export const PostList: React.FC = () => {
199199
header.getContext(),
200200
)}
201201
</Box>
202-
<Group spacing="xs" noWrap>
202+
<Group gap="xs" wrap="nowrap">
203203
<ColumnSorter
204204
column={
205205
header.column
@@ -213,16 +213,16 @@ export const PostList: React.FC = () => {
213213
</Group>
214214
</Group>
215215
)}
216-
</th>
216+
</Table.Th>
217217
);
218218
})}
219-
</tr>
219+
</Table.Tr>
220220
))}
221-
</thead>
222-
<tbody>
221+
</Table.Thead>
222+
<Table.Tbody>
223223
{getRowModel().rows.map((row) => {
224224
return (
225-
<tr key={row.id}>
225+
<Table.Tr key={row.id}>
226226
{row.getVisibleCells().map((cell) => {
227227
return (
228228
<td key={cell.id}>
@@ -233,18 +233,19 @@ export const PostList: React.FC = () => {
233233
</td>
234234
);
235235
})}
236-
</tr>
236+
</Table.Tr>
237237
);
238238
})}
239-
</tbody>
239+
</Table.Tbody>
240240
</Table>
241-
<br />
241+
242+
<Group mt="md" justify="right">
242243
<Pagination
243-
position="right"
244244
total={pageCount}
245-
page={current}
245+
value={current}
246246
onChange={setCurrent}
247247
/>
248+
</Group>
248249
</List>
249250
</ScrollArea>
250251
);

0 commit comments

Comments
 (0)