robust-react-ui
Version:
A React component library, built with a focus on accessibility, extensibility and reusability.
62 lines (57 loc) • 3.48 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var index = require('../../../utils/getClassNames/index.js');
// Generated with util/create-component.js
var AccordionPanel = React__default.forwardRef(function (_a, ref) {
var children = _a.children, panelTitle = _a.panelTitle, panelId = _a.panelId, activePanel = _a.activePanel, onSelectPanelFunction = _a.onSelectPanelFunction, handleFocusPrevious = _a.handleFocusPrevious, handleFocusNext = _a.handleFocusNext, handleFocusFirst = _a.handleFocusFirst, handleFocusLast = _a.handleFocusLast, index$1 = _a.index;
var sectionId = panelId + "_section";
var isCurrent = activePanel === panelId;
var handleSelectPanel = function () {
onSelectPanelFunction(panelId);
};
var handleKeyDown = function (event) {
// 38 up
if (handleFocusPrevious && event.keyCode === 38) {
handleFocusPrevious(index$1);
event.preventDefault();
}
// 40 down
if (handleFocusNext && event.keyCode === 40) {
handleFocusNext(index$1);
event.preventDefault();
}
// 13 enter
if (event.keyCode === 13) {
handleSelectPanel();
}
// home
if (event.keyCode === 36) {
event.preventDefault();
handleFocusFirst();
}
// end
if (event.keyCode === 35) {
event.preventDefault();
handleFocusLast();
}
};
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement("h3", { "data-testid": "AccordionPanel" },
React__default.createElement("button", { type: "button", "data-testid": "AccordionTrigger", "aria-disabled": isCurrent, onClick: handleSelectPanel, onKeyDown: handleKeyDown, ref: ref, "aria-expanded": isCurrent ? 'true' : 'false', className: "rrui-accordion__trigger", "aria-controls": sectionId, id: panelId },
React__default.createElement("span", { className: "rrui-accordion__title" },
panelTitle,
React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: index({
'rrui-accordion__icon': true,
'rrui-accordion__icon--expanded': isCurrent,
}) }, isCurrent ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
React__default.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))))))),
React__default.createElement("div", { id: sectionId, role: "region", "aria-labelledby": panelId, className: "rrui-accordion__panel", hidden: !isCurrent },
React__default.createElement("div", null, children))));
});
AccordionPanel.displayName = 'AccordionPanel';
module.exports = AccordionPanel;
//# sourceMappingURL=Panel.js.map