willba-component-library 0.3.6 → 0.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -95
- package/lib/components/FilterBar/components/dates/Dates.d.ts +2 -1
- package/lib/index.esm.js +10 -10
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +289 -289
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +289 -289
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.tsx +2 -2
- package/src/components/FilterBar/components/dates/Dates.tsx +2 -0
package/README.md
CHANGED
|
@@ -86,10 +86,18 @@ function App() {
|
|
|
86
86
|
]}
|
|
87
87
|
locations={{
|
|
88
88
|
multiSelect: false,
|
|
89
|
+
disabled: false,
|
|
89
90
|
data: [
|
|
90
91
|
{
|
|
91
|
-
id:
|
|
92
|
-
label:
|
|
92
|
+
id: 1,
|
|
93
|
+
label: [
|
|
94
|
+
{ content: 'Helsinki', locale: 'en' },
|
|
95
|
+
{ content: 'Helsinki', locale: 'fi' },
|
|
96
|
+
],
|
|
97
|
+
description: [
|
|
98
|
+
{ content: 'Capital of Finland', locale: 'en' },
|
|
99
|
+
{ content: 'Suomen pääkaupunki', locale: 'fi' },
|
|
100
|
+
],
|
|
93
101
|
imageUrl: 'https://example.com/helsinki.jpg',
|
|
94
102
|
},
|
|
95
103
|
],
|
|
@@ -109,103 +117,70 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
109
117
|
style="display: flex; justify-content: center; margin-bottom: 50px"
|
|
110
118
|
></div>
|
|
111
119
|
|
|
112
|
-
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
113
|
-
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
114
|
-
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.
|
|
120
|
+
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
121
|
+
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
122
|
+
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.7/lib/index.umd.js"></script>
|
|
115
123
|
|
|
116
124
|
<script>
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
],
|
|
164
|
-
tabs: [
|
|
165
|
-
{
|
|
166
|
-
label: {
|
|
167
|
-
en: 'Rooms',
|
|
168
|
-
fi: 'Hilat',
|
|
169
|
-
},
|
|
170
|
-
path: '/rooms',
|
|
171
|
-
default: true,
|
|
172
|
-
order: 2,
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
label: {
|
|
176
|
-
en: 'Events',
|
|
177
|
-
fi: 'Tapahtumat',
|
|
178
|
-
},
|
|
179
|
-
path: '/events',
|
|
180
|
-
default: false,
|
|
181
|
-
order: 1,
|
|
182
|
-
},
|
|
183
|
-
],
|
|
184
|
-
locations: {
|
|
185
|
-
multiSelect: false,
|
|
186
|
-
data: [
|
|
187
|
-
{
|
|
188
|
-
id: '1',
|
|
189
|
-
label: { en: 'Helsinki', fi: 'Helsinki' },
|
|
190
|
-
imageUrl: 'https://example.com/helsinki.jpg',
|
|
191
|
-
},
|
|
192
|
-
],
|
|
193
|
-
},
|
|
194
|
-
})
|
|
195
|
-
)
|
|
125
|
+
const renderFilterBar = async () => {
|
|
126
|
+
try {
|
|
127
|
+
// Specify domain in order to get the correct filter banner config
|
|
128
|
+
const domain = 'customer.willba.store'
|
|
129
|
+
// Set mode to "dark" or "light" for filter bar style color background
|
|
130
|
+
const mode = 'dark'
|
|
131
|
+
// Add fallback locale in case navigator.language is not available
|
|
132
|
+
const fallbackLocale = 'fi'
|
|
133
|
+
// Set request timeout in milliseconds
|
|
134
|
+
const requestTimeout = 10000
|
|
135
|
+
|
|
136
|
+
const locale = (navigator.language || fallbackLocale).split('-')[0]
|
|
137
|
+
const url = `https://${domain}/api/services/filter-bar-config?locale=${locale}`
|
|
138
|
+
|
|
139
|
+
const response = await fetch(url, {
|
|
140
|
+
method: 'GET',
|
|
141
|
+
headers: { Accept: 'application/json' },
|
|
142
|
+
signal: AbortSignal.timeout(requestTimeout),
|
|
143
|
+
})
|
|
144
|
+
|
|
145
|
+
if (!response.ok) return
|
|
146
|
+
|
|
147
|
+
const { filterBarConfig } = await response.json()
|
|
148
|
+
if (!filterBarConfig) return
|
|
149
|
+
|
|
150
|
+
const filterBarContainer = document.getElementById('will-filter-bar')
|
|
151
|
+
const WillbaFilterBar = WillbaComponentLibrary?.FilterBar
|
|
152
|
+
|
|
153
|
+
if (!filterBarContainer || !WillbaFilterBar) return
|
|
154
|
+
|
|
155
|
+
const root = ReactDOM.createRoot(filterBarContainer)
|
|
156
|
+
root.render(
|
|
157
|
+
React.createElement(WillbaFilterBar, {
|
|
158
|
+
...filterBarConfig,
|
|
159
|
+
redirectUrl: `https://${domain}`,
|
|
160
|
+
mode,
|
|
161
|
+
})
|
|
162
|
+
)
|
|
163
|
+
} catch (error) {
|
|
164
|
+
console.error('Failed to render filter bar:', error)
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
169
|
+
renderFilterBar()
|
|
170
|
+
})
|
|
196
171
|
</script>
|
|
197
172
|
```
|
|
198
173
|
|
|
199
174
|
## Props of FilterBar
|
|
200
175
|
|
|
201
|
-
| Name | Value | Description
|
|
202
|
-
| -------------------- | ---------- |
|
|
203
|
-
| redirectUrl | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'`
|
|
204
|
-
| language | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'`
|
|
205
|
-
| palette | `{}` | The palette defines the colors of the filter bar. Override the colors using the following format: `{ primary: string, secondary: string, error: string }`. For example: `{ primary: '#2a5a44', secondary: '#2a5a44', error: '#ff0000' }`
|
|
206
|
-
| disableCalendarDates | `{}` | Disable dates on the calendar by page using the following format: `{ disabledDatesByPage: [{ offset: number, page: string }] }`. For example: `{ disabledDatesByPage: [{ offset: 7, page: '/rooms' }, { offset: -1, page: '/events' }] }`
|
|
207
|
-
| mode | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`
|
|
208
|
-
| ageCategories | `[{}]` | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]`
|
|
209
|
-
| fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed.
|
|
210
|
-
| tabs | `[{}]` | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]`
|
|
211
|
-
| locations | `{}` | Configures location filter. Format: `{ multiSelect: boolean, data: Location[] }` where Location = `{ id:
|
|
176
|
+
| Name | Value | Description |
|
|
177
|
+
| -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
178
|
+
| redirectUrl | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'` |
|
|
179
|
+
| language | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'` |
|
|
180
|
+
| palette | `{}` | The palette defines the colors of the filter bar. Override the colors using the following format: `{ primary: string, secondary: string, error: string }`. For example: `{ primary: '#2a5a44', secondary: '#2a5a44', error: '#ff0000' }` |
|
|
181
|
+
| disableCalendarDates | `{}` | Disable dates on the calendar by page using the following format: `{ disabledDatesByPage: [{ offset: number, page: string }] }`. For example: `{ disabledDatesByPage: [{ offset: 7, page: '/rooms' }, { offset: -1, page: '/events' }] }` |
|
|
182
|
+
| mode | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'` |
|
|
183
|
+
| ageCategories | `[{}]` | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]` |
|
|
184
|
+
| fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed. |
|
|
185
|
+
| tabs | `[{}]` | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]` |
|
|
186
|
+
| locations | `{}` | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: LocaleTranslation, description?: LocaleTranslation, imageUrl?: string }` and LocaleTranslation = `Array<{ content: string, locale: string }>`. `multiSelect` enables multi-selection, `disabled` disables the filter, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, disabled: false, data: [{ id: 1, label: [{ content: 'Helsinki', locale: 'en' }, { content: 'Helsinki', locale: 'fi' }], description: [{ content: 'Capital', locale: 'en' }, { content: 'Pääkaupunki', locale: 'fi' }], imageUrl: 'https://example.com/helsinki.jpg' }] }` |
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { DateRange } from 'react-day-picker';
|
|
2
3
|
import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes';
|
|
3
4
|
type Props = {
|
|
@@ -11,5 +12,5 @@ type Props = {
|
|
|
11
12
|
language?: string;
|
|
12
13
|
filtersRef?: React.RefObject<HTMLDivElement>;
|
|
13
14
|
};
|
|
14
|
-
export declare const Dates:
|
|
15
|
+
export declare const Dates: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
15
16
|
export {};
|
package/lib/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import React__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
|
|
3
3
|
|
|
4
4
|
/******************************************************************************
|
|
@@ -8916,8 +8916,8 @@ function canUseDOM() {
|
|
|
8916
8916
|
* @param deps
|
|
8917
8917
|
*/
|
|
8918
8918
|
var useIsomorphicLayoutEffect = canUseDOM()
|
|
8919
|
-
? React
|
|
8920
|
-
: React
|
|
8919
|
+
? React.useLayoutEffect
|
|
8920
|
+
: React.useEffect;
|
|
8921
8921
|
var serverHandoffComplete = false;
|
|
8922
8922
|
var id = 0;
|
|
8923
8923
|
function genId() {
|
|
@@ -8930,7 +8930,7 @@ function useId(providedId) {
|
|
|
8930
8930
|
// If this instance isn't part of the initial render, we don't have to do the
|
|
8931
8931
|
// double render/patch-up dance. We can just generate the ID and return it.
|
|
8932
8932
|
var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
|
|
8933
|
-
var _b = React
|
|
8933
|
+
var _b = React.useState(initialId), id = _b[0], setId = _b[1];
|
|
8934
8934
|
useIsomorphicLayoutEffect(function () {
|
|
8935
8935
|
if (id === null) {
|
|
8936
8936
|
// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
|
|
@@ -8941,7 +8941,7 @@ function useId(providedId) {
|
|
|
8941
8941
|
}
|
|
8942
8942
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8943
8943
|
}, []);
|
|
8944
|
-
React
|
|
8944
|
+
React.useEffect(function () {
|
|
8945
8945
|
if (serverHandoffComplete === false) {
|
|
8946
8946
|
// Flag all future uses of `useId` to skip the update dance. This is in
|
|
8947
8947
|
// `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
|
|
@@ -12066,10 +12066,10 @@ styleInject(css_248z$1);
|
|
|
12066
12066
|
|
|
12067
12067
|
var Dates = forwardRef(function (_a, ref) {
|
|
12068
12068
|
var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language, filtersRef = _a.filtersRef;
|
|
12069
|
-
return (
|
|
12070
|
-
|
|
12071
|
-
|
|
12072
|
-
|
|
12069
|
+
return (React__default.createElement("div", { className: "will-filter-bar-dates", ref: ref },
|
|
12070
|
+
React__default.createElement(FilterSectionHeader, { title: '', action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12071
|
+
React__default.createElement("div", { className: "will-dates-filter-container" },
|
|
12072
|
+
React__default.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
|
|
12073
12073
|
});
|
|
12074
12074
|
Dates.displayName = 'Dates';
|
|
12075
12075
|
|
|
@@ -12154,7 +12154,7 @@ function FilterBar(_a) {
|
|
|
12154
12154
|
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12155
12155
|
React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12156
12156
|
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
|
|
12157
|
-
selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-
|
|
12157
|
+
selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-dates-filter" },
|
|
12158
12158
|
React__default.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
|
|
12159
12159
|
selectedFilter === FilterSections.GUESTS && (React__default.createElement("div", { id: "will-guests-filter" },
|
|
12160
12160
|
React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|