@deep-foundation/deepcase
Version:
[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-
153 lines • 10.8 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Center, Flex, IconButton, Input, InputGroup, InputRightElement, ScaleFade, SlideFade, Spacer, Text } from '@chakra-ui/react';
import { motion } from 'framer-motion';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { BsCheck2, BsDoorClosed, BsGrid3X2Gap, BsListUl, BsSearch } from 'react-icons/bs';
import { DotsLoader } from './dot-loader';
const variants = {
initial: {
originX: 1,
originY: 1,
opacity: 0,
scale: 0,
transformPerspective: 100,
z: 0,
y: 0,
background: 'transparent',
},
view: {
opacity: 1,
scale: 1,
transition: {
duration: 0.3,
}
},
hide: {
originX: 0,
originY: 0,
opacity: 0, scale: 0,
transition: {
duration: 0.05,
}
}
};
export const TypeIcon = React.memo((_a) => {
var { src, borderColor = 'borderColor', borderWidth = 'thin', boxSize = '1.8rem', scrollRef } = _a, props = __rest(_a, ["src", "borderColor", "borderWidth", "boxSize", "scrollRef"]);
const number = src.toString();
const size = typeof (src) === 'number' ? number.length : null;
return _jsx(Box, Object.assign({ as: motion.div, "arial-label": 'type button', variants: variants, initial: 'initial', whileInView: 'view', viewport: { root: scrollRef }, whileHover: {
y: 1,
z: 10,
transformPerspective: 400
}, exit: 'hide', borderRadius: 'full', boxSize: boxSize, borderWidth: borderWidth, borderStyle: 'solid', borderColor: borderColor, display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: typeof (src) === 'string' ? 'sm' : size && size > 2 ? 'xxs' : 'xs' }, props, { children: src }));
});
export const GridPanel = React.memo(({ borderColor, borderColorSelected, data, selectedLink, onSelectLink, gridTemplateColumns = 'repeat( auto-fill, minmax(.5rem, 1.9rem) )', columnGap = 2, rowGap = 2, }) => {
const scrollRef = useRef(null);
return (_jsx(Box, { display: 'grid', gridTemplateColumns: gridTemplateColumns, columnGap: columnGap, rowGap: rowGap, alignItems: 'center', justifyContent: data.length > 10 ? 'center' : 'flex-start', p: '2', ref: scrollRef, children: data.map(d => (_jsx(TypeIcon, { scrollRef: scrollRef, borderWidth: selectedLink === d.id ? 2 : 1, borderColor: selectedLink === d.id ? borderColorSelected : borderColor, _hover: {
borderColor: 'primary'
}, onClick: () => { onSelectLink && onSelectLink(d.id); }, src: d.src || '' }, d.id))) }));
});
const CytoListItem = React.memo(({ id, src, linkName, containerName, borderColor, selectedLink, onSelectLink, scrollRef, }) => {
return (_jsx(Box, { as: motion.li, display: 'flex', w: '100%', alignItems: 'center', onClick: () => onSelectLink && onSelectLink(id), "arial-label": 'type button', variants: variants, initial: 'initial', whileInView: 'view', viewport: { root: scrollRef }, whileHover: {
y: 1,
z: 8,
transformPerspective: 600,
background: '#0080ff',
}, _hover: {
color: 'whiteText'
}, bg: selectedLink === id ? 'primary' : 'none', children: _jsxs(Box, { py: '0.2rem', width: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', children: [_jsx(TypeIcon, { borderColor: borderColor, src: src, mr: 2, ml: 2 }), _jsxs(Flex, { direction: 'column', align: 'flex-start', children: [!!linkName && _jsx(Text, { fontSize: 'xs', children: linkName }), !!containerName && _jsx(Text, { fontSize: 'xs', children: containerName })] })] }) }));
});
const ListPanel = React.memo(({ borderColor, data, onSelectLink, selectedLink, }) => {
const scrollRef = useRef(null);
return (_jsx(Flex, { direction: 'column', gap: 3, py: 2, ref: scrollRef, children: data.map(d => (_jsx(CytoListItem, Object.assign({}, d, { borderColor: borderColor, onSelectLink: onSelectLink, selectedLink: selectedLink, scrollRef: scrollRef }), d.id))) }));
});
export const NoResults = React.memo(() => {
return (_jsx(Center, { height: '100%', width: '100%', children: _jsx(Text, { fontSize: 'xs', children: "Not found" }) }));
});
export const CytoReactLinksCard = React.memo(({ elements = [], packages = [], onSubmit, onClose, loading = false, noResults = false, search, onSearch, fillSize = false, selectedLinkId = 0, }) => {
const [switchLayout, setSwitchLayout] = useState('grid');
const [selectedLink, setSelectedLink] = useState(selectedLinkId);
const inputRef = useRef(null);
useEffect(() => {
var _a;
(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
});
const selectLink = useCallback((linkId) => {
setSelectedLink((prevLinkId) => prevLinkId == linkId ? 0 : linkId);
}, []);
useHotkeys('up,down', e => {
e.preventDefault();
e.stopPropagation();
let index = elements.findIndex(e => e.id == selectedLink);
if (index === -1) {
index = 0;
}
let next = elements[index];
if (!selectedLink) {
setSelectedLink(next.id);
}
else if (e.key == 'ArrowUp' || e.key == 'ArrowLeft') {
next = elements[index == 0 ? elements.length - 1 : index - 1];
setSelectedLink(next.id);
}
else if (e.key == 'ArrowDown' || e.key == 'ArrowRight') {
next = elements[index == elements.length - 1 ? 0 : index + 1];
setSelectedLink(next.id);
}
}, { enableOnFormTags: ["TEXTAREA", "INPUT"] });
useHotkeys('enter', e => {
e.preventDefault();
e.stopPropagation();
if (selectedLink) {
onSubmit && onSubmit(selectedLink);
}
}, { enableOnFormTags: ["TEXTAREA", "INPUT"] });
useHotkeys('tab', e => {
e.preventDefault();
e.stopPropagation();
setSwitchLayout((v) => v === 'grid' ? 'list' : 'packages');
}, { enableOnFormTags: ["TEXTAREA", "INPUT"] });
return (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ bg: 'backgroundModal', maxH: 'lg' }, (fillSize ? { h: '100%', w: '100%' } : { h: 72, w: 'max-content' }), { overflowY: 'hidden', borderWidth: 'thin', borderColor: 'borderColor', color: 'text', borderRadius: 'lg', overflow: 'hidden', display: 'flex', flexDir: 'column', children: [_jsxs(Flex, { minWidth: 'max-content', alignItems: 'center', gap: '2', borderBottomStyle: 'solid', borderBottomWidth: 'thin', borderBottomColor: 'borderColor', children: [_jsxs(InputGroup, { size: 'xs', pl: '2', children: [_jsx(Input, { ref: inputRef, placeholder: 'search', sx: { borderRadius: 'full' }, focusBorderColor: 'primary', value: search, onChange: onSearch }), _jsx(InputRightElement, { children: _jsx(BsSearch, { color: 'green.500' }) })] }), _jsx(Spacer, {}), _jsx(IconButton, { "aria-label": 'grid layout', variant: 'ghost', colorScheme: 'current', isRound: true, sx: {
transform: switchLayout === 'grid' ? 'scale(1.2)' : 'scale(1)',
_hover: {
transform: switchLayout === 'grid' && 'scale(1.2)',
}
}, icon: _jsx(BsGrid3X2Gap, {}), onClick: () => setSwitchLayout('grid') }), _jsx(IconButton, { "aria-label": 'list layout', variant: 'ghost', colorScheme: 'current', isRound: true, sx: {
transform: switchLayout === 'list' ? 'scale(1.2)' : 'scale(1)',
_hover: {
transform: switchLayout === 'list' && 'scale(1.2)',
}
}, icon: _jsx(BsListUl, {}), onClick: () => setSwitchLayout('list') })] }), !loading
? _jsxs(Box, { pos: 'relative', w: '100%', h: "100%", children: [_jsx(ScaleFade, { initialScale: 0.9, in: switchLayout === 'grid', style: {
pointerEvents: switchLayout === 'grid' ? 'initial' : 'none',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
overflowY: 'scroll',
}, children: _jsx(GridPanel, { data: elements, borderColor: 'borderColor', onSelectLink: selectLink, selectedLink: selectedLink, borderColorSelected: 'primary' }) }), _jsx(ScaleFade, { initialScale: 0.9, in: switchLayout === 'list', style: {
pointerEvents: switchLayout === 'list' ? 'initial' : 'none',
position: 'absolute',
left: 0,
width: '100%',
height: '100%',
overflowY: 'scroll',
}, children: _jsx(ListPanel, { data: elements, borderColor: 'borderColor', selectedLink: selectedLink, onSelectLink: selectLink }) })] })
: !!noResults
? _jsx(NoResults, {})
: _jsx(Center, { height: '100%', children: _jsx(DotsLoader, {}) })] })), _jsx(SlideFade, { in: !!selectedLink, offsetX: '-0.5rem', style: { position: 'absolute', bottom: 0, right: '-2.8rem' }, children: _jsx(IconButton, { isRound: true, variant: 'solid', bg: 'primary', "aria-label": 'submit button', icon: _jsx(BsCheck2, {}), onClick: () => onSubmit && onSubmit(selectedLink) }) }), !!onClose && _jsx(Box, { pos: 'absolute', top: 0, right: '-2.8rem', children: _jsx(IconButton, { isRound: true, colorScheme: 'gray', variant: 'outline', "aria-label": 'close button', icon: _jsx(BsDoorClosed, {}), onClick: () => onClose && onClose() }) })] }));
});
//# sourceMappingURL=cyto-react-links-card.js.map