BlueWallet/components/FloatButtons.tsx

196 lines
5.5 KiB
TypeScript
Raw Normal View History

import React, { forwardRef, ReactNode, useEffect, useRef, useState, useCallback } from 'react';
2024-05-20 10:54:13 +01:00
import { Animated, Dimensions, PixelRatio, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
2023-10-23 21:28:44 -04:00
import { useTheme } from './themes';
2020-09-07 20:46:37 +03:00
2024-04-14 20:14:12 -04:00
const BORDER_RADIUS = 8;
const PADDINGS = 24;
2020-09-20 12:44:04 +03:00
const ICON_MARGIN = 7;
2020-09-07 20:46:37 +03:00
const buttonFontSize = (() => {
const baseSize = PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26);
return Math.min(22, baseSize);
})();
const containerStyles = StyleSheet.create({
2020-09-07 20:46:37 +03:00
root: {
alignSelf: 'center',
2024-04-17 21:19:28 -04:00
height: '6.9%',
2020-09-07 20:46:37 +03:00
minHeight: 44,
},
2021-03-23 15:16:32 +03:00
rootAbsolute: {
position: 'absolute',
},
rootInline: {},
2020-09-07 20:46:37 +03:00
rootPre: {
2021-03-23 15:16:32 +03:00
position: 'absolute',
2023-11-12 07:58:32 -04:00
bottom: -1000,
2020-09-07 20:46:37 +03:00
},
rootPost: {
flexDirection: 'row',
2020-09-20 12:24:00 +03:00
overflow: 'hidden',
2020-09-07 20:46:37 +03:00
},
rootRound: {
borderRadius: 9999,
},
});
const buttonStyles = StyleSheet.create({
root: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
},
icon: {
alignItems: 'center',
},
text: {
fontSize: buttonFontSize,
fontWeight: '600',
marginLeft: ICON_MARGIN,
backgroundColor: 'transparent',
},
2020-09-07 20:46:37 +03:00
});
2023-11-05 15:50:16 -04:00
interface FContainerProps {
children: ReactNode | ReactNode[];
inline?: boolean;
}
2024-01-05 21:15:42 -04:00
export const FContainer = forwardRef<View, FContainerProps>((props, ref) => {
const insets = useSafeAreaInsets();
2023-11-05 15:50:16 -04:00
const [newWidth, setNewWidth] = useState<number | undefined>(undefined);
const layoutCalculated = useRef(false);
const bottomInsets = { bottom: insets.bottom ? insets.bottom + 10 : 30 };
const { height, width } = useWindowDimensions();
const slideAnimation = useRef(new Animated.Value(height)).current;
useEffect(() => {
slideAnimation.setValue(height);
Animated.spring(slideAnimation, {
toValue: 0,
useNativeDriver: true,
speed: 100,
bounciness: 3,
}).start();
}, [height, slideAnimation]);
2020-09-07 20:46:37 +03:00
const computeNewWidth = useCallback(
(layoutWidth: number, totalChildren: number) => {
const maxWidth = width - BORDER_RADIUS - 140;
const paddedWidth = Math.ceil(layoutWidth + PADDINGS * 2);
let calculatedWidth = paddedWidth * totalChildren > maxWidth ? Math.floor(maxWidth / totalChildren) : paddedWidth;
if (totalChildren === 1 && calculatedWidth < 90) calculatedWidth = 90;
return calculatedWidth;
},
[width],
);
2023-11-05 15:50:16 -04:00
const onLayout = (event: { nativeEvent: { layout: { width: number } } }) => {
if (layoutCalculated.current) return;
const { width: layoutWidth } = event.nativeEvent.layout;
const totalChildren = React.Children.toArray(props.children).filter(Boolean).length;
setNewWidth(computeNewWidth(layoutWidth, totalChildren));
layoutCalculated.current = true;
2020-09-07 20:46:37 +03:00
};
const renderChild = (child: ReactNode, index: number, array: ReactNode[]): ReactNode => {
if (typeof child === 'string') {
return (
<View key={index} style={{ width: newWidth }}>
<Text adjustsFontSizeToFit numberOfLines={1}>
{child}
</Text>
</View>
);
}
return React.cloneElement(child as React.ReactElement<any>, {
width: newWidth,
key: index,
first: index === 0,
last: index === array.length - 1,
singleChild: array.length === 1,
});
};
const totalChildren = React.Children.toArray(props.children).filter(Boolean).length;
2020-09-07 20:46:37 +03:00
return (
<Animated.View
2021-03-23 15:16:32 +03:00
ref={ref}
onLayout={onLayout}
2023-11-11 20:28:49 -04:00
style={[
containerStyles.root,
props.inline ? containerStyles.rootInline : containerStyles.rootAbsolute,
2023-11-11 20:28:49 -04:00
bottomInsets,
newWidth ? containerStyles.rootPost : containerStyles.rootPre,
totalChildren === 1 ? containerStyles.rootRound : null,
{ transform: [{ translateY: slideAnimation }] },
2023-11-11 20:28:49 -04:00
]}
2021-03-23 15:16:32 +03:00
>
{newWidth ? React.Children.toArray(props.children).filter(Boolean).map(renderChild) : props.children}
</Animated.View>
2020-09-07 20:46:37 +03:00
);
});
2020-09-07 20:46:37 +03:00
2023-11-05 15:50:16 -04:00
interface FButtonProps {
text: string;
2023-11-05 15:50:29 -04:00
icon: ReactNode;
2023-11-05 15:50:16 -04:00
width?: number;
first?: boolean;
last?: boolean;
singleChild?: boolean;
2023-11-05 15:50:16 -04:00
disabled?: boolean;
2024-08-24 15:11:06 -04:00
testID?: string;
2024-04-14 21:01:30 -04:00
onPress: () => void;
2024-06-01 14:48:22 +01:00
onLongPress?: () => void;
2023-11-05 15:50:16 -04:00
}
export const FButton = ({ text, icon, width, first, last, singleChild, testID, ...props }: FButtonProps) => {
2020-10-08 18:23:58 -04:00
const { colors } = useTheme();
const customButtonStyles = StyleSheet.create({
2020-10-08 18:23:58 -04:00
root: {
backgroundColor: colors.buttonBackgroundColor,
2024-04-14 20:14:12 -04:00
borderRadius: BORDER_RADIUS,
2020-10-08 18:23:58 -04:00
},
text: {
color: colors.buttonAlternativeTextColor,
},
2021-03-23 15:16:32 +03:00
textDisabled: {
color: colors.formBorder,
},
2024-04-14 20:14:12 -04:00
marginRight: {
marginRight: 10,
},
rootRound: {
borderRadius: 9999,
},
2020-10-08 18:23:58 -04:00
});
2023-11-05 15:50:16 -04:00
const style: Record<string, any> = {};
const additionalStyles = !last ? customButtonStyles.marginRight : {};
2020-10-08 18:23:58 -04:00
2020-09-07 20:46:37 +03:00
if (width) {
2024-04-14 20:14:12 -04:00
style.paddingHorizontal = PADDINGS;
style.width = width + PADDINGS * 2;
2020-09-07 20:46:37 +03:00
}
return (
2024-04-14 20:14:12 -04:00
<TouchableOpacity
accessibilityLabel={text}
accessibilityRole="button"
2024-08-24 15:11:06 -04:00
testID={testID}
style={[buttonStyles.root, customButtonStyles.root, style, additionalStyles, singleChild ? customButtonStyles.rootRound : null]}
2024-04-14 20:14:12 -04:00
{...props}
>
<View style={buttonStyles.icon}>{icon}</View>
<Text
numberOfLines={1}
adjustsFontSizeToFit
style={[buttonStyles.text, props.disabled ? customButtonStyles.textDisabled : customButtonStyles.text]}
>
2020-10-02 12:57:25 +03:00
{text}
</Text>
2020-09-07 20:46:37 +03:00
</TouchableOpacity>
);
};