react-native-input-select 0.18.0 → 0.20.0

package/src/components/Dropdown/SelectedItemsView.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { colors } from '../../styles/colors';
+import { inputStyles } from '../../styles/input';
+
+const SelectedItemsView = ({
+  placeholder,
+  error,
+  getSelectedItemsLabel,
+  handleToggleModal,
+  isMultiple,
+  selectedItem,
+  selectedItems,
+  dropdownStyle,
+  selectedItemStyle,
+  multipleSelectedItemStyle,
+  dropdownErrorStyle,
+  primaryColor,
+  disabled,
+}: any) => {
+  return (
+    <Pressable
+      onPress={() => handleToggleModal()}
+      style={({ pressed }) => [
+        pressed && {
+          ...inputStyles.inputFocusState,
+          borderColor: primaryColor,
+        },
+        inputStyles.input,
+        dropdownStyle,
+        error && //this must be last
+          error !== '' &&
+          !pressed && {
+            ...inputStyles.inputFocusErrorState,
+            ...dropdownErrorStyle,
+          },
+      ]}
+      disabled={disabled}
+    >
+      <ScrollView
+        horizontal
+        alwaysBounceHorizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        <View
+          style={styles.selectedItemsContainer}
+          onStartShouldSetResponder={() => true}
+        >
+          {isMultiple ? (
+            getSelectedItemsLabel().map((item: any, i: Number) => (
+              <TouchableOpacity
+                onPress={() => handleToggleModal()}
+                key={`react-native-input-select-${Math.random()}-${i}`}
+                disabled={disabled}
+              >
+                <Text
+                  style={[
+                    styles.selectedItems,
+                    { backgroundColor: primaryColor },
+                    multipleSelectedItemStyle,
+                  ]}
+                >
+                  {item}
+                </Text>
+              </TouchableOpacity>
+            ))
+          ) : (
+            <TouchableOpacity
+              onPress={() => handleToggleModal()}
+              disabled={disabled}
+            >
+              <Text style={[styles.blackText, selectedItemStyle]}>
+                {getSelectedItemsLabel()}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {!selectedItem && selectedItems?.length === 0 && (
+          <Text style={styles.blackText}>
+            {placeholder ?? 'Select an option'}
+          </Text>
+        )}
+      </ScrollView>
+      <View style={styles.iconStyle}>
+        <Image source={require('../../asset/arrow-down.png')} />
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  iconStyle: { position: 'absolute', right: 25, top: 25 },
+  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },
+  selectedItems: {
+    color: colors.white,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    backgroundColor: colors.primary,
+    marginRight: 10,
+  },
+  blackText: { color: colors.black },
+});
+
+export default SelectedItemsView;

package/src/{Input.tsx → components/Input/index.tsx}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { TextInput, StyleSheet, View } from 'react-native';
-import { inputStyles } from './styles/input';
+import { inputStyles } from '../../styles/input';
 
 export const Input = ({
   placeholder,

package/src/constants/index.ts

@@ -1,2 +1,3 @@
 export const DEFAULT_OPTION_LABEL = 'label';
 export const DEFAULT_OPTION_VALUE = 'value';
+export const CHECKBOX_SIZE = 14;

package/src/index.tsx

@@ -1,40 +1,42 @@
 import React, { useState } from 'react';
-import Dropdown from './Dropdown';
-import CustomModal from './Modal';
-import DropdownList from './DropdownList';
+import Dropdown from './components/Dropdown/Dropdown';
+import DropdownList from './components/Dropdown/DropdownList';
+import CustomModal from './components/CustomModal';
 import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
 import type { DropdownProps } from './types/index.types';
-import { Input } from './Input';
+import { Input } from './components/Input';
+import { colors } from './styles/colors';
 
-export const DropdownSelect = (
-  {
-    placeholder,
-    label,
-    error,
-    helperText,
-    options,
-    optionLabel,
-    optionValue,
-    onValueChange,
-    selectedValue,
-    isMultiple,
-    isSearchable,
-    labelStyle,
-    dropdownStyle,
-    dropdownContainerStyle,
-    dropdownErrorStyle,
-    dropdownErrorTextStyle,
-    dropdownHelperTextStyle,
-    selectedItemStyle,
-    multipleSelectedItemStyle,
-    modalBackgroundStyle,
-    modalOptionsContainer,
-    searchInputStyle,
-    primaryColor,
-    disabled,
-  }: DropdownProps,
-  rest: any
-) => {
+export const DropdownSelect = ({
+  placeholder,
+  label,
+  error,
+  helperText,
+  options,
+  optionLabel,
+  optionValue,
+  onValueChange,
+  selectedValue,
+  isMultiple,
+  isSearchable,
+  labelStyle,
+  dropdownStyle,
+  dropdownContainerStyle,
+  dropdownErrorStyle,
+  dropdownErrorTextStyle,
+  dropdownHelperTextStyle,
+  selectedItemStyle,
+  multipleSelectedItemStyle,
+  modalBackgroundStyle,
+  modalOptionsContainer,
+  searchInputStyle,
+  primaryColor,
+  disabled,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
+  ...rest
+}: DropdownProps) => {
   const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
@@ -69,6 +71,7 @@ export const DropdownSelect = (
       selectedValues.push(value);
     }
     setSelectedItems(selectedValues);
+    onValueChange(selectedValues); //send value to parent
   };
 
   /*===========================================
@@ -136,6 +139,7 @@ export const DropdownSelect = (
     setNewOptions(options);
   };
 
+  let primary = primaryColor || colors.gray;
   return (
     <>
       <Dropdown
@@ -156,7 +160,7 @@ export const DropdownSelect = (
         selectedItemStyle={selectedItemStyle}
         multipleSelectedItemStyle={multipleSelectedItemStyle}
         isMultiple={isMultiple}
-        primaryColor={primaryColor}
+        primaryColor={primary}
         disabled={disabled}
         {...rest}
       />
@@ -172,7 +176,7 @@ export const DropdownSelect = (
             value={searchValue}
             onChangeText={(text: string) => onSearch(text)}
             style={searchInputStyle}
-            primaryColor={primaryColor}
+            primaryColor={primary}
           />
         )}
         <DropdownList
@@ -184,7 +188,10 @@ export const DropdownSelect = (
           selectedItem={selectedItem}
           handleMultipleSelections={handleMultipleSelections}
           handleSingleSelection={handleSingleSelection}
-          primaryColor={primaryColor}
+          primaryColor={primary}
+          checkboxSize={checkboxSize}
+          checkboxStyle={checkboxStyle}
+          checkboxLabelStyle={checkboxLabelStyle}
         />
       </CustomModal>
     </>

package/src/types/index.types.ts

@@ -1,28 +1,31 @@
-import type { CSSProperties } from 'react';
+import type { ViewStyle, ColorValue, TextStyle } from 'react-native';
 
 export type DropdownProps = {
-  placeholder: string;
-  label: string;
-  error: string;
-  helperText: string;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  helperText?: string;
   options: any[];
   optionLabel: string;
-  optionValue: string;
+  optionValue?: string;
   onValueChange: Function;
-  selectedValue: string | any[] | null;
-  isMultiple: boolean;
-  isSearchable: boolean;
-  labelStyle: string;
-  dropdownStyle: CSSProperties;
-  dropdownContainerStyle: CSSProperties;
-  dropdownErrorStyle: CSSProperties;
-  dropdownErrorTextStyle: CSSProperties;
-  dropdownHelperTextStyle: CSSProperties;
-  selectedItemStyle: CSSProperties;
-  multipleSelectedItemStyle: CSSProperties;
-  modalBackgroundStyle: CSSProperties;
-  modalOptionsContainer: CSSProperties;
-  searchInputStyle: CSSProperties;
-  primaryColor: string;
-  disabled: boolean;
+  selectedValue?: string | any[] | null;
+  isMultiple?: boolean;
+  isSearchable?: boolean;
+  labelStyle?: TextStyle;
+  dropdownStyle?: ViewStyle;
+  dropdownContainerStyle?: ViewStyle;
+  dropdownErrorStyle?: ViewStyle;
+  dropdownErrorTextStyle?: TextStyle;
+  dropdownHelperTextStyle?: TextStyle;
+  selectedItemStyle?: ViewStyle;
+  multipleSelectedItemStyle?: ViewStyle;
+  modalBackgroundStyle?: ViewStyle;
+  modalOptionsContainer?: ViewStyle;
+  searchInputStyle?: ViewStyle;
+  primaryColor?: ColorValue;
+  disabled?: boolean;
+  checkboxSize?: number;
+  checkboxStyle?: ViewStyle;
+  checkboxLabelStyle?: TextStyle;
 };

package/lib/commonjs/Dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","borderWidth","borderStyle","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  View,\n  Text,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Image,\n  TouchableOpacity,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n  label,\n  placeholder,\n  helperText,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  dropdownErrorStyle,\n  dropdownErrorTextStyle,\n  dropdownHelperTextStyle,\n  primaryColor,\n  disabled,\n}: any) => {\n  return (\n    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n      {label && label !== '' && (\n        <Text style={[styles.label, labelStyle]}>{label}</Text>\n      )}\n      <Pressable\n        onPress={() => handleToggleModal()}\n        style={({ pressed }) => [\n          pressed && {\n            ...inputStyles.inputFocusState,\n            borderColor: primaryColor,\n          },\n          inputStyles.input,\n          dropdownStyle,\n          error && //order matters\n            error !== '' &&\n            !pressed && {\n              ...inputStyles.inputFocusErrorState,\n              ...dropdownErrorStyle,\n            },\n        ]}\n        disabled={disabled}\n      >\n        <ScrollView\n          horizontal\n          alwaysBounceHorizontal\n          showsHorizontalScrollIndicator={false}\n        >\n          <View\n            style={styles.selectedItemsContainer}\n            onStartShouldSetResponder={() => true}\n          >\n            {isMultiple ? (\n              getSelectedItemsLabel().map((item: any, i: Number) => (\n                <TouchableOpacity\n                  onPress={() => handleToggleModal()}\n                  key={`SelectedItems${i}`}\n                  disabled={disabled}\n                >\n                  <Text\n                    style={[\n                      styles.selectedItems,\n                      { backgroundColor: primaryColor },\n                      multipleSelectedItemStyle,\n                    ]}\n                  >\n                    {item}\n                  </Text>\n                </TouchableOpacity>\n              ))\n            ) : (\n              <TouchableOpacity\n                onPress={() => handleToggleModal()}\n                disabled={disabled}\n              >\n                <Text style={[styles.blackText, selectedItemStyle]}>\n                  {getSelectedItemsLabel()}\n                </Text>\n              </TouchableOpacity>\n            )}\n          </View>\n\n          {!selectedItem && selectedItems?.length === 0 && (\n            <Text style={styles.blackText}>\n              {placeholder ?? 'Select an option'}\n            </Text>\n          )}\n        </ScrollView>\n        <View style={styles.iconStyle}>\n          <Image source={require('../src/asset/arrow-down.png')} />\n        </View>\n      </Pressable>\n\n      {error && error !== '' && (\n        <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n      )}\n\n      {helperText && helperText !== '' && !error && (\n        <Text style={[styles.helper, dropdownHelperTextStyle]}>\n          {helperText}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.red,\n  },\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\n  error: { color: colors.red, marginTop: 8, ...typography.caption },\n  helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n  dropdownInputContainer: { marginBottom: 23, width: '100%' },\n  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n  selectedItems: {\n    color: colors.white,\n    paddingHorizontal: 10,\n    paddingVertical: 5,\n    borderRadius: 10,\n    backgroundColor: colors.primary,\n    marginRight: 10,\n  },\n  blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}

package/lib/commonjs/DropdownList.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","styles","emptyListStyle","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","StyleSheet","create","modalContainer","flex","justifyContent","modalBackgroundStyle","backgroundColor","modalOptionsContainer","maxHeight","colors","white","borderTopLeftRadius","borderTopRightRadius","gray","height","opacity","alignItems","width","marginVertical"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,QAUV;AAAA,MAVW;AACpBC,IAAAA,OADoB;AAEpBC,IAAAA,WAFoB;AAGpBC,IAAAA,WAHoB;AAIpBC,IAAAA,UAJoB;AAKpBC,IAAAA,aALoB;AAMpBC,IAAAA,YANoB;AAOpBC,IAAAA,wBAPoB;AAQpBC,IAAAA,qBARoB;AASpBC,IAAAA;AAToB,GAUX;AACT,sBACE,6BAAC,qBAAD;AACE,IAAA,IAAI,EAAER,OADR;AAEE,IAAA,SAAS,EAAEG,UAAU,GAAGC,aAAH,GAAmBC,YAF1C;AAGE,IAAA,kBAAkB,EAAE,CAHtB;AAIE,IAAA,kBAAkB,eAChB,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAEI,MAAM,CAACC;AAApB,oBACE,6BAAC,iBAAD,+BADF,CALJ;AASE,IAAA,sBAAsB,EAAE,mBAAM,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAED,MAAM,CAACE;AAApB,MAThC;AAUE,IAAA,UAAU,EAAGC,IAAD,IACVC,WAAW,CAACD,IAAD,EAAO;AAChBX,MAAAA,WADgB;AAEhBC,MAAAA,WAFgB;AAGhBC,MAAAA,UAHgB;AAIhBW,MAAAA,cAAc,EAAEX,UAAU,GAAGC,aAAH,GAAmBC,YAJ7B;AAKhBU,MAAAA,QAAQ,EAAEZ,UAAU,GAChBG,wBADgB,GAEhBC,qBAPY;AAQhBC,MAAAA;AARgB,KAAP,CAXf;AAsBE,IAAA,YAAY,EAAE,CAACQ,KAAD,EAAQC,KAAR,KAAmB,UAASA,KAAM;AAtBlD,IADF;AA0BD,CArCD;;AAuCA,MAAMJ,WAAW,GAAG,QAAgBK,KAAhB,KAA+B;AAAA,MAA9B;AAAEN,IAAAA;AAAF,GAA8B;AACjD,sBACE,6BAAC,yBAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,WAAW,EAAEM,KAAK,CAACjB,WAFrB;AAGE,IAAA,WAAW,EAAEiB,KAAK,CAAChB,WAHrB;AAIE,IAAA,UAAU,EAAEgB,KAAK,CAACf,UAJpB;AAKE,IAAA,cAAc,EAAEe,KAAK,CAACJ,cALxB;AAME,IAAA,QAAQ,EAAEI,KAAK,CAACH,QANlB;AAOE,IAAA,YAAY,EAAEG,KAAK,CAACV;AAPtB,IADF;AAWD,CAZD;;AAcA,MAAMC,MAAM,GAAGU,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,cAAc,EAAE;AACdC,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BC,EAAAA,oBAAoB,EAAE;AAAEC,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BC,EAAAA,qBAAqB,EAAE;AACrBC,IAAAA,SAAS,EAAE,KADU;AAErBF,IAAAA,eAAe,EAAEG,eAAOC,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD,GANQ;AAY/BpB,EAAAA,kBAAkB,EAAE;AAClBc,IAAAA,eAAe,EAAEG,eAAOI,IADN;AAElBC,IAAAA,MAAM,EAAE,CAFU;AAGlBC,IAAAA,OAAO,EAAE;AAHS,GAZW;AAiB/BxB,EAAAA,cAAc,EAAE;AAAEyB,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,KAAK,EAAE,MAA/B;AAAuCC,IAAAA,cAAc,EAAE;AAAvD;AAjBe,CAAlB,CAAf;;eAoBetC,Y","sourcesContent":["import React from 'react';\nimport { View, FlatList, StyleSheet, Text } from 'react-native';\nimport DropdownListItem from './DropdownListItem';\nimport { colors } from './styles/colors';\n\nconst DropdownList = ({\n  options,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedItems,\n  selectedItem,\n  handleMultipleSelections,\n  handleSingleSelection,\n  primaryColor,\n}: any) => {\n  return (\n    <FlatList\n      data={options}\n      extraData={isMultiple ? selectedItems : selectedItem}\n      initialNumToRender={5}\n      ListEmptyComponent={\n        <View style={styles.emptyListStyle}>\n          <Text>No options available</Text>\n        </View>\n      }\n      ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}\n      renderItem={(item) =>\n        _renderItem(item, {\n          optionLabel,\n          optionValue,\n          isMultiple,\n          selectedOption: isMultiple ? selectedItems : selectedItem,\n          onChange: isMultiple\n            ? handleMultipleSelections\n            : handleSingleSelection,\n          primaryColor,\n        })\n      }\n      keyExtractor={(_item, index) => `Options${index}`}\n    />\n  );\n};\n\nconst _renderItem = ({ item }: any, props: any) => {\n  return (\n    <DropdownListItem\n      item={item}\n      optionLabel={props.optionLabel}\n      optionValue={props.optionValue}\n      isMultiple={props.isMultiple}\n      selectedOption={props.selectedOption}\n      onChange={props.onChange}\n      primaryColor={props.primaryColor}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  modalContainer: {\n    flex: 1,\n    justifyContent: 'flex-end',\n  },\n  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },\n  modalOptionsContainer: {\n    maxHeight: '50%',\n    backgroundColor: colors.white,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  itemSeparatorStyle: {\n    backgroundColor: colors.gray,\n    height: 1,\n    opacity: 0.15,\n  },\n  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },\n});\n\nexport default DropdownList;\n"]}

package/lib/commonjs/DropdownListItem.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropdownListItem.tsx"],"names":["DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","selectedOptionValue","styles","modalOptions","spacing","includes","true","colors","primary","StyleSheet","create","marginRight","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,QAQd;AAAA,MARe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA,QANwB;AAOxBC,IAAAA;AAPwB,GAQf;AACT,QAAMC,mBAAmB,GAAGL,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAEM,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMJ,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL;AAFzB,kBAIE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACE;AAApB,kBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EACHP,UAAU,GACNC,cAAc,CAACO,QAAf,CAAwBX,IAAI,CAACO,mBAAD,CAA5B,CADM,GAEN,CAACH,cAAD,EAAiBO,QAAjB,CAA0BX,IAAI,CAACO,mBAAD,CAA9B,CAJR;AAME,IAAA,QAAQ,EAAE,MAAMF,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL,CAN1B;AAOE,IAAA,OAAO,EAAC,QAPV,CAOmB;AAPnB;AAQE,IAAA,UAAU,EAAE;AAAEK,MAAAA,IAAI,EAAEN,YAAY,IAAIO,eAAOC;AAA/B,KARd,CAQwD;AARxD;AASE,IAAA,YAAY,EAAER,YAAY,IAAIO,eAAOC,OATvC,CASgD;AAThD;AAUE,IAAA,WAAW,EAAER,YAAY,IAAIO,eAAOC,OAVtC,CAU+C;;AAV/C,IADF,CAJF,eAkBE,6BAAC,iBAAD,qBACE,6BAAC,iBAAD,QAAOd,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,OAAhB,CAAX,CADF,CAlBF,CADF;AAwBD,CAlCD;;AAoCA,MAAMO,MAAM,GAAGO,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,OAAO,EAAE;AAAEO,IAAAA,WAAW,EAAE;AAAf,GADsB;AAE/BR,EAAAA,YAAY,EAAE;AACZS,IAAAA,iBAAiB,EAAE,EADP;AAEZC,IAAAA,eAAe,EAAE,EAFL;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,UAAU,EAAE;AAJA;AAFiB,CAAlB,CAAf;;4BAUe,iBAAKtB,gBAAL,C","sourcesContent":["import React, { memo } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '@react-native-community/checkbox';\nimport { colors } from './styles/colors';\n\nconst DropdownListItem = ({\n  item,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedOption,\n  onChange,\n  primaryColor,\n}: any) => {\n  const selectedOptionValue = optionValue ?? 'value';\n  return (\n    <TouchableOpacity\n      style={styles.modalOptions}\n      onPress={() => onChange(item[selectedOptionValue])}\n    >\n      <View style={styles.spacing}>\n        <CheckBox\n          value={\n            isMultiple\n              ? selectedOption.includes(item[selectedOptionValue])\n              : [selectedOption].includes(item[selectedOptionValue])\n          }\n          onChange={() => onChange(item[selectedOptionValue])}\n          boxType=\"circle\" //works on ios only\n          tintColors={{ true: primaryColor || colors.primary }} //android control\n          onCheckColor={primaryColor || colors.primary} //ios checkmark colour control\n          onTintColor={primaryColor || colors.primary} //ios box colour control\n        />\n      </View>\n      <View>\n        <Text>{item[optionLabel ?? 'label']}</Text>\n      </View>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  spacing: { marginRight: 10 },\n  modalOptions: {\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n});\n\nexport default memo(DropdownListItem);\n"]}

package/lib/module/Dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","TouchableOpacity","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","pressed","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","borderWidth","borderStyle","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  View,\n  Text,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Image,\n  TouchableOpacity,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n  label,\n  placeholder,\n  helperText,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  dropdownErrorStyle,\n  dropdownErrorTextStyle,\n  dropdownHelperTextStyle,\n  primaryColor,\n  disabled,\n}: any) => {\n  return (\n    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n      {label && label !== '' && (\n        <Text style={[styles.label, labelStyle]}>{label}</Text>\n      )}\n      <Pressable\n        onPress={() => handleToggleModal()}\n        style={({ pressed }) => [\n          pressed && {\n            ...inputStyles.inputFocusState,\n            borderColor: primaryColor,\n          },\n          inputStyles.input,\n          dropdownStyle,\n          error && //order matters\n            error !== '' &&\n            !pressed && {\n              ...inputStyles.inputFocusErrorState,\n              ...dropdownErrorStyle,\n            },\n        ]}\n        disabled={disabled}\n      >\n        <ScrollView\n          horizontal\n          alwaysBounceHorizontal\n          showsHorizontalScrollIndicator={false}\n        >\n          <View\n            style={styles.selectedItemsContainer}\n            onStartShouldSetResponder={() => true}\n          >\n            {isMultiple ? (\n              getSelectedItemsLabel().map((item: any, i: Number) => (\n                <TouchableOpacity\n                  onPress={() => handleToggleModal()}\n                  key={`SelectedItems${i}`}\n                  disabled={disabled}\n                >\n                  <Text\n                    style={[\n                      styles.selectedItems,\n                      { backgroundColor: primaryColor },\n                      multipleSelectedItemStyle,\n                    ]}\n                  >\n                    {item}\n                  </Text>\n                </TouchableOpacity>\n              ))\n            ) : (\n              <TouchableOpacity\n                onPress={() => handleToggleModal()}\n                disabled={disabled}\n              >\n                <Text style={[styles.blackText, selectedItemStyle]}>\n                  {getSelectedItemsLabel()}\n                </Text>\n              </TouchableOpacity>\n            )}\n          </View>\n\n          {!selectedItem && selectedItems?.length === 0 && (\n            <Text style={styles.blackText}>\n              {placeholder ?? 'Select an option'}\n            </Text>\n          )}\n        </ScrollView>\n        <View style={styles.iconStyle}>\n          <Image source={require('../src/asset/arrow-down.png')} />\n        </View>\n      </Pressable>\n\n      {error && error !== '' && (\n        <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n      )}\n\n      {helperText && helperText !== '' && !error && (\n        <Text style={[styles.helper, dropdownHelperTextStyle]}>\n          {helperText}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.red,\n  },\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\n  error: { color: colors.red, marginTop: 8, ...typography.caption },\n  helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n  dropdownInputContainer: { marginBottom: 23, width: '100%' },\n  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n  selectedItems: {\n    color: colors.white,\n    paddingHorizontal: 10,\n    paddingVertical: 5,\n    borderRadius: 10,\n    backgroundColor: colors.primary,\n    marginRight: 10,\n  },\n  blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}

package/lib/module/DropdownList.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropdownList.tsx"],"names":["React","View","FlatList","StyleSheet","Text","DropdownListItem","colors","DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","styles","emptyListStyle","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","create","modalContainer","flex","justifyContent","modalBackgroundStyle","backgroundColor","modalOptionsContainer","maxHeight","white","borderTopLeftRadius","borderTopRightRadius","gray","height","opacity","alignItems","width","marginVertical"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, FlatList, StyleSheet, Text } from 'react-native';\nimport DropdownListItem from './DropdownListItem';\nimport { colors } from './styles/colors';\n\nconst DropdownList = ({\n  options,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedItems,\n  selectedItem,\n  handleMultipleSelections,\n  handleSingleSelection,\n  primaryColor,\n}: any) => {\n  return (\n    <FlatList\n      data={options}\n      extraData={isMultiple ? selectedItems : selectedItem}\n      initialNumToRender={5}\n      ListEmptyComponent={\n        <View style={styles.emptyListStyle}>\n          <Text>No options available</Text>\n        </View>\n      }\n      ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}\n      renderItem={(item) =>\n        _renderItem(item, {\n          optionLabel,\n          optionValue,\n          isMultiple,\n          selectedOption: isMultiple ? selectedItems : selectedItem,\n          onChange: isMultiple\n            ? handleMultipleSelections\n            : handleSingleSelection,\n          primaryColor,\n        })\n      }\n      keyExtractor={(_item, index) => `Options${index}`}\n    />\n  );\n};\n\nconst _renderItem = ({ item }: any, props: any) => {\n  return (\n    <DropdownListItem\n      item={item}\n      optionLabel={props.optionLabel}\n      optionValue={props.optionValue}\n      isMultiple={props.isMultiple}\n      selectedOption={props.selectedOption}\n      onChange={props.onChange}\n      primaryColor={props.primaryColor}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  modalContainer: {\n    flex: 1,\n    justifyContent: 'flex-end',\n  },\n  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },\n  modalOptionsContainer: {\n    maxHeight: '50%',\n    backgroundColor: colors.white,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  itemSeparatorStyle: {\n    backgroundColor: colors.gray,\n    height: 1,\n    opacity: 0.15,\n  },\n  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },\n});\n\nexport default DropdownList;\n"]}

package/lib/module/DropdownListItem.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropdownListItem.tsx"],"names":["React","memo","View","Text","TouchableOpacity","StyleSheet","CheckBox","colors","DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","selectedOptionValue","styles","modalOptions","spacing","includes","true","primary","create","marginRight","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,IAAhB,QAA4B,OAA5B;AACA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,UAAvC,QAAyD,cAAzD;AACA,OAAOC,QAAP,MAAqB,kCAArB;AACA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,gBAAgB,GAAG,QAQd;AAAA,MARe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA,QANwB;AAOxBC,IAAAA;AAPwB,GAQf;AACT,QAAMC,mBAAmB,GAAGL,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,oBAAC,gBAAD;AACE,IAAA,KAAK,EAAEM,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMJ,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL;AAFzB,kBAIE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACE;AAApB,kBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EACHP,UAAU,GACNC,cAAc,CAACO,QAAf,CAAwBX,IAAI,CAACO,mBAAD,CAA5B,CADM,GAEN,CAACH,cAAD,EAAiBO,QAAjB,CAA0BX,IAAI,CAACO,mBAAD,CAA9B,CAJR;AAME,IAAA,QAAQ,EAAE,MAAMF,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL,CAN1B;AAOE,IAAA,OAAO,EAAC,QAPV,CAOmB;AAPnB;AAQE,IAAA,UAAU,EAAE;AAAEK,MAAAA,IAAI,EAAEN,YAAY,IAAIR,MAAM,CAACe;AAA/B,KARd,CAQwD;AARxD;AASE,IAAA,YAAY,EAAEP,YAAY,IAAIR,MAAM,CAACe,OATvC,CASgD;AAThD;AAUE,IAAA,WAAW,EAAEP,YAAY,IAAIR,MAAM,CAACe,OAVtC,CAU+C;;AAV/C,IADF,CAJF,eAkBE,oBAAC,IAAD,qBACE,oBAAC,IAAD,QAAOb,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,OAAhB,CAAX,CADF,CAlBF,CADF;AAwBD,CAlCD;;AAoCA,MAAMO,MAAM,GAAGZ,UAAU,CAACkB,MAAX,CAAkB;AAC/BJ,EAAAA,OAAO,EAAE;AAAEK,IAAAA,WAAW,EAAE;AAAf,GADsB;AAE/BN,EAAAA,YAAY,EAAE;AACZO,IAAAA,iBAAiB,EAAE,EADP;AAEZC,IAAAA,eAAe,EAAE,EAFL;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,UAAU,EAAE;AAJA;AAFiB,CAAlB,CAAf;AAUA,4BAAe3B,IAAI,CAACO,gBAAD,CAAnB","sourcesContent":["import React, { memo } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '@react-native-community/checkbox';\nimport { colors } from './styles/colors';\n\nconst DropdownListItem = ({\n  item,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedOption,\n  onChange,\n  primaryColor,\n}: any) => {\n  const selectedOptionValue = optionValue ?? 'value';\n  return (\n    <TouchableOpacity\n      style={styles.modalOptions}\n      onPress={() => onChange(item[selectedOptionValue])}\n    >\n      <View style={styles.spacing}>\n        <CheckBox\n          value={\n            isMultiple\n              ? selectedOption.includes(item[selectedOptionValue])\n              : [selectedOption].includes(item[selectedOptionValue])\n          }\n          onChange={() => onChange(item[selectedOptionValue])}\n          boxType=\"circle\" //works on ios only\n          tintColors={{ true: primaryColor || colors.primary }} //android control\n          onCheckColor={primaryColor || colors.primary} //ios checkmark colour control\n          onTintColor={primaryColor || colors.primary} //ios box colour control\n        />\n      </View>\n      <View>\n        <Text>{item[optionLabel ?? 'label']}</Text>\n      </View>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  spacing: { marginRight: 10 },\n  modalOptions: {\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n});\n\nexport default memo(DropdownListItem);\n"]}

package/src/Dropdown.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Image,
-  TouchableOpacity,
-} from 'react-native';
-import { colors } from './styles/colors';
-import { inputStyles } from './styles/input';
-import { typography } from './styles/typography';
-
-const Dropdown = ({
-  label,
-  placeholder,
-  helperText,
-  error,
-  getSelectedItemsLabel,
-  handleToggleModal,
-  isMultiple,
-  selectedItem,
-  selectedItems,
-  labelStyle,
-  dropdownStyle,
-  dropdownContainerStyle,
-  selectedItemStyle,
-  multipleSelectedItemStyle,
-  dropdownErrorStyle,
-  dropdownErrorTextStyle,
-  dropdownHelperTextStyle,
-  primaryColor,
-  disabled,
-}: any) => {
-  return (
-    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
-      {label && label !== '' && (
-        <Text style={[styles.label, labelStyle]}>{label}</Text>
-      )}
-      <Pressable
-        onPress={() => handleToggleModal()}
-        style={({ pressed }) => [
-          pressed && {
-            ...inputStyles.inputFocusState,
-            borderColor: primaryColor,
-          },
-          inputStyles.input,
-          dropdownStyle,
-          error && //order matters
-            error !== '' &&
-            !pressed && {
-              ...inputStyles.inputFocusErrorState,
-              ...dropdownErrorStyle,
-            },
-        ]}
-        disabled={disabled}
-      >
-        <ScrollView
-          horizontal
-          alwaysBounceHorizontal
-          showsHorizontalScrollIndicator={false}
-        >
-          <View
-            style={styles.selectedItemsContainer}
-            onStartShouldSetResponder={() => true}
-          >
-            {isMultiple ? (
-              getSelectedItemsLabel().map((item: any, i: Number) => (
-                <TouchableOpacity
-                  onPress={() => handleToggleModal()}
-                  key={`SelectedItems${i}`}
-                  disabled={disabled}
-                >
-                  <Text
-                    style={[
-                      styles.selectedItems,
-                      { backgroundColor: primaryColor },
-                      multipleSelectedItemStyle,
-                    ]}
-                  >
-                    {item}
-                  </Text>
-                </TouchableOpacity>
-              ))
-            ) : (
-              <TouchableOpacity
-                onPress={() => handleToggleModal()}
-                disabled={disabled}
-              >
-                <Text style={[styles.blackText, selectedItemStyle]}>
-                  {getSelectedItemsLabel()}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-
-          {!selectedItem && selectedItems?.length === 0 && (
-            <Text style={styles.blackText}>
-              {placeholder ?? 'Select an option'}
-            </Text>
-          )}
-        </ScrollView>
-        <View style={styles.iconStyle}>
-          <Image source={require('../src/asset/arrow-down.png')} />
-        </View>
-      </Pressable>
-
-      {error && error !== '' && (
-        <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>
-      )}
-
-      {helperText && helperText !== '' && !error && (
-        <Text style={[styles.helper, dropdownHelperTextStyle]}>
-          {helperText}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  label: { marginBottom: 16, color: colors.gray, ...typography.caption },
-  inputFocusErrorState: {
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: colors.red,
-  },
-  iconStyle: { position: 'absolute', right: 25, top: 25 },
-  error: { color: colors.red, marginTop: 8, ...typography.caption },
-  helper: { marginTop: 8, color: colors.primary, ...typography.caption },
-  dropdownInputContainer: { marginBottom: 23, width: '100%' },
-  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },
-  selectedItems: {
-    color: colors.white,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 10,
-    backgroundColor: colors.primary,
-    marginRight: 10,
-  },
-  blackText: { color: colors.black },
-});
-
-export default Dropdown;

package/src/DropdownListItem.tsx

@@ -1,52 +0,0 @@
-import React, { memo } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import CheckBox from '@react-native-community/checkbox';
-import { colors } from './styles/colors';
-
-const DropdownListItem = ({
-  item,
-  optionLabel,
-  optionValue,
-  isMultiple,
-  selectedOption,
-  onChange,
-  primaryColor,
-}: any) => {
-  const selectedOptionValue = optionValue ?? 'value';
-  return (
-    <TouchableOpacity
-      style={styles.modalOptions}
-      onPress={() => onChange(item[selectedOptionValue])}
-    >
-      <View style={styles.spacing}>
-        <CheckBox
-          value={
-            isMultiple
-              ? selectedOption.includes(item[selectedOptionValue])
-              : [selectedOption].includes(item[selectedOptionValue])
-          }
-          onChange={() => onChange(item[selectedOptionValue])}
-          boxType="circle" //works on ios only
-          tintColors={{ true: primaryColor || colors.primary }} //android control
-          onCheckColor={primaryColor || colors.primary} //ios checkmark colour control
-          onTintColor={primaryColor || colors.primary} //ios box colour control
-        />
-      </View>
-      <View>
-        <Text>{item[optionLabel ?? 'label']}</Text>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  spacing: { marginRight: 10 },
-  modalOptions: {
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
-
-export default memo(DropdownListItem);