react-admin-base-bootstrap 0.7.2 → 0.7.5

package/lib/esm/Components/BootstrapDataTable.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { DataContextProvider, useAuth, useDataTable } from 'react-admin-base';
+import { DataContextProvider, RefreshScope, useAuth, useDataTable } from 'react-admin-base';
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from 'react-router-dom';
 import { Alert, Button, Card, CardFooter, CardHeader, Col, Input, Row, Table } from 'reactstrap';
@@ -80,7 +80,7 @@ export function Column(props) {
 export default function BootstrapTable({ url, bordered, noStrip, defaultParams, add, children, innerRef, body }) {
     var state = useState(Object.assign({ sort: 'id' }, defaultParams));
     const [params, setParams] = state;
-    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage] = useDataTable(url, params, body);
+    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage, update] = useDataTable(url, params, body);
     const intl = useIntl();
     const [api] = useAuth();
     var ref = useRef(defaultParams);
@@ -111,31 +111,32 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
     return React.createElement(Card, null,
         React.createElement(DataTableContext.Provider, { value: state },
             React.createElement(DataContextProvider, { value: fetchData },
-                React.createElement(CardHeader, null,
-                    React.createElement(Row, null,
-                        add && React.createElement(Col, { xs: "12", md: "2" },
-                            React.createElement(Link, { to: add, className: "btn btn-primary font-xl d-block" },
-                                React.createElement("i", { className: "fa fa-plus" }))),
-                        React.createElement(Col, { md: "2" },
-                            React.createElement(Input, { type: "select", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
-                                React.createElement("option", { value: "1" }, "1"),
-                                React.createElement("option", { value: "20" }, "20"),
-                                React.createElement("option", { value: "50" }, "50"),
-                                React.createElement("option", { value: "100" }, "100"),
-                                React.createElement("option", { value: "150" }, "150"),
-                                React.createElement("option", { value: "200" }, "200"),
-                                React.createElement("option", { value: "-1" }, intl.formatMessage({ id: "ALL" })))),
-                        children[2],
-                        React.createElement(Col, { md: "3", className: "ms-auto" },
-                            React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
-                data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
-                    React.createElement("i", { className: "fas fa-spinner fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
-                    React.createElement("i", { className: "far fa-times-circle" }),
-                    " ",
-                    React.createElement(FormattedMessage, { id: "NO_DATA_IS_AVAILABLE" })) : React.createElement(Table, { hover: true, bordered: bordered, striped: !noStrip, responsive: true, size: "md", className: "mb-0 dataTable" },
-                    children[0],
-                    React.createElement("tbody", null, data && data.map(children[1].props.children))),
-                lastPage > 1 && React.createElement(CardFooter, null,
-                    React.createElement("nav", null,
-                        React.createElement(BootstrapPagination, { currentPage: page, pageCount: lastPage, onPageChange: index => setPage(index) }))))));
+                React.createElement(RefreshScope, { update: update },
+                    React.createElement(CardHeader, null,
+                        React.createElement(Row, null,
+                            add && React.createElement(Col, { xs: "12", md: "2" },
+                                React.createElement(Link, { to: add, className: "btn btn-primary font-xl d-block" },
+                                    React.createElement("i", { className: "fa fa-plus" }))),
+                            React.createElement(Col, { md: "2" },
+                                React.createElement(Input, { type: "select", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
+                                    React.createElement("option", { value: "1" }, "1"),
+                                    React.createElement("option", { value: "20" }, "20"),
+                                    React.createElement("option", { value: "50" }, "50"),
+                                    React.createElement("option", { value: "100" }, "100"),
+                                    React.createElement("option", { value: "150" }, "150"),
+                                    React.createElement("option", { value: "200" }, "200"),
+                                    React.createElement("option", { value: "-1" }, intl.formatMessage({ id: "ALL" })))),
+                            children[2],
+                            React.createElement(Col, { md: "3", className: "ms-auto" },
+                                React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
+                    data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
+                        React.createElement("i", { className: "fas fa-spinner fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
+                        React.createElement("i", { className: "far fa-times-circle" }),
+                        " ",
+                        React.createElement(FormattedMessage, { id: "NO_DATA_IS_AVAILABLE" })) : React.createElement(Table, { hover: true, bordered: bordered, striped: !noStrip, responsive: true, size: "md", className: "mb-0 dataTable" },
+                        children[0],
+                        React.createElement("tbody", null, data && data.map(children[1].props.children))),
+                    lastPage > 1 && React.createElement(CardFooter, null,
+                        React.createElement("nav", null,
+                            React.createElement(BootstrapPagination, { currentPage: page, pageCount: lastPage, onPageChange: index => setPage(index) })))))));
 }

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

@@ -1,7 +1,8 @@
-export default function ExcelExportButton({ name, header, params, map, extra }: {
+export default function ExcelExportButton({ name, header, params, size, map, extra }: {
     name: any;
     header: any;
     params: any;
+    size: any;
     map: any;
     extra: any;
 }): JSX.Element;

package/lib/esm/Components/ExcelExportButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useExporter } from 'react-admin-base';
 import { Button, Col } from "reactstrap";
-export default function ExcelExportButton({ name, header, params, map, extra }) {
+export default function ExcelExportButton({ name, header, params, size, map, extra }) {
     const [handleExport, loading] = useExporter(header, params, map, extra);
     return React.createElement(Col, null,
-        React.createElement(Button, { className: "w-100 d-block", type: "button", size: "lg", color: "success", outline: true, disabled: !!loading, onClick: () => handleExport(name) }, loading ? React.createElement("i", { className: "fas fa-spin fa-spinner" }) : React.createElement("i", { className: "fas fa-file-excel" })));
+        React.createElement(Button, { className: "w-100 d-block", type: "button", size: size, color: "success", outline: true, disabled: !!loading, onClick: () => handleExport(name) }, loading ? React.createElement("i", { className: "fas fa-spin fa-spinner" }) : React.createElement("i", { className: "fas fa-file-excel" })));
 }

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.2",
+  "version": "0.7.5",
   "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.2",
     "react-responsive": "^8.2.0",
     "react-select": "^5.2.2",
     "reactstrap": "^9.0.1",

package/src/Components/BootstrapDataTable.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { DataContextProvider, useAuth, useDataTable } from 'react-admin-base';
+import { DataContextProvider, RefreshScope, useAuth, useDataTable } from 'react-admin-base';
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from 'react-router-dom';
 import { Alert, Button, Card, CardFooter, CardHeader, Col, Input, Row, Table } from 'reactstrap';
@@ -77,7 +77,7 @@ export function Column(props) {
 export default function BootstrapTable({url, bordered, noStrip, defaultParams, add, children, innerRef, body}: any) {
     var state = useState({sort: 'id', ...defaultParams});
     const [params, setParams] = state;
-    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage] = useDataTable(url, params, body);
+    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage, update] = useDataTable(url, params, body);
     const intl = useIntl();
     const [ api ] = useAuth();
 
@@ -98,7 +98,7 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
             };
         }
     }, [setParams, innerRef]);
-
+    
     const fetchData = useCallback(async function(extraParams) {
         if (body) {
             const data = await api.tokenized.post(url, body, { params: { ...params,  ...(extraParams || {}) } });
@@ -112,47 +112,49 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
     return <Card>
         <DataTableContext.Provider value={state}>
             <DataContextProvider value={fetchData}>
-                <CardHeader>
-                    <Row>
-                        {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl d-block"><i className="fa fa-plus"/></Link></Col>}
-                        <Col md="2">
-                            <Input type="select" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
-                                <option value="1">1</option>
-                                <option value="20">20</option>
-                                <option value="50">50</option>
-                                <option value="100">100</option>
-                                <option value="150">150</option>
-                                <option value="200">200</option>
-                                <option value="-1">{intl.formatMessage({id: "ALL"})}</option>
-                            </Input>
-                        </Col>
-                        {children[2]}
-                        <Col md="3" className="ms-auto">
-                            <Input
-                                placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
-                                value={params.query || ''}
-                                onChange={e => setParams({...params, query: e.currentTarget.value})}
+                <RefreshScope update={update}>
+                    <CardHeader>
+                        <Row>
+                            {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl d-block"><i className="fa fa-plus"/></Link></Col>}
+                            <Col md="2">
+                                <Input type="select" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
+                                    <option value="1">1</option>
+                                    <option value="20">20</option>
+                                    <option value="50">50</option>
+                                    <option value="100">100</option>
+                                    <option value="150">150</option>
+                                    <option value="200">200</option>
+                                    <option value="-1">{intl.formatMessage({id: "ALL"})}</option>
+                                </Input>
+                            </Col>
+                            {children[2]}
+                            <Col md="3" className="ms-auto">
+                                <Input
+                                    placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
+                                    value={params.query || ''}
+                                    onChange={e => setParams({...params, query: e.currentTarget.value})}
+                                />
+                            </Col>
+                        </Row>
+                    </CardHeader>
+                        {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
+                            <i className="far fa-times-circle"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
+                        </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
+                            {children[0]}
+                            <tbody>
+                            {data && data.map(children[1].props.children)}
+                            </tbody>
+                        </Table>}
+                    { lastPage > 1 && <CardFooter>
+                        <nav>
+                            <BootstrapPagination
+                                currentPage={page}
+                                pageCount={lastPage}
+                                onPageChange={index => setPage(index)}
                             />
-                        </Col>
-                    </Row>
-                </CardHeader>
-                    {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
-                        <i className="far fa-times-circle"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
-                    </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
-                        {children[0]}
-                        <tbody>
-                        {data && data.map(children[1].props.children)}
-                        </tbody>
-                    </Table>}
-                { lastPage > 1 && <CardFooter>
-                    <nav>
-                        <BootstrapPagination
-                            currentPage={page}
-                            pageCount={lastPage}
-                            onPageChange={index => setPage(index)}
-                        />
-                    </nav>
-                </CardFooter> }
+                        </nav>
+                    </CardFooter> }
+                </RefreshScope>
             </DataContextProvider>
         </DataTableContext.Provider>
     </Card>;

package/src/Components/ExcelExportButton.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import {useExporter} from 'react-admin-base';
 import {Button, Col} from "reactstrap";
 
-export default function ExcelExportButton({name, header, params, map, extra}) {
+export default function ExcelExportButton({name, header, params, size, map, extra}) {
     const [ handleExport, loading ] = useExporter(header, params, map, extra);
 
-    return <Col><Button className="w-100 d-block" type="button" size="lg" color="success" outline disabled={!!loading} onClick={() => handleExport(name)}>
+    return <Col><Button className="w-100 d-block" type="button" size={size} color="success" outline disabled={!!loading} onClick={() => handleExport(name)}>
         {loading ? <i className="fas fa-spin fa-spinner"/> : <i className="fas fa-file-excel"/>}
     </Button></Col>
 }

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;