fixes and simplification

Author: layershifter

docs/src/examples/components/List/Types/ListExample.tsx

@@ -1,29 +1,32 @@
 import { useBooleanKnob } from '@fluentui/docs-components'
-import { List, Image } from '@fluentui/react'
+import { ContextList as List, Image } from '@fluentui/react'
 import * as React from 'react'
 
 const ListExampleSelectable = () => {
   const [debug] = useBooleanKnob({ name: 'debug' })
 
   return (
-    <List debug={debug}>
+    <List defaultSelectedIndex={1} debug={debug} selectable>
       <List.Item
         media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
         header="Irving Kuhic"
         headerMedia="7:26:56 AM"
         content="Program the sensor to the SAS alarm through the haptic SQL card!"
+        index={0}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
         header="Skyler Parks"
         headerMedia="11:30:17 PM"
         content="Use the online FTP application to input the multi-byte application!"
+        index={1}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
         header="Dante Schneider"
         headerMedia="5:22:40 PM"
         content="The GB pixel is down, navigate the virtual interface!"
+        index={2}
       />
     </List>
   )

packages/react/src/components/ContextList/List.tsx

@@ -26,7 +26,7 @@ import {
   useStateManager,
 } from '@fluentui/react-bindings'
 import useStyles from './useStyles'
-import { useListProvider } from './ListContext'
+import { ListContext } from './ListContext'
 
 export interface ListSlotClassNames {
   item: string
@@ -125,15 +125,8 @@ const List: ListComponent = props => {
     mapPropsToStyles: () => props,
   })
 
-  const [Provider, value] = useListProvider({
-    debug: props.debug,
-    selectable: props.selectable,
-    navigable: props.navigable,
-    truncateContent: props.truncateContent,
-    truncateHeader: props.truncateHeader,
-    variables: props.variables,
-
-    onItemClick: (e, index) => {
+  const onItemClick = React.useCallback(
+    (e, index) => {
       if (selectable) {
         actions.select(index)
         _.invoke(props, 'onSelectedIndexChange', e, {
@@ -142,8 +135,20 @@ const List: ListComponent = props => {
         })
       }
     },
+    [actions, selectable],
+  )
+
+  const value = {
+    debug: props.debug,
+    selectable: props.selectable,
+    navigable: props.navigable,
+    truncateContent: props.truncateContent,
+    truncateHeader: props.truncateHeader,
+    variables: props.variables,
+
+    onItemClick,
     selectedIndex: state.selectedIndex,
-  })
+  }
 
   return (
     <ElementType
@@ -153,9 +158,9 @@ const List: ListComponent = props => {
         ...unhandledProps,
       })}
     >
-      <Provider value={value}>
+      <ListContext.Provider value={value}>
         {childrenExist(children) ? children : _.map(items, ListItem.create)}
-      </Provider>
+      </ListContext.Provider>
     </ElementType>
   )
 }

packages/react/src/components/ContextList/ListContext.ts

@@ -1,6 +1,7 @@
+import { ListItemProps } from '@fluentui/react'
 import * as React from 'react'
+
 import { createContext, useContextSelector } from './context'
-import { ListItemProps } from '@fluentui/react'
 
 type ListContextValue = {
   debug: ListItemProps['variables']
@@ -10,55 +11,14 @@ type ListContextValue = {
   truncateHeader: ListItemProps['truncateHeader']
   variables: ListItemProps['variables']
 
-  onItemClick: (index: number) => void
+  onItemClick: (e: React.MouseEvent, index: number) => void
   selectedIndex: number
 }
 
-const ListContext = createContext<ListContextValue>(null)
-
-export const useListProvider = props => {
-  const registeredItems = React.useRef([])
-
-  const registerChild = React.useCallback(child => {
-    let index = registeredItems.current.indexOf(child)
-
-    if (index === -1) {
-      index = registeredItems.current.push(child) - 1
-    }
-
-    return index
-  }, [])
-
-  const unregisterChild = React.useCallback(child => {
-    const index = registeredItems.current.indexOf(child)
-
-    registeredItems.current.splice(index, -1)
-  }, [])
-
-  const value = {
-    ...props,
-    registerChild,
-    unregisterChild,
-  }
-
-  return [ListContext.Provider, value]
-}
-
-export const useListConsumer = () => {
-  const ref = React.useRef(null)
+export const ListContext = createContext<ListContextValue>(null)
 
-  const registerChild = useContextSelector(ListContext, v => v.registerChild)
-  const unregisterChild = useContextSelector(ListContext, v => v.unregisterChild)
-
-  const currentIndex = registerChild(ref)
-
-  React.useEffect(() => {
-    return () => {
-      unregisterChild(ref)
-    }
-  }, [unregisterChild])
-
-  const selected = useContextSelector(ListContext, v => v.selectedIndex === currentIndex)
+export const useListConsumer = (index: number) => {
+  const selected = useContextSelector(ListContext, v => v.selectedIndex === index)
   const onClick = useContextSelector(ListContext, v => v.onItemClick)
   const debug = useContextSelector(ListContext, v => v.debug)
   const selectable = useContextSelector(ListContext, v => v.selectable)
@@ -67,19 +27,16 @@ export const useListConsumer = () => {
   const truncateHeader = useContextSelector(ListContext, v => v.truncateHeader)
   const variables = useContextSelector(ListContext, v => v.variables)
 
-  const selectedIndex = useContextSelector(ListContext, v => v.selectedIndex)
-
   return {
     selected,
     onClick: e => {
-      onClick(e, currentIndex)
+      onClick(e, index)
     },
     debug,
     selectable,
     navigable,
     truncateContent,
     truncateHeader,
     variables,
-    selectedIndex,
   }
 }

packages/react/src/components/ContextList/ListItem.tsx

@@ -87,7 +87,7 @@ const ListItem: ListItemComponent = props => {
   const ElementType = getElementType(props)
   const unhandledProps = getUnhandledProps(Object.keys(ListItem.propTypes) as any, props)
 
-  const parentProps = useListConsumer()
+  const parentProps = useListConsumer(props.index)
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     _.invoke(props, 'onClick', e, props)
     parentProps.onClick(e)