@faststore/components - npm Package Compare versions

Comparing version 3.0.44 to 3.0.46

dist/cjs/molecules/CartItem/CartItem.d.ts

@@ -19,4 +19,12 @@ import type { HTMLAttributes } from 'react';
     /**
-     * Specifies that this product is unavailable.
-     */
+     * Controls by how many units the value advances
+     **/
+    unitMultiplier?: number;
+    /**
+   * Controls wheter you use or not the unitMultiplier
+  */
+    useUnitMultiplier?: boolean;
+    /**
+    * Specifies that this product is unavailable.
+    */
     unavailable?: boolean;
@@ -23,0 +31,0 @@ /**

dist/cjs/molecules/CartItem/CartItem.js

@@ -6,3 +6,3 @@ "use strict";
 const __1 = require("../../");
-const CartItem = (0, react_1.forwardRef)(function CartItem({ testId = 'fs-cart-item', price, quantity, unavailable, onQuantityChange, children, removeBtnProps, ...otherProps }, ref) {
+const CartItem = (0, react_1.forwardRef)(function CartItem({ testId = 'fs-cart-item', price, quantity, unavailable, onQuantityChange, unitMultiplier, useUnitMultiplier, children, removeBtnProps, ...otherProps }, ref) {
     return (react_1.default.createElement("article", { ref: ref, "data-fs-cart-item": unavailable ? 'unavailable' : 'true', "data-testid": testId, ...otherProps },
@@ -12,3 +12,3 @@ react_1.default.createElement("div", { "data-fs-cart-item-content": true }, children),
         react_1.default.createElement("div", { "data-fs-cart-item-actions": true },
-            react_1.default.createElement(__1.QuantitySelector, { min: 1, initial: quantity, onChange: onQuantityChange }),
+            react_1.default.createElement(__1.QuantitySelector, { min: 1, initial: quantity, unitMultiplier: unitMultiplier, useUnitMultiplier: useUnitMultiplier, onChange: onQuantityChange }),
             react_1.default.createElement(__1.ProductPrice, { "data-fs-cart-item-prices": true, listPrice: price?.listPrice ? price.listPrice : 0, value: price?.value ? price.value : 0, formatter: price?.formatter }))));
@@ -15,0 +15,0 @@ });

dist/cjs/molecules/QuantitySelector/QuantitySelector.d.ts

@@ -22,2 +22,10 @@ import React from 'react';
     /**
+     * Controls by how many units the value advances
+    */
+    unitMultiplier?: number;
+    /**
+    * Controls wheter you use or not the unitMultiplier
+   */
+    useUnitMultiplier?: boolean;
+    /**
      * Specifies that the whole quantity selector component should be disabled.
@@ -31,3 +39,3 @@ */
 }
-declare const QuantitySelector: ({ max, min, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
+declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
 export default QuantitySelector;

dist/cjs/molecules/QuantitySelector/QuantitySelector.js

@@ -6,4 +6,11 @@ "use strict";
 const __1 = require("../../");
-const QuantitySelector = ({ max, min = 1, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
+const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
     const [quantity, setQuantity] = (0, react_1.useState)(initial ?? min);
+    const [multipliedUnit, setMultipliedUnit] = (0, react_1.useState)(quantity * unitMultiplier);
+    const roundUpQuantityIfNeeded = (quantity) => {
+        if (!useUnitMultiplier) {
+            return quantity;
+        }
+        return Math.ceil(quantity / unitMultiplier) * unitMultiplier;
+    };
     const isLeftDisabled = quantity === min;
@@ -15,2 +22,3 @@ const isRightDisabled = quantity === max;
         setQuantity(quantityValue);
+        setMultipliedUnit(quantityValue * unitMultiplier);
     };
@@ -21,4 +29,12 @@ const increase = () => changeQuantity(1);
         const maxValue = min ? Math.max(n, min) : n;
-        return max ? Math.min(maxValue, max) : maxValue;
+        return max ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max) : maxValue;
     }
+    function validateBlur() {
+        const roundedQuantity = roundUpQuantityIfNeeded(quantity);
+        setQuantity(() => {
+            setMultipliedUnit(roundedQuantity);
+            onChange?.(roundedQuantity / unitMultiplier);
+            return roundedQuantity / unitMultiplier;
+        });
+    }
     function validateInput(e) {
@@ -29,2 +45,3 @@ const val = e.currentTarget.value;
                 const quantityValue = validateQuantityBounds(Number(val));
+                setMultipliedUnit(quantityValue);
                 onChange?.(quantityValue);
@@ -40,3 +57,3 @@ return quantityValue;
         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" }),
-        react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: quantity, onChange: validateInput, disabled: disabled }),
+        react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: validateInput, onBlur: validateBlur, disabled: disabled }),
         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" })));
@@ -43,0 +60,0 @@ };

dist/esm/molecules/CartItem/CartItem.d.ts

@@ -19,4 +19,12 @@ import type { HTMLAttributes } from 'react';
     /**
-     * Specifies that this product is unavailable.
-     */
+     * Controls by how many units the value advances
+     **/
+    unitMultiplier?: number;
+    /**
+   * Controls wheter you use or not the unitMultiplier
+  */
+    useUnitMultiplier?: boolean;
+    /**
+    * Specifies that this product is unavailable.
+    */
     unavailable?: boolean;
@@ -23,0 +31,0 @@ /**

dist/esm/molecules/CartItem/CartItem.js

 import React, { forwardRef } from 'react';
 import { Icon, IconButton, ProductPrice, QuantitySelector, } from '../../';
-const CartItem = forwardRef(function CartItem({ testId = 'fs-cart-item', price, quantity, unavailable, onQuantityChange, children, removeBtnProps, ...otherProps }, ref) {
+const CartItem = forwardRef(function CartItem({ testId = 'fs-cart-item', price, quantity, unavailable, onQuantityChange, unitMultiplier, useUnitMultiplier, children, removeBtnProps, ...otherProps }, ref) {
     return (React.createElement("article", { ref: ref, "data-fs-cart-item": unavailable ? 'unavailable' : 'true', "data-testid": testId, ...otherProps },
@@ -8,3 +8,3 @@ React.createElement("div", { "data-fs-cart-item-content": true }, children),
         React.createElement("div", { "data-fs-cart-item-actions": true },
-            React.createElement(QuantitySelector, { min: 1, initial: quantity, onChange: onQuantityChange }),
+            React.createElement(QuantitySelector, { min: 1, initial: quantity, unitMultiplier: unitMultiplier, useUnitMultiplier: useUnitMultiplier, onChange: onQuantityChange }),
             React.createElement(ProductPrice, { "data-fs-cart-item-prices": true, listPrice: price?.listPrice ? price.listPrice : 0, value: price?.value ? price.value : 0, formatter: price?.formatter }))));
@@ -11,0 +11,0 @@ });

dist/esm/molecules/QuantitySelector/QuantitySelector.d.ts

@@ -22,2 +22,10 @@ import React from 'react';
     /**
+     * Controls by how many units the value advances
+    */
+    unitMultiplier?: number;
+    /**
+    * Controls wheter you use or not the unitMultiplier
+   */
+    useUnitMultiplier?: boolean;
+    /**
      * Specifies that the whole quantity selector component should be disabled.
@@ -31,3 +39,3 @@ */
 }
-declare const QuantitySelector: ({ max, min, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
+declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
 export default QuantitySelector;

dist/esm/molecules/QuantitySelector/QuantitySelector.js

 import React, { useEffect, useState } from 'react';
 import { Icon, IconButton, Input } from '../../';
-const QuantitySelector = ({ max, min = 1, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
+const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
     const [quantity, setQuantity] = useState(initial ?? min);
+    const [multipliedUnit, setMultipliedUnit] = useState(quantity * unitMultiplier);
+    const roundUpQuantityIfNeeded = (quantity) => {
+        if (!useUnitMultiplier) {
+            return quantity;
+        }
+        return Math.ceil(quantity / unitMultiplier) * unitMultiplier;
+    };
     const isLeftDisabled = quantity === min;
@@ -11,2 +18,3 @@ const isRightDisabled = quantity === max;
         setQuantity(quantityValue);
+        setMultipliedUnit(quantityValue * unitMultiplier);
     };
@@ -17,4 +25,12 @@ const increase = () => changeQuantity(1);
         const maxValue = min ? Math.max(n, min) : n;
-        return max ? Math.min(maxValue, max) : maxValue;
+        return max ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max) : maxValue;
     }
+    function validateBlur() {
+        const roundedQuantity = roundUpQuantityIfNeeded(quantity);
+        setQuantity(() => {
+            setMultipliedUnit(roundedQuantity);
+            onChange?.(roundedQuantity / unitMultiplier);
+            return roundedQuantity / unitMultiplier;
+        });
+    }
     function validateInput(e) {
@@ -25,2 +41,3 @@ const val = e.currentTarget.value;
                 const quantityValue = validateQuantityBounds(Number(val));
+                setMultipliedUnit(quantityValue);
                 onChange?.(quantityValue);
@@ -36,3 +53,3 @@ return quantityValue;
         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" }),
-        React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: quantity, onChange: validateInput, disabled: disabled }),
+        React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: validateInput, onBlur: validateBlur, disabled: disabled }),
         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" })));
@@ -39,0 +56,0 @@ };

package.json

 {
   "name": "@faststore/components",
-  "version": "3.0.44",
+  "version": "3.0.46",
   "main": "dist/cjs/index.js",
@@ -52,3 +52,3 @@ "module": "dist/esm/index.js",
   },
-  "gitHead": "58bf8cadc618b100f93b82b4b371a9e24bef3e6f"
+  "gitHead": "5fdfe48f8a4115b3ff83bd70272d83857ce74c4f"
 }

No alert changes

Improved metrics

Total package byte prevSize

1240291

increased by0.46%

Lines of code

22685

increased by0.47%

No dependency changes