@ccrf01/react-native-template 0.0.16

package/template/src/components/basic/RootDialog/Dialog.tsx

@@ -0,0 +1,246 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { BackHandler, StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { Text } from 'react-native-paper'
+
+import DialogManager, {
+  Dialog as RootDialog,
+  DialogButton,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  SlideAnimation,
+} from '@/components/basic/RootDialog'
+import logger from '@/infrastructures/common/logger'
+import i18n from '@/locales/i18n'
+
+interface IDialogAction {
+  label: string
+  onPress: () => void
+  buttonStyle?: ViewStyle
+  textStyle?: TextStyle
+  isCancel?: boolean
+}
+interface IDialogShowConfig {
+  title?: string
+  content: string | React.ReactElement
+  actions?: IDialogAction[]
+  clickBackdropDismiss?: boolean
+}
+interface IDialogConfirmConfig extends Omit<IDialogShowConfig, 'actions'> {
+  confirmText?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+interface IDialogInfoConfig extends Omit<IDialogShowConfig, 'actions'> {
+  confirmText?: string
+  onConfirm?: () => void
+}
+
+interface IDialogApiErrorConfig {
+  title?: string
+  message: string
+  onCancel?: () => void
+  allowRetry: boolean
+  onRetry?: () => unknown
+}
+
+export const confirm = ({
+  clickBackdropDismiss,
+  confirmText,
+  content,
+  onCancel,
+  onConfirm,
+  title,
+}: IDialogConfirmConfig) => {
+  logger.log('confirm dialog called')
+  const { t } = i18n
+  const e = BackHandler.addEventListener('hardwareBackPress', () => {
+    return true
+  })
+  show({
+    title,
+    content,
+    clickBackdropDismiss,
+    actions: [
+      {
+        label: t('general:button.cancel'),
+        onPress: () => {
+          DialogManager.dismiss()
+          onCancel?.()
+          e?.remove()
+        },
+        isCancel: true,
+      },
+      {
+        label: confirmText || t('general:button.confirm'),
+        onPress: () => {
+          DialogManager.dismiss(() => {onConfirm?.()})
+          e?.remove()
+        },
+      },
+    ],
+  })
+}
+
+export const info = ({ clickBackdropDismiss, confirmText, content, onConfirm, title }: IDialogInfoConfig) => {
+  const { t } = i18n
+  const e = BackHandler.addEventListener('hardwareBackPress', () => {
+    return true
+  })
+  show({
+    title,
+    content,
+    clickBackdropDismiss,
+    actions: [
+      // {
+      //   label: t('general:button.cancel'),
+      //   onPress: () => {
+      //     DialogManager.dismiss()
+      //     onCancel?.()
+      //   },
+      //   isCancel: true,
+      // },
+      {
+        label: confirmText || t('general:button.confirm'),
+        onPress: () => {
+          logger.log('info dialog pressed confirm')
+          DialogManager.dismiss()
+          onConfirm?.()
+          e?.remove()
+        },
+      },
+    ],
+  })
+}
+
+export const apiError = ({ allowRetry, message, onCancel, onRetry, title }: IDialogApiErrorConfig) => {
+  const { t } = i18n
+  const e = BackHandler.addEventListener('hardwareBackPress', () => {
+    return true
+  })
+  const actions: IDialogAction[] = [
+    {
+      label: t('general:button.cancel'),
+      onPress: () => {
+        DialogManager.dismiss()
+        onCancel?.()
+        e?.remove()
+      },
+      isCancel: true,
+    },
+  ]
+  if (allowRetry) {
+    actions.push({
+      label: t('general:button.retry'),
+      onPress: () => {
+        DialogManager.dismiss()
+        onRetry?.()
+        e?.remove()
+      },
+    })
+  }
+  show({
+    title: title,
+    content: message,
+    clickBackdropDismiss: false,
+    actions,
+  })
+}
+
+export const show = ({ actions, clickBackdropDismiss, content, title }: IDialogShowConfig, callback: () => void = () => { }) => {
+  const titleElement = title !== undefined ?
+    <DialogTitle
+      title={title}
+    /> :
+    undefined
+
+  const contentElement = typeof content === 'string' ? (
+    <Text>
+      {content}
+    </Text>
+  ) : content
+
+  const onClickBackdrop = () => {
+    if (clickBackdropDismiss) {
+      DialogManager.dismiss()
+    }
+  }
+
+  let footerElement
+  if (actions !== undefined && actions.length > 0) {
+    footerElement = (
+      <DialogFooter
+        style={{
+          padding: 10,
+          justifyContent: 'flex-end',
+        }}
+      >
+        {actions.map(({ buttonStyle= {}, isCancel, label, onPress, textStyle }, index) => {
+          const _buttonStyle = Object.assign(buttonStyle, index > 0 ? { marginLeft: 10 } : {})
+
+          return (
+            <DialogButton
+              key={`button${index}`}
+              // label={label}
+              // mode={'contained'}
+              // onPress={onPress}
+              // labelStyle={{
+              //   // color: '#000',
+              // }}
+              isCancel={isCancel}
+              text={label}
+              onPress={() => {
+                onPress()
+              }}
+              type={'round'}
+              textStyle={textStyle}
+              style={_buttonStyle}
+            />
+          )
+        })}
+      </DialogFooter>
+    )
+  }
+
+  DialogManager.show({
+    width: 0.8,
+    visible: true,
+    modalTitle: titleElement,
+    children: (
+      <DialogContent>
+        {contentElement}
+      </DialogContent>
+    ),
+    footer: footerElement,
+    onTouchOutside: onClickBackdrop,
+  }, () => {
+    // callback on show
+  })
+}
+
+export const dismiss = (callback: () => void|Promise<void> = () => { }) => {
+  DialogManager.dismiss(() => {
+    // dismiss callback
+    void callback()
+  })
+}
+
+export const dismissAll = (callback: () => void |Promise<void>= () => { }) => {
+  DialogManager.dismissAll(() => {
+    // dismiss callback
+    void callback()
+  })
+}
+
+const Dialog = {
+  confirm,
+  info,
+  show,
+  dismiss,
+  dismissAll,
+  apiError,
+}
+
+export default Dialog

package/template/src/components/basic/RootDialog/Manager.tsx

@@ -0,0 +1,110 @@
+import * as momont from 'moment'
+import React from 'react'
+import RootSiblings from 'react-native-root-siblings'
+
+import logger from '@/infrastructures/common/logger'
+import Timeout from '@/infrastructures/common/Timeout'
+
+import { BaseDialog, Handle as Dialog } from './components/BaseDialog'
+// import Dialog from './Dialog';
+import type { DialogProps } from './type'
+
+const DESTROY_TIMEOUT: number = 500
+
+
+class Manager {
+
+  dialogs: RootSiblings[]
+  dialogsRef: Dialog[]
+  constructor() {
+    this.dialogs = []
+    this.dialogsRef = []
+  }
+
+  get currentDialog() {
+    return this.dialogs[this.dialogs.length - 1]
+  }
+
+  addRef = (ref: Dialog) => {
+    this.dialogsRef.push(ref)
+  }
+
+  add = (props: DialogProps, callback: () => void): void => {
+
+    const dialog = new RootSiblings(
+      <BaseDialog
+        ref={(ref) => {
+          if (ref) {
+            this.addRef(ref)
+          }
+        }}
+        {...props}
+      />,
+      callback)
+    // dialog.id = momont().getTimestamp()
+    this.dialogs.push(dialog)
+  }
+
+  destroy(): void {
+    const dialog = this.dialogs.pop()
+    logger.log('destroy dialog')
+    setTimeout(() => {
+      dialog?.destroy()
+    }, DESTROY_TIMEOUT)
+  }
+
+  onDialogDismissed = (onDismissed: () => void = () => {}): void => {
+    onDismissed()
+    this.destroy()
+  }
+
+  update = (props: DialogProps, callback: () => void = () => {}): void => {
+    this.currentDialog.update(
+      (
+        <BaseDialog
+          {...props}
+        />
+      ),
+      callback,
+    )
+  }
+
+  show = (props: DialogProps, callback: () => void = () => {}): void => {
+    this.add({
+      ...props,
+      visible: true,
+    }, callback)
+  }
+
+  dismiss = (callback: () => void = () => {}): void => {
+    // this.update({
+    //   visible: false,
+    // }, callback);
+    logger.log('dialogmanager dismiss')
+    const d = this.dialogsRef.pop()
+    const onDismissed = () => {
+      this.destroy()
+      const timeout = new Timeout<string>({ ms: DESTROY_TIMEOUT/2 })
+      void timeout.start()
+        .catch(() => {
+          // timeout
+        })
+        .finally(() => {
+          callback()
+        })
+    }
+    if (d) {
+      d.dismiss(onDismissed)
+    } else {
+      onDismissed()
+    }
+  }
+
+  dismissAll = (callback: () => void = () => {}): void => {
+    this.dialogs.forEach(() => {
+      this.dismiss(callback)
+    })
+  }
+}
+
+export default Manager

package/template/src/components/basic/RootDialog/animations/Animation.ts

@@ -0,0 +1,29 @@
+import { Animated } from 'react-native'
+
+export type AnimationConfig = {
+  initialValue?: number
+  useNativeDriver?: boolean
+}
+
+// Base Animation class
+export default class Animation {
+  useNativeDriver: boolean
+  animate: Animated.Value
+
+  constructor({ initialValue = 0, useNativeDriver = true }: AnimationConfig = {}) {
+    this.animate = new Animated.Value(initialValue)
+    this.useNativeDriver = useNativeDriver
+  }
+
+  in(onFinished?: () => void): void {
+    throw Error('not implemented yet')
+  }
+
+  out(onFinished?: () => void): void {
+    throw Error('not implemented yet')
+  }
+
+  getAnimations(): Record<string, unknown> {
+    throw Error('not implemented yet')
+  }
+}

package/template/src/components/basic/RootDialog/animations/FadeAnimation.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Animated } from 'react-native'
+
+import Animation, { AnimationConfig } from './Animation'
+
+type FadeAnimationConfig = AnimationConfig & {
+  animationDuration?: number
+}
+
+export default class FadeAnimation extends Animation {
+  animationDuration: number
+
+  constructor({ animationDuration = 200, initialValue = 0, useNativeDriver = false }: FadeAnimationConfig = {}) {
+    super({
+      initialValue,
+      useNativeDriver,
+    })
+    this.animationDuration = animationDuration
+  }
+
+  in(onFinished: () => void = () => {}): void {
+    Animated.timing(this.animate, {
+      toValue: 1,
+      duration: this.animationDuration,
+      useNativeDriver: this.useNativeDriver,
+    }).start(onFinished)
+  }
+
+  out(onFinished: () => void = () => {}): void {
+    Animated.timing(this.animate, {
+      toValue: 0,
+      duration: this.animationDuration,
+      useNativeDriver: this.useNativeDriver,
+    }).start(onFinished)
+  }
+
+  getAnimations(): Record<string, unknown> {
+    return { opacity: this.animate }
+  }
+}

package/template/src/components/basic/RootDialog/animations/ScaleAnimation.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Animated } from 'react-native'
+
+import Animation from './Animation'
+
+export default class ScaleAnimation extends Animation {
+  in(onFinished: () => void = () => {}): void {
+    Animated.spring(this.animate, {
+      toValue: 1,
+      velocity: 0,
+      tension: 65,
+      friction: 7,
+      useNativeDriver: this.useNativeDriver,
+    }).start(onFinished)
+  }
+
+  out(onFinished: () => void = () => {}): void {
+    Animated.timing(this.animate, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: this.useNativeDriver,
+    }).start(onFinished)
+  }
+
+  getAnimations(): Record<string, unknown> {
+    return {
+      transform: [
+        {
+          scale: this.animate.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+          }),
+        },
+      ],
+    }
+  }
+}

package/template/src/components/basic/RootDialog/animations/SlideAnimation.ts

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Animated, Dimensions } from 'react-native'
+
+import Animation, {  AnimationConfig } from './Animation'
+
+const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window')
+
+type SlideFrom = 'top' | 'bottom' | 'left' | 'right'
+type SlideAnimationConfig = AnimationConfig & {
+  slideFrom?: SlideFrom
+}
+
+export default class SlideAnimation extends Animation {
+  slideFrom: SlideFrom
+
+  static SLIDE_FROM_TOP:SlideFrom = 'top'
+  static SLIDE_FROM_BOTTOM:SlideFrom = 'bottom'
+  static SLIDE_FROM_LEFT:SlideFrom = 'left'
+  static SLIDE_FROM_RIGHT:SlideFrom = 'right'
+
+  constructor({ initialValue = 0, useNativeDriver = true, slideFrom = SlideAnimation.SLIDE_FROM_BOTTOM }: SlideAnimationConfig = {}) {
+    super({
+      initialValue,
+      useNativeDriver,
+    })
+    this.slideFrom = slideFrom
+  }
+
+  in(onFinished: () => void = () => {}, options = {}): void {
+    Animated.spring(this.animate, {
+      toValue: 1,
+      velocity: 0,
+      tension: 65,
+      friction: 11,
+      useNativeDriver: this.useNativeDriver,
+      ...options,
+    }).start(onFinished)
+  }
+
+  out(onFinished: () => void = () => {}, options = {}): void {
+    Animated.spring(this.animate, {
+      toValue: 0,
+      velocity: 0,
+      tension: 65,
+      friction: 11,
+      useNativeDriver: this.useNativeDriver,
+      ...options,
+    }).start(onFinished)
+  }
+
+  getAnimations(): Record<string, unknown> {
+    const transform = []
+    if (this.slideFrom === SlideAnimation.SLIDE_FROM_TOP) {
+      transform.push({
+        translateY: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-SCREEN_HEIGHT, 0],
+        }),
+      })
+    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_BOTTOM) {
+      transform.push({
+        translateY: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [SCREEN_HEIGHT, 0],
+        }),
+      })
+    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_LEFT) {
+      transform.push({
+        translateX: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-SCREEN_WIDTH, 0],
+        }),
+      })
+    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_RIGHT) {
+      transform.push({
+        translateX: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [SCREEN_WIDTH, 0],
+        }),
+      })
+    } else {
+      throw new Error(`
+        slideFrom: ${this.slideFrom} not supported. 'slideFrom' must be 'top' | 'bottom' | 'left' | 'right'
+      `)
+    }
+
+    return { transform }
+  }
+}

package/template/src/components/basic/RootDialog/components/Backdrop.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { Component } from 'react'
+import { Animated, StyleSheet, TouchableOpacity } from 'react-native'
+
+import { PressableOpacity } from '@/components/basic'
+
+import type { BackdropProps } from '../type'
+
+export default class Backdrop extends Component<BackdropProps> {
+  static defaultProps = {
+    backgroundColor: '#000',
+    opacity: 0.5,
+    animationDuration: 2000,
+    visible: false,
+    useNativeDriver: true,
+    onPress: () => { },
+  }
+
+  componentDidUpdate(prevProps: BackdropProps) {
+    const {
+      animationDuration: duration, opacity, useNativeDriver, visible,
+    } = this.props
+    if (prevProps.visible !== visible) {
+      const toValue = visible ? opacity : 0
+      Animated.timing(this.opacity, {
+        toValue,
+        duration,
+        useNativeDriver: useNativeDriver === undefined ? false : useNativeDriver,
+      }).start()
+    }
+  }
+
+  setOpacity = (value: number) => {
+    this.opacity.setValue(value)
+  }
+
+  opacity = new Animated.Value(0)
+
+  render() {
+    const { backgroundColor, onPress, pointerEvents } = this.props
+    const { opacity } = this
+
+    return (
+      <Animated.View
+        pointerEvents={pointerEvents}
+        style={[
+          StyleSheet.absoluteFill, {
+            backgroundColor,
+            opacity,
+          },
+        ]}
+      >
+        <PressableOpacity
+          onPress={onPress}
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
+    )
+  }
+}