react-admin-base-bootstrap 0.5.4 → 0.7.0

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useDataTableContext(): any;
 export declare function Actions({ edit, del, rowSpan, children }: {
     edit: any;

package/lib/esm/Components/BootstrapDataTable.js

@@ -114,10 +114,10 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
                 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 btn-lg d-block" },
+                            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", bsSize: "lg", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
+                            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"),
@@ -127,10 +127,10 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
                                 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 || '', bsSize: "lg", onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
+                            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-lg fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
-                    React.createElement("i", { className: "far fa-times-circle fa-lg" }),
+                    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],

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type BootstrapPaginationProps = {
     className?: string;
     currentPage: number;

package/lib/esm/Components/BootstrapPagination.js

@@ -6,8 +6,8 @@ export default function BootstrapPagination({ className, currentPage, pageCount,
         return null;
     return React.createElement(Pagination, { listClassName: "mb-0", className: className },
         React.createElement(PaginatorCore, { activePage: currentPage, pageCount: pageCount, showPages: 15, prevPage: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index) },
-                React.createElement(PaginationLink, { previous: true, tag: "button" }, "\u00AB")), page: index => React.createElement(PaginationItem, { key: index, active: currentPage === index },
-                React.createElement(PaginationLink, { tag: "button", onClick: () => onPageChange(index) }, index)), nextPage: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index) },
-                React.createElement(PaginationLink, { next: true, tag: "button" }, "\u00BB")), dots: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index), active: currentPage === index },
-                React.createElement(PaginationLink, { tag: "button" }, index)) }));
+                React.createElement(PaginationLink, { previous: true, tag: "button", type: "button" }, "\u00AB")), page: index => React.createElement(PaginationItem, { key: index, active: currentPage === index },
+                React.createElement(PaginationLink, { tag: "button", type: "button", onClick: () => onPageChange(index) }, index)), nextPage: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index) },
+                React.createElement(PaginationLink, { next: true, tag: "button", type: "button" }, "\u00BB")), dots: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index), active: currentPage === index },
+                React.createElement(PaginationLink, { tag: "button", type: "button" }, index)) }));
 }

package/lib/esm/Components/CRUD.js

@@ -7,10 +7,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useCallback, useContext, useRef, useState } from 'react';
 import { ValidatorProvider } from "react-admin-base";
 import { FormattedMessage } from 'react-intl';
-import { Redirect, Route } from 'react-router-dom';
+import { Navigate, Routes, useParams, Route } from 'react-router-dom';
 import { Alert, Button, Col, Form, Modal, ModalFooter, ModalHeader, Row } from "reactstrap";
 import LoadingButton from '../Components/LoadingButton';
 import BootstrapDataTable, { Actions } from './BootstrapDataTable';
@@ -47,7 +58,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
         });
     }, [save, saved, error, onReload, url]);
     return React.createElement(React.Fragment, null,
-        (saved || !open) && url && React.createElement(Redirect, { to: url }),
+        (saved || !open) && url && React.createElement(Navigate, { to: url, replace: true }),
         React.createElement(Modal, { isOpen: true, size: size, toggle: () => url ? setOpen(false) : onReload(null), fade: false },
             title && React.createElement(ModalHeader, { toggle: () => url ? setOpen(false) : onReload(null) },
                 React.createElement("b", null, title)),
@@ -73,9 +84,14 @@ export function CRUDActions({ id, edit, del, children }) {
     const url = useContext(UrlContext);
     return React.createElement(Actions, { edit: edit && (url + "/" + id + "/edit"), del: del }, children);
 }
+function ComponentWrapper(_a) {
+    var { Component } = _a, props = __rest(_a, ["Component"]);
+    const { id } = useParams();
+    return React.createElement(Component, Object.assign({}, props, { id: id }));
+}
 export default function CRUD(props) {
     const ref = useRef(null);
-    const { id, url, apiUrl, Component, defaultParams, noAdd } = props;
+    const { url, apiUrl, Component, defaultParams, noAdd } = props;
     var reload = useCallback(function () {
         return __awaiter(this, void 0, void 0, function* () {
             if (ref.current) {
@@ -84,8 +100,8 @@ export default function CRUD(props) {
         });
     }, [ref]);
     return React.createElement(UrlContext.Provider, { value: url },
-        !noAdd && React.createElement(Route, { path: url + "/create", render: props => React.createElement(Component, Object.assign({ url: url, onReload: reload }, (defaultParams || {}))) }),
-        React.createElement(Route, { path: url + "/:id/edit", render: props => React.createElement(Component, Object.assign({ url: url, onReload: reload, id: props.match.params.id }, (defaultParams || {}))) }),
-        id && React.createElement(Route, { path: url + "/edit", render: props => React.createElement(Component, Object.assign({ url: url, onReload: reload, id: id }, (defaultParams || {}))) }),
-        React.createElement(BootstrapDataTable, Object.assign({ innerRef: ref, add: !noAdd && (url + "/create") }, props, { url: apiUrl || url })));
+        React.createElement(Routes, null,
+            !noAdd && React.createElement(Route, { path: "create", element: React.createElement(ComponentWrapper, Object.assign({ Component: Component, url: url, onReload: reload }, (defaultParams || {}))) }),
+            React.createElement(Route, { path: ":id/edit", element: React.createElement(ComponentWrapper, Object.assign({ Component: Component, url: url, onReload: reload }, (defaultParams || {}))) })),
+        React.createElement(BootstrapDataTable, Object.assign({ innerRef: ref, add: !noAdd && "create" }, props, { url: apiUrl || url })));
 }

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function CheckBox(props: any): JSX.Element;

package/lib/esm/Components/EntityEditor.js

@@ -14,7 +14,7 @@ import { Alert, Form } from 'reactstrap';
 import LoadingButton from "../Components/LoadingButton";
 import { ValidationErrors } from './Validator';
 export default function EntityEditor({ entity, disabled, children, onSave, saveButtonClassName, saveButtonText }) {
-    const [_1, _2, save, loading] = entity;
+    const [data, _2, save, loading] = entity;
     const [saved, setSaved] = useState(false);
     const [error, setError] = useState(false);
     const onSubmit = useCallback(function (e) {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function ExcelExportButton({ name, header, params, map, extra }: {
     name: any;
     header: any;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function ExternalLoginButton({ id, icon, name, url }: {
     id: any;
     icon: any;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function ImagePicker(props: any): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useLanguage(): any;
 export default function LanguageProvider({ defaultLanguage, languages, children }: {
     defaultLanguage: any;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function LoadingButton(props: any): JSX.Element;

package/lib/esm/Components/MenuState.js

@@ -1,20 +1,28 @@
-import { useEffect, useReducer } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
 import { useMediaQuery } from 'react-responsive';
-import { useHistory } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 export function useIsMobile() {
     return useMediaQuery({ query: '(max-width: 992px)' });
 }
+const useOnLocationChange = (handleLocationChange) => {
+    const location = useLocation();
+    const locationRef = useRef("");
+    useEffect(function () {
+        if (locationRef.current != location.pathname) {
+            handleLocationChange(location);
+            locationRef.current = location.pathname;
+        }
+    }, [location.pathname, locationRef, handleLocationChange]);
+};
 export function useMenuState() {
     const isMobile = useIsMobile();
     const state = useReducer(a => !a, !isMobile);
     const [isOpen, toggleOpen] = state;
-    const history = useHistory();
-    useEffect(function () {
-        if (isMobile && isOpen) {
-            return history.listen(function () {
-                toggleOpen();
-            });
+    const locationChangeCallback = useCallback(function () {
+        if (isMobile && !isOpen) {
+            toggleOpen();
         }
-    }, [isMobile, isOpen, history]);
+    }, [isMobile, isOpen]);
+    useOnLocationChange(locationChangeCallback);
     return state;
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useTheme(): any;
 export declare function useAllThemes(): any;
 export default function ThemeProvider({ themes, defaultTheme, children }: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type ValidatorProps = {
     name: string;
     type: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.5.4",
+  "version": "0.7.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -25,32 +25,29 @@
     "delay": "100"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
     "react-intl": "^5.21.0",
-    "react-router-dom": "^5.3.0"
+    "react-router-dom": "^6.3.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.5.0",
-    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@emotion/react": "^11.8.2",
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "bootstrap": "^5.1.3",
     "file-dialog": "^0.0.8",
     "modal-cropper": "^1.2.3",
     "nprogress": "^0.2.0",
     "prettysize": "^2.0.0",
-    "react-admin-base": "^0.4.3",
+    "react-admin-base": "^0.7.0",
     "react-responsive": "^8.2.0",
-    "react-select": "^5.2.1",
-    "reactstrap": "^9.0.0",
+    "react-select": "^5.2.2",
+    "reactstrap": "^9.0.1",
     "rewire": "^6.0.0",
-    "sweetalert2": "^11.1.9"
+    "sweetalert2": "^11.4.8"
   },
   "devDependencies": {
-    "@types/react": "^17.0.34",
-    "@types/react-router-dom": "^5.3.2",
     "cross-env": "^7.0.3",
-    "nodemon": "^2.0.14",
-    "react-intl": "^5.21.0",
-    "typescript": "^4.4.4"
+    "nodemon": "^2.0.15",
+    "react-intl": "^5.24.8",
+    "typescript": "^4.6.3"
   }
 }

package/src/Components/BootstrapDataTable.tsx

@@ -114,9 +114,9 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
             <DataContextProvider value={fetchData}>
                 <CardHeader>
                     <Row>
-                        {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl btn-lg d-block"><i className="fa fa-plus"/></Link></Col>}
+                        {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" bsSize="lg" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
+                            <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>
@@ -131,14 +131,13 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
                             <Input
                                 placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
                                 value={params.query || ''}
-                                bsSize="lg"
                                 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-lg fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
-                        <i className="far fa-times-circle fa-lg"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
+                    {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>

package/src/Components/BootstrapPagination.tsx

@@ -19,17 +19,17 @@ export default function BootstrapPagination({ className, currentPage, pageCount,
             activePage={currentPage}
             pageCount={pageCount}
             showPages={15}
-            prevPage={index => <PaginationItem onClick={() => onPageChange(index)}><PaginationLink previous tag="button">&laquo;</PaginationLink></PaginationItem>}
+            prevPage={index => <PaginationItem onClick={() => onPageChange(index)}><PaginationLink previous tag="button" type="button">&laquo;</PaginationLink></PaginationItem>}
 
             page={index => <PaginationItem key={index} active={currentPage === index}>
-                <PaginationLink tag="button" onClick={() => onPageChange(index)}>{index}</PaginationLink>
+                <PaginationLink tag="button" type="button" onClick={() => onPageChange(index)}>{index}</PaginationLink>
             </PaginationItem>}
 
             nextPage={index => <PaginationItem
-                onClick={() => onPageChange(index)}><PaginationLink next tag="button">&raquo;</PaginationLink></PaginationItem>}
+                onClick={() => onPageChange(index)}><PaginationLink next tag="button" type="button">&raquo;</PaginationLink></PaginationItem>}
 
             dots={index => <PaginationItem
-                onClick={() => onPageChange(index)} active={currentPage === index}><PaginationLink tag="button">{index}</PaginationLink></PaginationItem>}
+                onClick={() => onPageChange(index)} active={currentPage === index}><PaginationLink tag="button" type="button">{index}</PaginationLink></PaginationItem>}
         />
     </Pagination>;
 }

package/src/Components/CRUD.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useRef, useState } from 'react';
 import { ValidatorProvider } from "react-admin-base";
 import { FormattedMessage } from 'react-intl';
-import { Redirect, Route } from 'react-router-dom';
+import { Navigate, Routes, useParams, Route } from 'react-router-dom';
 import { Alert, Button, Col, Form, Modal, ModalFooter, ModalHeader, Row } from "reactstrap";
 import LoadingButton from '../Components/LoadingButton';
 import BootstrapDataTable, { Actions } from './BootstrapDataTable';
@@ -56,7 +56,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
     }, [save, saved, error, onReload, url]);
 
     return <>
-        { (saved || !open) && url && <Redirect to={url} />}
+        { (saved || !open) && url && <Navigate to={url} replace />}
         <Modal isOpen size={size} toggle={() => url ? setOpen(false) : onReload(null)} fade={false}>
             { title && <ModalHeader toggle={() => url ? setOpen(false) : onReload(null)}>
                 <b>{ title }</b>
@@ -104,9 +104,14 @@ export function CRUDActions({ id, edit, del, children }: CrudActionProps) {
     </Actions>;
 }
 
+function ComponentWrapper({ Component, ...props }) {
+  const { id } = useParams();
+  return <Component {...props} id={id} />;
+}
+
 export default function CRUD(props) {
     const ref = useRef(null as any);
-    const { id, url, apiUrl, Component, defaultParams, noAdd } = props;
+    const { url, apiUrl, Component, defaultParams, noAdd } = props;
 
     var reload = useCallback(async function() {
         if (ref.current) {
@@ -115,9 +120,10 @@ export default function CRUD(props) {
     }, [ref]);
 
     return <UrlContext.Provider value={url}>
-        { !noAdd && <Route path={url+"/create"} render={props => <Component url={url} onReload={reload} {...(defaultParams || {})} />} /> }
-        <Route path={url+"/:id/edit"} render={props => <Component url={url} onReload={reload} id={props.match.params.id} {...(defaultParams || {})} />} />
-        { id && <Route path={url+"/edit"} render={props => <Component url={url} onReload={reload} id={id} {...(defaultParams || {})} />} />}
-        <BootstrapDataTable innerRef={ref} add={!noAdd && (url+"/create")} {...props} url={apiUrl || url} />
+        <Routes>
+          { !noAdd && <Route path="create" element={<ComponentWrapper Component={Component} url={url} onReload={reload} {...(defaultParams || {})} />} /> }
+          <Route path=":id/edit" element={<ComponentWrapper Component={Component} url={url} onReload={reload} {...(defaultParams || {})} />} />
+        </Routes>
+        <BootstrapDataTable innerRef={ref} add={!noAdd && "create"} {...props} url={apiUrl || url} />
     </UrlContext.Provider>;
 }

package/src/Components/EntityEditor.tsx

@@ -4,6 +4,7 @@ import { FormattedMessage } from "react-intl";
 import { Alert, Form } from 'reactstrap';
 import LoadingButton from "../Components/LoadingButton";
 import { ValidationErrors } from './Validator';
+import { Navigate } from 'react-router-dom';
 
 type EntityEditorParams = {
     entity: any;
@@ -15,7 +16,7 @@ type EntityEditorParams = {
 };
 
 export default function EntityEditor({ entity, disabled, children, onSave, saveButtonClassName, saveButtonText }: EntityEditorParams) {
-  const [ _1, _2, save, loading ] = entity;
+  const [ data, _2, save, loading ] = entity;
 
   const [ saved, setSaved ] = useState(false);
   const [ error, setError ] = useState<any>(false);

package/src/Components/MenuState.tsx

@@ -1,25 +1,37 @@
-import { useEffect, useReducer } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
 import { useMediaQuery } from 'react-responsive';
-import { useHistory } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 export function useIsMobile() {
 	return useMediaQuery({ query: '(max-width: 992px)' });
 }
 
+const useOnLocationChange = (handleLocationChange: any) => {
+	const location = useLocation();
+	
+	const locationRef = useRef("");
+	
+	useEffect(function() {
+		if (locationRef.current != location.pathname) {
+			handleLocationChange(location);
+			locationRef.current = location.pathname;
+		}
+	}, [location.pathname, locationRef, handleLocationChange]);
+};
+
 export function useMenuState() {
 	const isMobile = useIsMobile();
 	
 	const state = useReducer(a => !a, !isMobile);
 	const [ isOpen, toggleOpen ] = state;
 
-	const history = useHistory();
-	useEffect(function() {
-		if (isMobile && isOpen) {
-			return history.listen(function() {
-			   toggleOpen();
-			});
+	const locationChangeCallback = useCallback(function() {
+		if (isMobile && !isOpen) {
+			toggleOpen();
 		}
-	}, [isMobile, isOpen, history]);
+	}, [ isMobile, isOpen ]);
 
+	useOnLocationChange(locationChangeCallback);
+	
 	return state;
 }

package/tsconfig.json

@@ -17,7 +17,8 @@
       "suppressImplicitAnyIndexErrors": true,
       "allowSyntheticDefaultImports": true,
       "resolveJsonModule": true,
-      "strict": false
+      "strict": false,
+      "skipLibCheck": true
     },
     "include": ["src"]
   }