Skip to content

Commit

Permalink
fix: use Modal as a backdrop white dragging widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@limpbrains
limpbrains committed Jan 31, 2023
1 parent ca9cdb7 commit ec67e06
Show file tree
Hide file tree
Showing 9 changed files with 205 additions and 152 deletions.
2 changes: 1 addition & 1 deletion ios/Podfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -854,4 +854,4 @@ SPEC CHECKSUMS:

PODFILE CHECKSUM: 784c6e02c28154c0549ad3a940a4c2d528699d0d

COCOAPODS: 1.11.3
COCOAPODS: 1.11.2
186 changes: 93 additions & 93 deletions ios/bitkit.xcodeproj/project.pbxproj
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
"react-native-device-info": "^10.3.0",
"react-native-document-picker": "^8.1.0",
"react-native-dotenv": "3.4.6",
"react-native-draggable-flatlist": "^3.1.2",
"react-native-draggable-flatlist": "4.0.0",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.9.0",
"react-native-haptic-feedback": "^1.13.1",
Expand Down
3 changes: 3 additions & 0 deletions src/assets/icons/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,6 @@ export const twitterIcon = (color = 'white'): string =>

export const listIcon = (color = 'white'): string =>
`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12Z" fill="${color}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 5.58579 3.33579 5.25 3.75 5.25H20.25C20.6642 5.25 21 5.58579 21 6C21 6.41421 20.6642 6.75 20.25 6.75H3.75C3.33579 6.75 3 6.41421 3 6Z" fill="${color}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 18C3 17.5858 3.33579 17.25 3.75 17.25H20.25C20.6642 17.25 21 17.5858 21 18C21 18.4142 20.6642 18.75 20.25 18.75H3.75C3.33579 18.75 3 18.4142 3 18Z" fill="${color}"/></svg>`;

export const sortAscendingIcon = (color = 'white'): string =>
`<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="${color}" fill-rule="evenodd"><path d="m17.2929 20.2922c.3905-.3906 1.0237-.3906 1.4142 0l4.2929 4.2929 4.2928-4.2922c.3906-.3905 1.0237-.3905 1.4142.0001.3905.3905.3905 1.0237-.0001 1.4142l-4.9998 4.9992c-.3906.3905-1.0237.3905-1.4142 0l-5-5c-.3905-.3905-.3905-1.0237 0-1.4142z"/><path d="m23 12.9992c.5523 0 1 .4477 1 1v12c0 .5523-.4477 1-1 1s-1-.4477-1-1v-12c0-.5523.4477-1 1-1z"/><path d="m5 15.9992c0-.5523.44772-1 1-1h8.9999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-8.9999c-.55228 0-1-.4477-1-1z"/><path d="m5 7.99921c0-.55229.44772-1 1-1h16.9999c.5523 0 1 .44771 1 1 0 .55228-.4477 1-1 1h-16.9999c-.55228 0-1-.44772-1-1z"/><path d="m5 23.9992c0-.5523.44772-1 1-1h7c.5523 0 1 .4477 1 1s-.4477 1-1 1h-7c-.55228 0-1-.4477-1-1z"/></g></svg>`;
2 changes: 1 addition & 1 deletion src/components/FactsWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const FactsWidget = ({
<View style={styles.row}>
<View style={styles.linkContainer}>
<Caption13M color="gray1" numberOfLines={1}>
{fact}
{!isEditing ? fact : ' '}
</Caption13M>
</View>
</View>
Expand Down
127 changes: 86 additions & 41 deletions src/components/Widgets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,24 @@ import React, {
useState,
useCallback,
useMemo,
useRef,
memo,
} from 'react';
import { StyleSheet } from 'react-native';
import { StyleSheet, Modal } from 'react-native';
import { useSelector } from 'react-redux';
import {
NestableDraggableFlatList,
NestableScrollContainer,
import DraggableFlatList, {
RenderItemParams,
ScaleDecorator,
} from 'react-native-draggable-flatlist';
import { useFocusEffect } from '@react-navigation/native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { FadeIn, FadeOut } from 'react-native-reanimated';

import { rootNavigation } from '../navigation/root/RootNavigator';
import Store from '../store/types';
import { View, TouchableOpacity } from '../styles/components';
import { AnimatedView, TouchableOpacity, View } from '../styles/components';
import { Subtitle, Text, Text01M } from '../styles/text';
import { PlusIcon, ListIcon, XIcon } from '../styles/icons';
import { PlusIcon, SortAscendingIcon, Checkmark } from '../styles/icons';
import { SUPPORTED_FEED_TYPES } from '../utils/widgets';
import { setWidgetsSortOrder } from '../store/actions/widgets';

Expand All @@ -31,31 +32,40 @@ import BlocksWidget from './BlocksWidget';
import FactsWidget from './FactsWidget';
import { isSlashtagsDisabled } from '../utils/slashtags';

export const Widgets = ({
onEditStart,
onEditEnd,
}: {
onEditStart: () => void;
onEditEnd: () => void;
}): ReactElement => {
type WCM = {
x: number;
y: number;
width: number;
height: number;
pageX: number;
pageY: number;
};

export const Widgets = (): ReactElement => {
const widgets = useSelector((state: Store) => state.widgets.widgets);
const sortOrder = useSelector((state: Store) => state.widgets.sortOrder);
const [editing, setEditing] = useState(false);
const widgetsContainer = useRef<any>(null);
const [wcm, setwcm] = useState<undefined | WCM>();

const widgetsArray = useMemo(() => {
return Object.entries(widgets).sort(
([a], [b]) => sortOrder.indexOf(a) - sortOrder.indexOf(b),
);
}, [widgets, sortOrder]);

const handleEditStart = useCallback((): void => {
const handleEditStart = useCallback(async (): Promise<void> => {
const res: WCM = await new Promise((resolve) => {
widgetsContainer.current?.measure((x, y, width, height, pageX, pageY) => {
resolve({ x, y, width, height, pageX, pageY });
});
});
setwcm(res);
setEditing(true);
onEditStart();
}, [onEditStart]);
}, []);
const handleEditEnd = useCallback((): void => {
setEditing(false);
onEditEnd();
}, [onEditEnd]);
}, []);

useFocusEffect(useCallback(handleEditEnd, [handleEditEnd]));

Expand Down Expand Up @@ -166,14 +176,18 @@ export const Widgets = ({
rootNavigation.navigate('WidgetsRoot');
}, []);

return isSlashtagsDisabled ? (
<>
<View style={styles.titleRow}>
<Subtitle style={styles.title}>Widgets</Subtitle>
</View>
<Text color="gray">SLASHTAGS DISABLED</Text>
</>
) : (
if (isSlashtagsDisabled) {
return (
<>
<View style={styles.titleRow}>
<Subtitle style={styles.title}>Widgets</Subtitle>
</View>
<Text color="gray">SLASHTAGS DISABLED</Text>
</>
);
}

return (
<>
<View style={styles.titleRow}>
<Subtitle style={styles.title}>Widgets</Subtitle>
Expand All @@ -182,32 +196,55 @@ export const Widgets = ({
style={styles.edit}
onPress={editing ? handleEditEnd : handleEditStart}>
{editing ? (
<XIcon width={24} height={24} color="gray1" />
<Checkmark width={24} height={24} color="gray1" />
) : (
<ListIcon color="gray1" />
<SortAscendingIcon color="gray1" />
)}
</TouchableOpacity>
)}
</View>
{editing ? (
<NestableScrollContainer>
<NestableDraggableFlatList
data={widgetsArray}
keyExtractor={(item): string => item[0]}
renderItem={renderEditing}
onDragEnd={handleDragEnd}
activationDistance={1}
/>
</NestableScrollContainer>
) : (
widgetsArray.map(renderFlat)
)}
<View ref={widgetsContainer}>{widgetsArray.map(renderFlat)}</View>
<TouchableOpacity style={styles.add} onPress={onAdd}>
<View color="green16" style={styles.iconCircle}>
<PlusIcon height={16} color="green" />
</View>
<Text01M>Add Widget</Text01M>
</TouchableOpacity>
<Modal
transparent={true}
visible={editing}
onRequestClose={handleEditEnd}>
<TouchableOpacity
style={styles.backdrop}
onPress={handleEditEnd}
activeOpacity={0}
/>
{editing && wcm && (
<AnimatedView
entering={FadeIn}
exiting={FadeOut}
style={[
styles.absolute,
{
left: wcm.pageX,
top: wcm.pageY,
width: wcm.width,
height: wcm.height,
},
]}>
{/* we need to wrap DraggableFlatList with GestureHandlerRootView, otherwise Gestures are not working in <Modal for Android */}
<GestureHandlerRootView>
<DraggableFlatList
data={widgetsArray}
keyExtractor={(item): string => item[0]}
renderItem={renderEditing}
onDragEnd={handleDragEnd}
activationDistance={1}
/>
</GestureHandlerRootView>
</AnimatedView>
)}
</Modal>
</>
);
};
Expand Down Expand Up @@ -242,6 +279,14 @@ const styles = StyleSheet.create({
alignItems: 'center',
marginRight: 16,
},
backdrop: {
width: '100%',
height: '100%',
opacity: 0,
},
absolute: {
...StyleSheet.absoluteFillObject,
},
});

export default memo(Widgets);
12 changes: 2 additions & 10 deletions src/screens/Wallets/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ const Wallets = ({
}: WalletScreenProps<'Wallets'>): ReactElement => {
const { onFocus } = route.params;
const [refreshing, setRefreshing] = useState(false);
const [scrollEnabled, setScrollEnabled] = useState(true);
const colors = useColors();
const hideBalance = useSelector(hideBalanceSelector);
const hideOnboardingSetting = useSelector(hideOnboardingMessageSelector);
Expand Down Expand Up @@ -75,9 +74,6 @@ const Wallets = ({
setRefreshing(false);
};

const handleWidgetsEditStart = useCallback(() => setScrollEnabled(false), []);
const handleWidgetsEditEnd = useCallback(() => setScrollEnabled(true), []);

const hideOnboarding = hideOnboardingSetting || !empty;

return (
Expand All @@ -99,8 +95,7 @@ const Wallets = ({
onRefresh={onRefresh}
tintColor={colors.refreshControl}
/>
}
scrollEnabled={scrollEnabled}>
}>
<DetectSwipe
onSwipeLeft={toggleHideBalance}
onSwipeRight={toggleHideBalance}>
Expand All @@ -115,10 +110,7 @@ const Wallets = ({
<View style={styles.contentPadding}>
<ConnectivityIndicator />
<Assets />
<Widgets
onEditStart={handleWidgetsEditStart}
onEditEnd={handleWidgetsEditEnd}
/>
<Widgets />
<ActivityListShort />
<BetaWarning />
</View>
Expand Down
11 changes: 11 additions & 0 deletions src/styles/icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ import {
mediumIcon,
twitterIcon,
listIcon,
sortAscendingIcon,
arrowCounterClock,
} from '../assets/icons/settings';

Expand Down Expand Up @@ -553,6 +554,16 @@ export const ListIcon = styled(SvgXml).attrs((props) => ({
color: props.color ? props.theme.colors[props.color] : 'white',
}));

export const SortAscendingIcon = styled(SvgXml).attrs((props) => ({
xml: sortAscendingIcon(
props.color ? props.theme.colors[props.color] : 'white',
),
height: props.height ?? '24px',
width: props.width ?? '24px',
}))<IconProps>((props) => ({
color: props.color ? props.theme.colors[props.color] : 'white',
}));

export const Feather = styled(_Feather).attrs((props) => ({
color: props.color
? props.theme.colors[props.color]
Expand Down
12 changes: 7 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -813,7 +813,7 @@
"@babel/helper-validator-option" "^7.18.6"
"@babel/plugin-transform-flow-strip-types" "^7.18.6"

"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7", "@babel/preset-typescript@^7.17.12":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
Expand Down Expand Up @@ -9509,10 +9509,12 @@ react-native-dotenv@3.4.6:
dependencies:
dotenv "^16.0.3"

react-native-draggable-flatlist@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/react-native-draggable-flatlist/-/react-native-draggable-flatlist-3.1.2.tgz#b66538007f645ccd851c729d4b8a8f7e07666d3f"
integrity sha512-cqBR+lZktTqHY/J7V0aq+TZNkuqeILxwZ5bBXKndokwH4qvZl7ifijM7LlfWhfhU1/pzjketTsX7P2zyojfAaQ==
react-native-draggable-flatlist@4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/react-native-draggable-flatlist/-/react-native-draggable-flatlist-4.0.0.tgz#c047b24511b40080d3a4b7967c6cc40ed2368244"
integrity sha512-3DVzZsCXNlK29UyIkx4Uh5+2TAHwHC9Q45i1lbuqEOcuSmZ8jHcqbE8VkLot2bVfWZGO5WFgihStmxkI0gBHRQ==
dependencies:
"@babel/preset-typescript" "^7.17.12"

react-native-flipper@^0.162.0:
version "0.162.0"
Expand Down

0 comments on commit ec67e06

Please sign in to comment.