Multiple minor changes (47) (#718)

YoussefHenna · web-flow · commit 6a87df49a310 · 2023-06-14T19:35:53.000+03:00
* Added seperate pause/play to media components

* Extract children if in fragment to ensure type check is valid

* Add 'initialTabIndex' prop to TabView

* v47.5.3

* Added comment for fragment extraction
diff --git a/example/package.json b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "47.5.2",
+  "version": "47.5.3",
   "private": true,
   "main": "__generated__/AppEntry.js",
   "scripts": {
@@ -16,8 +16,8 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "47.5.2",
-    "@draftbit/ui": "47.5.2",
+    "@draftbit/maps": "47.5.3",
+    "@draftbit/ui": "47.5.3",
     "@expo/dev-server": "0.1.123",
     "@expo/webpack-config": "^0.17.2",
     "@react-navigation/drawer": "^5.12.9",
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "47.5.2",
+  "version": "47.5.3",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*", "example"],
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.5.2",
+  "version": "47.5.3",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "47.5.2",
+    "@draftbit/types": "47.5.3",
     "@expo/vector-icons": "^13.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
diff --git a/packages/core/src/__tests__/components/AudioPlayer.test.tsx b/packages/core/src/__tests__/components/AudioPlayer.test.tsx
@@ -153,6 +153,30 @@ describe("AudioPlayer tests", () => {
     expect(mockPauseAsync).toBeCalled();
   });
 
+  test("should play() play the audio", async () => {
+    const ref = React.createRef<AudioPlayerRef>();
+
+    render(<AudioPlayer ref={ref} source={mockAudioSource} />);
+
+    await act(async () => {
+      await waitForSoundToLoad();
+      ref.current?.play();
+    });
+    expect(mockPlayAsync).toBeCalled();
+  });
+
+  test("should pause() pause the audio", async () => {
+    const ref = React.createRef<AudioPlayerRef>();
+
+    render(<AudioPlayer ref={ref} source={mockAudioSource} />);
+
+    await act(async () => {
+      await waitForSoundToLoad();
+      ref.current?.pause();
+    });
+    expect(mockPauseAsync).toBeCalled();
+  });
+
   test("should audio be cleaned up/unloaded when unmounting", async () => {
     render(<AudioPlayer source={mockAudioSource} />);
 
diff --git a/packages/core/src/__tests__/components/VideoPlayer.test.tsx b/packages/core/src/__tests__/components/VideoPlayer.test.tsx
@@ -70,6 +70,42 @@ describe("VideoPlayer tests", () => {
     expect(mockPauseAsync).toBeCalled();
   });
 
+  test("should play() play the video", async () => {
+    const ref = React.createRef<VideoPlayerRef>();
+
+    render(
+      <VideoPlayer
+        ref={ref}
+        source={{
+          uri: "video-uri",
+        }}
+      />
+    );
+
+    act(() => {
+      ref.current?.play();
+    });
+    expect(mockPlayAsync).toBeCalled();
+  });
+
+  test("should pause() pause the video", async () => {
+    const ref = React.createRef<VideoPlayerRef>();
+
+    render(
+      <VideoPlayer
+        ref={ref}
+        source={{
+          uri: "video-uri",
+        }}
+      />
+    );
+
+    act(() => {
+      ref.current?.pause();
+    });
+    expect(mockPauseAsync).toBeCalled();
+  });
+
   test("should video be cleaned up/unloaded when unmounting", async () => {
     render(
       <VideoPlayer
diff --git a/packages/core/src/components/MediaPlayer/MediaPlaybackWrapper.tsx b/packages/core/src/components/MediaPlayer/MediaPlaybackWrapper.tsx
@@ -26,6 +26,16 @@ const MediaPlaybackWrapper = React.forwardRef<
     }
   }, [media, isPlaying, onTogglePlayback]);
 
+  const pause = React.useCallback(async () => {
+    onTogglePlayback?.();
+    await media?.pauseAsync();
+  }, [media, onTogglePlayback]);
+
+  const play = React.useCallback(async () => {
+    onTogglePlayback?.();
+    await media?.playAsync();
+  }, [media, onTogglePlayback]);
+
   const seekToPosition = React.useCallback(
     async (positionMillis: number) => {
       await media?.setPositionAsync(positionMillis);
@@ -46,8 +56,10 @@ const MediaPlaybackWrapper = React.forwardRef<
     () => ({
       seekToPosition,
       togglePlayback,
+      pause,
+      play,
     }),
-    [seekToPosition, togglePlayback]
+    [seekToPosition, togglePlayback, pause, play]
   );
 
   return <>{children}</>;
diff --git a/packages/core/src/components/MediaPlayer/MediaPlayerCommon.ts b/packages/core/src/components/MediaPlayer/MediaPlayerCommon.ts
@@ -14,6 +14,8 @@ export interface MediaPlayerStatus {
 export interface MediaPlayerRef {
   seekToPosition: (positionMillis: number) => void;
   togglePlayback: () => void;
+  pause: () => void;
+  play: () => void;
 }
 
 export interface MediaPlayerProps {
diff --git a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
@@ -105,6 +105,8 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
           mediaPlaybackWrapperRef.current?.seekToPosition || (() => {}),
         togglePlayback:
           mediaPlaybackWrapperRef.current?.togglePlayback || (() => {}),
+        pause: mediaPlaybackWrapperRef.current?.pause || (() => {}),
+        play: mediaPlaybackWrapperRef.current?.play || (() => {}),
       }),
       // Include 'isPlaying' as dependency because 'togglePlayback' changes when it changes
       // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/core/src/components/SectionList/SectionList.tsx b/packages/core/src/components/SectionList/SectionList.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { FlashListProps, FlashList } from "@shopify/flash-list";
 import { FlatListProps, FlatList } from "react-native";
 import SectionHeader, { DefaultSectionHeader } from "./SectionHeader";
+import { extractIfNestedInFragment } from "../../utilities";
 
 type ListComponentType = "FlatList" | "FlashList";
 
@@ -88,9 +89,10 @@ const SectionList = <T extends { [key: string]: any }>({
     }
 
     const props = element.props || {};
-    const children = React.Children.toArray(props.children).map(
-      (child) => child as React.ReactElement
+    const children = React.Children.toArray(props.children).map((child) =>
+      extractIfNestedInFragment(child as React.ReactElement)
     );
+
     if (element.type === SectionHeader) {
       return element;
     } else {
diff --git a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
@@ -12,6 +12,7 @@ import {
   extractBorderAndMarginStyles,
   extractEffectStyles,
   extractFlexItemStyles,
+  extractIfNestedInFragment,
   extractPositionStyles,
   extractSizeStyles,
   extractStyles,
@@ -74,7 +75,7 @@ type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
 const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   theme,
   style,
-  children,
+  children: childrenProp,
   Icon,
   closeOnPress,
   leftOpenValue,
@@ -124,9 +125,18 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   const [componentWidth, setComponentWidth] = React.useState<number | null>(
     null
   );
+
+  const children: React.ReactNode[] = React.useMemo(
+    () =>
+      React.Children.toArray(childrenProp).map((child) =>
+        extractIfNestedInFragment(child as React.ReactElement)
+      ),
+    [childrenProp]
+  );
+
   const leftSwipeButtons = React.useMemo(
     () =>
-      React.Children.toArray(children).filter(
+      children.filter(
         (child) =>
           React.isValidElement(child) &&
           child.type === SwipeableItemButton &&
@@ -137,7 +147,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
 
   const rightSwipeButtons = React.useMemo(
     () =>
-      React.Children.toArray(children).filter(
+      children.filter(
         (child) =>
           React.isValidElement(child) &&
           child.type === SwipeableItemButton &&
diff --git a/packages/core/src/components/TabView/TabView.tsx b/packages/core/src/components/TabView/TabView.tsx
@@ -12,7 +12,7 @@ import TabViewItem from "./TabViewItem";
 import type { IconSlot } from "../../interfaces/Icon";
 import { withTheme } from "../../theming";
 import type { Theme } from "../../styles/DefaultTheme";
-import { extractStyles } from "../../utilities";
+import { extractIfNestedInFragment, extractStyles } from "../../utilities";
 
 type SceneProps = SceneRendererProps & {
   route: Route;
@@ -26,6 +26,7 @@ type KeyboardDismissMode = "none" | "auto" | "on-drag";
 type TabViewProps = {
   onIndexChanged?: (index: number) => void;
   onEndReached?: () => void;
+  initialTabIndex?: number;
   tabBarPosition?: TabBarPosition;
   keyboardDismissMode?: KeyboardDismissMode;
   swipeEnabled?: boolean;
@@ -43,6 +44,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
   Icon,
   onIndexChanged,
   onEndReached,
+  initialTabIndex = 0,
   tabBarPosition,
   keyboardDismissMode,
   swipeEnabled,
@@ -54,20 +56,28 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
   tabsBackgroundColor,
   style,
   theme,
-  children,
+  children: childrenProp,
 }) => {
-  const [index, setIndex] = React.useState(0);
+  const [index, setIndex] = React.useState(initialTabIndex);
   const [routes, setRoutes] = React.useState<Route[]>([]);
   const [tabScenes, setTabScenes] = React.useState<{ [key: string]: any }>({});
 
   const { textStyles, viewStyles } = extractStyles(style);
 
+  const children: React.ReactNode[] = React.useMemo(
+    () =>
+      React.Children.toArray(childrenProp).map((child) =>
+        extractIfNestedInFragment(child as React.ReactElement)
+      ),
+    [childrenProp]
+  );
+
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes: Route[] = [];
     const scenes: { [key: string]: React.ReactElement } = {};
 
-    React.Children.toArray(children)
+    children
       .filter(
         (child) => React.isValidElement(child) && child.type === TabViewItem
       )
diff --git a/packages/core/src/utilities.ts b/packages/core/src/utilities.ts
@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleSheet, StyleProp, TextStyle } from "react-native";
 import { isString, isNumber, pick, pickBy, identity } from "lodash";
 
@@ -228,3 +229,21 @@ export function getValueForRadioButton(value: string | number) {
     throw new Error(`Invalid value: ${value}`);
   }
 }
+
+// This is done to ensure that operations that depend on a particular child type still work even when wrapped in a react fragment (ex: .type checks or prop extraction of child)
+// Wrapping in a fragment can happen in Draftbit when a component is wrapped in a conditional for example or inside a Fetch component
+export function extractIfNestedInFragment(
+  component: React.ReactElement
+): React.ReactElement {
+  if (component.type === React.Fragment) {
+    const children = React.Children.toArray(
+      (component.props as any)?.children
+    ) as React.ReactElement[];
+
+    if (children.length === 1) {
+      return children[0];
+    }
+  }
+
+  return component;
+}
diff --git a/packages/maps/package.json b/packages/maps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/maps",
-  "version": "47.5.2",
+  "version": "47.5.3",
   "description": "Map Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
diff --git a/packages/native/package.json b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/native",
-  "version": "47.5.2",
+  "version": "47.5.3",
   "description": "Draftbit UI Components that Depend on Native Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -39,7 +39,7 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "47.5.2",
+    "@draftbit/types": "47.5.3",
     "@expo/vector-icons": "^13.0.0",
     "@react-native-community/datetimepicker": "6.3.5",
     "@react-native-community/slider": "4.2.4",
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/types",
-  "version": "47.5.2",
+  "version": "47.5.3",
   "description": "Shared constants and types between native and core components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/ui",
-  "version": "47.5.2",
+  "version": "47.5.3",
   "description": "Draftbit UI Library",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -43,8 +43,8 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/core": "47.5.2",
-    "@draftbit/native": "47.5.2",
+    "@draftbit/core": "47.5.3",
+    "@draftbit/native": "47.5.3",
     "react-native-reanimated": "~2.12.0"
   },
   "eslintIgnore": [

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "version": "47.5.2",`
	`2`	`+ "version": "47.5.3",`
`3`	`3`	`"npmClient": "yarn",`
`4`	`4`	`"useWorkspaces": true,`
`5`	`5`	`"packages": ["packages/*", "example"],`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@ export interface MediaPlayerStatus {`
`14`	`14`	`export interface MediaPlayerRef {`
`15`	`15`	`seekToPosition: (positionMillis: number) => void;`
`16`	`16`	`togglePlayback: () => void;`
	`17`	`+ pause: () => void;`
	`18`	`+ play: () => void;`
`17`	`19`	`}`
`18`	`20`
`19`	`21`	`export interface MediaPlayerProps {`