@qite/tide-booking-component 1.2.5 → 1.3.0
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/booking-wizard/components/print-offer-button.d.ts +17 -0
- package/build/build-cjs/booking-wizard/types.d.ts +7 -0
- package/build/build-cjs/booking-wizard/use-offer-printer.d.ts +13 -0
- package/build/build-cjs/index.js +223 -72
- package/build/build-cjs/shared/utils/localization-util.d.ts +5 -0
- package/build/build-cjs/shared/utils/tide-api-utils.d.ts +1 -0
- package/build/build-esm/booking-wizard/components/print-offer-button.d.ts +17 -0
- package/build/build-esm/booking-wizard/types.d.ts +7 -0
- package/build/build-esm/booking-wizard/use-offer-printer.d.ts +13 -0
- package/build/build-esm/index.js +224 -73
- package/build/build-esm/shared/utils/localization-util.d.ts +5 -0
- package/build/build-esm/shared/utils/tide-api-utils.d.ts +1 -0
- package/package.json +75 -75
- 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/product.tsx +314 -314
- package/src/booking-product/components/rating.tsx +21 -21
- package/src/booking-product/components/rooms.tsx +195 -195
- 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 +29 -29
- package/src/booking-wizard/api-settings-slice.ts +24 -24
- 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/print-offer-button.tsx +66 -0
- 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-self-contained.tsx +384 -384
- package/src/booking-wizard/features/booking/booking-slice.ts +662 -662
- package/src/booking-wizard/features/booking/booking.tsx +356 -356
- package/src/booking-wizard/features/booking/constants.ts +16 -16
- package/src/booking-wizard/features/booking/selectors.ts +441 -441
- package/src/booking-wizard/features/confirmation/confirmation.tsx +97 -97
- 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 +81 -81
- package/src/booking-wizard/features/flight-options/flight-utils.ts +516 -516
- 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 +120 -120
- 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 +317 -317
- 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-room.tsx +321 -321
- 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/product-options/options-form.tsx +563 -459
- 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 +160 -160
- package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -75
- package/src/booking-wizard/features/sidebar/index.tsx +76 -76
- package/src/booking-wizard/features/sidebar/sidebar-flight.tsx +68 -68
- package/src/booking-wizard/features/sidebar/sidebar-util.ts +177 -177
- package/src/booking-wizard/features/sidebar/sidebar.tsx +364 -364
- package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +25 -25
- package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
- package/src/booking-wizard/features/summary/summary-flight.tsx +39 -39
- 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/summary/summary.tsx +674 -674
- package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts +164 -164
- package/src/booking-wizard/features/travelers-form/travelers-form.tsx +754 -754
- package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
- package/src/booking-wizard/features/travelers-form/validate-form.ts +245 -245
- package/src/booking-wizard/index.tsx +36 -36
- package/src/booking-wizard/settings-context.ts +67 -60
- package/src/booking-wizard/store.ts +31 -31
- package/src/booking-wizard/types.ts +283 -276
- package/src/booking-wizard/use-offer-printer.ts +136 -0
- package/src/index.ts +4 -4
- package/src/shared/components/loader.tsx +16 -16
- package/src/shared/translations/en-GB.json +237 -232
- package/src/shared/translations/fr-BE.json +238 -233
- package/src/shared/translations/nl-BE.json +237 -232
- 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/src/shared/utils/tide-api-utils.ts +36 -36
- package/styles/booking-product-variables.scss +394 -394
- package/styles/booking-product.scss +446 -446
- package/styles/booking-wizard-variables.scss +873 -871
- package/styles/booking-wizard.scss +59 -59
- package/styles/components/_animations.scss +39 -39
- package/styles/components/_base.scss +107 -107
- package/styles/components/_booking.scss +879 -879
- 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/_dropdown.scss +72 -72
- package/styles/components/_flight-option.scss +1429 -1429
- package/styles/components/_form.scss +1583 -1583
- 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/_step-indicators.scss +168 -168
- 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/package.json
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@qite/tide-booking-component",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "React Booking wizard & Booking product component for Tide",
|
|
5
|
-
"main": "build/build-cjs/index.js",
|
|
6
|
-
"module": "build/build-esm/index.js",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"start": "rollup -c -w",
|
|
9
|
-
"build": "rollup -c",
|
|
10
|
-
"tsc": "tsc --noEmit",
|
|
11
|
-
"format": "prettier --write ."
|
|
12
|
-
},
|
|
13
|
-
"repository": {
|
|
14
|
-
"type": "git",
|
|
15
|
-
"url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
|
|
16
|
-
},
|
|
17
|
-
"keywords": [
|
|
18
|
-
"tide",
|
|
19
|
-
"booking",
|
|
20
|
-
"react",
|
|
21
|
-
"component"
|
|
22
|
-
],
|
|
23
|
-
"author": "Kristof Colpaert <kristof.colpaert@qite.be>",
|
|
24
|
-
"license": "OBSD",
|
|
25
|
-
"homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
|
|
26
|
-
"devDependencies": {
|
|
27
|
-
"@jsonurl/jsonurl": "^1.1.4",
|
|
28
|
-
"@popperjs/core": "^2.10.2",
|
|
29
|
-
"@reach/router": "^1.3.4",
|
|
30
|
-
"@reduxjs/toolkit": "^1.6.0",
|
|
31
|
-
"@rollup/plugin-commonjs": "^19.0.1",
|
|
32
|
-
"@rollup/plugin-json": "^4.1.0",
|
|
33
|
-
"@rollup/plugin-node-resolve": "^13.0.2",
|
|
34
|
-
"@types/flat": "^5.0.2",
|
|
35
|
-
"@types/lodash": "^4.14.171",
|
|
36
|
-
"@types/reach__router": "^1.3.9",
|
|
37
|
-
"@types/react": "^17.0.2",
|
|
38
|
-
"@types/react-dom": "^17.0.2",
|
|
39
|
-
"@types/uuid": "^8.3.1",
|
|
40
|
-
"date-fns": "^2.22.1",
|
|
41
|
-
"flat": "^5.0.2",
|
|
42
|
-
"formik": "^2.2.9",
|
|
43
|
-
"lodash": "^4.17.21",
|
|
44
|
-
"prettier": "^2.3.2",
|
|
45
|
-
"react-popper": "^2.2.5",
|
|
46
|
-
"react-redux": "^7.2.4",
|
|
47
|
-
"rollup": "^2.53.2",
|
|
48
|
-
"rollup-plugin-delete": "^2.0.0",
|
|
49
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
50
|
-
"rollup-plugin-typescript2": "0.36.0",
|
|
51
|
-
"tslib": "^2.3.1",
|
|
52
|
-
"typescript": "^4.3.5",
|
|
53
|
-
"uuid": "^8.3.2"
|
|
54
|
-
},
|
|
55
|
-
"peerDependencies": {
|
|
56
|
-
"@jsonurl/jsonurl": "^1.1.4",
|
|
57
|
-
"@popperjs/core": "^2.10.2",
|
|
58
|
-
"@reach/router": "^1.3.4",
|
|
59
|
-
"@reduxjs/toolkit": "^1.6.0",
|
|
60
|
-
"date-fns": "^2.22.1",
|
|
61
|
-
"flat": "^5.0.2",
|
|
62
|
-
"formik": "^2.2.9",
|
|
63
|
-
"immer": "^9.0.5",
|
|
64
|
-
"lodash": "^4.17.21",
|
|
65
|
-
"react": "^17.0.2",
|
|
66
|
-
"react-dom": "^17.0.2",
|
|
67
|
-
"react-popper": "^2.2.5",
|
|
68
|
-
"react-redux": "^7.2.4",
|
|
69
|
-
"uuid": "^8.3.2"
|
|
70
|
-
},
|
|
71
|
-
"dependencies": {
|
|
72
|
-
"@qite/tide-client": "^1.1.64",
|
|
73
|
-
"react-html-comment": "^2.0.16"
|
|
74
|
-
}
|
|
75
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@qite/tide-booking-component",
|
|
3
|
+
"version": "1.3.0",
|
|
4
|
+
"description": "React Booking wizard & Booking product component for Tide",
|
|
5
|
+
"main": "build/build-cjs/index.js",
|
|
6
|
+
"module": "build/build-esm/index.js",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"start": "rollup -c -w",
|
|
9
|
+
"build": "rollup -c",
|
|
10
|
+
"tsc": "tsc --noEmit",
|
|
11
|
+
"format": "prettier --write ."
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
|
|
16
|
+
},
|
|
17
|
+
"keywords": [
|
|
18
|
+
"tide",
|
|
19
|
+
"booking",
|
|
20
|
+
"react",
|
|
21
|
+
"component"
|
|
22
|
+
],
|
|
23
|
+
"author": "Kristof Colpaert <kristof.colpaert@qite.be>",
|
|
24
|
+
"license": "OBSD",
|
|
25
|
+
"homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@jsonurl/jsonurl": "^1.1.4",
|
|
28
|
+
"@popperjs/core": "^2.10.2",
|
|
29
|
+
"@reach/router": "^1.3.4",
|
|
30
|
+
"@reduxjs/toolkit": "^1.6.0",
|
|
31
|
+
"@rollup/plugin-commonjs": "^19.0.1",
|
|
32
|
+
"@rollup/plugin-json": "^4.1.0",
|
|
33
|
+
"@rollup/plugin-node-resolve": "^13.0.2",
|
|
34
|
+
"@types/flat": "^5.0.2",
|
|
35
|
+
"@types/lodash": "^4.14.171",
|
|
36
|
+
"@types/reach__router": "^1.3.9",
|
|
37
|
+
"@types/react": "^17.0.2",
|
|
38
|
+
"@types/react-dom": "^17.0.2",
|
|
39
|
+
"@types/uuid": "^8.3.1",
|
|
40
|
+
"date-fns": "^2.22.1",
|
|
41
|
+
"flat": "^5.0.2",
|
|
42
|
+
"formik": "^2.2.9",
|
|
43
|
+
"lodash": "^4.17.21",
|
|
44
|
+
"prettier": "^2.3.2",
|
|
45
|
+
"react-popper": "^2.2.5",
|
|
46
|
+
"react-redux": "^7.2.4",
|
|
47
|
+
"rollup": "^2.53.2",
|
|
48
|
+
"rollup-plugin-delete": "^2.0.0",
|
|
49
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
50
|
+
"rollup-plugin-typescript2": "0.36.0",
|
|
51
|
+
"tslib": "^2.3.1",
|
|
52
|
+
"typescript": "^4.3.5",
|
|
53
|
+
"uuid": "^8.3.2"
|
|
54
|
+
},
|
|
55
|
+
"peerDependencies": {
|
|
56
|
+
"@jsonurl/jsonurl": "^1.1.4",
|
|
57
|
+
"@popperjs/core": "^2.10.2",
|
|
58
|
+
"@reach/router": "^1.3.4",
|
|
59
|
+
"@reduxjs/toolkit": "^1.6.0",
|
|
60
|
+
"date-fns": "^2.22.1",
|
|
61
|
+
"flat": "^5.0.2",
|
|
62
|
+
"formik": "^2.2.9",
|
|
63
|
+
"immer": "^9.0.5",
|
|
64
|
+
"lodash": "^4.17.21",
|
|
65
|
+
"react": "^17.0.2",
|
|
66
|
+
"react-dom": "^17.0.2",
|
|
67
|
+
"react-popper": "^2.2.5",
|
|
68
|
+
"react-redux": "^7.2.4",
|
|
69
|
+
"uuid": "^8.3.2"
|
|
70
|
+
},
|
|
71
|
+
"dependencies": {
|
|
72
|
+
"@qite/tide-client": "^1.1.64",
|
|
73
|
+
"react-html-comment": "^2.0.16"
|
|
74
|
+
}
|
|
75
|
+
}
|
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;
|