@fluentui-react-native/drawer 0.1.0

package/src/Drawer.styling.ts

@@ -0,0 +1,59 @@
+import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
+import { buildProps } from '@fluentui-react-native/framework';
+
+import { DrawerName } from './Drawer.types';
+import type { DrawerTokens, DrawerSlotProps, DrawerProps } from './Drawer.types';
+import { defaultDrawerTokens } from './DrawerTokens';
+
+export const stylingSettings: UseStylingOptions<DrawerProps, DrawerSlotProps, DrawerTokens> = {
+  tokens: [defaultDrawerTokens, DrawerName],
+  tokensThatAreAlsoProps: 'all',
+  states: ['left', 'right', 'bottom'],
+  slotProps: {
+    scrimContent: buildProps(
+      (tokens: DrawerTokens, _theme: Theme) => ({
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          backgroundColor: tokens.scrimColor,
+          opacity: tokens.scrimOpacity,
+        },
+      }),
+      ['scrimColor'],
+    ),
+    content: buildProps(
+      (tokens: DrawerTokens, _theme: Theme) => ({
+        style: {
+          position: 'absolute',
+          height: tokens.height,
+          width: tokens.width,
+          elevation: tokens.drawerElevation,
+          borderTopEndRadius: tokens.drawerCornerRadius,
+          borderTopStartRadius: tokens.drawerCornerRadius,
+          right: tokens.rightPosition,
+          left: tokens.leftPosition,
+          bottom: tokens.bottomPosition,
+          top: tokens.topPosition,
+          backgroundColor: tokens.drawerBackgroundColor,
+        },
+      }),
+      ['drawerBackgroundColor', 'drawerElevation', 'height', 'width'],
+    ),
+    handle: buildProps(
+      (tokens: DrawerTokens, _theme: Theme) => ({
+        style: {
+          width: tokens.handleWidth,
+          height: tokens.handleHeight,
+          borderRadius: tokens.handleCornerRadius,
+          backgroundColor: tokens.handleBackgroundColor,
+          alignSelf: tokens.handleAlignment,
+          marginTop: tokens.handleMarginTop,
+        },
+      }),
+      ['handleWidth', 'handleHeight', 'handleCornerRadius', 'handleBackgroundColor', 'handleAlignment', 'handleMarginTop'],
+    ),
+  },
+};

package/src/Drawer.tsx

@@ -0,0 +1,51 @@
+/** @jsx withSlots */
+import { Animated, Modal, TouchableWithoutFeedback, View } from 'react-native';
+
+import type { UseSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+
+import { stylingSettings } from './Drawer.styling';
+import type { DrawerType, DrawerProps } from './Drawer.types';
+import { DrawerName } from './Drawer.types';
+import { useDrawer } from './useDrawer';
+
+export const drawerLookup = (layer: string, userProps: DrawerProps): boolean => {
+  return userProps[layer] || layer === userProps['drawerPosition'];
+};
+
+export const Drawer = compose<DrawerType>({
+  displayName: DrawerName,
+  ...stylingSettings,
+  slots: {
+    modal: Modal,
+    scrim: TouchableWithoutFeedback,
+    scrimContent: Animated.View,
+    content: Animated.View,
+    handle: View,
+  },
+  useRender: (userProps: DrawerProps, useSlots: UseSlots<DrawerType>) => {
+    const drawerProps = useDrawer(userProps).props;
+    const Slots = useSlots(userProps, (layer) => drawerLookup(layer, drawerProps));
+    return (final: DrawerProps, children: React.ReactNode) => {
+      const { open, onClose, onScrimClick, animationConfig, drawerPosition, showHandle, ...rest } = mergeProps(drawerProps, final);
+      return (
+        <Slots.modal
+          {...rest}
+          visible={open}
+          onRequestClose={onClose}
+          supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
+          animationType="none"
+          transparent
+        >
+          <Slots.scrim onPress={onScrimClick}>
+            <Slots.scrimContent style={[{ opacity: animationConfig.animatedOpacity }]} />
+          </Slots.scrim>
+          <Slots.content style={animationConfig.animatedStyle}>
+            {drawerPosition === 'bottom' && showHandle && <Slots.handle />}
+            {children}
+          </Slots.content>
+        </Slots.modal>
+      );
+    };
+  },
+});

package/src/Drawer.types.ts

@@ -0,0 +1,221 @@
+import type { Animated, ColorValue, FlexAlignType, ModalProps, TouchableWithoutFeedbackProps, ViewProps } from 'react-native';
+
+import type { InteractionEvent, PressableFocusProps } from '@fluentui-react-native/interactive-hooks';
+
+export const DrawerName = 'Drawer';
+
+/**
+ * Specifies the possible position of the Drawer.
+ */
+export type DrawerPositionType = 'bottom' | 'left' | 'right';
+
+export interface DrawerTokens {
+  /**
+   * The color of the scrim.
+   * */
+  scrimColor?: ColorValue;
+
+  /**
+   * The opacity of the scrim.
+   * */
+  scrimOpacity?: number;
+
+  /**
+   * Width of the handle.
+   */
+  handleWidth?: number;
+
+  /**
+   * Height of the handle.
+   */
+  handleHeight?: number;
+
+  /**
+   * The background color of the handle.
+   * */
+  handleBackgroundColor?: ColorValue;
+
+  /**
+   * The corner radius of the handle.
+   * */
+  handleCornerRadius?: number;
+
+  /**
+   * The top margin of the handle.
+   *  */
+  handleMarginTop?: number;
+
+  /**
+   * The bottom margin of the handle.
+   * */
+
+  handleMarginBottom?: number;
+
+  /**
+   * The start margin of the handle.
+   * */
+
+  handleMarginStart?: number;
+
+  /**
+   * The end margin of the handle.
+   * */
+
+  handleMarginEnd?: number;
+
+  /**
+   * The flex alignment of the handle.
+   * */
+  handleAlignment?: FlexAlignType;
+
+  /**
+   * The background for drawer
+   * */
+
+  drawerBackgroundColor?: ColorValue;
+
+  /**
+   * The corner radius of the Drawer
+   * @default 0
+   * */
+  drawerCornerRadius?: number;
+
+  /**
+   * The elevation of the Drawer
+   * @default 5
+   * @platform android
+   * */
+  drawerElevation?: number;
+
+  /**
+   * The width of the Drawer
+   * Note: Only applicable when position is 'left' or 'right'
+   * @default '100%'
+   * */
+  width?: number | string;
+
+  /**
+   * The height of the Drawer
+   * Note: Only applicable when position is 'bottom'
+   * @default '40%'
+   * */
+  height?: number | string;
+
+  /**
+   * The shadow color of the Drawer
+   * @platform iOS
+   * */
+  shadowColor?: ColorValue;
+
+  /**
+   * The shadow offset of the Drawer
+   * @platform iOS
+   * */
+  shadowOffset?: { width: number; height: number };
+
+  /**
+   * The shadow opacity of the Drawer
+   * @platform iOS
+   * */
+  shadowOpacity?: number;
+
+  /**
+   * The shadow radius of the Drawer
+   * @platform iOS
+   * */
+
+  shadowRadius?: number;
+
+  /**
+   * Positions/Behaviours of the Drawer, This is used to apply different tokens for different positions.
+   */
+
+  left?: DrawerTokens;
+  right?: DrawerTokens;
+  bottom?: DrawerTokens;
+
+  /**
+   * Coordinate position of the Drawer, This is used to position the Drawer at a particular coordinate.
+   */
+  leftPosition?: number;
+  rightPosition?: number;
+  bottomPosition?: number;
+  topPosition?: number;
+}
+
+export interface DrawerProps extends PressableFocusProps {
+  /*
+   ** An accessibility label for screen readers. Set on the text Drawer.
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Visibility of the Drawer
+   */
+  open?: boolean;
+
+  /**
+   * Callback when the Drawer is closed
+   * */
+  onClose?: (e: InteractionEvent) => void;
+
+  /**
+   * Callback when the Drawer is opened
+   * */
+  onOpen?: (e: InteractionEvent) => void;
+
+  /**
+   * Callback when the scrim is clicked
+   * */
+  onScrimClick?: (e: InteractionEvent) => void;
+
+  /**
+   * The content of the Drawer
+   * */
+  children?: React.ReactNode;
+
+  /**
+   * The behavior of the Drawer
+   * @default 'left'
+   * */
+  drawerPosition?: DrawerPositionType;
+
+  /**
+   * The behavior is for only bottom drawer in which content is scrollable without expanding the bottom drawer
+   * @default false
+   * */
+  isContentScrollableUnexpanded?: boolean;
+
+  /**
+   * The behavior is for only bottom drawer in which handle can be hidden for some usecases
+   * @default true
+   * */
+  showHandle?: boolean;
+
+  /**
+   * The width of the Drawer
+   * Animation configuration for the Drawer
+   * */
+  animationConfig?: {
+    animatedOpacity: Animated.AnimatedInterpolation;
+    animatedStyle: { transform: { translateX: Animated.AnimatedInterpolation }[] | { translateY: Animated.AnimatedInterpolation }[] };
+  };
+}
+
+export interface DrawerInfo {
+  props: DrawerProps;
+}
+
+export interface DrawerSlotProps {
+  modal: ModalProps;
+  scrim: TouchableWithoutFeedbackProps;
+  scrimContent: Animated.AnimatedProps<ViewProps>;
+  content: Animated.AnimatedProps<ViewProps>;
+  handle: ViewProps;
+}
+
+export interface DrawerType {
+  props: DrawerProps;
+  tokens: DrawerTokens;
+  slotProps: DrawerSlotProps;
+}

package/src/DrawerTokens.ts

@@ -0,0 +1,40 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { DrawerTokens } from './Drawer.types';
+
+export const defaultDrawerTokens: TokenSettings<DrawerTokens, Theme> = (t: Theme) =>
+  ({
+    scrimColor: '#00000080', // to be replace with token in future based on design guidance
+    drawerBackgroundColor: t.colors.neutralBackground2,
+    handleBackgroundColor: t.colors.neutralStroke1,
+    handleWidth: globalTokens.size360,
+    handleHeight: globalTokens.size40,
+    handleCornerRadius: globalTokens.size20,
+    handleAlignment: 'center',
+    handleMarginTop: globalTokens.size80,
+    handleMarginBottom: globalTokens.sizeNone,
+    handleMarginEnd: globalTokens.sizeNone,
+    handleMarginStart: globalTokens.sizeNone,
+    drawerElevation: globalTokens.size100,
+    topPosition: 0,
+    left: {
+      height: '100%',
+      width: '80%',
+      leftPosition: 0,
+      drawerCornerRadius: 0,
+    },
+    right: {
+      height: '100%',
+      width: '80%',
+      rightPosition: 0,
+      drawerCornerRadius: 0,
+    },
+    bottom: {
+      bottomPosition: 0,
+      width: '100%',
+      drawerCornerRadius: globalTokens.corner.radius120,
+      height: '50%',
+    },
+  } as DrawerTokens);

package/src/__tests__/Drawer.test.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import * as renderer from 'react-test-renderer';
+
+import { Drawer } from '../Drawer';
+
+// mocks out setTimeout and other timer functions with mock functions , test will fail without this as we're using Animated API
+jest.useFakeTimers();
+
+describe('Drawer component tests', () => {
+  it('Drawer default', () => {
+    const tree = renderer
+      .create(
+        <Drawer open={false} drawerPosition="left">
+          <Text>Hello</Text>
+        </Drawer>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Drawer component tests Drawer default 1`] = `
+<Modal
+  animationType="none"
+  hardwareAccelerated={false}
+  onRequestClose={[Function]}
+  supportedOrientations={
+    Array [
+      "portrait",
+      "portrait-upside-down",
+      "landscape",
+      "landscape-left",
+      "landscape-right",
+    ]
+  }
+  transparent={true}
+  visible={false}
+/>
+`;

package/src/index.ts

@@ -0,0 +1,3 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps, DrawerSlotProps, DrawerTokens, DrawerType, DrawerPositionType } from './Drawer.types';
+export { DrawerName } from './Drawer.types';

package/src/useDrawer.ts

@@ -0,0 +1,90 @@
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { Animated, Dimensions } from 'react-native';
+
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+
+import type { DrawerProps, DrawerInfo } from './Drawer.types';
+
+const { height, width } = Dimensions.get('window');
+
+export const useDrawer = (props: DrawerProps): DrawerInfo => {
+  const { onBlur, onFocus, accessibilityLabel, open, drawerPosition = 'left', showHandle = true, children, ...rest } = props;
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const [internalOpen, setInternalOpen] = useState(open);
+  const [isFirstOpen, setIsFirstOpen] = useState(true);
+
+  useEffect(() => {
+    if (open) {
+      setInternalOpen(true);
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      if (isFirstOpen) {
+        setIsFirstOpen(false);
+      } else {
+        Animated.parallel([
+          Animated.timing(animatedValue, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          setInternalOpen(false);
+        });
+      }
+    }
+  }, [animatedValue, open]);
+
+  const onClose = useCallback(
+    (e: InteractionEvent) => {
+      props?.onClose && props.onClose(e);
+    },
+    [props?.onClose],
+  );
+
+  const onScrimClick = useCallback(
+    (e: InteractionEvent) => {
+      props?.onScrimClick && props.onScrimClick(e);
+    },
+    [props?.onScrimClick],
+  );
+
+  const animatedTranslateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: drawerPosition === 'left' ? [-width * 0.8, 0] : drawerPosition === 'right' ? [width * 0.8, 0] : [0, 0],
+  });
+
+  const animatedTranslateY = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [height, height * 0.5],
+  });
+
+  const animatedOpacity = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.5],
+  });
+
+  const animatedStyle = {
+    transform:
+      drawerPosition === 'left' || drawerPosition === 'right' ? [{ translateX: animatedTranslateX }] : [{ translateY: animatedTranslateY }],
+  };
+
+  return {
+    props: {
+      ...rest,
+      onClose,
+      onScrimClick,
+      animationConfig: {
+        animatedOpacity,
+        animatedStyle,
+      },
+      drawerPosition: drawerPosition ?? 'left',
+      children,
+      showHandle,
+      open: internalOpen,
+    },
+  };
+};

package/svgs.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@fluentui-react-native/scripts/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "types": ["node", "jest"]
+  },
+  "include": ["src", "svgs.d.ts"]
+}