rn-custom-ui 1.0.0

package/src/components/customDropDown/DropDownList.tsx

@@ -0,0 +1,88 @@
+import {
+  ScrollView,
+  StyleSheet,
+  type ImageStyle,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useMemo } from 'react';
+
+import DropDownOptionRow from './DropDownListItem';
+import { dropdownStyles } from './styles';
+import type {
+  DropDownItemImageAlign,
+  DropDownListItem as DropDownListItemType,
+} from './types';
+import { normalizeListItems } from './utils';
+
+type DropDownListProps = {
+  data: DropDownListItemType[];
+  selectedText?: string;
+  onSelect: (item: string, index: number) => void;
+  maxHeight?: number;
+  itemImageAlign?: DropDownItemImageAlign;
+  itemImageGap?: number;
+  listStyle?: StyleProp<ViewStyle>;
+  itemTextStyle?: StyleProp<TextStyle>;
+  itemImageStyle?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const DropDownList = ({
+  data,
+  selectedText,
+  onSelect,
+  maxHeight = 220,
+  itemImageAlign = 'left',
+  itemImageGap = 10,
+  listStyle,
+  itemTextStyle,
+  itemImageStyle,
+  containerStyle,
+}: DropDownListProps) => {
+  const normalizedData = useMemo(() => normalizeListItems(data), [data]);
+
+  return (
+    <ScrollView
+      style={[
+        dropdownStyles.list,
+        styles.scrollView,
+        { maxHeight },
+        listStyle,
+        containerStyle,
+      ]}
+      nestedScrollEnabled
+      keyboardShouldPersistTaps="handled"
+      showsVerticalScrollIndicator={false}
+    >
+      {normalizedData.map((item, index) => {
+        const isLast = index === normalizedData.length - 1;
+        const isSelected =
+          selectedText === item.label || selectedText === item.value;
+
+        return (
+          <DropDownOptionRow
+            key={`${item.value}-${index}`}
+            item={item}
+            isSelected={isSelected}
+            isLast={isLast}
+            imageAlign={itemImageAlign}
+            imageGap={itemImageGap}
+            itemTextStyle={itemTextStyle}
+            itemImageStyle={itemImageStyle}
+            onPress={() => onSelect(item.label, index)}
+          />
+        );
+      })}
+    </ScrollView>
+  );
+};
+
+export default DropDownList;
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flexGrow: 0,
+  },
+});

package/src/components/customDropDown/DropDownListItem.tsx

@@ -0,0 +1,74 @@
+import {
+  Image,
+  Text,
+  TouchableOpacity,
+  View,
+  type ImageStyle,
+  type StyleProp,
+  type TextStyle,
+} from 'react-native';
+
+import { dropdownStyles } from './styles';
+import type { DropDownItemImageAlign, NormalizedDropDownOption } from './types';
+
+type DropDownListItemProps = {
+  item: NormalizedDropDownOption;
+  isSelected: boolean;
+  isLast: boolean;
+  imageAlign: DropDownItemImageAlign;
+  imageGap: number;
+  itemTextStyle?: StyleProp<TextStyle>;
+  itemImageStyle?: StyleProp<ImageStyle>;
+  onPress: () => void;
+};
+
+const DropDownListItem = ({
+  item,
+  isSelected,
+  isLast,
+  imageAlign,
+  imageGap,
+  itemTextStyle,
+  itemImageStyle,
+  onPress,
+}: DropDownListItemProps) => {
+  const imageNode = item.image ? (
+    <Image
+      resizeMode="contain"
+      source={item.image}
+      style={[dropdownStyles.itemImage, itemImageStyle]}
+    />
+  ) : null;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.6}
+      style={[dropdownStyles.listItem, isLast && dropdownStyles.listItemLast]}
+      onPress={onPress}
+    >
+      <View
+        style={[
+          dropdownStyles.itemRow,
+          imageAlign === 'right' && dropdownStyles.itemRowImageRight,
+          { gap: imageGap },
+        ]}
+      >
+        {imageAlign === 'left' && imageNode}
+        <Text
+          style={[
+            dropdownStyles.itemText,
+            imageAlign === 'right' && dropdownStyles.itemTextWithRightImage,
+            isSelected && dropdownStyles.itemTextSelected,
+            itemTextStyle,
+          ]}
+          numberOfLines={1}
+        >
+          {item.label}
+        </Text>
+        {imageAlign === 'right' && imageNode}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default DropDownListItem;

package/src/components/customDropDown/DropDownListModal.tsx

@@ -0,0 +1,86 @@
+import {
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type ImageSourcePropType,
+  type ImageStyle,
+  type StyleProp,
+  type TextStyle,
+} from 'react-native';
+
+import CloseButton from '../closeButton';
+import DropDownList from './DropDownList';
+import { dropdownStyles } from './styles';
+import type { DropDownItemImageAlign, DropDownListItem } from './types';
+
+type DropDownListModalProps = {
+  data: DropDownListItem[];
+  visible: boolean;
+  title?: string;
+  selectedText?: string;
+  onClose: () => void;
+  onSelect: (item: string, index: number) => void;
+  maxListHeight?: number;
+  itemImageAlign?: DropDownItemImageAlign;
+  itemImageGap?: number;
+  itemTextStyle?: StyleProp<TextStyle>;
+  itemImageStyle?: StyleProp<ImageStyle>;
+  closeImage?: ImageSourcePropType;
+};
+
+const DropDownListModal = ({
+  data,
+  visible,
+  title,
+  selectedText,
+  onClose,
+  onSelect,
+  maxListHeight,
+  itemImageAlign,
+  itemImageGap,
+  itemTextStyle,
+  itemImageStyle,
+  closeImage,
+}: DropDownListModalProps) => {
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      supportedOrientations={['landscape', 'portrait']}
+      onRequestClose={onClose}
+    >
+      <Pressable style={dropdownStyles.modalContainer} onPress={onClose}>
+        <Pressable style={dropdownStyles.modalContent} onPress={() => {}}>
+          <View style={dropdownStyles.modalHeader}>
+            <Text style={dropdownStyles.modalTitle} numberOfLines={1}>
+              {title || 'Select an option'}
+            </Text>
+            <CloseButton
+              closeImage={closeImage}
+              onPress={onClose}
+              containerStyle={dropdownStyles.modalCloseButton}
+            />
+          </View>
+
+          <DropDownList
+            data={data}
+            selectedText={selectedText}
+            maxHeight={maxListHeight}
+            itemImageAlign={itemImageAlign}
+            itemImageGap={itemImageGap}
+            itemTextStyle={itemTextStyle}
+            itemImageStyle={itemImageStyle}
+            containerStyle={dropdownStyles.modalList}
+            onSelect={(item, index) => {
+              onSelect(item, index);
+              onClose();
+            }}
+          />
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+export default DropDownListModal;

package/src/components/customDropDown/index.tsx

@@ -0,0 +1,213 @@
+import { useMemo, useState } from 'react';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import DropDownBottomSheet from './DropDownBottomSheet';
+import DropDownList from './DropDownList';
+import DropDownListModal from './DropDownListModal';
+import { dropdownStyles } from './styles';
+import type { CustomDropDownProps } from './types';
+import { findSelectedOption, normalizeListItems } from './utils';
+
+const CustomDropDown = ({
+  mode = 'modal',
+  label = '',
+  selectedText,
+  listItems,
+  onSelect,
+  isSelected = false,
+  disabled = false,
+  placeholder = 'Select an option',
+  maxListHeight = 220,
+  itemImageAlign = 'left',
+  itemImageGap = 10,
+  toggleImageAlign,
+  itemImageStyle,
+  toggleImageStyle,
+  styleDropdown = {},
+  labelTextStyle,
+  dropdownTextStyles,
+  listStyle,
+  itemTextStyle,
+  closeImage,
+}: CustomDropDownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const normalizedItems = useMemo(
+    () => normalizeListItems(listItems),
+    [listItems]
+  );
+  const selectedOption = useMemo(
+    () => findSelectedOption(normalizedItems, selectedText),
+    [normalizedItems, selectedText]
+  );
+
+  const displayText = selectedText || placeholder;
+  const hasSelection = isSelected || Boolean(selectedText);
+  const isOverlayOpen = isOpen && (mode === 'inline' || mode === 'anchored');
+  const resolvedToggleImageAlign = toggleImageAlign ?? itemImageAlign;
+
+  const rotation = isOpen ? '180deg' : '0deg';
+
+  const textStyle = useMemo(
+    () => [
+      dropdownStyles.selectedText,
+      hasSelection && dropdownStyles.selectedTextActive,
+      dropdownTextStyles,
+    ],
+    [hasSelection, dropdownTextStyles]
+  );
+
+  const close = () => setIsOpen(false);
+
+  const toggle = () => {
+    if (disabled) {
+      return;
+    }
+
+    if (mode === 'inline' || mode === 'anchored') {
+      setIsOpen((current) => !current);
+      return;
+    }
+
+    setIsOpen(true);
+  };
+
+  const handleSelect = (item: string, index: number) => {
+    onSelect(item, index);
+    close();
+  };
+
+  const listContainerStyle =
+    mode === 'anchored'
+      ? [dropdownStyles.anchoredList, dropdownStyles.inlineList]
+      : dropdownStyles.inlineList;
+
+  const listProps = {
+    data: listItems,
+    selectedText,
+    maxHeight: maxListHeight,
+    itemImageAlign,
+    itemImageGap,
+    listStyle,
+    itemTextStyle,
+    itemImageStyle,
+    onSelect: handleSelect,
+  };
+
+  const renderToggleImage = () => {
+    if (!selectedOption?.image) {
+      return null;
+    }
+
+    return (
+      <Image
+        resizeMode="contain"
+        source={selectedOption.image}
+        style={[dropdownStyles.toggleImage, toggleImageStyle]}
+      />
+    );
+  };
+
+  const renderToggleLabel = () => (
+    <Text style={textStyle} numberOfLines={1}>
+      {displayText}
+    </Text>
+  );
+
+  return (
+    <View
+      style={[
+        dropdownStyles.container,
+        isOverlayOpen && dropdownStyles.toggleWrapperOpen,
+      ]}
+    >
+      {!!label && (
+        <Text style={[dropdownStyles.labelText, labelTextStyle]}>{label}</Text>
+      )}
+
+      <View
+        style={[
+          dropdownStyles.toggleWrapper,
+          isOverlayOpen && dropdownStyles.toggleWrapperOpen,
+        ]}
+      >
+        <TouchableOpacity
+          activeOpacity={0.5}
+          disabled={disabled}
+          style={[
+            dropdownStyles.dropDown,
+            disabled && dropdownStyles.dropDownDisabled,
+            styleDropdown,
+            isOverlayOpen && styles.toggleOpen,
+          ]}
+          onPress={toggle}
+          accessibilityRole="button"
+          accessibilityState={{ disabled, expanded: isOpen }}
+        >
+          <View
+            style={[
+              dropdownStyles.itemRow,
+              { flex: 1, gap: itemImageGap },
+              resolvedToggleImageAlign === 'right' &&
+                dropdownStyles.itemRowImageRight,
+            ]}
+          >
+            {resolvedToggleImageAlign === 'left' && renderToggleImage()}
+            {renderToggleLabel()}
+            {resolvedToggleImageAlign === 'right' && renderToggleImage()}
+          </View>
+          <Text
+            style={[
+              dropdownStyles.arrow,
+              { transform: [{ rotate: rotation }] },
+            ]}
+          >
+            ▼
+          </Text>
+        </TouchableOpacity>
+
+        {isOverlayOpen && (
+          <DropDownList {...listProps} containerStyle={listContainerStyle} />
+        )}
+      </View>
+
+      {mode === 'modal' && (
+        <DropDownListModal
+          {...listProps}
+          visible={isOpen}
+          title={label || undefined}
+          closeImage={closeImage}
+          maxListHeight={maxListHeight}
+          onClose={close}
+          onSelect={handleSelect}
+        />
+      )}
+
+      {mode === 'bottomSheet' && (
+        <DropDownBottomSheet
+          {...listProps}
+          visible={isOpen}
+          title={label || undefined}
+          maxListHeight={maxListHeight}
+          onClose={close}
+          onSelect={handleSelect}
+        />
+      )}
+    </View>
+  );
+};
+
+export default CustomDropDown;
+export type {
+  CustomDropDownProps,
+  DropDownItemImageAlign,
+  DropDownListItem,
+  DropDownMode,
+  DropDownOption,
+} from './types';
+
+const styles = StyleSheet.create({
+  toggleOpen: {
+    borderColor: '#0d6efd',
+  },
+});

package/src/components/customDropDown/styles.ts

@@ -0,0 +1,184 @@
+import { StyleSheet } from 'react-native';
+
+export const dropdownStyles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    width: '100%',
+    marginBottom: 15,
+  },
+  labelText: {
+    marginBottom: 10,
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#212529',
+  },
+  toggleWrapper: {
+    position: 'relative',
+    zIndex: 1,
+  },
+  toggleWrapperOpen: {
+    zIndex: 20,
+  },
+  dropDown: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    borderRadius: 8,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 15,
+    paddingHorizontal: 15,
+    backgroundColor: '#fff',
+  },
+  dropDownDisabled: {
+    backgroundColor: '#f8f9fa',
+    opacity: 0.7,
+  },
+  selectedText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#6c757d',
+  },
+  selectedTextActive: {
+    color: '#000',
+  },
+  arrow: {
+    fontSize: 12,
+    color: '#495057',
+    marginLeft: 8,
+  },
+  list: {
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    borderRadius: 8,
+    backgroundColor: '#fff',
+    overflow: 'hidden',
+  },
+  inlineList: {
+    marginTop: 4,
+  },
+  anchoredList: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    marginTop: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  listItem: {
+    paddingVertical: 14,
+    paddingHorizontal: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f1f3f5',
+  },
+  listItemLast: {
+    borderBottomWidth: 0,
+  },
+  itemRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  itemRowImageRight: {
+    justifyContent: 'space-between',
+  },
+  itemImage: {
+    width: 28,
+    height: 28,
+  },
+  toggleImage: {
+    width: 24,
+    height: 24,
+  },
+  itemText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#212529',
+  },
+  itemTextWithRightImage: {
+    flex: 1,
+    marginRight: 4,
+  },
+  itemTextSelected: {
+    fontWeight: '700',
+    color: '#0d6efd',
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '88%',
+    maxWidth: 400,
+    maxHeight: '70%',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 12,
+    overflow: 'hidden',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+    gap: 12,
+  },
+  modalTitle: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#212529',
+  },
+  modalCloseButton: {
+    position: 'relative',
+    top: 0,
+    right: 0,
+  },
+  modalList: {
+    borderWidth: 0,
+    borderRadius: 8,
+  },
+  bottomSheetBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  bottomSheetContent: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingTop: 12,
+    paddingBottom: 24,
+    paddingHorizontal: 20,
+    maxHeight: '70%',
+  },
+  bottomSheetHandle: {
+    alignSelf: 'center',
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#dee2e6',
+    marginBottom: 16,
+  },
+  bottomSheetTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#212529',
+    marginBottom: 12,
+  },
+  bottomSheetList: {
+    borderWidth: 0,
+  },
+  backdropDismiss: {
+    ...StyleSheet.absoluteFill,
+  },
+});

package/src/components/customDropDown/types.ts

@@ -0,0 +1,48 @@
+import type {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+export type DropDownMode = 'modal' | 'inline' | 'anchored' | 'bottomSheet';
+
+export type DropDownItemImageAlign = 'left' | 'right';
+
+export interface DropDownOption {
+  label: string;
+  value?: string;
+  image?: ImageSourcePropType;
+}
+
+export type DropDownListItem = string | DropDownOption;
+
+export interface CustomDropDownProps {
+  mode?: DropDownMode;
+  label?: string;
+  selectedText: string;
+  listItems: DropDownListItem[];
+  onSelect: (item: string, index: number) => void;
+  isSelected?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  maxListHeight?: number;
+  itemImageAlign?: DropDownItemImageAlign;
+  itemImageGap?: number;
+  toggleImageAlign?: DropDownItemImageAlign;
+  itemImageStyle?: StyleProp<ImageStyle>;
+  toggleImageStyle?: StyleProp<ImageStyle>;
+  styleDropdown?: StyleProp<ViewStyle>;
+  labelTextStyle?: StyleProp<TextStyle>;
+  dropdownTextStyles?: StyleProp<TextStyle>;
+  listStyle?: StyleProp<ViewStyle>;
+  itemTextStyle?: StyleProp<TextStyle>;
+  closeImage?: ImageSourcePropType;
+}
+
+export type NormalizedDropDownOption = {
+  label: string;
+  value: string;
+  image?: ImageSourcePropType;
+};

package/src/components/customDropDown/utils.ts

@@ -0,0 +1,24 @@
+import type { DropDownListItem, NormalizedDropDownOption } from './types';
+
+export const normalizeListItems = (
+  items: DropDownListItem[]
+): NormalizedDropDownOption[] =>
+  items.map((item) => {
+    if (typeof item === 'string') {
+      return { label: item, value: item };
+    }
+
+    return {
+      label: item.label,
+      value: item.value ?? item.label,
+      image: item.image,
+    };
+  });
+
+export const findSelectedOption = (
+  items: NormalizedDropDownOption[],
+  selectedText?: string
+) =>
+  items.find(
+    (item) => item.label === selectedText || item.value === selectedText
+  );