[feat] add customItemValueDelimiter

Author: JHeigle

src/components/Picker.js

@@ -163,6 +163,7 @@ function Picker({
     closeOnBackPressed = false,
     extendableBadgeContainer = false,
     onSelectItem = (item) => {}
+    customItemValueDelimiter = '-',
 }) {
     const [necessaryItems, setNecessaryItems] = useState([]);
     const [searchText, setSearchText] = useState('');
@@ -233,11 +234,11 @@ function Picker({
         setNecessaryItems(state => {
             return [...state].map(item => {
                 const _item = items.find(x => x[_schema.value] === item[_schema.value]);
-                
+
                 if (_item) {
                     return {...item, ..._item};
                 }
-                
+
                 return item;
             });
         });
@@ -251,15 +252,15 @@ function Picker({
             setNecessaryItems(state => {
                 if (value === null || (Array.isArray(value) && value.length === 0))
                     return [];
-                
+
                 let _state = [...state].filter(item => value.includes(item[_schema.value]));
 
                 const newItems = value.reduce((accumulator, currentValue) => {
                     const index = _state.findIndex(item => item[_schema.value] === currentValue);
 
                     if (index === -1) {
                         const item = items.find(item => item[_schema.value] === currentValue);
-                    
+
                         if (item) {
                             return [...accumulator, item];
                         }
@@ -282,7 +283,7 @@ function Picker({
                     state.push(item);
                 }
             }
-            
+
             setNecessaryItems(state);
         }
 
@@ -405,7 +406,7 @@ function Picker({
                     });
                 } else {
                     const index = sortedItems.findIndex(item => item[_schema["value"]] === value);
-                    
+
                     if (index > -1)
                         flatListRef.current?.scrollToIndex?.({
                             index,
@@ -454,7 +455,7 @@ function Picker({
         } else {
             if (disableLocalSearch)
                 return sortedItems;
-    
+
             const values = [];
             const normalizeText = (text) => text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 
@@ -485,7 +486,7 @@ function Picker({
             if ((results.length === 0 || results.findIndex(item => String(item[_schema.label]).toLowerCase() === searchText.toLowerCase()) === -1) && addCustomItem) {
                 results.push({
                     [_schema.label]: searchText,
-                    [_schema.value]: searchText.replace(' ', '-'),
+                    [_schema.value]: customItemValueDelimiter ? searchText.replace(' ', customItemValueDelimiter) : searchText,
                     custom: true
                 });
             }
@@ -583,7 +584,7 @@ function Picker({
 
         if (isNull)
             return null;
-        
+
         try {
             return necessaryItems.find(item => item[_schema.value] === _value);
         } catch (e) {
@@ -602,11 +603,11 @@ function Picker({
         if (multiple)
             if (item.length > 0) {
                 let mtext = _multipleText;
-                
+
                 if (typeof mtext !== 'string') {
                     mtext = mtext[item.length] ?? mtext.n;
                 }
-                
+
                 return mtext.replace('{count}', item.length);
             } else
                 return fallback;
@@ -1022,7 +1023,7 @@ function Picker({
     const _itemKey = useMemo(() => {
         if (itemKey === null)
             return _schema.value;
-        
+
         return itemKey;
     }, [itemKey, _schema]);
 
@@ -1115,7 +1116,7 @@ function Picker({
                 </View>
             );
         }
-        
+
         return <BadgeListEmptyComponent />;
     }, [__renderBadge, extendableBadgeContainerStyle, extendableBadgeItemContainerStyle]);
 
@@ -1124,10 +1125,10 @@ function Picker({
      * @returns {JSX.Element}
      */
      const BadgeBodyComponent = useMemo(() => {
-        if (extendableBadgeContainer) { 
+        if (extendableBadgeContainer) {
             return <ExtendableBadgeContainer selectedItems={selectedItems} />
         }
-        
+
         return (
             <FlatList
                 ref={setBadgeFlatListRef}
@@ -1702,7 +1703,7 @@ function Picker({
     const onRequestCloseModal = useCallback(() => {
         setOpen(false);
     }, []);
-    
+
     /**
      * The dropdown flatlist component.
      * @returns {JSX.Element}
@@ -1740,7 +1741,7 @@ function Picker({
     const DropDownScrollViewComponent = useMemo(() => {
         return (
             <ScrollView ref={scrollViewRef} nestedScrollEnabled={true} stickyHeaderIndices={stickyHeaderIndices} {...scrollViewProps}>
-                {_items.map((item, index) => { 
+                {_items.map((item, index) => {
                     return (
                         <Fragment key={item[_itemKey]}>
                             {index > 0 && ItemSeparatorComponent()}