All files / molecule/accordion/src AccordionItemHeaderIconDefault.js

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
 
 
 
 
 
 
 
 
 
1x
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
import {forwardRef} from 'react'
 
import cx from 'classnames'
import PropTypes from 'prop-types'
 
import Poly from '@s-ui/react-primitive-polymorphic-element'
 
import {BASE_CLASS_ITEM_HEADER_ICON} from './settings.js'
 
const AccordionItemHeaderIconDefault = forwardRef(
  ({as = 'i', children, isExpanded, animationDuration}, forwardedRef) => (
    <Poly
      as={as}
      ref={forwardedRef}
      className={cx(`${BASE_CLASS_ITEM_HEADER_ICON}Default`, {
        [`${BASE_CLASS_ITEM_HEADER_ICON}Default--expanded`]: isExpanded
      })}
      style={{
        transition: `transform ${animationDuration}ms ${isExpanded ? 'ease-out' : 'ease-in'}`
      }}
    >
      {children}
    </Poly>
  )
)
 
AccordionItemHeaderIconDefault.displayName = 'AccordionItemHeaderIconDefault'
 
AccordionItemHeaderIconDefault.propTypes = {
  /** The elementType of the wrapper **/
  as: PropTypes.elementType,
  /** The animation duration in ms **/
  animationDuration: PropTypes.number,
  /** child element **/
  children: PropTypes.node,
  /** controlled expanded accordion item behavior */
  isExpanded: PropTypes.bool
}
 
export default AccordionItemHeaderIconDefault