Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 5x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import Poly from '@s-ui/react-primitive-polymorphic-element'
import AccordionItemHeaderIcon from './AccordionItemHeaderIcon.js'
import {BASE_CLASS_ITEM_HEADER, BASE_CLASS_ITEM_HEADER_ICON, HEADER_LABEL_WRAPS} from './settings.js'
const AccordionItemHeaderChildrenDefault = ({
as = 'div',
label,
labelWrap,
icon,
value,
values,
disabled,
animationDuration
}) => (
<Poly as={as} className={cx(`${BASE_CLASS_ITEM_HEADER}ButtonContainer`)}>
<div
className={cx(`${BASE_CLASS_ITEM_HEADER}ButtonContent`, `${BASE_CLASS_ITEM_HEADER}ButtonContent--${labelWrap}`)}
>
{label}
</div>
<div className={`${BASE_CLASS_ITEM_HEADER_ICON}Wrapper`}>
<AccordionItemHeaderIcon
isExpanded={values.includes(value)}
animationDuration={animationDuration}
disabled={disabled}
>
{icon}
</AccordionItemHeaderIcon>
</div>
</Poly>
)
AccordionItemHeaderChildrenDefault.displayName = 'AccordionItemHeaderChildrenDefault'
AccordionItemHeaderChildrenDefault.propTypes = {
/** The elementType of the wrapper **/
as: PropTypes.elementType,
/** The animation duration in ms **/
animationDuration: PropTypes.number,
/** element enabled or not **/
disabled: PropTypes.bool,
/** The header Icon element **/
icon: PropTypes.node,
/** appropriate for the information architecture of the page **/
label: PropTypes.string.isRequired,
/** Defines the wrap behavior of the header label */
labelWrap: PropTypes.oneOf(Object.values(HEADER_LABEL_WRAPS)),
/** the unique value of the element **/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
/** The opened values **/
values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
}
export default AccordionItemHeaderChildrenDefault
|