@faststore/components 3.0.77 → 3.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/molecules/QuantitySelector/QuantitySelector.d.ts +8 -4
- package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js +15 -15
- package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
- package/dist/esm/molecules/QuantitySelector/QuantitySelector.d.ts +8 -4
- package/dist/esm/molecules/QuantitySelector/QuantitySelector.js +15 -15
- package/dist/esm/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
- package/package.json +2 -2
- package/src/molecules/QuantitySelector/QuantitySelector.tsx +39 -34
|
@@ -20,11 +20,11 @@ export interface QuantitySelectorProps {
|
|
|
20
20
|
initial?: number;
|
|
21
21
|
/**
|
|
22
22
|
* Controls by how many units the value advances
|
|
23
|
-
|
|
23
|
+
*/
|
|
24
24
|
unitMultiplier?: number;
|
|
25
25
|
/**
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
* Controls wheter you use or not the unitMultiplier
|
|
27
|
+
*/
|
|
28
28
|
useUnitMultiplier?: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* Specifies that the whole quantity selector component should be disabled.
|
|
@@ -34,6 +34,10 @@ export interface QuantitySelectorProps {
|
|
|
34
34
|
* Event emitted when value is changed
|
|
35
35
|
*/
|
|
36
36
|
onChange?: (value: number) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Event emitted when value is out of the min and max bounds
|
|
39
|
+
*/
|
|
40
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
|
|
37
41
|
}
|
|
38
|
-
declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
|
|
42
|
+
declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, onValidateBlur, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
|
|
39
43
|
export default QuantitySelector;
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
5
|
const __1 = require("../../");
|
|
6
|
-
const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
|
|
6
|
+
const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, onValidateBlur, testId = 'fs-quantity-selector', ...otherProps }) => {
|
|
7
7
|
const [quantity, setQuantity] = (0, react_1.useState)(initial ?? min);
|
|
8
8
|
const [multipliedUnit, setMultipliedUnit] = (0, react_1.useState)(quantity * unitMultiplier);
|
|
9
9
|
const roundUpQuantityIfNeeded = (quantity) => {
|
|
@@ -24,33 +24,33 @@ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier,
|
|
|
24
24
|
const decrease = () => changeQuantity(-1);
|
|
25
25
|
function validateQuantityBounds(n) {
|
|
26
26
|
const maxValue = min ? Math.max(n, min) : n;
|
|
27
|
-
return max
|
|
27
|
+
return max
|
|
28
|
+
? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
|
|
29
|
+
: maxValue;
|
|
28
30
|
}
|
|
29
31
|
function validateBlur() {
|
|
30
|
-
const
|
|
32
|
+
const quantityValue = validateQuantityBounds(quantity);
|
|
33
|
+
const roundedQuantity = roundUpQuantityIfNeeded(quantityValue);
|
|
34
|
+
const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
|
|
35
|
+
const isOutOfBounds = quantity > maxValue || quantity < min;
|
|
36
|
+
if (isOutOfBounds) {
|
|
37
|
+
onValidateBlur?.(min, maxValue, roundedQuantity);
|
|
38
|
+
}
|
|
31
39
|
setQuantity(() => {
|
|
32
40
|
setMultipliedUnit(roundedQuantity);
|
|
33
41
|
onChange?.(roundedQuantity / unitMultiplier);
|
|
34
42
|
return roundedQuantity / unitMultiplier;
|
|
35
43
|
});
|
|
36
44
|
}
|
|
37
|
-
function validateInput(e) {
|
|
38
|
-
const val = e.currentTarget.value;
|
|
39
|
-
if (!Number.isNaN(Number(val))) {
|
|
40
|
-
setQuantity(() => {
|
|
41
|
-
const quantityValue = validateQuantityBounds(Number(val));
|
|
42
|
-
setMultipliedUnit(quantityValue);
|
|
43
|
-
onChange?.(quantityValue);
|
|
44
|
-
return quantityValue;
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
45
|
(0, react_1.useEffect)(() => {
|
|
49
46
|
initial && setQuantity(initial);
|
|
50
47
|
}, [initial]);
|
|
48
|
+
const changeInputValue = (e) => {
|
|
49
|
+
setQuantity(Number(e.currentTarget.value));
|
|
50
|
+
};
|
|
51
51
|
return (react_1.default.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
|
|
52
52
|
react_1.default.createElement(__1.IconButton, { "data-quantity-selector-button": "left", icon: react_1.default.createElement(__1.Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
|
|
53
|
-
react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange:
|
|
53
|
+
react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur, disabled: disabled }),
|
|
54
54
|
react_1.default.createElement(__1.IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: react_1.default.createElement(__1.Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
|
|
55
55
|
};
|
|
56
56
|
exports.default = QuantitySelector;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":";;;AAAA,uDAAkD;AAElD,8BAAgD;
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,11 +20,11 @@ export interface QuantitySelectorProps {
|
|
|
20
20
|
initial?: number;
|
|
21
21
|
/**
|
|
22
22
|
* Controls by how many units the value advances
|
|
23
|
-
|
|
23
|
+
*/
|
|
24
24
|
unitMultiplier?: number;
|
|
25
25
|
/**
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
* Controls wheter you use or not the unitMultiplier
|
|
27
|
+
*/
|
|
28
28
|
useUnitMultiplier?: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* Specifies that the whole quantity selector component should be disabled.
|
|
@@ -34,6 +34,10 @@ export interface QuantitySelectorProps {
|
|
|
34
34
|
* Event emitted when value is changed
|
|
35
35
|
*/
|
|
36
36
|
onChange?: (value: number) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Event emitted when value is out of the min and max bounds
|
|
39
|
+
*/
|
|
40
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
|
|
37
41
|
}
|
|
38
|
-
declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
|
|
42
|
+
declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, onValidateBlur, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
|
|
39
43
|
export default QuantitySelector;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import { Icon, IconButton, Input } from '../../';
|
|
3
|
-
const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
|
|
3
|
+
const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, onValidateBlur, testId = 'fs-quantity-selector', ...otherProps }) => {
|
|
4
4
|
const [quantity, setQuantity] = useState(initial ?? min);
|
|
5
5
|
const [multipliedUnit, setMultipliedUnit] = useState(quantity * unitMultiplier);
|
|
6
6
|
const roundUpQuantityIfNeeded = (quantity) => {
|
|
@@ -21,33 +21,33 @@ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier,
|
|
|
21
21
|
const decrease = () => changeQuantity(-1);
|
|
22
22
|
function validateQuantityBounds(n) {
|
|
23
23
|
const maxValue = min ? Math.max(n, min) : n;
|
|
24
|
-
return max
|
|
24
|
+
return max
|
|
25
|
+
? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
|
|
26
|
+
: maxValue;
|
|
25
27
|
}
|
|
26
28
|
function validateBlur() {
|
|
27
|
-
const
|
|
29
|
+
const quantityValue = validateQuantityBounds(quantity);
|
|
30
|
+
const roundedQuantity = roundUpQuantityIfNeeded(quantityValue);
|
|
31
|
+
const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
|
|
32
|
+
const isOutOfBounds = quantity > maxValue || quantity < min;
|
|
33
|
+
if (isOutOfBounds) {
|
|
34
|
+
onValidateBlur?.(min, maxValue, roundedQuantity);
|
|
35
|
+
}
|
|
28
36
|
setQuantity(() => {
|
|
29
37
|
setMultipliedUnit(roundedQuantity);
|
|
30
38
|
onChange?.(roundedQuantity / unitMultiplier);
|
|
31
39
|
return roundedQuantity / unitMultiplier;
|
|
32
40
|
});
|
|
33
41
|
}
|
|
34
|
-
function validateInput(e) {
|
|
35
|
-
const val = e.currentTarget.value;
|
|
36
|
-
if (!Number.isNaN(Number(val))) {
|
|
37
|
-
setQuantity(() => {
|
|
38
|
-
const quantityValue = validateQuantityBounds(Number(val));
|
|
39
|
-
setMultipliedUnit(quantityValue);
|
|
40
|
-
onChange?.(quantityValue);
|
|
41
|
-
return quantityValue;
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
42
|
useEffect(() => {
|
|
46
43
|
initial && setQuantity(initial);
|
|
47
44
|
}, [initial]);
|
|
45
|
+
const changeInputValue = (e) => {
|
|
46
|
+
setQuantity(Number(e.currentTarget.value));
|
|
47
|
+
};
|
|
48
48
|
return (React.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
|
|
49
49
|
React.createElement(IconButton, { "data-quantity-selector-button": "left", icon: React.createElement(Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
|
|
50
|
-
React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange:
|
|
50
|
+
React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur, disabled: disabled }),
|
|
51
51
|
React.createElement(IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: React.createElement(Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
|
|
52
52
|
};
|
|
53
53
|
export default QuantitySelector;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.81",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"typings": "dist/esm/index.d.ts",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"volta": {
|
|
50
50
|
"extends": "../../package.json"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "2187237703ed2610a1d47a613d0a6ea62569b85f"
|
|
53
53
|
}
|
|
@@ -22,13 +22,13 @@ export interface QuantitySelectorProps {
|
|
|
22
22
|
*/
|
|
23
23
|
initial?: number
|
|
24
24
|
/**
|
|
25
|
-
* Controls by how many units the value advances
|
|
26
|
-
|
|
25
|
+
* Controls by how many units the value advances
|
|
26
|
+
*/
|
|
27
27
|
unitMultiplier?: number
|
|
28
|
-
|
|
29
|
-
* Controls wheter you use or not the unitMultiplier
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Controls wheter you use or not the unitMultiplier
|
|
30
|
+
*/
|
|
31
|
+
useUnitMultiplier?: boolean
|
|
32
32
|
/**
|
|
33
33
|
* Specifies that the whole quantity selector component should be disabled.
|
|
34
34
|
*/
|
|
@@ -37,6 +37,10 @@ export interface QuantitySelectorProps {
|
|
|
37
37
|
* Event emitted when value is changed
|
|
38
38
|
*/
|
|
39
39
|
onChange?: (value: number) => void
|
|
40
|
+
/**
|
|
41
|
+
* Event emitted when value is out of the min and max bounds
|
|
42
|
+
*/
|
|
43
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
const QuantitySelector = ({
|
|
@@ -47,21 +51,24 @@ const QuantitySelector = ({
|
|
|
47
51
|
initial,
|
|
48
52
|
disabled = false,
|
|
49
53
|
onChange,
|
|
54
|
+
onValidateBlur,
|
|
50
55
|
testId = 'fs-quantity-selector',
|
|
51
56
|
...otherProps
|
|
52
57
|
}: QuantitySelectorProps) => {
|
|
53
58
|
const [quantity, setQuantity] = useState<number>(initial ?? min)
|
|
54
|
-
const [multipliedUnit, setMultipliedUnit] = useState<number>(
|
|
59
|
+
const [multipliedUnit, setMultipliedUnit] = useState<number>(
|
|
60
|
+
quantity * unitMultiplier
|
|
61
|
+
)
|
|
55
62
|
|
|
56
63
|
const roundUpQuantityIfNeeded = (quantity: number) => {
|
|
57
|
-
if(!useUnitMultiplier){
|
|
64
|
+
if (!useUnitMultiplier) {
|
|
58
65
|
return quantity
|
|
59
66
|
}
|
|
60
|
-
return Math.ceil(quantity / unitMultiplier) * unitMultiplier
|
|
61
|
-
}
|
|
67
|
+
return Math.ceil(quantity / unitMultiplier) * unitMultiplier
|
|
68
|
+
}
|
|
62
69
|
|
|
63
70
|
const isLeftDisabled = quantity === min
|
|
64
|
-
const isRightDisabled = quantity === max
|
|
71
|
+
const isRightDisabled = quantity === max
|
|
65
72
|
|
|
66
73
|
const changeQuantity = (increaseValue: number) => {
|
|
67
74
|
const quantityValue = validateQuantityBounds(quantity + increaseValue)
|
|
@@ -70,7 +77,7 @@ const QuantitySelector = ({
|
|
|
70
77
|
setQuantity(quantityValue)
|
|
71
78
|
setMultipliedUnit(quantityValue * unitMultiplier)
|
|
72
79
|
}
|
|
73
|
-
|
|
80
|
+
|
|
74
81
|
const increase = () => changeQuantity(1)
|
|
75
82
|
|
|
76
83
|
const decrease = () => changeQuantity(-1)
|
|
@@ -78,39 +85,37 @@ const QuantitySelector = ({
|
|
|
78
85
|
function validateQuantityBounds(n: number): number {
|
|
79
86
|
const maxValue = min ? Math.max(n, min) : n
|
|
80
87
|
|
|
81
|
-
return max
|
|
88
|
+
return max
|
|
89
|
+
? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
|
|
90
|
+
: maxValue
|
|
82
91
|
}
|
|
83
92
|
|
|
84
93
|
function validateBlur() {
|
|
85
|
-
|
|
94
|
+
const quantityValue = validateQuantityBounds(quantity)
|
|
95
|
+
const roundedQuantity = roundUpQuantityIfNeeded(quantityValue)
|
|
86
96
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
})
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function validateInput(e: React.FormEvent<HTMLInputElement>) {
|
|
96
|
-
const val = e.currentTarget.value
|
|
97
|
+
const maxValue = max ?? (min ? Math.max(quantity, min) : quantity)
|
|
98
|
+
const isOutOfBounds = quantity > maxValue || quantity < min
|
|
99
|
+
if (isOutOfBounds) {
|
|
100
|
+
onValidateBlur?.(min, maxValue, roundedQuantity)
|
|
101
|
+
}
|
|
97
102
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
setMultipliedUnit(quantityValue)
|
|
102
|
-
onChange?.(quantityValue)
|
|
103
|
+
setQuantity(() => {
|
|
104
|
+
setMultipliedUnit(roundedQuantity)
|
|
105
|
+
onChange?.(roundedQuantity / unitMultiplier)
|
|
103
106
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
+
return roundedQuantity / unitMultiplier
|
|
108
|
+
})
|
|
107
109
|
}
|
|
108
110
|
|
|
109
|
-
|
|
110
111
|
useEffect(() => {
|
|
111
112
|
initial && setQuantity(initial)
|
|
112
113
|
}, [initial])
|
|
113
114
|
|
|
115
|
+
const changeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
116
|
+
setQuantity(Number(e.currentTarget.value))
|
|
117
|
+
}
|
|
118
|
+
|
|
114
119
|
return (
|
|
115
120
|
<div
|
|
116
121
|
data-fs-quantity-selector={disabled ? 'disabled' : 'true'}
|
|
@@ -132,7 +137,7 @@ const QuantitySelector = ({
|
|
|
132
137
|
id="quantity-selector-input"
|
|
133
138
|
aria-label="Quantity"
|
|
134
139
|
value={useUnitMultiplier ? multipliedUnit : quantity}
|
|
135
|
-
onChange={
|
|
140
|
+
onChange={changeInputValue}
|
|
136
141
|
onBlur={validateBlur}
|
|
137
142
|
disabled={disabled}
|
|
138
143
|
/>
|