@teamturing/react-native-kit 1.1.0 → 1.2.1

package/src/component/dialog/CommonDialog.tsx

@@ -0,0 +1,304 @@
+import { useBackHandler } from '@react-native-community/hooks';
+import {
+  type IconName,
+  type IconProps,
+  type ImgSource,
+  type ChipProps,
+  type BtnProps,
+  is,
+  Icon,
+  palette,
+  Img,
+  spacing,
+  Chip,
+  Txt,
+  Btn,
+  runAfterFlushMacroQueue,
+} from '@teamturing/react-native-kit';
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { View } from 'react-native';
+
+import { useDialogContext } from './DialogProvider';
+import { type DialogRef, Dialog } from './base';
+
+type ButtonType =
+  | 'single-primary'
+  | 'horizontal-variant-primary'
+  | 'vertical-primary-text'
+  | 'horizontal-outlined-danger';
+const defaultButtonType: ButtonType = 'single-primary';
+function resolveButtonType(buttonsLength: number, type?: ButtonType): ButtonType {
+  if (buttonsLength <= 1) {
+    return defaultButtonType;
+  }
+  return type || 'horizontal-variant-primary';
+}
+
+type Button = {
+  title?: string;
+  onPress?: (close: () => void) => void;
+  loading?: boolean;
+  dontClose?: boolean;
+  testID?: string;
+};
+
+type ImageSizeVariant = '120' | '64';
+const defaultImageSize: ImageSizeVariant = '120';
+
+export type CommonDialogOpenParams = {
+  dismissDisable?: boolean;
+
+  onDismiss?: () => void;
+  openId?: string;
+
+  // UI
+  iconName?: IconName;
+  iconFill?: IconProps['fill'];
+  image?: ImgSource;
+  imageSize?: ImageSizeVariant;
+
+  chip?: ChipProps;
+
+  title?: string;
+  body?: string;
+  bodyAlign?: 'center' | 'left';
+
+  buttonType?: ButtonType;
+  buttons?: (Button | null | undefined)[];
+};
+
+export type CommonDialogProps = {
+  onOpened?: () => void;
+  onClosed?: () => void;
+};
+
+export type CommonDialogRef = {
+  open: (params: CommonDialogOpenParams) => void;
+  close: (openId?: string) => void;
+};
+
+export const COMMON_DIALOG_ANIMATION_DURATION = 300;
+
+const CommonDialog = forwardRef<CommonDialogRef, CommonDialogProps>((props, ref) => {
+  const dialog = useRef<DialogRef>(null);
+
+  const isOpen = useRef(false);
+  const clearStateHandler = useRef<any>(-1);
+
+  const [iconName, setIconName] = useState<IconName>();
+  const [iconFill, setIconFill] = useState<IconProps['fill']>();
+  const [image, setImage] = useState<ImgSource>();
+  const [imageSize, setImageSize] = useState<ImageSizeVariant>(defaultImageSize);
+  const [chip, setChip] = useState<ChipProps>();
+  const [title, setTitle] = useState<string>();
+  const [body, setBody] = useState<string>();
+  const [bodyAlign, setBodyAlign] = useState<'center' | 'left'>('center');
+  const [buttonType, setButtonType] = useState<ButtonType>(defaultButtonType);
+  const [buttons, setButtons] = useState<Button[]>([]);
+  const [dismissDisable, setDismissDisable] = useState(false);
+  const [onDismiss, setOnDismiss] = useState<() => void>();
+  const [openId, setOpenId] = useState('');
+
+  const setUIStates = useCallback((params?: CommonDialogOpenParams) => {
+    setIconName(params?.iconName || undefined);
+    setIconFill(params?.iconFill || undefined);
+    setImage(params?.image || undefined);
+    setImageSize(params?.imageSize || defaultImageSize);
+    setChip(params?.chip);
+    setTitle(params?.title || undefined);
+    setBody(params?.body || undefined);
+    setBodyAlign(params?.bodyAlign || 'center');
+    setDismissDisable(params?.dismissDisable || false);
+    setOnDismiss(is.function(params?.onDismiss) ? () => params?.onDismiss : undefined);
+    setOpenId(params?.openId || '');
+
+    const buttons = params?.buttons || [];
+    setButtons(buttons.filter((b) => is.plainObject(b)) as Button[]);
+    setButtonType(resolveButtonType(buttons.length, params?.buttonType));
+  }, []);
+
+  const imageSizeByVariant: Record<ImageSizeVariant, number> = {
+    '120': 120,
+    '64': 64,
+  };
+
+  const close = useCallback(
+    (id?: string) => {
+      if (idMatchNeeded()) {
+        closeModalById();
+      } else {
+        close();
+      }
+
+      function idMatchNeeded() {
+        return is.notEmptyString(id);
+      }
+
+      function closeModalById() {
+        if (openId === id) {
+          close();
+        }
+      }
+
+      function close() {
+        dialog.current?.close();
+      }
+    },
+    [openId],
+  );
+
+  const open = useCallback(
+    (params: CommonDialogOpenParams) => {
+      isOpen.current = true;
+      clearTimeout(clearStateHandler.current);
+
+      setUIStates(params);
+      dialog.current?.open();
+    },
+    [setUIStates],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open,
+      close,
+    }),
+    [open, close],
+  );
+
+  useBackHandler(() => {
+    if (isOpen.current) {
+      if (!dismissDisable) {
+        close();
+      }
+      return true;
+    }
+    return false;
+  });
+
+  const renderBaseElement = () => {
+    return (
+      <View style={{ alignItems: 'center' }}>
+        {!image && iconName ? (
+          <Icon name={iconName} size={imageSizeByVariant[imageSize]} fill={iconFill || palette.gray300} mb={4} />
+        ) : null}
+        {!iconName && image
+          ? Img.render(image, {
+              width: imageSizeByVariant[imageSize],
+              height: imageSizeByVariant[imageSize],
+              style: { marginBottom: spacing[4] },
+            })
+          : null}
+        {chip?.text ? <Chip size={'m'} variant={'gray'} mb={3} {...chip} /> : null}
+        {title
+          ? Txt.L.Bold.render(title, {
+              align: 'center',
+              numberOfLines: 4,
+              testID: 'commonDialog/title',
+              style: [{ width: '100%', marginBottom: spacing[body ? 3 : 0] }],
+            })
+          : null}
+        {body
+          ? Txt.S.Medium.Gray500.render(body, {
+              align: bodyAlign,
+              numberOfLines: 16,
+              testID: 'commonDialog/body',
+              style: [{ width: '100%' }],
+            })
+          : null}
+      </View>
+    );
+  };
+
+  const renderButtons = () => {
+    if (buttons.length === 0) {
+      return undefined;
+    }
+
+    const [button1, button2]: (Button | undefined)[] = buttons;
+
+    const renderButton = (button?: Button, props?: BtnProps) =>
+      !button ? null : (
+        <Btn
+          text={button.title}
+          onPress={() => {
+            if (!button.dontClose) {
+              close();
+            }
+            runAfterFlushMacroQueue(() => button.onPress?.(close));
+          }}
+          loading={button.loading}
+          testID={`commonDialog/button/${button.testID ?? button.title}`}
+          fullWidth={true}
+          size={'l'}
+          {...props}
+        />
+      );
+
+    if (!button2 || buttonType === 'single-primary') {
+      return renderButton(button1);
+    } else if (buttonType === 'horizontal-variant-primary') {
+      return (
+        <View style={{ flexDirection: 'row' }}>
+          <View style={{ flex: 1 }}>{renderButton(button1, { variant: 'secondary' })}</View>
+          <View style={{ flex: 1, marginLeft: spacing[2] }}>{renderButton(button2, { variant: 'primary' })}</View>
+        </View>
+      );
+    } else if (buttonType === 'vertical-primary-text') {
+      return (
+        <View style={{ width: '100%' }}>
+          {renderButton(button1)}
+          {renderButton(button2, { size: 'm', variant: 'text-gray700', layout: { marginTop: spacing[1] } })}
+        </View>
+      );
+    } else if (buttonType === 'horizontal-outlined-danger') {
+      return (
+        <View style={{ flexDirection: 'row' }}>
+          <View style={{ flex: 1 }}>{renderButton(button1, { variant: 'outlined' })}</View>
+          <View style={{ flex: 1, marginLeft: spacing[2] }}>{renderButton(button2, { variant: 'danger' })}</View>
+        </View>
+      );
+    } else {
+      return undefined;
+    }
+  };
+
+  return (
+    <Dialog
+      testID={'CommonDialog'}
+      ref={dialog}
+      radius={20}
+      pt={8}
+      px={5}
+      pb={6}
+      onOpened={() => {
+        isOpen.current = true;
+        props.onOpened?.();
+      }}
+      {...{
+        onClosedStarted: () => {
+          props.onClosed?.();
+          onDismiss?.();
+          clearStateHandler.current = setTimeout(() => {
+            isOpen.current = false;
+            setUIStates();
+          }, COMMON_DIALOG_ANIMATION_DURATION);
+        },
+      }}
+      animationDuration={COMMON_DIALOG_ANIMATION_DURATION}
+      backdropPressToClose={!dismissDisable}
+      backButtonClose={false}
+    >
+      {renderBaseElement()}
+      <View style={{ marginTop: spacing[8] }}>{renderButtons()}</View>
+    </Dialog>
+  );
+});
+
+export const CommonDialogComposer = () => {
+  const { commonDialog } = useDialogContext();
+  return <CommonDialog ref={commonDialog} />;
+};
+
+export { CommonDialog };

package/src/component/dialog/DialogProvider.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useRef } from 'react';
+
+import { createCtx } from '../../util';
+import { AppEvent } from '../../util/AppEvent';
+
+import type { CommonBottomSheetDialogRef, CommonBottomSheetDialogOpenParams } from './CommonBottomSheetDialog';
+import type { CommonDialogRef, CommonDialogOpenParams } from './CommonDialog';
+import type { LottieDialogRef, LottieDialogShowParams } from './LottieDialog';
+import type { ToastDialogRef } from './ToastDialog';
+
+type HandleErrorWithCommonDialogOption = {
+  title: string;
+  body: string;
+  hideErrorReportButton: boolean;
+  buttonText: string;
+};
+const defaultHandleErrorWithCommonDialogOption: HandleErrorWithCommonDialogOption = {
+  title: '오류가 발생했습니다',
+  body: '잠시 후에 다시 시도해주세요',
+  hideErrorReportButton: false,
+  buttonText: '확인',
+};
+
+export const [useDialogContext, DialogProvider, DialogConsumer, useDialogContextSafely] = createCtx(() => {
+  const commonDialog = useRef<CommonDialogRef>(null);
+  const openCommon = useCallback((params: CommonDialogOpenParams) => commonDialog.current?.open(params), []);
+  const closeCommon = useCallback((type?: string) => commonDialog.current?.close(type), []);
+
+  const commonBottomSheetDialog = useRef<CommonBottomSheetDialogRef>(null);
+  const openCommonBottomSheet = useCallback(
+    (params: CommonBottomSheetDialogOpenParams) => commonBottomSheetDialog.current?.open(params),
+    [],
+  );
+  const closeCommonBottomSheet = useCallback((type?: string) => commonBottomSheetDialog.current?.close(type), []);
+
+  const toastDialog = useRef<ToastDialogRef>(null);
+  const showSuccessToast = useCallback((text: string) => toastDialog.current?.show('success', text), []);
+  const showWarningToast = useCallback((text: string) => toastDialog.current?.show('warning', text), []);
+
+  const lottieDialog = useRef<LottieDialogRef>(null);
+  const showLottie = useCallback((params: LottieDialogShowParams) => lottieDialog.current?.show(params), []);
+
+  // const birthInputDialog = useRef<BirthInputDialogRef>(null);
+  // const openBirthInput = useCallback((params: BirthInputDialogParams) => birthInputDialog.current?.open(params), []);
+
+  const handleErrorWithCommonDialogOptions = useCallback(
+    (options: Partial<HandleErrorWithCommonDialogOption> = defaultHandleErrorWithCommonDialogOption) => {
+      const { title, body, hideErrorReportButton, buttonText } = {
+        ...defaultHandleErrorWithCommonDialogOption,
+        ...options,
+      };
+      openCommon({
+        iconName: 'exclamation_point_in_circle',
+        imageSize: '64',
+        title: title,
+        body: body,
+        buttons: [
+          {
+            title: buttonText,
+          },
+          hideErrorReportButton
+            ? null
+            : {
+                title: '오류 제보하기',
+                onPress: () => AppEvent.emitEvent('NAVIGATE_BUG_REPORT'),
+              },
+        ],
+        buttonType: 'vertical-primary-text',
+      });
+    },
+    [openCommon],
+  );
+  const handleErrorWithCommonDialog = useCallback(
+    () => handleErrorWithCommonDialogOptions(),
+    [handleErrorWithCommonDialogOptions],
+  );
+
+  return {
+    commonDialog,
+    toastDialog,
+    lottieDialog,
+    closeCommon,
+    handleErrorWithCommonDialog,
+    handleErrorWithCommonDialogOptions,
+    openCommon,
+    showLottie,
+    showSuccessToast,
+    showWarningToast,
+    commonBottomSheetDialog,
+    openCommonBottomSheet,
+    closeCommonBottomSheet,
+  };
+}, 'Dialog');

package/src/component/dialog/ItemSelectBottomSheetDialog.tsx

@@ -0,0 +1,114 @@
+import {
+  Box,
+  useDynamicLayout,
+  ItemList,
+  palette,
+  Txt,
+  RowCenter,
+  FontWeight,
+  Icon,
+  spacing,
+  is,
+} from '@teamturing/react-native-kit';
+import React, { useRef, useImperativeHandle, useMemo } from 'react';
+import { ScrollView, TouchableHighlight } from 'react-native';
+
+import { type BottomSheetDialogProps, BottomSheetDialog } from './base/BottomSheetDialog';
+import type { DialogRef } from './base';
+
+type Option<T> = Readonly<{ id: T; value: string; description?: string; disabled?: boolean; chevron?: boolean }>;
+
+export type ItemSelectBottomSheetDialogProps<T> = {
+  title?: string;
+  options: readonly (Option<T> | null | undefined)[];
+  selectedOptionId?: T;
+  onSelectedOptionChanged?: (params: { index: number; id: T }) => void;
+  disabledSelect?: boolean;
+  testID?: string;
+} & Omit<BottomSheetDialogProps, 'children' | 'excludeSafeAreaBottomPadding' | 'style'>;
+const _ItemSelectBottomSheetDialog = <T,>(
+  {
+    onSelectedOptionChanged,
+    options,
+    selectedOptionId,
+    title,
+    disabledSelect,
+    testID = 'ItemSelectBottomSheetDialog',
+    ...props
+  }: ItemSelectBottomSheetDialogProps<T>,
+  ref: React.Ref<DialogRef>,
+) => {
+  const { screenHeight, sfBottom, sidePadding } = useDynamicLayout();
+  const dialog = useRef<DialogRef>(null);
+
+  const open = () => dialog.current?.open();
+  const close = () => dialog.current?.close();
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open,
+      close,
+    }),
+    [],
+  );
+
+  const validOptions: Option<T>[] = useMemo(() => options.filter((o) => !!o) as Option<T>[], [options]);
+
+  return (
+    <BottomSheetDialog ref={dialog} pt={8} excludeSafeAreaBottomPadding {...props}>
+      <Box px={'sidePadding'}>{title ? Txt.L.Bold.render(title, { style: { marginVertical: spacing[4] } }) : null}</Box>
+      <ScrollView
+        testID={testID}
+        style={{ maxHeight: screenHeight * 0.6, minHeight: Math.min(options.length * 45, screenHeight * 0.6) }}
+        contentContainerStyle={{ paddingBottom: 20 + sfBottom }}
+      >
+        <ItemList
+          items={validOptions}
+          renderItem={({ id, value, description, chevron }) => {
+            const selected = selectedOptionId === id;
+            const showDescription = is.notEmptyString(description);
+            return (
+              <RowCenter gapX={3}>
+                {Txt.M.Medium.Color(selected || disabledSelect ? palette.gray900 : palette.gray400).render(value, {
+                  style: showDescription
+                    ? {
+                        width: 40,
+                      }
+                    : { flex: 1 },
+                })}
+                {showDescription
+                  ? Txt.M.Color(selected || disabledSelect ? palette.gray900 : palette.gray400).render(description, {
+                      weight: selected ? FontWeight.Medium : FontWeight.Regular,
+                      style: { flex: 1 },
+                    })
+                  : null}
+                {selected && <Icon name={'check'} size={24} fill={palette.violet500} />}
+                {chevron && <Icon name={'chevron_right'} size={20} fill={palette.gray400} />}
+              </RowCenter>
+            );
+          }}
+          renderItemWrapper={(children, { id, disabled }, index) => (
+            <TouchableHighlight
+              testID={`${testID}/item/${id}`}
+              underlayColor={palette.gray100}
+              disabled={disabledSelect || disabled}
+              key={id + ''}
+              onPress={() => {
+                onSelectedOptionChanged?.({ index, id });
+                close();
+              }}
+              style={{ paddingVertical: spacing[4], paddingHorizontal: sidePadding }}
+            >
+              {children}
+            </TouchableHighlight>
+          )}
+        />
+      </ScrollView>
+    </BottomSheetDialog>
+  );
+};
+
+export const ItemSelectBottomSheetDialog = React.forwardRef(_ItemSelectBottomSheetDialog) as <T>(
+  props: ItemSelectBottomSheetDialogProps<T> & { ref?: React.ForwardedRef<DialogRef> },
+) => ReturnType<typeof _ItemSelectBottomSheetDialog>;

package/src/component/dialog/LottieDialog.tsx

@@ -0,0 +1,85 @@
+import { Lottie, useDialogContext, useAppState, useStableCallback } from '@teamturing/react-native-kit';
+import type LottieView from 'lottie-react-native';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
+
+export type LottieDialogShowParams = {
+  source: any;
+  lottieStyle?: StyleProp<ViewStyle>;
+  onAnimationFinish?: () => void;
+  speed?: number;
+};
+export type LottieDialogRef = {
+  show: (param: LottieDialogShowParams) => void;
+};
+const LottieDialog = React.forwardRef((_, ref: React.Ref<LottieDialogRef>) => {
+  const lottie = useRef<LottieView>(null);
+
+  const [params, setParams] = useState<LottieDialogShowParams>();
+
+  const [showKey, setShowKey] = useState(0);
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(opacity, { useNativeDriver: true, toValue: showKey !== -1 ? 1 : 0, duration: 300 }).start();
+
+    return () => {
+      opacity.stopAnimation();
+    };
+  }, [showKey, opacity]);
+
+  const show = useCallback((params: LottieDialogShowParams) => {
+    setParams(params);
+    setShowKey((k) => k + 1);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      show,
+    }),
+    [show],
+  );
+
+  const onAnimationFinish = useStableCallback(() => {
+    params?.onAnimationFinish?.();
+    setShowKey(-1);
+    setParams(undefined);
+  });
+
+  const appState = useAppState();
+  useEffect(() => {
+    if (appState !== 'active') {
+      onAnimationFinish();
+    }
+  }, [appState, onAnimationFinish]);
+
+  return (
+    <Animated.View
+      testID={'lottie_container'}
+      style={[StyleSheet.absoluteFill, { alignItems: 'center', justifyContent: 'center', zIndex: 2 }, { opacity }]}
+      pointerEvents={'none'}
+    >
+      <Lottie
+        key={showKey}
+        ref={lottie}
+        testID={'lottie_view'}
+        style={[params?.lottieStyle]}
+        source={params?.source}
+        autoPlay={true}
+        resizeMode={'contain'}
+        loop={false}
+        speed={params?.speed || 1}
+        onAnimationFinish={onAnimationFinish}
+      />
+    </Animated.View>
+  );
+});
+
+export const LottieDialogComposer = () => {
+  const { lottieDialog } = useDialogContext();
+  return <LottieDialog ref={lottieDialog} />;
+};
+
+export { LottieDialog };