willba-component-library 0.0.9 → 0.0.10
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/dist/cjs/index.js +109 -79
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +109 -79
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -2520,95 +2520,125 @@ const Button = (props) => {
|
|
|
2520
2520
|
};
|
|
2521
2521
|
|
|
2522
2522
|
function FilterBar() {
|
|
2523
|
-
const [selectedFilter, setSelectedFilter] =
|
|
2523
|
+
//const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
|
|
2524
2524
|
// const [startDate, setStartDate] = useState(0);
|
|
2525
2525
|
// const [endDate, setEndDate] = useState(0);
|
|
2526
|
-
const [guestsAdults, setGuestsAdults] =
|
|
2527
|
-
const [guestsKids, setGuestsKids] =
|
|
2528
|
-
const [categories, setCategories] =
|
|
2529
|
-
const handleSelectedFilter = (id) => {
|
|
2530
|
-
|
|
2531
|
-
}
|
|
2532
|
-
const handleSubmit = () => {
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
}
|
|
2526
|
+
//const [guestsAdults, setGuestsAdults] = useState(0)
|
|
2527
|
+
//const [guestsKids, setGuestsKids] = useState(0)
|
|
2528
|
+
//const [categories, setCategories] = useState(0)
|
|
2529
|
+
// const handleSelectedFilter = (id: any) => {
|
|
2530
|
+
// setSelectedFilter(id)
|
|
2531
|
+
// }
|
|
2532
|
+
// const handleSubmit = () => {
|
|
2533
|
+
// const queryParams = new URLSearchParams()
|
|
2534
|
+
// const params = {
|
|
2535
|
+
// // startDate,
|
|
2536
|
+
// // endDate,
|
|
2537
|
+
// guestsAdults,
|
|
2538
|
+
// guestsKids,
|
|
2539
|
+
// categories,
|
|
2540
|
+
// }
|
|
2541
|
+
// for (const [key, value] of Object.entries(params)) {
|
|
2542
|
+
// if (value) {
|
|
2543
|
+
// queryParams.append(key, value.toString())
|
|
2544
|
+
// }
|
|
2545
|
+
// }
|
|
2546
|
+
// const url = `http://localhost:4000/en/events/?${queryParams.toString()}`
|
|
2547
|
+
// window.location.href = url
|
|
2548
|
+
// handleSelectedFilter(false)
|
|
2549
|
+
// }
|
|
2550
2550
|
return (React.createElement("div", { className: "search-widget" },
|
|
2551
2551
|
React.createElement("div", { className: "search-widget-header" },
|
|
2552
|
-
React.createElement(SelectButton, { label: "Start date", onClick: () => handleSelectedFilter(1) }),
|
|
2553
2552
|
React.createElement(Divider, null),
|
|
2554
|
-
React.createElement(SelectButton, { label: "End date", onClick: () => handleSelectedFilter(2) }),
|
|
2555
2553
|
React.createElement(Divider, null),
|
|
2556
|
-
React.createElement(
|
|
2557
|
-
React.createElement(Divider, null),
|
|
2558
|
-
React.createElement(SelectButton, { label: "Categories", onClick: () => handleSelectedFilter(4) }),
|
|
2559
|
-
React.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
2560
|
-
selectedFilter && (React.createElement("div", { className: "search-widget-container" },
|
|
2561
|
-
selectedFilter === 1 && React.createElement(StartDate, null),
|
|
2562
|
-
selectedFilter === 2 && React.createElement(EndDate, null),
|
|
2563
|
-
selectedFilter === 3 && (React.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: () => setGuestsAdults(guestsAdults - 1), incrementAdults: () => setGuestsAdults(guestsAdults + 1), decrementKids: () => setGuestsKids(guestsKids - 1), incrementKids: () => setGuestsKids(guestsKids + 1) })),
|
|
2564
|
-
selectedFilter === 4 && (React.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
|
|
2554
|
+
React.createElement(Divider, null))));
|
|
2565
2555
|
}
|
|
2566
2556
|
const Divider = () => {
|
|
2567
2557
|
return React.createElement("div", { className: "search-widget-divider" });
|
|
2568
2558
|
};
|
|
2569
|
-
const SubmitButton = ({ onClick }) => {
|
|
2570
|
-
|
|
2571
|
-
}
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2559
|
+
// const SubmitButton = ({ onClick }: any) => {
|
|
2560
|
+
// return (
|
|
2561
|
+
// <button className="search-widget-submit-button" onClick={onClick}>
|
|
2562
|
+
// Apply filters
|
|
2563
|
+
// </button>
|
|
2564
|
+
// )
|
|
2565
|
+
// }
|
|
2566
|
+
// const SelectButton = ({ label, onClick }: any) => {
|
|
2567
|
+
// return (
|
|
2568
|
+
// <button className="search-widget-select-button" onClick={onClick}>
|
|
2569
|
+
// {label}
|
|
2570
|
+
// </button>
|
|
2571
|
+
// )
|
|
2572
|
+
// }
|
|
2573
|
+
// const StartDate = () => {
|
|
2574
|
+
// return <div>Start date</div>
|
|
2575
|
+
// }
|
|
2576
|
+
// const EndDate = () => {
|
|
2577
|
+
// return <div>End date</div>
|
|
2578
|
+
// }
|
|
2579
|
+
// const Guests = ({
|
|
2580
|
+
// guestsAdults,
|
|
2581
|
+
// guestsKids,
|
|
2582
|
+
// decrementAdults,
|
|
2583
|
+
// incrementAdults,
|
|
2584
|
+
// decrementKids,
|
|
2585
|
+
// incrementKids,
|
|
2586
|
+
// }: any) => {
|
|
2587
|
+
// return (
|
|
2588
|
+
// <div className="search-widget-guests">
|
|
2589
|
+
// <h3>Guests</h3>
|
|
2590
|
+
// <p>Who's coming?</p>
|
|
2591
|
+
// <div className="guests-filter-container">
|
|
2592
|
+
// <div className="guests-filter-inner">
|
|
2593
|
+
// <span>Adults</span>
|
|
2594
|
+
// <div>
|
|
2595
|
+
// <button onClick={decrementAdults} disabled={guestsAdults < 1}>
|
|
2596
|
+
// -
|
|
2597
|
+
// </button>
|
|
2598
|
+
// <span>{guestsAdults}</span>
|
|
2599
|
+
// <button onClick={incrementAdults}>+</button>
|
|
2600
|
+
// </div>
|
|
2601
|
+
// </div>
|
|
2602
|
+
// <div className="guests-filter-inner">
|
|
2603
|
+
// <span>Kids</span>
|
|
2604
|
+
// <div>
|
|
2605
|
+
// <button onClick={decrementKids} disabled={guestsKids < 1}>
|
|
2606
|
+
// -
|
|
2607
|
+
// </button>
|
|
2608
|
+
// <span>{guestsKids}</span>
|
|
2609
|
+
// <button onClick={incrementKids}>+</button>
|
|
2610
|
+
// </div>
|
|
2611
|
+
// </div>
|
|
2612
|
+
// </div>
|
|
2613
|
+
// </div>
|
|
2614
|
+
// )
|
|
2615
|
+
// }
|
|
2616
|
+
// const Categories = ({ categories, setCategories }: any) => {
|
|
2617
|
+
// const categoriesPlaceholder = ['Weekend', 'Week', 'Summer camp', 'Winter camp']
|
|
2618
|
+
// const [selectedCategory, setSelectedCategory] = useState('')
|
|
2619
|
+
// const handleCategoryChange = (selectedCategory: any) => {
|
|
2620
|
+
// setSelectedCategory(selectedCategory)
|
|
2621
|
+
// setCategories(selectedCategory) // Update the parent component's state with the selected category
|
|
2622
|
+
// }
|
|
2623
|
+
// return (
|
|
2624
|
+
// <div className="search-widget-categories">
|
|
2625
|
+
// <h3>CATEGORY</h3>
|
|
2626
|
+
// <div className="categories-filter-inner">
|
|
2627
|
+
// {categoriesPlaceholder.map((itm, idx) => (
|
|
2628
|
+
// <div key={idx}>
|
|
2629
|
+
// <input
|
|
2630
|
+
// type="radio"
|
|
2631
|
+
// value={itm}
|
|
2632
|
+
// checked={selectedCategory === itm}
|
|
2633
|
+
// onChange={() => handleCategoryChange(itm)}
|
|
2634
|
+
// />
|
|
2635
|
+
// <span>{itm}</span>
|
|
2636
|
+
// </div>
|
|
2637
|
+
// ))}
|
|
2638
|
+
// </div>
|
|
2639
|
+
// </div>
|
|
2640
|
+
// )
|
|
2641
|
+
// }
|
|
2612
2642
|
|
|
2613
2643
|
export { Button, FilterBar };
|
|
2614
2644
|
//# sourceMappingURL=index.js.map
|