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 { Theme } from '../../theme';
import { motion } from 'framer-motion';
type SizeKey = keyof Theme['space'];
type BgKey = keyof Theme['colors']['bg'];
@@ -22,7 +23,7 @@ const getSize = (
return '0';
};
const View = styled.div<{
const View = styled(motion.div)<{
$br?: boolean;
$bg?: BgKey;
$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 { useGetWidgetsFromUrl } from '@refocus/sdk';
import { Typography } from '../../typography';
import { AnimatePresence, motion } from 'framer-motion';
type AddWidgetFromUrlProps = {
onCreate: (name: string, data: any) => void;
@@ -20,11 +21,15 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
);
useEffect(() => {
const parsed = new URL(url, 'http://example.com');
if (parsed.host === 'example.com') {
try {
const parsed = new URL(url, 'http://example.com');
update(parsed);
if (parsed.host === 'example.com') {
return;
}
} catch (e) {
return;
}
update(parsed);
}, [url, update]);
return (
@@ -45,31 +50,55 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
value={url}
/>
</View>
{widgets.map((widget) => (
<View key={widget.id}>
<Dialog.Close>
<Card
$fr
$items="center"
$gap="md"
$p="md"
onClick={() => handleSave(widget.id, widget.data)}
<AnimatePresence>
{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 }}
>
<View>
<Typography variant="header">{widget.icon}</Typography>
</View>
<View>
<Typography variant="title">{widget.name}</Typography>
{widget.description && (
<Typography variant="body">
{widget.description}
</Typography>
)}
</View>
</Card>
</Dialog.Close>
</View>
))}
<Dialog.Close>
<Card
$fr
$items="center"
$gap="md"
$p="md"
onClick={() => handleSave(widget.id, widget.data)}
>
<View>
<Typography variant="header">
{widget.icon}
</Typography>
</View>
<View>
<Typography variant="title">{widget.name}</Typography>
{widget.description && (
<Typography variant="body">
{widget.description}
</Typography>
)}
</View>
</Card>
</Dialog.Close>
</motion.div>
))}
</AnimatePresence>
</View>
</Dialog.Content>
</Dialog.Portal>