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

chore: animated widget add screen

Browse Source
This commit is contained in:
Morten Olsen
2023-06-19 09:37:27 +02:00
parent 85b88822b4
commit 4ec88717b0
2 changed files with 58 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/ui/src/base/view/index.tsx
View File

@@ -1,5 +1,6 @@
import { styled } from 'styled-components'; import { styled } from 'styled-components';
import { Theme } from '../../theme'; import { Theme } from '../../theme';
import { motion } from 'framer-motion';
type SizeKey = keyof Theme['space']; type SizeKey = keyof Theme['space'];
type BgKey = keyof Theme['colors']['bg']; type BgKey = keyof Theme['colors']['bg'];
@@ -22,7 +23,7 @@ const getSize = (
return '0'; return '0';
}; };
const View = styled.div<{ const View = styled(motion.div)<{
$br?: boolean; $br?: boolean;
$bg?: BgKey; $bg?: BgKey;
$m?: SizeKey; $m?: SizeKey;

83
packages/ui/src/interface/add-from-url/index.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
import { Card, Dialog, View } from '../../base'; import { Card, Dialog, View } from '../../base';
import { useGetWidgetsFromUrl } from '@refocus/sdk'; import { useGetWidgetsFromUrl } from '@refocus/sdk';
import { Typography } from '../../typography'; import { Typography } from '../../typography';
import { AnimatePresence, motion } from 'framer-motion';
type AddWidgetFromUrlProps = { type AddWidgetFromUrlProps = {
onCreate: (name: string, data: any) => void; onCreate: (name: string, data: any) => void;
@@ -20,11 +21,15 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
); );
useEffect(() => { useEffect(() => {
const parsed = new URL(url, 'http://example.com'); try {
if (parsed.host === 'example.com') { const parsed = new URL(url, 'http://example.com');
update(parsed);
if (parsed.host === 'example.com') {
return;
}
} catch (e) {
return; return;
} }
update(parsed);
}, [url, update]); }, [url, update]);
return ( return (
@@ -45,31 +50,55 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
value={url} value={url}
/> />
</View> </View>
{widgets.map((widget) => ( <AnimatePresence>
<View key={widget.id}> {widgets.length === 0 && url && (
<Dialog.Close> <View
<Card $fr
$fr $items="center"
$items="center" $gap="sm"
$gap="md" initial={{ opacity: 0, y: 20, height: 0 }}
$p="md" animate={{ opacity: 1, y: 0, height: 'auto' }}
onClick={() => handleSave(widget.id, widget.data)} exit={{ opacity: 0, y: 20, height: 0 }}
>
<Typography variant="body">
No widgets found at this URL
</Typography>
</View>
)}
{widgets.length > 0 &&
widgets.map((widget) => (
<motion.div
key={widget.id}
initial={{ opacity: 0, y: 20, height: 0 }}
animate={{ opacity: 1, y: 0, height: 'auto' }}
exit={{ opacity: 0, y: 20, height: 0 }}
> >
<View> <Dialog.Close>
<Typography variant="header">{widget.icon}</Typography> <Card
</View> $fr
<View> $items="center"
<Typography variant="title">{widget.name}</Typography> $gap="md"
{widget.description && ( $p="md"
<Typography variant="body"> onClick={() => handleSave(widget.id, widget.data)}
{widget.description} >
</Typography> <View>
)} <Typography variant="header">
</View> {widget.icon}
</Card> </Typography>
</Dialog.Close> </View>
</View> <View>
))} <Typography variant="title">{widget.name}</Typography>
{widget.description && (
<Typography variant="body">
{widget.description}
</Typography>
)}
</View>
</Card>
</Dialog.Close>
</motion.div>
))}
</AnimatePresence>
</View> </View>
</Dialog.Content> </Dialog.Content>
</Dialog.Portal> </Dialog.Portal>