Filter all products block by attribute

assets/js/base/components/checkbox-list/index.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import {
+	Fragment,
+	useCallback,
+	useMemo,
+	useState,
+	useEffect,
+} from '@wordpress/element';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Component used to show a list of checkboxes in a group.
+ */
+const CheckboxList = ( {
+	className,
+	onChange,
+	options,
+	isLoading,
+	limit = 10,
+} ) => {
+	// Holds all checked options.
+	const [ checked, setChecked ] = useState( [] );
+	const [ showExpanded, setShowExpanded ] = useState( false );
+
+	useEffect( () => {
+		onChange( checked );
+	}, [ checked ] );
+
+	const renderPlaceholder = useMemo( () => {
+		return (
+			<Fragment>
+				{ [ ...Array( 5 ) ].map( ( x, i ) => (
+					<li
+						key={ i }
+						style={ {
+							/* stylelint-disable */
+							width: Math.floor( Math.random() * 75 ) + 25 + '%',
+						} }
+					/>
+				) ) }
+			</Fragment>
+		);
+	}, [] );
+
+	const onCheckboxChange = useCallback(
+		( event ) => {
+			const isChecked = event.target.checked;
+			const checkedValue = event.target.value;
+			const newChecked = checked.filter(
+				( value ) => value !== checkedValue
+			);
+
+			if ( isChecked ) {
+				newChecked.push( checkedValue );
+			}
+
+			newChecked.sort();
+
+			setChecked( newChecked );
+		},
+		[ options, checked ]
+	);
+
+	const renderOptions = useCallback( () => {
+		// Truncate options if > the limit + 5.
+		const shouldTruncateOptions = options.length > limit + 5;
+		const showOptions =
+			shouldTruncateOptions && ! showExpanded
+				? [ ...options.slice( 0, limit ) ]
+				: options;
+		return (
+			<Fragment>
+				{ showOptions.map( ( option ) => (
+					<li key={ option.key }>
+						<input
+							type="checkbox"
+							id={ option.key }
+							value={ option.key }
+							onChange={ onCheckboxChange }
+							checked={ checked.includes( option.key ) }
+						/>
+						<label htmlFor={ option.key }>{ option.label }</label>
+					</li>
+				) ) }
+				{ shouldTruncateOptions && (
+					<li className="show-more">
+						<button
+							onClick={ () => {
+								setShowExpanded( ! showExpanded );
+							} }
+						>
+							{ showExpanded
+								? __(
+										'Show less',
+										'woo-gutenberg-products-block'
+								  )
+								: __(
+										'Show more',
+										'woo-gutenberg-products-block'
+								  ) }
+						</button>
+					</li>
+				) }
+			</Fragment>
+		);
+	}, [ options, checked, showExpanded ] );
+
+	const listClass = classNames(
+		'wc-block-checkbox-list',
+		isLoading && 'is-loading',
+		className
+	);
+
+	return (
+		<ul className={ listClass }>
+			{ isLoading ? renderPlaceholder : renderOptions() }
+		</ul>
+	);
+};
+
+CheckboxList.propTypes = {
+	onChange: PropTypes.func,
+	options: PropTypes.arrayOf(
+		PropTypes.shape( {
+			key: PropTypes.string.isRequired,
+			label: PropTypes.node.isRequired,
+			checked: PropTypes.bool,
+		} )
+	),
+	className: PropTypes.string,
+	isLoading: PropTypes.bool,
+	limit: PropTypes.number,
+};
+
+export default CheckboxList;

assets/js/base/components/checkbox-list/style.scss

@@ -0,0 +1,26 @@
+.editor-styles-wrapper .wc-block-checkbox-list,
+.wc-block-checkbox-list {
+	margin: 0;
+	padding: 0;
+	list-style: none outside;
+
+	li {
+		margin: 0 0 $gap-smallest;
+		padding: 0;
+		list-style: none outside;
+	}
+
+	li.show-more button {
+		background: none;
+		border: none;
+		padding: 0;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+
+	&.is-loading {
+		li {
+			@include placeholder();
+		}
+	}
+}

assets/js/base/components/price-slider/index.js

@@ -12,7 +12,7 @@ import {
 } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useDebounce } from '@woocommerce/base-hooks';
+import { useDebounce, usePrevious } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -47,15 +47,25 @@ const PriceSlider = ( {
 		formatCurrencyForInput( maxPrice, priceFormat, currencySymbol )
 	);
 	const debouncedChangeValue = useDebounce( [ minPrice, maxPrice ], 500 );
+	const prevMinConstraint = usePrevious( minConstraint );
+	const prevMaxConstraint = usePrevious( maxConstraint );
 
 	useEffect( () => {
-		if ( minPrice === undefined || minConstraint > minPrice ) {
+		if (
+			minPrice === undefined ||
+			minConstraint > minPrice ||
+			minPrice === prevMinConstraint
+		) {
 			setMinPrice( minConstraint );
 		}
 	}, [ minConstraint ] );
 
 	useEffect( () => {
-		if ( maxPrice === undefined || maxConstraint < maxPrice ) {
+		if (
+			maxPrice === undefined ||
+			maxConstraint < maxPrice ||
+			maxPrice === prevMaxConstraint
+		) {
 			setMaxPrice( maxConstraint );
 		}
 	}, [ maxConstraint ] );
@@ -82,6 +92,18 @@ const PriceSlider = ( {
 	 * Handles styles for the shaded area of the range slider.
 	 */
 	const getProgressStyle = useMemo( () => {
+		if (
+			! isFinite( minPrice ) ||
+			! isFinite( maxPrice ) ||
+			! isFinite( minConstraint ) ||
+			! isFinite( maxConstraint )
+		) {
+			return {
+				'--low': '0%',
+				'--high': '100%',
+			};
+		}
+
 		const low =
 			Math.round(
 				100 *
@@ -99,7 +121,7 @@ const PriceSlider = ( {
 			'--low': low + '%',
 			'--high': high + '%',
 		};
-	}, [ minPrice, minConstraint, maxPrice, maxConstraint ] );
+	}, [ minPrice, maxPrice, minConstraint, maxConstraint ] );
 
 	/**
 	 * Trigger the onChange prop callback with new values.

assets/js/base/hooks/index.js

@@ -4,3 +4,4 @@ export * from './use-store-products';
 export * from './use-collection';
 export * from './use-collection-header';
 export * from './use-debounce';
+export * from './use-previous';

assets/js/base/hooks/test/use-previous.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import { usePrevious } from '../use-previous';
+
+describe( 'usePrevious', () => {
+	const TestComponent = ( { testValue } ) => {
+		const previousValue = usePrevious( testValue );
+		return <div testValue={ testValue } previousValue={ previousValue } />;
+	};
+
+	let renderer;
+	beforeEach( () => ( renderer = null ) );
+
+	it( 'should be undefined at first pass', () => {
+		act( () => {
+			renderer = TestRenderer.create( <TestComponent testValue={ 1 } /> );
+		} );
+		const testValue = renderer.root.findByType( 'div' ).props.testValue;
+		const testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+
+		expect( testValue ).toBe( 1 );
+		expect( testPreviousValue ).toBe( undefined );
+	} );
+
+	it( 'test new and previous value', () => {
+		let testValue;
+		let testPreviousValue;
+		act( () => {
+			renderer = TestRenderer.create( <TestComponent testValue={ 1 } /> );
+		} );
+
+		act( () => {
+			renderer.update( <TestComponent testValue={ 2 } /> );
+		} );
+		testValue = renderer.root.findByType( 'div' ).props.testValue;
+		testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+		expect( testValue ).toBe( 2 );
+		expect( testPreviousValue ).toBe( 1 );
+
+		act( () => {
+			renderer.update( <TestComponent testValue={ 3 } /> );
+		} );
+		testValue = renderer.root.findByType( 'div' ).props.testValue;
+		testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+		expect( testValue ).toBe( 3 );
+		expect( testPreviousValue ).toBe( 2 );
+	} );
+} );

assets/js/base/hooks/use-collection-header.js

@@ -41,7 +41,12 @@ import { useShallowEqual } from './use-shallow-equal';
  *                              loading (true) or not.
  */
 export const useCollectionHeader = ( headerKey, options ) => {
-	const { namespace, resourceName, resourceValues, query } = options;
+	const {
+		namespace,
+		resourceName,
+		resourceValues = [],
+		query = {},
+	} = options;
 	if ( ! namespace || ! resourceName ) {
 		throw new Error(
 			'The options object must have valid values for the namespace and ' +

assets/js/base/hooks/use-collection.js

@@ -36,7 +36,12 @@ import { useShallowEqual } from './use-shallow-equal';
  *                              loading (true) or not.
  */
 export const useCollection = ( options ) => {
-	const { namespace, resourceName, resourceValues, query } = options;
+	const {
+		namespace,
+		resourceName,
+		resourceValues = [],
+		query = {},
+	} = options;
 	if ( ! namespace || ! resourceName ) {
 		throw new Error(
 			'The options object must have valid values for the namespace and ' +

assets/js/base/hooks/use-previous.js

@@ -0,0 +1,15 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Use Previous from https://usehooks.com/usePrevious/.
+ * @param {mixed} value
+ */
+export const usePrevious = ( value ) => {
+	const ref = useRef();
+
+	useEffect( () => {
+		ref.current = value;
+	}, [ value ] );
+
+	return ref.current;
+};

assets/js/base/hooks/use-query-state.js

@@ -40,15 +40,20 @@ export const useQueryStateContext = ( context ) => {
  *
  * @param {string} context  What context to retrieve the query state for.
  * @param {*}      queryKey The specific query key to retrieve the value for.
+ * @param {*}      defaultValue  Default value if query does not exist.
  *
  * @return {*}  Whatever value is set at the query state index using the
  *              provided context and query key.
  */
-export const useQueryStateByKey = ( context, queryKey ) => {
+export const useQueryStateByKey = (
+	context,
+	queryKey,
+	defaultValue = undefined
+) => {
 	const queryValue = useSelect(
 		( select ) => {
 			const store = select( storeKey );
-			return store.getValueForQueryKey( context, queryKey, undefined );
+			return store.getValueForQueryKey( context, queryKey, defaultValue );
 		},
 		[ context, queryKey ]
 	);