feat: 新增drawer库

packages/drawer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 React Navigation Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/drawer/README.md

@@ -0,0 +1,5 @@
+# `@react-navigation/drawer`
+
+Drawer navigator for React Navigation following Material Design guidelines.
+
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/drawer-navigator/).

packages/drawer/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@react-native-oh-tpl/drawer",
+  "description": "Drawer navigator component with animated transitions and gesturess",
+  "version": "6.7.1",
+  "harmony": {
+    "alias": "@react-navigation/drawer"
+  },
+  "keywords": [
+    "react-native-component",
+    "react-component",
+    "react-native",
+    "react-navigation",
+    "harmony",
+    "ios",
+    "android",
+    "material",
+    "drawer"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-oh-library/react-navigation.git",
+    "directory": "packages/drawer"
+  },
+  "bugs": {
+    "url": "https://github.com/react-navigation/react-navigation/issues"
+  },
+  "homepage": "https://reactnavigation.org/docs/drawer-navigator/",
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "harmony",
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepack": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "@react-navigation/elements": "^1.3.30",
+    "color": "^4.2.3",
+    "warn-once": "^0.1.0"
+  },
+  "devDependencies": {
+    "@react-navigation/native": "^6.1.17",
+    "@testing-library/react-native": "^11.5.0",
+    "@types/react": "~18.0.27",
+    "@types/react-native": "~0.71.3",
+    "del-cli": "^5.0.0",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-builder-bob": "^0.20.4",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.29.0",
+    "typescript": "^4.9.4"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^6.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">= 1.0.0",
+    "react-native-reanimated": ">= 1.0.0",
+    "react-native-safe-area-context": ">= 3.0.0",
+    "react-native-screens": ">= 3.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

packages/drawer/src/__tests__/index.test.tsx

@@ -0,0 +1,34 @@
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { fireEvent, render } from '@testing-library/react-native';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
+
+import { createDrawerNavigator, DrawerScreenProps } from '../index';
+
+it('renders a drawer navigator with screens', async () => {
+  const Test = ({ route, navigation }: DrawerScreenProps<ParamListBase>) => (
+    <View>
+      <Text>Screen {route.name}</Text>
+      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
+      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
+    </View>
+  );
+
+  const Drawer = createDrawerNavigator();
+
+  const { findByText, queryByText } = render(
+    <NavigationContainer>
+      <Drawer.Navigator>
+        <Drawer.Screen name="A" component={Test} />
+        <Drawer.Screen name="B" component={Test} />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(queryByText('Screen A')).not.toBeNull();
+  expect(queryByText('Screen B')).toBeNull();
+
+  fireEvent(await findByText('Go to B'), 'press');
+
+  expect(queryByText('Screen B')).not.toBeNull();
+});

packages/drawer/src/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * Navigators
+ */
+export { default as createDrawerNavigator } from './navigators/createDrawerNavigator';
+
+/**
+ * Views
+ */
+export { default as DrawerContent } from './views/DrawerContent';
+export { default as DrawerContentScrollView } from './views/DrawerContentScrollView';
+export { default as DrawerItem } from './views/DrawerItem';
+export { default as DrawerItemList } from './views/DrawerItemList';
+export { default as DrawerToggleButton } from './views/DrawerToggleButton';
+export { default as DrawerView } from './views/DrawerView';
+
+/**
+ * Utilities
+ */
+export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
+export { default as DrawerProgressContext } from './utils/DrawerProgressContext';
+export { default as DrawerStatusContext } from './utils/DrawerStatusContext';
+export { default as getDrawerStatusFromState } from './utils/getDrawerStatusFromState';
+export { default as useDrawerProgress } from './utils/useDrawerProgress';
+export { default as useDrawerStatus } from './utils/useDrawerStatus';
+
+/**
+ * Types
+ */
+export type {
+  DrawerContentComponentProps,
+  DrawerHeaderProps,
+  DrawerNavigationEventMap,
+  DrawerNavigationOptions,
+  DrawerNavigationProp,
+  DrawerScreenProps,
+} from './types';

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -0,0 +1,144 @@
+import {
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  DrawerActionHelpers,
+  DrawerNavigationState,
+  DrawerRouter,
+  DrawerRouterOptions,
+  DrawerStatus,
+  ParamListBase,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+import * as React from 'react';
+import warnOnce from 'warn-once';
+
+import type {
+  DrawerNavigationConfig,
+  DrawerNavigationEventMap,
+  DrawerNavigationOptions,
+} from '../types';
+import DrawerView from '../views/DrawerView';
+
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  DrawerNavigationState<ParamListBase>,
+  DrawerNavigationOptions,
+  DrawerNavigationEventMap
+> &
+  DrawerRouterOptions &
+  DrawerNavigationConfig;
+
+function DrawerNavigator({
+  id,
+  initialRouteName,
+  defaultStatus: customDefaultStatus,
+  backBehavior,
+  children,
+  screenListeners,
+  screenOptions,
+  ...restWithDeprecated
+}: Props) {
+  const {
+    // @ts-expect-error: openByDefault is deprecated
+    openByDefault,
+    // @ts-expect-error: lazy is deprecated
+    lazy,
+    // @ts-expect-error: drawerContentOptions is deprecated
+    drawerContentOptions,
+    ...rest
+  } = restWithDeprecated;
+
+  let defaultScreenOptions: DrawerNavigationOptions = {};
+
+  if (drawerContentOptions) {
+    Object.assign(defaultScreenOptions, {
+      drawerPosition: drawerContentOptions.drawerPosition,
+      drawerType: drawerContentOptions.drawerType,
+      swipeEdgeWidth: drawerContentOptions.edgeWidth,
+      drawerHideStatusBarOnOpen: drawerContentOptions.hideStatusBar,
+      keyboardDismissMode: drawerContentOptions.keyboardDismissMode,
+      swipeMinDistance: drawerContentOptions.minSwipeDistance,
+      overlayColor: drawerContentOptions.overlayColor,
+      drawerStatusBarAnimation: drawerContentOptions.statusBarAnimation,
+      gestureHandlerProps: drawerContentOptions.gestureHandlerProps,
+    });
+
+    (
+      Object.keys(defaultScreenOptions) as (keyof DrawerNavigationOptions)[]
+    ).forEach((key) => {
+      if (defaultScreenOptions[key] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete defaultScreenOptions[key];
+      }
+    });
+
+    warnOnce(
+      drawerContentOptions,
+      `Drawer Navigator: 'drawerContentOptions' is deprecated. Migrate the options to 'screenOptions' instead.\n\nPlace the following in 'screenOptions' in your code to keep current behavior:\n\n${JSON.stringify(
+        defaultScreenOptions,
+        null,
+        2
+      )}\n\nSee https://reactnavigation.org/docs/drawer-navigator#options for more details.`
+    );
+  }
+
+  if (typeof lazy === 'boolean') {
+    defaultScreenOptions.lazy = lazy;
+
+    warnOnce(
+      true,
+      `Drawer Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/drawer-navigator/#lazy for more details.`
+    );
+  }
+
+  if (typeof openByDefault === 'boolean') {
+    warnOnce(
+      true,
+      `Drawer Navigator: 'openByDefault' is deprecated. Use 'defaultStatus' and set it to 'open' or 'closed' instead.\n\nSee https://reactnavigation.org/docs/drawer-navigator/#defaultstatus for more details.`
+    );
+  }
+
+  const defaultStatus: DrawerStatus =
+    customDefaultStatus !== undefined
+      ? customDefaultStatus
+      : openByDefault
+      ? 'open'
+      : 'closed';
+
+  const { state, descriptors, navigation, NavigationContent } =
+    useNavigationBuilder<
+      DrawerNavigationState<ParamListBase>,
+      DrawerRouterOptions,
+      DrawerActionHelpers<ParamListBase>,
+      DrawerNavigationOptions,
+      DrawerNavigationEventMap
+    >(DrawerRouter, {
+      id,
+      initialRouteName,
+      defaultStatus,
+      backBehavior,
+      children,
+      screenListeners,
+      screenOptions,
+      defaultScreenOptions,
+    });
+
+  return (
+    <NavigationContent>
+      <DrawerView
+        {...rest}
+        defaultStatus={defaultStatus}
+        state={state}
+        descriptors={descriptors}
+        navigation={navigation}
+      />
+    </NavigationContent>
+  );
+}
+
+export default createNavigatorFactory<
+  DrawerNavigationState<ParamListBase>,
+  DrawerNavigationOptions,
+  DrawerNavigationEventMap,
+  typeof DrawerNavigator
+>(DrawerNavigator);