react-native-input-select 0.19.0 → 0.20.0

package/src/components/CheckBox/index.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import { Pressable, Text, StyleSheet, Image, View } from 'react-native';
+import { CHECKBOX_SIZE } from '../../constants';
+import type { CheckboxProps } from './types';
+
+const CheckBox = ({
+  label,
+  value,
+  primaryColor,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
+  onChange,
+}: CheckboxProps) => {
+  const fillColor = {
+    backgroundColor: value ? primaryColor || 'green' : 'white',
+  };
+  return (
+    <Pressable
+      onPress={onChange ? () => onChange(!value) : () => {}}
+      style={[styles.checkboxContainer]}
+    >
+      <View style={[styles.checkbox, checkboxStyle, fillColor]}>
+        <Image
+          source={require('../../asset/check.png')}
+          style={[
+            {
+              height: checkboxSize || CHECKBOX_SIZE,
+              width: checkboxSize || CHECKBOX_SIZE,
+            },
+          ]}
+        />
+      </View>
+      {label && (
+        <Text style={[checkboxLabelStyle, styles.labelStyle]}>{label}</Text>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  checkboxContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+  },
+  checkbox: {
+    padding: 4,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: 4,
+    borderColor: 'black',
+  },
+  labelStyle: { marginLeft: 10 },
+});
+
+export default CheckBox;

package/src/components/CheckBox/types.ts

@@ -0,0 +1,11 @@
+import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
+
+export type CheckboxProps = {
+  label?: string;
+  value?: boolean;
+  primaryColor?: ColorValue;
+  checkboxSize?: number;
+  checkboxStyle?: ViewStyle;
+  checkboxLabelStyle?: TextStyle;
+  onChange?: (value: boolean | string | number) => void;
+};

package/src/{Modal.tsx → components/CustomModal/index.tsx}

@@ -5,7 +5,7 @@ import {
   SafeAreaView,
   StyleSheet,
 } from 'react-native';
-import { colors } from './styles/colors';
+import { colors } from '../../styles/colors';
 
 const CustomModal = ({
   open,

package/src/{Dropdown.tsx → components/Dropdown/Dropdown.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import SelectedItemsView from './SelectedItemsView';
-import { colors } from './styles/colors';
-import { typography } from './styles/typography';
+import { colors } from '../../styles/colors';
+import { typography } from '../../styles/typography';
 
 const Dropdown = ({
   label,

package/src/{DropdownList.tsx → components/Dropdown/DropdownList.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, FlatList, StyleSheet, Text } from 'react-native';
 import DropdownListItem from './DropdownListItem';
-import { colors } from './styles/colors';
+import { colors } from '../../styles/colors';
 
 const DropdownList = ({
   options,
@@ -13,6 +13,9 @@ const DropdownList = ({
   handleMultipleSelections,
   handleSingleSelection,
   primaryColor,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
 }: any) => {
   return (
     <FlatList
@@ -35,6 +38,9 @@ const DropdownList = ({
             ? handleMultipleSelections
             : handleSingleSelection,
           primaryColor,
+          checkboxSize,
+          checkboxStyle,
+          checkboxLabelStyle,
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
@@ -52,6 +58,9 @@ const _renderItem = ({ item }: any, props: any) => {
       selectedOption={props.selectedOption}
       onChange={props.onChange}
       primaryColor={props.primaryColor}
+      checkboxSize={props.checkboxSize}
+      checkboxStyle={props.checkboxStyle}
+      checkboxLabelStyle={props.checkboxLabelStyle}
     />
   );
 };

package/src/components/Dropdown/DropdownListItem.tsx

@@ -0,0 +1,50 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import CheckBox from '../CheckBox';
+import { colors } from '../../styles/colors';
+
+const DropdownListItem = ({
+  item,
+  optionLabel,
+  optionValue,
+  isMultiple,
+  selectedOption,
+  onChange,
+  primaryColor,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
+}: any) => {
+  const selectedOptionValue = optionValue ?? 'value';
+  return (
+    <TouchableOpacity
+      style={styles.modalOptions}
+      onPress={() => onChange(item[selectedOptionValue])}
+    >
+      <CheckBox
+        value={
+          isMultiple
+            ? selectedOption.includes(item[selectedOptionValue])
+            : [selectedOption].includes(item[selectedOptionValue])
+        }
+        label={item[optionLabel ?? '']}
+        onChange={() => onChange(item[selectedOptionValue])}
+        primaryColor={primaryColor || colors.primary}
+        checkboxSize={checkboxSize}
+        checkboxStyle={checkboxStyle}
+        checkboxLabelStyle={checkboxLabelStyle}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOptions: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default memo(DropdownListItem);

package/src/{SelectedItemsView.tsx → components/Dropdown/SelectedItemsView.tsx}

@@ -8,8 +8,8 @@ import {
   Image,
   TouchableOpacity,
 } from 'react-native';
-import { colors } from './styles/colors';
-import { inputStyles } from './styles/input';
+import { colors } from '../../styles/colors';
+import { inputStyles } from '../../styles/input';
 
 const SelectedItemsView = ({
   placeholder,
@@ -91,7 +91,7 @@ const SelectedItemsView = ({
         )}
       </ScrollView>
       <View style={styles.iconStyle}>
-        <Image source={require('../src/asset/arrow-down.png')} />
+        <Image source={require('../../asset/arrow-down.png')} />
       </View>
     </Pressable>
   );

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,41 +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
@@ -70,6 +71,7 @@ export const DropdownSelect = (
       selectedValues.push(value);
     }
     setSelectedItems(selectedValues);
+    onValueChange(selectedValues); //send value to parent
   };
 
   /*===========================================
@@ -187,6 +189,9 @@ export const DropdownSelect = (
           handleMultipleSelections={handleMultipleSelections}
           handleSingleSelection={handleSingleSelection}
           primaryColor={primary}
+          checkboxSize={checkboxSize}
+          checkboxStyle={checkboxStyle}
+          checkboxLabelStyle={checkboxLabelStyle}
         />
       </CustomModal>
     </>

package/src/types/index.types.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { ViewStyle, ColorValue, TextStyle } from 'react-native';
 
 export type DropdownProps = {
   placeholder?: string;
@@ -12,17 +12,20 @@ export type DropdownProps = {
   selectedValue?: string | any[] | null;
   isMultiple?: boolean;
   isSearchable?: boolean;
-  labelStyle?: CSSProperties;
-  dropdownStyle?: CSSProperties;
-  dropdownContainerStyle?: CSSProperties;
-  dropdownErrorStyle?: CSSProperties;
-  dropdownErrorTextStyle?: CSSProperties;
-  dropdownHelperTextStyle?: CSSProperties;
-  selectedItemStyle?: CSSProperties;
-  multipleSelectedItemStyle?: CSSProperties;
-  modalBackgroundStyle?: CSSProperties;
-  modalOptionsContainer?: CSSProperties;
-  searchInputStyle?: CSSProperties;
-  primaryColor?: string;
+  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/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/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/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);