@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.
- package/.vs/ProjectSettings.json +3 -3
- package/.vs/VSWorkspaceState.json +5 -5
- package/README.md +8 -8
- package/build/build-cjs/index.js +2 -4
- package/build/build-cjs/shared/utils/localization-util.d.ts +3 -0
- package/build/build-esm/index.js +2 -4
- package/build/build-esm/shared/utils/localization-util.d.ts +3 -0
- package/package.json +1 -1
- package/rollup.config.js +23 -23
- package/src/booking-product/components/age-select.tsx +35 -35
- package/src/booking-product/components/amount-input.tsx +78 -78
- package/src/booking-product/components/date-range-picker/calendar-day.tsx +58 -58
- package/src/booking-product/components/date-range-picker/calendar.tsx +178 -178
- package/src/booking-product/components/date-range-picker/index.tsx +196 -196
- package/src/booking-product/components/dates.tsx +136 -136
- package/src/booking-product/components/footer.tsx +69 -69
- package/src/booking-product/components/header.tsx +79 -79
- package/src/booking-product/components/icon.tsx +251 -251
- package/src/booking-product/components/rating.tsx +21 -21
- package/src/booking-product/components/rooms.tsx +199 -199
- package/src/booking-product/index.tsx +30 -30
- package/src/booking-product/settings-context.ts +14 -14
- package/src/booking-product/types.ts +28 -28
- package/src/booking-product/utils/api.ts +25 -25
- package/src/booking-product/utils/price.ts +28 -28
- package/src/booking-wizard/api-settings-slice.ts +24 -29
- package/src/booking-wizard/components/icon.tsx +508 -508
- package/src/booking-wizard/components/labeled-input.tsx +64 -64
- package/src/booking-wizard/components/labeled-select.tsx +69 -69
- package/src/booking-wizard/components/message.tsx +34 -34
- package/src/booking-wizard/components/multi-range-filter.tsx +113 -113
- package/src/booking-wizard/components/product-card.tsx +37 -37
- package/src/booking-wizard/components/step-indicator.tsx +51 -51
- package/src/booking-wizard/components/step-route.tsx +27 -27
- package/src/booking-wizard/declarations.d.ts +4 -4
- package/src/booking-wizard/features/booking/api.ts +49 -49
- package/src/booking-wizard/features/booking/booking-slice.ts +2 -0
- package/src/booking-wizard/features/booking/constants.ts +16 -16
- package/src/booking-wizard/features/error/error.tsx +78 -78
- package/src/booking-wizard/features/flight-options/flight-filter.tsx +432 -432
- package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +385 -385
- package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +229 -229
- package/src/booking-wizard/features/flight-options/flight-option.tsx +80 -80
- package/src/booking-wizard/features/flight-options/index.tsx +196 -196
- package/src/booking-wizard/features/price-details/price-details-api.ts +24 -24
- package/src/booking-wizard/features/price-details/price-details-slice.ts +178 -178
- package/src/booking-wizard/features/price-details/util.ts +155 -155
- package/src/booking-wizard/features/product-options/no-options.tsx +21 -21
- package/src/booking-wizard/features/product-options/none-option.tsx +121 -121
- package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +64 -64
- package/src/booking-wizard/features/product-options/option-booking-group.tsx +216 -216
- package/src/booking-wizard/features/product-options/option-item.tsx +321 -321
- package/src/booking-wizard/features/product-options/option-pax-card.tsx +201 -201
- package/src/booking-wizard/features/product-options/option-pax-group.tsx +175 -175
- package/src/booking-wizard/features/product-options/option-unit-group.tsx +198 -198
- package/src/booking-wizard/features/product-options/option-units-card.tsx +185 -185
- package/src/booking-wizard/features/room-options/index.tsx +187 -187
- package/src/booking-wizard/features/room-options/room-utils.ts +190 -190
- package/src/booking-wizard/features/room-options/room.tsx +161 -161
- package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -75
- package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
- package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +69 -69
- package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +63 -63
- package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +66 -66
- package/src/booking-wizard/features/summary/summary-slice.ts +28 -28
- package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
- package/src/booking-wizard/index.tsx +36 -36
- package/src/booking-wizard/store.ts +31 -31
- package/src/index.ts +4 -4
- package/src/shared/components/loader.tsx +16 -16
- package/src/shared/types.ts +4 -4
- package/src/shared/utils/class-util.ts +9 -9
- package/src/shared/utils/localization-util.ts +62 -62
- package/src/shared/utils/query-string-util.ts +119 -119
- package/styles/booking-product-variables.scss +394 -394
- package/styles/booking-product.scss +446 -446
- package/styles/components/_animations.scss +39 -39
- package/styles/components/_base.scss +107 -107
- package/styles/components/_button.scss +238 -238
- package/styles/components/_checkbox.scss +219 -219
- package/styles/components/_cta.scss +208 -208
- package/styles/components/_date-list.scss +41 -41
- package/styles/components/_date-range-picker.scss +225 -225
- package/styles/components/_decrement-increment.scss +35 -35
- package/styles/components/_flight-option.scss +1429 -1429
- package/styles/components/_info-message.scss +71 -71
- package/styles/components/_input.scss +25 -25
- package/styles/components/_list.scss +187 -187
- package/styles/components/_loader.scss +72 -72
- package/styles/components/_mixins.scss +550 -550
- package/styles/components/_placeholders.scss +166 -166
- package/styles/components/_pricing-summary.scss +155 -155
- package/styles/components/_qsm.scss +17 -17
- package/styles/components/_radiobutton.scss +170 -170
- package/styles/components/_select-wrapper.scss +80 -80
- package/styles/components/_spinner.scss +29 -29
- package/styles/components/_table.scss +81 -81
- package/styles/components/_tree.scss +530 -530
- package/styles/components/_typeahead.scss +281 -281
- package/styles/components/_variables.scss +89 -89
- package/tsconfig.json +24 -24
package/.vs/ProjectSettings.json
CHANGED
|
@@ -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`
|
package/build/build-cjs/index.js
CHANGED
|
@@ -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;
|
package/build/build-esm/index.js
CHANGED
|
@@ -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
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;
|