@wayke-se/components-react 3.0.0 → 3.1.0-beta.1

package/README.md

@@ -69,9 +69,18 @@ const ProviderSettings: WaykeProviderSettings = {
 
 ### WaykeComposite uses hash-route, i want to use path-route
 
-In this case you need to make sure that you are in control of the routing where same html file is 
+In this case you need to make sure that you are in control of the routing, if the user reloads the page, where same html file is 
 served for `/your/path/to/this/component` and `/your/path/to/this/component/00000000-0000-0000-0000-000000000000`.
 
+Examples given the application is located in `/search/vehicles`:
+
+1) pathRoute is `/search/vehicles` => `//yoursite.com/search/vehicles/00000000-0000-0000-0000-000000000000`
+2) pathRoute is `/item` => `//yoursite.com/item/00000000-0000-0000-0000-000000000000`
+3) pathRoute is `/a/b` => `//yoursite.com/a/b/00000000-0000-0000-0000-000000000000`
+4) pathRoute is `item` => `//yoursite.com/search/item/00000000-0000-0000-0000-000000000000`
+5) pathRoute is `a/b` => `//yoursite.com/search/a/b/00000000-0000-0000-0000-000000000000`
+6) pathRoute is `https://www.wayke.se/objekt` => `https://www.wayke.se/objekt/00000000-0000-0000-0000-000000000000`
+
 ```javascript
 import React from 'react';
 import { WaykeCompositePath } from '@wayke-se/components-react'
@@ -160,7 +169,7 @@ const App = ({}) => {
 * Required
   * `id` - Guid that represents a vehicle.
 * Optional
-  * `pathRoute` - If set to true, then if a item is clicked it will append /{pathRoute}/guid to the url.
+  * `pathRoute` - If set, then if a item is clicked it will use the provided url and append the guid. Supports both relative and absolute.
   * `hashRoute` - If set to true, then if a item is clicked it will append #guid to the url (is not used if `pathRoute` is set).
   * `disableResetScrollOnInit` - Loading the item page resets the scroll, here it's possible to disable it.
   * `placeholderImage` - Provide custom placeholder image when image is missing.
@@ -181,7 +190,7 @@ const App = ({}) => {
 | modifyDocumentTitleSearch | string                    |                           |
 
 * Optional
-  * `pathRoute` - If set to true, then if a item is clicked it will append /guid to the url.
+  * `pathRoute` - If set, then if a item is clicked it will use the provided url and append the guid. Supports both relative and absolute.
   * `hashRoute` - If set to true, then if a item is clicked it will append #guid to the url (is not used if `pathRoute` is set).
   * `filterList` - Select what filters that should be visible and in whiched order, drivingWheel, price, mileage, modelYear
   * `initialQueryParams` - Set the default filter that should be applid upon init.

package/dist-node/index.js

@@ -2475,9 +2475,13 @@ const ProductCard = ({
   const _onClick = React.useMemo(() => onClick ? () => onClick(id) : undefined, [id]);
 
   const onHrefClick = React.useCallback(e => {
-    if (!!pathRoute && href) {
-      e.preventDefault();
-      pushState(href);
+    if (pathRoute && href) {
+      const reg = new RegExp('^((http|https)://)|//');
+
+      if (!pathRoute.match(reg) && !pathRoute.startsWith(location.origin)) {
+        e.preventDefault();
+        pushState(href);
+      }
     }
   }, [id, pathRoute, href]);
   return React__default.createElement(Wrapper$8, {
@@ -2528,10 +2532,25 @@ const Grid = ({
   }
 
   return React__default.createElement(Wrapper$7, null, React__default.createElement(List$4, null, documents.map(document => {
-    const _path = pathRoute === null || pathRoute === void 0 ? void 0 : pathRoute.replace(/^\/|\/$/g, '');
+    /*
+    const _path = pathRoute?.replace(/^\/|\/$/g, '');
+       const prefix = _path ? `/${_path}/` : '/';
+       const pathRouteUrl =
+      window.location.pathname === '/'
+        ? `${prefix}${document._id}`
+        : `${window.location.pathname}${prefix}${document._id}`;
+    */
+
+    /*
+    const _pathRoute = pathRoute
+      ? pathRoute.startsWith('/')
+        ? `${location.pathname}${pathRoute}/${document._id}`
+        : `${pathRoute}/${document._id}`
+      : undefined;
+       console.log(_pathRoute);
+    */
+    const _pathRoute = pathRoute ? `${pathRoute}/${document._id}` : undefined;
 
-    const prefix = _path ? `/${_path}/` : '/';
-    const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : `${window.location.pathname}${prefix}${document._id}`;
     return React__default.createElement(Item$4, {
       key: document._id
     }, React__default.createElement(ProductCard, {
@@ -2539,7 +2558,7 @@ const Grid = ({
       onClick: onClickItem,
       title: document.title,
       pathRoute: pathRoute,
-      href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined,
+      href: _pathRoute ? _pathRoute : hashRoute ? `#${document._id}` : undefined,
       image: resolveImage(document),
       placeholderImage: placeholderImage,
       description: document.shortDescription,
@@ -6939,7 +6958,7 @@ const useRelatedSearch = id => {
 const regexEndGuid = /[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/;
 const escapeRegExpString = s => s.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
 const regexPathGuid = path => {
-  if (!path) {
+  if (!path || path) {
     return regexEndGuid;
   }
 
@@ -6991,8 +7010,8 @@ const Related = ({
     var _document$featuredIma, _document$featuredIma2, _document$featuredIma3;
 
     const prefix = pathRoute ? `/${pathRoute}` : '/';
-    const r = regexPathGuid(pathRoute);
-    const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, `${pathRoute}${document._id}`) : `${window.location.pathname}${prefix}${document._id}`;
+    const r = regexPathGuid();
+    const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, document._id) : `${window.location.pathname}${prefix}${document._id}`;
     return React__default.createElement(OverflowGridItem, {
       key: document._id
     }, React__default.createElement(ProductCard, {