Sha256: 9acc34119852fc8f293ae6522e6538279207f88bb3f749dbbb8f82d759e65f99
Contents?: true
Size: 1.97 KB
Versions: 255
Compression:
Stored size: 1.97 KB
Contents
import React, { useState } from 'react'
import classnames from 'classnames'
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'
import { SelectableListItemProps } from './_item.js'
import List from '../pb_list/_list'
import SelectableListItem from './_item'
type SelectableListProps = {
aria?: {[key: string]: string },
children?: React.ReactElement[],
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: {props:SelectableListItemProps} ) => item.props.defaultChecked)[0]?.props?.value
const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
const onChangeRadioValue = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
setSelectedRadioValue(target.value)
}
let selectableListItems = children
if (isRadio) {
selectableListItems = children.map(( {props}: {props:SelectableListItemProps} ) => {
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 variant={props.variant}>
{selectableListItems}
</List>
</div>
)
}
SelectableList.Item = SelectableListItem
export default SelectableList
Version data entries
255 entries across 255 versions & 1 rubygems