react-native-terra-ui 0.4.0 → 0.5.0

package/src/components/screen/ScreenFlashList.tsx

@@ -1,203 +0,0 @@
-import { FlashList, type FlashListProps } from '@shopify/flash-list';
-import type { ComponentType } from 'react';
-import {
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  View,
-} from 'react-native';
-import Animated, {
-  useAnimatedScrollHandler,
-  useComposedEventHandler,
-} from 'react-native-reanimated';
-
-import { StyleSheet } from 'react-native-unistyles';
-
-import { resolveScreenMargin } from '#theme/screen-margin';
-import { PortalHost } from '../portal';
-import { BottomSafeArea } from './parts/BottomSafeArea';
-import { renderScreenPlaceholder } from './parts/ScreenPlaceholder';
-import { SCREEN_HEADER_PORTAL_HOST, useScreen } from './ScreenContext';
-import type { ScreenMargins, ScreenScrollableProps } from './types';
-import { hasXMargin, hasYMargin, renderListHeader } from './utils';
-
-const AnimatedFlashList = Animated.createAnimatedComponent(
-  FlashList as unknown as ComponentType<FlashListProps<unknown>>
-);
-
-export interface ScreenFlashListProps<T>
-  extends Omit<FlashListProps<T>, 'horizontal'>,
-    ScreenScrollableProps {
-  /**
-   * Extra bottom padding on the list content — clearance for a tab bar or home
-   * indicator. Defaults to the `layout.screen.margin.y` token when margins are
-   * enabled, otherwise `0`.
-   */
-  bottomInset?: number;
-}
-
-/**
- * `FlashList` variant of `Screen.ScrollView`: mirrors scroll offset into the
- * screen's shared `scrollY`, hosts the portal target above the list, and
- * applies token-driven content padding.
- *
- * Requires `@shopify/flash-list` — it is a peer dependency of
- * `react-native-terra-ui` and must be installed in the consuming app.
- *
- * Note: unlike `Screen.FlatList`, this does not bind the screen's shared
- * imperative `scrollRef` — `FlashList`'s ref exposes a different (non
- * Reanimated-compatible) imperative API.
- *
- * Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
- * `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
- * another without relearning its API.
- *
- * @example
- * ```tsx
- * <Screen.FlashList data={items} renderItem={({ item }) => <Row item={item} />} />
- * ```
- *
- * @example Loading and empty placeholders
- * ```tsx
- * <Screen.FlashList
- *   data={items}
- *   loading={isLoading}
- *   EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
- *   renderItem={({ item }) => <Row item={item} />}
- * />
- * ```
- */
-export function ScreenFlashList<T>({
-  data,
-  style,
-  contentContainerStyle,
-  ListHeaderComponent,
-  ListFooterComponent,
-  ListEmptyComponent,
-  horizontal = false,
-  loading = false,
-  LoadingComponent,
-  EmptyComponent,
-  margins,
-  bottomInset,
-  onScroll,
-  ...rest
-}: ScreenFlashListProps<T>) {
-  if (FlashList == null) {
-    throw new Error(
-      '[react-native-terra-ui] Screen.FlashList requires "@shopify/flash-list" to be installed in your app. Run `yarn add @shopify/flash-list` (or the npm/pnpm equivalent) and rebuild.'
-    );
-  }
-
-  const {
-    background,
-    scrollHandler,
-    headerSnapOffsets,
-    margins: screenMargins,
-    hasHeader,
-  } = useScreen();
-
-  const resolvedMargins = margins ?? screenMargins;
-  // The placeholder rides in on `ListEmptyComponent` rather than replacing the
-  // list, so the header portal and snap offsets stay put. While loading the
-  // list is fed an empty `data` so that slot is the one that renders.
-  const placeholder = renderScreenPlaceholder({
-    loading,
-    LoadingComponent,
-    EmptyComponent,
-    isEmpty: !data || data.length === 0,
-  });
-
-  const jsScrollHandler = useAnimatedScrollHandler(
-    (event) => {
-      if (onScroll)
-        onScroll(event as unknown as NativeSyntheticEvent<NativeScrollEvent>);
-    },
-    [onScroll]
-  );
-
-  const composedHandler = useComposedEventHandler([
-    scrollHandler,
-    jsScrollHandler,
-  ]);
-
-  // `AnimatedFlashList` is typed for `unknown` items, so the remaining props
-  // are cast back to its prop type — minus the ones set explicitly below,
-  // which the spread would otherwise re-supply.
-  const listProps = rest as Omit<FlashListProps<unknown>, 'data' | 'onScroll'>;
-
-  // A caller naming its own `bottomInset` has taken the bottom over entirely,
-  // and a horizontal list has no bottom edge to clear.
-  const needsBottomSafeArea = bottomInset === undefined && !horizontal;
-
-  const footerComponent = (
-    <>
-      {renderListHeader(ListFooterComponent)}
-      {needsBottomSafeArea ? <BottomSafeArea /> : null}
-    </>
-  );
-
-  const headerComponent = (
-    <View style={styles.headerWrapper(resolvedMargins)}>
-      <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
-      {renderListHeader(ListHeaderComponent)}
-    </View>
-  );
-
-  return (
-    <AnimatedFlashList
-      data={loading ? [] : (data as readonly unknown[] | null | undefined)}
-      style={[{ backgroundColor: background }, style]}
-      horizontal={horizontal}
-      contentInsetAdjustmentBehavior={hasHeader ? 'never' : undefined}
-      contentContainerStyle={[
-        styles.content(resolvedMargins, hasHeader, bottomInset),
-        contentContainerStyle,
-      ]}
-      ListHeaderComponent={headerComponent}
-      ListFooterComponent={footerComponent}
-      ListEmptyComponent={placeholder ?? ListEmptyComponent}
-      showsVerticalScrollIndicator={false}
-      scrollEventThrottle={16}
-      snapToOffsets={headerSnapOffsets}
-      {...listProps}
-      onScroll={composedHandler}
-    />
-  );
-}
-
-const styles = StyleSheet.create((theme, runtime) => {
-  const { x: marginX, y: marginY } = resolveScreenMargin(
-    theme,
-    runtime.breakpoint
-  );
-
-  return {
-    content: (
-      margins: ScreenMargins,
-      hasHeader: boolean,
-      bottomInset: number | undefined
-    ) => {
-      return {
-        flexGrow: 1,
-        // The header is absolutely positioned, so the list reserves its full
-        // height — bar plus top safe area. This assumes the scroll view does not
-        // also get UIKit's automatic inset adjustment: on a native tab screen
-        // that means `disableAutomaticContentInsets` on the tab, or the two
-        // insets are counted twice.
-        paddingTop:
-          (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) +
-          (hasYMargin(margins) ? marginY : 0),
-        paddingHorizontal: hasXMargin(margins) ? marginX : 0,
-        // The safe area is `BottomSafeArea`'s job; counting it here as well
-        // would leave a gap the height of the gesture bar.
-        paddingBottom: bottomInset ?? (hasYMargin(margins) ? marginY : 0),
-      };
-    },
-    safeArea: {
-      height: runtime.insets.top,
-    },
-    headerWrapper: (margins: ScreenMargins) => ({
-      marginHorizontal: hasXMargin(margins) ? -marginX : 0,
-    }),
-  };
-});