react-native-input-select 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Azeezat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# react-native-select
+
+Dropdown package for react-native
+
+## Installation
+
+```sh
+npm install react-native-select
+```
+
+## Usage
+
+```js
+import * as React from 'react';
+
+import { StyleSheet, View } from 'react-native';
+import DropdownSelect from 'react-native-select';
+
+export default function App() {
+  const [result, setResult] = React.useState<number | undefined>();
+
+  return (
+      <DropdownSelect
+        label="Country"
+        placeholder="Select an option..."
+        options={[
+          { name: 'Albania', code: 'AL' },
+          { name: 'Åland Islands', code: 'AX' },
+          { name: 'Algeria', code: 'DZ' },
+          { name: 'American Samoa', code: 'AS' },
+          { name: 'Andorra', code: 'AD' },
+          { name: 'Angola', code: 'AO' },
+          { name: 'Anguilla', code: 'AI' },
+          { name: 'Antarctica', code: 'AQ' },
+          { name: 'Antigua and Barbuda', code: 'AG' },
+        ]}
+        optionLabel={'name'}
+        optionValue={'code'}
+        selectedValue={result}
+        onValueChange={(itemValue) => setResult(itemValue)}
+      />
+  );
+}
+```
+
+| Proptypes              | Datatype            | Example                                          |
+| ---------------------- | ------------------- | ------------------------------------------------ |
+| label                  | `string`            | `Countries`                                      |
+| placeholder            | `string`            | `Select a country`                               |
+| options                | `Array`             | `[{ name: 'Albania', code: 'AL' }, { name: 'Åland Islands', code: 'AX' }]` |
+| optionLabel            | `string`            | `name`                                           |
+| optionValue            | `string`            | `code`                                           |
+| selectedValue          | `string` or `Array` | `AL` or `[AL, AX]`                               |
+| onValueChange          | `function`          | `()=>{`                                          |
+| isMultiple             | `Boolean`           | `true`                                           |
+| labelStyle             | `Object`            | `{backgroundColor: 'red', borderRadius: 0, ...}` |
+| dropdownStyle          | `Object`            | `{backgroundColor: 'red', margin: 5, ...}`       |
+| dropdownContainerStyle | `Object`            | `{backgroundColor: 'red', borderRadius: 0, ...}` |
+| selectedItemStyle      | `Object`            | `{backgroundColor: 'red', color: 'yellow', ...}` |
+| modalBackgroundStyle   | `Object`            | `{backgroundColor: 'blue', ...}`                 |
+| modalOptionsContainer  | `Object`            | `{padding: 5}`                                   |
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT

package/lib/commonjs/Dropdown.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _colors = require("./styles/colors");
+
+var _typography = require("./styles/typography");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Dropdown = _ref => {
+  let {
+    label,
+    placeholder,
+    helperText,
+    error,
+    getSelectedItemsLabel,
+    setOpen,
+    open,
+    isMultiple,
+    selectedItem,
+    selectedItems,
+    labelStyle,
+    dropdownStyle,
+    dropdownContainerStyle,
+    selectedItemStyle
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.dropdownInputContainer, dropdownContainerStyle]
+  }, label && label !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.label, labelStyle]
+  }, label), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: () => setOpen(!open),
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [pressed && styles.inputFocusState, styles.input, dropdownStyle];
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    horizontal: true,
+    alwaysBounceHorizontal: true,
+    showsHorizontalScrollIndicator: false
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.selectedItemsContainer,
+    onStartShouldSetResponder: () => true
+  }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    key: `SelectedItems${i}`,
+    style: [styles.selectedItems, selectedItemStyle]
+  }, item)) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.blackText
+  }, getSelectedItemsLabel())), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.blackText
+  }, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.iconStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: require('../src/asset/arrow-down.png')
+  }))), error && error !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.error
+  }, error), helperText && helperText !== '' && !error && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.helper
+  }, helperText));
+};
+
+const styles = _reactNative.StyleSheet.create({
+  label: {
+    marginBottom: 16,
+    color: _colors.colors.gray,
+    ..._typography.typography.caption
+  },
+  input: {
+    paddingVertical: 18,
+    paddingHorizontal: 23,
+    backgroundColor: _colors.colors.lightGray,
+    borderRadius: 8,
+    borderColor: _colors.colors.dark,
+    borderWidth: 1,
+    color: _colors.colors.dark,
+    width: '100%',
+    minHeight: 64
+  },
+  inputFocusState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: _colors.colors.primary,
+    borderRadius: 8
+  },
+  inputFocusErrorState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: _colors.colors.cliqkiRed
+  },
+  iconStyle: {
+    position: 'absolute',
+    right: 25,
+    top: 25
+  },
+  error: {
+    color: _colors.colors.cliqkiRed,
+    marginTop: 8,
+    ..._typography.typography.caption
+  },
+  helper: {
+    marginTop: 8,
+    color: _colors.colors.primary,
+    ..._typography.typography.caption
+  },
+  dropdownInputContainer: {
+    marginBottom: 23,
+    width: '100%'
+  },
+  selectedItemsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap'
+  },
+  selectedItems: {
+    color: _colors.colors.white,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    backgroundColor: _colors.colors.primary,
+    marginRight: 10
+  },
+  blackText: {
+    color: _colors.colors.black
+  }
+});
+
+var _default = Dropdown;
+exports.default = _default;
+//# sourceMappingURL=Dropdown.js.map

package/lib/commonjs/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","setOpen","open","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","styles","dropdownInputContainer","pressed","inputFocusState","input","selectedItemsContainer","map","item","i","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","paddingVertical","paddingHorizontal","backgroundColor","lightGray","borderRadius","borderColor","dark","borderWidth","width","minHeight","borderStyle","primary","inputFocusErrorState","cliqkiRed","position","right","top","marginTop","flexDirection","flexWrap","white","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} from 'react-native';\nimport { colors } from './styles/colors';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n  label,\n  placeholder,\n  helperText,\n  error,\n  getSelectedItemsLabel,\n  setOpen,\n  open,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\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={() => setOpen(!open)}\n        style={({ pressed }) => [\n          pressed && styles.inputFocusState,\n          styles.input,\n          dropdownStyle,\n        ]}\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                <Text\n                  key={`SelectedItems${i}`}\n                  style={[styles.selectedItems, selectedItemStyle]}\n                >\n                  {item}\n                </Text>\n              ))\n            ) : (\n              <Text style={styles.blackText}>{getSelectedItemsLabel()}</Text>\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 !== '' && <Text style={styles.error}>{error}</Text>}\n\n      {helperText && helperText !== '' && !error && (\n        <Text style={styles.helper}>{helperText}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n  input: {\n    paddingVertical: 18,\n    paddingHorizontal: 23,\n    backgroundColor: colors.lightGray,\n    borderRadius: 8,\n    borderColor: colors.dark,\n    borderWidth: 1,\n    color: colors.dark,\n    width: '100%',\n    minHeight: 64,\n  },\n  inputFocusState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.primary,\n    borderRadius: 8,\n  },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.cliqkiRed,\n  },\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\n  error: { color: colors.cliqkiRed, 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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _DropdownListItem = _interopRequireDefault(require("./DropdownListItem"));
+
+var _colors = require("./styles/colors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DropdownList = _ref => {
+  let {
+    options,
+    optionLabel,
+    optionValue,
+    isMultiple,
+    selectedItems,
+    selectedItem,
+    handleMultipleSelections,
+    handleSingleSelection
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    data: options,
+    extraData: isMultiple ? selectedItems : selectedItem,
+    initialNumToRender: 5 // ListEmptyComponent={
+    //   <EmptyStateComponent
+    //     style={{alignItems: 'flex-start', marginTop: 30}}
+    //     message="Be the first to reply"
+    //   />
+    // }
+    ,
+    ItemSeparatorComponent: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.itemSeparatorStyle
+    }),
+    renderItem: item => _renderItem(item, {
+      optionLabel,
+      optionValue,
+      isMultiple,
+      selectedOption: isMultiple ? selectedItems : selectedItem,
+      onChange: isMultiple ? handleMultipleSelections : handleSingleSelection
+    }),
+    keyExtractor: (_item, index) => `Options${index}`
+  });
+};
+
+const _renderItem = (_ref2, props) => {
+  let {
+    item
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_DropdownListItem.default, {
+    item: item,
+    optionLabel: props.optionLabel,
+    optionValue: props.optionValue,
+    isMultiple: props.isMultiple,
+    selectedOption: props.selectedOption,
+    onChange: props.onChange
+  });
+};
+
+const styles = _reactNative.StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  modalBackgroundStyle: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  modalOptionsContainer: {
+    maxHeight: '50%',
+    backgroundColor: _colors.colors.white,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
+  },
+  itemSeparatorStyle: {
+    backgroundColor: _colors.colors.gray,
+    height: 1,
+    opacity: 0.15
+  }
+});
+
+var _default = DropdownList;
+exports.default = _default;
+//# sourceMappingURL=DropdownList.js.map

package/lib/commonjs/DropdownList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","styles","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","StyleSheet","create","modalContainer","flex","justifyContent","modalBackgroundStyle","backgroundColor","modalOptionsContainer","maxHeight","colors","white","borderTopLeftRadius","borderTopRightRadius","gray","height","opacity"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,QASV;AAAA,MATW;AACpBC,IAAAA,OADoB;AAEpBC,IAAAA,WAFoB;AAGpBC,IAAAA,WAHoB;AAIpBC,IAAAA,UAJoB;AAKpBC,IAAAA,aALoB;AAMpBC,IAAAA,YANoB;AAOpBC,IAAAA,wBAPoB;AAQpBC,IAAAA;AARoB,GASX;AACT,sBACE,6BAAC,qBAAD;AACE,IAAA,IAAI,EAAEP,OADR;AAEE,IAAA,SAAS,EAAEG,UAAU,GAAGC,aAAH,GAAmBC,YAF1C;AAGE,IAAA,kBAAkB,EAAE,CAHtB,CAIE;AACA;AACA;AACA;AACA;AACA;AATF;AAUE,IAAA,sBAAsB,EAAE,mBAAM,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAEG,MAAM,CAACC;AAApB,MAVhC;AAWE,IAAA,UAAU,EAAGC,IAAD,IACVC,WAAW,CAACD,IAAD,EAAO;AAChBT,MAAAA,WADgB;AAEhBC,MAAAA,WAFgB;AAGhBC,MAAAA,UAHgB;AAIhBS,MAAAA,cAAc,EAAET,UAAU,GAAGC,aAAH,GAAmBC,YAJ7B;AAKhBQ,MAAAA,QAAQ,EAAEV,UAAU,GAChBG,wBADgB,GAEhBC;AAPY,KAAP,CAZf;AAsBE,IAAA,YAAY,EAAE,CAACO,KAAD,EAAQC,KAAR,KAAmB,UAASA,KAAM;AAtBlD,IADF;AA0BD,CApCD;;AAsCA,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,CAACf,WAFrB;AAGE,IAAA,WAAW,EAAEe,KAAK,CAACd,WAHrB;AAIE,IAAA,UAAU,EAAEc,KAAK,CAACb,UAJpB;AAKE,IAAA,cAAc,EAAEa,KAAK,CAACJ,cALxB;AAME,IAAA,QAAQ,EAAEI,KAAK,CAACH;AANlB,IADF;AAUD,CAXD;;AAaA,MAAML,MAAM,GAAGS,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;AAZW,CAAlB,CAAf;;eAmBejC,Y","sourcesContent":["import React from 'react';\nimport { View, FlatList, StyleSheet } 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}: any) => {\n  return (\n    <FlatList\n      data={options}\n      extraData={isMultiple ? selectedItems : selectedItem}\n      initialNumToRender={5}\n      // ListEmptyComponent={\n      //   <EmptyStateComponent\n      //     style={{alignItems: 'flex-start', marginTop: 30}}\n      //     message=\"Be the first to reply\"\n      //   />\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        })\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    />\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});\n\nexport default DropdownList;\n"]}

package/lib/commonjs/DropdownListItem.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _checkbox = _interopRequireDefault(require("@react-native-community/checkbox"));
+
+var _colors = require("./styles/colors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DropdownListItem = _ref => {
+  let {
+    item,
+    optionLabel,
+    optionValue,
+    isMultiple,
+    selectedOption,
+    onChange
+  } = _ref;
+  const selectedOptionValue = optionValue !== null && optionValue !== void 0 ? optionValue : 'value';
+  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: styles.modalOptions,
+    onPress: () => onChange(item[selectedOptionValue])
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.spacing
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+    value: isMultiple ? selectedOption.includes(item[selectedOptionValue]) : [selectedOption].includes(item[selectedOptionValue]),
+    onChange: () => onChange(item[selectedOptionValue]),
+    boxType: "circle" //works on ios only
+    ,
+    tintColors: {
+      true: _colors.colors.primary
+    } //android control
+    ,
+    onCheckColor: _colors.colors.primary //ios checkmark colour control
+    ,
+    onTintColor: _colors.colors.primary //ios box colour control
+
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : 'label'])));
+};
+
+const styles = _reactNative.StyleSheet.create({
+  spacing: {
+    marginRight: 10
+  },
+  modalOptions: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+
+var _default = /*#__PURE__*/(0, _react.memo)(DropdownListItem);
+
+exports.default = _default;
+//# sourceMappingURL=DropdownListItem.js.map

package/lib/commonjs/DropdownListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DropdownListItem.tsx"],"names":["DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","selectedOptionValue","styles","modalOptions","spacing","includes","true","colors","primary","StyleSheet","create","marginRight","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,QAOd;AAAA,MAPe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA;AANwB,GAOf;AACT,QAAMC,mBAAmB,GAAGJ,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAEK,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMH,QAAQ,CAACL,IAAI,CAACM,mBAAD,CAAL;AAFzB,kBAIE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACE;AAApB,kBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EACHN,UAAU,GACNC,cAAc,CAACM,QAAf,CAAwBV,IAAI,CAACM,mBAAD,CAA5B,CADM,GAEN,CAACF,cAAD,EAAiBM,QAAjB,CAA0BV,IAAI,CAACM,mBAAD,CAA9B,CAJR;AAME,IAAA,QAAQ,EAAE,MAAMD,QAAQ,CAACL,IAAI,CAACM,mBAAD,CAAL,CAN1B;AAOE,IAAA,OAAO,EAAC,QAPV,CAOmB;AAPnB;AAQE,IAAA,UAAU,EAAE;AAAEK,MAAAA,IAAI,EAAEC,eAAOC;AAAf,KARd,CAQwC;AARxC;AASE,IAAA,YAAY,EAAED,eAAOC,OATvB,CASgC;AAThC;AAUE,IAAA,WAAW,EAAED,eAAOC,OAVtB,CAU+B;;AAV/B,IADF,CAJF,eAkBE,6BAAC,iBAAD,qBACE,6BAAC,iBAAD,QAAOb,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,OAAhB,CAAX,CADF,CAlBF,CADF;AAwBD,CAjCD;;AAmCA,MAAMM,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,iBAAKrB,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}: 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: colors.primary }} //android control\n          onCheckColor={colors.primary} //ios checkmark colour control\n          onTintColor={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/commonjs/Modal.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _colors = require("./styles/colors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CustomModal = _ref => {
+  let {
+    open,
+    setOpen,
+    onRequestClose,
+    modalBackgroundStyle,
+    modalOptionsContainerStyle,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
+    transparent: true,
+    visible: open,
+    onRequestClose: () => onRequestClose(),
+    animationType: "fade"
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => setOpen(!open),
+    style: [styles.modalContainer, styles.modalBackgroundStyle, modalBackgroundStyle]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
+    style: [styles.modalOptionsContainer, modalOptionsContainerStyle]
+  }, children)));
+};
+
+const styles = _reactNative.StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  modalBackgroundStyle: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  modalOptionsContainer: {
+    maxHeight: '50%',
+    backgroundColor: _colors.colors.white,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
+  }
+});
+
+var _default = CustomModal;
+exports.default = _default;
+//# sourceMappingURL=Modal.js.map

package/lib/commonjs/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Modal.tsx"],"names":["CustomModal","open","setOpen","onRequestClose","modalBackgroundStyle","modalOptionsContainerStyle","children","styles","modalContainer","modalOptionsContainer","StyleSheet","create","flex","justifyContent","backgroundColor","maxHeight","colors","white","borderTopLeftRadius","borderTopRightRadius"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;;;AAEA,MAAMA,WAAW,GAAG,QAOT;AAAA,MAPU;AACnBC,IAAAA,IADmB;AAEnBC,IAAAA,OAFmB;AAGnBC,IAAAA,cAHmB;AAInBC,IAAAA,oBAJmB;AAKnBC,IAAAA,0BALmB;AAMnBC,IAAAA;AANmB,GAOV;AACT,sBACE,6BAAC,kBAAD;AACE,IAAA,WAAW,EAAE,IADf;AAEE,IAAA,OAAO,EAAEL,IAFX;AAGE,IAAA,cAAc,EAAE,MAAME,cAAc,EAHtC;AAIE,IAAA,aAAa,EAAC;AAJhB,kBAME,6BAAC,6BAAD;AACE,IAAA,OAAO,EAAE,MAAMD,OAAO,CAAC,CAACD,IAAF,CADxB;AAEE,IAAA,KAAK,EAAE,CACLM,MAAM,CAACC,cADF,EAELD,MAAM,CAACH,oBAFF,EAGLA,oBAHK;AAFT,kBAQE,6BAAC,yBAAD;AACE,IAAA,KAAK,EAAE,CAACG,MAAM,CAACE,qBAAR,EAA+BJ,0BAA/B;AADT,KAGGC,QAHH,CARF,CANF,CADF;AAuBD,CA/BD;;AAiCA,MAAMC,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,cAAc,EAAE;AACdI,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BT,EAAAA,oBAAoB,EAAE;AAAEU,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BL,EAAAA,qBAAqB,EAAE;AACrBM,IAAAA,SAAS,EAAE,KADU;AAErBD,IAAAA,eAAe,EAAEE,eAAOC,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD;AANQ,CAAlB,CAAf;;eAcenB,W","sourcesContent":["import React from 'react';\nimport {\n  Modal,\n  TouchableOpacity,\n  SafeAreaView,\n  StyleSheet,\n} from 'react-native';\nimport { colors } from './styles/colors';\n\nconst CustomModal = ({\n  open,\n  setOpen,\n  onRequestClose,\n  modalBackgroundStyle,\n  modalOptionsContainerStyle,\n  children,\n}: any) => {\n  return (\n    <Modal\n      transparent={true}\n      visible={open}\n      onRequestClose={() => onRequestClose()}\n      animationType=\"fade\"\n    >\n      <TouchableOpacity\n        onPress={() => setOpen(!open)}\n        style={[\n          styles.modalContainer,\n          styles.modalBackgroundStyle,\n          modalBackgroundStyle,\n        ]}\n      >\n        <SafeAreaView\n          style={[styles.modalOptionsContainer, modalOptionsContainerStyle]}\n        >\n          {children}\n        </SafeAreaView>\n      </TouchableOpacity>\n    </Modal>\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});\n\nexport default CustomModal;\n"]}

package/lib/commonjs/index.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DropdownSelect = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+var _Modal = _interopRequireDefault(require("./Modal"));
+
+var _DropdownList = _interopRequireDefault(require("./DropdownList"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DropdownSelect = _ref => {
+  let {
+    placeholder,
+    label,
+    error,
+    helperText,
+    options,
+    optionLabel,
+    optionValue,
+    onValueChange,
+    selectedValue,
+    isMultiple,
+    labelStyle,
+    dropdownStyle,
+    dropdownContainerStyle,
+    selectedItemStyle,
+    modalBackgroundStyle,
+    modalOptionsContainer
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [selectedItem, setSelectedItem] = (0, _react.useState)(selectedValue); //for single selection
+
+  const [selectedItems, setSelectedItems] = (0, _react.useState)(Array.isArray(selectedValue) ? selectedValue : []); //for multiple selection
+
+  /*===========================================
+   * Selection handlers
+   *==========================================*/
+
+  const handleSingleSelection = value => {
+    if (selectedItem === value) {
+      setSelectedItem(null);
+    } else {
+      setSelectedItem(value);
+      onValueChange(value); //send value to parent
+
+      setOpen(false); //close modal upon selection
+    }
+  };
+
+  const handleMultipleSelections = value => {
+    let selectedValues = [...selectedItems];
+
+    if (selectedValues.includes(value)) {
+      selectedValues = selectedValues.filter(item => item !== value);
+    } else {
+      selectedValues.push(value);
+    }
+
+    setSelectedItems(selectedValues);
+  };
+  /*===========================================
+   * Get label handler
+   *==========================================*/
+
+
+  const getSelectedItemsLabel = () => {
+    if (isMultiple) {
+      let selectedLabels = [];
+      selectedItems && selectedItems.forEach(element => {
+        var _options$find;
+
+        let selectedItemLabel = options && ((_options$find = options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : 'value'] === element)) === null || _options$find === void 0 ? void 0 : _options$find[optionLabel]);
+        selectedLabels.push(selectedItemLabel);
+      });
+      return selectedLabels;
+    }
+
+    let selectedItemLabel = options && options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : 'value'] === selectedItem);
+    return selectedItemLabel === null || selectedItemLabel === void 0 ? void 0 : selectedItemLabel[optionLabel];
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+    label: label,
+    placeholder: placeholder,
+    helperText: helperText,
+    error: error,
+    getSelectedItemsLabel: getSelectedItemsLabel,
+    selectedItem: selectedItem,
+    selectedItems: selectedItems,
+    setOpen: setOpen,
+    open: open,
+    labelStyle: labelStyle,
+    dropdownStyle: dropdownStyle,
+    dropdownContainerStyle: dropdownContainerStyle,
+    selectedItemStyle: selectedItemStyle,
+    isMultiple: isMultiple
+  }), /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    open: open,
+    setOpen: setOpen,
+    modalBackgroundStyle: modalBackgroundStyle,
+    modalOptionsContainer: modalOptionsContainer,
+    onRequestClose: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_DropdownList.default, {
+    options: options,
+    optionLabel: optionLabel,
+    optionValue: optionValue,
+    isMultiple: isMultiple,
+    selectedItems: selectedItems,
+    selectedItem: selectedItem,
+    handleMultipleSelections: handleMultipleSelections,
+    handleSingleSelection: handleSingleSelection
+  })));
+};
+
+exports.DropdownSelect = DropdownSelect;
+var _default = DropdownSelect;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","modalBackgroundStyle","modalOptionsContainer","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\n\nexport const DropdownSelect = ({\n  placeholder,\n  label,\n  error,\n  helperText,\n  options,\n  optionLabel,\n  optionValue,\n  onValueChange,\n  selectedValue,\n  isMultiple,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  modalBackgroundStyle,\n  modalOptionsContainer,\n}: any) => {\n  const [open, setOpen] = useState(false);\n  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n  const [selectedItems, setSelectedItems] = useState(\n    Array.isArray(selectedValue) ? selectedValue : []\n  ); //for multiple selection\n\n  /*===========================================\n   * Selection handlers\n   *==========================================*/\n  const handleSingleSelection = (value: any) => {\n    if (selectedItem === value) {\n      setSelectedItem(null);\n    } else {\n      setSelectedItem(value);\n      onValueChange(value); //send value to parent\n      setOpen(false); //close modal upon selection\n    }\n  };\n\n  const handleMultipleSelections = (value: any) => {\n    let selectedValues = [...selectedItems];\n\n    if (selectedValues.includes(value)) {\n      selectedValues = selectedValues.filter((item) => item !== value);\n    } else {\n      selectedValues.push(value);\n    }\n    setSelectedItems(selectedValues);\n  };\n\n  /*===========================================\n   * Get label handler\n   *==========================================*/\n  const getSelectedItemsLabel = () => {\n    if (isMultiple) {\n      let selectedLabels: Array<string> = [];\n      selectedItems &&\n        selectedItems.forEach((element) => {\n          let selectedItemLabel =\n            options &&\n            options.find(\n              (item: string) => item[optionValue ?? 'value'] === element\n            )?.[optionLabel];\n          selectedLabels.push(selectedItemLabel);\n        });\n      return selectedLabels;\n    }\n\n    let selectedItemLabel =\n      options &&\n      options.find(\n        (item: string) => item[optionValue ?? 'value'] === selectedItem\n      );\n    return selectedItemLabel?.[optionLabel];\n  };\n\n  return (\n    <>\n      <Dropdown\n        label={label}\n        placeholder={placeholder}\n        helperText={helperText}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        setOpen={setOpen}\n        open={open}\n        labelStyle={labelStyle}\n        dropdownStyle={dropdownStyle}\n        dropdownContainerStyle={dropdownContainerStyle}\n        selectedItemStyle={selectedItemStyle}\n        isMultiple={isMultiple}\n      />\n      <CustomModal\n        open={open}\n        setOpen={setOpen}\n        modalBackgroundStyle={modalBackgroundStyle}\n        modalOptionsContainer={modalOptionsContainer}\n        onRequestClose={() => {}}\n      >\n        <DropdownList\n          options={options}\n          optionLabel={optionLabel}\n          optionValue={optionValue}\n          isMultiple={isMultiple}\n          selectedItems={selectedItems}\n          selectedItem={selectedItem}\n          handleMultipleSelections={handleMultipleSelections}\n          handleSingleSelection={handleSingleSelection}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nexport default DropdownSelect;\n"]}

package/lib/commonjs/styles/colors.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colors = void 0;
+const colors = {
+  primary: '#EF8031',
+  black: '#000000',
+  white: '#FFFFFF',
+  dark: '#11142D',
+  gray: '#808191',
+  lightGray: '#F7F7F7'
+};
+exports.colors = colors;
+//# sourceMappingURL=colors.js.map