SimpleList

Component to show a list with one line of text per item

Properties

Name	Type	Default Value	Required	Description
items	SimpleListItemObj[] & ListItemObj[]		Yes	list of items of which a button will be rendered per item
title	string		No	optional title to use for the list
titleA11yLabel	string		No	optional a11y hint for the title
rightTitleText	string		No	optional text on the right on same row of title
rightTitleTextA11yLabel	string		No	optional a11y hint for the rightTitleText

Example

How to use the SimpleList component

const exampleList: Array<SimpleListItemObj> = 
[
    {
      text: 'the button',
      a11yHintText: 'press this button to do something',
      onPress: () => { console.log('button 1 pressed') },
      testId: 'line-1-on-the-button',
    },
    {
      text: 'the second button',
      a11yHintText: 'press this button to do something',
      onPress: () => { console.log('button 2 pressed') },
      testId: 'line-1-on-the-second-button',
    },
]

<SimpleList items={exampleList} />

Source Code

Full code for the SimpleList component

import React, { FC } from 'react'

import { generateTestIDForTextList } from 'utils/common'

import { TextLines } from './TextLines'
import { List, ListItemObj, ListProps } from './index'
import { TextLine } from './types'

/**
 * Signifies each item in the list of items in {@link SimpleListProps}
 */
export type SimpleListItemObj = {
  /** lines of text to display */
  text: string
} & Partial<ListItemObj>

/**
 * Props for {@link SimpleList}
 */
export type SimpleListProps = {
  items: Array<SimpleListItemObj>
} & Partial<ListProps>

/**Component to show a list with one line of text per item*/
const SimpleList: FC<SimpleListProps> = ({ items, title, titleA11yLabel }) => {
  const listItemObjs: Array<ListItemObj> = items.map((item: SimpleListItemObj) => {
    // Move all of the properties except text lines to the standard list item object
    const { text, testId, detoxTestID, ...listItemObj } = { ...item }

    const textLine: Array<TextLine> = [{ text } as TextLine]

    const testIdToUse = testId ? testId : generateTestIDForTextList(textLine)
    const content = <TextLines listOfText={textLine} />
    const detoxTestIDToUse = detoxTestID ? detoxTestID : testIdToUse

    return { ...listItemObj, content, testId: testIdToUse, detoxTestID: detoxTestIDToUse }
  })

  return <List items={listItemObjs} title={title} titleA11yLabel={titleA11yLabel} />
}

export default SimpleList

Accessibility