@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
51 lines • 2.85 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { forwardRef, useMemo, useState } from 'react';
import classnames from 'classnames';
import { STYLE, DEFAULTS } from './Accordion.constants';
import { STYLE as LIST_ITEM_BASE_STYLE, SHAPES as LIST_ITEM_BASE_SHAPES, } from '../ListItemBase/ListItemBase.constants';
import './Accordion.style.scss';
import Icon from '../Icon';
import { v4 as uuidV4 } from 'uuid';
import Text from '../Text';
import ButtonSimple from '../ButtonSimple';
var Accordion = forwardRef(function (props, providedRef) {
var children = props.children, className = props.className, id = props.id, style = props.style, heading = props.heading, headingRightContent = props.headingRightContent, _a = props.defaultExpanded, defaultExpanded = _a === void 0 ? DEFAULTS.DEFAULT_EXPANDED : _a, ariaLevel = props.ariaLevel, buttonProps = props.buttonProps;
var _b = useState(defaultExpanded), expanded = _b[0], setExpanded = _b[1];
var accordionId = useMemo(function () { return id || uuidV4(); }, [id]);
var headerButtonId = "".concat(accordionId, "-header-button");
var panelId = "".concat(accordionId, "-panel");
var onClick = function () {
setExpanded(!expanded);
};
var buttonCustomProps = {
className: classnames(STYLE.headerButton, LIST_ITEM_BASE_STYLE.wrapper),
'data-interactive': true,
'data-shape': LIST_ITEM_BASE_SHAPES.isPilled,
'data-padded': true,
id: headerButtonId,
'aria-expanded': expanded,
'aria-controls': panelId,
onPress: onClick,
ref: providedRef,
};
return (React.createElement("div", { className: classnames(className, STYLE.wrapper), id: accordionId, style: style },
React.createElement("div", { className: STYLE.headerRow },
React.createElement("div", { className: STYLE.headerHeading, role: "heading", "aria-level": ariaLevel },
React.createElement(ButtonSimple, __assign({}, buttonCustomProps, buttonProps),
React.createElement(Icon, { name: expanded ? 'arrow-down' : 'arrow-right', scale: 12 }),
typeof heading === 'string' ? (React.createElement(Text, { type: "body-secondary", tagName: "small" }, heading)) : (heading))),
headingRightContent),
expanded ? (React.createElement("div", { role: "region", "aria-labelledby": headerButtonId, id: panelId }, children)) : null));
});
export default Accordion;
//# sourceMappingURL=Accordion.js.map