Skip to content

Commit

Permalink
Styling and custom component for DataGrid panels
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesricky
jamesricky committed Jan 3, 2025
1 parent 5ba64aa commit 376ff70
Show file tree
Hide file tree
Showing 6 changed files with 454 additions and 188 deletions.
112 changes: 58 additions & 54 deletions demo/admin/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ import {
import { css, Global } from "@emotion/react";
import { createApolloClient } from "@src/common/apollo/createApolloClient";
import { ConfigProvider, createConfig } from "@src/config";
import { theme } from "@src/theme";
import { getTheme } from "@src/theme";
import { HTML5toTouch } from "rdndmb-html5-to-touch";
import { DndProvider } from "react-dnd-multi-backend";
import { FormattedMessage, IntlProvider } from "react-intl";
import { FormattedMessage, IntlContext, IntlProvider } from "react-intl";
import { Route, Switch } from "react-router";

import { ContentScopeProvider } from "./common/ContentScopeProvider";
Expand Down Expand Up @@ -95,59 +95,63 @@ export function App() {
}}
>
<IntlProvider locale="en" messages={getMessages()}>
<LocaleProvider resolveLocaleForScope={(scope) => scope.domain}>
<MuiThemeProvider theme={theme}>
<DndProvider options={HTML5toTouch}>
<SnackbarProvider>
<CmsBlockContextProvider
damConfig={{
apiUrl: config.apiUrl,
apiClient,
maxFileSize: config.dam.uploadsMaxFileSize,
maxSrcResolution: config.imgproxy.maxSrcResolution,
allowedImageAspectRatios: config.dam.allowedImageAspectRatios,
}}
pageTreeCategories={pageTreeCategories}
pageTreeDocumentTypes={pageTreeDocumentTypes}
>
<ErrorDialogHandler />
<CurrentUserProvider>
<RouterBrowserRouter>
<GlobalStyle />
<ContentScopeProvider>
{({ match }) => (
<Switch>
<Route
path={`${match.path}/preview`}
render={(props) => (
<SitePreview
resolvePath={(path: string, scope) => {
return `/${scope.language}${path}`;
}}
{...props}
<IntlContext.Consumer>
{(intl) => (
<LocaleProvider resolveLocaleForScope={(scope) => scope.domain}>
<MuiThemeProvider theme={getTheme(intl)}>
<DndProvider options={HTML5toTouch}>
<SnackbarProvider>
<CmsBlockContextProvider
damConfig={{
apiUrl: config.apiUrl,
apiClient,
maxFileSize: config.dam.uploadsMaxFileSize,
maxSrcResolution: config.imgproxy.maxSrcResolution,
allowedImageAspectRatios: config.dam.allowedImageAspectRatios,
}}
pageTreeCategories={pageTreeCategories}
pageTreeDocumentTypes={pageTreeDocumentTypes}
>
<ErrorDialogHandler />
<CurrentUserProvider>
<RouterBrowserRouter>
<GlobalStyle />
<ContentScopeProvider>
{({ match }) => (
<Switch>
<Route
path={`${match.path}/preview`}
render={(props) => (
<SitePreview
resolvePath={(path: string, scope) => {
return `/${scope.language}${path}`;
}}
{...props}
/>
)}
/>
)}
/>
<Route
render={() => (
<MasterLayout
headerComponent={MasterHeader}
menuComponent={AppMasterMenu}
>
<MasterMenuRoutes menu={masterMenuData} />
</MasterLayout>
)}
/>
</Switch>
)}
</ContentScopeProvider>
</RouterBrowserRouter>
</CurrentUserProvider>
</CmsBlockContextProvider>
</SnackbarProvider>
</DndProvider>
</MuiThemeProvider>
</LocaleProvider>
<Route
render={() => (
<MasterLayout
headerComponent={MasterHeader}
menuComponent={AppMasterMenu}
>
<MasterMenuRoutes menu={masterMenuData} />
</MasterLayout>
)}
/>
</Switch>
)}
</ContentScopeProvider>
</RouterBrowserRouter>
</CurrentUserProvider>
</CmsBlockContextProvider>
</SnackbarProvider>
</DndProvider>
</MuiThemeProvider>
</LocaleProvider>
)}
</IntlContext.Consumer>
</IntlProvider>
</DependenciesConfigProvider>
</DamConfigProvider>
Expand Down
25 changes: 24 additions & 1 deletion demo/admin/src/theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,27 @@
import { DataGridPanel } from "@comet/admin";
import { createCometTheme } from "@comet/admin-theme";
import type {} from "@mui/lab/themeAugmentation";
import type {} from "@mui/x-data-grid/themeAugmentation";
import { IntlShape } from "react-intl";

export const theme = createCometTheme();
export const getTheme = (intl: IntlShape) =>
createCometTheme({
components: {
MuiDataGrid: {
defaultProps: {
localeText: {
// TODO: Move this into the theme by default - once `@comet/admin-theme` has been merged with `@comet/admin`
filterPanelColumns: intl.formatMessage({ id: "dataGrid.filterPanelColumns", defaultMessage: "Column" }),
columnsPanelTextFieldPlaceholder: intl.formatMessage({
id: "dataGrid.columnsPanelTextFieldPlaceholder",
defaultMessage: "Find column...",
}),
},
components: {
// TODO: Move this into the theme by default - once `@comet/admin-theme` has been merged with `@comet/admin`
Panel: DataGridPanel,
},
},
},
},
});
Loading

0 comments on commit 376ff70

Please sign in to comment.