willba-component-library 0.1.81 → 0.1.83

package/README.md

@@ -27,11 +27,14 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 or you can add the willba-component-library using scripts:
 
 ```html
-<div id="will-filter-bar" style="max-width: 1200px"></div>
+<div
+  id="will-filter-bar"
+  style="max-width: 1200px; display: flex; justify-content: center;"
+></div>
 
-<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
-<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0/lib/index.umd.js"></script>
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.1.83/lib/index.umd.js"></script>
 
 <script>
   const filterBarElement = React.createElement
@@ -41,7 +44,45 @@ or you can add the willba-component-library using scripts:
 
   root.render(
     filterBarElement(WillFilterBar, {
-      redirectUrl: 'http://localhost:4000/',
+      redirectUrl: 'https://www.google.com',
+      language: 'en',
+      calendarOffset: {
+        rooms: 7,
+        events: -1,
+      },
+      mode: 'dark',
+      ageCategories: [
+        {
+          id: '2',
+          name: 'Alle 6 vuotiaat',
+          minVal: 0,
+          sortOrder: 3,
+        },
+        {
+          id: '3',
+          name: '6-16 vuotiaat',
+          minVal: 0,
+          sortOrder: 2,
+        },
+        {
+          id: '1',
+          name: 'Aikuiset',
+          minVal: 1,
+          sortOrder: 1,
+        },
+      ],
+      tabs: [
+        {
+          path: '/rooms',
+          default: true,
+          order: 2,
+        },
+        {
+          path: '/events',
+          default: false,
+          order: 1,
+        },
+      ],
     })
   )
 </script>
@@ -49,9 +90,15 @@ or you can add the willba-component-library using scripts:
 
 ## Props of FilterBar
 
-| Name          | Value         | Description                                                                                                               |
-| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| redirectUrl   | `"string"`    | Define the URL where the component showld redirect on filtering.                                                          |
-| language      | `"fi" , "en"` | Specify the language, available languages Finnish and English.                                                            |
-| ageCategories | `[{}]`        | Specify age categories for guests: filter: [{id: string, name: string, minAge: number , maxAge: number , minVal: number}] |
-| palette       | `{}`          | Override color: palette: {primary: string, secondary: string}.                                                            |
+| Name           | Value         | Description                                                                                                      |
+| -------------- | ------------- | ---------------------------------------------------------------------------------------------------------------- |
+| redirectUrl    | `"string"`    | Define the URL where the component should redirect on filtering.                                                 |
+| language       | `"fi" , "en"` | Specify the language, available languages Finnish and English.                                                   |
+| ageCategories  | `[{}]`        | Specify age categories for guests: [{id: string, name: string, , minVal: number, sortOrder: number}]             |
+| palette        | `{}`          | Override color: palette: {primary: string, secondary: string}.                                                   |
+| calendarOffset | `{}`          | Calendar disabled date starting from today: {rooms: number, events: number}.                                     |
+| fullWidth      | `true`        | Filter bar width, dynamic or fixed.                                                                              |
+|                |
+| mode           | `"light"`     | Filter bar tabs color: light or dark                                                                             |
+|                |
+| tabs           | `[{}]`        | Filter bar tabs management: [{path: string, default: boolean, order: number, label: { en: string, fi: string}}]. |

package/lib/index.d.ts

@@ -70,4 +70,4 @@ type FilterBarProps = {
 };
 declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, calendarOffset, mode, tabs, }: FilterBarProps): React.JSX.Element | null;
 
-export { Button, FilterBar };
+export { Button, FilterBar, Tab };

package/lib/index.esm.js

@@ -3970,13 +3970,26 @@ var useFilterBar = function (_a) {
             return;
         var defaultTab = (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? tabs[0] : tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.default; });
         var findMatchingPath = function () {
+            var e_1, _a;
             var paths = [Pages.EVENTS, Pages.ROOMS];
-            return paths.find(function (path) {
-                return window.location.pathname.includes(path) ||
-                    (defaultTab && defaultTab.path === path);
-            });
+            try {
+                for (var paths_1 = __values(paths), paths_1_1 = paths_1.next(); !paths_1_1.done; paths_1_1 = paths_1.next()) {
+                    var path = paths_1_1.value;
+                    if (window.location.pathname.includes(path)) {
+                        return path;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (paths_1_1 && !paths_1_1.done && (_a = paths_1.return)) _a.call(paths_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return defaultTab ? defaultTab.path : Pages.EVENTS;
         };
-        var currentPath = findMatchingPath() || Pages.EVENTS;
+        var currentPath = findMatchingPath();
         setSelectedPath(currentPath);
     }, []);
     var updateGuestsCount = function (id, newCount) {
@@ -3989,7 +4002,7 @@ var useFilterBar = function (_a) {
         setSelectedFilter(id);
     };
     var handleSubmit = function () {
-        var e_1, _a;
+        var e_2, _a;
         var newParams = {
             startDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
                 ? format(calendarRange.from, 'yyyy-MM-dd')
@@ -4010,12 +4023,12 @@ var useFilterBar = function (_a) {
                 }
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_2) throw e_2.error; }
         }
         handleSelectedFilter(false);
         return onSubmit && selectedPath === Pages.ROOMS