@applica-software-guru/react-admin 1.3.169 → 1.3.172

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.jsx"],"names":[],"mappings":"AAcA;;;4CAgEC;;;;;;;sBArEqB,aAAa;sBACb,aAAa;sBAJb,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.jsx"],"names":[],"mappings":"AAcA;;;4CAiEC;;;;;;;sBAtEqB,aAAa;sBACb,aAAa;sBAJb,YAAY"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.169",
+  "version": "1.3.172",
   "private": false,
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "./style.css": "./dist/style.css"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.1.4",
+    "@ant-design/icons": "^5.3.1",
     "@emotion/react": "^11.4",
     "@emotion/styled": "^11.3.0",
     "@mui/base": "5.0.0-beta.19",

package/src/ApplicaAdmin.tsx

@@ -140,6 +140,10 @@ export type ApplicaAdminProps = AdminProps & {
    * This image must be a component with absolute positioning.
    */
   background?: React.ReactNode;
+  /**
+   * Indicates whether the theme toggler should be displayed.
+   */
+  enableThemeToggler: boolean;
 };
 
 /**
@@ -172,6 +176,7 @@ const ApplicaAdmin = ({
   enablePasswordRecover,
   queryClient,
   background,
+  enableThemeToggler,
   ...props
 }: ApplicaAdminProps) => {
   useErrorEventCatcher({
@@ -222,6 +227,7 @@ const ApplicaAdmin = ({
           {...props}
           name={name}
           copy={copy}
+          enableThemeToggler={enableThemeToggler}
           version={version}
           logoMain={_logoMain}
           logoIcon={_logoIcon}
@@ -284,7 +290,8 @@ ApplicaAdmin.defaultProps = {
   enableRegistration: false,
   enableForgotPassword: false,
   loginPage: <LoginPage version="0.0.0" name="Applica" redirectTo="/" />,
-  queryClient: defaultQueryClient
+  queryClient: defaultQueryClient,
+  enableThemeToggler: false
 };
 
 ApplicaAdmin.propTypes = {
@@ -304,7 +311,8 @@ ApplicaAdmin.propTypes = {
   enableNotification: PropTypes.bool,
   enableRegistration: PropTypes.bool,
   enableForgotPassword: PropTypes.bool,
-  queryClient: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  queryClient: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  enableThemeToggler: PropTypes.bool
 };
 
 export default ApplicaAdmin;

package/src/components/Layout/Layout.tsx

@@ -10,22 +10,25 @@ import { Navigation } from './Navigation';
 import { Outlet } from 'react-router-dom';
 import { useBreadcrumbs } from '../../hooks';
 import { withLayoutProvider } from './Provider';
+import { ThemeToggler } from './ThemeToggler';
 
 type ILayoutProps = React.PropsWithChildren<{
   name: string;
   version: string;
   copy?: string;
   error?: React.ComponentType<ErrorProps>;
+  enableThemeToggler: boolean;
 }>;
 
 const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
-  const { name, version } = props,
+  const { name, version, enableThemeToggler } = props,
     { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
 
   return (
     <LayoutWrapper>
       <Header>
         <HeaderSpacer />
+        {enableThemeToggler && <ThemeToggler />}
         <LoadingIndicator />
         <HeaderNotification />
         <ResponsiveSection>

package/src/components/Layout/ThemeToggler.tsx

@@ -0,0 +1,20 @@
+import { SunOutlined, MoonOutlined } from '@ant-design/icons';
+import { useThemeConfig } from '../../hooks';
+import { HeaderToggleButton } from './Header';
+
+const ThemeToggler = () => {
+  const { mode, setMode } = useThemeConfig();
+
+  return (
+    <HeaderToggleButton
+      value="theme-mode"
+      aria-label="toggle mode"
+      onChange={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      selected={false}
+    >
+      {mode === 'dark' ? <SunOutlined /> : <MoonOutlined />}
+    </HeaderToggleButton>
+  );
+};
+
+export { ThemeToggler };

package/src/components/Layout/index.ts

@@ -8,4 +8,5 @@ export * from './Navigation';
 export * from './NavMenu';
 export * from './Provider';
 export * from './Wrapper';
-export * from './Error'
+export * from './Error';
+export * from './ThemeToggler';

package/src/themes/index.jsx

@@ -13,7 +13,8 @@ import { useMemo } from 'react';
 import { useThemeConfig } from '../hooks';
 
 const ThemeCustomization = ({ themeOverrides, children }) => {
-  const { themeDirection, mode, presetColor, fontFamily } = useThemeConfig();
+  const _themeConfig = useThemeConfig(1);
+  const { themeDirection, mode, presetColor, fontFamily } = _themeConfig;
 
   const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);