morten/refocus.dev
1
0
Fork 0
mirror of https://github.com/morten-olsen/refocus.dev.git synced 2026-02-08 00:46:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: collapsable widgets

Browse Source
This commit is contained in:
Morten Olsen
2023-06-16 23:31:53 +02:00
parent 0784be02c3
commit 11299a31fa
1 changed files with 55 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/ui/src/interface/widget/index.tsx
View File

@@ -5,6 +5,8 @@ import {
WidgetView, WidgetView,
useWidget, useWidget,
} from '@refocus/sdk'; } from '@refocus/sdk';
import { MdKeyboardArrowUp } from 'react-icons/md';
import { motion } from 'framer-motion';
import { VscTrash } from 'react-icons/vsc'; import { VscTrash } from 'react-icons/vsc';
import { CgMoreO } from 'react-icons/cg'; import { CgMoreO } from 'react-icons/cg';
import { Dialog, View } from '../../base'; import { Dialog, View } from '../../base';
@@ -29,6 +31,10 @@ const WidgetWrapper = styled(View)`
flex: 1; flex: 1;
`; `;
const Spacer = styled(View)`
flex: 1;
`;
const Widget: React.FC<WidgetProps> = ({ const Widget: React.FC<WidgetProps> = ({
id, id,
data, data,
@@ -37,6 +43,7 @@ const Widget: React.FC<WidgetProps> = ({
onRemove, onRemove,
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = useState(true);
const [showEdit, setShowEdit] = useState(false); const [showEdit, setShowEdit] = useState(false);
const widget = useWidget(id); const widget = useWidget(id);
const hasMenu = useMemo( const hasMenu = useMemo(
@@ -52,40 +59,54 @@ const Widget: React.FC<WidgetProps> = ({
); );
return ( return (
<WidgetProvider id={id} data={data} setData={setData}> <WidgetProvider id={id} data={data} setData={setData}>
<Wrapper className={className} $fr> <View $fr>
<WidgetWrapper $f={1}> <motion.div animate={{ rotate: open ? 180 : 0 }}>
<WidgetView /> <View
</WidgetWrapper> $items="center"
<View $fc> $justify="center"
{hasMenu && ( $fc
<DropdownMenu> $p="sm"
<DropdownMenu.Trigger> onClick={() => setOpen(!open)}
<View $p="sm"> >
<CgMoreO /> <MdKeyboardArrowUp size={22} />
</View> </View>
</DropdownMenu.Trigger> </motion.div>
<DropdownMenu.Portal> <Spacer />
<DropdownMenu.Content alignOffset={50}> {hasMenu && (
{!!onRemove && ( <DropdownMenu>
<DropdownMenu.Item onClick={onRemove}> <DropdownMenu.Trigger>
<DropdownMenu.Icon> <View $p="sm">
<VscTrash color={theme?.colors.simple.red} /> <CgMoreO />
</DropdownMenu.Icon> </View>
Remove </DropdownMenu.Trigger>
</DropdownMenu.Item> <DropdownMenu.Portal>
)} <DropdownMenu.Content alignOffset={50}>
{!!widget?.edit && !!setData && ( {!!onRemove && (
<DropdownMenu.Item onClick={() => setShowEdit(true)}> <DropdownMenu.Item onClick={onRemove}>
Edit <DropdownMenu.Icon>
</DropdownMenu.Item> <VscTrash color={theme?.colors.simple.red} />
)} </DropdownMenu.Icon>
<DropdownMenu.Arrow /> Remove
</DropdownMenu.Content> </DropdownMenu.Item>
</DropdownMenu.Portal> )}
</DropdownMenu> {!!widget?.edit && !!setData && (
)} <DropdownMenu.Item onClick={() => setShowEdit(true)}>
</View> Edit
</Wrapper> </DropdownMenu.Item>
)}
<DropdownMenu.Arrow />
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu>
)}
</View>
<motion.div animate={{ height: open ? 'auto' : 0 }}>
<Wrapper className={className} $fr>
<WidgetWrapper $f={1}>
<WidgetView />
</WidgetWrapper>
</Wrapper>
</motion.div>
<Dialog open={showEdit} onOpenChange={setShowEdit}> <Dialog open={showEdit} onOpenChange={setShowEdit}>
<Dialog.Overlay /> <Dialog.Overlay />
<Dialog.Content> <Dialog.Content>