Add simple style variants of scrollable components (#843)

YoussefHenna · web-flow · commit 93c3747aa0ad · 2024-03-07T17:34:10.000+02:00
* Add simple style variants of scrollable components

* Undo change to App.tsx

* Use hook with measured size to calculate styles
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -61,6 +61,7 @@
     "react-native-deck-swiper": "^2.0.12",
     "react-native-dropdown-picker": "^5.4.7-beta.1",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-pager-view": "6.2.0",
diff --git a/packages/core/src/components/SectionList/SectionList.tsx b/packages/core/src/components/SectionList/SectionList.tsx
@@ -18,10 +18,13 @@ interface AdditionalSectionListProps<T> {
   listComponent?: ListComponentType;
 }
 
-type FlatListSectionListProps<T> = Omit<FlatListProps<T>, "renderItem"> &
+export type FlatListSectionListProps<T> = Omit<FlatListProps<T>, "renderItem"> &
   AdditionalSectionListProps<T>;
 
-type FlashListSectionListProps<T> = Omit<FlashListProps<T>, "renderItem"> &
+export type FlashListSectionListProps<T> = Omit<
+  FlashListProps<T>,
+  "renderItem"
+> &
   AdditionalSectionListProps<T>;
 
 interface SectionListDataItem<T> {
diff --git a/packages/core/src/components/SectionList/index.tsx b/packages/core/src/components/SectionList/index.tsx
@@ -1,2 +1,6 @@
 export { default as SectionList } from "./SectionList";
 export { default as SectionHeader } from "./SectionHeader";
+export type {
+  FlatListSectionListProps,
+  FlashListSectionListProps,
+} from "./SectionList";
diff --git a/packages/core/src/components/SimpleStyleScrollables/README.md b/packages/core/src/components/SimpleStyleScrollables/README.md
@@ -0,0 +1,3 @@
+### Why do we need these components?
+
+At it's current state the Draftbit builder has a single interface for setting the styles of a component. With these scrollable components, there are 2 style props `style` and `contentContainerStyle`. To simplify the codegen on the draftbit side and hide the complexity from the user, these components take a single style and distrubte them across both style props appropriately.
diff --git a/packages/core/src/components/SimpleStyleScrollables/SimpleStyleFlashList.tsx b/packages/core/src/components/SimpleStyleScrollables/SimpleStyleFlashList.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { FlashList } from "@shopify/flash-list";
+import type { FlashListProps, ContentStyle } from "@shopify/flash-list";
+import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+
+/**
+ * A FlashList wrapper that takes a single `style` prop and internally extracts
+ * the appropriate style keys into the `contentContainerStyle`
+ */
+const SimpleStyleFlashList = <T extends any>({
+  style: styleProp,
+  ...rest
+}: Omit<FlashListProps<T>, "contentContainerStyle">) => {
+  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
+
+  const { style, contentContainerStyle } = useSplitContentContainerStyles(
+    styleProp,
+    measuredWidth,
+    measuredHeight
+  );
+
+  return (
+    <FlashList
+      onLayout={(event) => {
+        setMeasuredWidth(event.nativeEvent.layout.width);
+        setMeasuredHeight(event.nativeEvent.layout.height);
+      }}
+      style={style}
+      contentContainerStyle={contentContainerStyle as ContentStyle}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleStyleFlashList;
diff --git a/packages/core/src/components/SimpleStyleScrollables/SimpleStyleFlatList.tsx b/packages/core/src/components/SimpleStyleScrollables/SimpleStyleFlatList.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { FlatList } from "react-native";
+import type { FlatListProps } from "react-native";
+import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+
+/**
+ * A FlatList wrapper that takes a single `style` prop and internally extracts
+ * the appropriate style keys into the `contentContainerStyle`
+ */
+const SimpleStyleFlatList = <T extends any>({
+  style: styleProp,
+  ...rest
+}: Omit<FlatListProps<T>, "contentContainerStyle">) => {
+  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
+
+  const { style, contentContainerStyle } = useSplitContentContainerStyles(
+    styleProp,
+    measuredWidth,
+    measuredHeight
+  );
+
+  return (
+    <FlatList
+      onLayout={(event) => {
+        setMeasuredWidth(event.nativeEvent.layout.width);
+        setMeasuredHeight(event.nativeEvent.layout.height);
+      }}
+      style={style}
+      contentContainerStyle={contentContainerStyle}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleStyleFlatList;
diff --git a/packages/core/src/components/SimpleStyleScrollables/SimpleStyleKeyboardAwareScrollView.tsx b/packages/core/src/components/SimpleStyleScrollables/SimpleStyleKeyboardAwareScrollView.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-aware-scroll-view";
+import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+
+/**
+ * A KeyboardAwareScrollView wrapper that takes a single `style` prop and internally extracts
+ * the appropriate style keys into the `contentContainerStyle`
+ */
+const SimpleStyleKeyboardAwareScrollView: React.FC<
+  Omit<KeyboardAwareScrollViewProps, "contentContainerStyle">
+> = ({ style: styleProp, ...rest }) => {
+  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
+
+  const { style, contentContainerStyle } = useSplitContentContainerStyles(
+    styleProp,
+    measuredWidth,
+    measuredHeight
+  );
+
+  return (
+    <KeyboardAwareScrollView
+      onLayout={(event) => {
+        setMeasuredWidth(event.nativeEvent.layout.width);
+        setMeasuredHeight(event.nativeEvent.layout.height);
+      }}
+      style={style}
+      contentContainerStyle={contentContainerStyle}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleStyleKeyboardAwareScrollView;
diff --git a/packages/core/src/components/SimpleStyleScrollables/SimpleStyleMasonryFlashList.tsx b/packages/core/src/components/SimpleStyleScrollables/SimpleStyleMasonryFlashList.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { MasonryFlashList } from "@shopify/flash-list";
+import type { MasonryFlashListProps, ContentStyle } from "@shopify/flash-list";
+import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+
+/**
+ * A MasonryFlashList wrapper that takes a single `style` prop and internally extracts
+ * the appropriate style keys into the `contentContainerStyle`
+ */
+const SimpleStyleMasonryFlashList = <T extends any>({
+  style: styleProp,
+  ...rest
+}: Omit<MasonryFlashListProps<T>, "contentContainerStyle">) => {
+  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
+
+  const { style, contentContainerStyle } = useSplitContentContainerStyles(
+    styleProp,
+    measuredWidth,
+    measuredHeight
+  );
+
+  return (
+    <MasonryFlashList
+      onLayout={(event) => {
+        setMeasuredWidth(event.nativeEvent.layout.width);
+        setMeasuredHeight(event.nativeEvent.layout.height);
+      }}
+      style={style}
+      contentContainerStyle={contentContainerStyle as ContentStyle}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleStyleMasonryFlashList;
diff --git a/packages/core/src/components/SimpleStyleScrollables/SimpleStyleScrollView.tsx b/packages/core/src/components/SimpleStyleScrollables/SimpleStyleScrollView.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import type { ScrollViewProps } from "react-native";
+import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+
+/**
+ * A ScrollView wrapper that takes a single `style` prop and internally extracts
+ * the appropriate style keys into the `contentContainerStyle`
+ */
+const SimpleStyleScrollView: React.FC<
+  Omit<ScrollViewProps, "contentContainerStyle">
+> = ({ style: styleProp, ...rest }) => {
+  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
+
+  const { style, contentContainerStyle } = useSplitContentContainerStyles(
+    styleProp,
+    measuredWidth,
+    measuredHeight
+  );
+
+  return (
+    <ScrollView
+      onLayout={(event) => {
+        setMeasuredWidth(event.nativeEvent.layout.width);
+        setMeasuredHeight(event.nativeEvent.layout.height);
+      }}
+      style={style}
+      contentContainerStyle={contentContainerStyle}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleStyleScrollView;
diff --git a/packages/core/src/components/SimpleStyleScrollables/SimpleStyleSectionList.tsx b/packages/core/src/components/SimpleStyleScrollables/SimpleStyleSectionList.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { SectionList } from "../SectionList";
+import type {
+  FlatListSectionListProps,
+  FlashListSectionListProps,
+} from "../SectionList";
+import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+
+/**
+ * A SectionList wrapper that takes a single `style` prop and internally extracts
+ * the appropriate style keys into the `contentContainerStyle`
+ */
+const SimpleStyleSectionList = <T extends { [key: string]: any }>({
+  style: styleProp,
+  ...rest
+}: Omit<
+  FlatListSectionListProps<T> | FlashListSectionListProps<T>,
+  "contentContainerStyle"
+>) => {
+  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
+
+  const { style, contentContainerStyle } = useSplitContentContainerStyles(
+    styleProp,
+    measuredWidth,
+    measuredHeight
+  );
+
+  return (
+    //@ts-ignore contentContainerStyle has different types for FlashList and FlatList implmentations and confuses TS
+    <SectionList
+      onLayout={(event) => {
+        setMeasuredWidth(event.nativeEvent.layout.width);
+        setMeasuredHeight(event.nativeEvent.layout.height);
+      }}
+      style={style}
+      contentContainerStyle={contentContainerStyle}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleStyleSectionList;
diff --git a/packages/core/src/components/SimpleStyleScrollables/SimpleStyleSwipeableList.tsx b/packages/core/src/components/SimpleStyleScrollables/SimpleStyleSwipeableList.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { SwipeableList } from "../SwipeableItem";
+import type {
+  FlashListSwipeableListProps,
+  FlatListSwipeableListProps,
+} from "../SwipeableItem";
+import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+
+/**
+ * A SwipeableList wrapper that takes a single `style` prop and internally extracts
+ * the appropriate style keys into the `contentContainerStyle`
+ */
+const SimpleStyleSwipeableList = <T extends { [key: string]: any }>({
+  style: styleProp,
+  ...rest
+}: Omit<
+  FlashListSwipeableListProps<T> | FlatListSwipeableListProps<T>,
+  "contentContainerStyle"
+>) => {
+  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
+  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
+
+  const { style, contentContainerStyle } = useSplitContentContainerStyles(
+    styleProp,
+    measuredWidth,
+    measuredHeight
+  );
+
+  return (
+    //@ts-ignore contentContainerStyle has different types for FlashList and FlatList implmentations and confuses TS
+    <SwipeableList
+      onLayout={(event) => {
+        setMeasuredWidth(event.nativeEvent.layout.width);
+        setMeasuredHeight(event.nativeEvent.layout.height);
+      }}
+      style={style}
+      contentContainerStyle={contentContainerStyle}
+      {...rest}
+    />
+  );
+};
+
+export default SimpleStyleSwipeableList;
diff --git a/packages/core/src/components/SimpleStyleScrollables/useSplitContentContainerStyles.ts b/packages/core/src/components/SimpleStyleScrollables/useSplitContentContainerStyles.ts
@@ -0,0 +1,60 @@
+import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { pick, omit } from "lodash";
+import { useDeepCompareMemo } from "../../utilities";
+
+interface Styles {
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export const contentContainerStyleNames = [
+  "padding",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingRight",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+  "justifyContent",
+  "alignItems",
+  "alignContent",
+  "flexDirection",
+  "flexWrap",
+];
+
+export default function useSplitContentContainerStyles(
+  originalStyle: StyleProp<ViewStyle>,
+  measuredWidth?: number,
+  measuredHeight?: number
+) {
+  return useDeepCompareMemo<Styles>(() => {
+    const flattenedStyle = StyleSheet.flatten(originalStyle);
+
+    let contentContainerStyle = pick(
+      flattenedStyle,
+      contentContainerStyleNames
+    );
+
+    // contentContainerStyle should always at least fill the parent to ensure sizing changes reflects properly on component and children
+    if (measuredWidth) {
+      contentContainerStyle.minWidth = measuredWidth;
+    }
+    if (measuredHeight) {
+      contentContainerStyle.minHeight = measuredHeight;
+    }
+
+    let style = omit(flattenedStyle, contentContainerStyleNames);
+
+    // ScrollView's implementation defaults flexGrow to 1, which prevents the ability to set a static size or use a flex larger than 1
+    // See: https://github.com/facebook/react-native/issues/3422
+    if (style.flex === undefined) {
+      style = { flexGrow: 0, ...style };
+    } else if (style.flexGrow === undefined) {
+      style = { flexGrow: style.flex, ...style };
+    }
+
+    return { style, contentContainerStyle };
+  }, [originalStyle, measuredWidth, measuredHeight]);
+}
diff --git a/packages/core/src/components/SwipeableItem/SwipeableList.tsx b/packages/core/src/components/SwipeableItem/SwipeableList.tsx
@@ -9,10 +9,10 @@ interface AdditionalSwipeableListProps {
   listComponent?: ListComponentType;
 }
 
-type FlatListSwipeableListProps<T> = FlatListProps<T> &
+export type FlatListSwipeableListProps<T> = FlatListProps<T> &
   AdditionalSwipeableListProps;
 
-type FlashListSwipeableListProps<T> = FlashListProps<T> &
+export type FlashListSwipeableListProps<T> = FlashListProps<T> &
   AdditionalSwipeableListProps;
 
 type SwipeableListContextType = {
diff --git a/packages/core/src/components/SwipeableItem/index.tsx b/packages/core/src/components/SwipeableItem/index.tsx
@@ -1,3 +1,7 @@
 export { default as SwipeableItem } from "./SwipeableItem";
 export { default as SwipeableItemButton } from "./SwipeableItemButton";
 export { default as SwipeableList } from "./SwipeableList";
+export type {
+  FlashListSwipeableListProps,
+  FlatListSwipeableListProps,
+} from "./SwipeableList";
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+### Why do we need these components?`
	`2`	`+`
	`3`	+At it's current state the Draftbit builder has a single interface for setting the styles of a component. With these scrollable components, there are 2 style props `style` and `contentContainerStyle`. To simplify the codegen on the draftbit side and hide the complexity from the user, these components take a single style and distrubte them across both style props appropriately.