collapsable-panel
Version:
Panel with title and icon collapsable
69 lines • 3.33 kB
JavaScript
import { Box, Collapse, createStyles, Divider, Grid, makeStyles, Typography, } from '@material-ui/core';
import React, { useState } from 'react';
import { ArrowDropUp, ArrowDropDown } from '@material-ui/icons';
import clsx from 'clsx';
var useStyles = makeStyles(function () { return createStyles({
mainBox: { padding: '1.5em 1.5em 1em 1.5em' },
title: {
textTransform: 'capitalize',
fontWeight: 500,
},
header: {
color: '#555',
fontStyle: 'normal',
},
hiddenHeader: {
color: '#999',
fontStyle: 'italic',
},
hiddlableHeader: {
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: '#F4F4F4',
},
},
icon: {
display: 'flex',
margin: '0em 0.5em 0.2em',
},
iconArrow: {
display: 'flex',
margin: '0.5em 0.5em 0.2em ',
},
content: { paddingTop: '1.3em' },
}); });
var CollapsablePanel = function (_a) {
var _b;
var title = _a.title, IconComponent = _a.iconComponent, children = _a.children, _c = _a.hideable, hideable = _c === void 0 ? false : _c, _d = _a.hiddenInit, hiddenInit = _d === void 0 ? false : _d, classesAttr = _a.classes;
var _e = useState(hiddenInit), isHided = _e[0], setIsHide = _e[1];
var classes = useStyles({ hideable: hideable, isHided: isHided });
var handleHide = function () {
setIsHide(!isHided);
};
return (React.createElement(Box, { className: classes.mainBox },
React.createElement("div", { className: clsx(classes.header, (_b = {},
_b[classes.hiddlableHeader] = hideable,
_b[classes.hiddenHeader] = hideable && isHided,
_b), classesAttr === null || classesAttr === void 0 ? void 0 : classesAttr.root), style: { display: 'flex' }, role: "button", "aria-hidden": true, onClick: handleHide, onKeyPress: handleHide, "data-testid": "main-container" },
React.createElement(Grid, { container: true, justify: "flex-start" },
React.createElement(Typography, { variant: "h6", gutterBottom: true, noWrap: true, className: clsx(classes.title, classesAttr === null || classesAttr === void 0 ? void 0 : classesAttr.root) },
React.createElement(Box, { display: "flex", alignItems: "flex-end" },
React.createElement(Box, { className: classes.icon },
React.createElement(IconComponent, null)),
title))),
hideable && (React.createElement(Grid, { container: true, justify: "flex-end" },
React.createElement(Box, { className: classes.iconArrow }, isHided ? React.createElement(ArrowDropDown, null) : React.createElement(ArrowDropUp, null))))),
React.createElement(Divider, null),
React.createElement(Collapse, { className: clsx(classes.content, classesAttr === null || classesAttr === void 0 ? void 0 : classesAttr.contentContainer), in: !hideable || !isHided }, children)));
};
CollapsablePanel.defaultProps = {
hideable: false,
hiddenInit: false,
classes: {
root: '',
title: '',
contentContainer: '',
}
};
export default CollapsablePanel;
//# sourceMappingURL=CollapsablePanel.js.map