|
1 | 1 | "use client"; |
2 | 2 |
|
3 | 3 | import { computed } from "mobx"; |
| 4 | +import { TranslationModel } from "mobx-i18n"; |
4 | 5 | import { observer } from "mobx-react"; |
5 | 6 | import { GitRepository } from "mobx-github"; |
6 | 7 |
|
7 | 8 | import { BadgeBar } from "../badge-bar/badge-bar"; |
8 | | -import { i18n, repositoryStore } from "@/models/example"; |
| 9 | +import { repositoryStore } from "@/models/example"; |
9 | 10 | import { Column, RestTable } from "./rest-table"; |
10 | 11 |
|
| 12 | +const tableI18n = new TranslationModel({ |
| 13 | + en_US: { |
| 14 | + load_more: "Load more", |
| 15 | + no_more: "No more", |
| 16 | + submit: "Submit", |
| 17 | + cancel: "Cancel", |
| 18 | + create: "Create", |
| 19 | + view: "View", |
| 20 | + edit: "Edit", |
| 21 | + delete: "Delete", |
| 22 | + total_x_rows: "Total {{totalCount}} rows", |
| 23 | + sure_to_delete_x: "Are you sure to delete {{keys}}?", |
| 24 | + }, |
| 25 | +}); |
| 26 | + |
11 | 27 | export const RestTableExample = observer(() => { |
12 | 28 | const columns = computed<Column<GitRepository>[]>(() => [ |
13 | 29 | { |
@@ -64,20 +80,7 @@ export const RestTableExample = observer(() => { |
64 | 80 | deletable |
65 | 81 | columns={columns} |
66 | 82 | store={repositoryStore} |
67 | | - translator={{ |
68 | | - ...i18n, |
69 | | - t: (key: string, data?: Record<string, any>) => { |
70 | | - const translations: Record<string, string> = { |
71 | | - create: "Create", |
72 | | - view: "View", |
73 | | - edit: "Edit", |
74 | | - delete: "Delete", |
75 | | - total_x_rows: `Total ${data?.totalCount || 0} rows`, |
76 | | - sure_to_delete_x: `Are you sure to delete ${data?.keys || ""}?`, |
77 | | - }; |
78 | | - return translations[key] || key; |
79 | | - }, |
80 | | - }} |
| 83 | + translator={tableI18n} |
81 | 84 | onCheck={(keys) => console.log("Checked keys:", keys)} |
82 | 85 | /> |
83 | 86 | </div> |
|
0 commit comments