@applicaster/zapp-react-native-ui-components 16.0.0-rc.85 → 16.0.0-rc.87

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  memo,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import {
   ActivityIndicator,
   ScrollView,
@@ -48,6 +55,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
     textAlign: "center",
   },
+  scrollView: {
+    flexShrink: 1,
+  },
+  someStyles: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 },
 });
 
 type ModalComponentProps = {
@@ -81,9 +92,10 @@ type ModalComponentProps = {
   contentComponent?: React.ComponentType<any>;
   contentComponentProps?: Record<string, any>;
   styleOverrides?: ModalBlocksConfig | Record<string, any>;
+  measurementPhase?: boolean;
 };
 
-export function BottomSheetModalContent(props: ModalComponentProps) {
+function _BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
     currentRoute,
@@ -103,13 +115,21 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     contentComponent: ContentComponent,
     contentComponentProps = {},
     styleOverrides: propStyleOverrides,
+    measurementPhase = false,
   } = props;
 
   const route = useRef(currentRoute);
   const theme = useTheme<BaseThemePropertiesMobile>();
+  const bottomInset = useSafeAreaInsets().bottom;
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
+  const calculatedcontentContainerStyle = useMemo(() => {
+    return {
+      paddingBottom: paddingBottom + bottomInset,
+    };
+  }, [paddingBottom, bottomInset]);
+
   const {
     items: fetchedItems,
     showCentralLoading,
@@ -159,11 +179,28 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const createPlaylistTitle =
     pluginLocalizations?.create_new_playlist_title || "Create New Playlist";
 
+  const nextUpTitle =
+    pluginLocalizations?.next_up_title ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`]
+      : undefined) ||
+    "Next Up";
+
+  const nowPlayingTitle =
+    pluginLocalizations?.now_playing_title ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`]
+      : undefined) ||
+    "Now Playing";
+
   const resolvedTitle = props.title || localizedHeaderTitle || title;
 
   const itemsToRender = viewModel ? fetchedItems : items;
   const operations = editableCollection?.operations || [];
-  const isSortable = hasOperation(operations, OPERATIONS.REORDER);
+
+  const isSortable = useDeferredValue(
+    !measurementPhase && hasOperation(operations, OPERATIONS.REORDER)
+  );
 
   const cell = getCell(
     viewModel ? role : undefined,
@@ -264,7 +301,17 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     ]
   );
 
-  const bottomInset = useSafeAreaInsets().bottom;
+  const sortableListRenderItem = useCallback(
+    ({ item, index, renderHandle }) =>
+      cell.renderItem({
+        item,
+        index,
+        onPress: onItemPress,
+        context: renderContext,
+        renderHandle,
+      }),
+    [cell, onItemPress, renderContext]
+  );
 
   const hasNowPlaying = hasOperation(operations, OPERATIONS.NOW_PLAYING);
   const hasClearAll = hasOperation(operations, OPERATIONS.CLEAR_ALL);
@@ -291,6 +338,8 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         component: () => (
           <NowPlayingHeaderSection
             onClear={hasClearAll ? handleDeleteCollection : undefined}
+            nextUpTitle={nextUpTitle}
+            nowPlayingTitle={nowPlayingTitle}
           />
         ),
       });
@@ -318,11 +367,32 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     hasNowPlaying,
     hasClearAll,
     handleDeleteCollection,
+    nextUpTitle,
+    nowPlayingTitle,
     hasAdd,
     handleCreatePlaylist,
+    createPlaylistTitle,
   ]);
 
-  const renderBody = () => {
+  const _items = useMemo(() => {
+    return (itemsToRender || []).map((item, index) =>
+      cell.renderItem({
+        item,
+        index,
+        onPress: onItemPress,
+        context: renderContext,
+      })
+    );
+  }, [itemsToRender, cell, onItemPress, renderContext]);
+
+  const _styles = useMemo(() => {
+    return {
+      maxHeight: props.maxHeight,
+      paddingTop: paddingTop,
+    };
+  }, [props.maxHeight, paddingTop]);
+
+  const renderedBody = (() => {
     if (ContentComponent) {
       const shouldWrapInScrollView =
         !contentComponentProps?.disableScrollViewWrap &&
@@ -331,9 +401,8 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       if (shouldWrapInScrollView) {
         return (
           <ScrollView
-            contentContainerStyle={{
-              paddingBottom: paddingBottom + bottomInset,
-            }}
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={calculatedcontentContainerStyle}
           >
             <ContentComponent
               {...contentComponentProps}
@@ -346,12 +415,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       }
 
       return (
-        <View
-          style={{
-            flexShrink: 1,
-            paddingBottom: paddingBottom + bottomInset,
-          }}
-        >
+        <View style={[styles.scrollView, calculatedcontentContainerStyle]}>
           <ContentComponent
             {...contentComponentProps}
             dismiss={dismiss}
@@ -395,43 +459,30 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         <SortableList
           sortableData={itemsToRender}
           headers={headers}
-          scrollViewStyle={{
-            flexShrink: 1,
-          }}
-          contentContainerStyle={{
-            paddingBottom: paddingBottom + bottomInset,
-          }}
+          scrollViewStyle={styles.scrollView}
+          contentContainerStyle={calculatedcontentContainerStyle}
           onDragEnd={handleDragEnd}
-          renderItem={({ item, index, renderHandle }) =>
-            cell.renderItem({
-              item,
-              index,
-              onPress: onItemPress,
-              context: renderContext,
-              renderHandle,
-            })
-          }
+          renderItem={sortableListRenderItem}
         />
       );
     }
 
     return (
       <ScrollView
+        keyboardShouldPersistTaps="handled"
         overScrollMode="never"
         bounces={false}
-        contentContainerStyle={{
-          paddingBottom: paddingBottom + bottomInset,
-        }}
+        contentContainerStyle={calculatedcontentContainerStyle}
       >
         {hasNowPlaying ? (
           <NowPlayingHeaderSection
             onClear={hasClearAll ? handleDeleteCollection : undefined}
+            nextUpTitle={nextUpTitle}
+            nowPlayingTitle={nowPlayingTitle}
           />
         ) : null}
         {hasAdd ? (
-          <View
-            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
-          >
+          <View style={styles.someStyles}>
             <AudioPlayerButton
               configuration={VARIANT_WITH_ICON}
               data={{ title: createPlaylistTitle }}
@@ -439,26 +490,14 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
             />
           </View>
         ) : null}
-        {(itemsToRender || []).map((item, index) =>
-          cell.renderItem({
-            item,
-            index,
-            onPress: onItemPress,
-            context: renderContext,
-          })
-        )}
+        {_items}
       </ScrollView>
     );
-  };
+  })();
 
   return (
     <ModalBlocksStyleContext.Provider value={styleOverrides as any}>
-      <View
-        style={{
-          maxHeight: props.maxHeight,
-          paddingTop: paddingTop,
-        }}
-      >
+      <View style={_styles}>
         <BottomSheetDragArea>
           <Header
             dismiss={dismiss}
@@ -467,8 +506,10 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
             title={resolvedTitle}
           />
         </BottomSheetDragArea>
-        {renderBody()}
+        {renderedBody}
       </View>
     </ModalBlocksStyleContext.Provider>
   );
 }
+
+export const BottomSheetModalContent = memo(_BottomSheetModalContent);

package/Components/ModalComponent/SortableList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Sortable from "react-native-sortables";
 import { Text, View, ViewStyle } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
@@ -65,6 +65,9 @@ export type SortableListProps = {
   }) => void;
 };
 
+const defaultKeyExtractor = (item, index) =>
+  `sortable-item-${item?.id ?? item?.title ?? index}`;
+
 export const SortableList = ({
   scrollViewStyle,
   contentContainerStyle,
@@ -73,8 +76,7 @@ export const SortableList = ({
   columns = 1,
   rowGap = 0,
   columnGap = 0,
-  keyExtractor = (item, index) =>
-    `sortable-item-${item?.id ?? item?.title ?? index}`,
+  keyExtractor = defaultKeyExtractor,
   renderItem,
   sortableData = DEFAULT_SORTABLE_DATA,
   headers = DEFAULT_HEADERS,
@@ -85,7 +87,9 @@ export const SortableList = ({
   const [localData, setLocalData] = useState(sortableData);
 
   useEffect(() => {
-    setLocalData(sortableData);
+    setLocalData((localData) =>
+      localData !== sortableData ? sortableData : localData
+    );
   }, [sortableData]);
 
   const handleDragEnd = useCallback(
@@ -101,13 +105,24 @@ export const SortableList = ({
     [onDragEnd]
   );
 
-  return (
-    <Animated.ScrollView
-      ref={scrollableRef}
-      style={scrollViewStyle}
-      contentContainerStyle={contentContainerStyle}
-    >
-      {(headers || []).map((header, idx) => (
+  const _renderItem = useCallback(
+    ({ item, index }) => (
+      <View key={keyExtractor(item, index)} style={itemStyle}>
+        {renderItem({
+          item,
+          index,
+          renderHandle: (children) => (
+            <Sortable.Handle>{children}</Sortable.Handle>
+          ),
+        })}
+      </View>
+    ),
+    [itemStyle, keyExtractor, renderItem]
+  );
+
+  const renderHeader = useMemo(
+    () =>
+      (headers || []).map((header, idx) => (
         <View key={`static-header-${idx}`} style={headerStyle}>
           {header.title ? (
             <SortableListHeader title={header.title} />
@@ -115,7 +130,17 @@ export const SortableList = ({
             renderHeaderComponent(header.component)
           )}
         </View>
-      ))}
+      )),
+    [headers, headerStyle]
+  );
+
+  return (
+    <Animated.ScrollView
+      ref={scrollableRef}
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {renderHeader}
       <Sortable.Grid
         scrollableRef={scrollableRef}
         customHandle
@@ -125,17 +150,7 @@ export const SortableList = ({
         data={localData}
         keyExtractor={keyExtractor}
         onDragEnd={handleDragEnd}
-        renderItem={({ item, index }) => (
-          <View key={keyExtractor(item, index)} style={itemStyle}>
-            {renderItem({
-              item,
-              index,
-              renderHandle: (children) => (
-                <Sortable.Handle>{children}</Sortable.Handle>
-              ),
-            })}
-          </View>
-        )}
+        renderItem={_renderItem}
       />
     </Animated.ScrollView>
   );

package/Components/ModalComponent/__tests__/BottomSheetModalContent.test.tsx

@@ -235,4 +235,21 @@ describe("BottomSheetModalContent role/behavior cells", () => {
     const { ScrollView } = require("react-native");
     expect(() => UNSAFE_getByType(ScrollView)).toThrow();
   });
+
+  it("sets keyboardShouldPersistTaps='handled' on ScrollView wrapping contentComponent", () => {
+    const CustomComponent = () => (
+      <React.Fragment>Custom Content</React.Fragment>
+    );
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomComponent}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    const scrollView = UNSAFE_getByType(ScrollView);
+    expect(scrollView.props.keyboardShouldPersistTaps).toBe("handled");
+  });
 });

package/Components/ModalComponent/index.tsx

@@ -26,20 +26,18 @@ type Props = {
 export function ModalComponent(props: ModalBottomSheetContentProps & Props) {
   const [height, setHeight] = useState(0);
 
-  const onLayout = useCallback(
-    ({ nativeEvent }) => {
-      if (height === 0) {
-        setHeight(nativeEvent.layout.height);
-      }
-    },
-    [height]
-  );
+  const onLayout = useCallback(({ nativeEvent }) => {
+    setHeight((value) => (value === 0 ? nativeEvent.layout.height : value));
+  }, []);
 
   if (height === 0) {
     return (
       <MeasurementsPortal
         Component={BottomSheetModalContent}
-        componentProps={props}
+        componentProps={{
+          ...props,
+          measurementPhase: true,
+        }}
         onLayout={onLayout}
       />
     );

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import * as R from "ramda";
 import { FlatList, StyleSheet, View } from "react-native";
+import { SafeAreaView, EdgeMode, Edge } from "react-native-safe-area-context";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -40,6 +40,12 @@ type Props = {
   riverId?: string;
   getStaticComponentFeed: any;
   stickyHeaderIndices?: number[];
+  safeArea?:
+    | {
+        edges: Record<Edge, EdgeMode>;
+        mode: "padding" | "margin" | undefined;
+      }
+    | undefined;
 };
 
 const styles = StyleSheet.create({
@@ -52,7 +58,7 @@ const getNearestValue = (value, optionA, optionB) =>
   Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
 const scrollIndicatorInsets = { right: 1 };
-const keyExtractor = R.compose(String, R.prop("id"));
+const keyExtractor = (item) => item.id.toString();
 
 function ComponentsMapComponent(props: Props) {
   const {
@@ -64,6 +70,7 @@ function ComponentsMapComponent(props: Props) {
     riverId,
     getStaticComponentFeed,
     stickyHeaderIndices,
+    safeArea,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -77,7 +84,7 @@ function ComponentsMapComponent(props: Props) {
 
   const riverComponents = React.useMemo(() => {
     if (feed?.entry?.length < components.length) {
-      return R.slice(0, feed?.entry?.length, components);
+      return components.slice(0, feed?.entry?.length);
     }
 
     return components;
@@ -92,7 +99,7 @@ function ComponentsMapComponent(props: Props) {
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
 
-  const theme = useTheme();
+  const theme = useTheme<BaseThemePropertiesMobile>();
 
   const renderRiverItem = React.useCallback(
     ({ item, index }) => {
@@ -121,21 +128,13 @@ function ComponentsMapComponent(props: Props) {
 
   const screenStyle = React.useMemo(
     () => ({
-      paddingTop: ifEmptyUseFallback(
-        screenConfig.paddingTop,
-        R.prop("screen_padding_top")(theme)
-      ),
-      paddingBottom: ifEmptyUseFallback(
-        screenConfig.paddingBottom,
-        R.prop("screen_padding_bottom")(theme)
-      ),
       paddingLeft: ifEmptyUseFallback(
         screenConfig.paddingLeft,
-        R.prop("screen_padding_left")(theme)
+        theme.screen_padding_left
       ),
       paddingRight: ifEmptyUseFallback(
         screenConfig.paddingRight,
-        R.prop("screen_padding_right")(theme)
+        theme.screen_padding_right
       ),
     }),
     [riverId]
@@ -266,51 +265,79 @@ function ComponentsMapComponent(props: Props) {
             numberOfComponents={riverComponents.length}
           >
             <ViewportTracker>
-              <FlatList
-                testID="components-map-flat-list"
-                ref={(ref) => {
-                  flatListRef.current = ref;
-                }}
-                // Fix for WebView rerender crashes on Android API 28+
-                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-                overScrollMode={isAndroid ? "never" : "auto"}
-                scrollIndicatorInsets={scrollIndicatorInsets}
-                extraData={feed}
-                stickyHeaderIndices={stickyHeaderIndices}
-                removeClippedSubviews={isAndroid}
-                onLayout={handleOnLayout}
-                initialNumToRender={3}
-                maxToRenderPerBatch={10}
-                windowSize={12}
-                keyExtractor={keyExtractor}
-                renderItem={renderRiverItem}
-                data={riverComponents}
-                contentContainerStyle={contentContainerStyle}
-                ListFooterComponent={
-                  <RiverFooter
-                    flatListHeight={flatListHeight}
-                    loadingState={loadingState}
-                  />
-                }
-                refreshControl={refreshControl}
-                onScrollBeginDrag={onScrollBeginDrag}
-                onScroll={onScroll}
-                onMomentumScrollEnd={_onMomentumScrollEnd}
-                onScrollEndDrag={_onScrollEndDrag}
-                scrollEventThrottle={16}
-                {...scrollViewExtraProps}
-                onEndReached={
-                  /* When wrapped in a parent ScrollView (e.g. tabs),
+              <>
+                <FlatList
+                  ListHeaderComponent={
+                    <SafeAreaView
+                      mode={safeArea?.mode ?? "margin"}
+                      style={{
+                        paddingTop: ifEmptyUseFallback(
+                          screenConfig.paddingTop,
+                          theme.screen_padding_top
+                        ),
+                        height: StyleSheet.hairlineWidth,
+                      }}
+                      edges={{ top: safeArea?.edges?.top ?? "off" }}
+                    />
+                  }
+                  testID="components-map-flat-list"
+                  ref={(ref) => {
+                    flatListRef.current = ref;
+                  }}
+                  // Fix for WebView rerender crashes on Android API 28+
+                  // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                  overScrollMode={isAndroid ? "never" : "auto"}
+                  scrollIndicatorInsets={scrollIndicatorInsets}
+                  extraData={feed}
+                  stickyHeaderIndices={stickyHeaderIndices}
+                  removeClippedSubviews={isAndroid}
+                  onLayout={handleOnLayout}
+                  initialNumToRender={3}
+                  maxToRenderPerBatch={10}
+                  windowSize={12}
+                  keyExtractor={keyExtractor}
+                  renderItem={renderRiverItem}
+                  data={riverComponents}
+                  contentContainerStyle={contentContainerStyle}
+                  ListFooterComponent={
+                    <>
+                      <RiverFooter
+                        flatListHeight={flatListHeight}
+                        loadingState={loadingState}
+                      />
+                      <SafeAreaView
+                        mode={safeArea?.mode ?? "margin"}
+                        style={{
+                          paddingBottom: ifEmptyUseFallback(
+                            screenConfig.paddingBottom,
+                            theme.screen_padding_bottom
+                          ),
+                          height: StyleSheet.hairlineWidth,
+                        }}
+                        edges={{ bottom: safeArea?.edges?.bottom ?? "off" }}
+                      />
+                    </>
+                  }
+                  refreshControl={refreshControl}
+                  onScrollBeginDrag={onScrollBeginDrag}
+                  onScroll={onScroll}
+                  onMomentumScrollEnd={_onMomentumScrollEnd}
+                  onScrollEndDrag={_onScrollEndDrag}
+                  scrollEventThrottle={16}
+                  {...scrollViewExtraProps}
+                  onEndReached={
+                    /* When wrapped in a parent ScrollView (e.g. tabs),
                   this FlatList doesn't scroll so onEndReached can fire repeatedly;
                   skip it here and let the parent ScrollView emit scroll-end instead. */
-                  isScreenWrappedInContainer
-                    ? undefined
-                    : () => {
-                        if (!hasUserScrolledRef.current) return;
-                        emitScrollEndReached();
-                      }
-                }
-              />
+                    isScreenWrappedInContainer
+                      ? undefined
+                      : () => {
+                          if (!hasUserScrolledRef.current) return;
+                          emitScrollEndReached();
+                        }
+                  }
+                />
+              </>
             </ViewportTracker>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>
@@ -320,6 +347,5 @@ function ComponentsMapComponent(props: Props) {
 }
 
 export const ComponentsMap = React.memo(
-  withComponentsMapProvider(ComponentsMapComponent),
-  R.equals
+  withComponentsMapProvider(ComponentsMapComponent)
 );