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;

39
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(() => {
try {
const parsed = new URL(url, 'http://example.com'); const parsed = new URL(url, 'http://example.com');
update(parsed);
if (parsed.host === 'example.com') { if (parsed.host === 'example.com') {
return; return;
} }
update(parsed); } catch (e) {
return;
}
}, [url, update]); }, [url, update]);
return ( return (
@@ -45,8 +50,29 @@ 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 && (
<View
$fr
$items="center"
$gap="sm"
initial={{ opacity: 0, y: 20, height: 0 }}
animate={{ opacity: 1, y: 0, height: 'auto' }}
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 }}
>
<Dialog.Close> <Dialog.Close>
<Card <Card
$fr $fr
@@ -56,7 +82,9 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
onClick={() => handleSave(widget.id, widget.data)} onClick={() => handleSave(widget.id, widget.data)}
> >
<View> <View>
<Typography variant="header">{widget.icon}</Typography> <Typography variant="header">
{widget.icon}
</Typography>
</View> </View>
<View> <View>
<Typography variant="title">{widget.name}</Typography> <Typography variant="title">{widget.name}</Typography>
@@ -68,8 +96,9 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
</View> </View>
</Card> </Card>
</Dialog.Close> </Dialog.Close>
</View> </motion.div>
))} ))}
</AnimatePresence>
</View> </View>
</Dialog.Content> </Dialog.Content>
</Dialog.Portal> </Dialog.Portal>