react-admin-base-bootstrap 0.6.0 → 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/BootstrapPagination.d.ts

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

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.6.0",
+  "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",
+    "@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/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"]
   }