@osano/osano-cmp-react-native 0.1.0

package/src/views/Drawer/index.tsx

@@ -0,0 +1,294 @@
+import {
+	Animated,
+	Easing,
+	type LayoutChangeEvent,
+	Modal,
+	Platform,
+	SafeAreaView,
+	type StyleProp,
+	StyleSheet,
+	type ViewStyle,
+	type NativeSyntheticEvent,
+	type GestureResponderEvent,
+	type NativePointerEvent,
+} from 'react-native';
+import React, {
+	useCallback,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'react';
+import {
+	SHOW_DRAWER,
+	SHOW_IAB_DISCLOSURES,
+	SHOW_IAB_VENDORS,
+	close,
+	getStack,
+} from '../../store';
+
+import { CloseButton } from '../../components/Button';
+import ConsentCategoriesDrawer from './Drawer.ConsentCategories';
+import IabDisclosuresDrawer from './Drawer.Iab.Disclosures';
+import IabVendorsDrawer from './Drawer.Iab.Vendors';
+import { OsanoPrivateContext } from '../../context';
+import Translator from '../../utils/Translator';
+
+type DrawerProps = React.PropsWithChildren<object>;
+
+const easing = (v: number) => 1 - Easing.exp(1 - v);
+const maxWebDrawerWidth = 360;
+
+export const Drawer: React.FC<DrawerProps> = () => {
+	const { cmp, config, dispatch, getState, locale } =
+		useContext(OsanoPrivateContext);
+
+	const overlayRef = React.useRef(null);
+	const { palette } = config || {};
+	const {
+		infoDialogBackgroundColor,
+		infoDialogForegroundColor,
+		infoDialogOverlayColor,
+		infoDialogPosition: configInfoDialogPosition,
+	} = palette || {};
+
+	const infoDialogPosition =
+		Platform.OS === 'web' ? configInfoDialogPosition : 'right';
+
+	const state = getState();
+	const stack = getStack(state);
+	const isRTL = Translator.isRTL(locale);
+
+	const initialPositionX = Platform.OS === 'web' ? 0 : 1;
+
+	const closeButton = useRef(new Animated.Value(initialPositionX));
+	const category = useRef(new Animated.Value(initialPositionX));
+	const vendor = useRef(new Animated.Value(initialPositionX));
+	const disclosure = useRef(new Animated.Value(initialPositionX));
+
+	const [layoutWidth, setLayoutWidth] = React.useState(0);
+	const handleLayoutChange = useCallback(
+		(e: LayoutChangeEvent) => {
+			const width = e.nativeEvent.layout.width;
+			const newWidth =
+				initialPositionX === 1
+					? Math.min(
+							Platform.OS === 'web'
+								? maxWebDrawerWidth
+								: Number.MAX_SAFE_INTEGER,
+							width,
+						)
+					: width;
+			setLayoutWidth(newWidth);
+		},
+		[initialPositionX],
+	);
+
+	const drawerRange = useMemo(
+		() => ({
+			inputRange: [0, 1],
+			outputRange: [layoutWidth * (infoDialogPosition === 'left' ? -1 : 1), 0],
+			extrapolateLeft: 'clamp' as Animated.ExtrapolateType,
+			extrapolateRight: 'clamp' as Animated.ExtrapolateType,
+		}),
+		[layoutWidth, infoDialogPosition],
+	);
+
+	useLayoutEffect(() => {
+		Animated.timing(closeButton.current, {
+			easing,
+			duration: 400,
+			toValue: stack.length > 0 ? 1 : 0,
+			useNativeDriver: Platform.OS !== 'web',
+		}).start();
+		Animated.timing(category.current, {
+			easing,
+			duration: 400,
+			toValue: stack.indexOf(SHOW_DRAWER) >= 0 ? 1 : 0,
+			useNativeDriver: Platform.OS !== 'web',
+		}).start();
+		Animated.timing(vendor.current, {
+			easing,
+			duration: 400,
+			toValue: stack.indexOf(SHOW_IAB_VENDORS) >= 0 ? 1 : 0,
+			useNativeDriver: Platform.OS !== 'web',
+		}).start();
+		Animated.timing(disclosure.current, {
+			easing,
+			duration: 400,
+			toValue: stack.indexOf(SHOW_IAB_DISCLOSURES) >= 0 ? 1 : 0,
+			useNativeDriver: Platform.OS !== 'web',
+		}).start();
+		if (Platform.OS !== 'web') {
+			// Since native devices use a slide animation, we need to make the active stack item visible during the slide
+			if (stack.length === 0) {
+				category.current.setValue(1);
+				vendor.current.setValue(1);
+				disclosure.current.setValue(1);
+			} else if (stack.length === 1) {
+				switch (stack.at(-1)) {
+					case SHOW_DRAWER:
+						category.current.setValue(1);
+						break;
+					case SHOW_IAB_VENDORS:
+						vendor.current.setValue(1);
+						break;
+					case SHOW_IAB_DISCLOSURES:
+						disclosure.current.setValue(1);
+						break;
+				}
+			}
+		}
+	}, [stack.length]);
+	const handleClose = useCallback(
+		(
+			e:
+				| NativeSyntheticEvent<NativePointerEvent>
+				| PointerEvent
+				| GestureResponderEvent,
+		) => {
+			if (e && e.target) {
+				if (e.target === overlayRef.current) {
+					dispatch(close(cmp));
+				}
+			} else {
+				dispatch(close(cmp));
+			}
+		},
+		[],
+	);
+	const drawerStyles = useMemo(() => {
+		return {
+			backgroundColor: infoDialogBackgroundColor,
+		};
+	}, [infoDialogBackgroundColor]);
+
+	const dialogOverlay = useMemo(() => {
+		return {
+			backgroundColor: infoDialogOverlayColor,
+		};
+	}, [infoDialogOverlayColor, layoutWidth]);
+
+	const anchor: StyleProp<ViewStyle> = useMemo(() => {
+		return {
+			width: layoutWidth,
+			left: infoDialogPosition === 'left' ? 0 : 'auto',
+			right: infoDialogPosition === 'right' ? 0 : 'auto',
+		};
+	}, [layoutWidth, infoDialogPosition]);
+
+	const closeAnchor: StyleProp<ViewStyle> = useMemo(() => {
+		return {
+			width: layoutWidth - 48,
+			marginLeft: isRTL ? 0 : 48,
+			marginRight: isRTL ? 48 : 0,
+			left: infoDialogPosition === 'left' ? 0 : 'auto',
+			right: infoDialogPosition === 'right' ? 0 : 'auto',
+		};
+	}, [layoutWidth, isRTL, infoDialogPosition]);
+
+	return (
+		<Modal
+			animationType={
+				Platform.OS === 'web' ? (stack.length > 0 ? 'none' : 'fade') : 'slide'
+			}
+			presentationStyle="pageSheet"
+			visible={stack.length > 0}
+			onRequestClose={handleClose}
+			transparent={Platform.OS === 'web' ? true : false}
+		>
+			<SafeAreaView
+				ref={overlayRef}
+				style={[styles.container, dialogOverlay]}
+				onLayout={handleLayoutChange}
+				onPointerUp={handleClose}
+				onTouchEnd={handleClose}
+				onResponderRelease={handleClose}
+			>
+				<Animated.View
+					style={[
+						styles.drawer,
+						anchor,
+						drawerStyles,
+						{
+							transform: [
+								{ translateX: category.current.interpolate(drawerRange) },
+							],
+						},
+					]}
+				>
+					<ConsentCategoriesDrawer />
+				</Animated.View>
+				<Animated.View
+					style={[
+						styles.drawer,
+						anchor,
+						drawerStyles,
+						{
+							transform: [
+								{ translateX: vendor.current.interpolate(drawerRange) },
+							],
+						},
+					]}
+				>
+					<IabVendorsDrawer />
+				</Animated.View>
+				<Animated.View
+					style={[
+						styles.drawer,
+						anchor,
+						drawerStyles,
+						{
+							transform: [
+								{ translateX: disclosure.current.interpolate(drawerRange) },
+							],
+						},
+					]}
+				>
+					<IabDisclosuresDrawer />
+				</Animated.View>
+				<Animated.View
+					style={[
+						styles.close,
+						closeAnchor,
+						{
+							transform: [
+								{ translateX: closeButton.current.interpolate(drawerRange) },
+							],
+						},
+					]}
+				>
+					<CloseButton
+						style={isRTL ? styles.closeLeft : styles.closeRight}
+						color={infoDialogForegroundColor}
+					/>
+				</Animated.View>
+			</SafeAreaView>
+		</Modal>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	close: {
+		position: 'absolute',
+		top: 15,
+		zIndex: 10,
+	},
+	closeRight: {
+		alignSelf: 'flex-end',
+		margin: 8,
+	},
+	closeLeft: {
+		alignSelf: 'flex-start',
+		margin: 8,
+	},
+	drawer: {
+		bottom: 0,
+		position: 'absolute',
+		top: 0,
+		zIndex: 1,
+	},
+});