@deep-foundation/deepcase
Version:
[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-
89 lines • 7.92 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Stat, StatHelpText, StatLabel, StatNumber, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react';
import React, { useEffect, useRef, useState } from 'react';
import { FcEnteringHeavenAlive, FcMindMap } from 'react-icons/fc';
import { TiPlusOutline } from 'react-icons/ti';
import { useChackraColor } from '../get-color';
import { Resize } from '../resize';
const SemicircularButton = React.memo(({ Icon = TiPlusOutline, borderRadius = '4rem 0 0 4rem', onClick = () => { }, }) => {
const blackAlpha = useChackraColor('blackAlpha.300');
const whiteAlpha = useChackraColor('whiteAlpha.300');
const colorGrayToWhite = useColorModeValue(blackAlpha, whiteAlpha);
return (_jsx(Box, { borderRadius: borderRadius, display: 'flex', alignItems: 'center', justifyContent: 'center', borderWidth: '1px', borderStyle: 'solid', borderColor: colorGrayToWhite, bg: 'whiteAlpha.100', _hover: {
bg: 'whiteAlpha.300'
}, maxW: 12, onClick: onClick, children: _jsx(Box, { pr: 2, pl: 2, children: _jsx(Icon, {}) }) }));
});
const AddedChild = React.memo(() => {
return (_jsxs(_Fragment, { children: [_jsx(FcMindMap, {}), _jsx(FcMindMap, {}), _jsx(FcMindMap, {}), _jsx(FcMindMap, {}), _jsx(FcMindMap, {}), _jsx(FcMindMap, {}), _jsx(FcMindMap, {}), _jsx(FcMindMap, {})] }));
});
const ExecComponent = React.memo(() => {
return (_jsxs(_Fragment, { children: [_jsx(FcEnteringHeavenAlive, {}), _jsxs(Stat, { children: [_jsx(StatLabel, { children: "Collected Fees" }), _jsx(StatNumber, { children: "\u00A30.00" }), _jsx(StatHelpText, { children: "Feb 12 - Feb 28" })] }), _jsx(TableContainer, { children: _jsxs(Table, { variant: 'striped', colorScheme: 'teal', children: [_jsx(TableCaption, { children: "Imperial to metric conversion factors" }), _jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "To convert" }), _jsx(Th, { children: "into" }), _jsx(Th, { isNumeric: true, children: "multiply by" })] }) }), _jsxs(Tbody, { children: [_jsxs(Tr, { children: [_jsx(Td, { children: "inches" }), _jsx(Td, { children: "millimetres (mm)" }), _jsx(Td, { isNumeric: true, children: "25.4" })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "feet" }), _jsx(Td, { children: "centimetres (cm)" }), _jsx(Td, { isNumeric: true, children: "30.48" })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "yards" }), _jsx(Td, { children: "metres (m)" }), _jsx(Td, { isNumeric: true, children: "0.91444" })] })] }), _jsx(Tfoot, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "To convert" }), _jsx(Th, { children: "into" }), _jsx(Th, { isNumeric: true, children: "multiply by" })] }) })] }) })] }));
});
export const GridComponent = React.memo(({ mountChildren = _jsx(AddedChild, {}), unmountChildren = _jsx(AddedChild, {}), executableComponent = _jsx(ExecComponent, {}), fillSize = false, }) => {
const ref = useRef();
const refUnmount = useRef();
const refMount = useRef();
const [height, setHeight] = useState(0);
const [width, setWidth] = useState(0);
const [widthMount, setWidthMount] = useState(0);
const [widthUnmount, setWidthUnmount] = useState(0);
const [viewSize, setViewSize] = useState({ width: width, height: height });
useEffect(() => {
var _a, _b, _c, _d, _e, _f;
setHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
setWidth((_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
setWidthMount((_c = refMount.current) === null || _c === void 0 ? void 0 : _c.clientWidth);
setWidthUnmount((_d = refUnmount.current) === null || _d === void 0 ? void 0 : _d.clientWidth);
setViewSize({ width: (_e = ref.current) === null || _e === void 0 ? void 0 : _e.clientWidth, height: (_f = ref.current) === null || _f === void 0 ? void 0 : _f.clientHeight });
}, []);
const blackAlpha = useChackraColor('blackAlpha.200');
const whiteAlpha = useChackraColor('whiteAlpha.200');
const colorGrayToWhite = useColorModeValue(blackAlpha, whiteAlpha);
return (_jsx(Box, { children: _jsxs(Box, { display: 'flex', w: '100%', height: viewSize.height, sx: { overscrollBehavior: 'none' }, children: [_jsx(SemicircularButton, { onClick: () => alert('left') }), _jsxs(Box, { display: 'flex', sx: {
borderTop: `1px solid ${colorGrayToWhite}`,
borderBottom: `1px solid ${colorGrayToWhite}`,
overflow: 'hidden',
'& > *:nth-of-type(even)': {
p: 2
}
}, children: [_jsx(Box, { position: 'relative', width: widthMount / 2, sx: { overscrollBehavior: 'contain' }, overflow: 'auto', display: 'flex', justifyContent: 'center', children: _jsx(Box, { ref: refMount, position: 'absolute', display: 'flex', flexDir: 'column', pt: '0.5rem', sx: {
'&>*:not(:last-child)': {
mb: 2
}
}, children: mountChildren }) }), _jsxs(Resize, { size: viewSize, onChangeSize: (viewSize) => setViewSize(viewSize), style: {
borderTop: 'none',
borderBottom: 'none',
borderLeft: `1px solid ${colorGrayToWhite}`,
borderRight: `1px solid ${colorGrayToWhite}`,
overflow: 'hidden'
}, children: [_jsx(Box, { sx: {
boxSizing: 'border-box',
'::-webkit-scrollbar': {
display: 'none'
},
overscrollBehavior: 'contain',
overflow: 'scroll',
position: 'relative',
w: width,
h: height,
}, children: _jsx(Box, { ref: ref, display: 'flex', flexDir: 'column', pos: 'absolute', top: 0, left: 0, sx: {
'& > *:not(:last-child)': {
mb: '1rem',
},
boxSizing: 'border-box',
}, children: executableComponent }) }), _jsx(Box, { sx: {
position: 'absolute',
right: '0.2rem',
bottom: '0.25rem',
w: '0.5rem',
h: '0.5rem',
borderRight: `1px solid ${colorGrayToWhite}`,
borderBottom: `1px solid ${colorGrayToWhite}`,
borderRadius: '0.05rem'
} })] }), _jsx(Box, { width: widthUnmount / 2, sx: { overscrollBehavior: 'contain' }, overflow: 'auto', position: 'relative', display: 'flex', justifyContent: 'center', children: _jsx(Box, { ref: refUnmount, position: 'absolute', display: 'flex', flexDir: 'column', pt: '0.5rem', sx: {
'&>*:not(:last-child)': {
mb: 2
}
}, children: unmountChildren }) })] }), _jsx(SemicircularButton, { borderRadius: '0 4rem 4rem 0', onClick: () => alert('right') })] }) }));
});
//# sourceMappingURL=grid-component.js.map