woocommerce/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx

160 lines
3.6 KiB
TypeScript
Raw Normal View History

Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
import classNames from 'classnames';
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
import { useCallback } from '@wordpress/element';
import { DOWN, UP } from '@wordpress/keycodes';
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
/**
* Internal dependencies
*/
import './style.scss';
interface QuantitySelectorProps {
className?: string;
quantity?: number;
minimum?: number;
maximum: number;
onChange: ( newQuantity: number ) => void;
itemName?: string;
disabled: boolean;
}
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
const QuantitySelector = ( {
className,
quantity = 1,
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
minimum = 1,
maximum,
onChange = () => {
/* Do nothing. */
},
itemName = '',
disabled,
}: QuantitySelectorProps ): JSX.Element => {
const classes = classNames(
'wc-block-components-quantity-selector',
className
);
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
const hasMaximum = typeof maximum !== 'undefined';
const canDecrease = quantity > minimum;
const canIncrease = ! hasMaximum || quantity < maximum;
/**
* Handles keyboard up and down keys to change quantity value.
*
* @param {Object} event event data.
*/
const quantityInputOnKeyDown = useCallback(
( event ) => {
const isArrowDown =
typeof event.key !== undefined
? event.key === 'ArrowDown'
: event.keyCode === DOWN;
const isArrowUp =
typeof event.key !== undefined
? event.key === 'ArrowUp'
: event.keyCode === UP;
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
if ( isArrowDown && canDecrease ) {
event.preventDefault();
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
onChange( quantity - 1 );
}
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
if ( isArrowUp && canIncrease ) {
event.preventDefault();
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
onChange( quantity + 1 );
}
},
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
[ quantity, onChange, canIncrease, canDecrease ]
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
);
return (
<div className={ classes }>
<input
className="wc-block-components-quantity-selector__input"
disabled={ disabled }
type="number"
step="1"
min="0"
value={ quantity }
onKeyDown={ quantityInputOnKeyDown }
onChange={ ( event ) => {
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
let value =
Number.isNaN( event.target.value ) ||
! event.target.value
? 0
: parseInt( event.target.value, 10 );
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
if ( hasMaximum ) {
value = Math.min( value, maximum );
}
value = Math.max( value, minimum );
if ( value !== quantity ) {
onChange( value );
}
} }
aria-label={ sprintf(
/* translators: %s refers to the item name in the cart. */
__(
'Quantity of %s in your cart.',
'woo-gutenberg-products-block'
),
itemName
) }
/>
<button
aria-label={ __(
'Reduce quantity',
'woo-gutenberg-products-block'
) }
className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
disabled={ disabled || ! canDecrease }
onClick={ () => {
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
const newQuantity = quantity - 1;
onChange( newQuantity );
speak(
sprintf(
/* translators: %s refers to the item name in the cart. */
__(
'Quantity reduced to %s.',
'woo-gutenberg-products-block'
),
newQuantity
)
);
} }
>
&#65293;
</button>
<button
aria-label={ __(
'Increase quantity',
'woo-gutenberg-products-block'
) }
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
disabled={ disabled || ! canIncrease }
className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
onClick={ () => {
Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824) * first cut - removing an item from cart: - add actions to cart store for removing an item and keeping track of pending removal API call - add reducer logic for storing pending state on an item, and removing an item - expose removeCartItem on new useStoreCartItems hook - hook it up to remove link / trashcan icon in row item * disable cart quantity picker/remove link while API request in progress: - expose cart item pending status from store using selector - use selector to disable quantity related components in line item row * add typedef for cart items store object provided by hook * allow user to change quantity of cart items (first cut): - add action for replacing a cart item in the store - add generator action for changing quantity - expose change quantity action on useStoreCartItems hook - hook up to quantity UI in cart block (work in progress) * post-rebase fixes & fix broken typedef: - rework cart item change quantity callback - now supplies item key like remove callback - fix hook StoreCartItem return value typedef - single item with specified key, was array of all items - add quantity JSDoc for changeCartItemQuantity action - remove changeQuantity callback from UI (currently infinite looping) * fix bug in recieveCartItem reducer - check keys for equality: - was key === object * fix invalid url in POST cart/items/quantity request * hook up cart line item quantity to API: - remove internal state/ref for QuantitySelector, is now a controlled component - call changeQuantity action from QuantitySelector change callback * QuantitySelector no longer needs a ref to wrangle number input value * hoist quantity state out of QuantitySelector into story (fix storybook) * add product sold_individually option to cart item API response * limit sold_individually items to 1 per cart/order: - support optional max value in QuantitySelector - set maximum dependent on sold_individually API field * prevent user from requesting zero x cart item (API 500 errors): - add minimum limit to QuantitySelector - default limit to 1 + fix bug with limiting to maximum value in number input change handler * remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️ * address various review feedback: - inline undefined check, don't use lodash - quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease - also removed undefined check for minimum, as minimum has default 0 * use safer typeof check for presence of maximum prop
2020-03-03 01:08:19 +00:00
const newQuantity = quantity + 1;
onChange( newQuantity );
speak(
sprintf(
/* translators: %s refers to the item name in the cart. */
__(
'Quantity increased to %s.',
'woo-gutenberg-products-block'
),
newQuantity
)
);
} }
>
&#65291;
</button>
</div>
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
);
};
export default QuantitySelector;