Sha256: dc177b10d863b14b57b83c7435c2db7b466eea2747bee7f8a0fd9bb336e7f443
Contents?: true
Size: 1.9 KB
Versions: 28
Compression:
Stored size: 1.9 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import { Icon } from '../'
import type { InputCallback } from '../types'
import {
buildAriaProps,
buildCss,
buildDataProps,
noop,
} from '../utilities/props'
type Props = {
aria: Object,
checked: Boolean,
children?: Array<React.ReactChild>,
className?: String,
dark?: Boolean,
data: Object,
disabled?: Boolean,
icon?: Boolean,
id?: String,
inputId?: String,
multi?: Boolean,
name?: String,
onChange: InputCallback<HTMLInputElement>,
text?: String,
value?: String
}
const SelectableCard = ({
aria = {},
checked = false,
children,
className,
dark = false,
data = {},
disabled = false,
icon = false,
inputId = null,
multi = true,
name,
onChange = noop,
text,
value,
...props
}: Props) => {
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
const css = buildCss({
'pb_selectable_card_kit': true,
'checked': checked,
'dark': dark,
'disabled': disabled,
'enabled': !disabled,
})
const displayIcon = () => {
if (icon === true) {
return (
<div className="pb_selectable_card_circle">
<Icon
fixedWidth
icon="check"
/>
</div>
)
}
}
const inputType = multi === false ? 'radio' : 'checkbox'
const inputIdPresent = inputId !== null ? inputId : name
return (
<div
{...ariaProps}
{...dataProps}
className={classnames(css, className)}
>
<input
{...props}
checked={checked}
disabled={disabled}
id={inputIdPresent}
name={name}
onChange={onChange}
type={inputType}
value={value}
/>
<label htmlFor={inputIdPresent}>
{ text || children }
{displayIcon()}
</label>
</div>
)
}
export default SelectableCard
Version data entries
28 entries across 28 versions & 1 rubygems