Fix typescript (#603)

* fix import * fix: typescript * fix: typescript && remove frozen lock * fix: ts * fix: force react 17.x types * fix: typo Co-authored-by: Piotr Trocki <[email protected]>
callstack · Sep 21, 2022 · a686e87 · a686e87
1 parent e6465d6
commit a686e87
Show file tree

Hide file tree

Showing 18 changed files with 407 additions and 82 deletions.
diff --git a/example/__tests__/App-test.tsx b/example/__tests__/App-test.tsx
@@ -1,14 +1,3 @@
 /**
  * @format
  */
-
-import 'react-native';
-import React from 'react';
-import App from '../src/App';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  renderer.create(<App />);
-});
diff --git a/example/package.json b/example/package.json
@@ -13,6 +13,9 @@
     "react": "18.1.0",
     "react-native": "0.70.0"
   },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",

diff --git a/example/src/component/NavigationPanel/LogsPanel.tsx b/example/src/component/NavigationPanel/LogsPanel.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { FlatList } from 'react-native-gesture-handler';
+import { StyleSheet, Text, View, FlatList } from 'react-native';
 import type { LogsPanelProps } from './types';
 
 export function LogsPanel({ logs }: LogsPanelProps) {

diff --git a/example/src/component/NavigationPanel/NavigationPanel.tsx b/example/src/component/NavigationPanel/NavigationPanel.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { ControlsPanel } from './ControlPanel';
 import { LogsPanel } from './LogsPanel';
 import type { NavigationPanelProps } from './types';

diff --git a/example/src/hook/useNavigationPanel.tsx b/example/src/hook/useNavigationPanel.tsx
@@ -0,0 +1,166 @@
+import type {
+  default as PagerView,
+  PageScrollStateChangedNativeEvent,
+  PagerViewOnPageScrollEventData,
+  PagerViewOnPageSelectedEventData,
+} from 'react-native-pager-view';
+import { Animated } from 'react-native';
+import { createPage, CreatePage } from '../utils';
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+export type UseNavigationPanelProps = ReturnType<typeof useNavigationPanel>;
+
+export interface EventLog {
+  event: 'scroll' | 'select' | 'statusChanged';
+  text: string;
+  timestamp: Date;
+}
+
+const getBasePages = (pages: number) =>
+  new Array(pages).fill('').map((_v, index) => createPage(index));
+
+export function useNavigationPanel(
+  pagesAmount: number = 10,
+  onPageSelectedCallback: (position: number) => void = () => {}
+) {
+  const ref = useRef<PagerView>(null);
+  const [pages, setPages] = useState<CreatePage[]>(
+    useMemo(() => getBasePages(pagesAmount), [pagesAmount])
+  );
+  const [activePage, setActivePage] = useState(0);
+  const [isAnimated, setIsAnimated] = useState(true);
+  const [overdragEnabled, setOverdragEnabled] = useState(false);
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+  const [scrollState, setScrollState] = useState('idle');
+  const [dotsEnabled, setDotsEnabled] = useState(false);
+  const [logs, setLogs] = useState<EventLog[]>([]);
+  const [progress, setProgress] = useState({ position: 0, offset: 0 });
+  const onPageScrollOffset = useRef(new Animated.Value(0)).current;
+  const onPageScrollPosition = useRef(new Animated.Value(0)).current;
+  const onPageSelectedPosition = useRef(new Animated.Value(0)).current;
+
+  const setPage = useCallback(
+    (page: number) =>
+      isAnimated
+        ? ref.current?.setPage(page)
+        : ref.current?.setPageWithoutAnimation(page),
+    [isAnimated]
+  );
+
+  const addLog = useCallback((log: EventLog) => {
+    setLogs((text) => [log, ...text].slice(0, 100));
+  }, []);
+
+  const addPage = useCallback(
+    () => setPages((prevPages) => [...prevPages, createPage(prevPages.length)]),
+    []
+  );
+  const removePage = useCallback(
+    () => setPages((prevPages) => prevPages.slice(0, prevPages.length - 1)),
+    []
+  );
+  const toggleAnimation = useCallback(
+    () => setIsAnimated((animated) => !animated),
+    []
+  );
+  const toggleScroll = useCallback(
+    () => setScrollEnabled((enabled) => !enabled),
+    []
+  );
+  const toggleDots = useCallback(
+    () => setDotsEnabled((enabled) => !enabled),
+    []
+  );
+  const toggleOverdrag = useCallback(
+    () => setOverdragEnabled((enabled) => !enabled),
+    []
+  );
+
+  const onPageScroll = useMemo(
+    () =>
+      Animated.event<PagerViewOnPageScrollEventData>(
+        [
+          {
+            nativeEvent: {
+              offset: onPageScrollOffset,
+              position: onPageScrollPosition,
+            },
+          },
+        ],
+        {
+          listener: ({ nativeEvent: { offset, position } }) => {
+            addLog({
+              event: 'scroll',
+              text: `Position: ${position} Offset: ${offset}`,
+              timestamp: new Date(),
+            });
+            setProgress({
+              position,
+              offset,
+            });
+          },
+          useNativeDriver: true,
+        }
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onPageSelected = useMemo(
+    () =>
+      Animated.event<PagerViewOnPageSelectedEventData>(
+        [{ nativeEvent: { position: onPageSelectedPosition } }],
+        {
+          listener: ({ nativeEvent: { position } }) => {
+            addLog({
+              event: 'select',
+              text: `Page: ${position}`,
+              timestamp: new Date(),
+            });
+            setActivePage(position);
+            onPageSelectedCallback(position);
+          },
+          useNativeDriver: true,
+        }
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onPageScrollStateChanged = useCallback(
+    (e: PageScrollStateChangedNativeEvent) => {
+      addLog({
+        event: 'statusChanged',
+        text: `State: ${e.nativeEvent.pageScrollState}`,
+        timestamp: new Date(),
+      });
+      setScrollState(e.nativeEvent.pageScrollState);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return {
+    ref,
+    activePage,
+    isAnimated,
+    pages,
+    scrollState,
+    scrollEnabled,
+    dotsEnabled,
+    progress,
+    overdragEnabled,
+    setPage,
+    addPage,
+    removePage,
+    toggleScroll,
+    toggleDots,
+    toggleAnimation,
+    setProgress,
+    onPageScroll,
+    onPageSelected,
+    onPageScrollStateChanged,
+    toggleOverdrag,
+    logs,
+  };
+}
diff --git a/example/src/utils.ts b/example/src/utils.ts
@@ -27,6 +27,10 @@ export const createPage = (key: number): CreatePage => {
       alignItems: 'center',
       padding: 20,
     },
-    imgSource: { uri: IMAGE_URIS[key % BGCOLOR.length] },
+    imgSource: {
+      uri:
+        IMAGE_URIS[key % BGCOLOR.length] ||
+        'https://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg',
+    },
   };
 };
diff --git a/fabricexample/__tests__/App-test.tsx b/fabricexample/__tests__/App-test.tsx
@@ -1,14 +1,3 @@
 /**
  * @format
  */
-
-import 'react-native';
-import React from 'react';
-import App from '../src/App';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  renderer.create(<App />);
-});
diff --git a/fabricexample/package.json b/fabricexample/package.json
@@ -13,6 +13,9 @@
     "react": "18.1.0",
     "react-native": "0.70.0"
   },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",

diff --git a/fabricexample/src/component/NavigationPanel/LogsPanel.tsx b/fabricexample/src/component/NavigationPanel/LogsPanel.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { FlatList } from 'react-native-gesture-handler';
+import { StyleSheet, Text, View, FlatList } from 'react-native';
 import type { LogsPanelProps } from './types';
 
 export function LogsPanel({ logs }: LogsPanelProps) {

diff --git a/fabricexample/src/component/NavigationPanel/NavigationPanel.tsx b/fabricexample/src/component/NavigationPanel/NavigationPanel.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { ControlsPanel } from './ControlPanel';
 import { LogsPanel } from './LogsPanel';
 import type { NavigationPanelProps } from './types';