@panneau/app 2.0.92 → 3.0.0

package/es/index.js

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { useLocation, createPathToRegexpMatcher, useMemoryLocationHook } from '@folklore/routes';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useState, useEffect, Fragment } from 'react';
-import { useLocation, useNavigate, useParams, Route, Routes, Navigate, MemoryRouter } from 'react-router';
-import { Link, BrowserRouter } from 'react-router-dom';
+import { Route, Switch, Redirect, Router } from 'wouter';
 import { useUser, useLogout, useAuth, AuthProvider } from '@panneau/auth';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useUrlGenerator, usePanneauResources, usePanneau, usePanneauColorScheme, ResourceProvider, useComponentsManager, useFormsComponents, useRoutes, usePagesComponentsManager, PanneauProvider, UppyProvider, RoutesProvider, ModalProvider, ComponentsProvider } from '@panneau/core/contexts';
@@ -26,6 +26,7 @@ import ResourceForm from '@panneau/form-resource';
 import classNames from 'classnames';
 import { Modals } from '@panneau/element-modal';
 import isArray from 'lodash/isArray';
+import Link from '@panneau/element-link';
 import Menu from '@panneau/element-menu';
 import Navbar from '@panneau/element-navbar';
 import Label from '@panneau/element-label';
@@ -136,7 +137,8 @@ var ResourcesMenu = function ResourcesMenu(_ref) {
     itemClassName = _ref.itemClassName,
     linkClassName = _ref.linkClassName;
   var _useLocation = useLocation(),
-    pathname = _useLocation.pathname;
+    _useLocation2 = _slicedToArray(_useLocation, 1),
+    pathname = _useLocation2[0].pathname;
   var resources = usePanneauResources();
   var resourceRoute = useResourceUrlGenerator();
   var items = useMemo(function () {
@@ -226,7 +228,7 @@ var MainNavbar = function MainNavbar(props) {
   return /*#__PURE__*/React.createElement(Navbar, Object.assign({
     theme: background
   }, props), name !== null ? /*#__PURE__*/React.createElement(Link, {
-    to: route('home'),
+    href: route('home'),
     className: "navbar-brand"
   }, name) : null, items);
 };
@@ -322,9 +324,10 @@ var propTypes$e = {
 var defaultProps$d = {};
 var ResourceCreatePage = function ResourceCreatePage(_ref) {
   var resource = _ref.resource;
-  var navigate = useNavigate();
   var _useLocation = useLocation(),
-    search = _useLocation.search;
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    search = _useLocation2[0].search,
+    navigate = _useLocation2[1];
   var resourceRoute = useResourceUrlGenerator(resource);
   var _useMemo = useMemo(function () {
       return queryString.parse(search);
@@ -368,16 +371,17 @@ var ResourceCreatePage = function ResourceCreatePage(_ref) {
 ResourceCreatePage.propTypes = propTypes$e;
 ResourceCreatePage.defaultProps = defaultProps$d;
 
-// import PropTypes from 'prop-types';
 var propTypes$d = {
+  itemId: PropTypes.string.isRequired,
   resource: PropTypes$1.resource.isRequired
 };
 var defaultProps$c = {};
 var ResourceDeletePage = function ResourceDeletePage(_ref) {
-  var resource = _ref.resource;
-  var _useParams = useParams(),
-    itemId = _useParams.id;
-  var navigate = useNavigate();
+  var itemId = _ref.itemId,
+    resource = _ref.resource;
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    navigate = _useLocation2[1];
   var resourceRoute = useResourceUrlGenerator(resource);
   var _useResourceItem = useResourceItem(resource, itemId),
     item = _useResourceItem.item;
@@ -423,13 +427,13 @@ ResourceDeletePage.propTypes = propTypes$d;
 ResourceDeletePage.defaultProps = defaultProps$c;
 
 var propTypes$c = {
+  itemId: PropTypes.string.isRequired,
   resource: PropTypes$1.resource.isRequired
 };
 var defaultProps$b = {};
 var ResourceEditPage = function ResourceEditPage(_ref) {
-  var resource = _ref.resource;
-  var _useParams = useParams(),
-    itemId = _useParams.id;
+  var itemId = _ref.itemId,
+    resource = _ref.resource;
   var _useResourceItem = useResourceItem(resource, itemId),
     item = _useResourceItem.item;
   var _ref2 = item || {},
@@ -621,8 +625,9 @@ var ResourceIndexPage = function ResourceIndexPage(_ref) {
   var resourceValues = useResourceValues(resource);
   var componentsManager = useComponentsManager();
   var _useLocation = useLocation(),
-    search = _useLocation.search;
-  var navigate = useNavigate();
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    search = _useLocation2[0].search,
+    navigate = _useLocation2[1];
   var query = useMemo(function () {
     return queryString.parse(search);
   }, [search]);
@@ -718,14 +723,14 @@ ResourceIndexPage.propTypes = propTypes$9;
 ResourceIndexPage.defaultProps = defaultProps$9;
 
 var propTypes$8 = {
-  resource: PropTypes$1.resource.isRequired
+  resource: PropTypes$1.resource.isRequired,
+  itemId: PropTypes.string.isRequired
 };
 var defaultProps$8 = {};
 var ResourceShowPage = function ResourceShowPage(_ref) {
-  var resource = _ref.resource;
+  var resource = _ref.resource,
+    itemId = _ref.itemId;
   var name = resource.name;
-  var _useParams = useParams(),
-    itemId = _useParams.id;
   var _useResourceItem = useResourceItem(resource, itemId),
     item = _useResourceItem.item;
   var _ref2 = item || {},
@@ -774,7 +779,7 @@ var HomePage = function HomePage() {
     return /*#__PURE__*/React.createElement(Link, {
       className: "d-block my-2",
       key: "resource-link-".concat(resourceId),
-      to: route('resources.index', {
+      href: route('resources.index', {
         resource: resourceId
       })
     }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -1029,7 +1034,7 @@ var ErrorPage = function ErrorPage(_ref) {
 ErrorPage.propTypes = propTypes$2;
 ErrorPage.defaultProps = defaultProps$2;
 
-var _excluded$1 = ["path", "component", "exact"];
+var _excluded$1 = ["path", "component"];
 var createResourceRoutes = function createResourceRoutes(resource, _ref) {
   var route = _ref.route,
     componentsManager = _ref.componentsManager,
@@ -1070,73 +1075,72 @@ var createResourceRoutes = function createResourceRoutes(resource, _ref) {
   var ResourceEditComponent = componentsManager.getComponent(resourceEditPage === null || resourceEditPage === void 0 ? void 0 : resourceEditPage.component) || componentsManager.getComponent(editPage === null || editPage === void 0 ? void 0 : editPage.component) || ResourceEditPage;
   var ResourceDeleteComponent = componentsManager.getComponent(resourceDeletePage === null || resourceDeletePage === void 0 ? void 0 : resourceDeletePage.component) || componentsManager.getComponent(deletePage === null || deletePage === void 0 ? void 0 : deletePage.component) || ResourceDeletePage;
   return [/*#__PURE__*/React.createElement(Route, {
-    key: "".concat(resourceId, "-index"),
-    path: route('resources.index', {
-      resource: resourceId
-    }),
-    exact: true,
-    element: /*#__PURE__*/React.createElement(ResourceIndexComponent, {
-      resource: resource
-    })
-  }), /*#__PURE__*/React.createElement(Route, {
     key: "".concat(resourceId, "-create"),
     path: route('resources.create', {
       resource: resourceId
     }),
-    exact: true,
-    element: /*#__PURE__*/React.createElement(ResourceCreateComponent, {
+    exact: true
+  }, function () {
+    return /*#__PURE__*/React.createElement(ResourceCreateComponent, {
       resource: resource
-    })
+    });
   }), /*#__PURE__*/React.createElement(Route, {
     key: "".concat(resourceId, "-show"),
     path: route('resources.show', {
       resource: resourceId,
       id: ':id'
-    }),
-    exact: true,
-    element: /*#__PURE__*/React.createElement(ResourceShowComponent, {
-      resource: resource
     })
+  }, function () {
+    return /*#__PURE__*/React.createElement(ResourceShowComponent, {
+      resource: resource
+    });
   }), /*#__PURE__*/React.createElement(Route, {
     key: "".concat(resourceId, "-edit"),
     path: route('resources.edit', {
       resource: resourceId,
       id: ':id'
-    }),
-    exact: true,
-    element: /*#__PURE__*/React.createElement(ResourceEditComponent, {
-      resource: resource
     })
+  }, function () {
+    return /*#__PURE__*/React.createElement(ResourceEditComponent, {
+      resource: resource
+    });
   }), /*#__PURE__*/React.createElement(Route, {
     key: "".concat(resourceId, "-delete"),
     path: route('resources.delete', {
       resource: resourceId,
       id: ':id'
-    }),
-    exact: true,
-    element: /*#__PURE__*/React.createElement(ResourceDeleteComponent, {
-      resource: resource
     })
+  }, function () {
+    return /*#__PURE__*/React.createElement(ResourceDeleteComponent, {
+      resource: resource
+    });
   })].concat(_toConsumableArray(extraRoutes.map(function (_ref4) {
     var path = _ref4.path,
       component = _ref4.component,
-      _ref4$exact = _ref4.exact,
-      exact = _ref4$exact === void 0 ? true : _ref4$exact,
       pageProps = _objectWithoutProperties(_ref4, _excluded$1);
     var RouteComponent = componentsManager.getComponent(component);
     return RouteComponent !== null ? /*#__PURE__*/React.createElement(Route, {
       key: "route-".concat(path),
-      path: path,
-      exact: exact,
-      element: /*#__PURE__*/React.createElement(RouteComponent, Object.assign({
+      path: path
+    }, function () {
+      return /*#__PURE__*/React.createElement(RouteComponent, Object.assign({
         resource: resource
-      }, pageProps))
+      }, pageProps));
     }) : null;
-  })));
+  })), [/*#__PURE__*/React.createElement(Route, {
+    key: "".concat(resourceId, "-index"),
+    path: route('resources.index', {
+      resource: resourceId
+    })
+  }, function () {
+    return /*#__PURE__*/React.createElement(ResourceIndexComponent, {
+      resource: resource
+    });
+  })]);
 };
 
 var _excluded = ["home", "login", "account", "error", "index", "show", "create", "edit", "delete"],
-  _excluded2 = ["path", "route", "component", "exact"];
+  _excluded2 = ["path", "route", "component"];
 var propTypes$1 = {
   statusCode: PropTypes$1.statusCode
 };
@@ -1147,7 +1151,8 @@ var PanneauRoutes = function PanneauRoutes(_ref) {
   var initialStatusCode = _ref.statusCode;
   var routes = useRoutes();
   var _useLocation = useLocation(),
-    pathname = _useLocation.pathname;
+    _useLocation2 = _slicedToArray(_useLocation, 1),
+    pathname = _useLocation2[0].pathname;
   var _useState = useState({
       statusCode: initialStatusCode,
       pathname: pathname
@@ -1222,32 +1227,21 @@ var PanneauRoutes = function PanneauRoutes(_ref) {
 
   // If user is unauthenticated
   if (user === null) {
-    return /*#__PURE__*/React.createElement(Routes, null, /*#__PURE__*/React.createElement(Route, {
-      path: routes['auth.login'],
-      exact: true,
-      element: /*#__PURE__*/React.createElement(LoginComponent, loginPage)
-    }), /*#__PURE__*/React.createElement(Route, {
-      path: "*",
-      element: /*#__PURE__*/React.createElement(Navigate, {
-        to: "".concat(route('auth.login'), "?next=").concat(encodeURIComponent(pathname)),
-        replace: true
-      })
-    }));
+    return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
+      path: routes['auth.login']
+    }, /*#__PURE__*/React.createElement(LoginComponent, loginPage)), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Redirect, {
+      to: "".concat(route('auth.login'), "?next=").concat(encodeURIComponent(pathname)),
+      replace: true
+    })));
   }
 
   // Normal routes
-  return /*#__PURE__*/React.createElement(Routes, null, /*#__PURE__*/React.createElement(Route, {
-    path: routes.home,
-    exact: true,
-    element: /*#__PURE__*/React.createElement(HomeComponent, homePage)
-  }), user !== null ? /*#__PURE__*/React.createElement(Route, {
-    path: routes['auth.login'],
-    exact: true,
-    element: /*#__PURE__*/React.createElement(Navigate, {
-      to: routes.home,
-      replace: true
-    })
-  }) : null, resources.map(function (resource) {
+  return /*#__PURE__*/React.createElement(Switch, null, user !== null ? /*#__PURE__*/React.createElement(Route, {
+    path: routes['auth.login']
+  }, /*#__PURE__*/React.createElement(Redirect, {
+    to: routes.home,
+    replace: true
+  })) : null, resources.map(function (resource) {
     var _ref4 = resource || {},
       resourceId = _ref4.id;
     return /*#__PURE__*/React.createElement(Fragment, {
@@ -1258,34 +1252,28 @@ var PanneauRoutes = function PanneauRoutes(_ref) {
       pages: pages
     }));
   }), /*#__PURE__*/React.createElement(Route, {
-    path: routes.account,
-    exact: true,
-    element: /*#__PURE__*/React.createElement(AccountComponent, accountPage)
-  }), customRoutes.map(function (_ref5) {
+    path: routes.account
+  }, /*#__PURE__*/React.createElement(AccountComponent, accountPage)), customRoutes.map(function (_ref5) {
     var _ref5$path = _ref5.path,
       path = _ref5$path === void 0 ? null : _ref5$path,
       _ref5$route = _ref5.route,
       pageRoute = _ref5$route === void 0 ? null : _ref5$route,
       component = _ref5.component,
-      _ref5$exact = _ref5.exact,
-      exact = _ref5$exact === void 0 ? true : _ref5$exact,
       props = _objectWithoutProperties(_ref5, _excluded2);
     var PageComponent = componentsManager.getComponent(component);
     var finalPath = path || routes[pageRoute];
     return PageComponent !== null ? /*#__PURE__*/React.createElement(Route, {
       key: "custom-route-".concat(finalPath),
-      path: path || routes[pageRoute],
-      exact: exact,
-      element: /*#__PURE__*/React.createElement(PageComponent, props)
-    }) : null;
+      path: path || routes[pageRoute]
+    }, /*#__PURE__*/React.createElement(PageComponent, props)) : null;
   }), /*#__PURE__*/React.createElement(Route, {
-    path: "*",
-    element: /*#__PURE__*/React.createElement(ErrorComponent, null)
-  }));
+    path: routes.home
+  }, /*#__PURE__*/React.createElement(HomeComponent, homePage)), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(ErrorComponent, null)));
 };
 PanneauRoutes.propTypes = propTypes$1;
 PanneauRoutes.defaultProps = defaultProps$1;
 
+var pathToRegexpMatcher = createPathToRegexpMatcher();
 var propTypes = {
   definition: PropTypes$1.panneauDefinition.isRequired,
   components: PropTypes.oneOfType([PropTypes.objectOf(PropTypes.elementType), PropTypes.objectOf(PropTypes.objectOf(PropTypes.elementType))]),
@@ -1323,7 +1311,7 @@ var Container = function Container(_ref) {
     _definition$settings2 = _definition$settings === void 0 ? {} : _definition$settings,
     _definition$settings3 = _definition$settings2.memoryRouter,
     usesMemoryRouter = _definition$settings3 === void 0 ? false : _definition$settings3;
-  var Router = memoryRouter || usesMemoryRouter ? MemoryRouter : BrowserRouter;
+  var isMemoryRouter = memoryRouter || usesMemoryRouter || false;
   var extraMessages = useMemo(function () {
     var _definition$intl3 = definition.intl,
       _definition$intl4 = _definition$intl3 === void 0 ? {} : _definition$intl3,
@@ -1348,7 +1336,11 @@ var Container = function Container(_ref) {
   var onLogout = useCallback(function () {
     window.location.reload();
   }, [baseUrl]);
-  return /*#__PURE__*/React.createElement(Router, null, /*#__PURE__*/React.createElement(IntlProvider, {
+  var memoryLocationHook = useMemoryLocationHook();
+  return /*#__PURE__*/React.createElement(Router, {
+    hook: isMemoryRouter ? memoryLocationHook : null,
+    matcher: pathToRegexpMatcher
+  }, /*#__PURE__*/React.createElement(IntlProvider, {
     locale: locale,
     locales: locales,
     extraMessages: extraMessages