@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
87 lines • 3.74 kB
JavaScript
import React, { useCallback, useMemo, useState } from 'react';
import Collapse from '@mui/material/Collapse';
import PropTypes from 'prop-types';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { Card, IconButton } from '../../index';
import { CardContent, Stack } from '@mui/material';
/**
* A Collapse Card is basically a 'smarter' Card component that allows users to toggle the display of content by expanding or collapsing the card.
*/
const CollapseCard = ({ content, children, actions, variant = 'elevation', defaultExpanded, expanded, onToggle, subheader, hideSubheaderOnExpand = false, toggleOnHeaderClick = false, ...rest }) => {
const [localExpanded, setLocalExpanded] = useState(defaultExpanded || false);
const exp = expanded || localExpanded;
const toggleCard = useCallback((event) => {
if (event.currentTarget.id === 'toggel-button' && toggleOnHeaderClick == true) {
return;
}
return onToggle ? onToggle(event, expanded) : setLocalExpanded(current => !current);
}, [expanded, onToggle]);
const iconButton = (React.createElement(IconButton, { id: "toggel-button", size: "small", variant: "text", color: "primary", onClick: toggleCard }, exp ? React.createElement(ExpandLessIcon, null) : React.createElement(ExpandMoreIcon, null)));
const headerProps = useMemo(() => {
if (!toggleOnHeaderClick)
return undefined;
return { sx: { cursor: 'pointer' }, onClick: toggleCard };
}, [toggleOnHeaderClick, toggleCard]);
return (React.createElement(Card, { disablePadding: true, actions: React.createElement(Stack, { direction: "row", spacing: 1 }, (Array.isArray(actions) ? [...actions, iconButton] : [actions, iconButton]).map((action, index) => (React.createElement(React.Fragment, { key: index }, action)))), variant: variant, headerProps: headerProps, subheader: hideSubheaderOnExpand && exp ? React.createElement(React.Fragment, null) : subheader, ...rest },
React.createElement(Collapse, { in: exp },
React.createElement(CardContent, { children: content || children }))));
};
CollapseCard.propTypes = {
/**
* Content of the component.
*/
children: PropTypes.node,
/**
* Actions to be displayed in the right corner of the card. If an array, will display all items with spacing between them.
*/
actions: PropTypes.node,
/**
* Content of the component.
*/
content: PropTypes.node,
/**
* @default 'elevation'
* Variant to use.
*/
variant: PropTypes.oneOf(['elevation', 'outlined']),
/**
* Shadow depth, corresponds to `dp` in the spec.
* It accepts values between 0 and 24 inclusive.
* @default 1
*/
elevation: PropTypes.number,
/**
* If 'true', the card header and footer will be filled with a grayish color
* @default false
*/
filled: PropTypes.bool,
/**
* Content of the subheader.
*/
subheader: PropTypes.node,
/**
* If true, the card will be expanded by default.
*/
defaultExpanded: PropTypes.bool,
/**
* If true, the card will be expanded.
*/
expanded: PropTypes.bool,
/**
* Callback fired on toggle.
*/
onToggle: PropTypes.func,
/**
* If true, the subheader will be hidden when the card is expanded.
* @default false
*/
hideSubheaderOnExpand: PropTypes.bool,
/**
* If true, the card will toggle when clicking on the whole header, not just the expand button.
* @default false
*/
toggleOnHeaderClick: PropTypes.bool
};
export default CollapseCard;
//# sourceMappingURL=CollapseCard.js.map