|
| 1 | +import { useClassName, useToggle } from '@rocket.chat/fuselage-hooks'; |
| 2 | +import PropTypes from 'prop-types'; |
| 3 | +import React from 'react'; |
| 4 | + |
| 5 | +import { useTheme } from '../../hooks/useTheme'; |
| 6 | +import { Icon } from '../Icon'; |
| 7 | +import { ToggleSwitch } from '../ToggleSwitch'; |
| 8 | +import { StyledAccordionItem, Bar, Title, Panel } from './styles'; |
| 9 | + |
| 10 | +export const Item = React.forwardRef(function Item({ |
| 11 | + children, |
| 12 | + className, |
| 13 | + defaultExpanded, |
| 14 | + disabled, |
| 15 | + expanded, |
| 16 | + tabIndex = 0, |
| 17 | + title, |
| 18 | + onToggle, |
| 19 | + onToggleEnabled, |
| 20 | + ...props |
| 21 | +}, ref) { |
| 22 | + const classNames = { |
| 23 | + bar: useClassName('rcx-accordion-item__bar', {}, className), |
| 24 | + title: useClassName('rcx-accordion-item__title'), |
| 25 | + toggleBtn: useClassName('rcx-accordion-item__toggle-button'), |
| 26 | + }; |
| 27 | + const theme = useTheme(); |
| 28 | + |
| 29 | + const [internalExpanded, toggleExpanded] = useToggle(defaultExpanded); |
| 30 | + |
| 31 | + const handleClick = (event) => { |
| 32 | + if (disabled) { |
| 33 | + return; |
| 34 | + } |
| 35 | + |
| 36 | + if (onToggle) { |
| 37 | + return onToggle.call(event.currentTarget, event); |
| 38 | + } |
| 39 | + |
| 40 | + toggleExpanded(); |
| 41 | + }; |
| 42 | + |
| 43 | + const handleKeyDown = (event) => { |
| 44 | + if (disabled || event.currentTarget !== event.target) { |
| 45 | + return; |
| 46 | + } |
| 47 | + |
| 48 | + if (event.keyCode === 32) { |
| 49 | + event.preventDefault(); |
| 50 | + |
| 51 | + if (event.repeat) { |
| 52 | + return; |
| 53 | + } |
| 54 | + |
| 55 | + if (onToggle) { |
| 56 | + return onToggle.call(event.currentTarget, event); |
| 57 | + } |
| 58 | + |
| 59 | + toggleExpanded(); |
| 60 | + } |
| 61 | + }; |
| 62 | + |
| 63 | + const handleToggleClick = (event) => { |
| 64 | + event.stopPropagation(); |
| 65 | + }; |
| 66 | + |
| 67 | + return <StyledAccordionItem theme={theme} {...props}> |
| 68 | + <Bar |
| 69 | + aria-checked={expanded || internalExpanded ? 'true' : 'false'} |
| 70 | + className={classNames.bar} |
| 71 | + disabled={disabled} |
| 72 | + expanded={expanded || internalExpanded} |
| 73 | + ref={ref} |
| 74 | + role='switch' |
| 75 | + tabIndex={!disabled ? tabIndex : undefined} |
| 76 | + theme={theme} |
| 77 | + onClick={handleClick} |
| 78 | + onKeyDown={handleKeyDown} |
| 79 | + > |
| 80 | + <Title className={classNames.bar} theme={theme}>{title}</Title> |
| 81 | + {(disabled || onToggleEnabled) |
| 82 | + && <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />} |
| 83 | + <Icon name={'arrow-down'} /> |
| 84 | + </Bar> |
| 85 | + <Panel className={classNames.panel} expanded={expanded || internalExpanded} theme={theme}> |
| 86 | + {children} |
| 87 | + </Panel> |
| 88 | + </StyledAccordionItem>; |
| 89 | +}); |
| 90 | + |
| 91 | +Item.defaultProps = { |
| 92 | + tabIndex: 0, |
| 93 | +}; |
| 94 | + |
| 95 | +Item.displayName = 'Accordion.Item'; |
| 96 | + |
| 97 | +Item.propTypes = { |
| 98 | + children: PropTypes.node, |
| 99 | + defaultExpanded: PropTypes.bool, |
| 100 | + disabled: PropTypes.bool, |
| 101 | + expanded: PropTypes.bool, |
| 102 | + tabIndex: PropTypes.number, |
| 103 | + title: PropTypes.string.isRequired, |
| 104 | + onToggle: PropTypes.func, |
| 105 | + onToggleEnabled: PropTypes.func, |
| 106 | +}; |
0 commit comments