@riebel/react-native-multiple-select 0.6.0

package/src/__tests__/MultiSelect.test.tsx

@@ -0,0 +1,370 @@
+import React, { createRef } from 'react'
+import { Text } from 'react-native'
+import { render, fireEvent, screen } from '@testing-library/react-native'
+import MultiSelect from '../MultiSelect'
+import type {
+  MultiSelectProps,
+  MultiSelectRef,
+  MultiSelectItem,
+  IconProps
+} from '../types'
+
+const MockIcon = (props: IconProps) => (
+  <Text testID={`icon-${props.name}`} style={props.style}>
+    {props.name}
+  </Text>
+)
+
+const sampleItems: MultiSelectItem[] = [
+  { _id: '1', name: 'Apple' },
+  { _id: '2', name: 'Banana' },
+  { _id: '3', name: 'Cherry' },
+  { _id: '4', name: 'Date' },
+  { _id: '5', name: 'Elderberry', disabled: true }
+]
+
+const defaultProps: MultiSelectProps = {
+  items: sampleItems,
+  iconComponent: MockIcon,
+  onSelectedItemsChange: jest.fn()
+}
+
+const renderMultiSelect = (overrides: Partial<MultiSelectProps> = {}) =>
+  render(<MultiSelect {...defaultProps} {...overrides} />)
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('MultiSelect', () => {
+  describe('rendering', () => {
+    it('renders with default select text', () => {
+      renderMultiSelect()
+      expect(screen.getByText('Select')).toBeTruthy()
+    })
+
+    it('renders with custom select text', () => {
+      renderMultiSelect({ selectText: 'Pick items' })
+      expect(screen.getByText('Pick items')).toBeTruthy()
+    })
+
+    it('shows selected count in label when items are selected', () => {
+      renderMultiSelect({ selectedItems: ['1', '2'] })
+      expect(screen.getByText('Select (2 selected)')).toBeTruthy()
+    })
+
+    it('shows item name in label for single mode', () => {
+      renderMultiSelect({
+        single: true,
+        selectedItems: ['1']
+      })
+      expect(screen.getByText('Apple')).toBeTruthy()
+    })
+
+    it('displays tags for selected items', () => {
+      renderMultiSelect({ selectedItems: ['1', '2'] })
+      expect(screen.getByText('Apple')).toBeTruthy()
+      expect(screen.getByText('Banana')).toBeTruthy()
+    })
+
+    it('hides tags when hideTags is true', () => {
+      renderMultiSelect({
+        selectedItems: ['1'],
+        hideTags: true
+      })
+      expect(screen.queryByText('Apple')).toBeNull()
+    })
+
+    it('does not show tags in single mode', () => {
+      renderMultiSelect({
+        single: true,
+        selectedItems: ['1']
+      })
+      // In single mode the label shows the name, but no tag row
+      const apples = screen.getAllByText('Apple')
+      expect(apples.length).toBe(1)
+    })
+  })
+
+  describe('dropdown toggle', () => {
+    it('opens dropdown on press', () => {
+      renderMultiSelect()
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.getByPlaceholderText('Search')).toBeTruthy()
+    })
+
+    it('calls onToggleList when toggled', () => {
+      const onToggleList = jest.fn()
+      renderMultiSelect({ onToggleList })
+      fireEvent.press(screen.getByText('Select'))
+      expect(onToggleList).toHaveBeenCalledTimes(1)
+    })
+
+    it('shows all items in the dropdown list', () => {
+      renderMultiSelect()
+      fireEvent.press(screen.getByText('Select'))
+      for (const item of sampleItems) {
+        const label = String(item.name)
+        expect(screen.getByText(label)).toBeTruthy()
+      }
+    })
+  })
+
+  describe('item selection', () => {
+    it('calls onSelectedItemsChange when an item is pressed', () => {
+      const onSelectedItemsChange = jest.fn()
+      renderMultiSelect({ onSelectedItemsChange })
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.press(screen.getByText('Apple'))
+      expect(onSelectedItemsChange).toHaveBeenCalledWith(['1'])
+    })
+
+    it('adds to existing selection in multi mode', () => {
+      const onSelectedItemsChange = jest.fn()
+      renderMultiSelect({
+        onSelectedItemsChange,
+        selectedItems: ['1']
+      })
+      fireEvent.press(screen.getByText('Select (1 selected)'))
+      fireEvent.press(screen.getByText('Banana'))
+      expect(onSelectedItemsChange).toHaveBeenCalledWith(['1', '2'])
+    })
+
+    it('deselects an already selected item in multi mode', () => {
+      const onSelectedItemsChange = jest.fn()
+      renderMultiSelect({
+        onSelectedItemsChange,
+        selectedItems: ['1', '2']
+      })
+      fireEvent.press(screen.getByText('Select (2 selected)'))
+      fireEvent.press(screen.getByText('Apple'))
+      expect(onSelectedItemsChange).toHaveBeenCalledWith(['2'])
+    })
+
+    it('replaces selection in single mode', () => {
+      const onSelectedItemsChange = jest.fn()
+      renderMultiSelect({
+        onSelectedItemsChange,
+        single: true,
+        selectedItems: ['1']
+      })
+      fireEvent.press(screen.getByText('Apple'))
+      fireEvent.press(screen.getByText('Banana'))
+      expect(onSelectedItemsChange).toHaveBeenCalledWith(['2'])
+    })
+  })
+
+  describe('tag removal', () => {
+    it('removes a selected item when tag close icon is pressed', () => {
+      const onSelectedItemsChange = jest.fn()
+      renderMultiSelect({
+        onSelectedItemsChange,
+        selectedItems: ['1', '2']
+      })
+      const closeIcons = screen.getAllByTestId('icon-close-circle')
+      fireEvent.press(closeIcons[0])
+      expect(onSelectedItemsChange).toHaveBeenCalledWith(['2'])
+    })
+  })
+
+  describe('search / filtering', () => {
+    it('filters items with partial match by default', () => {
+      renderMultiSelect()
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.changeText(screen.getByPlaceholderText('Search'), 'app')
+      expect(screen.getByText('Apple')).toBeTruthy()
+      expect(screen.queryByText('Banana')).toBeNull()
+    })
+
+    it('filters items with full match when filterMethod is full', () => {
+      renderMultiSelect({ filterMethod: 'full' })
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.changeText(screen.getByPlaceholderText('Search'), 'an')
+      expect(screen.getByText('Banana')).toBeTruthy()
+      expect(screen.queryByText('Apple')).toBeNull()
+    })
+
+    it('calls onChangeInput when search text changes', () => {
+      const onChangeInput = jest.fn()
+      renderMultiSelect({ onChangeInput })
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.changeText(screen.getByPlaceholderText('Search'), 'test')
+      expect(onChangeInput).toHaveBeenCalledWith('test')
+    })
+
+    it('shows no items text when filter yields no results', () => {
+      renderMultiSelect({ noItemsText: 'Nothing found.' })
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.changeText(screen.getByPlaceholderText('Search'), 'zzzzz')
+      expect(screen.getByText('Nothing found.')).toBeTruthy()
+    })
+  })
+
+  describe('removeSelected', () => {
+    it('hides already selected items from the dropdown', () => {
+      renderMultiSelect({
+        selectedItems: ['1'],
+        removeSelected: true
+      })
+      fireEvent.press(screen.getByText('Select (1 selected)'))
+      expect(screen.queryByText('Apple')).toBeNull()
+      expect(screen.getByText('Banana')).toBeTruthy()
+    })
+  })
+
+  describe('canAddItems', () => {
+    it('shows add item row when search has no exact match', () => {
+      renderMultiSelect({ canAddItems: true })
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.changeText(screen.getByPlaceholderText('Search'), 'Mango')
+      expect(screen.getByText(/Add Mango/)).toBeTruthy()
+    })
+
+    it('calls onAddItem and onSelectedItemsChange when adding', () => {
+      const onAddItem = jest.fn()
+      const onSelectedItemsChange = jest.fn()
+      renderMultiSelect({
+        canAddItems: true,
+        onAddItem,
+        onSelectedItemsChange
+      })
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.changeText(screen.getByPlaceholderText('Search'), 'Mango')
+      fireEvent.press(screen.getByText(/Add Mango/))
+      expect(onAddItem).toHaveBeenCalledTimes(1)
+      expect(onSelectedItemsChange).toHaveBeenCalled()
+    })
+
+    it('does not show add row when search matches an existing item', () => {
+      renderMultiSelect({ canAddItems: true })
+      fireEvent.press(screen.getByText('Select'))
+      fireEvent.changeText(screen.getByPlaceholderText('Search'), 'Apple')
+      expect(screen.queryByText(/Add Apple/)).toBeNull()
+    })
+  })
+
+  describe('submit button', () => {
+    it('shows submit button by default', () => {
+      renderMultiSelect()
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.getByText('Submit')).toBeTruthy()
+    })
+
+    it('renders custom submit button text', () => {
+      renderMultiSelect({ submitButtonText: 'Done' })
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.getByText('Done')).toBeTruthy()
+    })
+
+    it('hides submit button when hideSubmitButton is true', () => {
+      renderMultiSelect({ hideSubmitButton: true })
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.queryByText('Submit')).toBeNull()
+    })
+
+    it('closes selector on submit press', () => {
+      renderMultiSelect()
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.getByPlaceholderText('Search')).toBeTruthy()
+      fireEvent.press(screen.getByText('Submit'))
+      expect(screen.queryByPlaceholderText('Search')).toBeNull()
+    })
+  })
+
+  describe('custom keys', () => {
+    it('supports custom uniqueKey and displayKey', () => {
+      const customItems: MultiSelectItem[] = [
+        { id: 'a', label: 'First' },
+        { id: 'b', label: 'Second' }
+      ]
+      renderMultiSelect({
+        items: customItems,
+        uniqueKey: 'id',
+        displayKey: 'label',
+        selectedItems: ['a']
+      })
+      expect(screen.getByText('First')).toBeTruthy()
+    })
+  })
+
+  describe('disabled items', () => {
+    it('renders disabled items with disabled styling', () => {
+      renderMultiSelect()
+      fireEvent.press(screen.getByText('Select'))
+      // Elderberry is disabled — it still renders but should be non-interactive
+      expect(screen.getByText('Elderberry')).toBeTruthy()
+    })
+  })
+
+  describe('imperative handle (ref)', () => {
+    it('exposes getSelectedItemsExt via ref', () => {
+      const ref = createRef<MultiSelectRef>()
+      render(
+        <MultiSelect
+          {...defaultProps}
+          selectedItems={['1', '2']}
+          ref={ref}
+        />
+      )
+      expect(ref.current).not.toBeNull()
+      const result = ref.current?.getSelectedItemsExt()
+      expect(result).toBeTruthy()
+    })
+
+    it('getSelectedItemsExt accepts optional items override', () => {
+      const ref = createRef<MultiSelectRef>()
+      render(
+        <MultiSelect
+          {...defaultProps}
+          selectedItems={['1']}
+          ref={ref}
+        />
+      )
+      const result = ref.current?.getSelectedItemsExt(['2'])
+      expect(result).toBeTruthy()
+    })
+  })
+
+  describe('custom search placeholder', () => {
+    it('uses custom searchInputPlaceholderText', () => {
+      renderMultiSelect({ searchInputPlaceholderText: 'Find...' })
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.getByPlaceholderText('Find...')).toBeTruthy()
+    })
+  })
+
+  describe('iconNames', () => {
+    it('uses custom icon names when provided', () => {
+      renderMultiSelect({
+        iconNames: { arrowLeft: 'arrow-back' },
+        selectedItems: ['1', '2']
+      })
+      fireEvent.press(screen.getByText('Select (2 selected)'))
+      expect(screen.getByTestId('icon-arrow-back')).toBeTruthy()
+      expect(screen.queryByTestId('icon-arrow-left')).toBeNull()
+    })
+
+    it('uses custom close icon name on tags', () => {
+      renderMultiSelect({
+        iconNames: { close: 'x-circle' },
+        selectedItems: ['1']
+      })
+      expect(screen.getByTestId('icon-x-circle')).toBeTruthy()
+      expect(screen.queryByTestId('icon-close-circle')).toBeNull()
+    })
+  })
+
+  describe('hideDropdown', () => {
+    it('hides the back arrow when hideDropdown is true', () => {
+      renderMultiSelect({ hideDropdown: true })
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.queryByTestId('icon-arrow-left')).toBeNull()
+    })
+
+    it('shows the back arrow by default', () => {
+      renderMultiSelect()
+      fireEvent.press(screen.getByText('Select'))
+      expect(screen.getByTestId('icon-arrow-left')).toBeTruthy()
+    })
+  })
+})

package/src/index.ts

@@ -0,0 +1,14 @@
+/*!
+ * react-native-multi-select
+ * Copyright(c) 2017 Mustapha Babatunde Oluwaleke
+ * MIT Licensed
+ */
+export { default } from './MultiSelect'
+export type {
+  MultiSelectProps,
+  MultiSelectItem,
+  MultiSelectRef,
+  IconProps,
+  IconComponentType,
+  IconNames
+} from './types'

package/src/styles.ts

@@ -0,0 +1,168 @@
+/*!
+ * react-native-multi-select
+ * Copyright(c) 2017 Mustapha Babatunde Oluwaleke
+ * MIT Licensed
+ */
+
+import { StyleSheet } from 'react-native'
+
+export const colorPack = {
+  primary: '#00A5FF',
+  primaryDark: '#215191',
+  light: '#FFF',
+  textPrimary: '#525966',
+  placeholderTextColor: '#A9A9A9',
+  danger: '#C62828',
+  borderColor: '#e9e9e9',
+  backgroundColor: '#b1b1b1'
+} as const
+
+const styles = StyleSheet.create({
+  footerWrapper: {
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    flexDirection: 'row'
+  },
+  footerWrapperNC: {
+    width: 320,
+    flexDirection: 'column'
+  },
+  subSection: {
+    backgroundColor: colorPack.light,
+    borderBottomWidth: 1,
+    borderColor: colorPack.borderColor,
+    paddingLeft: 0,
+    paddingRight: 20,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  greyButton: {
+    height: 40,
+    borderRadius: 5,
+    elevation: 0,
+    backgroundColor: colorPack.backgroundColor
+  },
+  indicator: {
+    fontSize: 30,
+    color: colorPack.placeholderTextColor
+  },
+  indicatorPadded: {
+    paddingLeft: 15,
+    paddingRight: 15
+  },
+  selectedItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 15,
+    paddingTop: 3,
+    paddingRight: 3,
+    paddingBottom: 3,
+    margin: 3,
+    borderRadius: 20,
+    borderWidth: 2
+  },
+  button: {
+    height: 40,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonText: {
+    color: colorPack.light,
+    fontSize: 14
+  },
+  inputGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 16,
+    backgroundColor: colorPack.light
+  },
+  dropdownView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 40,
+    marginBottom: 10
+  },
+  searchIconMargin: {
+    marginRight: 10
+  },
+  tagLabel: {
+    flex: 1,
+    fontSize: 15
+  },
+  tagRemoveIcon: {
+    fontSize: 22,
+    marginLeft: 10
+  },
+  rowWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  rowItemText: {
+    flex: 1,
+    fontSize: 16,
+    paddingTop: 5,
+    paddingBottom: 5
+  },
+  rowPadding: {
+    paddingLeft: 20,
+    paddingRight: 20
+  },
+  rowAlignCenter: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  disabledText: {
+    color: 'grey'
+  },
+  checkIcon: {
+    fontSize: 20
+  },
+  noItemsText: {
+    flex: 1,
+    marginTop: 20,
+    textAlign: 'center',
+    color: colorPack.danger
+  },
+  noItemsRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  searchInputFlex: {
+    flex: 1
+  },
+  backArrowMargin: {
+    marginLeft: 5
+  },
+  selectorContent: {
+    flexDirection: 'column',
+    backgroundColor: '#fafafa'
+  },
+  subSectionPadded: {
+    paddingTop: 10,
+    paddingBottom: 10
+  },
+  dropdownTouchable: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  dropdownLabelBase: {
+    flex: 1,
+    fontSize: 16
+  },
+  selectedItemLayout: {
+    justifyContent: 'center' as const,
+    height: 40
+  }
+})
+
+export const selectorViewStyle = (fixedHeight: boolean) => ({
+  flexDirection: 'column' as const,
+  marginBottom: 10,
+  elevation: 2,
+  ...(fixedHeight ? { height: 250 } : {})
+})
+
+export default styles

package/src/types.ts

@@ -0,0 +1,94 @@
+import type { ComponentType, ReactNode } from 'react'
+import type {
+  ViewStyle,
+  TextStyle,
+  TextInputProps,
+  StyleProp,
+  FlatListProps
+} from 'react-native'
+
+export interface IconProps {
+  name: string
+  size?: number
+  color?: string
+  style?: StyleProp<TextStyle | ViewStyle>
+  onPress?: () => void
+}
+
+export type IconComponentType = ComponentType<IconProps>
+
+export interface IconNames {
+  search?: string
+  close?: string
+  check?: string
+  arrowDown?: string
+  arrowRight?: string
+  arrowLeft?: string
+}
+
+export interface MultiSelectItem {
+  [key: string]: unknown
+  disabled?: boolean
+}
+
+export interface MultiSelectProps {
+  items: MultiSelectItem[]
+  iconComponent: IconComponentType
+  iconNames?: Partial<IconNames>
+  onSelectedItemsChange: (items: string[]) => void
+  single?: boolean
+  selectedItems?: string[]
+  uniqueKey?: string
+  displayKey?: string
+  tagBorderColor?: string
+  tagTextColor?: string
+  tagRemoveIconColor?: string
+  tagContainerStyle?: StyleProp<ViewStyle>
+  fontFamily?: string
+  selectedItemFontFamily?: string
+  selectedItemTextColor?: string
+  selectedItemIconColor?: string
+  itemFontFamily?: string
+  itemTextColor?: string
+  itemFontSize?: number
+  searchIcon?: ReactNode
+  searchInputPlaceholderText?: string
+  searchInputStyle?: StyleProp<TextStyle>
+  selectText?: string
+  selectedText?: string
+  altFontFamily?: string
+  fontSize?: number
+  textColor?: string
+  fixedHeight?: boolean
+  hideTags?: boolean
+  hideSubmitButton?: boolean
+  hideDropdown?: boolean
+  submitButtonColor?: string
+  submitButtonText?: string
+  canAddItems?: boolean
+  removeSelected?: boolean
+  noItemsText?: string
+  filterMethod?: 'partial' | 'full'
+  onAddItem?: (newItems: MultiSelectItem[]) => void
+  onChangeInput?: (text: string) => void
+  onClearSelector?: () => void
+  onToggleList?: () => void
+  textInputProps?: TextInputProps
+  flatListProps?: Partial<FlatListProps<MultiSelectItem>>
+  styleDropdownMenu?: StyleProp<ViewStyle>
+  styleDropdownMenuSubsection?: StyleProp<ViewStyle>
+  styleInputGroup?: StyleProp<ViewStyle>
+  styleItemsContainer?: StyleProp<ViewStyle>
+  styleListContainer?: StyleProp<ViewStyle>
+  styleMainWrapper?: StyleProp<ViewStyle>
+  styleRowList?: StyleProp<ViewStyle>
+  styleSelectorContainer?: StyleProp<ViewStyle>
+  styleTextDropdown?: StyleProp<TextStyle>
+  styleTextDropdownSelected?: StyleProp<TextStyle>
+  styleTextTag?: StyleProp<TextStyle>
+  styleIndicator?: StyleProp<ViewStyle>
+}
+
+export interface MultiSelectRef {
+  getSelectedItemsExt: (items?: string[]) => ReactNode
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "types": ["react"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "src/__tests__"]
+}

package/tsconfig.test.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["react", "jest"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}