@rn-components-dropdown/dropdown 1.0.0

package/src/components/dropdown/components/chip/ChipStyle.ts

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { LIGHT_COLORS } from '../../../../style';
+import { Platform, StyleSheet } from 'react-native';
+import { ChipInterface } from '../../interface/ChipInterface';
+
+const useChipStyle = (props: ChipInterface) => {
+  const { chipColor } = props;
+  const { ...colors } = LIGHT_COLORS;
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      box: {
+        margin: 4,
+        height: 26,
+        ...Platform.select({
+          android: {
+            elevation: 5,
+          },
+          ios: {
+            shadowRadius: 1.84,
+            shadowOpacity: 0.25,
+            shadowColor: colors.black,
+            shadowOffset: { width: 0, height: 2 },
+          },
+        }),
+        elevation: 5,
+        width: 'auto',
+        borderRadius: 30,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
+      },
+      chipText: {
+        paddingLeft: 10,
+        fontWeight: '600',
+      },
+      clearContainer: {
+        width: 18,
+        height: 18,
+        borderWidth: 1,
+        borderRadius: 100,
+        marginHorizontal: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor: colors.white,
+        backgroundColor: chipColor ? colors[chipColor] : colors.lightGray,
+      },
+      clearIcon: {
+        height: 12,
+        width: 12,
+        borderRadius: 100,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.white,
+      },
+    });
+  }, [chipColor, colors]);
+  return {
+    styles,
+    colors,
+  };
+};
+
+export default useChipStyle;

package/src/components/dropdown/components/input/TextInput.tsx

@@ -0,0 +1,46 @@
+import { useTextStyle } from './TextInputStyle';
+import React, { useEffect, useState } from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
+import AppTextInput from '../../../textInput/AppTextInput';
+import type { CTextInput } from '../../interface/InputProps';
+
+const TextInputComponent: CTextInput = props => {
+  const {
+    value,
+    placeholder = '',
+    placeholderTextColor = '#000',
+    onChangeText = (_value: string) => {},
+    searchIcon,
+  } = props;
+
+  const [searchtext, setSearchText] = useState<string>('');
+  const { styles } = useTextStyle();
+
+  useEffect(() => {
+    if (value) {
+      setSearchText(value);
+    }
+  }, [value]);
+
+  const onChange = (text: string) => {
+    setSearchText(text);
+    onChangeText(text);
+  };
+
+  return (
+    <TouchableWithoutFeedback>
+      <AppTextInput
+        {...props}
+        value={searchtext}
+        icon={searchIcon}
+        style={styles.input}
+        onChangeText={onChange}
+        placeholder={placeholder}
+        textStyle={styles.inputContainer}
+        placeholderTextColor={placeholderTextColor}
+      />
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default TextInputComponent;

package/src/components/dropdown/components/input/TextInputStyle.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { LIGHT_COLORS } from '../../../../style';
+
+export const useTextStyle = () => {
+  const { ...colors } = LIGHT_COLORS;
+
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      input: {
+        height: 40,
+        width: '95%',
+        fontSize: 16,
+        borderWidth: 1,
+        borderRadius: 3,
+        marginVertical: 10,
+        marginHorizontal: 8,
+        borderColor: colors.border,
+      },
+      inputContainer: {
+        width: '90%',
+        fontSize: 14,
+        color: colors.gray,
+      },
+    });
+  }, [colors]);
+
+  return {
+    styles,
+    colors,
+  };
+};

package/src/components/dropdown/hooks/useDetectDevice.ts

@@ -0,0 +1,25 @@
+import { Platform, PixelRatio, Dimensions } from 'react-native';
+import type { IUseDetectDevice } from '../interface/DropdownInterface';
+
+const { width, height } = Dimensions.get('window');
+
+const isTablet = () => {
+  let pixelDensity = PixelRatio.get();
+  const adjustedWidth = width * pixelDensity;
+  const adjustedHeight = height * pixelDensity;
+  if (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) {
+    return true;
+  } else {
+    return (
+      pixelDensity === 2 && (adjustedWidth >= 1824 || adjustedHeight >= 1824)
+    );
+  }
+};
+
+const useDetectDevice: IUseDetectDevice = {
+  isAndroid: Platform.OS === 'android',
+  isIOS: Platform.OS === 'ios',
+  isTablet: isTablet(),
+};
+
+export { useDetectDevice };

package/src/components/dropdown/hooks/useDropdown.ts

@@ -0,0 +1,356 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  useImperativeHandle,
+} from 'react';
+import {
+  View,
+  FlatList,
+  Keyboard,
+  StatusBar,
+  I18nManager,
+  KeyboardEvent,
+} from 'react-native';
+import _ from 'lodash';
+import { useDetectDevice } from './useDetectDevice';
+import { useDeviceOrientation } from './useOrientation';
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../style';
+import { DropdownProps } from '../interface/DropdownInterface';
+
+const useDropdown = <T, Mode extends 'single' | 'multi'>(
+  props: DropdownProps<T, Mode>,
+) => {
+  const {
+    value,
+    onBlur,
+    onFocus,
+    onChange,
+    data = [],
+    labelField,
+    valueField,
+    fontFamily,
+    searchQuery,
+    searchField,
+    onChangeText,
+    disable = false,
+    ref: currentRef,
+    mode = 'default',
+    autoScroll = true,
+    confirmSelectItem,
+    onConfirmSelectItem,
+    selectionType = 'single',
+  } = props;
+
+  const ref = useRef<View>(null);
+  const { isTablet } = useDetectDevice;
+  const refList = useRef<FlatList>(null);
+  const orientation = useDeviceOrientation();
+  const [position, setPosition] = useState<any>();
+  const [searchText, setSearchText] = useState('');
+  const [listData, setListData] = useState<any[]>(data);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [currentValue, setCurrentValue] = useState<any>(null);
+  const statusBarHeight: number = StatusBar.currentHeight || 0;
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+
+  useImperativeHandle(currentRef, () => {
+    return { open: eventOpen, close: eventClose };
+  });
+
+  useEffect(() => eventClose, []);
+
+  useEffect(() => {
+    setListData([...data]);
+    if (searchText) {
+      onSearch(searchText);
+    }
+  }, [data, searchText]);
+
+  const eventOpen = () => {
+    if (!disable) {
+      setVisible(true);
+      if (onFocus) {
+        onFocus();
+      }
+      if (searchText.length > 0) {
+        onSearch(searchText);
+      }
+      scrollIndex();
+    }
+  };
+
+  const eventClose = useCallback(() => {
+    if (!disable) {
+      setVisible(false);
+      if (onBlur) {
+        onBlur();
+      }
+    }
+  }, [disable, onBlur]);
+
+  const font = useCallback(() => {
+    if (fontFamily) {
+      return {
+        fontFamily: fontFamily,
+      };
+    } else {
+      return {};
+    }
+  }, [fontFamily]);
+
+  const onMeasure = useCallback(() => {
+    if (ref && ref?.current) {
+      ref.current.measureInWindow((pageX, pageY, width, height) => {
+        let isFull = isTablet
+          ? false
+          : mode === 'modal' || orientation === 'LANDSCAPE';
+
+        if (mode === 'auto') {
+          isFull = false;
+        }
+
+        const top = isFull ? 20 : height + pageY + 2;
+        const bottom = SCREEN_HEIGHT - top + height;
+        const left = I18nManager.isRTL ? SCREEN_WIDTH - width - pageX : pageX;
+
+        setPosition({
+          isFull,
+          left: Math.floor(left),
+          width: Math.floor(width),
+          height: Math.floor(height),
+          top: Math.floor(top + statusBarHeight),
+          bottom: Math.floor(bottom - statusBarHeight),
+        });
+      });
+    }
+  }, [isTablet, mode, orientation, statusBarHeight]);
+
+  const onKeyboardDidShow = useCallback(
+    (e: KeyboardEvent) => {
+      onMeasure();
+      setKeyboardHeight(e.endCoordinates.height);
+    },
+    [onMeasure],
+  );
+
+  const onKeyboardDidHide = useCallback(() => {
+    setKeyboardHeight(0);
+    onMeasure();
+  }, [onMeasure]);
+
+  useEffect(() => {
+    const susbcriptionKeyboardDidShow = Keyboard.addListener(
+      'keyboardDidShow',
+      onKeyboardDidShow,
+    );
+    const susbcriptionKeyboardDidHide = Keyboard.addListener(
+      'keyboardDidHide',
+      onKeyboardDidHide,
+    );
+
+    return () => {
+      if (typeof susbcriptionKeyboardDidShow?.remove === 'function') {
+        susbcriptionKeyboardDidShow.remove();
+      }
+
+      if (typeof susbcriptionKeyboardDidHide?.remove === 'function') {
+        susbcriptionKeyboardDidHide.remove();
+      }
+    };
+  }, [onKeyboardDidHide, onKeyboardDidShow]);
+
+  const getValue = useCallback(() => {
+    if (selectionType === 'multi') {
+      if (!valueField) return;
+      const v = data?.filter(i => value?.includes(i[valueField] as any));
+      setCurrentValue(v);
+      return;
+    } else {
+      const defaultValue =
+        typeof value === 'object' ? _.get(value, valueField) : value;
+
+      const getItem = data.filter(e =>
+        _.isEqual(defaultValue, _.get(e, valueField)),
+      );
+      if (getItem.length > 0) {
+        setCurrentValue(getItem[0]);
+      } else {
+        setCurrentValue(null);
+      }
+    }
+  }, [data, value, valueField, selectionType]);
+
+  useEffect(() => getValue(), [value, data, getValue]);
+
+  const scrollIndex = useCallback(() => {
+    if (autoScroll && data.length > 0 && listData.length === data.length) {
+      setTimeout(() => {
+        if (refList && refList?.current) {
+          const defaultValue =
+            typeof value === 'object' ? _.get(value, valueField) : value;
+
+          const index = _.findIndex(listData, (e: any) =>
+            _.isEqual(defaultValue, _.get(e, valueField)),
+          );
+          if (index > -1 && index <= listData.length - 1) {
+            refList?.current?.scrollToIndex({
+              index: index,
+              animated: false,
+            });
+          }
+        }
+      }, 200);
+    }
+  }, [autoScroll, data.length, listData, value, valueField]);
+
+  const showOrClose = useCallback(() => {
+    if (!disable) {
+      if (keyboardHeight > 0 && visible) {
+        return Keyboard.dismiss();
+      }
+      onMeasure();
+      setVisible(!visible);
+      setListData(data);
+
+      if (!visible) {
+        if (onFocus) {
+          onFocus();
+        }
+      } else {
+        if (onBlur) {
+          onBlur();
+        }
+      }
+      if (searchText?.length > 0) {
+        onSearch(searchText);
+      }
+      scrollIndex();
+    }
+  }, [
+    data,
+    onBlur,
+    visible,
+    disable,
+    onFocus,
+    onMeasure,
+    searchText,
+    scrollIndex,
+    keyboardHeight,
+  ]);
+
+  const onSearch = useCallback(
+    (text: string) => {
+      if (text.length > 0) {
+        const defaultFilterFunction = (e: any) => {
+          const item = _.get(e, searchField || labelField)
+            ?.toLowerCase()
+            .replace(' ', '')
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+          const key = text
+            .toLowerCase()
+            .replace(' ', '')
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+
+          return item.indexOf(key) >= 0;
+        };
+
+        const propSearchFunction = (e: any) => {
+          const labelText = _.get(e, searchField || labelField);
+
+          return searchQuery?.(text, labelText);
+        };
+
+        const dataSearch = data.filter(
+          searchQuery ? propSearchFunction : defaultFilterFunction,
+        );
+        setListData(dataSearch);
+      } else {
+        setListData(data);
+      }
+    },
+    [data, searchField, labelField, searchQuery],
+  );
+
+  const onSelect = useCallback(
+    (item: any) => {
+      if (confirmSelectItem && onConfirmSelectItem) {
+        return onConfirmSelectItem(item);
+      }
+
+      if (onChangeText) {
+        setSearchText('');
+        onChangeText('');
+      }
+      onSearch('');
+      setCurrentValue(item);
+      onChange?.(item[valueField]);
+      eventClose();
+    },
+    [
+      onChange,
+      onSearch,
+      eventClose,
+      onChangeText,
+      confirmSelectItem,
+      onConfirmSelectItem,
+    ],
+  );
+
+  const onCheckPress = useCallback(
+    (item: any) => {
+      setCurrentValue?.((prev: T[]) => {
+        const exists = prev?.some?.(
+          (i: any) => i[valueField] === item[valueField],
+        );
+        const va: T[] = exists
+          ? _.filter(prev, i => i?.[valueField] !== item?.[valueField])
+          : [...prev, item];
+        const v = va?.map(i => i[valueField]);
+        onChange?.(
+          item[valueField],
+          selectionType === 'multi' ? v : item[valueField],
+        );
+        return va;
+      });
+    },
+    [setCurrentValue, valueField, onChange, currentValue],
+  );
+
+  const onClearPress = useCallback(
+    (item: T) => {
+      const clone = _.clone(currentValue);
+      const rem = _.remove(clone, i => i?.[valueField] !== item[valueField]);
+      const val = rem?.map(i => i?.[valueField]);
+      setCurrentValue(rem);
+      onChange?.(item[valueField] as keyof T, val);
+    },
+    [onChange],
+  );
+
+  return {
+    ref,
+    font,
+    refList,
+    visible,
+    position,
+    onSelect,
+    onSearch,
+    listData,
+    onMeasure,
+    searchText,
+    showOrClose,
+    scrollIndex,
+    currentValue,
+    onCheckPress,
+    onClearPress,
+    setSearchText,
+    keyboardHeight,
+  };
+};
+
+export default useDropdown;

package/src/components/dropdown/hooks/useOrientation.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { Dimensions, ScaledSize } from 'react-native';
+
+const isOrientationPortrait = ({ width, height }: ScaledSize) =>
+  height >= width;
+const isOrientationLandscape = ({ width, height }: ScaledSize) =>
+  width >= height;
+
+export function useDeviceOrientation() {
+  const screen = Dimensions.get('screen');
+  const initialState = {
+    portrait: isOrientationPortrait(screen),
+    landscape: isOrientationLandscape(screen),
+  };
+
+  const [orientation, setOrientation] = useState(initialState);
+
+  useEffect(() => {
+    const onChange = ({ screen: screens }: { screen: ScaledSize }) => {
+      setOrientation({
+        portrait: isOrientationPortrait(screens),
+        landscape: isOrientationLandscape(screens),
+      });
+    };
+
+    const subscription = Dimensions.addEventListener('change', onChange);
+
+    return () => {
+      if (typeof subscription?.remove === 'function') {
+        subscription.remove();
+      }
+    };
+  }, []);
+
+  return orientation.portrait ? 'PORTRAIT' : 'LANDSCAPE';
+}

package/src/components/dropdown/interface/ChipInterface.ts

@@ -0,0 +1,9 @@
+import { ThemeColors } from '../../../interface/colors.interface';
+
+export interface ChipInterface {
+  label?: string;
+  onClearPress?: () => void;
+  chipColor?: keyof ThemeColors;
+  textColor?: keyof ThemeColors;
+  clearIcon?: React.JSX.Element;
+}

package/src/components/dropdown/interface/DropdownInterface.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import type {
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+  TextProps,
+  ImageStyle,
+  FlatListProps,
+} from 'react-native';
+import { ThemeColors } from '../../../interface/colors.interface';
+
+export type IDropdownRef = {
+  open: () => void;
+  close: () => void;
+};
+
+export type SelectionType = 'single' | 'multi';
+
+export type DropdownProps<S, T extends SelectionType> = {
+  data: S[];
+  testID?: string;
+  search?: boolean;
+  disable?: boolean;
+  selectionType?: T;
+  maxHeight?: number;
+  iconColor?: string;
+  minHeight?: number;
+  inverted?: boolean;
+  fontFamily?: string;
+  labelField: keyof S;
+  valueField: keyof S;
+  onBlur?: () => void;
+  placeholder?: string;
+  onFocus?: () => void;
+  autoScroll?: boolean;
+  searchField?: keyof S;
+  value?: S[] | undefined;
+  itemTestIDField?: string;
+  backgroundColor?: string;
+  keyboardAvoiding?: boolean;
+  searchPlaceholder?: string;
+  label?: string | undefined;
+  confirmSelectItem?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  subfixIcon?: React.JSX.Element;
+  onClear?: (id?: number) => void;
+  multiSelectIcon?:React.JSX.Element;
+  checkIconColor?: keyof ThemeColors;
+  radioIconColor?: keyof ThemeColors;
+  onChange?: (
+    selecteValue?: keyof S,
+    selectedList?: SelectionType extends 'single' | 'multi' ? S[] : S,
+  ) => void;
+  selectedTextProps?: TextProps;
+  activeColor?: keyof ThemeColors;
+  iconStyle?: StyleProp<ImageStyle>;
+  mode?: 'default' | 'modal' | 'auto';
+  itemTextStyle?: StyleProp<TextStyle>;
+  itemAccessibilityLabelField?: string;
+  labelContainer?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  labelTextStyle?: StyleProp<TextStyle>;
+  showsVerticalScrollIndicator?: boolean;
+  placeholderStyle?: StyleProp<TextStyle>;
+  inputSearchStyle?: StyleProp<TextStyle>;
+  onChangeText?: (search: string) => void;
+  onConfirmSelectItem?: (item: T) => void;
+  selectedTextStyle?: StyleProp<TextStyle>;
+  itemContainerStyle?: StyleProp<ViewStyle>;
+  dropdownPosition?: 'auto' | 'top' | 'bottom';
+  ref?: React.RefObject<IDropdownRef> | null | undefined;
+  searchQuery?: (keyword: string, labelValue: string) => boolean;
+  flatListProps?: Omit<FlatListProps<any>, 'renderItem' | 'data'>;
+  renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
+  renderLeftIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
+  renderItem?: (
+    item: S,
+    selected?: boolean,
+  ) => React.JSX.Element | null | undefined;
+  renderInputSearch?: (
+    onSearch: (text: string) => void,
+  ) => React.JSX.Element | null | undefined;
+};
+
+export interface IUseDetectDevice {
+  isAndroid: boolean;
+  isIOS: boolean;
+  isTablet: boolean;
+}

package/src/components/dropdown/interface/InputProps.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle, TextInputProps } from 'react-native';
+
+interface Props extends TextInputProps {
+  style?: StyleProp<ViewStyle>;
+  searchIcon?: React.JSX.Element;
+}
+
+export type CTextInput = React.FC<Props>;

package/src/components/svgButton/SvgButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSvgButtonStyle } from './SvgButtonStyle';
+import { Pressable, StyleProp, ViewStyle, PressableProps } from 'react-native';
+
+interface Props {
+  isFab?: boolean;
+  onPress?: () => void;
+  icon?: React.JSX.Element;
+  style?: StyleProp<ViewStyle>;
+  pressableProps?: PressableProps;
+}
+
+const SvgButton = React.memo(
+  ({
+    icon,
+    style,
+    onPress,
+    isFab = false,
+    pressableProps,
+  }: Props) => {
+    const { styles } = useSvgButtonStyle();
+    const styleProp = isFab ? [styles?.favIcon, style] : style;
+
+    return (
+      <Pressable
+        hitSlop={10}
+        style={styleProp}
+        onPress={onPress}
+        {...pressableProps}
+      >
+        {icon && icon} 
+      </Pressable>
+    );
+  },
+);
+
+export default SvgButton;