@ccrf01/react-native-template 0.0.16

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

@@ -0,0 +1,182 @@
+import React from 'react'
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextProps,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+import { PressableOpacity, Text as BText } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import { Theme } from '@/theme/types'
+
+export interface IOption<T> {
+  label: string
+  value: T
+}
+type Props<ItemT> = {
+  borderColor?: string
+  selectedBackgroundColor?: string
+  backgroundColor?: string
+  textStyle?: StyleProp<TextProps>
+  selectedTextStyle?: StyleProp<TextProps>
+  style?: StyleProp<ViewStyle>
+  // selectedIndex: number
+  value?: unknown
+  onSelect?: (selected: ItemT) => void
+  options: IOption<ItemT>[]
+  radius?: number
+}
+const ButtonGroup = <T,>({
+  backgroundColor,
+  onSelect = () => { },
+  options,
+  radius,
+  style = {},
+  value,
+}: Props<T>) => {
+
+  const { Colors, Fonts, Gutters, Param } = useTheme()
+  const styles = makeStyles({ Colors, Gutters, Param, radius, backgroundColor })
+  const itemStyle = {
+    borderColor: Colors.primary,
+    backgroundColor: backgroundColor ?? Colors.background,
+    // flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+  const textStyle = {
+    color: Colors.onBackground,
+    ...Fonts.buttonTextMedium,
+    fontFamily: 'System',
+  }
+  const selectedItemStyle = { backgroundColor: Colors.primary }
+  const selectedTextStyle = { color: Colors.onPrimary }
+
+  const onPress = (index: T) => {
+    onSelect(index)
+  }
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          display: 'flex',
+          width: '100%',
+        },
+        style,
+      ]}
+    >
+      {options.map((option, index) => {
+        const onPressIndex = () => {
+          onPress(option.value)
+        }
+
+        return (
+          <View
+            key={`option_${index}`}
+            style={{ flex: 1 }}
+          >
+            <PressableOpacity
+              activeOpacity={0.6}
+              onPress={onPressIndex}
+              style={{ flex: 1 }}
+            >
+              <View
+                style={StyleSheet.flatten([
+                  styles.item,
+                  index === 0 ? styles.firstItem :
+                    index === options.length - 1 ?
+                      styles.lastItem :
+                      {},
+                  option.value === value ? selectedItemStyle : {},
+                ])}
+              >
+                {/* {typeof option === 'string' ? (
+                  <Text
+                    style={[
+                      textStyle,
+                      index === selectedIndex ? selectedTextStyle : {},
+                    ]}
+                  >{option}</Text>
+                ) : option} */}
+                <Text
+                  style={[
+                    textStyle,
+                    option.value === value ? selectedTextStyle : { padding: 0, margin: 0 },
+                  ]}
+                >{option.label}</Text>
+              </View>
+            </PressableOpacity>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+const makeStyles = ({ Colors, Gutters, Param, radius, backgroundColor }: Pick<Theme, 'Colors' | 'Gutters' | 'Param'> & { radius?: number; backgroundColor?: string }) => {
+  return StyleSheet.create({
+    firstItem: {
+      borderBottomLeftRadius: radius ?? Param.roundness * 2,
+      borderTopLeftRadius: radius ?? Param.roundness * 2,
+      borderLeftWidth: 1,
+      borderRightWidth: 0,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+    },
+    lastItem: {
+      borderBottomRightRadius: radius ?? Param.roundness * 2,
+      borderTopRightRadius: radius ?? Param.roundness * 2,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+    },
+    item: {
+      borderColor: Colors.primary,
+      backgroundColor: backgroundColor ?? Colors.background,
+      // flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderLeftWidth: 1,
+      borderRightWidth: 0,
+      // minWidth: 50,
+      height: 40,
+      flex: 1,
+      overflow: 'hidden',
+      ...Gutters.tinyPadding,
+    },
+    selectedStyle: {},
+  })
+}
+// const styles = StyleSheet.create({
+//   firstItem: {
+//     borderBottomLeftRadius: 4,
+//     borderTopLeftRadius: 4,
+//     padding: 8,
+//     borderWidth: 1,
+//     borderRightWidth: 0,
+//   },
+//   lastItem: {
+//     borderBottomRightRadius: 4,
+//     borderTopRightRadius: 4,
+//     padding: 8,
+//     borderWidth: 1,
+//     borderLeftWidth: 0,
+//   },
+//   item: {
+//     padding: 8,
+//     borderWidth: 1,
+//     borderLeftWidth: 1,
+//     borderRightWidth: 1,
+//   },
+//   selectedStyle: {},
+// })
+
+export default ButtonGroup

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

@@ -0,0 +1,3 @@
+import React from 'react'
+import { TouchableNativeFeedback, View, ViewStyle } from 'react-native'
+import { Card } from 'react-native-paper'

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import useTheme from '@/hooks/useTheme'
+
+interface IContainerProps {
+  insetTop?: boolean
+  insetBottom?: boolean
+  children: React.ReactNode[] | React.ReactNode
+  style?: ViewStyle | ViewStyle[]
+  withRound?: boolean
+}
+const Container: React.FC<IContainerProps> = ({ children, insetBottom = false, insetTop = false, style = {}, withRound = false }: IContainerProps) => {
+  const insets = useSafeAreaInsets()
+  const { Colors, Fonts, Gutters, Layout } = useTheme()
+
+  return (
+    <View
+      style={[
+        Layout.fill,
+        Layout.column,
+        Layout.justifyContentStart,
+        Layout.alignItemsStart,
+        // Gutters.mediumHPadding,
+        // Gutters.mediumVPadding,
+        insetTop ? { paddingTop: insets.top } : {},
+        insetBottom ? { paddingBottom: insets.bottom } : {},
+        { backgroundColor: Colors.background },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  )
+}
+
+export default React.memo(Container)

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import { View, ViewStyle } from 'react-native'
+
+import useTheme from '@/hooks/useTheme'
+import { MetricsSizeKey } from '@/theme/types'
+import { MetricsSizes } from '@/theme/Variables'
+
+interface IContentProps {
+  children?: React.ReactNode[] | React.ReactNode
+  style?: ViewStyle | ViewStyle[]
+  hPadding?: MetricsSizeKey|'none'
+  tPadding?: MetricsSizeKey|'none'
+  vPadding?: MetricsSizeKey|'none'
+  direction?: 'row'|'column'
+}
+const Content: React.FC<IContentProps> = ({
+  children,
+  direction = 'column',
+  hPadding = 'small',
+  style,
+  tPadding,
+  vPadding,
+}: IContentProps) => {
+  const { Gutters, Layout } = useTheme()
+  let topPadding = {}
+  switch (tPadding) {
+    case 'tiny':
+      topPadding = Gutters.tinyTPadding
+      break
+    case 'small':
+      topPadding = Gutters.smallTPadding
+      break
+    case 'medium':
+      topPadding = Gutters.mediumTPadding
+      break
+    case 'large':
+      topPadding = Gutters.largeTPadding
+      break
+  }
+  let verticalPadding = {}
+  switch (vPadding) {
+    case 'tiny':
+      verticalPadding = Gutters.tinyVPadding
+      break
+    case 'small':
+      verticalPadding = Gutters.smallVPadding
+      break
+    case 'medium':
+      verticalPadding = Gutters.mediumVPadding
+      break
+    case 'large':
+      verticalPadding = Gutters.largeVPadding
+      break
+  }
+  let horizontalPadding = {}
+  switch (hPadding) {
+    case 'tiny':
+      horizontalPadding = Gutters.tinyHPadding
+      break
+    case 'small':
+      horizontalPadding = Gutters.smallHPadding
+      break
+    case 'medium':
+      horizontalPadding = Gutters.mediumHPadding
+      break
+    case 'large':
+      horizontalPadding = Gutters.largeHPadding
+      break
+  }
+
+  return (
+    <View
+      style={[
+        direction === 'column' ? Layout.column : Layout.row,
+        Layout.fullWidth,
+        horizontalPadding,
+        topPadding,
+        verticalPadding,
+        style ?? {},
+      ]}
+    >
+      {children}
+    </View>
+  )
+}
+
+export default React.memo(Content)

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

@@ -0,0 +1,354 @@
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import {
+  Keyboard,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  TextInputFocusEventData,
+  TextStyle,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {
+  Checkbox,
+  Divider,
+  HelperText,
+  MD3Theme as Theme,
+  Menu,
+  TextInput,
+  TextInputProps,
+  TouchableRipple,
+  useTheme as usePaperTheme,
+} from 'react-native-paper'
+import { Icon } from 'react-native-vector-icons/Icon'
+
+import { PressableOpacity } from '@/components/basic'
+import MaterialTextInput, { MaterialTextInputProps, TextInputHandles } from '@/components/basic/MaterialTextInput'
+import useTheme from '@/hooks/useTheme'
+import { ThemeNavigationTheme, ThemeNavigationThemeWithOwn } from '@/theme/types'
+// import { MD3Theme } from 'react-native-paper/src/types'
+// import { TextInputProps } from 'react-native-paper/lib/typescript/components/TextInput/TextInput'
+// import { Theme } from 'react-native-paper/lib/typescript/types'
+
+type Without<T, K> = Pick<T, Exclude<keyof T, K>>
+
+export interface IDropDownOption {
+  label: string
+  value: string | number
+  custom?: ReactNode
+}
+export interface IDropDownProps {
+  visible: boolean
+  multiSelect?: boolean
+  onDismiss: () => void
+  showDropDown: () => void
+  value: any
+  setValue: (_value: any) => void
+  label?: string | undefined
+  placeholder?: string | undefined
+  mode?: 'outlined' | 'flat' | undefined
+  inputProps?: TextInputPropsWithoutTheme
+  list: IDropDownOption[]
+  dropDownContainerMaxHeight?: number
+  dropDownContainerHeight?: number
+  activeColor?: string
+  theme?: ThemeNavigationThemeWithOwn
+  dropDownStyle?: ViewStyle
+  dropDownItemSelectedTextStyle?: TextStyle
+  dropDownItemSelectedStyle?: ViewStyle
+  dropDownItemStyle?: ViewStyle
+  dropDownItemTextStyle?: TextStyle
+  accessibilityLabel?: string
+  errorText?: string
+  selectionTextStyle?: TextStyle
+  onBlur?:| ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) | undefined
+}
+
+type TextInputPropsWithoutTheme = Without<MaterialTextInputProps, 'theme'>
+
+const DropDown = forwardRef<TextInputHandles, IDropDownProps>(
+  (props, ref) => {
+    const activeTheme = usePaperTheme<ThemeNavigationThemeWithOwn>()
+    const { Common, NavigationTheme } = useTheme()
+    const {
+      accessibilityLabel,
+      activeColor,
+      dropDownContainerHeight,
+      dropDownContainerMaxHeight,
+      dropDownItemSelectedStyle,
+      dropDownItemSelectedTextStyle,
+      dropDownItemStyle,
+      dropDownItemTextStyle,
+      dropDownStyle,
+      inputProps,
+      label,
+      list,
+      mode,
+      multiSelect = false,
+      onDismiss,
+      placeholder,
+      selectionTextStyle,
+      setValue,
+      showDropDown,
+      theme,
+      value,
+      visible,
+    } = props
+    const {
+      disableErrorText,
+      errorColor,
+      errorText,
+      errorTextStyle,
+      hintText,
+      hintTextStyle,
+      ...restInputProps
+    } = inputProps || {}
+    const [displayValue, setDisplayValue] = useState('')
+    const [inputLayout, setInputLayout] = useState({
+      height: 0,
+      width: 0,
+      x: 0,
+      y: 0,
+    })
+    const { Colors, Fonts } = useTheme()
+    const [isFocused, setIsFocused] = useState(false)
+    const inputRef = React.useRef<TextInputHandles>(null)
+
+    const onLayout = (event: LayoutChangeEvent) => {
+      setInputLayout(event.nativeEvent.layout)
+    }
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        // onPress()
+      },
+      clear: () => {},
+      isFocused: () => false,
+      setNativeProps: (arg: any) => {},
+      blur: () => {},
+      forceFocus: () => {
+        // onPress()
+      },
+    }))
+
+    useEffect(() => {
+      if (multiSelect) {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const _labels = list
+          .filter((_) => value.indexOf(_.value) !== -1)
+          .map((_) => _.label)
+          .join(', ')
+        setDisplayValue(_labels)
+      } else {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const _label = list.find((_) => _.value === value)?.label
+        if (_label) {
+          setDisplayValue(_label)
+        }
+      }
+    }, [list, value])
+
+    const isActive = useCallback(
+      (currentValue: any) => {
+        if (multiSelect) {
+          return value.indexOf(currentValue) !== -1
+        } else {
+          return value === currentValue
+        }
+      },
+      [value]
+    )
+
+    const setActive = useCallback(
+      (currentValue: any) => {
+        if (multiSelect) {
+          const valueIndex = value.indexOf(currentValue)
+          const values = value.split(',')
+          if (valueIndex === -1) {
+            setValue([...values, currentValue].join(','))
+          } else {
+            setValue(
+              [...values].filter((_value) => _value !== currentValue).join(',')
+            )
+          }
+        } else {
+          setValue(currentValue)
+        }
+        inputRef.current?.blur()
+        setIsFocused(false)
+      },
+      [value]
+    )
+
+    const onPress = useCallback(
+      () => {
+        setIsFocused(true)
+        if (value !== undefined && value !== null && value !== '') {
+          inputRef.current?.focus()
+        }
+        // Keyboard.dismiss()
+        showDropDown()
+      }
+      , [showDropDown, visible, value])
+
+    const _onDismiss = () => {
+      setIsFocused(false)
+      inputRef.current?.blur()
+      onDismiss()
+    }
+
+    const renderHelperText = useCallback(() => {
+      if (!!errorText) {
+        return (
+          <HelperText
+            type="error"
+            visible={!!errorText}
+            padding={'none'}
+          >{errorText}</HelperText>
+        )
+      } else if (!!hintText) {
+        return (
+          <HelperText
+            type="info"
+            visible={!!hintText}
+            padding={'none'}
+          >{hintText}</HelperText>
+        )
+      }
+
+      return null
+    }, [errorColor, errorText, errorTextStyle, hintText, hintTextStyle])
+
+    const inputLineColor = useMemo(() => {
+      if (isFocused) {
+        return activeColor || activeTheme.colors.primary
+      }
+
+      return activeTheme.colors.onSurface
+    }, [isFocused])
+
+    return (
+      <Menu
+        visible={visible}
+        onDismiss={_onDismiss}
+        // theme={NavigationTheme}
+        contentStyle={{ backgroundColor: Colors.background }}
+        anchor={
+          <>
+            <PressableOpacity
+              onPress={onPress}
+              onLayout={onLayout}
+              accessibilityLabel={accessibilityLabel}
+            >
+              <View pointerEvents={'none'}>
+                <MaterialTextInput
+                  ref={inputRef}
+                  value={displayValue}
+                  mode={mode}
+                  label={label}
+                  placeholder={placeholder}
+                  pointerEvents={'none'}
+                  // theme={NavigationTheme}
+                  // right={
+                  //   <TextInput.Icon icon={visible ? 'menu-up' : 'menu-down'}/>
+                  // }
+                  disableErrorText
+                  showSoftInputOnFocus={false}
+                  caretHidden
+                  underlineColor={inputLineColor}
+                  activeUnderlineColor={inputLineColor}
+                  // underlineStyle={{ backgroundColor: inputLineColor, borderWidth: (isFocused ? 2 : 1)  }}
+                  outlineColor={inputLineColor}
+                  outlineStyle={{ borderWidth: isFocused ? 2 : 1 }}
+                  {...restInputProps}
+                  contentStyle={{ paddingRight: 10 }}
+                />
+                <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+                  <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
+                    <TextInput.Icon icon={visible ? 'menu-up' : 'menu-down'}/>
+                  </View>
+                </View>
+              </View>
+            </PressableOpacity>
+            {/* {renderHelperText()} */}
+          </>
+        }
+        style={{
+          maxWidth: inputLayout?.width,
+          width: inputLayout?.width,
+          marginTop: inputLayout?.height,
+          ...dropDownStyle,
+        }}
+      >
+        <ScrollView
+          bounces={false}
+          style={{
+            ...(dropDownContainerHeight
+              ? { height: dropDownContainerHeight }
+              : { maxHeight: dropDownContainerMaxHeight || 350 }),
+          }}
+        >
+          {list.map((_item, _index) => (
+            <Fragment key={_item.value}>
+              <TouchableRipple
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
+                onPress={() => {
+                  setActive(_item.value)
+                  if (onDismiss) {
+                    onDismiss()
+                  }
+                }}
+              >
+                <Fragment>
+                  <Menu.Item
+                    titleStyle={{
+                      color: isActive(_item.value)
+                        ? activeColor || activeTheme.colors.primary
+                        : (theme || activeTheme).colors.text,
+                      ...(isActive(_item.value) ? dropDownItemSelectedTextStyle : dropDownItemTextStyle),
+                      ...Fonts.body,
+                    }}
+                    title={_item.custom || _item.label}
+                    style={{
+                      flex: 1,
+                      maxWidth: inputLayout?.width,
+                      backgroundColor: Colors.background,
+                      ...(isActive(_item.value)
+                        ? dropDownItemSelectedStyle
+                        : dropDownItemStyle),
+                    }}
+                  />
+                  {multiSelect && (
+                    <Checkbox.Android
+                      theme={{ colors: { accent: activeTheme?.colors.primary } }}
+                      status={isActive(_item.value) ? 'checked' : 'unchecked'}
+                      onPress={() => setActive(_item.value)}
+                    />
+                  )}
+                </Fragment>
+              </TouchableRipple>
+              <Divider />
+            </Fragment>
+          ))}
+        </ScrollView>
+      </Menu>
+    )
+  }
+)
+DropDown.displayName = 'DropDown'
+
+export default DropDown