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