@licklist/design 0.44.486-dev.25 → 0.44.486-dev.27

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.
Files changed (97) hide show
  1. package/dist/calendar/Calendar.d.ts +16 -0
  2. package/dist/calendar/Calendar.d.ts.map +1 -0
  3. package/dist/calendar/Calendar.js +1 -0
  4. package/dist/calendar/components/CalendarButtons/CalendarButtons.d.ts +6 -0
  5. package/dist/calendar/components/CalendarButtons/CalendarButtons.d.ts.map +1 -0
  6. package/dist/calendar/components/CalendarButtons/CalendarButtons.js +1 -0
  7. package/dist/calendar/components/CalendarButtons/index.d.ts.map +1 -0
  8. package/dist/calendar/components/CalendarDate/CalendarDate.d.ts.map +1 -0
  9. package/dist/calendar/components/CalendarDate/index.d.ts.map +1 -0
  10. package/dist/calendar/components/CalendarDates/CalendarDates.d.ts +8 -0
  11. package/dist/calendar/components/CalendarDates/CalendarDates.d.ts.map +1 -0
  12. package/dist/calendar/components/CalendarDates/CalendarDates.js +1 -0
  13. package/dist/calendar/components/CalendarDates/index.d.ts.map +1 -0
  14. package/dist/calendar/components/CalendarSelect/CalendarSelect.d.ts.map +1 -0
  15. package/dist/calendar/components/CalendarSelect/CalendarSelect.js +1 -0
  16. package/dist/calendar/components/CalendarSelect/index.d.ts.map +1 -0
  17. package/dist/calendar/components/CalendarWeekdays/CalendarWeekdays.d.ts.map +1 -0
  18. package/dist/calendar/components/CalendarWeekdays/index.d.ts.map +1 -0
  19. package/dist/calendar/index.d.ts +4 -0
  20. package/dist/calendar/index.d.ts.map +1 -0
  21. package/dist/calendar/utils/index.d.ts +5 -0
  22. package/dist/calendar/utils/index.d.ts.map +1 -0
  23. package/dist/calendar/utils/index.js +1 -0
  24. package/dist/iframe/event/index.d.ts +0 -1
  25. package/dist/iframe/event/index.d.ts.map +1 -1
  26. package/dist/iframe/index.d.ts +1 -1
  27. package/dist/iframe/index.d.ts.map +1 -1
  28. package/dist/iframe/order-process/components/BookingSummary/components/BookingSummaryAccordion/BookingSummaryAccordion.js +1 -1
  29. package/dist/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.js +1 -1
  30. package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.js +1 -1
  31. package/dist/index.d.ts +1 -0
  32. package/dist/index.d.ts.map +1 -1
  33. package/dist/index.js +1 -1
  34. package/dist/snippet/snippet-template/preview/Preview.d.ts.map +1 -1
  35. package/dist/snippet/snippet-template/preview/Preview.js +1 -1
  36. package/package.json +2 -2
  37. package/src/calendar/Calendar.stories.tsx +33 -0
  38. package/src/calendar/Calendar.tsx +59 -0
  39. package/src/{iframe/event/event-calendar → calendar}/components/CalendarButtons/CalendarButtons.tsx +31 -14
  40. package/src/{iframe/event/event-calendar → calendar}/components/CalendarDates/CalendarDates.tsx +16 -16
  41. package/src/{iframe/event/event-calendar → calendar}/components/CalendarSelect/CalendarSelect.tsx +1 -1
  42. package/src/calendar/index.ts +3 -0
  43. package/src/calendar/utils/index.ts +28 -0
  44. package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx +1 -1
  45. package/src/iframe/event/index.ts +0 -6
  46. package/src/iframe/index.ts +0 -1
  47. package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.tsx +3 -1
  48. package/src/iframe/page/Page.stories.tsx +2 -2
  49. package/src/index.ts +1 -0
  50. package/src/snippet/snippet-template/preview/Preview.tsx +14 -2
  51. package/dist/iframe/event/event-calendar/EventCalendar.d.ts +0 -7
  52. package/dist/iframe/event/event-calendar/EventCalendar.d.ts.map +0 -1
  53. package/dist/iframe/event/event-calendar/EventCalendar.js +0 -1
  54. package/dist/iframe/event/event-calendar/components/CalendarButtons/CalendarButtons.d.ts +0 -6
  55. package/dist/iframe/event/event-calendar/components/CalendarButtons/CalendarButtons.d.ts.map +0 -1
  56. package/dist/iframe/event/event-calendar/components/CalendarButtons/CalendarButtons.js +0 -1
  57. package/dist/iframe/event/event-calendar/components/CalendarButtons/index.d.ts.map +0 -1
  58. package/dist/iframe/event/event-calendar/components/CalendarDate/CalendarDate.d.ts.map +0 -1
  59. package/dist/iframe/event/event-calendar/components/CalendarDate/index.d.ts.map +0 -1
  60. package/dist/iframe/event/event-calendar/components/CalendarDates/CalendarDates.d.ts +0 -7
  61. package/dist/iframe/event/event-calendar/components/CalendarDates/CalendarDates.d.ts.map +0 -1
  62. package/dist/iframe/event/event-calendar/components/CalendarDates/CalendarDates.js +0 -1
  63. package/dist/iframe/event/event-calendar/components/CalendarDates/index.d.ts.map +0 -1
  64. package/dist/iframe/event/event-calendar/components/CalendarSelect/CalendarSelect.d.ts.map +0 -1
  65. package/dist/iframe/event/event-calendar/components/CalendarSelect/CalendarSelect.js +0 -1
  66. package/dist/iframe/event/event-calendar/components/CalendarSelect/index.d.ts.map +0 -1
  67. package/dist/iframe/event/event-calendar/components/CalendarWeekdays/CalendarWeekdays.d.ts.map +0 -1
  68. package/dist/iframe/event/event-calendar/components/CalendarWeekdays/index.d.ts.map +0 -1
  69. package/dist/iframe/event/event-calendar/index.d.ts +0 -4
  70. package/dist/iframe/event/event-calendar/index.d.ts.map +0 -1
  71. package/dist/iframe/event/event-calendar/types/index.d.ts +0 -6
  72. package/dist/iframe/event/event-calendar/types/index.d.ts.map +0 -1
  73. package/dist/iframe/event/event-calendar/utils/index.d.ts +0 -3
  74. package/dist/iframe/event/event-calendar/utils/index.d.ts.map +0 -1
  75. package/dist/iframe/event/event-calendar/utils/index.js +0 -1
  76. package/src/iframe/event/event-calendar/EventCalendar.stories.tsx +0 -36
  77. package/src/iframe/event/event-calendar/EventCalendar.tsx +0 -27
  78. package/src/iframe/event/event-calendar/index.ts +0 -6
  79. package/src/iframe/event/event-calendar/types/index.ts +0 -6
  80. package/src/iframe/event/event-calendar/utils/index.ts +0 -11
  81. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarButtons/index.d.ts +0 -0
  82. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarDate/CalendarDate.d.ts +0 -0
  83. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarDate/CalendarDate.js +0 -0
  84. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarDate/index.d.ts +0 -0
  85. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarDates/index.d.ts +0 -0
  86. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarSelect/CalendarSelect.d.ts +0 -0
  87. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarSelect/index.d.ts +0 -0
  88. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarWeekdays/CalendarWeekdays.d.ts +0 -0
  89. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarWeekdays/CalendarWeekdays.js +0 -0
  90. /package/dist/{iframe/event/event-calendar → calendar}/components/CalendarWeekdays/index.d.ts +0 -0
  91. /package/src/{iframe/event/event-calendar → calendar}/components/CalendarButtons/index.ts +0 -0
  92. /package/src/{iframe/event/event-calendar → calendar}/components/CalendarDate/CalendarDate.tsx +0 -0
  93. /package/src/{iframe/event/event-calendar → calendar}/components/CalendarDate/index.ts +0 -0
  94. /package/src/{iframe/event/event-calendar → calendar}/components/CalendarDates/index.ts +0 -0
  95. /package/src/{iframe/event/event-calendar → calendar}/components/CalendarSelect/index.ts +0 -0
  96. /package/src/{iframe/event/event-calendar → calendar}/components/CalendarWeekdays/CalendarWeekdays.tsx +0 -0
  97. /package/src/{iframe/event/event-calendar → calendar}/components/CalendarWeekdays/index.ts +0 -0
@@ -1,36 +1,53 @@
1
- import React, { useContext, useMemo } from "react";
1
+ import React, { useCallback, useMemo } from "react";
2
2
  import { Button } from "react-bootstrap";
3
3
  import { useTranslation } from "react-i18next";
4
4
  import { range } from "lodash";
5
- import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
6
- import { ReactComponent as SelectArrow } from "../../../../../assets/iframe/selectArrow.svg";
5
+ import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
7
6
  import { CalendarSelect } from "../CalendarSelect";
8
- import { CalendarBaseProps } from "../../types";
9
7
  import { isSelectedDateDisabled } from "../../utils";
8
+ import { CalendarProps } from "../../Calendar";
10
9
 
11
- type CalendarButtonsProps = CalendarBaseProps;
10
+ type CalendarButtonsProps = Pick<
11
+ CalendarProps,
12
+ | "isLoading"
13
+ | "disabledDates"
14
+ | "initialDate"
15
+ | "currentDate"
16
+ | "setCurrentDate"
17
+ | "setSelectedDate"
18
+ >;
12
19
 
13
20
  export const CalendarButtons = ({
14
21
  disabledDates = [],
15
22
  isLoading = false,
23
+ initialDate,
24
+ currentDate,
25
+ setCurrentDate,
26
+ setSelectedDate,
16
27
  }: CalendarButtonsProps) => {
17
- const {
18
- initialDate,
19
- currentDate,
20
- canMoveBack,
21
- onSelectPreviousMonth,
22
- onSelectNextMonth,
23
- setCurrentDate,
24
- setSelectedDate,
25
- } = useContext(EventCalendarContext);
26
28
  const { t } = useTranslation("Design");
27
29
 
30
+ const onSelectNextMonth = useCallback(() => {
31
+ setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
32
+ // eslint-disable-next-line react-hooks/exhaustive-deps
33
+ }, []);
34
+
35
+ const onSelectPreviousMonth = useCallback(() => {
36
+ setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
37
+ // eslint-disable-next-line react-hooks/exhaustive-deps
38
+ }, []);
39
+
28
40
  const yearOptions = useMemo(() => {
29
41
  return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
30
42
  return { label: String(year), value: year };
31
43
  });
32
44
  }, [initialDate]);
33
45
 
46
+ const canMoveBack = useMemo(
47
+ () => currentDate > initialDate,
48
+ [currentDate, initialDate]
49
+ );
50
+
34
51
  const onSelectYear = (value: string) => {
35
52
  const selectedYear = Number(value);
36
53
  const nextDateTime = currentDate.set({ year: selectedYear });
@@ -1,23 +1,28 @@
1
- import React, { ReactElement, useContext, useMemo } from "react";
1
+ import React, { useMemo } from "react";
2
2
  import { DateTime } from "luxon";
3
- import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
4
3
  import { CalendarWeekdays } from "../CalendarWeekdays";
5
4
  import { CalendarDate } from "../CalendarDate";
6
- import { CalendarBaseProps } from "../../types";
7
5
  import { isSelectedDateDisabled } from "../../utils";
6
+ import { CalendarProps } from "../../Calendar";
8
7
 
9
- export type CalendarDatesProps = CalendarBaseProps & {
10
- fromPrice?: string | ReactElement | null;
8
+ export type CalendarDatesProps = Pick<
9
+ CalendarProps,
10
+ | "calendarDates"
11
+ | "fromPrice"
12
+ | "isLoading"
13
+ | "disabledDates"
14
+ | "selectedDate"
15
+ | "setSelectedDate"
16
+ > & {
17
+ initialDate: DateTime;
11
18
  };
12
19
 
13
20
  export const CalendarDates = ({
14
21
  disabledDates = [],
15
22
  isLoading = false,
16
- fromPrice,
23
+ calendarDates,
24
+ ...props
17
25
  }: CalendarDatesProps) => {
18
- const { calendarDates, initialDate, selectedDate, setSelectedDate } =
19
- useContext(EventCalendarContext);
20
-
21
26
  const fillCalendarDates = useMemo(() => {
22
27
  let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
23
28
 
@@ -40,9 +45,7 @@ export const CalendarDates = ({
40
45
  <CalendarWeekdays />
41
46
  <div className="calendar-dates">
42
47
  {fillCalendarDates.map((date: DateTime | null) => {
43
- if (date === null) {
44
- return <div />;
45
- }
48
+ if (date === null) return <div />;
46
49
 
47
50
  const isDisabled =
48
51
  isLoading || isSelectedDateDisabled(date, disabledDates);
@@ -51,11 +54,8 @@ export const CalendarDates = ({
51
54
  <CalendarDate
52
55
  key={+date}
53
56
  currentDate={date}
54
- initialDate={initialDate}
55
- selectedDate={selectedDate}
56
- setSelectedDate={setSelectedDate}
57
57
  isDisabled={isDisabled}
58
- fromPrice={fromPrice}
58
+ {...props}
59
59
  />
60
60
  );
61
61
  })}
@@ -1,7 +1,7 @@
1
1
  import React, { useRef } from "react";
2
2
  import { Form } from "react-bootstrap";
3
3
  import clsx from "clsx";
4
- import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../../page/components/PageBody/constants";
4
+ import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
5
5
 
6
6
  export type CalendarSelectOption = {
7
7
  label: string;
@@ -0,0 +1,3 @@
1
+ export * from "./Calendar";
2
+ export * from "./components/CalendarSelect";
3
+ export * from "./utils";
@@ -0,0 +1,28 @@
1
+ import { DateTime, Interval } from "luxon";
2
+ import isEqual from "lodash/isEqual";
3
+
4
+ export const isSelectedDateDisabled = (
5
+ selectedDate: DateTime,
6
+ disabledDates: DateTime[] = []
7
+ ) => {
8
+ return !!disabledDates.find((disabledDate) =>
9
+ isEqual(disabledDate.toObject(), selectedDate.toObject())
10
+ );
11
+ };
12
+
13
+ export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {
14
+ const startOfMonth = initialDate.startOf("month");
15
+ const endOfMonth = initialDate.endOf("month");
16
+
17
+ return Interval.fromDateTimes(startOfMonth, endOfMonth)
18
+ .splitBy({ day: 1 })
19
+ .map((d) => d.start);
20
+ };
21
+
22
+ export const getWeekCalendarDates = (initialDate: DateTime): DateTime[] => {
23
+ const lastDay = initialDate.plus({ days: 7 });
24
+
25
+ return Interval.fromDateTimes(initialDate, lastDay)
26
+ .splitBy({ day: 1 })
27
+ .map((d) => d.start);
28
+ };
@@ -5,7 +5,7 @@ import { IframeEventVenueMap } from "./IframeEventVenueMap";
5
5
  import { Page, PageBody, PageHeader } from "../../page";
6
6
  import { BookingSummaryFooter } from "../../order-process/components/BookingSummaryFooter";
7
7
  import { BookingSummary } from "../../order-process/components/BookingSummary";
8
- import { CalendarSelect } from "../event-calendar/components/CalendarSelect";
8
+ import { CalendarSelect } from "../../../calendar/components/CalendarSelect";
9
9
  import { Product } from "../../../types";
10
10
 
11
11
  export default {
@@ -13,12 +13,6 @@ export {
13
13
  } from "./event-order-short-summary";
14
14
  export { EventDescription } from "./event-description";
15
15
  export { EventProductSets, EventProductSetsProps } from "./event-product-sets";
16
- export {
17
- EventCalendar,
18
- CalendarSelect,
19
- CalendarSelectProps,
20
- CalendarSelectOption,
21
- } from "./event-calendar";
22
16
  export {
23
17
  EventStepVenueMapZones,
24
18
  EventStepVenueMapZonesProps,
@@ -10,7 +10,6 @@ export {
10
10
  EventOrderShortSummary,
11
11
  SummaryDataType,
12
12
  EventDescription,
13
- EventCalendar,
14
13
  EventProductSets,
15
14
  EventProductSetsProps,
16
15
  IframeEventVenueMap,
@@ -28,7 +28,7 @@ import { PageBody } from "../../../page/components/PageBody";
28
28
  import {
29
29
  CalendarSelect,
30
30
  CalendarSelectOption,
31
- } from "../../../event/event-calendar/components/CalendarSelect";
31
+ } from "../../../../calendar/components/CalendarSelect";
32
32
  import { IframeEventVenueMap } from "../../../event/event-venue-map";
33
33
  import { VenueMapRef } from "../../../../events/event-venue-map/components/VenueMap";
34
34
  import { useCategoryVerification } from "../utils/useCategoryVerification";
@@ -363,3 +363,5 @@ export const CalendarStepsForm = forwardRef<
363
363
  );
364
364
  }
365
365
  );
366
+
367
+ CalendarStepsForm.displayName = "CalendarStepsForm";
@@ -6,7 +6,7 @@ import { Page } from "./Page";
6
6
  import { PageHeader } from "./components/PageHeader";
7
7
  import { PageBody } from "./components/PageBody";
8
8
  import { IframeEventCard } from "../event/event-card/IframeEventCard";
9
- import { CalendarSelect } from "../event/event-calendar/components/CalendarSelect";
9
+ import { CalendarSelect } from "../../calendar/components/CalendarSelect";
10
10
 
11
11
  export default {
12
12
  title: "Iframe/Page/Page",
@@ -219,7 +219,7 @@ export function Default() {
219
219
  <>
220
220
  <CalendarSelect
221
221
  options={[{ label: "Floor 1", value: "1" }]}
222
- value={"1"}
222
+ value="1"
223
223
  onChange={(chagedId: string) => console.log({ chagedId })}
224
224
  />
225
225
  </>
package/src/index.ts CHANGED
@@ -39,3 +39,4 @@ export * from "./radio-card";
39
39
  export * from "./image-radio-input";
40
40
  export * from "./sorting-select";
41
41
  export * from "./date-time-button";
42
+ export * from "./calendar";
@@ -7,6 +7,9 @@ import {
7
7
  SNIPPET_TYPE_VENUE_MAP,
8
8
  } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
9
9
  import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
10
+ import { DateTime } from "luxon";
11
+ import { Calendar, defaultStartDay } from "../../../calendar";
12
+ import { getMonthCalendarDates } from "../../../calendar/utils";
10
13
  import { IframeEventCard } from "../../../iframe/event/event-card";
11
14
  import { SettingButton } from "../settings";
12
15
  import {
@@ -24,7 +27,6 @@ import {
24
27
  } from "../../../iframe";
25
28
  import { NumberInput } from "../../../iframe/order-process/components/CategoryProduct/components/NumberInput";
26
29
  import { SnippetTemplateContext } from "../context/snippetTemplate";
27
- import { EventCalendar } from "../../../iframe/event/event-calendar";
28
30
 
29
31
  const DEFAULT_IMAGE =
30
32
  "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80";
@@ -52,6 +54,10 @@ export function Preview({
52
54
  onSettingClick();
53
55
  };
54
56
 
57
+ const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay);
58
+ const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
59
+ const calendarDates = getMonthCalendarDates(currentDate);
60
+
55
61
  return (
56
62
  <div className="w-100 h-100 snippet-template-preview">
57
63
  <Page
@@ -196,7 +202,13 @@ export function Preview({
196
202
  className="mt-3 m-0"
197
203
  containerClassName="mt-5 pt-5"
198
204
  >
199
- <EventCalendar />
205
+ <Calendar
206
+ currentDate={currentDate}
207
+ setCurrentDate={setCurrentDate}
208
+ selectedDate={selectedDate}
209
+ setSelectedDate={setSelectedDate}
210
+ calendarDates={calendarDates}
211
+ />
200
212
  </SettingButton>
201
213
  </div>
202
214
  <div className="pt-4">
@@ -1,7 +0,0 @@
1
- import { ReactElement } from "react";
2
- import { CalendarBaseProps } from "./types";
3
- export type EventCalendarProps = CalendarBaseProps & {
4
- fromPrice?: string | ReactElement | null;
5
- };
6
- export declare const EventCalendar: ({ disabledDates, isLoading, fromPrice, }: EventCalendarProps) => JSX.Element;
7
- //# sourceMappingURL=EventCalendar.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"EventCalendar.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/event-calendar/EventCalendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACnD,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,6CAIvB,kBAAkB,gBAapB,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("react"),t=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,r=require("./components/CalendarButtons/CalendarButtons.js"),n=require("./components/CalendarDates/CalendarDates.js");exports.EventCalendar=function(e){var a=e.disabledDates,s=void 0===a?[]:a,d=e.isLoading,i=void 0!==d&&d,l=e.fromPrice;return t.createElement("div",{className:"calendar-wrapper"},t.createElement("div",{className:"calendar"},t.createElement(r.CalendarButtons,{disabledDates:s,isLoading:i}),t.createElement(n.CalendarDates,{disabledDates:s,isLoading:i,fromPrice:l})))};
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { CalendarBaseProps } from "../../types";
3
- type CalendarButtonsProps = CalendarBaseProps;
4
- export declare const CalendarButtons: ({ disabledDates, isLoading, }: CalendarButtonsProps) => JSX.Element;
5
- export {};
6
- //# sourceMappingURL=CalendarButtons.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarButtons.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarButtons/CalendarButtons.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,KAAK,oBAAoB,GAAG,iBAAiB,CAAC;AAE9C,eAAO,MAAM,eAAe,kCAGzB,oBAAoB,gBAoGtB,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),r=require("react-bootstrap"),l=require("lodash"),s=require("@licklist/plugins/dist/context/event/EventCalendarContext"),i=require("../../../../../assets/iframe/selectArrow.svg.js"),o=require("../CalendarSelect/CalendarSelect.js"),c=require("../../utils/index.js");exports.CalendarButtons=function(e){var u=e.disabledDates,d=void 0===u?[]:u,m=e.isLoading,v=void 0!==m&&m,b=t.useContext(s.EventCalendarContext),C=b.initialDate,E=b.currentDate,p=b.canMoveBack,f=b.onSelectPreviousMonth,y=b.onSelectNextMonth,D=b.setCurrentDate,N=b.setSelectedDate,x=n.useTranslation("Design").t,M=t.useMemo((function(){return l.range(C.year,C.year+5,1).map((function(e){return{label:String(e),value:e}}))}),[C]);return a.createElement("div",null,a.createElement("div",{className:"calendar-top-buttons"},a.createElement(r.Button,{variant:"outline-secondary",className:"mr-4",size:"sm",onClick:function(){D(C),c.isSelectedDateDisabled(C,d)||N(C)},disabled:v},x("today")),a.createElement(r.Button,{variant:"outline-secondary",size:"sm",onClick:function(){var e=C.set({day:C.day+1});D(e),c.isSelectedDateDisabled(e,d)||N(e)},disabled:v},x("tomorrow"))),a.createElement("hr",null),a.createElement("div",{className:"calendar-buttons"},a.createElement("div",{className:"buttons-wrapper"},a.createElement(r.Button,{className:"calendar-button left-button",onClick:f,disabled:!p,variant:"link"},a.createElement(i.ReactComponent,null)),a.createElement("div",{className:"month-title"},E.toFormat("MMMM")),a.createElement(r.Button,{className:"calendar-button",onClick:y,variant:"link"},a.createElement(i.ReactComponent,null))),a.createElement(o.CalendarSelect,{options:M,onChange:function(e){var t=Number(e),a=E.set({year:t});D(a<=C?C:a)},value:E.year,className:"ml-4"})))};
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarButtons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarDate.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarDate/CalendarDate.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,QAAQ,CAAC;IACtB,WAAW,EAAE,QAAQ,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,eAAe,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,YAAY,wFAOtB,iBAAiB,gBA6BnB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarDate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,7 +0,0 @@
1
- import { ReactElement } from "react";
2
- import { CalendarBaseProps } from "../../types";
3
- export type CalendarDatesProps = CalendarBaseProps & {
4
- fromPrice?: string | ReactElement | null;
5
- };
6
- export declare const CalendarDates: ({ disabledDates, isLoading, fromPrice, }: CalendarDatesProps) => JSX.Element;
7
- //# sourceMappingURL=CalendarDates.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarDates.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarDates/CalendarDates.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACnD,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,6CAIvB,kBAAkB,gBAgDpB,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("@licklist/plugins/dist/context/event/EventCalendarContext"),n=require("../../utils/index.js"),d=require("../CalendarWeekdays/CalendarWeekdays.js"),i=require("../CalendarDate/CalendarDate.js");exports.CalendarDates=function(e){var s=e.disabledDates,u=void 0===s?[]:s,c=e.isLoading,o=void 0!==c&&c,v=e.fromPrice,D=t.useContext(l.EventCalendarContext),f=D.calendarDates,C=D.initialDate,m=D.selectedDate,p=D.setSelectedDate,_=t.useMemo((function(){var e,t,r=null!==(t=null===(e=f[0])||void 0===e?void 0:e.weekday)&&void 0!==t?t:0;if(1===r)return f;for(var l=[];r>1;)l.push(null),r-=1;return a.__spreadArray(a.__spreadArray([],a.__read(l),!1),a.__read(f),!1)}),[f]);return r.createElement("div",{className:"calendar-dates-wrapper"},r.createElement(d.CalendarWeekdays,null),r.createElement("div",{className:"calendar-dates"},_.map((function(e){if(null===e)return r.createElement("div",null);var a=o||n.isSelectedDateDisabled(e,u);return r.createElement(i.CalendarDate,{key:+e,currentDate:e,initialDate:C,selectedDate:m,setSelectedDate:p,isDisabled:a,fromPrice:v})}))))};
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarDates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarSelect.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarSelect/CalendarSelect.tsx"],"names":[],"mappings":";AAKA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,6CAKxB,mBAAmB,gBA+BrB,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react"),t=e(a),r=require("react-bootstrap"),n=e(require("clsx")),l=require("../../../../page/components/PageBody/constants.js");exports.CalendarSelect=function(e){var o=e.options,c=e.onChange,s=e.value,u=e.className,i=a.useRef(null);return t.createElement("div",{className:n("calendar-select-wrapper",u),id:l.PAGE_CALENDAR_SELECT_WRAPPER},t.createElement(r.Form.Control,{as:"select",onChange:function(e){var a=e.target.value;c&&c(a)},className:"calendar-select",value:s,ref:i},o.map((function(e){var a=e.label,r=e.value;return t.createElement("option",{value:r,key:a||r},a)}))))};
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarWeekdays.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarWeekdays/CalendarWeekdays.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,gBAAgB,mBAc5B,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-calendar/components/CalendarWeekdays/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
@@ -1,4 +0,0 @@
1
- export { EventCalendar } from "./EventCalendar";
2
- export { CalendarSelect } from "./components/CalendarSelect";
3
- export type { CalendarSelectProps, CalendarSelectOption, } from "./components/CalendarSelect";
4
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/event-calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,6BAA6B,CAAC"}
@@ -1,6 +0,0 @@
1
- import { DateTime } from "luxon";
2
- export type CalendarBaseProps = {
3
- disabledDates?: DateTime[];
4
- isLoading?: boolean;
5
- };
6
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/event/event-calendar/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
@@ -1,3 +0,0 @@
1
- import { DateTime } from "luxon";
2
- export declare const isSelectedDateDisabled: (selectedDate: DateTime, disabledDates?: DateTime[]) => boolean;
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/event/event-calendar/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,eAAO,MAAM,sBAAsB,iBACnB,QAAQ,kBACP,QAAQ,EAAE,YAK1B,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("lodash/isEqual"))&&"object"==typeof e&&"default"in e?e.default:e;exports.isSelectedDateDisabled=function(e,o){return void 0===o&&(o=[]),!!o.find((function(o){return t(o.toObject(),e.toObject())}))};
@@ -1,36 +0,0 @@
1
- import React from "react";
2
- import { DateTime } from "luxon";
3
- import { Meta, Story } from "@storybook/react";
4
- import {
5
- EventCalendarProvider,
6
- getMonthCalendarDates,
7
- } from "@licklist/plugins/dist/context/event/EventCalendarContext";
8
- import { EventCalendar, EventCalendarProps } from "./EventCalendar";
9
-
10
- export default {
11
- title: "Iframe/Event/Calendar",
12
- component: EventCalendar,
13
- } as Meta;
14
-
15
- export const Default: Story<EventCalendarProps> = (args) => {
16
- return (
17
- <EventCalendarProvider getCalendarDates={getMonthCalendarDates}>
18
- <div style={{ backgroundColor: "white" }}>
19
- <EventCalendar {...args} />
20
- </div>
21
- </EventCalendarProvider>
22
- );
23
- };
24
-
25
- const now = DateTime.now().set({
26
- hour: 0,
27
- second: 0,
28
- millisecond: 0,
29
- minute: 0,
30
- });
31
-
32
- Default.args = {
33
- disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
34
- isLoading: false,
35
- fromPrice: "from £10",
36
- };
@@ -1,27 +0,0 @@
1
- import React, { ReactElement } from "react";
2
- import { CalendarButtons } from "./components/CalendarButtons";
3
- import { CalendarDates } from "./components/CalendarDates";
4
- import { CalendarBaseProps } from "./types";
5
-
6
- export type EventCalendarProps = CalendarBaseProps & {
7
- fromPrice?: string | ReactElement | null;
8
- };
9
-
10
- export const EventCalendar = ({
11
- disabledDates = [],
12
- isLoading = false,
13
- fromPrice,
14
- }: EventCalendarProps) => {
15
- return (
16
- <div className="calendar-wrapper">
17
- <div className="calendar">
18
- <CalendarButtons disabledDates={disabledDates} isLoading={isLoading} />
19
- <CalendarDates
20
- disabledDates={disabledDates}
21
- isLoading={isLoading}
22
- fromPrice={fromPrice}
23
- />
24
- </div>
25
- </div>
26
- );
27
- };
@@ -1,6 +0,0 @@
1
- export { EventCalendar } from "./EventCalendar";
2
- export { CalendarSelect } from "./components/CalendarSelect";
3
- export type {
4
- CalendarSelectProps,
5
- CalendarSelectOption,
6
- } from "./components/CalendarSelect";
@@ -1,6 +0,0 @@
1
- import { DateTime } from "luxon";
2
-
3
- export type CalendarBaseProps = {
4
- disabledDates?: DateTime[];
5
- isLoading?: boolean;
6
- };
@@ -1,11 +0,0 @@
1
- import { DateTime } from "luxon";
2
- import isEqual from "lodash/isEqual";
3
-
4
- export const isSelectedDateDisabled = (
5
- selectedDate: DateTime,
6
- disabledDates: DateTime[] = []
7
- ) => {
8
- return !!disabledDates.find((disabledDate) =>
9
- isEqual(disabledDate.toObject(), selectedDate.toObject())
10
- );
11
- };