import * as RMWC from '@rmwc/types' ; import { ChipProps , ChipHTMLProps } from './' ; import { useId , emptyClientRect } from '@rmwc/base' ; import { useFoundation } from '@rmwc/base' ; import { MDCChipFoundation , MDCChipAdapter } from '@material/chips' ; import { EventSource } from '@material/chips/chip/constants' ; import React , { useEffect , useCallback } from 'react' ; export const useChipFoundation = ( props ) => { const chipId = useId ( 'chip' , props ) ; const foundationWithElements = useFoundation ( { props , elements : { rootEl : true , trailingIconEl : true , checkmarkEl : true } , foundation : ( { rootEl , checkmarkEl , emit , getProps } ) => new MDCChipFoundation ( { addClass : ( className ) => { rootEl . addClass ( className ) ; } , removeClass : ( className ) => rootEl . removeClass ( className ) , hasClass : ( className ) => rootEl . hasClass ( className ) , addClassToLeadingIcon : ( className ) => { } , removeClassFromLeadingIcon : ( className ) => { } , eventTargetHasClass : ( target , className ) => { return ( rootEl . hasClass ( className ) || target . classList . contains ( className ) ) ; } , notifyInteraction : ( ) => emit ( 'onInteraction' , { chipId } , true ) , notifySelection : ( selected ) => emit ( 'onSelect' , { chipId , selected : selected } , true ) , notifyTrailingIconInteraction : ( ) => emit ( 'onTrailingIconInteraction' , { chipId } , true ) , notifyRemoval : ( ) => emit ( 'onRemove' , { chipId , root : rootEl . ref } , true ) , notifyNavigation : ( key , source ) => { } , getComputedStyleValue : ( propertyName ) => rootEl . ref ? window . getComputedStyle ( rootEl . ref ) . getPropertyValue ( propertyName ) : '' , setStyleProperty : ( propertyName , value ) => { rootEl . setStyle ( propertyName , value ) ; } , getAttribute : ( attrName ) => rootEl . ref ?. getAttribute ( attrName ) , hasLeadingIcon : ( ) => ! ! props . icon , getRootBoundingClientRect : ( ) => rootEl . ref ?. getBoundingClientRect ( ) || emptyClientRect , getCheckmarkBoundingClientRect : ( ) => checkmarkEl . ref ?. getBoundingClientRect ( ) || emptyClientRect , setPrimaryActionAttr : ( attr , value ) => { } , focusPrimaryAction : ( ) => { } , hasTrailingAction : ( ) => { return ! ! getProps ( ) . trailingIcon ; } , setTrailingActionAttr : ( attr , value ) => { const safeAttr = attr === 'tabindex' ? 'tabIndex' : attr ; trailingIconEl . setProp ( safeAttr as any , value ) ; } , focusTrailingAction : ( ) => { trailingIconEl . ref ?. focus ( ) ; } , isRTL : ( ) => { return rootEl . ref ? window . getComputedStyle ( rootEl . ref ) . getPropertyValue ( 'direction' ) === 'rtl' : false ; } } as MDCChipAdapter ) } ) ; const { rootEl , trailingIconEl , foundation } = foundationWithElements ; const handleInteraction = useCallback ( ( evt ) => { evt . type === 'click' && props . onClick ?. ( evt as any ) ; evt . type === 'keydown' && props . onKeyDown ?. ( evt as any ) ; return foundation . handleInteraction ( evt ) ; } , [ foundation , props . onClick , props . onKeyDown ] ) ; const handleTransitionEnd = useCallback ( ( evt ) => { foundation . handleTransitionEnd ( evt ) ; } , [ foundation ] ) ; const handleTrailingIconInteraction = useCallback ( ( evt ) => { return foundation . handleTrailingIconInteraction ( evt ) ; } , [ foundation ] ) ; useEffect ( ( ) => { foundation . setShouldRemoveOnTrailingIconClick ( props . trailingIconRemovesChip ?? true ) ; } , [ foundation , props . trailingIconRemovesChip ] ) ; rootEl . setProp ( 'onClick' , handleInteraction , true ) ; rootEl . setProp ( 'onKeyDown' , handleInteraction , true ) ; rootEl . setProp ( 'onTransitionEnd' , handleTransitionEnd , true ) ; trailingIconEl . setProp ( 'onClick' , handleTrailingIconInteraction , true ) ; trailingIconEl . setProp ( 'onKeyDown' , handleTrailingIconInteraction , true ) ; return foundationWithElements ; } ;