@proximus/lavender-drawer-native 0.1.0-alpha.15

package/dist/PxDrawer.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AccessibilityProps } from 'react-native';
+type DrawerSide = 'left' | 'right';
+export interface DrawerProps extends AccessibilityProps {
+    title?: string;
+    description?: string;
+    isOpen: boolean;
+    toggleSheet?: () => void;
+    side?: DrawerSide;
+    testID?: string;
+    children?: React.ReactNode;
+    onClose: () => void;
+    accessibilityAnnouncementMessage?: string;
+    accessibilityCloseButtonLabel?: string;
+    accessibilityCloseButtonHint?: string;
+}
+export declare function PxDrawer({ title, description, isOpen, toggleSheet, side, testID, children, onClose, accessibilityAnnouncementMessage, ...accessibilityProps }: DrawerProps): React.JSX.Element;
+export declare function TopZone(props: Partial<DrawerProps>): React.JSX.Element;
+export {};
+//# sourceMappingURL=PxDrawer.d.ts.map

package/dist/PxDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxDrawer.d.ts","sourceRoot":"","sources":["../src/PxDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAEL,kBAAkB,EAOnB,MAAM,cAAc,CAAC;AAOtB,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAInC,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,MAAM,EAAE,OAAO,CAAC;IAEhB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAGlB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAGD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAM,EACN,WAAW,EACX,IAAa,EACb,MAAM,EACN,QAAQ,EACR,OAAO,EACP,gCAAgC,EAChC,GAAG,kBAAkB,EACtB,EAAE,WAAW,qBAgHb;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,qBAqDlD"}

package/dist/PxDrawer.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Dimensions, Modal, StyleSheet, TouchableOpacity, View, } from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Body, Header } from '@proximus/lavender-texts-native';
+import { PxButtonIcon } from '@proximus/lavender-buttonicon-native';
+const DURATION_DEFAULT = 300;
+// A simple side drawer implemented with React Native Animated
+export function PxDrawer({ title, description, isOpen, toggleSheet, side = 'left', testID, children, onClose, accessibilityAnnouncementMessage, ...accessibilityProps }) {
+    const baseId = testID ?? 'PxDrawer';
+    const screenWidth = Dimensions.get('window').width;
+    const drawerWidth = Math.round(screenWidth * 0.9);
+    const { theme } = useTheme();
+    const { bottom, top } = useSafeAreaInsets();
+    // progress: 0 (closed) -> 1 (open)
+    const progress = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+    // Control Modal visibility so the drawer truly covers the entire screen
+    const [visible, setVisible] = useState(isOpen);
+    useEffect(() => {
+        // Ensure the modal is visible before starting the open animation
+        if (isOpen && !visible) {
+            setVisible(true);
+        }
+        Animated.timing(progress, {
+            toValue: isOpen ? 1 : 0,
+            duration: DURATION_DEFAULT,
+            useNativeDriver: true,
+        }).start(({ finished }) => {
+            if (finished && !isOpen) {
+                // After close animation completes, hide the modal
+                setVisible(false);
+            }
+        });
+    }, [isOpen, progress, visible]);
+    useEffect(() => {
+        if (accessibilityAnnouncementMessage && visible) {
+            // Announce to screen readers that the drawer has appeared
+            AccessibilityInfo.announceForAccessibility(accessibilityAnnouncementMessage);
+        }
+    }, [accessibilityAnnouncementMessage, visible]);
+    // Translate from off-screen to 0 depending on side
+    const offscreen = side === 'left' ? -drawerWidth : drawerWidth;
+    const translateX = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [offscreen, 0],
+    });
+    const backdropOpacity = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    const pointerEvents = isOpen ? 'auto' : 'none';
+    return (React.createElement(Modal, { ...e2eID(`${baseId}.Modal`), ...a11y(accessibilityProps), visible: visible, transparent: true, animationType: "none", onRequestClose: toggleSheet, statusBarTranslucent: true },
+        React.createElement(View, { style: styles.modalRoot, pointerEvents: "box-none", ...e2eID(`${baseId}.Root`) },
+            React.createElement(Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }], pointerEvents: pointerEvents },
+                React.createElement(TouchableOpacity, { style: { flex: 1 }, onPress: toggleSheet, ...e2eID(`${baseId}.Backdrop`) })),
+            React.createElement(Animated.View, { style: [
+                    styles.drawer,
+                    {
+                        width: drawerWidth,
+                        left: side === 'left' ? 0 : undefined,
+                        right: side === 'right' ? 0 : undefined,
+                        transform: [{ translateX }],
+                        backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+                        paddingTop: top + theme.t('SpacingXsMobile').number,
+                        paddingBottom: bottom,
+                    },
+                ], ...e2eID(`${baseId}.Panel`) },
+                React.createElement(View, { style: {
+                        flex: 1,
+                        gap: theme.t('SpacingSMobile').number,
+                        padding: theme.t('SpacingSMobile').number,
+                    } },
+                    React.createElement(TopZone, { title, description, testID, onClose }),
+                    children)))));
+}
+export function TopZone(props) {
+    const { title, description, testID, onClose, accessibilityCloseButtonLabel, accessibilityCloseButtonHint, } = props;
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+        } },
+        React.createElement(View, { style: {
+                flex: 1,
+                gap: theme.t('SpacingHeadingToSubtitleMobile').number,
+            } },
+            React.createElement(Header, { style: {
+                    color: theme.t('ColorTextBrandDefault'),
+                    fontSize: theme.t('TextSizeHeadingXlMobile').number,
+                }, ...(testID && e2eID(`${testID}-drawer-title`)) }, title),
+            React.createElement(Body, { style: { fontSize: theme.t('TextSizeBodyLMobile').number }, ...(testID && e2eID(`${testID}-drawer-description`)) }, description)),
+        React.createElement(View, null,
+            React.createElement(PxButtonIcon, { onPress: onClose, iconName: 'cross', variant: 'secondary', size: 'small', testID: `${testID}-drawer-close-button`, accessibilityLabel: accessibilityCloseButtonLabel || 'Close drawer', accessibilityHint: accessibilityCloseButtonHint }))));
+}
+const styles = StyleSheet.create({
+    modalRoot: {
+        flex: 1,
+    },
+    drawer: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PxDrawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './PxDrawer';

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@proximus/lavender-drawer-native",
+  "version": "0.1.0-alpha.15",
+  "description": "Lavender drawer component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@proximus/lavender-buttonicon-native": "*",
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}