@stakefish/ui
Version:
<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>
185 lines (182 loc) • 7.06 kB
JavaScript
import { _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { c as clsx } from '../clsx.m-6243b874.js';
import MuiBox from '@mui/material/Box';
import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import Icon from './Icon.js';
import Typography from './Typography.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
import '../theme/typography.js';
var AccordionContentType;
(function (AccordionContentType) {
AccordionContentType["Summary"] = "summary";
AccordionContentType["Details"] = "details";
})(AccordionContentType || (AccordionContentType = {}));
var PREFIX = "Accordion";
var classes = {
root: "".concat(PREFIX, "-root"),
expanded: "".concat(PREFIX, "-expanded"),
adjacentExpanded: "".concat(PREFIX, "-adjacentExpanded")
};
var StyledBox = styled(MuiBox)(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {},
_b["& .".concat(classes.root)] = {
paddingLeft: theme.spacing(8),
paddingRight: theme.spacing(8),
borderRadius: theme.borders.radius.xl1,
"&:last-of-type": {
"& .MuiAccordion-root": {
borderBottom: "3px solid ".concat(theme.palette.gray[100])
}
},
transition: theme.transitions.create(["padding", "background"])
},
_b["& .".concat(classes.expanded)] = {
paddingTop: theme.spacing(1.875),
paddingBottom: theme.spacing(1.875),
backgroundColor: theme.palette.gray[100],
"&:last-of-type": {
"& .MuiAccordion-root": {
borderBottom: "none"
}
},
transition: theme.transitions.create(["padding", "background"])
},
_b["& .".concat(classes.adjacentExpanded)] = {
"& .MuiAccordion-root": {
borderTop: "none"
}
},
_b);
});
var AccordionBox = styled(MuiAccordion)(function () { return ({
"&:before": {
display: "none"
},
"&.Mui-expanded": {
margin: "auto"
}
}); });
var AccordionContent = function (_a) {
var content = _a.content, type = _a.type;
if (typeof content === "string") {
return (jsx(Typography, { variant: type === AccordionContentType.Summary ? "subtitle3Bold" : "description", dangerouslySetInnerHTML: { __html: content } }, void 0));
}
return jsx(Fragment, { children: content }, void 0);
};
var AccordionSummary = styled(MuiAccordionSummary)(function (_a) {
var theme = _a.theme;
return ({
backgroundColor: "transparent",
padding: "1.625rem 0px",
"& .MuiAccordionSummary-content": {
margin: 0,
"&.Mui-expanded": {
margin: 0
}
},
"& .MuiAccordionSummary-expandIconWrapper": {
"&:hover": {
"&.MuiIconButton-root .icon path": {
fill: theme.palette.icon.secondary
}
},
"&.MuiIconButton-root": {
padding: 0
},
"&.MuiIconButton-edgeEnd": {
marginRight: 0
}
}
});
});
var AccordionDetails = styled(MuiAccordionDetails)(function () { return ({
padding: "0 0 2.125rem 0"
}); });
var Accordion = function (_a) {
var entries = _a.entries;
var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
var _c = useState(false), expandedIndex = _c[0], setExpandedIndex = _c[1];
var handleChange = function (panel, index) { return function (event, newExpanded) {
setExpanded(newExpanded ? panel : false);
setExpandedIndex(newExpanded ? index : false);
}; };
return (jsx(StyledBox, { children: entries.map(function (_a, index) {
var id = _a.id, summary = _a.summary, details = _a.details;
var className = clsx([
classes.root,
expanded === id && classes.expanded,
expandedIndex === index - 1 && classes.adjacentExpanded
]);
return (jsx(MuiBox, __assign({ className: className }, { children: jsxs(AccordionBox, __assign({ square: true, expanded: expanded === id, onChange: handleChange(id, index) }, { children: [jsx(AccordionSummary, __assign({ "aria-controls": "".concat(id, "d-content"), id: "".concat(id, "d-header"), expandIcon: jsx(Icon, { iconKey: "triangleDown", size: "sm", color: "secondary" }, void 0) }, { children: jsx(AccordionContent, { content: summary, type: AccordionContentType.Summary }, void 0) }), void 0), jsx(AccordionDetails, { children: jsx(AccordionContent, { content: details, type: AccordionContentType.Details }, void 0) }, void 0)] }), void 0) }), index));
}) }, void 0));
};
export { Accordion as default };