DefaultList

Component to show a list composed of lines of display text built using TextLines

Properties

Name	Type	Default Value	Required	Description
items	DefaultListItemObj[] & ListItemObj[]		Yes	list of items of which a button will be rendered per item
selectable	boolean		No	if true the text will be selectable
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 DefaultList component

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

<DefaultList items={exampleList} />

Source Code

Full code for the DefaultList 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 DefaultListProps}
 */
export type DefaultListItemObj = {
  /** lines of text to display */
  textLines: Array<TextLine>
} & Partial<ListItemObj>

/**
 * Props for {@link DefaultList}
 */
export type DefaultListProps = {
  /** list of items of which a button will be rendered per item */
  items: Array<DefaultListItemObj>
  /** if true the text will be selectable */
  selectable?: boolean
} & Partial<ListProps>

/**
 *Component to show a list composed of lines of display text built using TextLines
 */
const DefaultList: FC<DefaultListProps> = ({
  items,
  title,
  titleA11yLabel,
  rightTitleTextA11yLabel,
  rightTitleText,
  selectable,
}) => {
  const listItemObjs: Array<ListItemObj> = items.map((item) => {
    // Move all of the properties except text lines to the standard list item object
    const { textLines, testId, detoxTestID, ...listItemObj } = { ...item }
    const testIdToUse = testId ? testId : generateTestIDForTextList(textLines)
    const detoxTestIDToUse = detoxTestID ? detoxTestID : testIdToUse

    const content = <TextLines listOfText={textLines} selectable={selectable} />

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

  return (
    <List
      items={listItemObjs}
      title={title}
      titleA11yLabel={titleA11yLabel}
      rightTitleText={rightTitleText}
      rightTitleTextA11yLabel={rightTitleTextA11yLabel}
    />
  )
}

export default DefaultList

Accessibility