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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 1x 7x 1x 1x | import {forwardRef} from 'react'
import {isFragment} from 'react-is'
import PropTypes from 'prop-types'
import Poly from '@s-ui/react-primitive-polymorphic-element'
import {AccordionProvider} from './context/index.js'
import AccordionItem from './AccordionItem.js'
import AccordionItemHeader from './AccordionItemHeader.js'
import AccordionItemHeaderIcon from './AccordionItemHeaderIcon.js'
import AccordionItemPanel from './AccordionItemPanel.js'
import {
ANIMATION_DURATION,
BASE_CLASS,
BEHAVIOR,
HEADER_ICON_POSITION,
HEADER_LABEL_WRAPS,
SPACING
} from './settings.js'
const MoleculeAccordion = forwardRef(
(
{
as: As = 'div',
values,
defaultValues = [],
onChange,
behavior,
children,
animationDuration = ANIMATION_DURATION.NORMAL,
headerIconExpanded,
headerIconCollapsed,
headerLabelWrap = HEADER_LABEL_WRAPS.NO_WRAP,
headerIconPosition = HEADER_ICON_POSITION.RIGHT,
maxHeight = 0
},
forwardedRef
) => {
return (
<Poly as={As} {...(!isFragment(<As />) && {ref: forwardedRef, className: BASE_CLASS})}>
<AccordionProvider
values={values}
defaultValues={defaultValues}
onChange={onChange}
behavior={behavior}
animationDuration={animationDuration}
headerIconExpanded={headerIconExpanded}
headerIconCollapsed={headerIconCollapsed}
headerIconPosition={headerIconPosition}
headerLabelWrap={headerLabelWrap}
maxHeight={maxHeight}
>
{children}
</AccordionProvider>
</Poly>
)
}
)
MoleculeAccordion.displayName = 'MoleculeAccordion'
MoleculeAccordion.propTypes = {
/** The elementType of the wrapper **/
as: PropTypes.elementType,
/** The animation duration in ms **/
animationDuration: PropTypes.number,
/** The change default behavior **/
behavior: PropTypes.oneOf(Object.values(BEHAVIOR)),
/** child element **/
children: PropTypes.node,
/** The space AccordionItems **/
gap: PropTypes.oneOf(Object.values(SPACING)),
/** the max height limit a panel can reach when its expanded **/
maxHeight: PropTypes.number,
/** The initial opened values **/
defaultValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
/** The opened values **/
values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
/** handler fired everytime an item changes its collapsed/expanded state **/
onChange: PropTypes.func,
/** The header Icon element expanded **/
headerIconExpanded: PropTypes.node,
/** The header Icon element collapsed **/
headerIconCollapsed: PropTypes.node,
/** where the icon is header positioned */
headerIconPosition: PropTypes.oneOf(Object.values(HEADER_ICON_POSITION)),
/** Defines the wrap behavior of the header label */
headerLabelWrap: PropTypes.oneOf(Object.values(HEADER_LABEL_WRAPS))
}
export {
MoleculeAccordion,
AccordionItem as MoleculeAccordionItem,
AccordionItemHeader as MoleculeAccordionItemHeader,
AccordionItemHeaderIcon as MoleculeAccordionItemHeaderIcon,
AccordionItemPanel as MoleculeAccordionItemPanel,
BEHAVIOR as moleculeAccordionBehavior,
ANIMATION_DURATION as moleculeAccordionAnimationDuration,
HEADER_ICON_POSITION as moleculeAccordionHeaderIconPosition,
HEADER_LABEL_WRAPS as moleculeAccordionHeaderLabelWraps
}
export default MoleculeAccordion
|