@deep-foundation/deepcase
Version:
[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-
80 lines • 3.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Text, Tag, TagLeftIcon, TagLabel } from '@chakra-ui/react';
import { AnimatePresence, motion } from 'framer-motion';
import React, { useState } from 'react';
import { TbArrowRotaryFirstRight, TbAtom } from 'react-icons/tb';
import { GridPanel } from './cyto-react-links-card';
const iconVariants = {
closed: {
rotate: 0,
transition: {
type: "tween",
duration: 0.2,
delay: 0.7
}
},
open: {
rotate: 180,
transition: {
type: "tween",
duration: 0.2
}
}
};
const Package = React.memo(({ containerName, version, isActive, isOpen, leftIcon = TbAtom, size = 'sm', borderRadius = 'full', }) => {
return (_jsxs(Box, { display: 'flex', width: '100%', alignItems: 'center', children: [_jsx(Box, { as: motion.div, role: 'h2', width: '100%', sx: {
justifyContent: 'flex-start',
p: 0,
fontSize: 'sm',
}, children: _jsx(Text, { fontSize: 'sm', as: 'h2', children: containerName }) }), _jsx(Box, { children: _jsxs(Tag, { size: size, variant: 'subtle', colorScheme: isActive ? 'orange' : 'blue', borderRadius: borderRadius, sx: { verticalAlign: 'initial' }, children: [_jsx(TagLeftIcon, { as: leftIcon }), _jsx(TagLabel, { children: version })] }) }), _jsx(Box, { as: motion.div, variants: iconVariants, animate: isOpen ? "open" : "closed", children: _jsx(TbArrowRotaryFirstRight, {}) })] }));
});
const arrElem = [
{
id: 1,
src: '#',
}, {
id: 2,
src: '#',
}, {
id: 3,
src: '#',
}, {
id: 4,
src: '=',
},
];
const PackageItemAccordion = React.memo(({ id, containerName, version, isActive, typeElements = arrElem, }) => {
const [expanded, setExpanded] = useState(false);
const [selectedLink, setSelectedLink] = useState(id);
const isOpen = id === expanded;
return (_jsxs(_Fragment, { children: [_jsx(Box, { as: motion.div, initial: false, whileHover: { scale: 0.99, type: 'spring' }, onClick: () => setExpanded(isOpen ? false : id), sx: {
width: '100%',
display: 'flex',
alignItems: 'center',
background: 'backgroundModal',
borderRadius: '0.5rem',
borderWidth: 'thin',
borderColor: 'borderInputMessage',
color: 'text',
cursor: 'pointer',
height: '2rem',
marginBottom: isOpen ? 0 : '0.5rem',
p: '0.5rem',
_last: {
marginBottom: 0,
}
}, children: _jsx(Package, { containerName: containerName, version: version, isActive: isActive, isOpen: isOpen }) }), _jsx(AnimatePresence, { initial: false, children: isOpen && (_jsx(Box, { as: motion.section, initial: 'collapsed', animate: 'open', exit: 'collapsed', variants: {
open: { opacity: 1, height: 'auto' },
collapsed: { opacity: 0, height: 0 }
}, transition: { duration: 0.8, ease: [0.04, 0.62, 0.23, 0.98] }, sx: { transformOrigin: 'top center', }, children: _jsx(GridPanel, { data: typeElements, selectedLink: selectedLink, onSelectLink: setSelectedLink }) }, 'content')) })] }));
});
export const PackagesBlock = React.memo(({ packages }) => {
return (_jsx(Box, { sx: {
w: '100%',
p: 2,
h: '100%',
overflowY: 'scroll',
overscrollBehavior: 'contain',
}, children: _jsx(Box, { children: packages && packages.map((p) => (_jsx(PackageItemAccordion, { id: p.id, containerName: p.containerName, version: p.version }, p.id))) }) }));
});
//# sourceMappingURL=cyto-react-links-packages.js.map