@ccrf01/react-native-template 0.0.16

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

@@ -0,0 +1,284 @@
+import { useKeyboard } from '@react-native-community/hooks'
+import _ from 'lodash'
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
+import { Keyboard, LayoutChangeEvent, TouchableOpacity, View } from 'react-native'
+import { HelperText, Text, TextInput as PTextInput } from 'react-native-paper'
+
+import { PressableOpacity } from '@/components/basic'
+import ExpandableOverlay, { ExpandableOverlayMethods, ExpandableOverlayProps } from '@/components/basic/ExpandableOverlay'
+
+import MaterialTextInput from '../MaterialTextInput'
+import useImperativePickerHandle from './hooks/useImperativePickerHandle'
+import usePickerLabel from './hooks/usePickerLabel'
+import usePickerSearch from './hooks/usePickerSearch'
+import usePickerSelection from './hooks/usePickerSelection'
+import PickerContext from './PickerContext'
+import PickerItem from './PickerItem'
+import PickerItemsList from './PickerItemsList'
+import { extractPickerItems } from './PickerPresenter'
+import {
+  PickerFieldTypes,
+  PickerItemProps,
+  PickerLayouts,
+  PickerMethods,
+  PickerModes,
+  PickerProps,
+  PickerSearchStyle,
+  PickerValue,
+} from './types'
+
+type PickerStatics = {
+  Item: typeof PickerItem
+  modes: typeof PickerModes
+  fieldTypes: typeof PickerFieldTypes
+  extractPickerItems: typeof extractPickerItems
+  layouts: typeof PickerLayouts
+}
+
+const Picker = forwardRef<ExpandableOverlayMethods, PickerProps>((props: PickerProps, ref) => {
+  const {
+    accessibilityHint,
+    accessibilityLabel,
+    children,
+    containerStyle,
+    disabled,
+    fieldType = PickerFieldTypes.form,
+    getLabel,
+    // useNativePicker,
+    headerProps,
+    inputProps,
+    // customPickerProps,
+    layout,
+    // labelStyle,
+    listProps,
+    modalProps,
+    mode,
+    onChange,
+    onPress,
+    // renderCustomModal,
+    // enableModalBlur,
+    // topBarProps,
+    // pickerModalProps,
+    onSearchChange,
+    onShow,
+    placeholder,
+    renderCustomSearch,
+    renderItem,
+    renderPicker,
+    searchPlaceholder,
+    searchStyle,
+    selectionLimit,
+    showSearch,
+    testID = 'Picker',
+    useSafeArea,
+    useWheelPicker,
+    value,
+    ...others
+  } = props
+  const pickerExpandable = useRef<ExpandableOverlayMethods>(null)
+  const pickerRef = useImperativePickerHandle(ref, pickerExpandable)
+  // const keyboard = useKeyboard()
+
+  // const { preset } = others
+
+  const [selectedItemPosition, setSelectedItemPosition] = useState(0)
+  const [items, setItems] = useState(extractPickerItems(props))
+  React.useEffect(() => {
+    setItems(extractPickerItems(props))
+  }, [children])
+
+  const { filteredChildren, onSearchChange: _onSearchChange, setSearchValue } = usePickerSearch({ showSearch, onSearchChange, getLabel, children })
+  const { cancelSelect, multiDraftValue, onDoneSelecting, toggleItemSelection } = usePickerSelection({
+    value,
+    onChange,
+    pickerExpandableRef: pickerExpandable,
+    setSearchValue,
+    mode,
+  })
+  const { accessibilityInfo, label } = usePickerLabel({
+    value,
+    items,
+    getLabel,
+    accessibilityLabel,
+    accessibilityHint,
+    placeholder,
+  })
+  const {
+    disableErrorText,
+    errorColor,
+    errorText,
+    errorTextStyle,
+    hintText,
+    hintTextStyle,
+    ...restInputProps
+  } = inputProps || {}
+  const onSelectedItemLayout = useCallback((event: LayoutChangeEvent) => {
+    const y = event.nativeEvent.layout.y
+    setSelectedItemPosition(y)
+  }, [])
+
+  const contextValue = useMemo(() => {
+    // @ts-expect-error cleanup after removing migrate prop
+    const pickerValue = typeof value === 'object' && !_.isArray(value) ? value?.value : value
+
+    return {
+      value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
+      onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
+      isMultiMode: mode === PickerModes.MULTI,
+      getLabel,
+      onSelectedLayout: onSelectedItemLayout,
+      renderItem,
+      selectionLimit,
+    }
+  }, [
+    mode,
+    value,
+    multiDraftValue,
+    renderItem,
+    getLabel,
+    selectionLimit,
+    onSelectedItemLayout,
+    toggleItemSelection,
+    onDoneSelecting,
+  ])
+
+  // const propsByFieldType = useMemo(() => {
+  //   if (fieldType === PickerFieldTypes.filter) {
+  //     return {
+  //       containerStyle: { flexDirection: 'row' },
+  //       // labelStyle: Typography.text70,
+  //       trailingAccessory: themeProps.trailingAccessory ?? <Icon marginL-s1 source={dropdown}/>,
+  //     }
+  //   } else if (fieldType === PickerFieldTypes.settings) {
+  //     return {
+  //       label: undefined,
+  //     }
+  //   }
+  // }, [fieldType, preset, themeProps.trailingAccessory])
+
+  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 renderPickerInnerInput = () => {
+
+    return (
+      <>
+        <PressableOpacity
+          onPress={() => {
+            Keyboard.dismiss()
+            pickerExpandable.current?.toggleExpandable()
+          }}
+        >
+          <View pointerEvents={'none'}>
+            <MaterialTextInput
+              value={label ?? ''}
+              right={<PTextInput.Icon icon="chevron-down" />}
+              disableErrorText
+              {...restInputProps}
+            />
+          </View>
+        </PressableOpacity>
+        {renderHelperText()}
+      </>
+    )
+  }
+
+  const expandableModalContent = useMemo(() => {
+    return (
+      <PickerItemsList
+        testID={`${testID}.modal`}
+        items={items}
+        showSearch={showSearch}
+        searchStyle={searchStyle}
+        searchPlaceholder={searchPlaceholder}
+        onSearchChange={_onSearchChange}
+        renderCustomSearch={renderCustomSearch}
+        listProps={listProps}
+        layout={layout}
+        headerProps={{
+          ...headerProps,
+          layout,
+          onClose: cancelSelect,
+          onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined,
+        }}
+
+      >
+        {filteredChildren}
+      </PickerItemsList>
+    )
+  }, [
+    testID,
+    mode,
+    selectedItemPosition,
+    cancelSelect,
+    onDoneSelecting,
+    multiDraftValue,
+    showSearch,
+    searchStyle,
+    searchPlaceholder,
+    _onSearchChange,
+    renderCustomSearch,
+    listProps,
+    filteredChildren,
+    useSafeArea,
+    useWheelPicker,
+    items,
+    layout,
+  ])
+
+  return (
+    <PickerContext.Provider value={contextValue}>
+      <ExpandableOverlay
+        ref={pickerExpandable}
+        modalProps={{
+          style: {
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+          },
+          ...modalProps,
+        }}
+        expandableContent={expandableModalContent}
+        onPress={onPress}
+        disabled={disabled}
+        childrenPointEvents={'auto'}
+        activeOpacity={1}
+      >
+        {renderPickerInnerInput()}
+      </ExpandableOverlay>
+    </PickerContext.Provider>
+  )
+}) as React.ForwardRefExoticComponent<PickerProps> & PickerStatics
+Picker.Item = PickerItem
+Picker.modes = PickerModes
+Picker.fieldTypes = PickerFieldTypes
+Picker.extractPickerItems = extractPickerItems
+Picker.layouts = PickerLayouts
+Picker.displayName = 'Picker'
+
+const MemoPick = React.memo(Picker) as  React.MemoExoticComponent<React.ForwardRefExoticComponent<PickerProps> & PickerStatics> & PickerStatics
+MemoPick.Item = PickerItem
+MemoPick.modes = PickerModes
+MemoPick.fieldTypes = PickerFieldTypes
+MemoPick.extractPickerItems = extractPickerItems
+MemoPick.layouts = PickerLayouts
+MemoPick.displayName = 'Picker'
+
+export default MemoPick

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

@@ -0,0 +1,229 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import { FlatListProps, StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { ModalProps } from 'react-native-modal'
+import { IconSource } from 'react-native-paper/lib/typescript/src/components/Icon'
+
+import { MaterialTextInputProps } from '@/components/basic/MaterialTextInput'
+
+import { ExpandableOverlayMethods } from '../ExpandableOverlay'
+
+type Without<T, K> = Pick<T, Exclude<keyof T, K>>
+
+export enum PickerModes {
+  SINGLE = 'SINGLE',
+  MULTI = 'MULTI'
+}
+export enum PickerFieldTypes {
+  form = 'form',
+  filter = 'filter',
+  settings = 'settings'
+}
+export enum PickerLayouts {
+  full = 'full',
+  bottomSheet = 'bottomSheet'
+}
+export type PickerSingleValue = string | number
+export type PickerMultiValue = PickerSingleValue[]
+export type PickerValue = PickerSingleValue | PickerMultiValue | undefined
+export type PickerSearchStyle = {
+  icon?: number
+  color?: string
+  placeholderTextColor?: string
+  selectionColor?: string
+}
+
+type RenderPickerOverloads<ValueType> = ValueType extends PickerValue
+  ? (value?: ValueType, label?: string) => React.ReactElement
+  : never
+type RenderPicker = RenderPickerOverloads<PickerValue>
+export type PickerOptionItem = {
+  value: PickerSingleValue
+  label: string
+}
+export type PickerHeaderProps = Pick<PickerBaseProps, 'layout'> & {
+  title?: string
+  titleStyle?: StyleProp<TextStyle>
+  onClose?: () => void
+  closeLabel?: string
+  closeLabelStyle?: StyleProp<TextStyle>
+  closeIcon?: IconSource
+  onDone?: () => void
+  doneLabel?: string
+  doneLabelStyle?: StyleProp<TextStyle>
+  doneIcon?: IconSource
+  backgroundColor?: string
+}
+export type TextInputPropsWithoutTheme = Without<MaterialTextInputProps, 'theme'>
+export type PickerBaseProps = {
+  /**
+   * Picker Layout
+   */
+  layout?: PickerLayouts
+  fieldType?: PickerFieldTypes
+  /**
+   * Picker current value in the shape of {value: ..., label: ...}, for custom shape use 'getItemValue' prop
+   */
+  value?: PickerValue
+  /**
+   * Callback for when picker value change
+   */
+  onChange?: (value: PickerValue) => void
+  /**
+   * SINGLE mode or MULTI mode
+   */
+  mode?: PickerModes
+  /**
+   * Picker title
+   */
+  title?: string
+  /**
+   * Limit the number of selected items
+   */
+  selectionLimit?: number
+  placeholder?: string
+  renderPicker?: RenderPicker
+
+  inputProps?: TextInputPropsWithoutTheme
+  renderItem?: (
+    value: PickerValue,
+    itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
+    label?: string
+  ) => React.ReactElement
+  /**
+   * Add onPress callback for when pressing the picker
+   */
+  onPress?: () => void
+  /**
+   * A function that returns the label to show for the selected Picker value
+   */
+  getLabel?: (value: PickerValue) => string
+  /**
+   * Show search input to filter picker items by label
+   */
+  showSearch?: boolean
+  /**
+   * Style object for the search input (only when passing showSearch)
+   */
+  searchStyle?: PickerSearchStyle
+  /**
+   * Placeholder text for the search input (only when passing showSearch)
+   */
+  searchPlaceholder?: string
+  /**
+   * callback for picker modal search input text change (only when passing showSearch)
+   */
+  onSearchChange?: (searchValue: string) => void
+  /**
+   * Render custom search input (only when passing showSearch)
+   */
+  renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement
+  // /**
+  //  * @deprecated pass useWheelPicker prop instead
+  //  * Allow to use the native picker solution (different style for iOS and Android)
+  //  */
+  // useNativePicker?: boolean;
+  /**
+   * Use wheel picker instead of a list picker
+   */
+  useWheelPicker?: boolean
+  /**
+   * Pass props to the list component that wraps the picker options (allows to control FlatList behavior)
+   */
+  listProps?: Partial<FlatListProps<any>>
+  /**
+   * Custom container style
+   */
+  containerStyle?: StyleProp<ViewStyle>
+  /**
+   * Callback for modal onShow event
+   */
+  onShow?: () => void
+  /**
+   * Add safe area in the Picker modal view
+   */
+  useSafeArea?: boolean
+  /**
+   * Component test id
+   */
+  testID?: string
+  // children?: ReactNode | undefined
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  modalProps?: Partial<ModalProps>
+  disabled?: boolean
+  headerProps?: Partial<PickerHeaderProps>
+}
+export type PickerPropsWithSingle = Omit<PickerBaseProps, 'onChange'> & {
+  mode?: PickerModes.SINGLE
+  value?: PickerSingleValue
+  onChange?: (value: PickerSingleValue) => void
+}
+
+export type PickerPropsWithMulti = Omit<PickerBaseProps, 'onChange'> & {
+  mode?: PickerModes.MULTI
+  value?: PickerMultiValue
+  onChange?: (value: PickerMultiValue) => void
+}
+
+export type PickerProps = PropsWithChildren<PickerPropsWithSingle | PickerPropsWithMulti>
+export type PickerItemProps = {
+  /**
+   * Item's value
+   */
+  value: PickerSingleValue
+  /**
+   * Item's label
+   */
+  label: string
+  /**
+   * Item's label style
+   */
+  labelStyle?: StyleProp<TextStyle>
+  /**
+   * Custom function for the item label (e.g (value) => customLabel)
+   */
+  getItemLabel?: PickerProps['getLabel']
+  /**
+   * @deprecated Function to return the value out of the item value prop when value is custom shaped.
+   */
+  // getItemValue?: PickerProps['getItemValue']
+  /**
+   * Render custom item
+   */
+  renderItem?: PickerProps['renderItem']
+  /**
+   * Pass to change the selected icon
+   */
+  selectedIcon?: IconSource
+  /**
+   * Pass to change the selected icon color
+   */
+  selectedIconColor?: string
+  /**
+   * Is the item disabled
+   */
+  disabled?: boolean
+  /**
+   * Callback for onPress action
+   */
+  onPress?: () => void
+  /**
+   * Component test id
+   */
+  testID?: string
+}
+export type PickerContextProps =
+   Pick<PickerProps, 'value'|'renderItem'|'selectionLimit'|'getLabel'> & {
+     onPress: (value: PickerSingleValue) => void
+     isMultiMode: boolean
+     onSelectedLayout: (event: any) => any
+     selectionLimit: PickerProps['selectionLimit']
+   }
+
+export type PickerItemsListProps = Pick<
+  PropsWithChildren<PickerProps>,
+  'testID'|'showSearch'|'listProps'|'children'|'searchStyle'|'searchPlaceholder'|'onSearchChange'|'renderCustomSearch'|'headerProps'|'layout'
+> & {
+  items?: PickerOptionItem[]
+}
+export type PickerMethods = ExpandableOverlayMethods

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

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react'
+import { PressableOpacity as RawPressableOpacity, PressableOpacityProps as RawPressableOpacityProps } from 'react-native-pressable-opacity'
+
+type Props = PropsWithChildren<RawPressableOpacityProps>
+const PressableOpacity = (props: Props) => {
+  const {
+    activeOpacity = 0.5,
+    children,
+    disabledOpacity = 1,
+    ...rest
+  } = props
+
+  return (
+    <RawPressableOpacity {...rest} activeOpacity={activeOpacity} disabledOpacity={disabledOpacity}>
+      {children}
+    </RawPressableOpacity>
+  )
+}
+
+export default PressableOpacity