@qite/tide-booking-component 1.4.4 → 1.4.5

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 (101) hide show
  1. package/.vs/ProjectSettings.json +3 -3
  2. package/.vs/VSWorkspaceState.json +5 -5
  3. package/README.md +8 -8
  4. package/build/build-cjs/index.js +2 -4
  5. package/build/build-cjs/shared/utils/localization-util.d.ts +3 -0
  6. package/build/build-esm/index.js +2 -4
  7. package/build/build-esm/shared/utils/localization-util.d.ts +3 -0
  8. package/package.json +1 -1
  9. package/rollup.config.js +23 -23
  10. package/src/booking-product/components/age-select.tsx +35 -35
  11. package/src/booking-product/components/amount-input.tsx +78 -78
  12. package/src/booking-product/components/date-range-picker/calendar-day.tsx +58 -58
  13. package/src/booking-product/components/date-range-picker/calendar.tsx +178 -178
  14. package/src/booking-product/components/date-range-picker/index.tsx +196 -196
  15. package/src/booking-product/components/dates.tsx +136 -136
  16. package/src/booking-product/components/footer.tsx +69 -69
  17. package/src/booking-product/components/header.tsx +79 -79
  18. package/src/booking-product/components/icon.tsx +251 -251
  19. package/src/booking-product/components/rating.tsx +21 -21
  20. package/src/booking-product/components/rooms.tsx +199 -199
  21. package/src/booking-product/index.tsx +30 -30
  22. package/src/booking-product/settings-context.ts +14 -14
  23. package/src/booking-product/types.ts +28 -28
  24. package/src/booking-product/utils/api.ts +25 -25
  25. package/src/booking-product/utils/price.ts +28 -28
  26. package/src/booking-wizard/api-settings-slice.ts +24 -29
  27. package/src/booking-wizard/components/icon.tsx +508 -508
  28. package/src/booking-wizard/components/labeled-input.tsx +64 -64
  29. package/src/booking-wizard/components/labeled-select.tsx +69 -69
  30. package/src/booking-wizard/components/message.tsx +34 -34
  31. package/src/booking-wizard/components/multi-range-filter.tsx +113 -113
  32. package/src/booking-wizard/components/product-card.tsx +37 -37
  33. package/src/booking-wizard/components/step-indicator.tsx +51 -51
  34. package/src/booking-wizard/components/step-route.tsx +27 -27
  35. package/src/booking-wizard/declarations.d.ts +4 -4
  36. package/src/booking-wizard/features/booking/api.ts +49 -49
  37. package/src/booking-wizard/features/booking/booking-slice.ts +2 -0
  38. package/src/booking-wizard/features/booking/constants.ts +16 -16
  39. package/src/booking-wizard/features/error/error.tsx +78 -78
  40. package/src/booking-wizard/features/flight-options/flight-filter.tsx +432 -432
  41. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +385 -385
  42. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +229 -229
  43. package/src/booking-wizard/features/flight-options/flight-option.tsx +80 -80
  44. package/src/booking-wizard/features/flight-options/index.tsx +196 -196
  45. package/src/booking-wizard/features/price-details/price-details-api.ts +24 -24
  46. package/src/booking-wizard/features/price-details/price-details-slice.ts +178 -178
  47. package/src/booking-wizard/features/price-details/util.ts +155 -155
  48. package/src/booking-wizard/features/product-options/no-options.tsx +21 -21
  49. package/src/booking-wizard/features/product-options/none-option.tsx +121 -121
  50. package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +64 -64
  51. package/src/booking-wizard/features/product-options/option-booking-group.tsx +216 -216
  52. package/src/booking-wizard/features/product-options/option-item.tsx +321 -321
  53. package/src/booking-wizard/features/product-options/option-pax-card.tsx +201 -201
  54. package/src/booking-wizard/features/product-options/option-pax-group.tsx +175 -175
  55. package/src/booking-wizard/features/product-options/option-unit-group.tsx +198 -198
  56. package/src/booking-wizard/features/product-options/option-units-card.tsx +185 -185
  57. package/src/booking-wizard/features/room-options/index.tsx +187 -187
  58. package/src/booking-wizard/features/room-options/room-utils.ts +190 -190
  59. package/src/booking-wizard/features/room-options/room.tsx +161 -161
  60. package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -75
  61. package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
  62. package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +69 -69
  63. package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +63 -63
  64. package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +66 -66
  65. package/src/booking-wizard/features/summary/summary-slice.ts +28 -28
  66. package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
  67. package/src/booking-wizard/index.tsx +36 -36
  68. package/src/booking-wizard/store.ts +31 -31
  69. package/src/index.ts +4 -4
  70. package/src/shared/components/loader.tsx +16 -16
  71. package/src/shared/types.ts +4 -4
  72. package/src/shared/utils/class-util.ts +9 -9
  73. package/src/shared/utils/localization-util.ts +62 -62
  74. package/src/shared/utils/query-string-util.ts +119 -119
  75. package/styles/booking-product-variables.scss +394 -394
  76. package/styles/booking-product.scss +446 -446
  77. package/styles/components/_animations.scss +39 -39
  78. package/styles/components/_base.scss +107 -107
  79. package/styles/components/_button.scss +238 -238
  80. package/styles/components/_checkbox.scss +219 -219
  81. package/styles/components/_cta.scss +208 -208
  82. package/styles/components/_date-list.scss +41 -41
  83. package/styles/components/_date-range-picker.scss +225 -225
  84. package/styles/components/_decrement-increment.scss +35 -35
  85. package/styles/components/_flight-option.scss +1429 -1429
  86. package/styles/components/_info-message.scss +71 -71
  87. package/styles/components/_input.scss +25 -25
  88. package/styles/components/_list.scss +187 -187
  89. package/styles/components/_loader.scss +72 -72
  90. package/styles/components/_mixins.scss +550 -550
  91. package/styles/components/_placeholders.scss +166 -166
  92. package/styles/components/_pricing-summary.scss +155 -155
  93. package/styles/components/_qsm.scss +17 -17
  94. package/styles/components/_radiobutton.scss +170 -170
  95. package/styles/components/_select-wrapper.scss +80 -80
  96. package/styles/components/_spinner.scss +29 -29
  97. package/styles/components/_table.scss +81 -81
  98. package/styles/components/_tree.scss +530 -530
  99. package/styles/components/_typeahead.scss +281 -281
  100. package/styles/components/_variables.scss +89 -89
  101. package/tsconfig.json +24 -24
@@ -1,3 +1,3 @@
1
- {
2
- "CurrentProjectSetting": null
3
- }
1
+ {
2
+ "CurrentProjectSetting": null
3
+ }
@@ -1,5 +1,5 @@
1
- {
2
- "ExpandedNodes": [""],
3
- "SelectedNode": "\\D:\\2.0. Qite\\Tide-Booking-Component\\tide-booking-component",
4
- "PreviewInSolutionExplorer": false
5
- }
1
+ {
2
+ "ExpandedNodes": [""],
3
+ "SelectedNode": "\\D:\\2.0. Qite\\Tide-Booking-Component\\tide-booking-component",
4
+ "PreviewInSolutionExplorer": false
5
+ }
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # README
2
-
3
- This is the unified Tide Booking Component.
4
-
5
- ## Remarks
6
-
7
- Do not forget to sync React versions when you're doing local changes and when you try to test them in a local React project (check https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).
8
- If using the playground, after installing it's node modules execute the following command in the root folder `npm link ./playground/node_modules/react`
1
+ # README
2
+
3
+ This is the unified Tide Booking Component.
4
+
5
+ ## Remarks
6
+
7
+ Do not forget to sync React versions when you're doing local changes and when you try to test them in a local React project (check https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).
8
+ If using the playground, after installing it's node modules execute the following command in the root folder `npm link ./playground/node_modules/react`
@@ -10385,12 +10385,14 @@ var fetchPackageDetails = toolkit.createAsyncThunk("booking/details", function (
10385
10385
  flightCode: bookingAttributes.flight.outwardCode,
10386
10386
  startDateTime: bookingAttributes.flight.outwardDepartureDate,
10387
10387
  endDateTime: bookingAttributes.flight.outwardArrivalDate,
10388
+ flightNumbers: bookingAttributes.flight.outwardNumbers,
10388
10389
  };
10389
10390
  if (bookingAttributes.flight.returnCode) {
10390
10391
  returnFlight = {
10391
10392
  flightCode: bookingAttributes.flight.returnCode,
10392
10393
  startDateTime: bookingAttributes.flight.returnDepartureDate,
10393
10394
  endDateTime: bookingAttributes.flight.returnArrivalDate,
10395
+ flightNumbers: bookingAttributes.flight.returnNumbers
10394
10396
  };
10395
10397
  }
10396
10398
  }
@@ -10862,10 +10864,6 @@ var StepRoute = function (_a) {
10862
10864
  };
10863
10865
 
10864
10866
  var _a;
10865
- // const initialState: ApiSettingsState = {
10866
- // apiUrl: "https://tide-joker3287-acceptance.tidesoftware.be",
10867
- // apiKey: "e9b95d79-de4c-41d6-ab7e-3dd429873058",
10868
- // };
10869
10867
  var initialState$1 = {
10870
10868
  apiUrl: "",
10871
10869
  apiKey: "",
@@ -166,8 +166,11 @@ export declare const getTranslations: (language: string) => {
166
166
  CHOOSE_AGENT_PLACEHOLDER: string;
167
167
  VALIDATION: {
168
168
  TRAVELER_X_FIELD: string;
169
+ SINGLE_ROOM_TRAVELER_X_FIELD: string;
169
170
  TRAVELER_X_IS_NO_ADULT: string;
171
+ SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT: string;
170
172
  TRAVELER_X_IS_NO_CHILD: string;
173
+ SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD: string;
171
174
  NO_MAIN_BOOKER_SELECTED: string;
172
175
  MAIN_BOOKER_FIELD: string;
173
176
  MAIN_BOOKER_EMAIL_IS_INVALID: string;
@@ -10374,12 +10374,14 @@ var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
10374
10374
  flightCode: bookingAttributes.flight.outwardCode,
10375
10375
  startDateTime: bookingAttributes.flight.outwardDepartureDate,
10376
10376
  endDateTime: bookingAttributes.flight.outwardArrivalDate,
10377
+ flightNumbers: bookingAttributes.flight.outwardNumbers,
10377
10378
  };
10378
10379
  if (bookingAttributes.flight.returnCode) {
10379
10380
  returnFlight = {
10380
10381
  flightCode: bookingAttributes.flight.returnCode,
10381
10382
  startDateTime: bookingAttributes.flight.returnDepartureDate,
10382
10383
  endDateTime: bookingAttributes.flight.returnArrivalDate,
10384
+ flightNumbers: bookingAttributes.flight.returnNumbers
10383
10385
  };
10384
10386
  }
10385
10387
  }
@@ -10851,10 +10853,6 @@ var StepRoute = function (_a) {
10851
10853
  };
10852
10854
 
10853
10855
  var _a;
10854
- // const initialState: ApiSettingsState = {
10855
- // apiUrl: "https://tide-joker3287-acceptance.tidesoftware.be",
10856
- // apiKey: "e9b95d79-de4c-41d6-ab7e-3dd429873058",
10857
- // };
10858
10856
  var initialState$1 = {
10859
10857
  apiUrl: "",
10860
10858
  apiKey: "",
@@ -166,8 +166,11 @@ export declare const getTranslations: (language: string) => {
166
166
  CHOOSE_AGENT_PLACEHOLDER: string;
167
167
  VALIDATION: {
168
168
  TRAVELER_X_FIELD: string;
169
+ SINGLE_ROOM_TRAVELER_X_FIELD: string;
169
170
  TRAVELER_X_IS_NO_ADULT: string;
171
+ SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT: string;
170
172
  TRAVELER_X_IS_NO_CHILD: string;
173
+ SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD: string;
171
174
  NO_MAIN_BOOKER_SELECTED: string;
172
175
  MAIN_BOOKER_FIELD: string;
173
176
  MAIN_BOOKER_EMAIL_IS_INVALID: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qite/tide-booking-component",
3
- "version": "1.4.4",
3
+ "version": "1.4.5",
4
4
  "description": "React Booking wizard & Booking product component for Tide",
5
5
  "main": "build/build-cjs/index.js",
6
6
  "module": "build/build-esm/index.js",
package/rollup.config.js CHANGED
@@ -1,23 +1,23 @@
1
- import commonjs from "@rollup/plugin-commonjs";
2
- import del from "rollup-plugin-delete";
3
- import json from "@rollup/plugin-json";
4
- import nodeResolve from "@rollup/plugin-node-resolve";
5
- import packageJson from "./package.json";
6
- import peerDepsExternal from "rollup-plugin-peer-deps-external";
7
- import typescript from "rollup-plugin-typescript2";
8
-
9
- export default {
10
- input: "src/index.ts",
11
- output: [
12
- { file: packageJson.main, format: "cjs", banner: "/* eslint-disable */" },
13
- { file: packageJson.module, format: "esm", banner: "/* eslint-disable */" },
14
- ],
15
- plugins: [
16
- peerDepsExternal(),
17
- json(),
18
- nodeResolve(),
19
- commonjs(),
20
- typescript(),
21
- del({ targets: ["build/*"] }),
22
- ],
23
- };
1
+ import commonjs from "@rollup/plugin-commonjs";
2
+ import del from "rollup-plugin-delete";
3
+ import json from "@rollup/plugin-json";
4
+ import nodeResolve from "@rollup/plugin-node-resolve";
5
+ import packageJson from "./package.json";
6
+ import peerDepsExternal from "rollup-plugin-peer-deps-external";
7
+ import typescript from "rollup-plugin-typescript2";
8
+
9
+ export default {
10
+ input: "src/index.ts",
11
+ output: [
12
+ { file: packageJson.main, format: "cjs", banner: "/* eslint-disable */" },
13
+ { file: packageJson.module, format: "esm", banner: "/* eslint-disable */" },
14
+ ],
15
+ plugins: [
16
+ peerDepsExternal(),
17
+ json(),
18
+ nodeResolve(),
19
+ commonjs(),
20
+ typescript(),
21
+ del({ targets: ["build/*"] }),
22
+ ],
23
+ };
@@ -1,35 +1,35 @@
1
- import { range } from "lodash";
2
- import React, { useContext } from "react";
3
- import { getTranslations } from "../../shared/utils/localization-util";
4
- import SettingsContext from "../settings-context";
5
-
6
- interface AgeSelectProps {
7
- value?: number;
8
- disabled?: boolean;
9
- onChange?: (value: number) => void;
10
- }
11
-
12
- const AgeSelect: React.FC<AgeSelectProps> = ({ value, disabled, onChange }) => {
13
- const { language } = useContext(SettingsContext);
14
- const translations = getTranslations(language);
15
-
16
- const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
17
- if (onChange) {
18
- onChange(event.target.selectedIndex);
19
- }
20
- };
21
-
22
- return (
23
- <div className="dropdown dropdown--small">
24
- <select onChange={handleChange} value={value ?? 0} disabled={disabled}>
25
- {range(0, 18).map((age) => (
26
- <option key={age} value={age}>
27
- {age} {translations.PRODUCT.YEAR}
28
- </option>
29
- ))}
30
- </select>
31
- </div>
32
- );
33
- };
34
-
35
- export default AgeSelect;
1
+ import { range } from "lodash";
2
+ import React, { useContext } from "react";
3
+ import { getTranslations } from "../../shared/utils/localization-util";
4
+ import SettingsContext from "../settings-context";
5
+
6
+ interface AgeSelectProps {
7
+ value?: number;
8
+ disabled?: boolean;
9
+ onChange?: (value: number) => void;
10
+ }
11
+
12
+ const AgeSelect: React.FC<AgeSelectProps> = ({ value, disabled, onChange }) => {
13
+ const { language } = useContext(SettingsContext);
14
+ const translations = getTranslations(language);
15
+
16
+ const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
17
+ if (onChange) {
18
+ onChange(event.target.selectedIndex);
19
+ }
20
+ };
21
+
22
+ return (
23
+ <div className="dropdown dropdown--small">
24
+ <select onChange={handleChange} value={value ?? 0} disabled={disabled}>
25
+ {range(0, 18).map((age) => (
26
+ <option key={age} value={age}>
27
+ {age} {translations.PRODUCT.YEAR}
28
+ </option>
29
+ ))}
30
+ </select>
31
+ </div>
32
+ );
33
+ };
34
+
35
+ export default AgeSelect;
@@ -1,78 +1,78 @@
1
- import React, { useContext } from "react";
2
- import { getTranslations } from "../../shared/utils/localization-util";
3
- import SettingsContext from "../settings-context";
4
- import { buildClassName } from "../../shared/utils/class-util";
5
- import Icon from "./icon";
6
-
7
- interface AmountInputProps {
8
- label: string;
9
- value: number;
10
- disabled?: boolean;
11
- min?: number;
12
- onChange?: (value: number) => void;
13
- }
14
-
15
- const AmountInput: React.FC<AmountInputProps> = ({
16
- label,
17
- value,
18
- disabled,
19
- min,
20
- onChange,
21
- }) => {
22
- const { language } = useContext(SettingsContext);
23
- const translations = getTranslations(language);
24
-
25
- const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
26
- event
27
- ) => {
28
- if (onChange) {
29
- onChange(value + 1);
30
- }
31
- };
32
-
33
- const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
34
- event
35
- ) => {
36
- if (onChange) {
37
- onChange(Math.max(value - 1, min ?? 0));
38
- }
39
- };
40
-
41
- return (
42
- <div
43
- className={buildClassName([
44
- "decrement-increment",
45
- disabled && "decrement-increment--disabled",
46
- ])}
47
- >
48
- <label className="decrement-increment__label">{label}</label>
49
- <div className="decrement-increment__ui">
50
- {!disabled && (
51
- <button
52
- type="button"
53
- className="button button--decrement"
54
- title={translations.INPUT.DECREASE}
55
- disabled={disabled}
56
- onClick={handleDecreaseClick}
57
- >
58
- <Icon name="ui-min" />
59
- </button>
60
- )}
61
- <span>{value}</span>
62
- {!disabled && (
63
- <button
64
- type="button"
65
- className="button button--increment"
66
- title={translations.INPUT.INCREASE}
67
- disabled={disabled}
68
- onClick={handleIncreaseClick}
69
- >
70
- <Icon name="ui-plus" />
71
- </button>
72
- )}
73
- </div>
74
- </div>
75
- );
76
- };
77
-
78
- export default AmountInput;
1
+ import React, { useContext } from "react";
2
+ import { getTranslations } from "../../shared/utils/localization-util";
3
+ import SettingsContext from "../settings-context";
4
+ import { buildClassName } from "../../shared/utils/class-util";
5
+ import Icon from "./icon";
6
+
7
+ interface AmountInputProps {
8
+ label: string;
9
+ value: number;
10
+ disabled?: boolean;
11
+ min?: number;
12
+ onChange?: (value: number) => void;
13
+ }
14
+
15
+ const AmountInput: React.FC<AmountInputProps> = ({
16
+ label,
17
+ value,
18
+ disabled,
19
+ min,
20
+ onChange,
21
+ }) => {
22
+ const { language } = useContext(SettingsContext);
23
+ const translations = getTranslations(language);
24
+
25
+ const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
26
+ event
27
+ ) => {
28
+ if (onChange) {
29
+ onChange(value + 1);
30
+ }
31
+ };
32
+
33
+ const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
34
+ event
35
+ ) => {
36
+ if (onChange) {
37
+ onChange(Math.max(value - 1, min ?? 0));
38
+ }
39
+ };
40
+
41
+ return (
42
+ <div
43
+ className={buildClassName([
44
+ "decrement-increment",
45
+ disabled && "decrement-increment--disabled",
46
+ ])}
47
+ >
48
+ <label className="decrement-increment__label">{label}</label>
49
+ <div className="decrement-increment__ui">
50
+ {!disabled && (
51
+ <button
52
+ type="button"
53
+ className="button button--decrement"
54
+ title={translations.INPUT.DECREASE}
55
+ disabled={disabled}
56
+ onClick={handleDecreaseClick}
57
+ >
58
+ <Icon name="ui-min" />
59
+ </button>
60
+ )}
61
+ <span>{value}</span>
62
+ {!disabled && (
63
+ <button
64
+ type="button"
65
+ className="button button--increment"
66
+ title={translations.INPUT.INCREASE}
67
+ disabled={disabled}
68
+ onClick={handleIncreaseClick}
69
+ >
70
+ <Icon name="ui-plus" />
71
+ </button>
72
+ )}
73
+ </div>
74
+ </div>
75
+ );
76
+ };
77
+
78
+ export default AmountInput;
@@ -1,58 +1,58 @@
1
- import React from "react";
2
- import { getDate, isToday } from "date-fns";
3
- import { buildClassName } from "../../../shared/utils/class-util";
4
-
5
- interface CalendarDayProps {
6
- day: Date;
7
- isSelected: boolean;
8
- isDisabled: boolean;
9
- isOutsideMonth: boolean;
10
- extraClassNames?: string[];
11
- onClick: (date: Date) => void;
12
- onMouseOver: (date: Date) => void;
13
- }
14
-
15
- const CalendarDay: React.FC<CalendarDayProps> = ({
16
- day,
17
- isSelected,
18
- isDisabled,
19
- isOutsideMonth,
20
- extraClassNames = [],
21
- children,
22
- onClick,
23
- onMouseOver,
24
- }) => {
25
- const handleClick = () => {
26
- if (onClick && !isDisabled) {
27
- onClick(day);
28
- }
29
- };
30
-
31
- const handleMouseOver = () => {
32
- if (onMouseOver) {
33
- onMouseOver(day);
34
- }
35
- };
36
-
37
- const classNames = buildClassName([
38
- "calendar__day",
39
- isToday(day) && "calendar__day--today",
40
- isDisabled && "calendar__day--disabled",
41
- isOutsideMonth && "calendar__day--outside-month",
42
- isSelected && "calendar__day--selected",
43
- ...extraClassNames,
44
- ]);
45
-
46
- return (
47
- <div
48
- className={classNames}
49
- onClick={handleClick}
50
- onMouseOver={handleMouseOver}
51
- >
52
- {getDate(day).toString().padStart(2, "0")}
53
- {children}
54
- </div>
55
- );
56
- };
57
-
58
- export default CalendarDay;
1
+ import React from "react";
2
+ import { getDate, isToday } from "date-fns";
3
+ import { buildClassName } from "../../../shared/utils/class-util";
4
+
5
+ interface CalendarDayProps {
6
+ day: Date;
7
+ isSelected: boolean;
8
+ isDisabled: boolean;
9
+ isOutsideMonth: boolean;
10
+ extraClassNames?: string[];
11
+ onClick: (date: Date) => void;
12
+ onMouseOver: (date: Date) => void;
13
+ }
14
+
15
+ const CalendarDay: React.FC<CalendarDayProps> = ({
16
+ day,
17
+ isSelected,
18
+ isDisabled,
19
+ isOutsideMonth,
20
+ extraClassNames = [],
21
+ children,
22
+ onClick,
23
+ onMouseOver,
24
+ }) => {
25
+ const handleClick = () => {
26
+ if (onClick && !isDisabled) {
27
+ onClick(day);
28
+ }
29
+ };
30
+
31
+ const handleMouseOver = () => {
32
+ if (onMouseOver) {
33
+ onMouseOver(day);
34
+ }
35
+ };
36
+
37
+ const classNames = buildClassName([
38
+ "calendar__day",
39
+ isToday(day) && "calendar__day--today",
40
+ isDisabled && "calendar__day--disabled",
41
+ isOutsideMonth && "calendar__day--outside-month",
42
+ isSelected && "calendar__day--selected",
43
+ ...extraClassNames,
44
+ ]);
45
+
46
+ return (
47
+ <div
48
+ className={classNames}
49
+ onClick={handleClick}
50
+ onMouseOver={handleMouseOver}
51
+ >
52
+ {getDate(day).toString().padStart(2, "0")}
53
+ {children}
54
+ </div>
55
+ );
56
+ };
57
+
58
+ export default CalendarDay;