willba-component-library 0.3.7 → 0.3.9
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 +59 -100
- package/lib/components/FilterBar/utils/calculateDropdownPosition.d.ts +12 -0
- package/lib/index.esm.js +2 -2
- package/lib/index.js +2 -2
- package/lib/index.umd.js +2 -2
- package/package.json +1 -1
- package/src/locales/en/filterBar.json +1 -1
- package/src/locales/fi/filterBar.json +1 -1
package/README.md
CHANGED
|
@@ -117,111 +117,70 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
117
117
|
style="display: flex; justify-content: center; margin-bottom: 50px"
|
|
118
118
|
></div>
|
|
119
119
|
|
|
120
|
-
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
121
|
-
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
122
|
-
<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>
|
|
123
123
|
|
|
124
124
|
<script>
|
|
125
|
-
const
|
|
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
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
],
|
|
172
|
-
tabs: [
|
|
173
|
-
{
|
|
174
|
-
label: {
|
|
175
|
-
en: 'Rooms',
|
|
176
|
-
fi: 'Hilat',
|
|
177
|
-
},
|
|
178
|
-
path: '/rooms',
|
|
179
|
-
default: true,
|
|
180
|
-
order: 2,
|
|
181
|
-
},
|
|
182
|
-
{
|
|
183
|
-
label: {
|
|
184
|
-
en: 'Events',
|
|
185
|
-
fi: 'Tapahtumat',
|
|
186
|
-
},
|
|
187
|
-
path: '/events',
|
|
188
|
-
default: false,
|
|
189
|
-
order: 1,
|
|
190
|
-
},
|
|
191
|
-
],
|
|
192
|
-
locations: {
|
|
193
|
-
multiSelect: false,
|
|
194
|
-
disabled: false,
|
|
195
|
-
data: [
|
|
196
|
-
{
|
|
197
|
-
id: 1,
|
|
198
|
-
label: [
|
|
199
|
-
{ content: 'Helsinki', locale: 'en' },
|
|
200
|
-
{ content: 'Helsinki', locale: 'fi' },
|
|
201
|
-
],
|
|
202
|
-
description: [
|
|
203
|
-
{ content: 'Capital of Finland', locale: 'en' },
|
|
204
|
-
{ content: 'Suomen pääkaupunki', locale: 'fi' },
|
|
205
|
-
],
|
|
206
|
-
imageUrl: 'https://example.com/helsinki.jpg',
|
|
207
|
-
},
|
|
208
|
-
],
|
|
209
|
-
},
|
|
210
|
-
})
|
|
211
|
-
)
|
|
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
|
+
})
|
|
212
171
|
</script>
|
|
213
172
|
```
|
|
214
173
|
|
|
215
174
|
## Props of FilterBar
|
|
216
175
|
|
|
217
|
-
| Name | Value | Description
|
|
218
|
-
| -------------------- | ---------- |
|
|
219
|
-
| redirectUrl | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'`
|
|
220
|
-
| language | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'`
|
|
221
|
-
| 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' }`
|
|
222
|
-
| 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' }] }`
|
|
223
|
-
| mode | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`
|
|
224
|
-
| 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 }]`
|
|
225
|
-
| fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed.
|
|
226
|
-
| 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' }}]`
|
|
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' }}]` |
|
|
227
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' }] }` |
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CSSProperties, RefObject } from 'react';
|
|
2
|
+
import { FilterSections } from '../FilterBarTypes';
|
|
3
|
+
type CalculateDropdownPositionParams = {
|
|
4
|
+
filterSection: FilterSections;
|
|
5
|
+
headerRef: RefObject<HTMLDivElement>;
|
|
6
|
+
locationsButtonRef: RefObject<HTMLButtonElement>;
|
|
7
|
+
datesButtonRef: RefObject<HTMLButtonElement>;
|
|
8
|
+
guestsButtonRef: RefObject<HTMLButtonElement>;
|
|
9
|
+
isMobile: boolean;
|
|
10
|
+
};
|
|
11
|
+
export declare const calculateDropdownPosition: ({ filterSection, headerRef, locationsButtonRef, datesButtonRef, guestsButtonRef, isMobile, }: CalculateDropdownPositionParams) => CSSProperties;
|
|
12
|
+
export {};
|
package/lib/index.esm.js
CHANGED
|
@@ -2793,7 +2793,7 @@ instance.loadNamespaces;
|
|
|
2793
2793
|
instance.loadLanguages;
|
|
2794
2794
|
|
|
2795
2795
|
var locations$1 = {
|
|
2796
|
-
label: "
|
|
2796
|
+
label: "Location",
|
|
2797
2797
|
title: "Select location",
|
|
2798
2798
|
placeholder: "Add location",
|
|
2799
2799
|
selected: "locations"
|
|
@@ -2863,7 +2863,7 @@ var enCommon = {
|
|
|
2863
2863
|
};
|
|
2864
2864
|
|
|
2865
2865
|
var locations = {
|
|
2866
|
-
label: "
|
|
2866
|
+
label: "Sijainti",
|
|
2867
2867
|
title: "Valitse sijainti",
|
|
2868
2868
|
placeholder: "Lisää sijainti",
|
|
2869
2869
|
selected: "sijainnit"
|
package/lib/index.js
CHANGED
|
@@ -2813,7 +2813,7 @@ instance.loadNamespaces;
|
|
|
2813
2813
|
instance.loadLanguages;
|
|
2814
2814
|
|
|
2815
2815
|
var locations$1 = {
|
|
2816
|
-
label: "
|
|
2816
|
+
label: "Location",
|
|
2817
2817
|
title: "Select location",
|
|
2818
2818
|
placeholder: "Add location",
|
|
2819
2819
|
selected: "locations"
|
|
@@ -2883,7 +2883,7 @@ var enCommon = {
|
|
|
2883
2883
|
};
|
|
2884
2884
|
|
|
2885
2885
|
var locations = {
|
|
2886
|
-
label: "
|
|
2886
|
+
label: "Sijainti",
|
|
2887
2887
|
title: "Valitse sijainti",
|
|
2888
2888
|
placeholder: "Lisää sijainti",
|
|
2889
2889
|
selected: "sijainnit"
|
package/lib/index.umd.js
CHANGED
|
@@ -2815,7 +2815,7 @@
|
|
|
2815
2815
|
instance.loadLanguages;
|
|
2816
2816
|
|
|
2817
2817
|
var locations$1 = {
|
|
2818
|
-
label: "
|
|
2818
|
+
label: "Location",
|
|
2819
2819
|
title: "Select location",
|
|
2820
2820
|
placeholder: "Add location",
|
|
2821
2821
|
selected: "locations"
|
|
@@ -2885,7 +2885,7 @@
|
|
|
2885
2885
|
};
|
|
2886
2886
|
|
|
2887
2887
|
var locations = {
|
|
2888
|
-
label: "
|
|
2888
|
+
label: "Sijainti",
|
|
2889
2889
|
title: "Valitse sijainti",
|
|
2890
2890
|
placeholder: "Lisää sijainti",
|
|
2891
2891
|
selected: "sijainnit"
|
package/package.json
CHANGED