@ccrf01/react-native-template 0.0.16

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

@@ -0,0 +1,113 @@
+import React, { forwardRef, PropsWithChildren, useCallback, useImperativeHandle, useState } from 'react'
+import { StyleSheet, TouchableOpacity, TouchableOpacityProps, View } from 'react-native'
+import Modal, { ModalProps } from 'react-native-modal'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { PressableOpacity } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import { rgbToHex } from '@/infrastructures/common/colorUtils'
+import logger from '@/infrastructures/common/logger'
+
+export type ExpandableOverlayMethods = {
+  openExpandable: () => void
+  closeExpandable: () => void
+  toggleExpandable: () => void
+}
+export interface IRenderCustomOverlayProps extends ExpandableOverlayMethods {
+  visible: boolean
+}
+export type ExpandableOverlayProps = TouchableOpacityProps &
+{
+
+  /**
+   * The content to render inside the expandable modal/dialog
+   */
+  expandableContent?: React.ReactElement
+  /**
+   * Whether to render a modal top bar (relevant only for modal)
+   */
+  showTopBar?: boolean
+  /**
+   * A custom overlay to render instead of Modal or Dialog components
+   */
+  renderCustomOverlay?: (props: IRenderCustomOverlayProps) => React.ReactElement | undefined | null
+  /**
+   * Disabled opening expandable overlay
+   */
+  disabled?: boolean
+  modalProps?: Partial<Omit<ModalProps, 'children'>>
+
+  childrenPointEvents?: 'box-none' | 'none' | 'box-only' | 'auto'
+  children?: React.ReactElement
+}
+
+const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
+  const { Colors } = useTheme()
+  const insets = useSafeAreaInsets()
+  const {
+    children,
+    childrenPointEvents = 'none',
+    // useDialog,
+    disabled,
+    // dialogProps,
+    expandableContent,
+    // topBarProps,
+    modalProps,
+    onPress,
+    renderCustomOverlay,
+    showTopBar,
+    // customValue,
+    testID,
+    ...others
+  } = props
+  const [visible, setExpandableVisible] = useState(false)
+  const { style: modalStyle, ...othersModalProps } = modalProps || {}
+  const openExpandable = useCallback(() => {
+    setExpandableVisible(true)
+    onPress?.({} as any)
+  }, [onPress])
+  const closeExpandable = useCallback(() => {
+    setExpandableVisible(false)
+    // modalProps?.onDismiss?.()
+  }, [])
+  const toggleExpandable = useCallback(() => (visible ? closeExpandable() : openExpandable()),
+    [visible, openExpandable, closeExpandable])
+  useImperativeHandle(ref, () => ({
+    openExpandable,
+    closeExpandable,
+    toggleExpandable,
+  }))
+
+  const modalContainerStyle = {
+    margin: 0,
+    // paddingBottom: insets.bottom,
+    // paddingTop: insets.top,
+  }
+  const backdrop = rgbToHex(Colors.backdrop, true)
+
+  const renderModal = () => {
+    return (
+      <Modal
+        testID={`${testID || ''}.overlay`}
+        backdropColor={backdrop.hex}
+        backdropOpacity={backdrop.alpha}
+        isVisible={visible}
+        onDismiss={closeExpandable}
+        onBackdropPress={closeExpandable}
+        {...othersModalProps}
+        style={[modalContainerStyle, modalStyle]}
+      >
+        {expandableContent}
+      </Modal>
+    )
+  }
+
+  return (
+    <PressableOpacity {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
+      <View pointerEvents={childrenPointEvents}>{children}</View>
+      {renderModal()}
+    </PressableOpacity>
+  )
+}
+
+export default forwardRef<ExpandableOverlayMethods, ExpandableOverlayProps>(ExpandableOverlay)

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

@@ -0,0 +1,216 @@
+import { StackHeaderProps } from '@react-navigation/stack'
+import React, { useCallback } from 'react'
+import { Animated, StatusBar, View } from 'react-native'
+import { AutoSizeText, ResizeTextMode } from 'react-native-auto-size-text'
+import { Appbar, Text } from 'react-native-paper'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import Svg, { Path } from 'react-native-svg'
+
+import useFontFamily from '@/hooks/useFontFamily'
+import useTheme from '@/hooks/useTheme'
+import logger from '@/infrastructures/common/logger'
+import { Theme } from '@/theme/types'
+import { normalize } from '@/utils'
+
+import BackButton from '../BackButton'
+
+// const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
+
+// const HEADER_HEIGHT = 48
+export type HeaderProps = StackHeaderProps & Partial<{
+  backgroundColor: string
+  withRoundedSharp?: boolean
+  onBackPress?: () => boolean
+}>
+const Header: React.FC<HeaderProps> = ({
+  back,
+  backgroundColor,
+  navigation,
+  onBackPress,
+  options,
+  progress,
+  route,
+  withRoundedSharp,
+}: HeaderProps) => {
+  const { Colors, Fonts, Gutters, Param: { headerHeight } } = useTheme()
+  const inset = useSafeAreaInsets()
+  const { headerMode, presentation } = options
+  const fontFamily = useFontFamily()
+
+  const path = React.useMemo(
+    () =>
+      [
+        'M 0 0',
+        'C 0 0 50 0 50 50',
+        'L 50 0',
+        'L 0 0',
+      ].join(' '),
+    []
+  )
+
+  // const { options } = scene.descriptor
+  const navigationName = route.name
+  logger.log('navigationName', navigationName)
+  const title =
+    options.headerTitle !== undefined && typeof options.headerTitle === 'string'
+      ? options.headerTitle
+      : options.title !== undefined
+        ? options.title
+        : route.name
+  const progressAnimation = Animated.add(progress.current, progress.next || 0)
+  const opacity = progressAnimation.interpolate({
+    inputRange: [0, 1, 2],
+    outputRange: [0, 1, 0],
+  })
+  const progress2 = Animated.add(progress.current, progress.next || 0)
+  const translateY = progress2.interpolate({
+    inputRange: [0, 2, 4],
+    outputRange: [0, -28, 0],
+  })
+
+  const goBack = useCallback(
+    () => {
+      navigation.goBack()
+    },
+    []
+  )
+
+  const { headerLeft, headerRight } = options
+
+  return (
+    <>
+      <Animated.View style={{
+        opacity,
+        // transform: [
+        //   {
+        //     translateY: translateY,
+        //   },
+        // ],
+      }}
+      >
+        {/* <StatusBar barStyle={'light-content'}/> */}
+        <Appbar
+          style={{
+            backgroundColor: backgroundColor ? backgroundColor : Colors.primary,
+            paddingTop: presentation === 'card' ? inset.top : 0,
+            height: headerHeight + (presentation === 'card' ? inset.top : 0),
+          }}
+        >
+          {back || headerLeft ?
+            <View
+              style={[
+                Gutters.smallLPadding,
+                // Gutters.smallLMargin,
+                { flex: 1, flexDirection: 'row' },
+              ]}
+            >
+              {headerLeft ? headerLeft({}) : <BackButton color={Colors.white} onPress={goBack} />}
+            </View> : null
+          }
+          <View
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              flexDirection: 'row',
+              alignItems: 'center',
+              alignContent: 'center',
+              justifyContent: 'center',
+              height: headerHeight,
+            }}
+            pointerEvents="box-none"
+          >
+            <View
+              pointerEvents="box-none"
+              style={{
+                flex: 1,
+                width: '100%',
+                height: '100%',
+                paddingLeft: 50,
+                paddingRight: 50,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              {/* <Appbar.Content
+                title={title}
+                // theme={NavigationTheme}
+                style={{
+                  // position: 'absolute',
+                  // left: 0,
+                  // right: 0,
+                  // bottom: 0,
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  alignContent: 'center',
+                  justifyContent: 'center',
+                  padding: 0,
+                  margin: 0,
+                  flex: 1,
+                  height: headerHeight,
+                  alignSelf: 'center',
+                }}
+                titleStyle={[
+                  Fonts.headerTitle, {
+                    textAlign: 'center',
+                    color: Colors.text,
+                  },
+                ]}
+                pointerEvents="box-none"
+              /> */}
+              <AutoSizeText
+                fontSize={normalize(26)}
+                numberOfLines={1}
+                mode={ResizeTextMode.max_lines}
+                style={[
+                  {
+                    fontFamily,
+                    textAlign: 'center',
+                    verticalAlign: 'middle',
+                    fontWeight: 'bold',
+                    color: Colors.white,
+                  },
+                ]}
+              >
+                {title}
+              </AutoSizeText>
+            </View>
+          </View>
+          {headerRight ? (
+            <View
+              style={[
+                Gutters.smallPadding,
+                // Gutters.smallRMargin,
+                {
+                  flex: 1,
+                  flexDirection: 'row',
+                  justifyContent: 'flex-end',
+                },
+
+              ]}
+            >
+              {headerRight({})}
+            </View>
+          ) : null}
+        </Appbar>
+        {withRoundedSharp && (
+          <View
+            style={{
+              position: 'absolute',
+              top: (headerHeight + (presentation === 'card' ? inset.top : 0)),
+              right: 0,
+            }}
+            pointerEvents="none"
+          >
+            <Svg width={50} height={50} viewBox="0 0 50 50">
+              <Path fill={backgroundColor ? backgroundColor : Colors.primary} stroke={backgroundColor ? backgroundColor : Colors.primary} d={path} />
+            </Svg>
+          </View>
+        )}
+      </Animated.View>
+    </>
+  )
+}
+
+export default Header

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

@@ -0,0 +1,131 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-duplicate-type-constituents */
+import { AntDesign } from '@react-native-vector-icons/ant-design'
+import { EvilIcons } from '@react-native-vector-icons/evil-icons'
+import { FontAwesome6 } from '@react-native-vector-icons/fontawesome6'
+import { Ionicons } from '@react-native-vector-icons/ionicons'
+import { Lucide } from '@react-native-vector-icons/lucide'
+import { MaterialDesignIcons } from '@react-native-vector-icons/material-design-icons'
+import React from 'react'
+import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+import { createIconSetFromFontello, createIconSetFromIcoMoon } from 'react-native-vector-icons'
+// import AntDesign from 'react-native-vector-icons/AntDesign'
+// import Entypo from 'react-native-vector-icons/Entypo'
+// import EvilIcons from 'react-native-vector-icons/EvilIcons'
+// import Feather from 'react-native-vector-icons/Feather'
+// import FontAwesome from 'react-native-vector-icons/FontAwesome'
+// import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
+// import Ionicons from 'react-native-vector-icons/Ionicons'
+// import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+// import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+// import Octicons from 'react-native-vector-icons/Octicons'
+
+// import fontelloConfig from '@/assets/fonts/config.json'
+// const MyIcon = createIconSetFromFontello(fontelloConfig, 'myicon')
+
+const IconType = {
+  ANT_DESIGN: 'ANT_DESIGN',
+  EVIL_ICONS: 'EVIL_ICONS',
+  FONT_AWESOME6: 'FONTAWESOME6',
+  IONICONS: 'IONICONS',
+  LUCIDE: 'LUCIDE',
+  MATERIAL_DESIGN_ICONS: 'MATERIAL_DESIGN_ICONS',
+
+  // OCTICONS: 'octicons',
+  // MY_ICON: 'myicon',
+}
+type IconType = typeof IconType[keyof typeof IconType]
+interface IIconXProps {
+  origin: IconType
+  name: any
+  color?: string
+  size?: number
+  paddingLeft?: number
+  // style?: StyleProp<TextStyle> | undefined
+  forTouchable?: boolean
+  style?: StyleProp<TextStyle>
+}
+
+type IconXType = typeof AntDesign |
+  typeof Ionicons |
+  typeof MaterialDesignIcons |
+  typeof FontAwesome6 |
+  typeof Lucide |
+  typeof EvilIcons
+
+type IPanel<P> = React.FunctionComponent<P> & typeof IconType
+
+const IconX: IPanel<IIconXProps> = ({
+  color,
+  name,
+  origin,
+  paddingLeft,
+  size,
+  style = {},
+}: IIconXProps) => {
+
+  const colorx = color || '#aaaaaa'
+  const sizex = size || 26
+  const namex = name || 'right'
+  const paddingx = paddingLeft || 0
+
+  let Element: IconXType = Ionicons
+
+  switch (origin) {
+    case IconType.ANT_DESIGN:
+      Element = AntDesign
+      break
+
+    case IconType.EVIL_ICONS:
+      Element = EvilIcons
+      break
+
+    case IconType.FONT_AWESOME6:
+      Element = FontAwesome6
+      break
+
+    case IconType.IONICONS:
+      Element = Ionicons
+      break
+
+    case IconType.LUCIDE:
+      Element = Lucide
+      break
+
+    case IconType.MATERIAL_DESIGN_ICONS:
+      Element = MaterialDesignIcons
+      break
+
+    default:
+      Element = Ionicons
+      break
+  }
+
+
+  /*
+  case IconType.MY_ICON:
+    Element = MyIcon
+    break
+  */
+
+  return (
+    <Element
+      name={namex}
+      size={sizex}
+      color={colorx}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      style={[{ paddingLeft: paddingx }, style]}
+    />
+  )
+}
+IconX.ANT_DESIGN = IconType.ANT_DESIGN
+IconX.EVIL_ICONS = IconType.EVIL_ICONS
+IconX.FONT_AWESOME6 = IconType.FONT_AWESOME6
+IconX.IONICONS = IconType.IONICONS
+IconX.LUCIDE = IconType.LUCIDE
+IconX.MATERIAL_DESIGN_ICONS = IconType.MATERIAL_DESIGN_ICONS
+// IconX.MY_ICON = IconType.MY_ICON
+
+export default IconX
+

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { customText, Text } from 'react-native-paper'
+
+interface IInputLabelProps {
+  // label: string
+  children?: React.ReactNode
+  style?: StyleProp<TextStyle|ViewStyle> | undefined
+  onPress?: () => void
+}
+const InputLabel = ({ children, onPress, style }: IInputLabelProps) => {
+  return (
+    <Text variant={'bodyMedium'} style={[{ fontWeight: '700' }, style]} onPress={onPress}>
+      {children}
+    </Text>
+  )
+}
+
+export default InputLabel

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

@@ -0,0 +1,68 @@
+import React from 'react'
+import { ActivityIndicator, ColorValue, View } from 'react-native'
+import { Modal, Text } from 'react-native-paper'
+import { useSelector } from 'react-redux'
+
+import useTheme from '@/hooks/useTheme'
+import { rgbToHex } from '@/infrastructures/common/colorUtils'
+import { selectLoading } from '@/redux/selectors/nonPersist'
+
+interface ILoadingOverlayProps {
+  backgroundColor?: ColorValue
+  indicatorColor?: ColorValue
+  opacity?: number
+  zIndex?: number
+  textColor?: ColorValue
+  wording?: string
+}
+
+const LoadingOverlay: React.FC<ILoadingOverlayProps> = ({
+  backgroundColor,
+  indicatorColor = 'red',
+  opacity = 0.5,
+  textColor = 'black',
+  wording = 'Loading',
+  zIndex = 5,
+}: ILoadingOverlayProps) => {
+  const loading = useSelector(selectLoading)
+  const { Colors, Gutters, Layout } = useTheme()
+
+  const { alpha, hex: backdropColor } = rgbToHex(Colors.backdrop, true)
+
+  return (
+    loading ? (
+      <View style={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: backgroundColor ? backgroundColor : backdropColor,
+        opacity: opacity,
+        zIndex: zIndex,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+      >
+        <View
+          style={[
+            Gutters.smallPadding,
+            {
+              backgroundColor: 'rgba(20, 20, 20, 0.9)',
+              borderRadius: 8,
+              borderWidth: 0,
+            },
+          ]}
+        >
+          <ActivityIndicator size={'large'} color={indicatorColor} />
+          {/* <Text>{wording}</Text> */}
+        </View>
+      </View>
+    ) : (
+      null
+    )
+  )
+}
+
+export default LoadingOverlay

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

@@ -0,0 +1,153 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react'
+import {
+  FlatList,
+  Platform,
+  StyleSheet,
+  TextInput as NativeTextInput,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import { HelperText, Text, TextInput, TextInputProps, withTheme } from 'react-native-paper'
+
+import { images } from '@/assets'
+// import { Props as TextInputProps } from 'react-native-paper/lib/typescript/components/TextInput/TextInput'
+import useImperativePickerHandle from '@/components/basic/Picker/hooks/useImperativePickerHandle'
+import useTheme from '@/hooks/useTheme'
+
+type Props = {
+  hintText?: string | undefined
+  hintTextStyle?: TextStyle
+  errorText?: string | undefined
+  errorColor?: string
+  errorTextStyle?: TextStyle
+  showEye?: boolean
+  disableErrorText?: boolean
+}
+
+export type MaterialTextInputProps = TextInputProps & Props
+
+export type TextInputHandles = Pick<
+  NativeTextInput,
+  'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
+>
+
+const MaterialTextInput = forwardRef<TextInputHandles, MaterialTextInputProps>((props: MaterialTextInputProps, ref) => {
+  const {
+    disableErrorText,
+    errorColor = 'rgb(213, 0, 0)',
+    errorText,
+    errorTextStyle = { fontSize: 12 },
+    hintText,
+    // underlineColor,
+    // activeUnderlineColor,
+    // outlineColor,
+    // activeOutlineColor,
+    hintTextStyle = { fontSize: 12 },
+    label,
+    mode,
+    placeholderTextColor,
+    right,
+    secureTextEntry,
+    showEye = false,
+    style,
+    theme,
+    ...restProps
+  } = props
+  const { Colors, Common, NavigationTheme } = useTheme()
+
+  const [visiblePw, setVisiblePw] = useState(false)
+  const [secureText, setSecureText] = useState(secureTextEntry)
+
+  const customPlaceholderTextColor = placeholderTextColor || Colors.outline
+  const toggleVisiblePw = () => {
+    setVisiblePw(!!!visiblePw)
+    setSecureText(visiblePw)
+  }
+
+  const inputRef = React.useRef<NativeTextInput | null>(null)
+
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef?.current?.focus(),
+    clear: () => inputRef.current?.clear(),
+    setNativeProps: (args: any) => inputRef.current?.setNativeProps(args),
+    isFocused: () => inputRef.current?.isFocused() || false,
+    blur: () => inputRef.current?.blur(),
+    forceFocus: () => inputRef.current?.focus(),
+  }))
+
+  const renderHelperText = useCallback(() => {
+    if (!!errorText && !disableErrorText) {
+      return (
+        <HelperText
+          type="error"
+          visible={!!errorText}
+          padding={'none'}
+        >{errorText}</HelperText>
+      )
+    } else if (!!hintText && !disableErrorText) {
+      return (
+        <HelperText
+          type="info"
+          visible={!!hintText}
+          padding={'none'}
+        >{hintText}</HelperText>
+      )
+    } else if (disableErrorText) {
+      return null
+    }
+
+    return <HelperText
+      type="info"
+      visible
+      padding={'none'}
+    >{' '}</HelperText>
+  }, [
+    hintText, errorText, errorColor, disableErrorText, hintTextStyle, errorTextStyle,
+  ])
+
+  const contentBackgroundColor = (restProps.contentStyle as ViewStyle)?.backgroundColor
+
+  return (
+    <View>
+      {mode === 'flat' && label !== undefined && label !== '' && (
+        <Text>
+          {label}
+        </Text>
+      )}
+      <TextInput
+        ref={inputRef}
+        label={mode === 'flat' ? '' : label}
+        mode={mode}
+        placeholderTextColor={customPlaceholderTextColor}
+        {...restProps}
+        // underlineColor={errorText ? errorColor : underlineColor}
+        // activeUnderlineColor={errorText ? errorColor : activeUnderlineColor}
+        // outlineColor={errorText ? errorColor : outlineColor}
+        // activeOutlineColor={errorText ? errorColor : activeOutlineColor}
+        right={secureTextEntry && showEye ?
+          <TextInput.Icon
+            icon={visiblePw ? 'eye-off' : 'eye'}
+            // icon={images.search}
+            onPress={toggleVisiblePw}
+            // style={contentBackgroundColor ? { backgroundColor: contentBackgroundColor } : {}}
+          /> : (right ? right : null)}
+        // right={right ? right : null}
+        secureTextEntry={secureText}
+        textContentType={secureTextEntry ? 'newPassword' : 'none'}
+        theme={Object.assign(NavigationTheme, theme)}
+        style={[Common.textInput, style]}
+        error={!!errorText}
+      />
+      {/* {!disableErrorText && (<HelperText */}
+      {/*   type="error" */}
+      {/*   visible={!!errorText} */}
+      {/*   padding={'none'} */}
+      {/* >{errorText}</HelperText>)} */}
+      {renderHelperText()}
+    </View>
+  )
+})
+MaterialTextInput.displayName = 'MaterialTextInput'
+
+export default React.memo(MaterialTextInput)