willba-component-library 0.0.33 → 0.0.35
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/lib/components/FilterBar/components/calendar/Calendar.d.ts +4 -3
- package/lib/components/FilterBar/hooks/useFilterBar.d.ts +8 -5
- package/lib/index.esm.js +39 -41
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +39 -41
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +39 -41
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.tsx +11 -6
- package/src/components/FilterBar/components/calendar/Calendar.css +4 -0
- package/src/components/FilterBar/components/calendar/Calendar.tsx +25 -33
- package/src/components/FilterBar/components/guests/Guests.tsx +1 -1
- package/src/components/FilterBar/hooks/useFilterBar.tsx +10 -5
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import 'react-day-picker/dist/style.css';
|
|
3
|
+
import './Calendar.css';
|
|
4
|
+
export default function Calendar({ calendarRange, setCalendarRange }: any): React.JSX.Element;
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DateRange } from 'react-day-picker';
|
|
2
3
|
export default function useFilterBar(): {
|
|
3
4
|
selectedFilter: number | boolean;
|
|
4
5
|
guestsAdults: number;
|
|
5
6
|
guestsKids: number;
|
|
6
7
|
categories: number;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
calendarRange: DateRange | undefined;
|
|
9
|
+
setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
|
|
10
|
+
setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
|
|
11
|
+
setGuestsAdults: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
12
|
+
setGuestsKids: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
13
|
+
setCategories: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
11
14
|
handleSelectedFilter: (id: any) => void;
|
|
12
15
|
handleSubmit: () => void;
|
|
13
16
|
};
|
package/lib/index.esm.js
CHANGED
|
@@ -94,8 +94,8 @@ function styleInject(css, ref) {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
var css_248z$
|
|
98
|
-
styleInject(css_248z$
|
|
97
|
+
var css_248z$8 = ".storybook-button {\r\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n font-weight: 700;\r\n border: 0;\r\n border-radius: 3em;\r\n cursor: pointer;\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n color: white;\r\n background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n color: #333;\r\n background-color: transparent;\r\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n font-size: 12px;\r\n padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n font-size: 14px;\r\n padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n font-size: 16px;\r\n padding: 12px 24px;\r\n}";
|
|
98
|
+
styleInject(css_248z$8);
|
|
99
99
|
|
|
100
100
|
/**
|
|
101
101
|
* Primary UI component for user interaction
|
|
@@ -106,23 +106,23 @@ var Button$1 = function (_a) {
|
|
|
106
106
|
return (React__default__default.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
|
|
107
107
|
};
|
|
108
108
|
|
|
109
|
-
var css_248z$
|
|
110
|
-
styleInject(css_248z$
|
|
109
|
+
var css_248z$7 = ".filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}";
|
|
110
|
+
styleInject(css_248z$7);
|
|
111
111
|
|
|
112
112
|
function Divider() {
|
|
113
113
|
return React__default__default.createElement("div", { className: "filter-bar-divider" });
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
var css_248z$
|
|
117
|
-
styleInject(css_248z$
|
|
116
|
+
var css_248z$6 = ".filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n}\n";
|
|
117
|
+
styleInject(css_248z$6);
|
|
118
118
|
|
|
119
119
|
function SelectButton(_a) {
|
|
120
120
|
var label = _a.label, onClick = _a.onClick;
|
|
121
121
|
return (React__default__default.createElement("button", { className: "filter-bar-select-button", onClick: onClick }, label));
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
var css_248z$
|
|
125
|
-
styleInject(css_248z$
|
|
124
|
+
var css_248z$5 = ".filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: #384265;\n color: #fff;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n}";
|
|
125
|
+
styleInject(css_248z$5);
|
|
126
126
|
|
|
127
127
|
function SubmitButton(_a) {
|
|
128
128
|
var onClick = _a.onClick;
|
|
@@ -5684,29 +5684,25 @@ function DayPicker(props) {
|
|
|
5684
5684
|
React__default__default.createElement(Root, { initialProps: props })));
|
|
5685
5685
|
}
|
|
5686
5686
|
|
|
5687
|
-
var css_248z$
|
|
5687
|
+
var css_248z$4 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
5688
|
+
styleInject(css_248z$4);
|
|
5689
|
+
|
|
5690
|
+
var css_248z$3 = ".filter-bar-calendar {\n display: flex;\n justify-content: center;\n}";
|
|
5688
5691
|
styleInject(css_248z$3);
|
|
5689
5692
|
|
|
5690
|
-
var
|
|
5691
|
-
function Calendar() {
|
|
5692
|
-
var
|
|
5693
|
-
|
|
5694
|
-
|
|
5693
|
+
var currentMonth = new Date();
|
|
5694
|
+
function Calendar(_a) {
|
|
5695
|
+
var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange;
|
|
5696
|
+
var defaultCalendarSelected = {
|
|
5697
|
+
from: currentMonth,
|
|
5698
|
+
to: addDays(currentMonth, 0),
|
|
5695
5699
|
};
|
|
5696
|
-
|
|
5697
|
-
|
|
5698
|
-
|
|
5699
|
-
|
|
5700
|
-
|
|
5701
|
-
}
|
|
5702
|
-
else if (range.to) {
|
|
5703
|
-
footer = (React__default__default.createElement("p", null,
|
|
5704
|
-
format(range.from, "PPP"),
|
|
5705
|
-
"\u2013",
|
|
5706
|
-
format(range.to, "PPP")));
|
|
5707
|
-
}
|
|
5708
|
-
}
|
|
5709
|
-
return (React__default__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: pastMonth, selected: range, footer: footer, onSelect: setRange }));
|
|
5700
|
+
useEffect(function () {
|
|
5701
|
+
if (!calendarRange)
|
|
5702
|
+
setCalendarRange(defaultCalendarSelected);
|
|
5703
|
+
}, []);
|
|
5704
|
+
return (React__default__default.createElement("div", { className: "filter-bar-calendar" },
|
|
5705
|
+
React__default__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange })));
|
|
5710
5706
|
}
|
|
5711
5707
|
|
|
5712
5708
|
var css_248z$2 = ".filter-bar-guests {\n text-align: initial;\n}\n\n.guests-filter-container {\n display: flex;\n margin-top: 30px;\n}\n\n.guests-filter-inner {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner:not(:last-child) {\n margin-right: 50px;\n}\n\n.guests-filter-inner > span {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n}\n\n.guests-filter-inner > div {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner > div > span {\n margin: 0 10px;\n}\n\n.guests-filter-inner > div button {\n border-radius: 50%;\n border: none;\n background-color: #CDEEFF;\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}";
|
|
@@ -5714,7 +5710,7 @@ styleInject(css_248z$2);
|
|
|
5714
5710
|
|
|
5715
5711
|
function Guests(_a) {
|
|
5716
5712
|
var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
|
|
5717
|
-
return (React__default__default.createElement("div", { className: "
|
|
5713
|
+
return (React__default__default.createElement("div", { className: "filter-bar-guests" },
|
|
5718
5714
|
React__default__default.createElement("h3", null, "Guests"),
|
|
5719
5715
|
React__default__default.createElement("p", null, "Who's coming?"),
|
|
5720
5716
|
React__default__default.createElement("div", { className: "guests-filter-container" },
|
|
@@ -5757,19 +5753,20 @@ function Categories(_a) {
|
|
|
5757
5753
|
|
|
5758
5754
|
function useFilterBar() {
|
|
5759
5755
|
var _a = useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
|
|
5760
|
-
|
|
5761
|
-
|
|
5762
|
-
var
|
|
5763
|
-
var
|
|
5764
|
-
var _d = useState(0), categories = _d[0], setCategories = _d[1];
|
|
5756
|
+
var _b = useState(), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
5757
|
+
var _c = useState(1), guestsAdults = _c[0], setGuestsAdults = _c[1];
|
|
5758
|
+
var _d = useState(0), guestsKids = _d[0], setGuestsKids = _d[1];
|
|
5759
|
+
var _e = useState(0), categories = _e[0], setCategories = _e[1];
|
|
5765
5760
|
var handleSelectedFilter = function (id) {
|
|
5766
5761
|
setSelectedFilter(id);
|
|
5767
5762
|
};
|
|
5768
5763
|
var handleSubmit = function () {
|
|
5769
5764
|
var queryParams = new URLSearchParams();
|
|
5770
5765
|
var params = {
|
|
5771
|
-
|
|
5772
|
-
|
|
5766
|
+
startDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
5767
|
+
? format(calendarRange.from, 'yyyy-MM-dd')
|
|
5768
|
+
: '',
|
|
5769
|
+
endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
|
|
5773
5770
|
guestsAdults: guestsAdults,
|
|
5774
5771
|
guestsKids: guestsKids,
|
|
5775
5772
|
categories: categories,
|
|
@@ -5789,6 +5786,8 @@ function useFilterBar() {
|
|
|
5789
5786
|
guestsAdults: guestsAdults,
|
|
5790
5787
|
guestsKids: guestsKids,
|
|
5791
5788
|
categories: categories,
|
|
5789
|
+
calendarRange: calendarRange,
|
|
5790
|
+
setCalendarRange: setCalendarRange,
|
|
5792
5791
|
setSelectedFilter: setSelectedFilter,
|
|
5793
5792
|
setGuestsAdults: setGuestsAdults,
|
|
5794
5793
|
setGuestsKids: setGuestsKids,
|
|
@@ -5802,20 +5801,19 @@ var css_248z = ".filter-bar {\r\n box-sizing: border-box;\r\n max-width: 1100p
|
|
|
5802
5801
|
styleInject(css_248z);
|
|
5803
5802
|
|
|
5804
5803
|
function FilterBar() {
|
|
5805
|
-
var _a = useFilterBar(), selectedFilter = _a.selectedFilter, guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, categories = _a.categories, setGuestsAdults = _a.setGuestsAdults, setGuestsKids = _a.setGuestsKids, setCategories = _a.setCategories, handleSelectedFilter = _a.handleSelectedFilter, handleSubmit = _a.handleSubmit;
|
|
5804
|
+
var _a = useFilterBar(), selectedFilter = _a.selectedFilter, guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, categories = _a.categories, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, setGuestsAdults = _a.setGuestsAdults, setGuestsKids = _a.setGuestsKids, setCategories = _a.setCategories, handleSelectedFilter = _a.handleSelectedFilter, handleSubmit = _a.handleSubmit;
|
|
5806
5805
|
return (React__default__default.createElement("div", { className: "filter-bar" },
|
|
5807
5806
|
React__default__default.createElement("div", { className: "filter-bar-header" },
|
|
5808
|
-
React__default__default.createElement(SelectButton, { label:
|
|
5807
|
+
React__default__default.createElement(SelectButton, { label: 'Start date', onClick: function () { return handleSelectedFilter(1); } }),
|
|
5809
5808
|
React__default__default.createElement(Divider, null),
|
|
5810
|
-
React__default__default.createElement(SelectButton, { label:
|
|
5809
|
+
React__default__default.createElement(SelectButton, { label: 'End date', onClick: function () { return handleSelectedFilter(2); } }),
|
|
5811
5810
|
React__default__default.createElement(Divider, null),
|
|
5812
5811
|
React__default__default.createElement(SelectButton, { label: "Guests", onClick: function () { return handleSelectedFilter(3); } }),
|
|
5813
5812
|
React__default__default.createElement(Divider, null),
|
|
5814
5813
|
React__default__default.createElement(SelectButton, { label: "Categories", onClick: function () { return handleSelectedFilter(4); } }),
|
|
5815
5814
|
React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
5816
5815
|
selectedFilter && (React__default__default.createElement("div", { className: "filter-bar-container" },
|
|
5817
|
-
selectedFilter === 1 && React__default__default.createElement(Calendar,
|
|
5818
|
-
selectedFilter === 2 && React__default__default.createElement(Calendar, null),
|
|
5816
|
+
(selectedFilter === 1 || selectedFilter === 2) && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
5819
5817
|
selectedFilter === 3 && (React__default__default.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: function () { return setGuestsAdults(guestsAdults - 1); }, incrementAdults: function () { return setGuestsAdults(guestsAdults + 1); }, decrementKids: function () { return setGuestsKids(guestsKids - 1); }, incrementKids: function () { return setGuestsKids(guestsKids + 1); } })),
|
|
5820
5818
|
selectedFilter === 4 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
|
|
5821
5819
|
}
|