@riebel/react-native-multiple-select 0.6.0 → 0.6.1

package/README.md

@@ -9,13 +9,13 @@
 ## Installation
 
 ```bash
-npm install react-native-multiple-select
+npm install @riebel/react-native-multiple-select
 ```
 
 or with yarn:
 
 ```bash
-yarn add react-native-multiple-select
+yarn add @riebel/react-native-multiple-select
 ```
 
 ### Peer dependencies
@@ -246,6 +246,30 @@ import type {
 } from 'react-native-multiple-select'
 ```
 
+### Type assertions
+
+**`iconComponent`** — Icon libraries such as `@expo/vector-icons` type their `name` prop as a narrow union of string literals, which conflicts with `IconComponentType`'s `name: string`. Cast the component to silence this:
+
+```tsx
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
+import type { IconComponentType } from '@riebel/react-native-multiple-select'
+
+<MultiSelect iconComponent={MaterialCommunityIcons as IconComponentType} ... />
+```
+
+**`items`** — `MultiSelectItem` has an index signature (`[key: string]: unknown`). Custom interfaces without that signature are not directly assignable, even if all properties match at runtime. Use a double assertion:
+
+```tsx
+interface MyItem {
+  id: string
+  label: string
+}
+
+const items: MyItem[] = [...]
+
+<MultiSelect items={items as unknown as MultiSelectItem[]} ... />
+```
+
 ## Contributing
 
 Contributions are **welcome** and will be fully **credited**.

package/dist/MultiSelect.js

@@ -98,7 +98,7 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
                 .split(' ')
                 .filter((word) => word.length)
                 .join('-');
-            const newItems = [...items, { [uniqueKey]: newItemId, name: newItemName }];
+            const newItems = [...items, { [uniqueKey]: newItemId, [displayKey]: newItemName }];
             const newSelectedItems = [...selectedItems, newItemId];
             onAddItem?.(newItems);
             onSelectedItemsChange(newSelectedItems);
@@ -108,6 +108,7 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
         searchTerm,
         items,
         uniqueKey,
+        displayKey,
         selectedItems,
         onAddItem,
         onSelectedItemsChange,
@@ -156,7 +157,7 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
                             fontFamily ? { fontFamily } : {}
                         ], numberOfLines: 1, children: label }), _jsx(TouchableOpacity, { onPress: () => {
                             removeItem(item);
-                        }, children: _jsx(Icon, { name: names.close, style: [styles.tagRemoveIcon, { color: tagRemoveIconColor }] }) })] }, getItemKey(item)));
+                        }, children: _jsx(Icon, { name: names.close, size: 22, color: tagRemoveIconColor, style: styles.tagRemoveIcon }) })] }, getItemKey(item)));
         });
     }, [
         Icon,
@@ -196,7 +197,7 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
                             styles.rowItemText,
                             itemStyle(item),
                             item.disabled ? styles.disabledText : {}
-                        ], children: getDisplayValue(item, displayKey) }), itemSelected(item) ? (_jsx(Icon, { name: names.check, style: [styles.checkIcon, { color: selectedItemIconColor }] })) : null] }) }) })), [
+                        ], children: getDisplayValue(item, displayKey) }), itemSelected(item) ? (_jsx(Icon, { name: names.check, size: 20, color: selectedItemIconColor, style: styles.checkIcon })) : null] }) }) })), [
         Icon,
         names,
         toggleItem,
@@ -212,7 +213,7 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
                         styles.rowItemText,
                         itemStyle(item),
                         item.disabled ? styles.disabledText : {}
-                    ], children: ["Add ", getDisplayValue(item, 'name'), " (tap or press return)"] }) }) }) })), [addItem, itemStyle]);
+                    ], children: ["Add ", getDisplayValue(item, displayKey), " (tap or press return)"] }) }) }) })), [addItem, itemStyle, displayKey]);
     const renderItems = useCallback(() => {
         let renderList = searchTerm ? filterItems(searchTerm) : items;
         if (removeSelected) {
@@ -222,14 +223,14 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
         let searchTermMatch = false;
         if (renderList.length) {
             itemList = (_jsx(FlatList, { data: renderList, extraData: selectedItems, keyExtractor: (_item, index) => index.toString(), renderItem: (rowData) => getRow(rowData.item), ...flatListProps, nestedScrollEnabled: true }));
-            searchTermMatch = renderList.some((item) => item.name === searchTerm);
+            searchTermMatch = renderList.some((item) => getDisplayValue(item, displayKey) === searchTerm);
         }
         else if (!canAddItems) {
             itemList = (_jsx(View, { style: styles.noItemsRow, children: _jsx(Text, { style: [styles.noItemsText, fontFamily ? { fontFamily } : {}], children: noItemsText }) }));
         }
         let addItemRow = null;
         if (canAddItems && !searchTermMatch && searchTerm.length) {
-            addItemRow = getRowNew({ name: searchTerm });
+            addItemRow = getRowNew({ [displayKey]: searchTerm });
         }
         return (_jsxs(View, { style: styleListContainer, children: [itemList, addItemRow] }));
     }, [
@@ -245,9 +246,10 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
         fontFamily,
         noItemsText,
         getRowNew,
-        styleListContainer
+        styleListContainer,
+        displayKey
     ]);
-    return (_jsx(View, { style: styleMainWrapper, children: selector ? (_jsxs(View, { style: [selectorViewStyle(fixedHeight), styleSelectorContainer], children: [_jsxs(View, { style: [styles.inputGroup, styleInputGroup], children: [resolvedSearchIcon, _jsx(TextInput, { autoFocus: true, onChangeText: handleChangeInput, onSubmitEditing: addItem, placeholder: searchInputPlaceholderText, placeholderTextColor: colorPack.placeholderTextColor, underlineColorAndroid: "transparent", style: [searchInputStyle, styles.searchInputFlex], value: searchTerm, ...textInputProps }), hideSubmitButton && (_jsx(TouchableOpacity, { onPress: submitSelection, children: _jsx(Icon, { name: names.arrowDown, style: [styles.indicator, styles.indicatorPadded, styleIndicator] }) })), !hideDropdown && (_jsx(Icon, { name: names.arrowLeft, size: 20, onPress: clearSelectorCallback, color: colorPack.placeholderTextColor, style: styles.backArrowMargin }))] }), _jsxs(View, { style: styles.selectorContent, children: [_jsx(View, { style: styleItemsContainer, children: renderItems() }), !single && !hideSubmitButton && (_jsx(TouchableOpacity, { onPress: submitSelection, style: [styles.button, { backgroundColor: submitButtonColor }], children: _jsx(Text, { style: [styles.buttonText, fontFamily ? { fontFamily } : {}], children: submitButtonText }) }))] })] })) : (_jsxs(View, { children: [_jsx(View, { style: [styles.dropdownView, styleDropdownMenu], children: _jsx(View, { style: [
+    return (_jsx(View, { style: styleMainWrapper, children: selector ? (_jsxs(View, { style: [selectorViewStyle(fixedHeight), styleSelectorContainer], children: [_jsxs(View, { style: [styles.inputGroup, styleInputGroup], children: [resolvedSearchIcon, _jsx(TextInput, { autoFocus: true, onChangeText: handleChangeInput, onSubmitEditing: addItem, placeholder: searchInputPlaceholderText, placeholderTextColor: colorPack.placeholderTextColor, underlineColorAndroid: "transparent", style: [searchInputStyle, styles.searchInputFlex], value: searchTerm, ...textInputProps }), hideSubmitButton && (_jsx(TouchableOpacity, { onPress: submitSelection, children: _jsx(Icon, { name: names.arrowDown, size: 30, color: colorPack.placeholderTextColor, style: [styles.indicator, styles.indicatorPadded, styleIndicator] }) })), !hideDropdown && (_jsx(Icon, { name: names.arrowLeft, size: 20, onPress: clearSelectorCallback, color: colorPack.placeholderTextColor, style: styles.backArrowMargin }))] }), _jsxs(View, { style: styles.selectorContent, children: [_jsx(View, { style: styleItemsContainer, children: renderItems() }), !single && !hideSubmitButton && (_jsx(TouchableOpacity, { onPress: submitSelection, style: [styles.button, { backgroundColor: submitButtonColor }], children: _jsx(Text, { style: [styles.buttonText, fontFamily ? { fontFamily } : {}], children: submitButtonText }) }))] })] })) : (_jsxs(View, { children: [_jsx(View, { style: [styles.dropdownView, styleDropdownMenu], children: _jsx(View, { style: [
                             styles.subSection,
                             styles.subSectionPadded,
                             styleDropdownMenuSubsection
@@ -272,7 +274,7 @@ const MultiSelect = forwardRef(({ single = false, selectedItems = [], items, ico
                                                     color: textColor || colorPack.placeholderTextColor
                                                 },
                                                 styleTextDropdownSelected
-                                            ], numberOfLines: 1, children: getSelectLabel() }), _jsx(Icon, { name: hideSubmitButton ? names.arrowRight : names.arrowDown, style: [styles.indicator, styleIndicator] })] }) }) }) }), !single && !hideTags && selectedItems.length ? (_jsx(View, { style: styles.rowWrap, children: displaySelectedItems() })) : null] })) }));
+                                            ], numberOfLines: 1, children: getSelectLabel() }), _jsx(Icon, { name: hideSubmitButton ? names.arrowRight : names.arrowDown, size: 30, color: colorPack.placeholderTextColor, style: [styles.indicator, styleIndicator] })] }) }) }) }), !single && !hideTags && selectedItems.length ? (_jsx(View, { style: styles.rowWrap, children: displaySelectedItems() })) : null] })) }));
 });
 MultiSelect.displayName = 'MultiSelect';
 export default MultiSelect;

package/dist/types.d.ts

@@ -7,7 +7,7 @@ export interface IconProps {
     style?: StyleProp<TextStyle | ViewStyle>;
     onPress?: () => void;
 }
-export type IconComponentType = ComponentType<IconProps>;
+export type IconComponentType = ComponentType<any> & ComponentType<IconProps>;
 export interface IconNames {
     search?: string;
     close?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebel/react-native-multiple-select",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Modernized Simple multi-select component for react-native",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/MultiSelect.tsx

@@ -209,7 +209,7 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
           .split(' ')
           .filter((word) => word.length)
           .join('-')
-        const newItems = [...items, { [uniqueKey]: newItemId, name: newItemName }]
+        const newItems = [...items, { [uniqueKey]: newItemId, [displayKey]: newItemName }]
         const newSelectedItems = [...selectedItems, newItemId]
         onAddItem?.(newItems)
         onSelectedItemsChange(newSelectedItems)
@@ -219,6 +219,7 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
       searchTerm,
       items,
       uniqueKey,
+      displayKey,
       selectedItems,
       onAddItem,
       onSelectedItemsChange,
@@ -287,7 +288,9 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
               >
                 <Icon
                   name={names.close}
-                  style={[styles.tagRemoveIcon, { color: tagRemoveIconColor }]}
+                  size={22}
+                  color={tagRemoveIconColor}
+                  style={styles.tagRemoveIcon}
                 />
               </TouchableOpacity>
             </View>
@@ -371,7 +374,9 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
               {itemSelected(item) ? (
                 <Icon
                   name={names.check}
-                  style={[styles.checkIcon, { color: selectedItemIconColor }]}
+                  size={20}
+                  color={selectedItemIconColor}
+                  style={styles.checkIcon}
                 />
               ) : null}
             </View>
@@ -408,13 +413,13 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
                   item.disabled ? styles.disabledText : {}
                 ]}
               >
-                Add {getDisplayValue(item, 'name')} (tap or press return)
+                Add {getDisplayValue(item, displayKey)} (tap or press return)
               </Text>
             </View>
           </View>
         </TouchableOpacity>
       ),
-      [addItem, itemStyle]
+      [addItem, itemStyle, displayKey]
     )
 
     const renderItems = useCallback(() => {
@@ -440,7 +445,9 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
             nestedScrollEnabled
           />
         )
-        searchTermMatch = renderList.some((item) => item.name === searchTerm)
+        searchTermMatch = renderList.some(
+          (item) => getDisplayValue(item, displayKey) === searchTerm
+        )
       } else if (!canAddItems) {
         itemList = (
           <View style={styles.noItemsRow}>
@@ -453,7 +460,7 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
 
       let addItemRow: React.ReactNode = null
       if (canAddItems && !searchTermMatch && searchTerm.length) {
-        addItemRow = getRowNew({ name: searchTerm })
+        addItemRow = getRowNew({ [displayKey]: searchTerm })
       }
 
       return (
@@ -475,7 +482,8 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
       fontFamily,
       noItemsText,
       getRowNew,
-      styleListContainer
+      styleListContainer,
+      displayKey
     ])
 
     return (
@@ -499,6 +507,8 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
                 <TouchableOpacity onPress={submitSelection}>
                   <Icon
                     name={names.arrowDown}
+                    size={30}
+                    color={colorPack.placeholderTextColor}
                     style={[styles.indicator, styles.indicatorPadded, styleIndicator]}
                   />
                 </TouchableOpacity>
@@ -570,6 +580,8 @@ const MultiSelect = forwardRef<MultiSelectRef, MultiSelectProps>(
                     </Text>
                     <Icon
                       name={hideSubmitButton ? names.arrowRight : names.arrowDown}
+                      size={30}
+                      color={colorPack.placeholderTextColor}
                       style={[styles.indicator, styleIndicator]}
                     />
                   </View>

package/src/types.ts

@@ -15,7 +15,8 @@ export interface IconProps {
   onPress?: () => void
 }
 
-export type IconComponentType = ComponentType<IconProps>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type IconComponentType = ComponentType<any> & ComponentType<IconProps>
 
 export interface IconNames {
   search?: string