@ccrf01/react-native-template 0.0.16

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+import { Body, Button } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+
+interface INumberInputProps {
+  value: number
+  canAdd?: boolean
+  canSub?: boolean
+  onValueChange?: (newValue: number) => void
+}
+const NumberInput = (
+  { onValueChange = (newValue) => {}, value, canSub = true, canAdd = true }: INumberInputProps
+) => {
+  const { Colors, Common, Fonts, Gutters, Layout } = useTheme()
+  // const [count, setCount] = React.useState(value)
+  const add = () => {
+    // setCount(count + 1)
+    onValueChange(value + 1)
+  }
+  const reduce = () => {
+    // setCount(count - 1 )
+    // if (count < 1) {
+    //   setCount(0)
+    // } else {
+    //   setCount(count - 1)
+    // }
+    onValueChange(Math.max(value-1, 0))
+  }
+
+  // React.useEffect(() => {
+  //   setCount(value)
+  // }, [value])
+
+
+  return (
+    <View style={[Layout.row, Layout.alignItemsCenter]}>
+      <Button
+        text="-"
+        onPress={reduce}
+      />
+      <Text>{value}</Text>
+      <Button
+        text="+"
+        disabled={!canAdd}
+        onPress={add}
+      />
+    </View>
+  )
+}
+
+export default NumberInput

package/template/src/components/basic/Picker/PickerContext.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import { PickerContextProps } from './types'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export default React.createContext<PickerContextProps>({})

package/template/src/components/basic/Picker/PickerHeader.tsx

@@ -0,0 +1,130 @@
+import _ from 'lodash'
+import React, { useCallback, useContext, useEffect, useMemo } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Text } from 'react-native-paper'
+import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { Button } from '@/components/basic'
+import { PickerHeaderProps, PickerLayouts } from '@/components/basic/Picker/types'
+import useTheme from '@/hooks/useTheme'
+import { Theme } from '@/theme/types'
+
+const PickerHeader: React.FC<PickerHeaderProps> = (props: PickerHeaderProps) => {
+  const {
+    closeIcon,
+    closeLabel,
+    closeLabelStyle,
+    doneIcon,
+    doneLabel,
+    doneLabelStyle,
+    layout = PickerLayouts.full,
+    onClose,
+    onDone,
+    title,
+    titleStyle,
+    backgroundColor,
+  } = props
+  const { Colors, Gutters, Layout, Param } = useTheme()
+  const insets = useSafeAreaInsets()
+  const styles = makeStyles({ Colors, Gutters, Layout, Param }, layout, insets)
+
+  return (
+    <View
+      style={[styles.header, { backgroundColor: backgroundColor || Colors.primary }]}
+    >
+      <View style={styles.content}>
+        <View style={styles.titleContainer}>
+          <Text style={[styles.title, titleStyle]} variant={'titleLarge'}>{title || ''}</Text>
+        </View>
+        <View style={[styles.leftButton]}>
+          {closeLabel ? (
+            <Button
+              type={'text'}
+              onPress={onClose}
+              text={closeLabel}
+              textColor={Colors.onPrimary}
+            />
+          ) : (
+            <Button
+              type={'icon'}
+              onPress={onClose}
+              icon={closeIcon || 'close'}
+              textColor={Colors.onPrimary}
+            />
+          )}
+        </View>
+        <View style={[styles.rightButton]}>
+          {doneLabel && onDone ? (
+            <Button
+              type={'text'}
+              onPress={onDone}
+              text={doneLabel}
+              textColor={Colors.onPrimary}
+            />
+          ) : (<>
+            {
+              onDone && (
+                <Button
+                  type={'icon'}
+                  onPress={onDone}
+                  icon={doneIcon || 'check'}
+                  textColor={Colors.onPrimary}
+                />
+              )
+            }
+          </>)}
+        </View>
+      </View>
+    </View>
+  )
+}
+const makeStyles = ({ Colors, Gutters, Layout, Param }: Pick<Theme, 'Colors'|'Gutters'|'Layout'|'Param'>, layout: PickerLayouts, insets: EdgeInsets) => {
+  const headerHeight = layout === PickerLayouts.full ? (Param.headerHeight + insets.top) : Param.headerHeight
+  const shouldRoundTop = layout === PickerLayouts.bottomSheet
+
+  return StyleSheet.create({
+    header: {
+      flexDirection: 'row',
+      height: headerHeight,
+      width: '100%',
+      paddingTop: shouldRoundTop ? 0 : insets.top,
+      borderTopLeftRadius: shouldRoundTop ? Param.roundness * 3 : 0,
+      borderTopRightRadius: shouldRoundTop ? Param.roundness * 3 : 0,
+    },
+    content: {
+      flexDirection: 'row',
+      flex: 1,
+      height: Param.headerHeight,
+      alignItems: 'center',
+    },
+    titleContainer: {
+      flex: 1,
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+      height: Param.headerHeight,
+      top: 0,
+      left: 0,
+      right: 0,
+    },
+    title: {
+      color: Colors.onPrimary,
+    },
+    leftButton: {
+      ...Gutters.smallLPadding,
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    rightButton: {
+      ...Gutters.smallRPadding,
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
+  })}
+
+export default PickerHeader

package/template/src/components/basic/Picker/PickerItem.tsx

@@ -0,0 +1,105 @@
+import _ from 'lodash'
+import React, { useCallback, useContext, useEffect, useMemo } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Text } from 'react-native-paper'
+
+import { IconX, PressableOpacity } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import { Theme } from '@/theme/types'
+
+import PickerContext from './PickerContext'
+import { getItemLabel, isItemSelected } from './PickerPresenter'
+import { PickerItemProps } from './types'
+
+const PickerItem = (props: PickerItemProps) => {
+  const {
+    disabled,
+    label,
+    labelStyle,
+    selectedIcon,
+    selectedIconColor,
+    testID,
+    value,
+  } = props
+  const { Colors } = useTheme()
+  const context = useContext(PickerContext)
+  const customRenderItem = context.renderItem || props.renderItem
+  const itemValue = value
+  const isSelected = isItemSelected(itemValue, context.value)
+  const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getLabel)
+  const selectedCounter = context.selectionLimit && _.isArray(context.value) && context.value?.length
+  const styles = makeStyles({ Colors })
+
+  const isItemDisabled = useMemo(() => {
+    return !!(disabled || (!isSelected && context.selectionLimit && context.selectionLimit === selectedCounter))
+  }, [selectedCounter])
+
+
+  const selectedIndicator = useMemo(() => {
+    if (isSelected) {
+      return <IconX origin={IconX.MATERIAL_DESIGN_ICONS} name={'check'} size={20} color={Colors.primary} />
+    }
+  }, [isSelected, isItemDisabled, selectedIcon, selectedIconColor])
+
+  const itemLabelStyle = useMemo(() => {
+    return [styles.labelText, isItemDisabled ? styles.labelTextDisabled : undefined, labelStyle]
+  }, [isItemDisabled, labelStyle])
+
+  const _onPress = useCallback(() => {
+    context.onPress(value)
+  }, [value, context.onPress])
+
+  const onSelectedLayout = useCallback((...args: any[]) => {
+    _.invoke(context, 'onSelectedLayout', ...args)
+  }, [])
+
+  const _renderItem = () => {
+    return (
+      <View style={[styles.container]}>
+        <Text numberOfLines={1} style={itemLabelStyle}>
+          {itemLabel}
+        </Text>
+        {selectedIndicator}
+      </View>
+    )
+  }
+
+  return (
+    <PressableOpacity
+      activeOpacity={0.5}
+      onPress={_onPress}
+      onLayout={isSelected ? onSelectedLayout : undefined}
+      disabled={isItemDisabled}
+      testID={testID}
+    // throttleTime={0}
+    >
+      {customRenderItem ? customRenderItem(value, { ...props, isSelected, isItemDisabled }, itemLabel) : _renderItem()}
+    </PressableOpacity>
+  )
+}
+
+const makeStyles = ({ Colors }: Pick<Theme, 'Colors'>) => {
+  return StyleSheet.create({
+    container: {
+      height: 56.5,
+      paddingHorizontal: 23,
+      borderColor: Colors.border,
+      borderBottomWidth: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    labelText: {
+      // ...Typography.text70,
+      color: Colors.text,
+      flex: 1,
+      textAlign: 'left',
+    },
+    labelTextDisabled: {
+      color: Colors.onSurfaceDisabled,
+    },
+  })
+}
+
+export default PickerItem

package/template/src/components/basic/Picker/PickerItemsList.tsx

@@ -0,0 +1,135 @@
+import _ from 'lodash'
+import React, { useCallback, useContext, useState } from 'react'
+import { Animated, FlatList, ListRenderItemInfo, StyleSheet, View } from 'react-native'
+import { Text, TextInput } from 'react-native-paper'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { MaterialTextInput } from '@/components/basic'
+import PickerHeader from '@/components/basic/Picker/PickerHeader'
+import PickerItem from '@/components/basic/Picker/PickerItem'
+import useTheme from '@/hooks/useTheme'
+import logger from '@/infrastructures/common/logger'
+import { Theme } from '@/theme/types'
+import { screenHeight } from '@/utils'
+
+import PickerContext from './PickerContext'
+import { PickerItemProps, PickerItemsListProps, PickerLayouts, PickerOptionItem, PickerSingleValue } from './types'
+
+const keyExtractor = (_item: string, index: number) => index.toString()
+
+const PickerItemsList = (props: PickerItemsListProps) => {
+  const {
+    listProps,
+    children,
+    items,
+    showSearch,
+    searchStyle = {},
+    searchPlaceholder = 'Search...',
+    onSearchChange,
+    renderCustomSearch,
+    testID,
+    layout = PickerLayouts.full,
+    headerProps,
+  } = props
+
+  const context = useContext(PickerContext)
+  const insets = useSafeAreaInsets()
+  const { Colors, Gutters, Layout } = useTheme()
+  const styles = makeStyles({ Colors }, layout)
+  const { style: listStyle, ...restListProps } = listProps || {}
+
+  const renderHeader = () => {
+    return <PickerHeader {...headerProps} layout={layout} />
+  }
+  const renderSearchInput = () => {
+    if (showSearch) {
+      if (_.isFunction(renderCustomSearch)) {
+        return renderCustomSearch(props)
+      }
+
+      return (
+        <View style={styles.searchInputContainer}>
+
+        </View>
+      )
+    }
+  }
+
+  const renderItem = useCallback(({ index, item }: ListRenderItemInfo<PickerItemProps>) => {
+    const child = React.Children.toArray(children)[index]
+
+    return child
+  }, [children])
+
+  const renderList = () => {
+    return (
+      <FlatList
+        data={items}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        {...restListProps}
+        style={[
+          {
+            backgroundColor: Colors.background,
+            paddingBottom: insets.bottom,
+          },
+          styles.listStyle,
+          listStyle ? listStyle : {},
+        ]}
+      />
+    )
+  }
+
+  return (
+    <View style={[styles.content]}>
+      <>
+        {renderHeader()}
+        {renderSearchInput()}
+        {renderList()}
+      </>
+    </View>
+  )
+}
+const makeStyles = ({ Colors }: Pick<Theme, 'Colors'>, layout: PickerLayouts) => {
+  let _temp = {}
+  const maxHeight = Math.max(screenHeight * 0.5, 420)
+  if (layout === PickerLayouts.full) {
+    _temp = {
+      flex: 1,
+    }
+  } else {
+    _temp = {
+      maxHeight: maxHeight,
+      height: maxHeight,
+    }
+  }
+
+  return StyleSheet.create({
+    content: {
+      ..._temp,
+    },
+    modalBody: {},
+    searchInputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingLeft: 16,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: Colors.border,
+    },
+    searchIcon: {
+      marginRight: 12,
+    },
+    searchInput: {
+      height: 60,
+      paddingRight: 16,
+      flex: 1,
+    },
+    listStyle: {
+      flex: 1,
+    },
+  })
+}
+
+export default PickerItemsList

package/template/src/components/basic/Picker/PickerPresenter.ts

@@ -0,0 +1,54 @@
+import _ from 'lodash'
+import React from 'react'
+
+import { PickerProps, PickerSingleValue, PickerValue } from './types'
+
+export const extractPickerItems = (props: PickerProps) => {
+  const { children } = props
+  const items = React.Children.map(children, child => ({
+    // @ts-expect-error handle use PickerItemProps once exist
+    value: child?.props.value,
+    // @ts-expect-error handle use PickerItemProps once exist
+    label: child?.props.label,
+  }))
+
+  return items ?? []
+}
+
+export const isItemSelected = (childValue: PickerSingleValue, selectedValue?: PickerValue) => {
+  let isSelected = false
+
+  if (Array.isArray(selectedValue)) {
+    isSelected = !!_.find(selectedValue, v => {
+      // @ts-expect-error TODO: fix after removing migrate prop completely
+      return v === childValue || (typeof v === 'object' && v?.value === childValue)
+    })
+  } else {
+    isSelected = childValue === selectedValue
+  }
+
+  return isSelected
+}
+
+// export function getItemValue(props) {
+//   if (_.isArray(props.value)) {
+//     return props.getItemValue ? _.map(props.value, item => props.getItemValue(item)) : _.map(props.value, 'value');
+//   } else if (!_.isObject(props.value)) {
+//     return props.value;
+//   }
+//   return _.invoke(props, 'getItemValue', props.value) || _.get(props.value, 'value');
+// }
+
+export const getItemLabel = (label: string, value: PickerValue, getLabel: PickerProps['getLabel']) => {
+  if (_.isObject(value)) {
+    if (getLabel) {
+      return getLabel(value)
+    }
+
+    return _.get(value, 'label')
+  }
+
+  return label
+}
+
+export const shouldFilterOut = (searchValue: string, itemLabel?: string) => !_.includes(_.lowerCase(itemLabel), _.lowerCase(searchValue))

package/template/src/components/basic/Picker/hooks/useImperativePickerHandle.ts

@@ -0,0 +1,27 @@
+import React, { useImperativeHandle, useRef } from 'react'
+
+import { ExpandableOverlayMethods } from '@/components/basic/ExpandableOverlay'
+const useImperativePickerHandle = (ref: React.Ref<any>,
+  expandableRef: React.MutableRefObject<ExpandableOverlayMethods | null>) => {
+  const pickerRef = useRef<ExpandableOverlayMethods>()
+  useImperativeHandle(ref, () => {
+    // const { blur, clear, focus, isFocused, validate } = pickerRef.current ?? {}
+    // @ts-expect-error useRef return type is possible null therefor it throw TS error
+    const { closeExpandable, openExpandable, toggleExpandable } = expandableRef.current
+
+    return {
+      // isFocused,
+      // focus,
+      // blur,
+      // clear,
+      // validate,
+      openExpandable,
+      closeExpandable,
+      toggleExpandable,
+    }
+  })
+
+  return pickerRef
+}
+
+export default useImperativePickerHandle

package/template/src/components/basic/Picker/hooks/usePickerLabel.ts

@@ -0,0 +1,74 @@
+import _ from 'lodash'
+import { useCallback, useMemo } from 'react'
+
+import { PickerProps, PickerValue } from '../types'
+
+type UsePickerLabelProps
+  = Pick<
+    PickerProps,
+    'value' | 'getLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'
+  > & {
+    items: {value: string | number; label: string}[] | null | undefined
+  }
+
+const usePickerLabel = (props: UsePickerLabelProps) => {
+  const {
+    accessibilityHint,
+    accessibilityLabel,
+    getLabel,
+    items,
+    placeholder,
+    value,
+  } = props
+
+  const getLabelsFromArray = useCallback((pickerValue: PickerValue) => {
+    const itemsByValue = _.keyBy(items, 'value')
+
+    return _.flow(arr =>
+      _.map(arr, item => (_.isPlainObject(item) ? getLabel?.(item) || item?.label : itemsByValue[item]?.label) as string),
+    arr => _.join(arr, ', '))(pickerValue)
+  },
+  [getLabel, items])
+
+  const _getLabel = useCallback((pickerValue: PickerValue) => {
+    if (_.isFunction(getLabel) && !_.isUndefined(getLabel(pickerValue))) {
+      return getLabel(pickerValue)
+    }
+
+    if (_.isArray(pickerValue)) {
+      return getLabelsFromArray(pickerValue)
+    }
+
+    // TODO: Remove
+    // if (typeof value === 'object') {
+    //   return value?.label;
+    // }
+
+    // otherwise, extract from picker items
+    const selectedItem = _.find(items, { value: pickerValue })
+    console.log('[Picker] selectedItem', selectedItem)
+
+    return _.get(selectedItem, 'label')
+  },
+  [getLabelsFromArray])
+
+  const accessibilityInfo = useMemo(() => {
+    const label = _getLabel(value)
+
+    return {
+      accessibilityLabel:
+        accessibilityLabel ?? (label ? `${placeholder || ''}. selected. ${label}` : `Select ${placeholder || ''}`),
+      accessibilityHint:
+        accessibilityHint ?? (label ? 'Double tap to edit' : `Goes to ${placeholder || ''}. Suggestions will be provided`),
+    }
+  }, [value, accessibilityLabel, accessibilityHint])
+
+  return {
+    getLabelsFromArray,
+    getLabel: _getLabel,
+    accessibilityInfo,
+    label: _getLabel(value),
+  }
+}
+
+export default usePickerLabel

package/template/src/components/basic/Picker/hooks/usePickerSearch.ts

@@ -0,0 +1,37 @@
+import _ from 'lodash'
+import { useCallback, useMemo, useState } from 'react'
+
+import { getItemLabel as getItemLabelPresenter, shouldFilterOut } from '../PickerPresenter'
+import { PickerProps } from '../types'
+
+type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children' | 'getLabel'>
+
+const usePickerSearch = (props: UsePickerSearchProps) => {
+  const { children, getLabel, onSearchChange, showSearch } = props
+  const [searchValue, setSearchValue] = useState('')
+
+  const _onSearchChange = useCallback((newSearchValue: string) => {
+    setSearchValue(newSearchValue)
+    onSearchChange?.(newSearchValue)
+  },
+  [onSearchChange])
+
+  const filteredChildren = useMemo(() => {
+    if (showSearch && !_.isEmpty(searchValue)) {
+      // @ts-expect-error need to fix children type
+      return _.filter(children, child => {
+        // @ts-expect-error need to fix children type to be based on PickerItemProps
+        const { getItemLabel: childGetItemLabel, label, value } = child.props
+        const itemLabel = getItemLabelPresenter(label, value, childGetItemLabel || getLabel)
+
+        return !shouldFilterOut(searchValue, itemLabel)
+      })
+    }
+
+    return children
+  }, [showSearch, searchValue, children])
+
+  return { setSearchValue, onSearchChange: _onSearchChange, filteredChildren }
+}
+
+export default usePickerSearch

package/template/src/components/basic/Picker/hooks/usePickerSelection.ts

@@ -0,0 +1,57 @@
+import _, { isArray } from 'lodash'
+import { RefObject, useCallback, useEffect, useState } from 'react'
+
+import { PickerModes, PickerMultiValue, PickerProps, PickerSingleValue, PickerValue } from '../types'
+
+type UsePickerSelectionProps
+  = Pick<PickerProps, 'value' | 'onChange' | 'mode'> & {
+    pickerExpandableRef: RefObject<any>
+    setSearchValue: (searchValue: string) => void
+  }
+
+const usePickerSelection = (props: UsePickerSelectionProps) => {
+  const { mode, onChange, pickerExpandableRef, setSearchValue, value } = props
+  const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue)
+  const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue)
+
+  useEffect(() => {
+    if (mode === PickerModes.MULTI && multiFinalValue !== value) {
+      setMultiDraftValue(value as PickerMultiValue)
+      setMultiFinalValue(value as PickerMultiValue)
+    }
+  }, [value])
+
+  const onDoneSelecting = useCallback((item: PickerValue) => {
+    setSearchValue('')
+    setMultiFinalValue(item as PickerMultiValue)
+    pickerExpandableRef.current?.closeExpandable?.()
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    onChange?.(item)
+  },
+  [onChange])
+
+  const toggleItemSelection = useCallback((item: PickerSingleValue) => {
+    const itemAsArray = [item]
+    const newValue = _.xor(multiDraftValue, itemAsArray)
+
+    setMultiDraftValue(newValue)
+  },
+  [multiDraftValue])
+
+  const cancelSelect = useCallback(() => {
+    setSearchValue('')
+    setMultiDraftValue(multiFinalValue)
+    pickerExpandableRef.current?.closeExpandable?.()
+    // topBarProps?.onCancel?.()
+  }, [multiFinalValue])
+
+  return {
+    multiDraftValue,
+    onDoneSelecting,
+    toggleItemSelection,
+    cancelSelect,
+  }
+}
+
+export default usePickerSelection