@rn-components-dropdown/dropdown 1.0.0

package/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,512 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback } from 'react';
+import {
+  View,
+  Modal,
+  FlatList,
+  ViewStyle,
+  StyleSheet,
+  ScrollView,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import _ from 'lodash';
+import AppText from '../text/AppText';
+import Chip from './components/chip/Chip';
+import useDropdown from './hooks/useDropdown';
+import SvgButton from '../svgButton/SvgButton';
+import { useDropdownStyle } from './DropdownStyle';
+import SearchInput from './components/input/TextInput';
+import { DropdownProps } from './interface/DropdownInterface';
+
+const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
+  props: DropdownProps<T, Mode>,
+) => {
+  const {
+    label,
+    testID,
+    iconStyle,
+    renderItem,
+    style = {},
+    subfixIcon,
+    labelField,
+    valueField,
+    onChangeText,
+    itemTextStyle,
+    flatListProps,
+    minHeight = 0,
+    containerStyle,
+    search = false,
+    renderLeftIcon,
+    multiSelectIcon,
+    itemTestIDField,
+    maxHeight = 300,
+    inverted = true,
+    renderRightIcon,
+    backgroundColor,
+    placeholderStyle,
+    inputSearchStyle,
+    searchPlaceholder,
+    selectedTextStyle,
+    renderInputSearch,
+    iconColor = 'gray',
+    accessibilityLabel,
+    itemContainerStyle,
+    labelContainer = {},
+    labelTextStyle = {},
+    selectedTextProps = {},
+    selectionType = 'single',
+    activeColor = 'lightGray',
+    keyboardAvoiding = true,
+    dropdownPosition = 'auto',
+    placeholder = 'Select item',
+    itemAccessibilityLabelField,
+    showsVerticalScrollIndicator = true,
+  } = props;
+
+  const { styles, colors } = useDropdownStyle({});
+  const {
+    ref,
+    font,
+    visible,
+    refList,
+    position,
+    onSelect,
+    listData,
+    onSearch,
+    onMeasure,
+    searchText,
+    showOrClose,
+    scrollIndex,
+    currentValue,
+    onCheckPress,
+    onClearPress,
+    setSearchText,
+    keyboardHeight,
+  } = useDropdown({ ...props });
+
+  const renderRight = () => {
+    return renderRightIcon ? (
+      renderRightIcon(visible)
+    ) : (
+      <SvgButton
+        icon={subfixIcon}
+        onPress={showOrClose}
+        style={StyleSheet.flatten([
+          iconStyle,
+          styles.icon,
+          { tintColor: iconColor },
+        ])}
+      />
+    );
+  };
+
+  const _renderDropdown = () => {
+    const isSelected = currentValue && _.get(currentValue, valueField);
+    return (
+      <TouchableWithoutFeedback
+        testID={testID}
+        accessible={!!accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
+        onPress={() => (selectionType === 'single' ? showOrClose() : null)}
+      >
+        <View style={styles.dropdown}>
+          {renderLeftIcon?.(visible)}
+          {selectionType === 'single' ? (
+            <AppText
+              style={[
+                styles.textItem,
+                isSelected !== null ? selectedTextStyle : placeholderStyle,
+                font(),
+              ]}
+              {...selectedTextProps}
+            >
+              {isSelected !== null
+                ? _.get(currentValue, labelField)
+                : placeholder}
+            </AppText>
+          ) : currentValue?.length === 0 ? (
+            <AppText
+              style={[styles.textItem, placeholderStyle, font()]}
+              {...selectedTextProps}
+            >
+              {placeholder}
+            </AppText>
+          ) : (
+            <View style={styles.showMultiSelectContainer}>
+              <ScrollView showsVerticalScrollIndicator={false}>
+                <View style={styles.wraps}>
+                  {currentValue?.map?.((i: any) => (
+                    <Chip
+                      label={i.name}
+                      chipColor={'red'}
+                      textColor={'white'}
+                      key={i?.[valueField]}
+                      onClearPress={() => onClearPress(i)}
+                    />
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {renderRight()}
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  };
+
+  const renderRadio = useCallback(
+    (selected: boolean) => {
+      return (
+        <View style={styles.itemIconContainer}>
+          {selected && <View style={styles.iconSubContainer} />}
+        </View>
+      );
+    },
+    [styles],
+  );
+
+  const renderCheckItem = useCallback(
+    ({ item, index }: { item: any; index: number }) => {
+      const isSelected = _.some(currentValue, h =>
+        _.isEqual(_.get(h, valueField), _.get(item, valueField)),
+      );
+      return (
+        <TouchableHighlight
+          key={index.toString()}
+          testID={_.get(item, itemTestIDField || labelField)}
+          accessible={!!accessibilityLabel}
+          accessibilityLabel={_.get(
+            item,
+            itemAccessibilityLabelField || labelField,
+          )}
+          underlayColor={colors[activeColor]}
+          onPress={() => onCheckPress(item)}
+        >
+          <View style={StyleSheet.flatten([itemContainerStyle])}>
+            {renderItem ? (
+              renderItem(item, isSelected)
+            ) : (
+              <View style={styles.item}>
+                <SvgButton
+                  icon={multiSelectIcon}
+                  onPress={() => onCheckPress(item)}
+                  style={[
+                    styles.checkContainer,
+                    {
+                      backgroundColor: isSelected ? colors.gray : colors.white,
+                    },
+                  ]}
+                />
+                <AppText
+                  style={StyleSheet.flatten([
+                    styles.textItem,
+                    itemTextStyle,
+                    font(),
+                  ])}
+                >
+                  {_.get(item, labelField)}
+                </AppText>
+              </View>
+            )}
+          </View>
+        </TouchableHighlight>
+      );
+    },
+    [
+      font,
+      colors,
+      styles,
+      labelField,
+      renderItem,
+      valueField,
+      activeColor,
+      currentValue,
+      itemTextStyle,
+      itemTestIDField,
+      accessibilityLabel,
+      itemContainerStyle,
+      itemAccessibilityLabelField,
+    ],
+  );
+
+  const _renderItem = useCallback(
+    ({ item, index }: { item: any; index: number }) => {
+      const isSelected = currentValue && _.get(currentValue, valueField);
+      const selected = _.isEqual(_.get(item, valueField), isSelected);
+      _.assign(item, { _index: index });
+      return (
+        <TouchableHighlight
+          key={index.toString()}
+          testID={_.get(item, itemTestIDField || labelField)}
+          accessible={!!accessibilityLabel}
+          accessibilityLabel={_.get(
+            item,
+            itemAccessibilityLabelField || labelField,
+          )}
+          underlayColor={colors[activeColor]}
+          onPress={() => onSelect(item)}
+        >
+          <View style={StyleSheet.flatten([itemContainerStyle])}>
+            {renderItem ? (
+              renderItem(item, selected)
+            ) : (
+              <View style={styles.item}>
+                {renderRadio(selected)}
+                <AppText
+                  style={StyleSheet.flatten([
+                    styles.textItem,
+                    itemTextStyle,
+                    font(),
+                  ])}
+                >
+                  {_.get(item, labelField)}
+                </AppText>
+              </View>
+            )}
+          </View>
+        </TouchableHighlight>
+      );
+    },
+    [
+      font,
+      colors,
+      styles,
+      onSelect,
+      labelField,
+      renderItem,
+      valueField,
+      renderRadio,
+      activeColor,
+      currentValue,
+      itemTextStyle,
+      itemTestIDField,
+      accessibilityLabel,
+      itemContainerStyle,
+      itemAccessibilityLabelField,
+    ],
+  );
+
+  const renderSearch = useCallback(() => {
+    if (search) {
+      if (renderInputSearch) {
+        return renderInputSearch(text => {
+          if (onChangeText) {
+            setSearchText(text);
+            onChangeText(text);
+          }
+          onSearch(text);
+        });
+      } else {
+        return (
+          <SearchInput
+            value={searchText}
+            autoCorrect={false}
+            testID={testID + ' input'}
+            placeholder={searchPlaceholder}
+            placeholderTextColor={colors.black}
+            style={[styles.input, inputSearchStyle]}
+            accessibilityLabel={accessibilityLabel + ' input'}
+            onChangeText={(e: any) => {
+              if (onChangeText) {
+                setSearchText(e);
+                onChangeText(e);
+              }
+              onSearch(e);
+            }}
+          />
+        );
+      }
+    }
+    return null;
+  }, [
+    search,
+    testID,
+    colors,
+    styles,
+    onSearch,
+    searchText,
+    onChangeText,
+    inputSearchStyle,
+    renderInputSearch,
+    searchPlaceholder,
+    accessibilityLabel,
+  ]);
+
+  const _renderList = useCallback(
+    (isTopPosition: boolean) => {
+      const isInverted = !inverted ? false : isTopPosition;
+
+      const _renderListHelper = () => {
+        return (
+          <FlatList
+            ref={refList}
+            data={listData}
+            {...flatListProps}
+            testID={testID + ' flatlist'}
+            keyboardShouldPersistTaps="handled"
+            onScrollToIndexFailed={scrollIndex}
+            inverted={isTopPosition ? inverted : false}
+            keyExtractor={(_item, index) => index.toString()}
+            accessibilityLabel={accessibilityLabel + ' flatlist'}
+            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+            renderItem={
+              selectionType === 'single' ? _renderItem : renderCheckItem
+            }
+          />
+        );
+      };
+
+      return (
+        <TouchableWithoutFeedback>
+          <View style={styles.flexShrink}>
+            {isInverted && _renderListHelper()}
+            {renderSearch()}
+            {!isInverted && _renderListHelper()}
+          </View>
+        </TouchableWithoutFeedback>
+      );
+    },
+    [
+      inverted,
+      styles,
+      testID,
+      listData,
+      scrollIndex,
+      renderSearch,
+      flatListProps,
+      renderCheckItem,
+      accessibilityLabel,
+      showsVerticalScrollIndicator,
+    ],
+  );
+
+  const _renderModal = useCallback(() => {
+    if (visible && position) {
+      const { isFull, width, height, top, bottom, left } = position;
+
+      const onAutoPosition = () => {
+        if (keyboardHeight > 0) {
+          return bottom < keyboardHeight + height;
+        }
+
+        return bottom < (search ? 150 : 100);
+      };
+
+      if (width && top && bottom) {
+        const styleVertical: ViewStyle = {
+          left: left,
+          maxHeight: maxHeight,
+          minHeight: minHeight,
+        };
+        const isTopPosition =
+          dropdownPosition === 'auto'
+            ? onAutoPosition()
+            : dropdownPosition === 'top';
+
+        let keyboardStyle: ViewStyle = {};
+
+        let extendHeight = !isTopPosition ? top : bottom;
+        if (
+          keyboardAvoiding &&
+          keyboardHeight > 0 &&
+          isTopPosition &&
+          dropdownPosition === 'auto'
+        ) {
+          extendHeight = keyboardHeight;
+        }
+
+        return (
+          <Modal
+            transparent
+            visible={visible}
+            statusBarTranslucent
+            onRequestClose={showOrClose}
+            supportedOrientations={['landscape', 'portrait']}
+          >
+            <TouchableWithoutFeedback onPress={showOrClose}>
+              <View
+                style={StyleSheet.flatten([
+                  styles.flex1,
+                  isFull && styles.styleContainerVertical,
+                  backgroundColor && { backgroundColor: backgroundColor },
+                  keyboardStyle,
+                ])}
+              >
+                <View
+                  style={StyleSheet.flatten([
+                    styles.flex1,
+                    !isTopPosition
+                      ? { paddingTop: extendHeight }
+                      : {
+                          justifyContent: 'flex-end',
+                          paddingBottom: extendHeight,
+                        },
+                    isFull && styles.fullScreen,
+                  ])}
+                >
+                  <View
+                    style={StyleSheet.flatten([
+                      styles.container,
+                      isFull ? styles.styleHorizontal : styleVertical,
+                      {
+                        width,
+                      },
+                      containerStyle,
+                    ])}
+                  >
+                    {_renderList(isTopPosition)}
+                  </View>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </Modal>
+        );
+      }
+      return null;
+    }
+    return null;
+  }, [
+    search,
+    styles,
+    visible,
+    position,
+    maxHeight,
+    minHeight,
+    showOrClose,
+    _renderList,
+    keyboardHeight,
+    containerStyle,
+    backgroundColor,
+    dropdownPosition,
+    keyboardAvoiding,
+  ]);
+
+  const _renderLabel = useCallback(() => {
+    return label ? (
+      <View style={[styles.labelContainer, labelContainer]}>
+        <AppText style={[styles.labelTextStyle, labelTextStyle]}>
+          {label}
+        </AppText>
+      </View>
+    ) : (
+      <></>
+    );
+  }, [label, labelContainer, labelTextStyle, styles]);
+
+  return (
+    <View style={styles.mainContainer}>
+      {_renderLabel()}
+      <View
+        ref={ref}
+        onLayout={onMeasure}
+        style={StyleSheet.flatten([styles.mainWrap, style])}
+      >
+        {_renderDropdown()}
+        {_renderModal()}
+      </View>
+    </View>
+  );
+};
+
+export default DropdownComponent;

package/src/components/dropdown/DropdownStyle.ts

@@ -0,0 +1,154 @@
+import { useMemo } from 'react';
+import { I18nManager, StyleSheet } from 'react-native';
+import { useDeviceOrientation } from './hooks/useOrientation';
+import { ThemeColors } from '../../interface/colors.interface';
+import { DEFAULT_COLORS, SCREEN_WIDTH, SPACING, LIGHT_COLORS } from '../../style';
+
+interface Props {
+  size?: number;
+  radioIconColor?: keyof ThemeColors;
+  checkIconColor?: keyof ThemeColors;
+}
+
+export const useDropdownStyle = (props: Props) => {
+  const orientation = useDeviceOrientation();
+  const { ...colors } = LIGHT_COLORS
+  const { size = 16, radioIconColor, checkIconColor } = props;
+
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      mainContainer: {
+        width: '100%',
+      },
+      mainWrap: {
+        borderWidth: 1,
+        borderRadius: 6,
+        paddingHorizontal: 6,
+        justifyContent: 'center',
+        borderColor: colors.lightGray,
+      },
+      container: {
+        flexShrink: 1,
+        borderWidth: 0.5,
+        borderColor: '#EEEEEE',
+        shadowColor: colors.black,
+        backgroundColor: colors.white,
+        shadowOffset: {
+          width: 0,
+          height: 1,
+        },
+        elevation: 2,
+        shadowOpacity: 0.2,
+        shadowRadius: 1.41,
+      },
+      flex1: {
+        flex: 1,
+      },
+      flexShrink: {
+        flexShrink: 1,
+      },
+      wrapTop: {
+        justifyContent: 'flex-end',
+      },
+      dropdown: {
+        minHeight: 48,
+        maxHeight: 170,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+      },
+      title: {
+        fontSize: 16,
+        marginVertical: SPACING.s6,
+        writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+      },
+      item: {
+        padding: 17,
+        alignItems: 'center',
+        borderBottomWidth: 0.5,
+        borderColor: colors.lightGray,
+        justifyContent: 'space-between',
+        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+      },
+      textItem: {
+        flex: 1,
+        fontSize: 16,
+        writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+      },
+      icon: {
+        width: 20,
+        height: 20,
+      },
+      input: {
+        margin: 6,
+        height: 45,
+        borderWidth: 0.5,
+        borderColor: '#DDDDDD',
+        marginBottom: SPACING.s8,
+        paddingHorizontal: SPACING.s8,
+      },
+      fullScreen: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      labelContainer: {
+        marginBottom: SPACING.s6,
+        paddingVertical: SPACING.s6,
+      },
+      labelTextStyle: {
+        color: colors.black,
+      },
+      itemIconContainer: {
+        borderWidth: 2,
+        marginRight: 10,
+        borderRadius: 100,
+        width: size || 24,
+        height: size || 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: (size || 24) / 8,
+        borderColor: radioIconColor || colors.gray,
+      },
+      iconSubContainer: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 100,
+        backgroundColor: radioIconColor || colors.gray,
+      },
+      styleHorizontal: {
+        width: orientation === 'LANDSCAPE' ? SCREEN_WIDTH / 2 : '100%',
+        alignSelf: 'center',
+      },
+      styleContainerVertical: {
+        alignItems: 'center',
+        backgroundColor: DEFAULT_COLORS.blackOpacity,
+      },
+      checkContainer: {
+        borderWidth: 2,
+        borderRadius: 2,
+        marginRight: 10,
+        width: size || 16,
+        height: size || 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor: checkIconColor ? checkIconColor : colors.gray,
+      },
+      showMultiSelectContainer: {
+        width: '90%',
+        height: 'auto',
+        maxHeight: 200,
+      },
+      wraps: {
+        flexWrap: 'wrap',
+        paddingVertical: 6,
+        flexDirection: 'row',
+        paddingHorizontal: 10,
+      },
+    });
+  }, [size, colors, orientation, radioIconColor, checkIconColor]);
+
+  return {
+    styles,
+    colors,
+  };
+};

package/src/components/dropdown/components/chip/Chip.tsx

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import useChipStyle from './ChipStyle';
+import AppText from '../../../text/AppText';
+import SvgButton from '../../../svgButton/SvgButton';
+import { ChipInterface } from '../../interface/ChipInterface';
+
+const Chip = (props: ChipInterface) => {
+  const { styles } = useChipStyle({ ...props });
+  const { label, onClearPress, textColor, clearIcon } = props;
+  return (
+    <View style={styles.box}>
+      <AppText
+        size={12}
+        fontFamily={'semiBold'}
+        style={styles.chipText}
+        color={textColor ? textColor : 'gray'}
+      >
+        {label}
+      </AppText>
+      <View style={styles.clearContainer}>
+        <SvgButton
+          icon={clearIcon}
+          onPress={onClearPress}
+          style={styles.clearIcon}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default Chip;