List

A common component for showing a list of <ListItem>.

Properties

Name	Type	Default Value	Required	Description
items	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

Example

How to use the List component

import { List, ListItemObj } from 'components'
    const listExample: Array<ListItemObj> = [
        { content: <TextView>'My Title 1'</TextView>, a11yHintText: 'Hint 1', onPress: () => { console.log('button 1 pressed') } },
        { content: <TextView>'My Title 2'</TextView>, a11yHintText: 'Hint 2', onPress: () => { console.log('button 2 pressed') } },
    ]

<List items={listExample} />

Source Code

Full code for the List component

import React, { FC } from 'react'

import { useTheme } from 'utils/hooks'

import BaseListItem, { BaseListItemProps } from './BaseListItem'
import Box from './Box'
import { SwitchProps } from './Switch'
import { TextViewProps } from './TextView'
import { TextView } from './index'

/**
 * Signifies each item in the list of items in {@link ListProps}
 */
export type ListItemObj = {
  /** optional text to use as the button's accessibility hint */
  a11yHintText?: string

  /** display content for the item */
  content?: React.ReactNode

  /** on press event */
  onPress?: () => void

  /** request file number for file indicator */
  requestNumber?: number

  /** request file if file was loaded */
  fileUploaded?: boolean
} & Partial<BaseListItemProps>

/**
 * Props for {@link List}
 */
export type ListProps = {
  /** list of items of which a button will be rendered per item */
  items: Array<ListItemObj>

  /** optional title to use for the list */
  title?: string

  /**optional a11y hint for the title */
  titleA11yLabel?: string
}

/**
 * A common component for showing a list of <ListItem>.
 */
const List: FC<ListProps> = ({ items, title, titleA11yLabel }) => {
  const theme = useTheme()
  const { gutter, condensedMarginBetween, standardMarginBetween } = theme.dimensions

  const titleProps: TextViewProps = {
    variant: 'TableHeaderBold',
    mx: gutter,
    mb: condensedMarginBetween,
    mt: standardMarginBetween,
    accessibilityRole: 'header',
  }

  const buttons = items.map((item, index) => {
    const { content, a11yHintText, decoratorProps } = item
    const dProps = decoratorProps as Partial<SwitchProps>

    return (
      <BaseListItem key={index} a11yHint={a11yHintText || dProps?.a11yHint || ''} {...item}>
        {content}
      </BaseListItem>
    )
  })

  return (
    <Box>
      {title && (
        <TextView
          {...titleProps}
          accessibilityLabel={titleA11yLabel}
          testID={titleA11yLabel || title}
          accessible={true}>
          {title}
        </TextView>
      )}
      <Box borderTopWidth={theme.dimensions.borderWidth} borderStyle="solid" borderColor="primary">
        <Box backgroundColor={'list'}>{buttons}</Box>
      </Box>
    </Box>
  )
}

export default List

Accessibility