@teamturing/react-native-kit 0.1.0 → 1.2.0

package/src/component/Pressable/index.ts

@@ -0,0 +1,3 @@
+export * from './LoadingIndicatorTouchable';
+export * from './PressableDelayed';
+export * from './Touch';

package/src/component/Pressable/useDisabilityAwareDebouncer.ts

@@ -0,0 +1,75 @@
+import { is, isTestEnvironment, isNewArch } from '@teamturing/react-native-kit';
+import { useCallback, useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+
+const DELAY_AFTER_EVENT = 500; /* 0.5sec */
+const DELAY_AFTER_ENABLED = 800; /* 0.8sec */
+
+export interface UseDisabilityAwareDebouncerParams {
+  disabled?: boolean;
+  // default is 500
+  delayAfterEvent?: number;
+  // default is 800
+  delayAfterEnabled?: number;
+}
+
+export interface UseDisabilityAwareDebouncer {
+  /**
+   * Call this function only when onPress is called.
+   * This function will update lastPressTime.
+   */
+  shouldBeHandled(): boolean;
+}
+
+const useDisabilityAwareDebouncer: (param?: UseDisabilityAwareDebouncerParams) => UseDisabilityAwareDebouncer =
+  isNewArch()
+    ? (_: UseDisabilityAwareDebouncerParams = { disabled: false }) => ({ shouldBeHandled: () => true })
+    : (param: UseDisabilityAwareDebouncerParams = { disabled: false }) => {
+        const delayAfterEvent = is.number(param.delayAfterEvent) ? param.delayAfterEvent : DELAY_AFTER_EVENT;
+        const delayAfterEnabled = is.number(param.delayAfterEnabled) ? param.delayAfterEnabled : DELAY_AFTER_ENABLED;
+        const isDisabled = param.disabled || false;
+
+        const lastEventTime = useRef(0);
+        const latestEnableTime = useRef(0);
+
+        const isFirstRun = useRef(true);
+        useEffect(() => {
+          if (isFirstRun.current) {
+            isFirstRun.current = false;
+            return;
+          }
+
+          if (!isDisabled) {
+            // Record latest enable time
+            latestEnableTime.current = Date.now();
+          }
+        }, [isDisabled]);
+
+        const shouldBeHandled = useCallback(() => {
+          if (Platform.OS === 'web') {
+            return true;
+          }
+          const now = Date.now();
+
+          const isEventDelayElapsed = now > lastEventTime.current + delayAfterEvent;
+          const isLatestEnabledDelayElapsed = now > latestEnableTime.current + delayAfterEnabled;
+
+          const isElapsed =
+            isTestEnvironment() || // in test env, Allow always
+            (isEventDelayElapsed && isLatestEnabledDelayElapsed);
+
+          if (isElapsed) {
+            lastEventTime.current = now;
+
+            return true;
+          }
+
+          return false;
+        }, [delayAfterEvent, delayAfterEnabled]);
+
+        return {
+          shouldBeHandled,
+        };
+      };
+
+export { useDisabilityAwareDebouncer };

package/src/component/Progress/CircularProgressIndicator.tsx

@@ -0,0 +1,126 @@
+import React, { useRef, useEffect } from 'react';
+import { type StyleProp, type ViewStyle, type ColorValue, Animated, Easing, View, StyleSheet } from 'react-native';
+import { Svg, G, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+import type { Linecap } from 'react-native-svg/src/lib/extract/types';
+
+import { palette, gradient } from '../../theme';
+import { is } from '../../util';
+
+type Props = {
+  size: number;
+  childSize: number;
+  childComponent?: React.ReactElement;
+  value: number;
+  maxValue?: number;
+  isAnimated?: boolean;
+  delay?: number;
+  style?: StyleProp<ViewStyle>;
+  disableSpacing?: boolean;
+  lineCap?: Linecap;
+  progressColor?: ColorValue;
+  barColor?: ColorValue;
+  backgroundColor?: ColorValue;
+  useGradient4ForProgressColor?: boolean;
+  animatedInitialValue?: number;
+};
+
+const CircularProgressIndicator = ({
+  size,
+  childComponent,
+  childSize,
+  value: propValue,
+  maxValue = 100,
+  isAnimated = true,
+  delay = 0,
+  style,
+  disableSpacing = false,
+  lineCap,
+  progressColor = palette.violet500,
+  barColor = palette.gray200,
+  backgroundColor,
+  useGradient4ForProgressColor = false,
+  animatedInitialValue = 0,
+}: Props) => {
+  const spacingWidth = disableSpacing ? 0 : (size - childSize) / 2 / 3;
+  const strokeWidth = (size - childSize - spacingWidth * 2) / 2;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const value = Math.min(propValue, maxValue);
+
+  const initialValueCircumference = circumference * (1 - animatedInitialValue / maxValue);
+
+  const valueCircumference = circumference * (1 - value / maxValue);
+  const valueCircleCommonProps = {
+    cx: size / 2,
+    cy: size / 2,
+    r: radius,
+    stroke: progressColor,
+    strokeWidth: strokeWidth,
+    strokeDasharray: circumference,
+    fill: 'none',
+  };
+
+  const strokeDashoffsetValue = useRef(new Animated.Value(initialValueCircumference)).current;
+  useEffect(() => {
+    const animation = Animated.timing(strokeDashoffsetValue, {
+      useNativeDriver: true,
+      toValue: valueCircumference,
+      easing: Easing.out(Easing.circle),
+      duration: 700,
+      delay: delay,
+    });
+    animation.start();
+
+    return animation.stop;
+  }, [circumference, delay, strokeDashoffsetValue, valueCircumference]);
+
+  return (
+    <View style={[style, { width: size, height: size }]}>
+      <Svg width={size} height={size} {...(is.android() ? { renderToHardwareTextureAndroid: true } : {})}>
+        <Defs>
+          <LinearGradient id={'gradient4'} x1={1} y1={0} x2={0} y2={1}>
+            {gradient.gradient4.colors.map((c, i) => (
+              <Stop stopColor={c} offset={i} key={i} />
+            ))}
+          </LinearGradient>
+        </Defs>
+        <G origin={[size / 2, size / 2]} rotation={-90}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={(size - strokeWidth) / 2}
+            stroke={barColor}
+            strokeWidth={strokeWidth}
+            fill={'none'}
+          />
+          {backgroundColor ? <Circle cx={size / 2} cy={size / 2} r={childSize / 2} fill={backgroundColor} /> : null}
+          {value === 0 ? null : isAnimated ? (
+            <AnimatedCircle
+              {...valueCircleCommonProps}
+              stroke={useGradient4ForProgressColor ? 'url(#gradient4)' : valueCircleCommonProps.stroke}
+              strokeDashoffset={strokeDashoffsetValue}
+              strokeLinecap={lineCap}
+            />
+          ) : (
+            <Circle
+              {...valueCircleCommonProps}
+              stroke={useGradient4ForProgressColor ? 'url(#gradient4)' : valueCircleCommonProps.stroke}
+              strokeDashoffset={valueCircumference}
+              strokeLinecap={lineCap}
+            />
+          )}
+        </G>
+      </Svg>
+      <View style={{ ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center' }}>
+        <View style={{ width: childSize, height: childSize, alignItems: 'center', justifyContent: 'center' }}>
+          {childComponent}
+        </View>
+      </View>
+    </View>
+  );
+};
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+export { CircularProgressIndicator };
+export type { Props as CircularProgressIndicatorProps };

package/src/component/Progress/ImageCircularProgressIndicator.tsx

@@ -0,0 +1,23 @@
+import { is } from '../../util';
+import { type ImgSource, Img } from '../Img/Img';
+
+import { type CircularProgressIndicatorProps, CircularProgressIndicator } from './CircularProgressIndicator';
+
+type Props = {
+  imageSize: number;
+  imageSrc: ImgSource;
+  childSize?: number;
+} & Omit<CircularProgressIndicatorProps, 'childComponent' | 'childSize'>;
+
+const ImageCircularProgressIndicator = ({ imageSize, imageSrc, childSize, ...rest }: Props) => {
+  return (
+    <CircularProgressIndicator
+      childSize={is.number(childSize) ? childSize : imageSize}
+      childComponent={Img.render(imageSrc, { width: imageSize, height: imageSize })}
+      {...rest}
+    />
+  );
+};
+
+export { ImageCircularProgressIndicator };
+export type { Props as ImageProgressCircleProps };

package/src/component/Progress/LinearProgressBar.tsx

@@ -0,0 +1,63 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useEffect } from 'react';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, withDelay } from 'react-native-reanimated';
+
+import { palette } from '../../theme';
+import { is } from '../../util';
+import { Box } from '../Box';
+
+export type LinearProgressBarProps = {
+  color?: ColorValue;
+  backgroundColor?: ColorValue;
+  /*0 ~ 1*/
+  value: number;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
+  initialAnimatedValue?: number;
+  animatedDelay?: number;
+  sx?: SxProps;
+};
+const LinearProgressBar = ({
+  color = palette.violet500,
+  backgroundColor = palette.gray100,
+  style,
+  value: _value,
+  height = 1,
+  animated,
+  initialAnimatedValue,
+  animatedDelay = 0,
+  sx,
+}: LinearProgressBarProps) => {
+  const value = Math.max(0, Math.min(100, _value));
+  const animValue = useSharedValue(is.number(initialAnimatedValue) ? initialAnimatedValue : value);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      width: `${animValue.value * 100}%`,
+    };
+  });
+
+  useEffect(() => {
+    if (animated) {
+      if (is.number(animatedDelay) && animatedDelay > 0) {
+        animValue.value = withDelay(animatedDelay, withTiming(value, { duration: 300 }));
+      } else {
+        animValue.value = withTiming(value, { duration: 300 });
+      }
+    } else {
+      animValue.value = value;
+    }
+  }, [value, animValue, animated, animatedDelay]);
+
+  return (
+    <Box
+      style={[style, { backgroundColor: backgroundColor, height, alignItems: 'flex-start', overflow: 'hidden' }]}
+      sx={sx}
+    >
+      <Animated.View style={[{ backgroundColor: color, height }, animatedStyle]} />
+    </Box>
+  );
+};
+
+export { LinearProgressBar };

package/src/component/Progress/Slider.tsx

@@ -0,0 +1,167 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { StyleProp, ViewStyle, ColorValue } from 'react-native';
+import { View } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Svg, Ellipse } from 'react-native-svg';
+
+import { palette } from '../../theme';
+
+const trackScaleInIdle = 0.8;
+export type SliderProps = {
+  maximumValue: number;
+  value: number;
+  onSliding: (value: number) => void;
+  onSlidingStart?: () => void;
+  onSlidingComplete?: (value: number) => void;
+  trackHeight?: number;
+  style?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+
+  trackColor?: string;
+  progressColor?: string;
+  disablePressScaleAnimation?: boolean;
+  thumb?: {
+    width: number;
+    height: number;
+    color: ColorValue;
+  };
+
+  isSnapToIntegerValue?: boolean;
+};
+const Slider = (props: SliderProps) => {
+  const {
+    maximumValue,
+    onSlidingComplete = () => {},
+    onSlidingStart = () => {},
+    onSliding,
+    style,
+    containerStyle,
+    value,
+    trackHeight = 10,
+    trackColor = palette.violet50,
+    progressColor = palette.violet500,
+    disablePressScaleAnimation = false,
+    thumb,
+    isSnapToIntegerValue = false,
+  } = props;
+
+  const [isSliding, setSliding] = useState(false);
+
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const containerScale = useSharedValue(trackScaleInIdle);
+  const containerScaleStyle = useAnimatedStyle(() => ({
+    transform: [{ scaleY: containerScale.value }],
+  }));
+
+  const mapValueToPixel = useCallback(
+    (value: number): number => {
+      'worklet';
+      const scale = containerWidth / (maximumValue || 0.001);
+      return value * scale;
+    },
+    [maximumValue, containerWidth],
+  );
+  const mapPixelToValue = (pixel: number): number => {
+    'worklet';
+    const scale = containerWidth / (maximumValue || 0.001);
+    return pixel / scale;
+  };
+
+  const progressPixelAnimValue = useSharedValue<number>(0);
+  useEffect(() => {
+    if (!isSliding) {
+      progressPixelAnimValue.value = mapValueToPixel(value);
+    }
+  }, [value, progressPixelAnimValue, mapValueToPixel, isSliding]);
+
+  const thumbWidth = thumb?.width || 0;
+  const thumbStyle = useAnimatedStyle(() => {
+    return { left: progressPixelAnimValue.value - thumbWidth / 2 };
+  });
+
+  const progressAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      width: progressPixelAnimValue.value,
+    };
+  });
+
+  const startValue = useSharedValue(0);
+  const gesture = Gesture.Pan()
+    .hitSlop(16)
+    .onStart(() => {
+      containerScale.value = withTiming(1);
+      startValue.value = progressPixelAnimValue.value;
+      runOnJS(onSlidingStart)();
+      runOnJS(setSliding)(true);
+    })
+    .onUpdate(({ translationX }) => {
+      const nextPixel = Math.min(containerWidth, Math.max(0, translationX + startValue.value));
+      if (isSnapToIntegerValue) {
+        const nextValue = Math.round(mapPixelToValue(nextPixel));
+        progressPixelAnimValue.value = mapValueToPixel(nextValue);
+        runOnJS(onSliding)(nextValue);
+      } else {
+        progressPixelAnimValue.value = nextPixel;
+        runOnJS(onSliding)(mapPixelToValue(nextPixel));
+      }
+    })
+    .onEnd(() => {
+      containerScale.value = withTiming(0.8);
+      runOnJS(onSlidingComplete)(mapPixelToValue(progressPixelAnimValue.value));
+      runOnJS(setSliding)(false);
+    });
+
+  return (
+    <View style={[{ minHeight: Math.max(thumb?.height || 0, trackHeight) }, containerStyle]}>
+      <View style={{ justifyContent: 'center', flex: 1 }}>
+        <GestureDetector gesture={gesture}>
+          {/* insert dummy view for hit slop correctly working in android */}
+          <View hitSlop={{ top: 16, bottom: 16, left: 16, right: 16 }}>
+            <Animated.View
+              onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+              style={[
+                { height: trackHeight, backgroundColor: trackColor, overflow: 'hidden', borderRadius: 999 },
+                style,
+                disablePressScaleAnimation ? {} : containerScaleStyle,
+              ]}
+            >
+              <Animated.View style={[{ backgroundColor: progressColor, height: '100%' }, progressAnimatedStyle]} />
+            </Animated.View>
+          </View>
+        </GestureDetector>
+      </View>
+      {thumb ? (
+        <Animated.View
+          style={[{ width: thumb.width, height: thumb.height, position: 'absolute' }, thumbStyle]}
+          pointerEvents={'none'}
+        >
+          <Svg
+            style={[
+              {
+                width: thumb.width,
+                height: thumb.height,
+                overflow: 'visible',
+              },
+            ]}
+            viewBox={`0 0 ${thumb.width} ${thumb.height}`}
+            pointerEvents={'none'}
+          >
+            <Ellipse
+              cx={thumb.width / 2}
+              cy={thumb.height / 2}
+              rx={thumb.width / 2 - 1}
+              ry={thumb.height / 2 - 1}
+              fill={thumb.color}
+              stroke={palette.gray300}
+              strokeWidth={1}
+            />
+          </Svg>
+        </Animated.View>
+      ) : null}
+    </View>
+  );
+};
+
+export { Slider };

package/src/component/Progress/index.ts

@@ -0,0 +1,4 @@
+export * from './CircularProgressIndicator';
+export * from './ImageCircularProgressIndicator';
+export * from './LinearProgressBar';
+export * from './Slider';

package/src/component/RadioButton.tsx

@@ -0,0 +1,28 @@
+import { palette } from '@teamturing/react-native-kit';
+import type { PressableProps } from 'react-native';
+import { Pressable, View } from 'react-native';
+
+import type { LayoutStyle } from './Layout/LayoutStyle';
+
+type Props = { layout?: LayoutStyle; value: boolean } & PressableProps;
+const RadioButton = ({ layout, value, ...props }: Props) => {
+  return (
+    <Pressable
+      {...props}
+      style={[layout, { width: 24, height: 24, alignItems: 'center', justifyContent: 'center' }]}
+      hitSlop={12}
+    >
+      <View
+        style={{
+          width: 22,
+          height: 22,
+          borderRadius: 999,
+          borderWidth: value ? 6 : 3,
+          borderColor: value ? palette.gray900 : palette.gray200,
+        }}
+      />
+    </Pressable>
+  );
+};
+
+export { RadioButton };

package/src/component/ReadMoreText.tsx

@@ -0,0 +1,60 @@
+import { useLayout } from '@react-native-community/hooks';
+import { Txt, is, palette, Touch } from '@teamturing/react-native-kit';
+import { useEffect, useState } from 'react';
+
+type Props = { onlyMore?: boolean; TxtComponent?: Txt; text: string; numberOfLines?: number };
+
+const ReadMoreText = ({ onlyMore = true, TxtComponent = Txt.M, text, numberOfLines = 3 }: Props) => {
+  const { width, onLayout } = useLayout();
+  const [trimmedText, setTrimmedText] = useState('');
+  const [renderOriginalTextComponent, setRenderOriginalTextComponent] = useState(true);
+  const [showReadMore, setShowReadMore] = useState(false);
+  const toggleShowReadMore = () => {
+    setShowReadMore((value) => !value);
+  };
+
+  const isValidNumberOfLinesForReadMore = numberOfLines > 0;
+
+  const canToggle = isValidNumberOfLinesForReadMore && trimmedText !== text && !(onlyMore && !showReadMore);
+
+  useEffect(() => {
+    setRenderOriginalTextComponent(true);
+  }, [text, width, numberOfLines]);
+
+  return (
+    <>
+      <Touch onPress={toggleShowReadMore} disabled={!canToggle} activeOpacity={1} onLayout={onLayout}>
+        {TxtComponent.render(showReadMore ? trimmedText : text, {
+          numberOfLines: showReadMore || is.emptyString(trimmedText) ? numberOfLines : undefined,
+        })}
+        {canToggle && showReadMore ? TxtComponent.render('더 보기', { color: palette.gray500 }) : null}
+      </Touch>
+      {renderOriginalTextComponent
+        ? TxtComponent.render(text, {
+            onTextLayout: (e) => {
+              if (isValidNumberOfLinesForReadMore && e.nativeEvent.lines.length > numberOfLines) {
+                setShowReadMore(true);
+                setTrimmedText(
+                  e.nativeEvent.lines
+                    .slice(0, numberOfLines)
+                    .map(({ text }, index) => {
+                      const t = text.trimEnd();
+                      return index !== numberOfLines - 1 ? t : t + '...';
+                    })
+                    .join('\n'),
+                );
+              } else {
+                setShowReadMore(false);
+                setTrimmedText(text);
+              }
+              setRenderOriginalTextComponent(false);
+            },
+            style: { opacity: 0, position: 'absolute', pointerEvents: 'none' },
+          })
+        : null}
+    </>
+  );
+};
+
+export { ReadMoreText };
+export type { Props as ReadMoreTextProps };

package/src/component/ReadMoreText.web.tsx

@@ -0,0 +1,9 @@
+import { Txt } from '@teamturing/react-native-kit';
+
+import type { ReadMoreTextProps } from './ReadMoreText';
+
+const ReadMoreText = ({ TxtComponent = Txt.M, text }: ReadMoreTextProps) => {
+  return TxtComponent.render(text);
+};
+
+export { ReadMoreText };

package/src/component/ReanimatedBox/index.tsx

@@ -0,0 +1,16 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import type { PropsWithChildren, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { ViewProps } from 'react-native';
+import type { AnimatedProps } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+
+type ReanimatedBoxProps = PropsWithChildren<{}> & AnimatedProps<ViewProps> & SxProps;
+const ReanimatedBox = forwardRef((props: ReanimatedBoxProps, ref: ForwardedRef<Animated.View>) => {
+  const { filteredProps, getStyle } = useSx(props);
+  return <Animated.View ref={ref} style={getStyle()} {...filteredProps} />;
+});
+
+export { ReanimatedBox };
+export type { ReanimatedBoxProps };

package/src/component/ReanimatedStyledScrollView/index.tsx

@@ -0,0 +1,29 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import type { PropsWithChildren, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { AnimatedScrollViewProps } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+
+type ReanimatedStyledScrollViewProps = PropsWithChildren<{
+  contentContainerSx?: SxProps;
+}> &
+  AnimatedScrollViewProps &
+  SxProps;
+const ReanimatedStyledScrollView = forwardRef(
+  (props: ReanimatedStyledScrollViewProps, ref: ForwardedRef<Animated.ScrollView>) => {
+    const { filteredProps, getStyle } = useSx(props);
+    const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);
+    return (
+      <Animated.ScrollView
+        ref={ref}
+        style={getStyle()}
+        contentContainerStyle={contentContainerStyle()}
+        {...filteredProps}
+      />
+    );
+  },
+);
+
+export { ReanimatedStyledScrollView };
+export type { ReanimatedStyledScrollViewProps };

package/src/component/RefreshControlEx.tsx

@@ -0,0 +1,17 @@
+import { palette } from '@teamturing/react-native-kit';
+import React from 'react';
+import type { RefreshControlProps } from 'react-native';
+import { RefreshControl } from 'react-native';
+
+type Props = {} & RefreshControlProps;
+const RefreshControlEx: React.FC<Props> = ({ ...rest }: Props) => {
+  return (
+    <RefreshControl
+      tintColor={palette.violet400}
+      colors={[palette.violet400, palette.violet600, palette.green500]}
+      {...rest}
+    />
+  );
+};
+
+export { RefreshControlEx };

package/src/component/StyledScrollView/index.tsx

@@ -0,0 +1,21 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import type { PropsWithChildren } from 'react';
+import { forwardRef, type ForwardedRef } from 'react';
+import type { ScrollViewProps } from 'react-native';
+import { ScrollView } from 'react-native';
+
+type StyledScrollViewProps = PropsWithChildren<
+  {
+    contentContainerSx?: SxProps;
+  } & Omit<ScrollViewProps, 'contentContainerStyle'> &
+    SxProps
+>;
+const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: ForwardedRef<ScrollView>) => {
+  const { getStyle, filteredProps } = useSx(props) as any;
+  const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx ?? {});
+  return <ScrollView ref={ref} {...filteredProps} style={getStyle()} contentContainerStyle={contentContainerStyle()} />;
+});
+
+export { StyledScrollView };
+export type { StyledScrollViewProps };