@deep-foundation/deepcase
Version:
[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-
239 lines • 13.4 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import { AnimatePresence, motion, useAnimation, useCycle } from 'framer-motion';
import { Box, Button, Divider, Flex, Text } from '@chakra-ui/react';
import { TbArrowRotaryFirstRight, TbBookDownload } from 'react-icons/tb';
import { TagLink } from '../tag-component';
import { useSpaceId } from "../hooks";
import { useDeep } from '@deep-foundation/deeplinks/imports/client';
import { Loading } from '../loading-motion-bubble';
import { makeUseAxios } from "axios-hooks";
import axios from "axios";
const useAxios = makeUseAxios({ axios: axios.create() });
const variantsPackages = {
open: {
transition: { staggerChildren: 0.07, delayChildren: 0.2 }
},
closed: {
transition: { staggerChildren: 0.05, staggerDirection: -1 }
}
};
const variantsPackage = {
open: {
y: 0,
opacity: 1,
transition: {
y: { stiffness: 1000, velocity: -100 }
}
},
closed: {
y: 50,
opacity: 0,
transition: {
y: { stiffness: 1000 }
}
}
};
const itemVariants = {
closed: {
opacity: 0
},
open: { opacity: 1 }
};
const sideVariants = {
closed: {
transition: {
staggerChildren: 0.1,
staggerDirection: 1
}
},
open: {
y: "2.5rem",
transition: {
staggerChildren: 0.1,
staggerDirection: 1
}
}
};
const iconVariants = {
closed: {
rotate: 0,
transition: {
type: "tween",
duration: 0.2,
delay: 0.7
}
},
open: {
rotate: 180,
transition: {
type: "tween",
duration: 0.2
}
}
};
export const ListVersions = React.memo(({ name, latestVersion, currentVersion, bg, setCurrentVersion }) => {
const [open, cycleOpen] = useCycle(false, true);
const [{ data, loading, error }, refetch] = useAxios(`https://registry.npmjs.com/${name}`);
const versions = data ? Object.keys(data.versions) : [latestVersion];
var collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
versions.sort(collator.compare);
return (_jsxs(_Fragment, { children: [_jsx(Box, { position: "relative", sx: { height: 0, width: "7rem" }, children: _jsx(AnimatePresence, { children: open && (_jsx(Box, { as: motion.div, animate: {
scale: 1,
transition: { duration: 0.3, type: "spring" }
}, exit: {
scale: 0,
y: "2rem",
transition: { delay: 0.7, duration: 0.3, type: "spring" }
}, sx: {
height: "2rem",
width: "7rem",
top: 0,
left: 0,
position: "absolute"
}, children: _jsx(Box, { as: motion.ul, initial: "closed", animate: "open", exit: "closed", variants: sideVariants, sx: {
borderRadius: "0.5rem",
position: "relative",
zIndex: 44,
background: bg,
listStyle: "none",
padding: '0.5rem',
height: '11rem',
overflowY: 'scroll',
overscrollBehavior: 'contain',
filter: 'drop-shadow(0px 0px 1px #5f6977)',
outline: `solid 4px`,
outlineColor: 'colorOutline',
outlineOffset: '-4px',
'&>*:not(:last-child)': {
pt: '0.2rem',
pb: '0.2rem',
}
}, children: versions && versions.map(v => (_jsx(Box, { as: motion.li, whileHover: { scale: 1.1 }, variants: itemVariants, onClick: () => {
setCurrentVersion(v);
cycleOpen();
}, children: _jsx(Text, { fontSize: 'sm', children: v }) }, v))) }) })) }) }), _jsx(Box, { position: "relative", sx: {
height: "2rem",
width: "max-content",
}, children: _jsx(Box, { position: "absolute", children: _jsx(Button, { as: motion.button, bg: bg, onClick: () => cycleOpen(), sx: {
height: '2rem',
width: '7rem',
filter: 'drop-shadow(0px 0px 1px #5f6977)',
}, rightIcon: _jsx(Box, { as: motion.div, variants: iconVariants, animate: open ? "open" : "closed", children: _jsx(TbArrowRotaryFirstRight, {}) }), children: _jsx(Text, { fontSize: 'sm', children: currentVersion }) }) }) })] }));
});
export const PackageItem = React.memo(function PackageItem({ id, expanded, onOpen, name, description, versions, animate, style, variants = {}, transition = {}, latestVersion = "0.0.0", }) {
const deep = useDeep();
const [spaceId, setSpaceId] = useSpaceId();
const [currentVersion, setCurrentVersion] = useState(latestVersion);
const [notInstall, setNotInstall] = useState(false);
return (_jsxs(Box, { as: motion.li, variants: variantsPackage, sx: {
position: 'relative',
listStyle: "none",
background: 'transparent',
p: 1,
borderRadius: '0.5rem',
borderWidth: 'thin',
borderColor: 'gray.500',
'& > *:first-of-type': {
mb: '0.5rem',
}
}, children: [_jsxs(Flex, { children: [_jsx(Box, { as: motion.div, role: 'h2', width: '100%', animate: animate, variants: variants, transition: transition, sx: Object.assign({ justifyContent: 'flex-start', p: 0, fontSize: 'sm' }, style), children: _jsx(Text, { fontSize: 'sm', as: 'h2', children: name }) }), _jsx(Box, { pos: 'relative', children: _jsx(ListVersions, { name: name, latestVersion: latestVersion, currentVersion: currentVersion, setCurrentVersion: setCurrentVersion, bg: 'bgColor' }) })] }), _jsxs(Flex, { alignItems: 'center', justify: 'space-between', children: [description && _jsx(Box, { as: motion.div, width: '100%', animate: animate, variants: variants, transition: transition, sx: Object.assign({ justifyContent: 'flex-start', p: 0, fontSize: 'sm', mr: 2 }, style), children: _jsx(Text, { fontSize: 'sm', children: description }) }), _jsx(TagLink, { version: 'install', leftIcon: TbBookDownload, size: 'sm', onClick: (e) => __awaiter(this, void 0, void 0, function* () {
e.preventDefault();
setNotInstall(true);
yield deep.insert({
type_id: yield deep.id('@deep-foundation/core', 'PackageQuery'),
string: { data: { value: `${name}@${currentVersion}` } },
in: {
data: [
{
type_id: yield deep.id('@deep-foundation/core', 'Contain'),
from_id: deep.linkId,
},
{
type_id: yield deep.id('@deep-foundation/npm-packager', 'Install'),
from_id: deep.linkId,
in: {
data: {
type_id: yield deep.id('@deep-foundation/core', 'Contain'),
from_id: deep.linkId,
}
}
}
]
}
});
}) })] }), versions && _jsx(Divider, {}), versions && _jsx(Text, { fontSize: 'xs', sx: { mb: '0.2rem' }, children: "Installed Versions:" }), versions && _jsx(Box, { sx: {
float: 'revert',
'& > *:not(:last-of-type)': {
mr: 2
}
}, children: versions && versions.map((c, i) => (_jsx(TagLink, { version: c.version, colorScheme: c.isActive ? 'orange' : 'blue', onClick: (e) => {
e.preventDefault();
setSpaceId(c.packageId);
} }, c.packageId))) }), notInstall
? _jsxs(_Fragment, { children: [_jsx(Box, { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backdropFilter: 'blur(3px)', borderRadius: '0.5rem', children: _jsx(Box, { width: '100%', height: '100%', position: 'relative' }) }), _jsx(Flex, { align: 'center', justify: 'center', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', children: _jsx(Loading, { width: '0.7rem', height: '0.7rem', widthFlex: 'max-content', justifyFlex: 'center', borderRadiusBubble: '0.5rem', backgroundBubble: '#0080ff' }) })] })
: null] }));
});
const variantsInstall = {
show: { opacity: 1, x: '0%' },
hide: { opacity: 0, x: '-100%' },
initial: { opacity: 1, x: '0%' },
};
const variantsUninstalled = {
show: { opacity: 1, x: '0%' },
hide: { opacity: 0, x: '-100%' },
initial: { opacity: 0, x: '-100%' },
};
export const TabComponent = React.memo(({ variant = 0, installedPackages = [], notInstalledPackages, }) => {
const [expanded, setExpanded] = useState(false);
const controlInstall = useAnimation();
const controlUninstalled = useAnimation();
useEffect(() => {
if (variant === 0) {
controlInstall.start("show");
controlUninstalled.start("hide");
}
else {
controlUninstalled.start("show");
controlInstall.start("hide");
}
}, [controlInstall, controlUninstalled, variant]);
return (_jsx(AnimatePresence, { initial: false, children: variant === 0 ? _jsx(Box, { as: motion.section, animate: controlInstall, variants: variantsInstall, initial: 'initial', exit: 'initial', sx: {
w: '100%',
p: 2,
h: 'calc(100% - 5rem)',
overflowY: 'scroll',
overscrollBehavior: 'contain',
}, children: _jsx(Box, { as: motion.ul, variants: variantsPackages, sx: {
'& > *:not(:last-child)': {
mb: 2
},
}, children: installedPackages.map((p, i) => (_jsx(PackageItem, { id: p.localPackage.namespaceId, expanded: expanded, onOpen: (e) => {
if (e.target.value == p.localPackage.namespaceId)
setExpanded(!expanded);
}, name: p.localPackage.name, description: p.remotePackage.package.description, latestVersion: p.remotePackage.package.version, versions: p.localPackage.versions }, p.localPackage.namespaceId))) }) })
: variant === 1 ? _jsx(Box, { as: motion.section, animate: controlUninstalled, variants: variantsUninstalled, initial: 'initial', exit: 'initial', sx: {
w: '100%',
p: 2,
h: 'calc(100% - 5rem)',
overflowY: 'scroll',
overscrollBehavior: 'contain',
}, children: _jsx(Box, { as: motion.ul, variants: variantsPackages, sx: {
'& > *:not(:last-child)': {
mb: 2
},
}, children: notInstalledPackages.map((p, i) => (_jsx(PackageItem, { id: p.remotePackage.package.name, expanded: expanded, onOpen: (e) => {
if (e.target.value == p.remotePackage.package.name)
setExpanded(!expanded);
}, name: p.remotePackage.package.name, description: p.remotePackage.package.description, latestVersion: p.remotePackage.package.version }, p.remotePackage.package.name))) }) }) : null }));
});
//# sourceMappingURL=packager-interface-tabs-content.js.map