@teamturing/react-native-kit 1.1.0 → 1.2.0

package/src/component/Layout/WhiteGradientFixedBottomLayout.tsx

@@ -0,0 +1,27 @@
+import { useKeyboard, is, GradientCollection, palette } from '@teamturing/react-native-kit';
+import type { PropsWithChildren } from 'react';
+import { StyleSheet } from 'react-native';
+
+import type { FixedBottomLayoutProps } from './FixedBottomLayout';
+import { FixedBottomLayout } from './FixedBottomLayout';
+
+type Props = {} & FixedBottomLayoutProps;
+const WhiteGradientFixedBottomLayout = ({ children, ...props }: PropsWithChildren<Props>) => {
+  const { keyboardShown } = useKeyboard();
+  return (
+    <FixedBottomLayout {...props}>
+      {is.android() && keyboardShown ? null : (
+        <GradientCollection
+          colors={[palette.transparent, palette.white]}
+          locations={[0, 0.3]}
+          style={StyleSheet.absoluteFill}
+          pointerEvents={'none'}
+        />
+      )}
+      {children}
+    </FixedBottomLayout>
+  );
+};
+
+export type { Props as FixedBottomWHiteGradientLayoutProps };
+export { WhiteGradientFixedBottomLayout };

package/src/component/Layout/index.ts

@@ -0,0 +1,14 @@
+export * from './WhiteGradientFixedBottomLayout';
+export * from './SingleOrTwoColumnCellLayout';
+export * from './Row';
+export * from './Column';
+export * from './LayoutStyle';
+export * from './ItemList';
+export * from './Grid';
+export * from './Gap';
+export * from './FixedBottomLayout';
+export * from './AdaptiveWindowLayout';
+export * from './AdaptiveWidthConstraintView';
+export * from './AdaptiveHeightConstraintView';
+export * from './SectionLayout';
+export * from './Layout';

package/src/component/LiText.tsx

@@ -0,0 +1,20 @@
+import { type TextConfigProp, Txt } from '@teamturing/react-native-kit';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+type Props = {
+  text?: string;
+  style?: StyleProp<ViewStyle>;
+  textConfig?: TextConfigProp;
+  TxtComponent?: Txt;
+};
+const LiText = ({ text, textConfig, style, TxtComponent = Txt.Regular }: Props) => {
+  return (
+    <View style={[{ flexDirection: 'row' }, style]}>
+      {TxtComponent.render('\u2022', textConfig)}
+      {TxtComponent.render(text, { ...textConfig, style: [{ flex: 1, marginLeft: 8 }, textConfig?.style] })}
+    </View>
+  );
+};
+
+export { LiText };

package/src/component/LineDivider.tsx

@@ -0,0 +1,29 @@
+import { palette, flatStyle } from '@teamturing/react-native-kit';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  color?: ColorValue;
+  marginTop?: number;
+  marginBottom?: number;
+  marginVertical?: number;
+  height?: number;
+};
+const LineDivider = ({
+  color = palette.gray200,
+  style,
+  marginBottom: _marginBottom,
+  marginTop: _marginTop,
+  marginVertical,
+  height: _height,
+}: Props) => {
+  const flatten = flatStyle(style);
+  const backgroundColor = flatten?.backgroundColor || color;
+  const marginTop = flatten?.marginTop || flatten?.marginVertical || _marginTop || marginVertical;
+  const marginBottom = flatten?.marginBottom || flatten?.marginVertical || _marginBottom || marginVertical;
+  const height = _height || flatten?.height || 1;
+  return <View style={[style, { height, backgroundColor, marginTop, marginBottom }]} />;
+};
+
+export { LineDivider };

package/src/component/LoadingFallbackView.tsx

@@ -0,0 +1,15 @@
+import { palette } from '@teamturing/react-native-kit';
+import { View } from 'react-native';
+
+type Props = {
+  height: number;
+};
+
+const LoadingFallbackView = ({ height }: Props) => {
+  if (height === 0) {
+    return null;
+  }
+  return <View style={{ backgroundColor: palette.transparent, minHeight: height }} />;
+};
+
+export { LoadingFallbackView };

package/src/component/LoadingIndicator.tsx

@@ -0,0 +1,26 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { palette, is } from '@teamturing/react-native-kit';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { ActivityIndicator } from 'react-native';
+
+export type MathKingIndicatorProps = {
+  testID?: string;
+  size?: number;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+} & SxProps;
+const LoadingIndicator = (props: MathKingIndicatorProps) => {
+  const { getStyle, filteredProps } = useSx(props);
+  const { testID, size, color = palette.gray400 } = filteredProps;
+  return (
+    <ActivityIndicator
+      {...{ testID, color }}
+      style={getStyle()}
+      size={is.number(size) && size > 24 ? 'large' : 'small'}
+      pointerEvents={'none'}
+    />
+  );
+};
+
+export { LoadingIndicator };

package/src/component/LoadingIndicatorView.tsx

@@ -0,0 +1,22 @@
+import { palette, applyOpacity, Box } from '@teamturing/react-native-kit';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+
+import { LoadingIndicator } from './LoadingIndicator';
+
+export const LoadingIndicatorView = ({ isLoading, children, ...rest }: { isLoading: boolean } & ViewProps) => {
+  return (
+    <View {...rest}>
+      {children}
+      {isLoading ? (
+        <Box
+          absoluteFill
+          style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: applyOpacity(palette.white, 30) }}
+          pointerEvents={isLoading ? 'auto' : 'none'}
+        >
+          <LoadingIndicator />
+        </Box>
+      ) : null}
+    </View>
+  );
+};

package/src/component/Lottie/index.tsx

@@ -0,0 +1,59 @@
+import { is } from '@teamturing/react-native-kit';
+import type { LottieViewProps as BaseLottieProps } from 'lottie-react-native';
+import BaseLottie from 'lottie-react-native';
+import { useState, useEffect, forwardRef, type ForwardedRef, type MutableRefObject } from 'react';
+import { AppState, Platform, StyleSheet } from 'react-native';
+
+import { Box } from '../Box';
+
+type Props = {
+  delay?: number;
+  dontRestartStateChangedToActive?: boolean;
+} & BaseLottieProps;
+
+const Lottie = forwardRef(
+  (
+    { delay = 0, autoPlay = true, dontRestartStateChangedToActive = false, style, ...props }: Props,
+    ref: ForwardedRef<BaseLottie>,
+  ) => {
+    const [isDelaying, setDelaying] = useState(true);
+    useEffect(() => {
+      if (delay > 0) {
+        setDelaying(true);
+        const t = setTimeout(() => setDelaying(false), delay);
+        return () => clearTimeout(t);
+      }
+    }, [delay]);
+    useEffect(() => {
+      if (autoPlay) {
+        const subscription = AppState.addEventListener('change', (state) => {
+          if (
+            state === 'active' &&
+            !dontRestartStateChangedToActive &&
+            is.object(ref) &&
+            (ref as MutableRefObject<BaseLottie>).current
+          ) {
+            (ref as MutableRefObject<BaseLottie>).current?.play();
+          }
+        });
+        return subscription.remove;
+      }
+    }, [autoPlay, dontRestartStateChangedToActive, ref]);
+    if (delay > 0 && isDelaying) {
+      return null;
+    }
+    if (!props.source) {
+      return null;
+    }
+
+    return Platform.OS === 'web' ? (
+      <Box style={style}>
+        <BaseLottie ref={ref} style={StyleSheet.absoluteFillObject} {...props} autoPlay={autoPlay} />
+      </Box>
+    ) : (
+      <BaseLottie ref={ref} style={style} {...props} autoPlay={autoPlay} />
+    );
+  },
+);
+
+export { Lottie };

package/src/component/MarqueeView.tsx

@@ -0,0 +1,105 @@
+import { is, Txt } from '@teamturing/react-native-kit';
+import React, { useEffect, useRef, useState } from 'react';
+import type { LayoutRectangle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { Animated, Easing, ScrollView } from 'react-native';
+
+export type MarqueeViewProps = {
+  textStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  duration?: number;
+  reverse?: boolean;
+};
+
+const MarqueeView = ({
+  children,
+  style,
+  contentContainerStyle,
+  textStyle,
+  duration,
+  reverse = false,
+}: React.PropsWithChildren<MarqueeViewProps>) => {
+  // region ANIM
+  const [viewRect, setViewRect] = useState<LayoutRectangle>();
+  const [contentRect, setContentRect] = useState<LayoutRectangle>();
+  const [widthDiff, setWidthDiff] = useState(0);
+
+  const animValue = useRef(new Animated.Value(0)).current;
+  const translateX = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -widthDiff - 12],
+  });
+
+  useEffect(() => {
+    if (!viewRect || !contentRect) {
+      return;
+    }
+
+    const viewWidth = viewRect.width;
+    const textWidth = contentRect.width;
+
+    animValue.setValue(0);
+    setWidthDiff(0);
+
+    if (textWidth > viewWidth) {
+      const diff = textWidth - viewWidth;
+      setWidthDiff(diff);
+
+      const loop = Animated.loop(
+        Animated.sequence([
+          Animated.timing(animValue, {
+            useNativeDriver: true,
+            easing: Easing.linear,
+            toValue: 1,
+            duration: is.number(duration) ? duration : (viewWidth + diff) * 30,
+          }),
+          Animated.delay(1000),
+          reverse
+            ? Animated.timing(animValue, {
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0,
+                duration: is.number(duration) ? duration : (viewWidth + diff) * 30,
+              })
+            : Animated.timing(animValue, {
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0,
+                duration: 0,
+              }),
+          Animated.delay(1000),
+        ]),
+      );
+
+      loop.start();
+
+      return () => {
+        loop.stop();
+      };
+    }
+  }, [viewRect, contentRect, animValue, duration, reverse]);
+  // endregion
+
+  return (
+    <ScrollView
+      testID={'MarqueeText 스크롤뷰'}
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      horizontal={true}
+      contentContainerStyle={contentContainerStyle}
+      style={[style, { flexGrow: 0 }]}
+      onLayout={(e) => setViewRect(e.nativeEvent.layout)}
+    >
+      <Animated.View style={[{ transform: [{ translateX }] }]} onLayout={(e) => setContentRect(e.nativeEvent.layout)}>
+        {is.string(children)
+          ? Txt.XS.Gray900.render(children, { numberOfLines: 1, style: textStyle })
+          : React.isValidElement(children)
+          ? children
+          : null}
+      </Animated.View>
+    </ScrollView>
+  );
+};
+
+export { MarqueeView };

package/src/component/NumberBadge.tsx

@@ -0,0 +1,60 @@
+import { type PaletteColor, is, palette, spacing, Txt } from '@teamturing/react-native-kit';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+type Props = {
+  count?: number;
+  maxCount?: number;
+  style?: StyleProp<ViewStyle>;
+  text?: string;
+  borderWidth?: number;
+  borderColor?: PaletteColor;
+  backgroundColor?: PaletteColor;
+  textColor?: PaletteColor;
+};
+const NumberBadge = ({
+  count = 0,
+  maxCount = 99,
+  style,
+  text: textProp,
+  borderWidth = 2,
+  borderColor = 'white',
+  backgroundColor = 'red500',
+  textColor = 'white',
+}: Props) => {
+  if (count === 0 && !is.notEmptyString(textProp)) {
+    return null;
+  }
+  const text = is.notEmptyString(textProp) ? textProp : count <= maxCount ? count + '' : `${maxCount}+`;
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: palette[borderColor],
+          padding: borderWidth,
+          borderRadius: 999,
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        style,
+      ]}
+      pointerEvents={'none'}
+    >
+      <View
+        style={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: palette[backgroundColor],
+          borderRadius: 999,
+          paddingHorizontal: spacing[1],
+          minWidth: 19,
+          minHeight: 19,
+        }}
+      >
+        {Txt.XXS.Medium.Color(palette[textColor]).render(text)}
+      </View>
+    </View>
+  );
+};
+
+export { NumberBadge };

package/src/component/OnMountEvent.tsx

@@ -0,0 +1,10 @@
+import { useMount } from '@teamturing/react-native-kit';
+import type { EffectCallback, ReactElement } from 'react';
+
+type Props = { onMount: EffectCallback; children?: ReactElement | null };
+const OnMountEvent = ({ onMount, children = null }: Props) => {
+  useMount(onMount);
+  return children;
+};
+
+export { OnMountEvent };

package/src/component/PaginatedFlashList.tsx

@@ -0,0 +1,221 @@
+import { type FlashListProps, FlashList } from '@shopify/flash-list';
+import { useStableCallback, is, useScrollViewOnEndReachedConfig } from '@teamturing/react-native-kit';
+import { useImperativeHandle, useRef, useState, forwardRef } from 'react';
+import type { FlatListProps, ScrollViewProps } from 'react-native';
+import { View } from 'react-native';
+
+import { LoadingIndicator } from './LoadingIndicator';
+
+export type PaginatedFlashListProps<T> = Omit<FlashListProps<T>, 'maintainVisibleContentPosition'> & {
+  /**
+   * Called once when the scroll position gets close to end of list. This must return a promise.
+   * You can `onEndReachedThreshold` as distance from end of list, when this function should be called.
+   */
+  onEndReached: () => Promise<any>;
+  /**
+   * Called once when the scroll position gets close to begining of list. This must return a promise.
+   * You can `onStartReachedThreshold` as distance from beginning of list, when this function should be called.
+   */
+  onStartReached?: () => Promise<any>;
+  /**
+   * Enable autoScrollToTop.
+   * In chat type applications, you want to auto scroll to bottom, when new message comes it.
+   */
+  enableAutoscrollToTop?: boolean;
+  /**
+   * If `enableAutoscrollToTop` is true, the scroll threshold below which auto scrolling should occur.
+   */
+  autoscrollToTopThreshold?: number;
+  /** Custom UI component for header indicator of FlatList. Only used when `showDefaultLoadingIndicators` is false */
+  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];
+  /** Custom UI component for footer indicator of FlatList. Only used when `showDefaultLoadingIndicators` is false */
+  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];
+  showFooterIndicator?: boolean;
+  showHeaderIndicator?: boolean;
+};
+
+export type PaginatedFlashListRef = {
+  scrollToTop: (arg?: { animated: boolean }) => void;
+  scrollToOffset: (param: Parameters<FlashList<any>['scrollToOffset']>[0]) => void;
+  scrollToIndex: (params: Parameters<FlashList<any>['scrollToIndex']>[0]) => void;
+  scrollToItem: (...params: Parameters<FlashList<any>['scrollToItem']>) => void;
+  resetTracker: () => void;
+};
+
+/**
+ * Note:
+ * - `onEndReached` and `onStartReached` must return a promise.
+ * - `onEndReached` and `onStartReached` only get called once, per content length.
+ * - maintainVisibleContentPosition is fixed, and can't be modified through props.
+ * - doesn't accept `ListFooterComponent` via prop, since it is occupied by `FooterLoadingIndicator`.
+ *    Set `showDefaultLoadingIndicators` to use `ListFooterComponent`.
+ * - doesn't accept `ListHeaderComponent` via prop, since it is occupied by `HeaderLoadingIndicator`
+ *    Set `showDefaultLoadingIndicators` to use `ListHeaderComponent`.
+ */
+// eslint-disable-next-line react/display-name
+export const PaginatedFlashList = forwardRef<PaginatedFlashListRef, PaginatedFlashListProps<any>>((props, ref) => {
+  const {
+    data,
+    ListHeaderComponent,
+    ListFooterComponent,
+    onEndReached = () => Promise.resolve(),
+    onScroll,
+    onStartReached = () => Promise.resolve(),
+    showFooterIndicator,
+    showHeaderIndicator,
+  } = props;
+  const listRef = useRef<FlashList<any>>(null);
+
+  const [onStartReachedInProgress, setOnStartReachedInProgress] = useState(false);
+  const [onEndReachedInProgress, setOnEndReachedInProgress] = useState(false);
+
+  const onStartReachedTracker = useRef<Record<number, boolean>>({});
+  const onEndReachedTracker = useRef<Record<number, boolean>>({});
+
+  const onStartReachedInPromise = useRef<Promise<void> | null>(null);
+  const onEndReachedInPromise = useRef<Promise<void> | null>(null);
+
+  const maybeCallOnStartReached = () => {
+    // If onStartReached has already been called for given data length, then ignore.
+    if (data?.length && onStartReachedTracker.current[data.length]) {
+      return;
+    }
+
+    const setIsStarted = () => {
+      if (data?.length) {
+        onStartReachedTracker.current[data.length] = true;
+      }
+      setOnStartReachedInProgress(true);
+    };
+
+    const p = () => {
+      return new Promise<void>((resolve) => {
+        onStartReachedInPromise.current = null;
+        setOnStartReachedInProgress(false);
+        resolve();
+      });
+    };
+
+    if (onEndReachedInPromise.current) {
+      onEndReachedInPromise.current.finally(() => {
+        setIsStarted();
+        onStartReachedInPromise.current = onStartReached().then(p);
+      });
+    } else if (!onStartReachedInPromise.current) {
+      setIsStarted();
+      onStartReachedInPromise.current = onStartReached().then(p);
+    }
+  };
+
+  const maybeCallOnEndReached = () => {
+    // If onEndReached has already been called for given data length, then ignore.
+    if (data?.length && onEndReachedTracker.current[data.length]) {
+      return;
+    }
+
+    const setIsStarted = () => {
+      if (data?.length) {
+        onEndReachedTracker.current[data.length] = true;
+      }
+      setOnEndReachedInProgress(true);
+    };
+
+    const p = () => {
+      return new Promise<void>((resolve) => {
+        onEndReachedInPromise.current = null;
+        setOnEndReachedInProgress(false);
+        resolve();
+      });
+    };
+
+    if (onStartReachedInPromise.current) {
+      onStartReachedInPromise.current.finally(() => {
+        setIsStarted();
+        onEndReachedInPromise.current = (onEndReached() as unknown as Promise<void>).then(p);
+      });
+    } else if (!onEndReachedInPromise.current) {
+      setIsStarted();
+      onEndReachedInPromise.current = (onEndReached() as unknown as Promise<void>).then(p);
+    }
+  };
+  const isFirstScrollEvent = useRef(true);
+  const handleScroll: ScrollViewProps['onScroll'] = useStableCallback((event) => {
+    if (isFirstScrollEvent.current) {
+      // adjust initial scroll offset in MVCP mode
+      isFirstScrollEvent.current = false;
+      return;
+    }
+    // Call the parent onScroll handler, if provided.
+    onScroll?.(event);
+
+    const offset = event.nativeEvent.contentOffset.y;
+
+    // Check if scroll has reached either start of end of list.
+    const isScrollAtStart = offset < 30;
+
+    if (isScrollAtStart) {
+      maybeCallOnStartReached();
+    }
+  });
+
+  const renderHeaderLoadingIndicator = useStableCallback(() => {
+    return (
+      <View>
+        <>
+          {ListHeaderComponent ? ListHeaderComponent : null}
+          {!onStartReachedInProgress || (is.boolean(showHeaderIndicator) && !showHeaderIndicator) ? null : (
+            <LoadingIndicator style={{ height: 50 }} />
+          )}
+        </>
+      </View>
+    );
+  });
+
+  const renderFooterLoadingIndicator = useStableCallback(() => {
+    return (
+      <View>
+        <>
+          {!onEndReachedInProgress || (is.boolean(showFooterIndicator) && !showFooterIndicator) ? null : (
+            <LoadingIndicator style={{ height: 40 }} />
+          )}
+          {ListFooterComponent ? ListFooterComponent : null}
+        </>
+      </View>
+    );
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToTop: (arg?: { animated: boolean }) => {
+        listRef.current?.scrollToOffset({ animated: arg?.animated || false, offset: 0 });
+      },
+      scrollToOffset: (params) => {
+        listRef.current?.scrollToOffset(params);
+      },
+      resetTracker: () => {
+        onStartReachedTracker.current = {};
+        onEndReachedTracker.current = {};
+      },
+      scrollToIndex: (params) => listRef.current?.scrollToIndex(params),
+      scrollToItem: (...params) => listRef.current?.scrollToItem(...params),
+    }),
+    [],
+  );
+
+  const OnEndReached = useScrollViewOnEndReachedConfig({
+    disabled: onEndReachedInProgress,
+    onEndReached: maybeCallOnEndReached,
+  });
+
+  return (
+    <FlashList
+      {...props}
+      ref={listRef as any}
+      ListHeaderComponent={renderHeaderLoadingIndicator}
+      ListFooterComponent={renderFooterLoadingIndicator}
+      onScroll={handleScroll}
+      {...OnEndReached}
+    />
+  );
+});