@teamturing/react-native-kit 1.1.0 → 1.2.1

package/src/component/dialog/ToastDialog.tsx

@@ -0,0 +1,128 @@
+import {
+  type IconName,
+  palette,
+  type IconProps,
+  useDynamicLayout,
+  type ImperativeAnimationRef,
+  useAppState,
+  FadeInOut,
+  SlideInOut,
+  spacing,
+  Icon,
+  Txt,
+  useDialogContext,
+} from '@teamturing/react-native-kit';
+import React, { useImperativeHandle, useRef, useState } from 'react';
+import { View } from 'react-native';
+
+import { useAppEventListener } from '../../util/AppEvent';
+
+export type ToastType = 'success' | 'warning';
+const ToastParamsByType: Record<ToastType, Pick<ToastDialogParams, 'iconName' | 'iconFill'>> = {
+  success: {
+    iconName: 'check_in_circle',
+    iconFill: palette.green500,
+  },
+  warning: {
+    iconName: 'exclamation_point_in_circle',
+    iconFill: palette.yellow500,
+  },
+} as const;
+export type ToastDialogParams = { text: string; iconName: IconName; iconFill: IconProps['fill']; duration?: number };
+export type ToastDialogRef = {
+  show: (type: ToastType, text: string, duration?: number) => void;
+};
+const _ToastDialog = (_, ref: React.Ref<ToastDialogRef>) => {
+  const { screenWidth, sfTop } = useDynamicLayout();
+
+  const [params, setParams] = useState<ToastDialogParams>({
+    text: '',
+    iconName: 'exclamation_point_in_circle',
+    iconFill: palette.green500,
+  });
+
+  const fadeInOutAnimation = useRef<ImperativeAnimationRef>(null);
+  const slideInOutAnimation = useRef<ImperativeAnimationRef>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      show: (type: ToastType, text: string, duration) => {
+        setParams({
+          ...ToastParamsByType[type],
+          text,
+          duration,
+        });
+        fadeInOutAnimation.current?.start();
+        slideInOutAnimation.current?.start();
+      },
+    }),
+    [],
+  );
+
+  const width = Math.min(351, screenWidth * 0.9);
+
+  const appState = useAppState();
+  return (
+    <FadeInOut
+      ref={fadeInOutAnimation}
+      disableFirstAnimation
+      pointerEvents={'none'}
+      style={{
+        width: '100%',
+        top: sfTop + 24,
+        position: 'absolute',
+        zIndex: 5,
+        alignItems: 'center',
+      }}
+      duration={params.duration ?? 2500}
+      fadeInDuration={500}
+      fadeOutDuration={300}
+      enableResetAtRestart
+    >
+      <SlideInOut
+        ref={slideInOutAnimation}
+        duration={2500}
+        startTranslationY={-24 - sfTop}
+        endTranslationY={-24 - sfTop}
+        slideInDuration={500}
+        slideOutDuration={300}
+        disableFirstAnimation
+        enableResetAtRestart
+      >
+        {appState === 'active' ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              width,
+              borderRadius: 16,
+              justifyContent: 'center',
+              backgroundColor: palette.gray700,
+              minHeight: 56,
+              padding: spacing[4],
+              paddingLeft: spacing[5],
+              opacity: 0.98,
+            }}
+          >
+            <Icon size={24} name={params.iconName} fill={params.iconFill} />
+            {Txt.M.Medium.White.render(params.text, {
+              numberOfLines: 4,
+              style: { flex: 1, marginLeft: spacing[3] },
+              testID: 'toast/text',
+            })}
+          </View>
+        ) : null}
+      </SlideInOut>
+    </FadeInOut>
+  );
+};
+export const ToastDialog = React.forwardRef(_ToastDialog);
+
+export const ToastDialogComposer = () => {
+  const { toastDialog } = useDialogContext();
+
+  useAppEventListener<string>('SHOW_WARNING_TOAST', (text) => toastDialog.current?.show('warning', text));
+  useAppEventListener<string>('SHOW_SUCCESS_TOAST', (text) => toastDialog.current?.show('success', text));
+  return <ToastDialog ref={toastDialog} />;
+};

package/src/component/dialog/base/BottomSheetDialog.tsx

@@ -0,0 +1,44 @@
+import { is } from '@mj-studio/js-util';
+import { useSx } from '@react-native-styled-system/core';
+import { useDynamicLayout } from '@teamturing/react-native-kit';
+import React, { forwardRef } from 'react';
+import { StyleSheet } from 'react-native';
+
+import type { DialogRef, DialogProps } from './Dialog';
+import { Dialog } from './Dialog';
+
+type Props = {
+  excludeSafeAreaBottomPadding?: boolean;
+  topBorder?: number;
+} & Omit<DialogProps, 'style'>;
+
+export const BottomSheetDialog = forwardRef((props: Props, ref: React.Ref<DialogRef>) => {
+  const { sfBottom: _sfBottom } = useDynamicLayout();
+  const { filteredProps, getStyle } = useSx(props, { fallback: { w: '100%' } });
+
+  const { children, excludeSafeAreaBottomPadding, topBorder = 40, ...rest } = filteredProps;
+
+  const style = getStyle();
+  const flattenStyle = StyleSheet.flatten(style);
+  const parsedPaddingBottom = flattenStyle?.paddingBottom ?? flattenStyle?.paddingVertical ?? 0;
+  const sfBottom = excludeSafeAreaBottomPadding ? 0 : _sfBottom;
+
+  const propsPaddingBottom = is.number(parsedPaddingBottom) ? parsedPaddingBottom : 0;
+  const paddingBottom = propsPaddingBottom + sfBottom;
+
+  return (
+    <Dialog
+      ref={ref}
+      modalPosition={'bottom'}
+      topLeftRadius={topBorder}
+      topRightRadius={topBorder}
+      overflow={'hidden'}
+      style={[style, { paddingBottom }]}
+      {...rest}
+    >
+      {children}
+    </Dialog>
+  );
+});
+
+export type { Props as BottomSheetDialogProps };

package/src/component/dialog/base/Dialog.tsx

@@ -0,0 +1,62 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { useDynamicLayout, px, is, Portal, runAfterFlushMacroQueue } from '@teamturing/react-native-kit';
+import React, { useCallback, useImperativeHandle, useRef, forwardRef } from 'react';
+import { Easing } from 'react-native';
+
+import type { ModalBoxProps } from './ModalBox';
+import { ModalBox } from './ModalBox';
+
+export type DialogRef = {
+  open: () => void;
+  close: () => void;
+};
+export type DialogWithParamRef<Params> = {
+  open: (params: Params) => void;
+  close: () => void;
+};
+
+type Props = {
+  children?: React.ReactNode | ((params: { close: () => void }) => React.ReactNode);
+  enablePortal?: boolean;
+  testID?: string;
+} & Omit<ModalBoxProps, 'children'> &
+  SxProps;
+
+export const Dialog = forwardRef((props: Props, ref: React.Ref<DialogRef>) => {
+  const { dialogWidth } = useDynamicLayout();
+  const { getStyle, filteredProps } = useSx(props, { fallback: { w: px(dialogWidth), h: 'auto', bg: 'white' } });
+  const { children, enablePortal = false, ...rest } = filteredProps;
+  const baseModal = useRef<ModalBox>(null);
+
+  const open = useCallback(() => runAfterFlushMacroQueue(() => baseModal.current?.open()), []);
+  const close = useCallback(() => baseModal.current?.close(), []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open,
+      close,
+    }),
+    [close, open],
+  );
+
+  const baseModalElement = (
+    <ModalBox
+      ref={baseModal}
+      modalPosition={'center'}
+      style={getStyle()}
+      backdropPressToClose={true}
+      backButtonClose={true}
+      animationDuration={400}
+      easing={Easing.out(Easing.cubic)}
+      {...rest}
+    >
+      {is.function(children) ? children({ close }) : children}
+    </ModalBox>
+  );
+
+  return enablePortal ? <Portal>{baseModalElement}</Portal> : baseModalElement;
+});
+
+export type { Props as DialogProps };