From 5d1361f352c21ed8e1cb86414722e096a9f7f490 Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Mon, 5 Oct 2020 18:19:07 +0200 Subject: [PATCH 1/4] Prevent negative price setting in input --- .../ProductPricing/ProductPricing.tsx | 8 +++++++- .../ProductVariantPrice.tsx | 20 +++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/products/components/ProductPricing/ProductPricing.tsx b/src/products/components/ProductPricing/ProductPricing.tsx index 153ec3fd2..0c53611db 100644 --- a/src/products/components/ProductPricing/ProductPricing.tsx +++ b/src/products/components/ProductPricing/ProductPricing.tsx @@ -37,6 +37,12 @@ const ProductPricing: React.FC = props => { const formErrors = getFormErrors(["basePrice"], errors); + const handlePriceChange = event => { + if (/^\d*(\.\d+)?$/.test(event.target.value)) { + onChange(event); + } + }; + return ( = props => { name="basePrice" value={data.basePrice} currencySymbol={currency} - onChange={onChange} + onChange={handlePriceChange} InputProps={{ inputProps: { min: 0 diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx index d39a927b0..d8092219c 100644 --- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx +++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx @@ -36,6 +36,12 @@ const ProductVariantPrice: React.FC = props => { const formErrors = getFormErrors(["price", "cost_price"], errors); + const handlePriceChange = event => { + if (/^\d*(\.\d+)?$/.test(event.target.value)) { + onChange(event); + } + }; + return ( = props => { })} value={price} currencySymbol={currencySymbol} - onChange={onChange} + onChange={handlePriceChange} disabled={loading} + InputProps={{ + inputProps: { + min: "0" + } + }} />
@@ -76,8 +87,13 @@ const ProductVariantPrice: React.FC = props => { } value={costPrice} currencySymbol={currencySymbol} - onChange={onChange} + onChange={handlePriceChange} disabled={loading} + InputProps={{ + inputProps: { + min: "0" + } + }} />
From a10fc6281967b857a596fe5d1d8a684bb257021f Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Tue, 6 Oct 2020 10:53:08 +0200 Subject: [PATCH 2/4] Update test snapshots --- src/storybook/__snapshots__/Stories.test.ts.snap | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index a4478f4a0..52cdef207 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -141166,6 +141166,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant Date: Fri, 9 Oct 2020 12:22:50 +0200 Subject: [PATCH 3/4] Create non negative value change handler --- .../components/ProductPricing/ProductPricing.tsx | 7 ++----- .../ProductVariantPrice/ProductVariantPrice.tsx | 7 ++----- src/utils/handlers/nonNegativeValueChangeHandler.ts | 11 +++++++++++ 3 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 src/utils/handlers/nonNegativeValueChangeHandler.ts diff --git a/src/products/components/ProductPricing/ProductPricing.tsx b/src/products/components/ProductPricing/ProductPricing.tsx index 0c53611db..790f12784 100644 --- a/src/products/components/ProductPricing/ProductPricing.tsx +++ b/src/products/components/ProductPricing/ProductPricing.tsx @@ -5,6 +5,7 @@ import CardTitle from "@saleor/components/CardTitle"; import PriceField from "@saleor/components/PriceField"; import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; +import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler"; import React from "react"; import { useIntl } from "react-intl"; @@ -37,11 +38,7 @@ const ProductPricing: React.FC = props => { const formErrors = getFormErrors(["basePrice"], errors); - const handlePriceChange = event => { - if (/^\d*(\.\d+)?$/.test(event.target.value)) { - onChange(event); - } - }; + const handlePriceChange = createNonNegativeValueChangeHandler(onChange); return ( diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx index d8092219c..0712f5cfe 100644 --- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx +++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx @@ -5,6 +5,7 @@ import CardTitle from "@saleor/components/CardTitle"; import PriceField from "@saleor/components/PriceField"; import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; +import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler"; import React from "react"; import { useIntl } from "react-intl"; @@ -36,11 +37,7 @@ const ProductVariantPrice: React.FC = props => { const formErrors = getFormErrors(["price", "cost_price"], errors); - const handlePriceChange = event => { - if (/^\d*(\.\d+)?$/.test(event.target.value)) { - onChange(event); - } - }; + const handlePriceChange = createNonNegativeValueChangeHandler(onChange); return ( diff --git a/src/utils/handlers/nonNegativeValueChangeHandler.ts b/src/utils/handlers/nonNegativeValueChangeHandler.ts new file mode 100644 index 000000000..a8d4e53dd --- /dev/null +++ b/src/utils/handlers/nonNegativeValueChangeHandler.ts @@ -0,0 +1,11 @@ +import { FormChange } from "@saleor/hooks/useForm"; + +function createNonNegativeValueChangeHandler(change: FormChange) { + return (event: React.ChangeEvent) => { + if (/^\d*(\.\d+)?$/.test(event.target.value)) { + change(event); + } + }; +} + +export default createNonNegativeValueChangeHandler; From 1fda14d2aa4a57d8f8e4acc54c6823ef66a31f10 Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Fri, 9 Oct 2020 12:28:27 +0200 Subject: [PATCH 4/4] Update test snapshots --- src/storybook/__snapshots__/Stories.test.ts.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 52cdef207..280992f7a 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -144583,6 +144583,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =