From 9b5e714dfb40646000f30f6a602c98b1838931df Mon Sep 17 00:00:00 2001 From: Andrew Hayward Date: Wed, 6 Sep 2023 18:56:30 +0100 Subject: [PATCH] First pass at `ariakit` implementation --- .../src/alignment-matrix-control/cell.tsx | 2 +- .../src/alignment-matrix-control/index.tsx | 66 ++++++++----------- .../src/alignment-matrix-control/utils.tsx | 33 ++++++++-- 3 files changed, 57 insertions(+), 44 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/cell.tsx b/packages/components/src/alignment-matrix-control/cell.tsx index b6e19c56022915..d3f14c2c06c82a 100644 --- a/packages/components/src/alignment-matrix-control/cell.tsx +++ b/packages/components/src/alignment-matrix-control/cell.tsx @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { CompositeItem } from '../composite'; +import { CompositeItem } from '../composite/v2'; import Tooltip from '../tooltip'; import { VisuallyHidden } from '../visually-hidden'; diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx index 0e34e4052346da..0994c212f909da 100644 --- a/packages/components/src/alignment-matrix-control/index.tsx +++ b/packages/components/src/alignment-matrix-control/index.tsx @@ -8,16 +8,16 @@ import classnames from 'classnames'; */ import { __, isRTL } from '@wordpress/i18n'; import { useInstanceId } from '@wordpress/compose'; -import { useState, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; /** * Internal dependencies */ import Cell from './cell'; -import { Composite, CompositeGroup, useCompositeState } from '../composite'; +import { Composite, CompositeRow, useCompositeStore } from '../composite/v2'; import { Root, Row } from './styles/alignment-matrix-control-styles'; import AlignmentMatrixControlIcon from './icon'; -import { GRID, getItemId } from './utils'; +import { GRID, getItemId, getItemValue, normalizeValue } from './utils'; import type { WordPressComponentProps } from '../ui/context'; import type { AlignmentMatrixControlProps, @@ -26,15 +26,6 @@ import type { const noop = () => {}; -function useBaseId( id?: string ) { - const instanceId = useInstanceId( - AlignmentMatrixControl, - 'alignment-matrix-control' - ); - - return id || instanceId; -} - /** * * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI. @@ -65,27 +56,31 @@ export function AlignmentMatrixControl( { width = 92, ...props }: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) { - const [ immutableDefaultValue ] = useState( value ?? defaultValue ); - const baseId = useBaseId( id ); - const initialCurrentId = getItemId( baseId, immutableDefaultValue ); + const [ immutableDefaultValue ] = useState( + normalizeValue( value ?? defaultValue ) + ); + const currentCell = normalizeValue( value ?? immutableDefaultValue ); - const composite = useCompositeState( { - baseId, - currentId: initialCurrentId, - rtl: isRTL(), - } ); + const baseId = useInstanceId( + AlignmentMatrixControl, + 'alignment-matrix-control', + id + ); + const defaultActiveId = getItemId( baseId, immutableDefaultValue ); const handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => { onChange( nextValue ); }; - const { setCurrentId } = composite; - - useEffect( () => { - if ( typeof value !== 'undefined' ) { - setCurrentId( getItemId( baseId, value ) ); - } - }, [ value, setCurrentId, baseId ] ); + const compositeStore = useCompositeStore( { + defaultActiveId, + setActiveId: ( activeId ) => { + if ( activeId ) { + handleOnChange( getItemValue( baseId, activeId ) ); + } + }, + rtl: isRTL(), + } ); const classes = classnames( 'component-alignment-matrix-control', @@ -95,37 +90,30 @@ export function AlignmentMatrixControl( { return ( { GRID.map( ( cells, index ) => ( - + { cells.map( ( cell ) => { const cellId = getItemId( baseId, cell ); - const isActive = composite.currentId === cellId; + const isActive = cell === currentCell; return ( handleOnChange( cell ) } - tabIndex={ isActive ? 0 : -1 } /> ); } ) } - + ) ) } ); diff --git a/packages/components/src/alignment-matrix-control/utils.tsx b/packages/components/src/alignment-matrix-control/utils.tsx index ba5e113c42fc7f..7f0e2b08e3abfd 100644 --- a/packages/components/src/alignment-matrix-control/utils.tsx +++ b/packages/components/src/alignment-matrix-control/utils.tsx @@ -31,16 +31,28 @@ export const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = { export const ALIGNMENTS = GRID.flat(); /** - * Parses and transforms an incoming value to better match the alignment values + * Normalizes an incoming value to better match the alignment values + * + * @param value an alignment value to normalize + * + * @return The normalized value + */ +export function normalizeValue( value: AlignmentMatrixControlValue ) { + return value === 'center' ? 'center center' : value; +} + +/** + * Normalizes and transforms an incoming value to better match the alignment values * * @param value An alignment value to parse. * * @return The parsed value. */ export function transformValue( value: AlignmentMatrixControlValue ) { - const nextValue = value === 'center' ? 'center center' : value; - - return nextValue.replace( '-', ' ' ) as AlignmentMatrixControlValue; + return normalizeValue( value ).replace( + '-', + ' ' + ) as AlignmentMatrixControlValue; } /** @@ -60,6 +72,19 @@ export function getItemId( return `${ prefixId }-${ valueId }`; } +/** + * Extracts an item value from its ID + * + * @param prefixId An ID prefix to remove + * @param id An item ID + * @return The item value + */ +export function getItemValue( prefixId: string, id: string ) { + return transformValue( + id.replace( prefixId + '-', '' ) as AlignmentMatrixControlValue + ); +} + /** * Retrieves the alignment index from a value. *