SimpleList
- Properties
- Example
- Source Code
- Accessibility
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 |
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} />
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