react-admin-base-bootstrap 0.7.3 → 0.7.4

package/lib/esm/Components/LanguageProvider.d.ts

@@ -1,7 +1,8 @@
 export declare function useLanguage(): any;
-export default function LanguageProvider({ defaultLanguage, languages, children }: {
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }: {
     defaultLanguage: any;
     languages: any;
+    loader: any;
     children: any;
-}): JSX.Element;
-export declare function LanguageSwitcher(): JSX.Element;
+}): JSX.Element | null;
+export declare function LanguageSwitcher(): JSX.Element | null;

package/lib/esm/Components/LanguageProvider.js

@@ -1,5 +1,5 @@
-import React, { useContext, useReducer, useMemo, useState } from 'react';
-import { useApp } from 'react-admin-base';
+import React, { useContext, useMemo, useState } from 'react';
+import { useApp, useLocalStorage } from 'react-admin-base';
 import { IntlProvider } from 'react-intl';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import enMessages from '../i18n/en.json';
@@ -14,29 +14,32 @@ const LanguageContext = React.createContext(null);
 export function useLanguage() {
     return useContext(LanguageContext);
 }
-export default function LanguageProvider({ defaultLanguage, languages, children }) {
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }) {
     const app = useApp();
-    const preferredLanguage = (navigator.languages && navigator.languages[0]) ||
-        navigator.language;
-    const [lang, setLang] = useReducer((oldValue, newValue) => {
-        localStorage.setItem(app.id + "_" + 'language', newValue);
-        return newValue;
-    }, localStorage.getItem(app.id + "_" + 'language') || null);
+    const preferredLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
+    const [lang, setLang] = useLocalStorage(app.id + "_language");
     const activeLanguageKey = (!!lang && languages[lang] && lang) || (languages[preferredLanguage] && preferredLanguage) || (languages[defaultLanguage] && defaultLanguage);
     const activeLanguage = languages[activeLanguageKey];
-    const messages = useMemo(() => (Object.assign(Object.assign({}, (_languages[activeLanguageKey] || _languages.en)), activeLanguage.messages)), [activeLanguage]);
     const value = useMemo(() => [activeLanguage, languages, setLang], [activeLanguage, languages, setLang]);
+    const originalMessages = (loader && loader(activeLanguage)) || activeLanguage.messages;
+    const messages = useMemo(() => originalMessages && (Object.assign(Object.assign({}, (_languages[activeLanguageKey] || _languages.en)), originalMessages)), [originalMessages, activeLanguage]);
+    if (!messages)
+        return null;
     return React.createElement(IntlProvider, { locale: activeLanguageKey, messages: messages },
         React.createElement(LanguageContext.Provider, { value: value }, children));
 }
 export function LanguageSwitcher() {
     const [show, setShow] = useState(false);
     const [activeLang, languages, setLanguage] = useLanguage();
+    if (Object.keys(languages).length <= 1)
+        return null;
     return React.createElement(Dropdown, { isOpen: show, toggle: () => setShow(!show) },
-        React.createElement(DropdownToggle, { className: "nav-flag dropdown-toggle show", nav: true, caret: true },
-            React.createElement("img", { width: "20", src: activeLang.icon, alt: activeLang.name })),
-        React.createElement(DropdownMenu, { end: true }, Object.entries(languages).map(([key, value]) => React.createElement(DropdownItem, { key: key, active: activeLang === value, onClick: () => setLanguage(key) },
-            React.createElement("img", { width: "20", src: value.icon, alt: value.name }),
+        React.createElement(DropdownToggle, { className: "nav-flag", nav: true, caret: true },
+            activeLang.icon && React.createElement("img", { width: "20", className: "me-1", src: activeLang.icon, alt: activeLang.name }),
+            " ",
+            activeLang.name),
+        React.createElement(DropdownMenu, null, Object.entries(languages).map(([key, value]) => React.createElement(DropdownItem, { key: key, active: activeLang === value, onClick: () => setLanguage(key) },
+            value.icon && React.createElement("img", { width: "20", className: "me-1", src: value.icon, alt: value.name }),
             " ",
             React.createElement("span", { className: "align-middle" }, value.name)))));
 }

package/lib/esm/Components/ThemeProvider.js

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useEffect, useMemo, useReducer } from "react";
-import { useApp } from "react-admin-base";
+import React, { createContext, useContext, useEffect, useMemo } from "react";
+import { useLocalStorage } from "react-admin-base";
 const ThemeContext = createContext(null);
 const AllThemesContext = createContext(null);
 export function useTheme() {
@@ -8,15 +8,6 @@ export function useTheme() {
 export function useAllThemes() {
     return useContext(AllThemesContext);
 }
-function useLocalStorage(key) {
-    const app = useApp();
-    const _key = app.id + '_' + key;
-    const previousValue = useMemo(() => localStorage.getItem(_key), [_key]);
-    return useReducer((_, newValue) => {
-        localStorage.setItem(_key, newValue);
-        return newValue;
-    }, previousValue);
-}
 export default function ThemeProvider({ themes, defaultTheme, children }) {
     const state = useLocalStorage('theme');
     const [theme, setTheme] = state;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -37,7 +37,7 @@
     "modal-cropper": "^1.2.3",
     "nprogress": "^0.2.0",
     "prettysize": "^2.0.0",
-    "react-admin-base": "^0.7.0",
+    "react-admin-base": "^0.7.1",
     "react-responsive": "^8.2.0",
     "react-select": "^5.2.2",
     "reactstrap": "^9.0.1",

package/src/Components/LanguageProvider.tsx

@@ -1,6 +1,6 @@
 
-import React, { useContext, useReducer, useMemo, useState } from 'react';
-import { useApp } from 'react-admin-base';
+import React, { useContext, useMemo, useState } from 'react';
+import { useApp, useLocalStorage } from 'react-admin-base';
 import { IntlProvider } from 'react-intl';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
@@ -20,23 +20,24 @@ export function useLanguage() {
   return useContext(LanguageContext);
 }
 
-export default function LanguageProvider({ defaultLanguage, languages, children }) {
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }) {
   const app = useApp();
+  
+  const preferredLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
 
-  const preferredLanguage = (navigator.languages && navigator.languages[0]) ||
-    navigator.language;
-
-  const [ lang, setLang ] = useReducer((oldValue, newValue) => {
-    localStorage.setItem(app.id + "_" + 'language', newValue);
-    return newValue;
-  }, localStorage.getItem(app.id + "_" + 'language') || null);
+  const [ lang, setLang ] = useLocalStorage(app.id + "_language");
 
   const activeLanguageKey = (!!lang && languages[lang] && lang) || (languages[preferredLanguage] && preferredLanguage) || (languages[defaultLanguage] && defaultLanguage);
   const activeLanguage = languages[activeLanguageKey];
-
-  const messages = useMemo(() => ({ ...(_languages[activeLanguageKey] || _languages.en), ...activeLanguage.messages }), [activeLanguage])
   const value = useMemo(() => [ activeLanguage, languages, setLang], [ activeLanguage, languages, setLang]);
 
+  const originalMessages = (loader && loader(activeLanguage)) || activeLanguage.messages;
+
+  const messages = useMemo(() => originalMessages && ({ ...(_languages[activeLanguageKey] || _languages.en), ...originalMessages }), [originalMessages, activeLanguage]);
+
+  if (!messages)
+    return null;
+
   return <IntlProvider locale={activeLanguageKey} messages={messages}>
     <LanguageContext.Provider value={value}>
       { children }
@@ -47,14 +48,17 @@ export default function LanguageProvider({ defaultLanguage, languages, children
 export function LanguageSwitcher() {
   const [show, setShow] = useState(false);
   const [ activeLang, languages, setLanguage ] = useLanguage();
+  
+  if (Object.keys(languages).length <= 1)
+    return null;
 
   return <Dropdown isOpen={show} toggle={() => setShow(!show)}>
-      <DropdownToggle className="nav-flag dropdown-toggle show" nav caret>
-          <img width="20" src={ activeLang.icon } alt={activeLang.name} />
+      <DropdownToggle className="nav-flag" nav caret>
+          { activeLang.icon && <img width="20" className="me-1" src={ activeLang.icon } alt={activeLang.name} /> } {activeLang.name}
       </DropdownToggle>
-      <DropdownMenu end>
+      <DropdownMenu>
           { Object.entries(languages).map(([key, value] : any) => <DropdownItem key={key} active={activeLang === value} onClick={() => setLanguage(key)}>
-              <img width="20" src={value.icon} alt={value.name} /> <span className="align-middle">{ value.name }</span>
+              {value.icon && <img width="20" className="me-1" src={value.icon} alt={value.name} /> } <span className="align-middle">{ value.name }</span>
           </DropdownItem>) }
       </DropdownMenu>
   </Dropdown>;

package/src/Components/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, Dispatch, useContext, useEffect, useMemo, useReducer, useRef } from "react";
-import { useApp } from "react-admin-base";
+import { useApp, useLocalStorage } from "react-admin-base";
 
 const ThemeContext = createContext(null as any);
 const AllThemesContext = createContext(null as any);
@@ -12,19 +12,6 @@ export function useAllThemes() {
 	return useContext(AllThemesContext);	
 }
 
-function useLocalStorage(key: string) : [string, Dispatch<string>] {
-	const app = useApp();
-	
-	const _key = app.id + '_' + key;
-	
-	const previousValue = useMemo(() => localStorage.getItem(_key), [_key]);
-	
-	return useReducer((_: string, newValue) => {
-		localStorage.setItem(_key, newValue);
-		return newValue;
-	}, previousValue);
-}
-
 export default function ThemeProvider({ themes, defaultTheme, children }) {
 	const state = useLocalStorage('theme');
 	const [ theme, setTheme ] = state;