feat: Open NestedSelect to a specific element

The NestedSelect can now open at the specific child level.

To do this, all options must have the `id` attribute (at least the element sought), and specify the value of this `id` in the `focusedId` attribute at the root of the options.

See the documentation for the example.

Author: Merkur39

react/NestedSelect/NestedSelect.jsx

@@ -6,6 +6,7 @@ import List from '../List'
 import Input from '../Input'
 import Typography from '../Typography'
 import ItemRow from './ItemRow'
+import { makeHistory } from './helpers'
 
 export { ItemRow }
 
@@ -31,7 +32,7 @@ const NestedSelect = ({
 }) => {
   const innerRef = useRef()
   const [state, setState] = useState({
-    history: [options],
+    history: makeHistory(options, canSelectParent),
     searchValue: '',
     searchResult: []
   })
@@ -189,6 +190,8 @@ NestedSelect.defaultProps = {
 }
 
 const ItemPropType = PropTypes.shape({
+  /** Used to open NestedSelect on the element with this "id" value */
+  focusedId: PropTypes.string,
   /** Header shown above options list */
   header: PropTypes.node,
   icon: PropTypes.element,

react/NestedSelect/NestedSelect.md

@@ -1,5 +1,8 @@
 You can use `react/NestedSelect/NestedSelectResponsive` wich provides automaticaly a modal on desktop and bottomsheet on mobile, or directly `react/NestedSelect/Modal` and `react/NestedSelect/BottomSheet`.
 
+You can open the NestedSelect where a specific item is located, for this your items must have a ***id*** attribute and add the ***focusedId*** attribute to the root of the options.
+See below for example
+
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Variants from 'cozy-ui/docs/components/Variants'
@@ -26,7 +29,7 @@ const Image = ({ letter }) => (
 )
 
 const letterOption = (letter, description, key) => ({
-  id: letter,
+  id: `${letter}${key ? `_${key}` : ''}`,
   title: letter,
   description,
   key,
@@ -43,7 +46,8 @@ const SettingAction = ({ item, onClick }) => {
   )
 }
 
-const makeOptions = withHeaders => ({
+const makeOptions = ({ withHeaders, focusedId } = {}) => ({
+  focusedId,
   header: withHeaders ?
     <Alert className="u-mt-1 u-mh-1" icon={false}>This is a header for options</Alert>
     : undefined,
@@ -131,34 +135,25 @@ const StaticExample = () => {
 
 const RADIO_BUTTON_ANIM_DURATION = 500
 
-// Crude parent-children relationship
-const isParent = (item, childItem) => {
-  return childItem.title.includes(item.title)
-}
-
 const InteractiveExample = () => {
   const [showingModal, setShowingModal] = useState(false)
-  const [selectedItem, setSelected] = useState({ title: 'A' })
+  const [selectedItem, setSelected] = useState(letterOption('A'))
 
   const showModal = () => setShowingModal(true)
   const hideModal = () => setShowingModal(false)
 
-  const isSelected = (item, level) => {
+  const isSelected = item => {
     if (!selectedItem) {
       return false
-    } else if (level === 0 && isParent(item, selectedItem)) {
-      return true
-    } else if (item.title === selectedItem.title) {
-      return true
     }
-    return false
+    return item.id === selectedItem.id
   }
 
   const searchOptions = withHeaders => ({
     placeholderSearch: 'Placeholder Search',
     noDataLabel: 'No Data Found',
     onSearch: (value) => {
-      const options = makeOptions(withHeaders)
+      const options = makeOptions({ withHeaders })
       return options.children.filter(o => o.description && o.description.toLowerCase().includes(value.toLowerCase()))
     },
     displaySearchResultItem: item =>
@@ -200,7 +195,7 @@ const InteractiveExample = () => {
               onSelect={handleSelect}
               onClose={hideModal}
               isSelected={isSelected}
-              options={makeOptions(variant.withHeaders)}
+              options={makeOptions({withHeaders: variant.withHeaders, focusedId: selectedItem.id})}
               radioPosition={variant.leftRadio ? 'left' : 'right'}
               title={variant.noTitle ? undefined : "Please select letter"}
               transformParentItem={transformParentItem}

react/NestedSelect/NestedSelect.spec.jsx

@@ -1,95 +1,130 @@
 import React from 'react'
+import '@testing-library/jest-dom'
 import { render, fireEvent } from '@testing-library/react'
 
-import NestedSelect, { ItemRow } from './NestedSelect'
-import ListItem from '../ListItem'
+import NestedSelect from './NestedSelect'
 import { BreakpointsProvider } from '../providers/Breakpoints'
 
 describe('NestedSelect', () => {
-  const options = {
+  const makeOption = text => ({
+    id: text,
+    key: text,
+    title: text
+  })
+  const makeOptions = itemSelected => ({
+    focusedId: itemSelected?.title,
     children: [
-      { title: 'A' },
-      { title: 'B', children: [{ title: 'B1' }, { title: 'B2' }] },
-      { title: 'C' }
+      makeOption('A'),
+      {
+        ...makeOption('B'),
+        children: [makeOption('B1'), makeOption('B2')]
+      },
+      makeOption('C')
     ]
-  }
+  })
 
-  const findSelectedRow = root => {
-    return root.findWhere(n => {
-      if (n.type() != ItemRow) {
+  const setup = ({
+    canSelectParent,
+    itemSelected,
+    searchOptions,
+    onSelect = jest.fn(),
+    onCancel = jest.fn()
+  } = {}) => {
+    const isSelected = item => {
+      if (!itemSelected) {
         return false
       }
-      return n.props().isSelected
-    })
-  }
-
-  const simulateClick = row =>
-    row
-      .find(ListItem)
-      .props()
-      .onClick()
-
-  const setup = ({ canSelectParent, itemSelected, searchOptions }) => {
-    // Very crude notion of parenting
-    const isParent = (item, childItem) => {
-      return childItem && childItem.title.includes(item.title)
+      return item.title === itemSelected.title
     }
 
-    const isSelected = (item, level) => {
-      if (level === 0 && isParent(item, itemSelected)) {
-        return true
-      } else if (itemSelected && itemSelected.title === item.title) {
-        return true
-      } else {
-        return false
-      }
-    }
+    const options = makeOptions(itemSelected)
 
-    const use = searchOptions ? render : mount
-    const root = use(
+    return render(
       <BreakpointsProvider>
         <NestedSelect
           canSelectParent={canSelectParent}
           options={options}
           isSelected={isSelected}
-          onSelect={jest.fn()}
-          onCancel={jest.fn()}
+          onSelect={onSelect}
+          onCancel={onCancel}
           searchOptions={searchOptions}
         />
       </BreakpointsProvider>
     )
-    return { root }
   }
 
-  describe('when selecting a normal category', () => {
-    it('should show only one selected item', () => {
-      const { root } = setup({
-        itemSelected: { title: 'B1' }
-      })
-      const selectedRow = findSelectedRow(root)
-      expect(selectedRow.length).toBe(1)
-      expect(selectedRow.text()).toBe('B')
-      simulateClick(selectedRow)
-      root.update()
-
-      const selectedRow2 = findSelectedRow(root)
-      expect(selectedRow2.length).toBe(1)
-      expect(selectedRow2.text()).toBe('B1')
+  describe('when no item is already selected', () => {
+    it('should show only children items after click on parent', () => {
+      const { queryByText } = setup()
+      const selectedRow = queryByText('B')
+      expect(selectedRow).toBeInTheDocument()
+      fireEvent.click(selectedRow)
+
+      const selectedRowB = queryByText('B')
+      const selectedRowB1 = queryByText('B1')
+      const selectedRowB2 = queryByText('B2')
+
+      expect(selectedRowB).toBeNull()
+      expect(selectedRowB1).toBeInTheDocument()
+      expect(selectedRowB2).toBeInTheDocument()
+    })
+
+    it('should show parent item & children items after click on parent', () => {
+      const { queryByText } = setup({ canSelectParent: true })
+      const selectedRow = queryByText('B')
+      expect(selectedRow).toBeInTheDocument()
+      fireEvent.click(selectedRow)
+
+      const selectedRowB = queryByText('B')
+      const selectedRowB1 = queryByText('B1')
+      const selectedRowB2 = queryByText('B2')
+      expect(selectedRowB).toBeInTheDocument()
+      expect(selectedRowB1).toBeInTheDocument()
+      expect(selectedRowB2).toBeInTheDocument()
     })
   })
 
-  describe('when allowing parent to be selected', () => {
-    it('should show a line for the parent inside the category', () => {
-      const { root } = setup({
-        itemSelected: { title: 'B1' },
+  describe('when item is already selected', () => {
+    it('should show the selected item', () => {
+      const { queryByText } = setup({ itemSelected: { title: 'B1' } })
+
+      const selectedRowB = queryByText('B')
+      const selectedRowB1 = queryByText('B1')
+      const selectedRowB2 = queryByText('B2')
+
+      expect(selectedRowB).toBeNull()
+      expect(selectedRowB1).toBeInTheDocument()
+      expect(selectedRowB2).toBeInTheDocument()
+    })
+    it('should show the selected item (with parent)', () => {
+      const { queryByText } = setup({
+        itemSelected: { title: 'B1', id: 'B1' },
         canSelectParent: true
       })
-      const selectedRow = findSelectedRow(root)
-      expect(selectedRow.length).toBe(1)
-      simulateClick(selectedRow)
-      root.update()
 
-      expect(root.find(ItemRow).length).toBe(3)
+      const selectedRowB = queryByText('B')
+      const selectedRowB1 = queryByText('B1')
+      const selectedRowB2 = queryByText('B2')
+
+      expect(selectedRowB).toBeInTheDocument()
+      expect(selectedRowB1).toBeInTheDocument()
+      expect(selectedRowB2).toBeInTheDocument()
+    })
+  })
+
+  describe('when clicking on an item', () => {
+    it("should call onSelect with the selected item (who doesn't have children)", () => {
+      const onSelect = jest.fn()
+      const { queryByText } = setup({ onSelect })
+      const selectedRowB = queryByText('B')
+      fireEvent.click(selectedRowB)
+
+      expect(onSelect).not.toHaveBeenCalled()
+
+      const selectedRowB1 = queryByText('B1')
+      fireEvent.click(selectedRowB1)
+
+      expect(onSelect).toHaveBeenCalledWith(makeOption('B1'))
     })
   })
 
@@ -102,12 +137,12 @@ describe('NestedSelect', () => {
           return []
         }
       }
-      const { root } = setup({
+      const { getByText, queryByPlaceholderText } = setup({
         searchOptions
       })
 
-      fireEvent.click(root.getByText('B'))
-      expect(root.queryByPlaceholderText('Placeholder Search')).toBeFalsy()
+      fireEvent.click(getByText('B'))
+      expect(queryByPlaceholderText('Placeholder Search')).toBeFalsy()
     })
 
     it('should return no data (onSearch return [])', () => {
@@ -118,14 +153,14 @@ describe('NestedSelect', () => {
           return []
         }
       }
-      const { root } = setup({
+      const { getByPlaceholderText, getByText } = setup({
         searchOptions
       })
-      const searchInput = root.getByPlaceholderText('Placeholder Search')
+      const searchInput = getByPlaceholderText('Placeholder Search')
       expect(searchInput).toBeTruthy()
 
       fireEvent.change(searchInput, { target: { value: 'cozy' } })
-      const noData = root.getByText('No Data Found')
+      const noData = getByText('No Data Found')
       expect(noData).toBeTruthy()
     })
 
@@ -143,20 +178,19 @@ describe('NestedSelect', () => {
           return data.filter(d => d.title.startsWith(value))
         }
       }
-      const { root } = setup({
-        itemSelected: { title: 'B1' },
+      const { getByPlaceholderText, queryByText } = setup({
         canSelectParent: true,
         searchOptions
       })
 
-      const searchInput = root.getByPlaceholderText('Placeholder Search')
+      const searchInput = getByPlaceholderText('Placeholder Search')
       expect(searchInput).toBeTruthy()
 
       fireEvent.change(searchInput, { target: { value: 'cozy' } })
 
-      expect(root.queryByText('cozy 1')).toBeTruthy()
-      expect(root.queryByText('cozy 1')).toBeTruthy()
-      expect(root.queryByText('anything')).toBeFalsy()
+      expect(queryByText('cozy 1')).toBeTruthy()
+      expect(queryByText('cozy 1')).toBeTruthy()
+      expect(queryByText('anything')).toBeFalsy()
     })
   })
 })

react/NestedSelect/helpers.js

@@ -0,0 +1,35 @@
+/**
+ * @param {import('../types').NestedSelectOption} options
+ * @param {boolean} canSelectParent
+ * @returns {import('../types').NestedSelectOption[]}
+ */
+export const makeHistory = (options, canSelectParent) => {
+  if (!options) return []
+
+  const focusedId = options.focusedId ?? null
+  if (!focusedId) return [options]
+
+  const result = []
+  const findElement = opts => {
+    const itemFound = opts.children?.some(
+      child => child.id === focusedId || findElement(child)
+    )
+    if (itemFound) {
+      if (canSelectParent) {
+        const item = opts.children.find(child => child.id === focusedId)
+        if (item?.children) result.push(item)
+      }
+      result.push(opts)
+      return true
+    }
+    return false
+  }
+  findElement(options)
+
+  if (result.length === 0) {
+    console.log('No item found with id', focusedId)
+    result.push(options)
+  }
+
+  return result
+}