Sha256: 1e0c22763d85bcde864d6a4d616ffd397e0ac7285ed482cfbf71c35ed9196631

Contents?: true

Size: 1.78 KB

Versions: 70

Compression:

Stored size: 1.78 KB

Contents

/* @flow */
import React, { useState } from 'react'
import classnames from 'classnames'

import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'

import List from  '../pb_list/_list'
import SelectableListItem from './_item.jsx'

type SelectableListProps = {
  aria?: object,
  children?: Node,
  className?: string,
  data?: object,
  id?: string,
  variant?: 'checkbox' | 'radio',
}

const SelectableList = (props: SelectableListProps) => {
  const {
    aria = {},
    children,
    className,
    data = {},
    id,
  } = props

  const ariaProps = buildAriaProps(aria)
  const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
  const dataProps = buildDataProps(data)
  const isRadio = props.variant === "radio"
  const defaultCheckedRadioValue = children.filter(item => item.props.defaultChecked)[0]?.props?.value
  const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
  
  const onChangeRadioValue = ({ target }) => {
    setSelectedRadioValue(target.value)
  }

  let selectableListItems = children

  if (isRadio) {
    selectableListItems = children.map(({ props }) => {
      return (
        <SelectableListItem
            {...props}
            className={classnames(selectedRadioValue === props.value ? "checked_item" : "", props.className)}
            key={props.value}
            onChange={evt => { onChangeRadioValue(evt); props?.onChange?.(evt); }}
        />
      )
    })
  }
  
  return (
    <div
        {...ariaProps}
        {...dataProps}
        className={classes}
        id={id}
    >
      <List {...props}>
        {selectableListItems}
      </List>
    </div>
  )
}

SelectableList.Item = SelectableListItem

export default SelectableList

Version data entries

70 entries across 70 versions & 1 rubygems

Version Path
playbook_ui-11.15.0.pre.alpha.dependencies1 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.16.0.pre.alpha.paginationrails1 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.16.0 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.16.0.pre.alpha.reactupgrade1 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.15.0.pre.alpha.table1 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.16.0.pre.alpha.pagination.rails1 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.15.0 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.14.0 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.13.0.pre.alpha.fontawesome1 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
playbook_ui-11.13.0 app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx