woocommerce/plugins/woocommerce-blocks/assets/js/utils/array-operations.ts

18 lines
465 B
TypeScript
Raw Normal View History

Improve Products block Attributes Filter Inspector Controls (https://github.com/woocommerce/woocommerce-blocks/pull/8583) This PR is meant to improve the UI and UX behind the Attributes filter within the Inspector Controls of the “Products (Beta)“ block. Also included: * Refactor `useProductAttributes` hook * Move it into the shared hooks. * Fetch both terms AND attributes via the API (previously, we got the attributes from the settings, but we'd get partial objects compared to the API? Maybe a follow-up to this could be to check why the attributes stored in the settings are incomplete?) * Make sure the return values match the ones expected from search items. * Remove attribute-related types from PQ directory * Improve functionality of `SearchListControl` * Allow the search input to be a Token based input. * Allow for search input to search even collapsed properties. * Use core `CheckboxControl` instead of radio buttons for items having children (includes undeterminated state). * Enable removal of tokens from the input * Improve styles: * Refactor classnames for `SearchItem`. * Add more semantic classes. * Align count label and caret to the right. * Make caret switch direction on expanded. * `cursor: pointer` on collapsible items. * Indent children of collapsible items. * Correctly pass through class names to search item * Enable keyboard navigation for collapsible items * Add link to manage attributes * Change label inside the inspector controls * Make search list attached when token type * Implement more sophisticated behavior of parent checkbox * If indeterminate or unchecked, it will check all children. * If checked, it will uncheck all children. * Remove hardcoded `isSingle` from `expandableSearchListItem`
2023-03-08 16:22:51 +00:00
/**
* Returns the difference between two arrays (A - B)
*/
export function arrayDifferenceBy< T >( a: T[], b: T[], key: keyof T ) {
const keys = new Set( b.map( ( item ) => item[ key ] ) );
return a.filter( ( item ) => ! keys.has( item[ key ] ) );
}
/**
* Returns the union of two arrays (A B)
*/
export function arrayUnionBy< T >( a: T[], b: T[], key: keyof T ) {
const difference = arrayDifferenceBy( b, a, key );
return [ ...a, ...difference ];
}