@ccrf01/react-native-template 0.0.16

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

@@ -0,0 +1,42 @@
+import React, { Children, cloneElement } from 'react'
+import { PixelRatio, StyleSheet, View } from 'react-native'
+
+import type { DialogFooterProps } from '../type'
+
+const styles = StyleSheet.create({
+  border: {
+    borderColor: '#CCD0D5',
+    borderTopWidth: 1 / PixelRatio.get(),
+  },
+  actionsVertical: {
+    height: 200,
+    flexDirection: 'column',
+  },
+  actionsHorizontal: { flexDirection: 'row' },
+})
+
+const DialogActionList = ({ bordered = true, children, style }: DialogFooterProps) => {
+  const containerStyle = children.length > 2
+    ? styles.actionsVertical
+    : styles.actionsHorizontal
+
+  const border = bordered
+    ? styles.border
+    : null
+
+  // apply horizontal border if actions legnth is 2 & bordered is true
+  // const content = children.length === 2
+  //   ? Children.map(children, ((child, index) => cloneElement(child, {
+  //     bordered: (1 % index === 0 && bordered),
+  //   })))
+  //   : children
+  // const content = children
+
+  return (
+    <View style={[containerStyle, border, style]}>
+      {children}
+    </View>
+  )
+}
+
+export default DialogActionList

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { PixelRatio, Platform, StyleSheet, View } from 'react-native'
+import { Text } from 'react-native-paper'
+
+import useTheme from '@/hooks/useTheme'
+
+import type { DialogTitleProps } from '../type'
+
+const isAndroid = Platform.OS === 'android'
+
+const styles = StyleSheet.create({
+  title: {
+    padding: 14,
+    paddingHorizontal: 18,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  titleBar: {
+    borderBottomWidth: 1 / PixelRatio.get(),
+    backgroundColor: '#F9F9FB',
+    borderColor: '#DAD9DC',
+  },
+  text: {
+    // fontWeight: isAndroid ? '400' : '500',
+    // fontFamily: isAndroid ? 'sans-serif-medium' : 'System',
+    // fontSize: isAndroid ? 19 : 15,
+    color: '#151822',
+    // ...titleFontStyle,
+  },
+})
+
+const ModalTitle = ({
+  align = 'center', hasTitleBar = true, style, textStyle, title,
+}: DialogTitleProps) => {
+  const titleBar = hasTitleBar ? styles.titleBar : null
+  const titleAlign = { alignItems: align }
+  const { Fonts } = useTheme()
+
+  return (
+    <View style={[styles.title, titleAlign, titleBar, style]}>
+      <Text style={[
+        styles.text,
+        Fonts.title,
+        textStyle,
+      ]}
+      >
+        {title}
+      </Text>
+    </View>
+  )
+}
+
+export default ModalTitle

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

@@ -0,0 +1,271 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { isArray } from 'lodash'
+import React, { Component, ReactNode } from 'react'
+import {
+  Animated,
+  Dimensions,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  PanResponder,
+  PanResponderGestureState,
+  ViewStyle,
+} from 'react-native'
+
+// import type { ViewLayoutEvent } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { DragEvent, SwipeDirection } from '../type'
+
+type Props = {
+  style?: ViewStyle
+  onMove?: (event: DragEvent) => void
+  onSwiping?: (event: DragEvent) => void
+  onRelease?: (event: DragEvent) => void
+  onSwipingOut?: (event: DragEvent) => void
+  onSwipeOut?: (event: DragEvent) => void
+  swipeThreshold?: number
+  swipeDirection?: SwipeDirection | SwipeDirection[]
+  children: ({ onLayout, pan }: {
+    onLayout: (event: LayoutChangeEvent) => void
+    pan: Animated.ValueXY
+  }) => ReactNode
+}
+type State = {
+  x: number
+  y: number
+}
+
+export default class DraggableView extends Component<Props, State> {
+  static defaultProps = {
+    style: null,
+    onMove: () => { },
+    onSwiping: () => { },
+    onSwipingOut: () => { },
+    onSwipeOut: null,
+    onRelease: () => { },
+    swipeThreshold: 100,
+    swipeDirection: [],
+  }
+
+  pan: Animated.ValueXY
+  allowedDirections: SwipeDirection[]
+  layout: LayoutRectangle
+  panEventListenerId: any
+  currentSwipeDirection: string | null
+  constructor(props: Props) {
+    super(props)
+
+    this.pan = new Animated.ValueXY()
+    this.allowedDirections = isArray(props.swipeDirection) ? props.swipeDirection?.slice() || [] : (props.swipeDirection ? [props.swipeDirection] : [])
+    this.layout = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    }
+    this.currentSwipeDirection = null
+    this.state = {
+      x: 0,
+      y: 0,
+    }
+  }
+
+  componentDidMount() {
+    this.panEventListenerId = this.pan.addListener((axis) => {
+      this.setState({
+        ...axis,
+      })
+      if (this.props.onMove) {
+        this.props.onMove(this.createDragEvent(axis))
+      }
+    })
+  }
+
+  componentWillUnmount() {
+    this.pan.removeListener(this.panEventListenerId)
+  }
+
+  onLayout = (event: LayoutChangeEvent) => {
+    this.layout = event.nativeEvent.layout
+  }
+
+  getSwipeDirection(gestureState: PanResponderGestureState) {
+    if (this.isValidHorizontalSwipe(gestureState)) {
+      return (gestureState.dx > 0) ? 'right' : 'left'
+    } else if (this.isValidVerticalSwipe(gestureState)) {
+      return (gestureState.dy > 0) ? 'down' : 'up'
+    }
+
+    return null
+  }
+
+  getDisappearDirection() {
+    const { height, width } = Dimensions.get('window')
+    const vertical = ((height / 2) + (this.layout.height / 2))
+    const horizontal = ((width / 2) + (this.layout.width / 2))
+    // let toValue = {}
+    if (this.currentSwipeDirection === 'up') {
+      return  {
+        x: 0,
+        y: -vertical,
+      }
+    } else if (this.currentSwipeDirection === 'down') {
+      return {
+        x: 0,
+        y: vertical,
+      }
+    } else if (this.currentSwipeDirection === 'left') {
+      return {
+        x: -horizontal,
+        y: 0,
+      }
+    } else if (this.currentSwipeDirection === 'right') {
+      return {
+        x: horizontal,
+        y: 0,
+      }
+    }
+
+    return null
+  }
+
+  isValidHorizontalSwipe({ dy, vx }: { vx: number; dy: number }) {
+    return this.isValidSwipe(vx, dy)
+  }
+
+  isValidVerticalSwipe({ dx, vy }: { vy: number; dx: number }) {
+    return this.isValidSwipe(vy, dx)
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isValidSwipe(velocity: number, directionalOffset: number) {
+    const velocityThreshold = 0.3
+    const directionalOffsetThreshold = 80
+
+    // eslint-disable-next-line max-len
+    return Math.abs(velocity) > velocityThreshold && Math.abs(directionalOffset) < directionalOffsetThreshold
+  }
+
+  isAllowedDirection({ dx, dy }: { dx: number; dy: number }) {
+    const draggedDown = dy > 0
+    const draggedUp = dy < 0
+    const draggedLeft = dx < 0
+    const draggedRight = dx > 0
+    const isAllowedDirection = (d: any) => (
+      this.currentSwipeDirection === d && this.allowedDirections.includes(d)
+    )
+    if (draggedDown && isAllowedDirection('down')) {
+      return true
+    } else if (draggedUp && isAllowedDirection('up')) {
+      return true
+    } else if (draggedLeft && isAllowedDirection('left')) {
+      return true
+    } else if (draggedRight && isAllowedDirection('right')) {
+      return true
+    }
+
+    return false
+  }
+
+  createDragEvent(axis: { x: number; y: number }): DragEvent {
+    return {
+      axis,
+      layout: this.layout,
+      swipeDirection: this.currentSwipeDirection,
+    }
+  }
+
+  panResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: (evt, gestureState) => (
+      gestureState.dx !== 0 && gestureState.dy !== 0
+    ),
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+      const isVerticalSwipe = (d: any) => ['up', 'down'].includes(d)
+      const isHorizontalSwipe = (d: any) => ['left', 'right'].includes(d)
+
+      const newSwipeDirection = this.getSwipeDirection(gestureState)
+      const isSameDirection =
+        isVerticalSwipe(this.currentSwipeDirection) === isVerticalSwipe(newSwipeDirection) ||
+        isHorizontalSwipe(this.currentSwipeDirection) === isHorizontalSwipe(newSwipeDirection)
+      // newDirection & currentSwipeDirection must be same direction
+      if (newSwipeDirection && isSameDirection) {
+        this.currentSwipeDirection = newSwipeDirection
+      }
+      if (this.isAllowedDirection(gestureState)) {
+        let animEvent = {}
+        if (isVerticalSwipe(this.currentSwipeDirection)) {
+          animEvent = { dy: this.pan.y }
+        } else if (isHorizontalSwipe(this.currentSwipeDirection)) {
+          animEvent = { dx: this.pan.x }
+        }
+        Animated.event([null, animEvent])(event, gestureState)
+        if (this.props.onSwiping) {
+          this.props.onSwiping(this.createDragEvent({
+            x: this.state.x,
+            y: this.state.y,
+          }))
+        }
+      }
+    },
+    onPanResponderRelease: () => {
+      this.pan.flattenOffset()
+      const event = this.createDragEvent({
+        x: this.state.x,
+        y: this.state.y,
+      })
+      // on swipe out
+      if (
+        this.props.onSwipeOut &&
+        Math.abs(this.state.x) > (this.props.swipeThreshold || 100) ||
+        Math.abs(this.state.y) > (this.props.swipeThreshold || 100)
+      ) {
+        if (this.props.onSwipingOut) this.props.onSwipingOut(event)
+        const toValue = this.getDisappearDirection()
+        if (toValue !== null) {
+          Animated.spring(this.pan, {
+            toValue: toValue,
+            velocity: 0,
+            tension: 65,
+            friction: 11,
+            useNativeDriver: false,
+          }).start(() => {
+            if (this.props.onSwipeOut) this.props.onSwipeOut(event)
+          })
+        }
+
+        return
+      }
+      // on release
+      this.currentSwipeDirection = null
+      if (this.props.onRelease) this.props.onRelease(event)
+      Animated.spring(this.pan, {
+        toValue: {
+          x: 0,
+          y: 0,
+        },
+        velocity: 0,
+        tension: 65,
+        friction: 11,
+        useNativeDriver: false,
+      }).start()
+    },
+  })
+
+  render() {
+    const { children: renderContent, style } = this.props
+    const content = renderContent({
+      pan: this.pan,
+      onLayout: this.onLayout,
+    })
+
+    return (
+      <Animated.View
+        {...this.panResponder.panHandlers}
+        style={style}
+      >
+        { content}
+      </Animated.View >
+    )
+  }
+}

package/template/src/components/basic/RootDialog/index.ts

@@ -0,0 +1,21 @@
+import FadeAnimation from './animations/FadeAnimation'
+import ScaleAnimation from './animations/ScaleAnimation'
+import SlideAnimation from './animations/SlideAnimation'
+import DialogButton from './components/DialogButton'
+import DialogContent from './components/DialogContent'
+import DialogFooter from './components/DialogFooter'
+import DialogTitle from './components/DialogTitle'
+import Dialog from './Dialog'
+import DialogManager from './Manager'
+
+export {
+  Dialog,
+  DialogButton,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  FadeAnimation,
+  ScaleAnimation,
+  SlideAnimation,
+}
+export default new DialogManager()

package/template/src/components/basic/RootDialog/type.ts

@@ -0,0 +1,102 @@
+import { PropsWithChildren, ReactElement, ReactNode } from 'react'
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import { IButtonProps } from '@/components/basic/Button'
+
+import Animation from './animations/Animation'
+import DialogButton from './components/DialogButton'
+
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right'
+
+export type DragEvent = {
+  axis: {
+    x: number
+    y: number
+  }
+  layout: {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
+  swipeDirection: string | null
+}
+
+export type DialogProps = PropsWithChildren<{
+  visible: boolean
+  children: ReactElement<any>
+  width?: number
+  height?: number
+  rounded?: boolean
+  hasOverlay?: boolean
+  overlayPointerEvents?: 'auto' | 'none'
+  overlayBackgroundColor?: string
+  overlayOpacity?: number
+  modalTitle?: ReactElement<any>
+  modalAnimation?: Animation
+  modalStyle?: StyleProp<ViewStyle>
+  style?: StyleProp<ViewStyle>
+  animationDuration?: number
+  onTouchOutside?: () => void
+  onHardwareBackPress?: () => boolean
+  onShow?: () => void
+  onDismiss?: () => void
+  footer?: ReactElement<any>
+  onMove?: (event: DragEvent) => void
+  onSwiping?: (event :DragEvent) => void
+  onSwipeRelease?: (event: DragEvent) => void
+  onSwipingOut?: (event: DragEvent) => void
+  onSwipeOut?: (event: DragEvent) => void
+  swipeDirection?: SwipeDirection | SwipeDirection[]
+  swipeThreshold?: number
+  useNativeDriver?: boolean
+  theme?: any
+}>
+
+export type DialogFooterActionList = ReactElement<typeof DialogButton>[]
+
+export type DialogFooterProps = {
+  children: DialogFooterActionList
+  style?: StyleProp<ViewStyle>
+  bordered?: boolean
+}
+
+// export type DialogButtonProps = {
+//   label: string
+//   onPress: () => void
+//   mode?: 'text' | 'outlined' | 'contained'
+//   align?: 'center' | 'flex-start' | 'flex-end'
+//   color?: string
+//   contentStyle?: StyleProp<ViewStyle>
+//   style?: StyleProp<ViewStyle>
+//   labelStyle?: StyleProp<TextStyle>
+//   disabled?: boolean
+//   activeOpacity?: number
+// }
+
+export type DialogButtonProps = IButtonProps & {
+  isCancel?: boolean
+}
+
+export type DialogTitleProps = {
+  title: string
+  style?: StyleProp<ViewStyle>
+  textStyle?: any
+  align?: 'flex-start'|'flex-end'|'center'
+  hasTitleBar?: boolean
+}
+
+export type DialogContentProps = {
+  children: any
+  style?: StyleProp<ViewStyle>
+}
+
+export type BackdropProps = {
+  visible: boolean
+  opacity: number
+  onPress?: () => void
+  backgroundColor?: string
+  animationDuration?: number
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'
+  useNativeDriver?: boolean
+}

package/template/src/components/basic/Text/index.tsx

@@ -0,0 +1,8 @@
+import { customText } from 'react-native-paper'
+
+import { FontType } from '@/theme/Fonts'
+
+type Variant = keyof FontType
+const Text = customText<Variant>()
+
+export default Text

package/template/src/components/basic/index.ts

@@ -0,0 +1,35 @@
+import BackButton from './BackButton'
+import Body  from './Body'
+import Button from './Button'
+import ButtonGroup from './ButtonGroup'
+import Container  from './Container'
+import Content from './Content'
+import DropDown from './DropDown'
+import Header from './Header'
+import IconX from './Icons'
+import InputLabel from './InputLabel'
+import LoadingOverlay from './LoadingOverlay'
+import MaterialTextInput from './MaterialTextInput'
+import Picker from './Picker'
+import PressableOpacity from './PressableOpacity'
+import DialogManager from './RootDialog'
+import Text from './Text'
+
+export {
+  BackButton,
+  Body,
+  Button,
+  ButtonGroup,
+  Container,
+  Content,
+  DialogManager,
+  DropDown,
+  Header,
+  IconX,
+  InputLabel,
+  LoadingOverlay,
+  MaterialTextInput,
+  Picker,
+  PressableOpacity,
+  Text,
+}

package/template/src/configs/constants/type/APIStatus.type.ts

@@ -0,0 +1,8 @@
+export const APIStatus = {
+  IDLE: 'idle',
+  LOADING: 'loading',
+  SUCCEEDED: 'succeeded',
+  FAILED: 'failed',
+} as const
+
+export type APIStatus = typeof APIStatus[keyof typeof APIStatus]

package/template/src/configs/constants/type/Locale.type.ts

@@ -0,0 +1,7 @@
+export const Locale = {
+  enUS: 'en_US',
+  zhTW: 'zh_TW',
+  zhCN: 'zh_CN',
+}
+
+export type Locale = typeof Locale[keyof typeof Locale]

package/template/src/configs/constants/type/StorageKey.type.ts

@@ -0,0 +1,7 @@
+export const StorageKey = {
+  token: 'token',
+  appLang: 'appLang',
+  deviceToken: 'deviceToken',
+} as const
+
+export type StorageKey = typeof StorageKey[keyof typeof StorageKey]

package/template/src/configs/constants/type/ThemeType.type.ts

@@ -0,0 +1,6 @@
+export const ThemeType = {
+  LIGHT: 'light',
+  DARK: 'dark',
+} as const
+
+export type ThemeType = typeof ThemeType[keyof typeof ThemeType]

package/template/src/configs/constants/type/index.ts

@@ -0,0 +1,11 @@
+import { APIStatus } from './APIStatus.type'
+import { Locale } from './Locale.type'
+import { StorageKey } from './StorageKey.type'
+import { ThemeType } from './ThemeType.type'
+
+export {
+  APIStatus,
+  Locale,
+  StorageKey,
+  ThemeType,
+}

package/template/src/configs/index.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+export const BundleId = {
+  ios: 'com.ccctech.exampleapp',
+  android: 'com.ccctech.exampleapp',
+}
+
+export const PW_MAX_LENGTH = 6
+export const API_ENDPOINT = 'http://experia.loyalty.loongxy.com/loyalty/api/app/'
+export const API_TIMEOUT = 30000
+export const PRELOAD_IMAGE_URL = [
+  'https://scontent-tpe1-1.xx.fbcdn.net/v/t31.18172-8/13415650_10153570662337190_2356323871202729430_o.jpg?_nc_cat=1&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=XifvSQERhSQAX-Ayhjj&_nc_ht=scontent-tpe1-1.xx&oh=00_AfBr02YqWv1kH_tJOyCuFT_nCiQjK_hhrRSPplAFRSRkFQ&oe=640A7806',
+  'https://img.freepik.com/free-vector/abstract-triangular-arrow-logo-sign-symbol-vector-illustration_1284-46135.jpg?w=1380&t=st=1675833270~exp=1675833870~hmac=a080104c6c06e1bc944f31ca81660525e06378e53044ee1d993308420456e92b',
+]
+
+export const RESEND_OTP_TIME = 30
+export const POPUP_TIME = 3
+
+export const FONT_FAMILY = {
+  ENG: undefined, // ArialRoundedMTBold, Arial Rounded MT Bold
+  CHI: undefined, // MicrosoftYaHei, Microsoft YaHei
+}

package/template/src/contexts/ThemeContext.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+
+import { Theme } from '@/theme/types'
+
+export const ThemeContext = React.createContext<Theme|undefined>(undefined)
+ThemeContext.displayName = 'ThemeContext'

package/template/src/hooks/useAppLoading.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect } from 'react'
+import { BackHandler, Keyboard } from 'react-native'
+import { useSelector } from 'react-redux'
+
+import { hideAllLoading, hideLoading, showLoading } from '@/redux/reducers/nonPersistSlice'
+import { selectLoading } from '@/redux/selectors/nonPersist'
+import { useAppDispatch } from '@/redux/store'
+
+export default () => {
+  const dispatch = useAppDispatch()
+
+  return {
+    hideLoading: () => {
+      Keyboard.dismiss()
+      dispatch(hideLoading())
+    },
+    showLoading: () => {
+      Keyboard.dismiss()
+      dispatch(showLoading())
+    },
+    hideAllLoading: () => {
+      Keyboard.dismiss()
+      dispatch(hideAllLoading())
+    },
+  }
+}

package/template/src/hooks/useAppState.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
+
+type Setting = {
+  onChange?: (newState: AppStateStatus) => void
+  onForeground?: () => void
+  onBackground?: () => void
+}
+
+const isValidFunction = (func: unknown) => {
+  return func && typeof func === 'function'
+}
+
+const useAppState = (settings: Setting) => {
+  const { onBackground = () => {}, onChange = (value) => {}, onForeground = () => {} } = settings
+  const [appState, setAppState] = useState<AppStateStatus>(AppState.currentState)
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (nextAppState === 'active' && appState !== 'active') {
+        onForeground()
+      } else if (appState === 'active' && nextAppState.match(/inactive|background/)) {
+        onBackground()
+      }
+      setAppState(nextAppState)
+      onChange(nextAppState)
+    }
+    const unsub = AppState.addEventListener('change', handleAppStateChange)
+
+    return () => unsub.remove()
+  })
+
+  return { appState }
+}
+
+export default useAppState