import React from 'react' ; import { useMountLayout , createHook } from '@workday/canvas-kit-react/common' ; import { ListModel } from './useListModel' ; /**
 * Registers an item with a list. It will return elemProps with a `name` which can be used by other
 * hooks to identify the item in the list.
 */ export const useListRegisterItem = createHook ( ( { state , events , getId } , _ ? , elemProps = { } ) => { const [ localId , setLocalId ] = React . useState ( elemProps . name || '' ) ; const firstRender = React . useRef ( true ) ; React . useLayoutEffect ( ( ) => { if ( elemProps . index !== undefined && ! firstRender . current ) { events . updateItemPosition ( { id : localId , index : elemProps . index } ) ; } } , [ elemProps . index ] ) ; useMountLayout ( ( ) => { const defaultId = state . indexRef . current ; const itemId = elemProps . name || String ( defaultId ) ; if ( state . items . find ( item => getId ( item ) === elemProps . name ) ) { return ; } events . registerItem ( { item : { id : itemId } , index : elemProps . index , } ) ; setLocalId ( itemId ) ; firstRender . current = false ; return ( ) => { events . unregisterItem ( { id : itemId } ) ; } ; } ) ; return { 'data-name' : localId , name : localId , disabled : elemProps . disabled || state . nonInteractiveIds . includes ( localId ) ? true : undefined , } ; } ) ;