Skip to content

Commit

Permalink
feat: draggable widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@limpbrains
limpbrains committed Dec 1, 2022
1 parent a38cb04 commit fbb67ab
Show file tree
Hide file tree
Showing 19 changed files with 326 additions and 199 deletions.
11 changes: 9 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@ Text.defaultProps.allowFontScaling = false;
TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.allowFontScaling = false;

// TEMP: ignore <Dialog /> warning on iOS
LogBox.ignoreLogs(['Modal with']);
LogBox.ignoreLogs([
'Require cycle',
// TEMP: ignore <Dialog /> warning on iOS
'Modal with',
// we have react-native-draggable-flatlist inside <ScrollView /> on main screen
// unfortunalty, there is not good way to hide this error yet
// https://github.com/computerjazz/react-native-draggable-flatlist/issues/422
'VirtualizedLists should never be nested inside plain ScrollViews',
]);

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(Root));
3 changes: 3 additions & 0 deletions src/assets/icons/wallet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,3 +277,6 @@ export const plusCircledIcon = (color = '#75BF72'): string =>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16C10 15.7239 10.2239 15.5 10.5 15.5H21.5C21.7761 15.5 22 15.7239 22 16C22 16.2761 21.7761 16.5 21.5 16.5H10.5C10.2239 16.5 10 16.2761 10 16Z" fill=${color}/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 10C16.2761 10 16.5 10.2239 16.5 10.5V21.5C16.5 21.7761 16.2761 22 16 22C15.7239 22 15.5 21.7761 15.5 21.5V10.5C15.5 10.2239 15.7239 10 16 10Z" fill=${color}/>
</svg>`;

export const keyIcon = (color = 'white'): string =>
`<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill=${color}><path d="m11.646 15.3541c-.7709-1.9228-.8542-4.0528-.2359-6.02992.6183-1.97714 1.9002-3.68017 3.6292-4.82123 1.729-1.14105 3.7989-1.65014 5.8599-1.44122 2.061.20893 3.9866 1.12306 5.4515 2.58787 1.4648 1.46482 2.3789 3.39047 2.5878 5.4515.2089 2.061-.3002 4.1309-1.4412 5.8599-1.1411 1.7289-2.8441 3.0109-4.8213 3.6292-1.9771.6182-4.1071.5349-6.0299-.236l.0001-.0002-1.646 1.646h-3v3h-2.99996v3h-5v-5l7.64596-7.646z" opacity=".2"/><path d="m22.5 11c.8284 0 1.5-.6716 1.5-1.5 0-.82843-.6716-1.5-1.5-1.5s-1.5.67157-1.5 1.5c0 .8284.6716 1.5 1.5 1.5z"/><path clip-rule="evenodd" d="m20.7983 4.05664c-1.8318-.1857-3.6715.26678-5.2082 1.28094s-2.6761 2.52779-3.2256 4.28506c-.547 1.74936-.4761 3.63326.2005 5.33616.1592.3699.0823.8084-.2116 1.1023l-7.35316 7.3531v3.5858h3v-2c0-.5523.44772-1 1-1h1.99996v-2c0-.5523.4478-1 1-1h2.5858l1.3531-1.3531c.2931-.2931.7307-.3708 1.1005-.2123 1.7034.6772 3.588.7484 5.338.2012 1.7573-.5496 3.2709-1.689 4.2851-3.2257 1.0141-1.5366 1.4666-3.3764 1.2809-5.2082-.1857-1.83177-.9981-3.54327-2.3-4.84519-1.302-1.30191-3.0135-2.11438-4.8453-2.30007zm-3.8945 17.45406c1.9657.639 4.0874.6541 6.0707.0339 2.197-.687 4.0895-2.1116 5.3574-4.0328 1.268-1.9213 1.8337-4.2214 1.6015-6.5116-.2321-2.29018-1.2479-4.42998-2.8756-6.0577s-3.7675-2.64351-6.0577-2.87567-4.5904.33355-6.5116 1.6015c-1.9213 1.26795-3.3458 3.16037-4.0328 5.35739-.62024 1.98328-.60511 4.10498.0338 6.07078l-7.19636 7.1964c-.18754.1875-.2929.4419-.2929.7071v5c0 .5523.44772 1 1 1h5c.55229 0 .99996-.4477.99996-1v-2h2c.5523 0 1-.4477 1-1v-2h2c.2653 0 .5196-.1054.7071-.2929z" fill-rule="evenodd"/></g></svg>`;
51 changes: 35 additions & 16 deletions src/components/AuthWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { Client } from '@synonymdev/slashtags-auth';

import { useProfile, useSelectedSlashtag } from '../hooks/slashtags';
import {
KeyIcon,
ListIcon,
Text01M,
TouchableOpacity,
TrashIcon,
Expand All @@ -25,9 +27,15 @@ import Dialog from './Dialog';
const AuthWidget = ({
url,
widget,
isEditing = false,
onLongPress,
onPressIn,
}: {
url: string;
widget: IWidget;
isEditing?: boolean;
onLongPress?: () => void;
onPressIn?: () => void;
}): ReactElement => {
const [showButtons, setShowButtons] = useState(false);
const [showDialog, setShowDialog] = useState(false);
Expand Down Expand Up @@ -72,6 +80,8 @@ const AuthWidget = ({
<TouchableOpacity
style={styles.container}
onPress={switchShowButtons}
onLongPress={onLongPress}
onPressIn={onPressIn}
activeOpacity={0.9}>
<View style={styles.left}>
<ProfileImage
Expand All @@ -83,21 +93,28 @@ const AuthWidget = ({
<Text01M>{profile?.name || ' '}</Text01M>
</View>
<View style={styles.right}>
{showButtons ? (
{showButtons && widget.magiclink && !isEditing && (
<View style={styles.buttonsContainer}>
{widget.magiclink && (
<>
<Button
style={styles.deleteButton}
icon={<TrashIcon width={20} />}
onPress={onDelete}
/>
<Button text="Sign in" onPress={openMagicLink} />
</>
)}
<Button
text="Sign in"
onPress={openMagicLink}
icon={<KeyIcon color="brand" width={20} height={20} />}
/>
</View>
)}
{isEditing && (
<View style={styles.buttonsContainer}>
<TouchableOpacity style={styles.actionButton} onPress={onDelete}>
<TrashIcon width={22} />
</TouchableOpacity>
<TouchableOpacity
style={styles.actionButton}
onLongPress={onLongPress}
onPressIn={onPressIn}
activeOpacity={0.9}>
<ListIcon color="white" width={24} />
</TouchableOpacity>
</View>
) : (
<View />
)}
</View>
<Dialog
Expand Down Expand Up @@ -145,9 +162,11 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
},
deleteButton: {
minWidth: 0,
marginHorizontal: 8,
actionButton: {
paddingHorizontal: 10,
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
});

Expand Down
9 changes: 6 additions & 3 deletions src/components/BlocksWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ const BlocksWidget = ({
url,
widget,
isEditing = false,
onPress,
onLongPress,
onPressIn,
}: {
url: string;
widget: IWidget;
isEditing?: boolean;
onPress?: () => void;
onLongPress?: () => void;
onPressIn?: () => void;
}): ReactElement => {
const { value } = useFeedWidget({ url, feed: widget.feed });

Expand All @@ -26,7 +28,8 @@ const BlocksWidget = ({
label={value?.height || ''}
icon={<CubeIcon width={32} height={32} />}
isEditing={isEditing}
onPress={onPress}
onLongPress={onLongPress}
onPressIn={onPressIn}
right={
<View style={styles.numbers}>
{value && (
Expand Down
51 changes: 28 additions & 23 deletions src/components/FactsWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,30 @@ import { SlashURL } from '@synonymdev/slashtags-sdk';
import b4a from 'b4a';

import {
View,
Text01M,
Caption13M,
GearIcon,
TrashIcon,
LightBulbIcon,
ListIcon,
Text01M,
TrashIcon,
View,
} from '../styles/components';
import { useSlashtagsSDK } from './SlashtagsProvider';
import { showErrorNotification } from '../utils/notifications';
import { navigate } from '../navigation/root/RootNavigator';
import Button from './Button';
import Dialog from './Dialog';
import { deleteWidget } from '../store/actions/widgets';

const FactsWidget = ({
url,
isEditing = false,
onPress,
onLongPress,
onPressIn,
}: {
url: string;
isEditing?: boolean;
onPress?: () => void;
onLongPress?: () => void;
onPressIn?: () => void;
}): ReactElement => {
const [showDialog, setShowDialog] = useState(false);
const [fact, setFact] = useState<string | undefined>();
Expand Down Expand Up @@ -96,7 +98,8 @@ const FactsWidget = ({
<TouchableOpacity
style={styles.root}
activeOpacity={0.9}
onPress={onPress}>
onLongPress={onLongPress}
onPressIn={onPressIn}>
<View style={styles.icon}>
{<LightBulbIcon width={32} height={32} />}
</View>
Expand All @@ -116,16 +119,19 @@ const FactsWidget = ({

{isEditing && (
<View style={styles.buttonsContainer}>
<Button
style={styles.deleteButton}
icon={<TrashIcon width={20} />}
onPress={onDelete}
/>
<Button
style={styles.settingsButton}
icon={<GearIcon width={20} />}
onPress={onEdit}
/>
<TouchableOpacity style={styles.actionButton} onPress={onDelete}>
<TrashIcon width={22} />
</TouchableOpacity>
<TouchableOpacity style={styles.actionButton} onPress={onEdit}>
<GearIcon width={22} />
</TouchableOpacity>
<TouchableOpacity
style={styles.actionButton}
onLongPress={onLongPress}
onPressIn={onPressIn}
activeOpacity={0.9}>
<ListIcon color="white" width={24} />
</TouchableOpacity>
</View>
)}
<Dialog
Expand Down Expand Up @@ -184,12 +190,11 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
deleteButton: {
minWidth: 0,
marginHorizontal: 8,
},
settingsButton: {
minWidth: 0,
actionButton: {
paddingHorizontal: 10,
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
});

Expand Down
62 changes: 35 additions & 27 deletions src/components/FeedWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import { StyleSheet } from 'react-native';

import { navigate } from '../navigation/root/RootNavigator';
import {
Caption13M,
GearIcon,
TouchableOpacity,
View,
ListIcon,
Text01M,
Caption13M,
TouchableOpacity,
TrashIcon,
View,
} from '../styles/components';
import Button from './Button';
import ProfileImage from './ProfileImage';
import { IWidget } from '../store/types/widgets';
import { useFeedWidget } from '../hooks/widgets';
Expand All @@ -27,14 +27,14 @@ export const FeedWidget = ({
icon,
name,
isEditing = false,
onPress,
onLongPress,
}: {
url: string;
widget: IWidget;
icon?: ReactElement;
name?: string;
isEditing?: boolean;
onPress?: () => void;
onLongPress?: () => void;
}): ReactElement => {
const { value } = useFeedWidget({ url, feed: widget.feed });

Expand All @@ -44,7 +44,7 @@ export const FeedWidget = ({
name={name || widget.feed.name}
label={widget.feed.field.name}
isEditing={isEditing}
onPress={onPress}
onLongPress={onLongPress}
right={<DefaultRightComponent value={value?.toString()} />}
icon={
icon || (
Expand All @@ -67,8 +67,9 @@ export const BaseFeedWidget = ({
label,
right = <View />,
middle,
isEditing = false,
onPress,
isEditing,
onLongPress,
onPressIn,
}: {
url: string;
name?: string;
Expand All @@ -77,7 +78,8 @@ export const BaseFeedWidget = ({
right?: ReactElement;
middle?: ReactElement;
isEditing?: boolean;
onPress?: () => void;
onLongPress?: () => void;
onPressIn?: () => void;
}): ReactElement => {
const [showDialog, setShowDialog] = useState(false);

Expand All @@ -90,7 +92,11 @@ export const BaseFeedWidget = ({
};

return (
<TouchableOpacity style={styles.root} activeOpacity={0.9} onPress={onPress}>
<TouchableOpacity
style={styles.root}
activeOpacity={0.9}
onLongPress={onLongPress}
onPressIn={onPressIn}>
<View style={styles.infoContainer}>
<View style={styles.icon}>{icon}</View>
<View style={styles.labelsContainer}>
Expand All @@ -103,16 +109,19 @@ export const BaseFeedWidget = ({

{isEditing ? (
<>
<Button
style={styles.deleteButton}
icon={<TrashIcon width={20} />}
onPress={onDelete}
/>
<Button
style={styles.settingsButton}
icon={<GearIcon width={20} />}
onPress={onEdit}
/>
<TouchableOpacity style={styles.actionButton} onPress={onDelete}>
<TrashIcon width={22} />
</TouchableOpacity>
<TouchableOpacity style={styles.actionButton} onPress={onEdit}>
<GearIcon width={22} />
</TouchableOpacity>
<TouchableOpacity
style={styles.actionButton}
onLongPress={onLongPress}
onPressIn={onPressIn}
activeOpacity={0.9}>
<ListIcon color="white" width={24} />
</TouchableOpacity>
</>
) : (
<View style={styles.dataContainer}>
Expand Down Expand Up @@ -179,12 +188,11 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'flex-end',
},
deleteButton: {
minWidth: 0,
marginHorizontal: 8,
},
settingsButton: {
minWidth: 0,
actionButton: {
paddingHorizontal: 10,
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
});

Expand Down
Loading

0 comments on commit fbb67ab

Please sign in to comment.