@teamturing/react-native-kit 0.1.0 → 1.2.0

package/src/component/PaginatedFlatList.tsx

@@ -0,0 +1,223 @@
+import { useStableCallback, is, useScrollViewOnEndReachedConfig } from '@teamturing/react-native-kit';
+import React, { useImperativeHandle, useRef, useState } from 'react';
+import type { FlatListProps, ScrollViewProps } from 'react-native';
+import { FlatList as FlatList, View } from 'react-native';
+
+import { LoadingIndicator } from './LoadingIndicator';
+
+export type PaginatedFlatListProps<T> = Omit<FlatListProps<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'];
+  useMVCP?: boolean;
+  showFooterIndicator?: boolean;
+  showHeaderIndicator?: boolean;
+};
+
+export type PaginatedFlatListRef = {
+  scrollToTop: (arg?: { animated: boolean }) => void;
+  scrollToOffset: (param: { offset: number; animated?: boolean }) => void;
+  scrollToIndex: (params: {
+    animated?: boolean | null | undefined;
+    index: number;
+    viewOffset?: number | undefined;
+    viewPosition?: number | undefined;
+  }) => 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`.
+ */
+export const PaginatedFlatList = React.forwardRef<PaginatedFlatListRef, PaginatedFlatListProps<any>>((props, ref) => {
+  const {
+    data,
+    ListHeaderComponent,
+    ListFooterComponent,
+    onEndReached = () => Promise.resolve(),
+    onScroll,
+    onStartReached = () => Promise.resolve(),
+    showFooterIndicator,
+    showHeaderIndicator,
+  } = props;
+  const flatListRef = useRef<FlatList<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().then(p);
+      });
+    } else if (!onEndReachedInPromise.current) {
+      setIsStarted();
+      onEndReachedInPromise.current = onEndReached().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 }) => {
+        flatListRef.current?.scrollToOffset({ animated: arg?.animated || false, offset: 0 });
+      },
+      scrollToOffset: ({ offset, animated = false }: { offset: number; animated?: boolean }) => {
+        flatListRef.current?.scrollToOffset({ animated, offset });
+      },
+      resetTracker: () => {
+        onStartReachedTracker.current = {};
+        onEndReachedTracker.current = {};
+      },
+      scrollToIndex: (params) => flatListRef.current?.scrollToIndex(params),
+    }),
+    [],
+  );
+
+  const OnEndReached = useScrollViewOnEndReachedConfig({
+    disabled: onEndReachedInProgress,
+    onEndReached: maybeCallOnEndReached,
+  });
+
+  return (
+    <FlatList
+      {...props}
+      ref={flatListRef as any}
+      ListHeaderComponent={renderHeaderLoadingIndicator}
+      ListFooterComponent={renderFooterLoadingIndicator}
+      onScroll={handleScroll}
+      {...OnEndReached}
+    />
+  );
+});

package/src/component/Paginator.tsx

@@ -0,0 +1,48 @@
+import { generateArray } from '@mj-studio/js-util';
+import type { SxProps } from '@react-native-styled-system/core';
+
+import { type PaletteColor, spacing } from '../theme';
+
+import { OpacityAnimatedView } from './Animation';
+import { Dot } from './Dot';
+import { RowCenter } from './Layout';
+
+type Props = {
+  dotSize?: number;
+  dotColor?: PaletteColor;
+  dotBorderColor?: PaletteColor;
+  dotBorderWidth?: number;
+
+  inactiveOpacity?: number;
+
+  maxValue: number;
+  value: number;
+} & SxProps;
+const Paginator = ({
+  dotBorderColor = 'transparent',
+  dotBorderWidth = 0,
+  dotColor = 'white',
+  dotSize = 10,
+  // style,
+  maxValue,
+  value,
+  inactiveOpacity = 0.5,
+  ...sxProps
+}: Props) => {
+  return (
+    <RowCenter justifyContent={'center'} {...sxProps} pointerEvents={'none'}>
+      {generateArray(maxValue).map((i) => (
+        <OpacityAnimatedView
+          key={i}
+          opacity={i === value ? 1 : inactiveOpacity}
+          style={{ marginLeft: spacing[i ? 2 : 0] }}
+        >
+          <Dot size={dotSize} color={dotColor} borderColor={dotBorderColor} borderWidth={dotBorderWidth} />
+        </OpacityAnimatedView>
+      ))}
+    </RowCenter>
+  );
+};
+
+export type { Props as PaginatorProps };
+export { Paginator };

package/src/component/PartialRerender.tsx

@@ -0,0 +1,24 @@
+import type { ReactElement } from 'react';
+import type React from 'react';
+import { forwardRef, useState, useImperativeHandle } from 'react';
+
+type PartialRerenderProps = {
+  renderChildren: () => ReactElement | null;
+};
+export type PartialRerenderRef = {
+  rerender: () => void;
+};
+/**
+ * 단순히 children tree를 replace시킵니다. 렌더링 성능이 필요하거나 애니메이션이 필요한 컴포넌트들은
+ * children으로 오면 안됩니다. * 개선할 수 있다면 개선이 필요합니다.
+ */
+const PartialRerender = forwardRef(
+  ({ renderChildren }: PartialRerenderProps, ref: React.ForwardedRef<PartialRerenderRef>) => {
+    const [, setR] = useState(0);
+    useImperativeHandle(ref, () => ({ rerender: () => setR((r) => r + 1) }), []);
+    return renderChildren();
+  },
+);
+
+export { PartialRerender };
+export type { PartialRerenderProps };

package/src/component/PieChart.tsx

@@ -0,0 +1,67 @@
+import { palette, is } from '@teamturing/react-native-kit';
+import { Circle, G, Svg } from 'react-native-svg';
+
+type Props<T> = {
+  size: number;
+  innerSize: number;
+  data?: T[];
+  getValue: (datum: T) => number;
+  getColor: (datum: T) => string;
+  withoutSort?: boolean;
+  rotationOffset?: number;
+};
+
+const PieChart = <T,>({
+  size,
+  innerSize,
+  data: propData = [],
+  getValue,
+  getColor,
+  withoutSort = false,
+  rotationOffset = 0,
+}: Props<T>) => {
+  const strokeWidth = (size - innerSize) / 2;
+  const radius = innerSize / 2 + strokeWidth / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const totalValue = propData.reduce((acc, cur) => acc + getValue(cur), 0);
+  const data = withoutSort ? propData : [...propData].sort((a, b) => getValue(b) - getValue(a));
+
+  return (
+    <Svg width={size} height={size}>
+      <G origin={[size / 2, size / 2]} rotation={-90}>
+        {is.emptyArray(data) || totalValue === 0 ? (
+          <Circle
+            fill={'none'}
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={palette.gray200}
+            strokeWidth={strokeWidth}
+          />
+        ) : (
+          data.map((datum, i) => (
+            <Circle
+              fill={'none'}
+              key={i}
+              origin={[size / 2, size / 2]}
+              rotation={
+                (i !== 0 ? 360 * (data.slice(0, i).reduce((acc, cur) => acc + getValue(cur), 0) / totalValue) : 0) +
+                rotationOffset
+              }
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              stroke={getColor(datum)}
+              strokeWidth={strokeWidth}
+              strokeDasharray={circumference}
+              strokeDashoffset={circumference * (1 - getValue(datum) / totalValue)}
+            />
+          ))
+        )}
+      </G>
+    </Svg>
+  );
+};
+
+export { PieChart };

package/src/component/Portal/Portal.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { PortalConsumer } from './PortalConsumer';
+import { type PortalMethods, PortalHost, PortalContext } from './PortalHost';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+class Portal extends React.Component<Props> {
+  static Host = PortalHost;
+
+  override render() {
+    const { children } = this.props;
+
+    return (
+      <PortalContext.Consumer>
+        {(manager) => <PortalConsumer manager={manager as PortalMethods}>{children}</PortalConsumer>}
+      </PortalContext.Consumer>
+    );
+  }
+}
+
+export { Portal };

package/src/component/Portal/PortalConsumer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import type { PortalMethods } from './PortalHost';
+
+type Props = {
+  manager: PortalMethods;
+  children: React.ReactNode;
+};
+
+export class PortalConsumer extends React.Component<Props> {
+  override async componentDidMount() {
+    this.checkManager();
+
+    await Promise.resolve();
+
+    this.key = this.props.manager.mount(this.props.children);
+  }
+
+  override componentDidUpdate() {
+    this.checkManager();
+
+    this.props.manager.update(this.key, this.props.children);
+  }
+
+  override componentWillUnmount() {
+    this.checkManager();
+
+    this.props.manager.unmount(this.key);
+  }
+
+  private key: any;
+
+  private checkManager() {
+    if (!this.props.manager) {
+      throw new Error('enablePortal을 사용하는 Component를 감싸고 있는 PortalHost가 존재하지 않습니다.');
+    }
+  }
+
+  override render() {
+    return null;
+  }
+}

package/src/component/Portal/PortalHost.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { PortalManager } from './PortalManager';
+
+type Props = {
+  children: React.ReactNode;
+  testID?: string;
+};
+
+type Operation =
+  | { type: 'mount'; key: number; children: React.ReactNode }
+  | { type: 'update'; key: number; children: React.ReactNode }
+  | { type: 'unmount'; key: number };
+
+export type PortalMethods = {
+  mount: (children: React.ReactNode) => number;
+  update: (key: number, children: React.ReactNode) => void;
+  unmount: (key: number) => void;
+};
+
+export const PortalContext = React.createContext<PortalMethods>(null as any);
+
+export class PortalHost extends React.Component<Props> {
+  static displayName = 'Portal.Host';
+
+  override componentDidMount() {
+    const manager = this.manager;
+    const queue = this.queue;
+
+    while (queue.length && manager) {
+      const action = queue.pop();
+      if (action) {
+        // eslint-disable-next-line default-case
+        switch (action.type) {
+          case 'mount':
+            manager.mount(action.key, action.children);
+            break;
+          case 'update':
+            manager.update(action.key, action.children);
+            break;
+          case 'unmount':
+            manager.unmount(action.key);
+            break;
+        }
+      }
+    }
+  }
+
+  private setManager = (manager: PortalManager | undefined | null) => {
+    this.manager = manager;
+  };
+
+  private mount = (children: React.ReactNode) => {
+    const key = this.nextKey++;
+
+    if (this.manager) {
+      this.manager.mount(key, children);
+    } else {
+      this.queue.push({ type: 'mount', key, children });
+    }
+
+    return key;
+  };
+
+  private update = (key: number, children: React.ReactNode) => {
+    if (this.manager) {
+      this.manager.update(key, children);
+    } else {
+      const op: Operation = { type: 'mount', key, children };
+      const index = this.queue.findIndex((o) => o.type === 'mount' || (o.type === 'update' && o.key === key));
+
+      if (index > -1) {
+        this.queue[index] = op;
+      } else {
+        this.queue.push(op as Operation);
+      }
+    }
+  };
+
+  private unmount = (key: number) => {
+    if (this.manager) {
+      this.manager.unmount(key);
+    } else {
+      this.queue.push({ type: 'unmount', key });
+    }
+  };
+
+  private nextKey = 0;
+  private queue: Operation[] = [];
+  private manager: PortalManager | null | undefined;
+
+  override render() {
+    return (
+      <PortalContext.Provider
+        value={{
+          mount: this.mount,
+          update: this.update,
+          unmount: this.unmount,
+        }}
+      >
+        {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+        <View testID={this.props.testID} style={styles.container} collapsable={false} pointerEvents={'box-none'}>
+          {this.props.children}
+        </View>
+        <PortalManager ref={this.setManager} />
+      </PortalContext.Provider>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/component/Portal/PortalManager.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+type State = {
+  portals: {
+    key: number;
+    children: React.ReactNode;
+  }[];
+};
+
+export class PortalManager extends React.PureComponent<{}, State> {
+  override state: State = {
+    portals: [],
+  };
+
+  mount = (key: number, children: React.ReactNode) => {
+    this.setState((state) => ({
+      portals: [...state.portals, { key, children }],
+    }));
+  };
+
+  update = (key: number, children: React.ReactNode) =>
+    this.setState((state) => ({
+      portals: state.portals.map((item) => {
+        if (item.key === key) {
+          return { ...item, children };
+        }
+        return item;
+      }),
+    }));
+
+  unmount = (key: number) =>
+    this.setState((state) => ({
+      portals: state.portals.filter((item) => item.key !== key),
+    }));
+
+  override render() {
+    return this.state.portals.map(({ key, children }) => (
+      <View
+        key={key}
+        collapsable={
+          false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
+        }
+        pointerEvents={'box-none'}
+        style={StyleSheet.absoluteFill}
+      >
+        {children}
+      </View>
+    ));
+  }
+}

package/src/component/Portal/index.ts

@@ -0,0 +1,4 @@
+export * from './Portal';
+export * from './PortalConsumer';
+export * from './PortalHost';
+export * from './PortalManager';

package/src/component/Pressable/LoadingIndicatorTouchable.tsx

@@ -0,0 +1,16 @@
+import { LoadingIndicator } from '@teamturing/react-native-kit';
+import { StyleSheet } from 'react-native';
+
+import { type TouchProps, Touch } from './Touch';
+
+type Props = { isLoading: boolean } & TouchProps;
+const LoadingIndicatorTouchable = ({ isLoading, disabled, children, style, ...rest }: Props) => {
+  return (
+    <Touch disabled={disabled || isLoading} style={[style, { opacity: isLoading ? 0.5 : 1 }]} {...rest}>
+      {children}
+      {isLoading ? <LoadingIndicator style={StyleSheet.absoluteFill} /> : null}
+    </Touch>
+  );
+};
+
+export { LoadingIndicatorTouchable };

package/src/component/Pressable/PressableDelayed.tsx

@@ -0,0 +1,34 @@
+import type { PressableProps } from 'react-native';
+import { Pressable } from 'react-native';
+
+import is from '../../util/is';
+
+import { useDisabilityAwareDebouncer } from './useDisabilityAwareDebouncer';
+
+type Props = {
+  delayAfterEvent?: number;
+  delayAfterEnabled?: number;
+} & PressableProps;
+const PressableDelayed = ({ onPress, disabled, delayAfterEnabled, delayAfterEvent, ...rest }: Props) => {
+  const { shouldBeHandled } = useDisabilityAwareDebouncer({
+    disabled: disabled || false,
+    delayAfterEnabled,
+    delayAfterEvent,
+  });
+  return (
+    <Pressable
+      {...rest}
+      disabled={disabled}
+      onPress={
+        is.function(onPress)
+          ? (e) => {
+              shouldBeHandled() && onPress?.(e);
+            }
+          : undefined
+      }
+      accessibilityRole={'button'}
+    />
+  );
+};
+
+export { PressableDelayed };

package/src/component/Pressable/Touch.tsx

@@ -0,0 +1,39 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { spacing, is } from '@teamturing/react-native-kit';
+import type { PropsWithChildren, Ref } from 'react';
+import { forwardRef } from 'react';
+import type { TouchableOpacityProps } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+
+import { type UseDisabilityAwareDebouncerParams, useDisabilityAwareDebouncer } from './useDisabilityAwareDebouncer';
+
+type Props = {} & TouchableOpacityProps & UseDisabilityAwareDebouncerParams & SxProps;
+const Touch = forwardRef((props: PropsWithChildren<Props>, ref: Ref<TouchableOpacity>) => {
+  const { filteredProps, getStyle } = useSx(props);
+  const { onPress, disabled, delayAfterEnabled, delayAfterEvent, ...rest } = filteredProps;
+  const { shouldBeHandled } = useDisabilityAwareDebouncer({
+    disabled: disabled || false,
+    delayAfterEnabled,
+    delayAfterEvent,
+  });
+  return (
+    <TouchableOpacity
+      ref={ref}
+      hitSlop={{ bottom: spacing[1], left: spacing[1], right: spacing[1], top: spacing[1] }}
+      {...rest}
+      style={getStyle()}
+      disabled={disabled}
+      onPress={
+        is.function(onPress)
+          ? (e) => {
+              shouldBeHandled() && onPress?.(e);
+            }
+          : undefined
+      }
+    />
+  );
+});
+
+export type { Props as TouchProps };
+export { Touch };