react-native-input-select 0.18.0 → 0.20.0

package/README.md

@@ -1,6 +1,8 @@
+[![CodeQL](https://github.com/azeezat/react-native-select/actions/workflows/codeql.yml/badge.svg)](https://github.com/azeezat/react-native-select/actions/workflows/codeql.yml)
+
 # react-native-input-select
 
-A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.
+A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.
 
 ## Installation
 
@@ -11,11 +13,11 @@ yarn add react-native-input-select
 
 ## Demo
 
-|                                                       Multiple Select                                                        |                                                        Single Select                                                         |                                                            Search                                                            |
-| :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
-| <video src='https://user-images.githubusercontent.com/9849221/148039859-9eb4ef87-60ca-4300-9899-fbe81dcb0fb6.mov' width=90/> | <video src='https://user-images.githubusercontent.com/9849221/148039800-9c30509a-6115-415e-aa3c-0402d64ec578.mov' width=90/> | <video src='https://user-images.githubusercontent.com/9849221/148668734-a48aad4d-99bb-4942-a167-561ed59fe38e.mov' width=90/> |
+|<video src='https://user-images.githubusercontent.com/9849221/148668734-a48aad4d-99bb-4942-a167-561ed59fe38e.mov' width=90/> |
+
+## Basic Usage
 
-## Usage
+For more examples visit our (wiki page)[https://github.com/azeezat/react-native-select/wiki]
 
 ```js
 import React from 'react';
@@ -65,18 +67,22 @@ export default function App() {
 | isMultiple                | `Boolean`           | `true`                                                                     |
 | isSearchable              | `Boolean`           | `true`                                                                     |
 | disabled                  | `Boolean`           | `true`                                                                     |
-| labelStyle                | `Object`            | `{backgroundColor: 'red', borderRadius: 0, ...}`                           |
+| labelStyle                | `Object`            | `{color: 'red', borderRadius: 0, ...}`                                     |
 | dropdownStyle             | `Object`            | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}`                      |
 | dropdownContainerStyle    | `Object`            | `{backgroundColor: 'red', width: '30%', ...}`                              |
 | searchInputStyle          | `Object`            | `{backgroundColor: 'red', borderRadius: 0, ...}`                           |
 | selectedItemStyle         | `Object`            | `{backgroundColor: 'red', color: 'yellow', ...}`                           |
 | multipleSelectedItemStyle | `Object`            | `{backgroundColor: 'red', color: 'yellow', ...}`                           |
-| modalBackgroundStyle      | `Object`            | `{backgroundColor: 'blue', ...}`                                           |
+| modalBackgroundStyle      | `Object`            | `{backgroundColor: 'rgba(196, 198, 246, 0.5)'}`                            |
 | modalOptionsContainer     | `Object`            | `{padding: 5}`                                                             |
 | dropdownErrorStyle        | `Object`            | `{borderWidth: 2, borderStyle: 'solid'}`                                   |
-| dropdownErrorTextStyle    | `Object`            | `{color: 'red', fontWeight:500}`                                           |
-| dropdownHelperTextStyle   | `Object`            | `{color: 'green', fontWeight:500}`                                         |
+| dropdownErrorTextStyle    | `Object`            | `{color: 'red', fontWeight:'500'}`                                         |
+| dropdownHelperTextStyle   | `Object`            | `{color: 'green', fontWeight:'500'}`                                       |
 | primaryColor              | `string`            | `blue`                                                                     |
+| checkboxSize              | `number`            | `5`                                                                        |
+| checkboxStyle             | `Object`            | `{backgroundColor: 'blue', ...}`                                           |
+| checkboxLabelStyle        | `Object`            | `{color: 'red', fontWeight:'500'`                                          |
+
 
 ## Contributing
 

package/lib/commonjs/components/CheckBox/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _constants = require("../../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react-native/no-inline-styles */
+const CheckBox = _ref => {
+  let {
+    label,
+    value,
+    primaryColor,
+    checkboxSize,
+    checkboxStyle,
+    checkboxLabelStyle,
+    onChange
+  } = _ref;
+  const fillColor = {
+    backgroundColor: value ? primaryColor || 'green' : 'white'
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: onChange ? () => onChange(!value) : () => {},
+    style: [styles.checkboxContainer]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.checkbox, checkboxStyle, fillColor]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: require('../../asset/check.png'),
+    style: [{
+      height: checkboxSize || _constants.CHECKBOX_SIZE,
+      width: checkboxSize || _constants.CHECKBOX_SIZE
+    }]
+  })), label && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [checkboxLabelStyle, styles.labelStyle]
+  }, label));
+};
+
+const styles = _reactNative.StyleSheet.create({
+  checkboxContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center'
+  },
+  checkbox: {
+    padding: 4,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: 4,
+    borderColor: 'black'
+  },
+  labelStyle: {
+    marginLeft: 10
+  }
+});
+
+var _default = CheckBox;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/CheckBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["CheckBox","label","value","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","onChange","fillColor","backgroundColor","styles","checkboxContainer","checkbox","require","height","CHECKBOX_SIZE","width","labelStyle","StyleSheet","create","flexDirection","flexWrap","alignItems","padding","borderWidth","borderStyle","borderRadius","borderColor","marginLeft"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;AAHA;AAMA,MAAMA,QAAQ,GAAG,QAQI;AAAA,MARH;AAChBC,IAAAA,KADgB;AAEhBC,IAAAA,KAFgB;AAGhBC,IAAAA,YAHgB;AAIhBC,IAAAA,YAJgB;AAKhBC,IAAAA,aALgB;AAMhBC,IAAAA,kBANgB;AAOhBC,IAAAA;AAPgB,GAQG;AACnB,QAAMC,SAAS,GAAG;AAChBC,IAAAA,eAAe,EAAEP,KAAK,GAAGC,YAAY,IAAI,OAAnB,GAA6B;AADnC,GAAlB;AAGA,sBACE,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAEI,QAAQ,GAAG,MAAMA,QAAQ,CAAC,CAACL,KAAF,CAAjB,GAA4B,MAAM,CAAE,CADvD;AAEE,IAAA,KAAK,EAAE,CAACQ,MAAM,CAACC,iBAAR;AAFT,kBAIE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACD,MAAM,CAACE,QAAR,EAAkBP,aAAlB,EAAiCG,SAAjC;AAAb,kBACE,6BAAC,kBAAD;AACE,IAAA,MAAM,EAAEK,OAAO,CAAC,uBAAD,CADjB;AAEE,IAAA,KAAK,EAAE,CACL;AACEC,MAAAA,MAAM,EAAEV,YAAY,IAAIW,wBAD1B;AAEEC,MAAAA,KAAK,EAAEZ,YAAY,IAAIW;AAFzB,KADK;AAFT,IADF,CAJF,EAeGd,KAAK,iBACJ,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACK,kBAAD,EAAqBI,MAAM,CAACO,UAA5B;AAAb,KAAuDhB,KAAvD,CAhBJ,CADF;AAqBD,CAjCD;;AAmCA,MAAMS,MAAM,GAAGQ,wBAAWC,MAAX,CAAkB;AAC/BR,EAAAA,iBAAiB,EAAE;AACjBS,IAAAA,aAAa,EAAE,KADE;AAEjBC,IAAAA,QAAQ,EAAE,QAFO;AAGjBC,IAAAA,UAAU,EAAE;AAHK,GADY;AAM/BV,EAAAA,QAAQ,EAAE;AACRW,IAAAA,OAAO,EAAE,CADD;AAERC,IAAAA,WAAW,EAAE,CAFL;AAGRC,IAAAA,WAAW,EAAE,OAHL;AAIRC,IAAAA,YAAY,EAAE,CAJN;AAKRC,IAAAA,WAAW,EAAE;AALL,GANqB;AAa/BV,EAAAA,UAAU,EAAE;AAAEW,IAAAA,UAAU,EAAE;AAAd;AAbmB,CAAlB,CAAf;;eAgBe5B,Q","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport React from 'react';\nimport { Pressable, Text, StyleSheet, Image, View } from 'react-native';\nimport { CHECKBOX_SIZE } from '../../constants';\nimport type { CheckboxProps } from './types';\n\nconst CheckBox = ({\n  label,\n  value,\n  primaryColor,\n  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\n  onChange,\n}: CheckboxProps) => {\n  const fillColor = {\n    backgroundColor: value ? primaryColor || 'green' : 'white',\n  };\n  return (\n    <Pressable\n      onPress={onChange ? () => onChange(!value) : () => {}}\n      style={[styles.checkboxContainer]}\n    >\n      <View style={[styles.checkbox, checkboxStyle, fillColor]}>\n        <Image\n          source={require('../../asset/check.png')}\n          style={[\n            {\n              height: checkboxSize || CHECKBOX_SIZE,\n              width: checkboxSize || CHECKBOX_SIZE,\n            },\n          ]}\n        />\n      </View>\n      {label && (\n        <Text style={[checkboxLabelStyle, styles.labelStyle]}>{label}</Text>\n      )}\n    </Pressable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  checkboxContainer: {\n    flexDirection: 'row',\n    flexWrap: 'nowrap',\n    alignItems: 'center',\n  },\n  checkbox: {\n    padding: 4,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    borderRadius: 4,\n    borderColor: 'black',\n  },\n  labelStyle: { marginLeft: 10 },\n});\n\nexport default CheckBox;\n"]}

package/lib/commonjs/components/CheckBox/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/CheckBox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/commonjs/{Modal.js → components/CustomModal/index.js}

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _colors = require("./styles/colors");
+var _colors = require("../../styles/colors");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -53,4 +53,4 @@ const styles = _reactNative.StyleSheet.create({
 
 var _default = CustomModal;
 exports.default = _default;
-//# sourceMappingURL=Modal.js.map
+//# sourceMappingURL=index.js.map

package/lib/commonjs/{Modal.js.map → components/CustomModal/index.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["Modal.tsx"],"names":["CustomModal","open","handleToggleModal","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,iBAFmB;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,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE,CACLK,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  handleToggleModal,\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={() => handleToggleModal()}\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"]}
+{"version":3,"sources":["index.tsx"],"names":["CustomModal","open","handleToggleModal","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,iBAFmB;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,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE,CACLK,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  handleToggleModal,\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={() => handleToggleModal()}\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/components/Dropdown/Dropdown.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _SelectedItemsView = _interopRequireDefault(require("./SelectedItemsView"));
+
+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,
+    handleToggleModal,
+    isMultiple,
+    selectedItem,
+    selectedItems,
+    labelStyle,
+    dropdownStyle,
+    dropdownContainerStyle,
+    selectedItemStyle,
+    multipleSelectedItemStyle,
+    dropdownErrorStyle,
+    dropdownErrorTextStyle,
+    dropdownHelperTextStyle,
+    primaryColor,
+    disabled
+  } = _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(_SelectedItemsView.default, {
+    placeholder: placeholder,
+    error: error,
+    getSelectedItemsLabel: getSelectedItemsLabel,
+    handleToggleModal: handleToggleModal,
+    isMultiple: isMultiple,
+    selectedItem: selectedItem,
+    selectedItems: selectedItems,
+    dropdownStyle: dropdownStyle,
+    selectedItemStyle: selectedItemStyle,
+    multipleSelectedItemStyle: multipleSelectedItemStyle,
+    dropdownErrorStyle: dropdownErrorStyle,
+    primaryColor: primaryColor,
+    disabled: disabled
+  }), error && error !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.error, dropdownErrorTextStyle]
+  }, error), helperText && helperText !== '' && !error && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.helper, dropdownHelperTextStyle]
+  }, helperText));
+};
+
+const styles = _reactNative.StyleSheet.create({
+  label: {
+    marginBottom: 16,
+    color: _colors.colors.gray,
+    ..._typography.typography.caption
+  },
+  inputFocusErrorState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: _colors.colors.red
+  },
+  error: {
+    color: _colors.colors.red,
+    marginTop: 8,
+    ..._typography.typography.caption
+  },
+  helper: {
+    marginTop: 8,
+    color: _colors.colors.primary,
+    ..._typography.typography.caption
+  },
+  dropdownInputContainer: {
+    marginBottom: 23,
+    width: '100%'
+  },
+  blackText: {
+    color: _colors.colors.black
+  }
+});
+
+var _default = Dropdown;
+exports.default = _default;
+//# sourceMappingURL=Dropdown.js.map

package/lib/commonjs/components/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"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","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","marginTop","primary","width","blackText","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport SelectedItemsView from './SelectedItemsView';\nimport { colors } from '../../styles/colors';\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      <SelectedItemsView\n        placeholder={placeholder}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        handleToggleModal={handleToggleModal}\n        isMultiple={isMultiple}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        dropdownStyle={dropdownStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        dropdownErrorStyle={dropdownErrorStyle}\n        primaryColor={primaryColor}\n        disabled={disabled}\n      />\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  error: { color: colors.red, marginTop: 8, ...typography.caption },\n  helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n  dropdownInputContainer: { marginBottom: 23, width: '100%' },\n  blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}

package/lib/commonjs/{DropdownList.js → components/Dropdown/DropdownList.js}

@@ -11,7 +11,7 @@ var _reactNative = require("react-native");
 
 var _DropdownListItem = _interopRequireDefault(require("./DropdownListItem"));
 
-var _colors = require("./styles/colors");
+var _colors = require("../../styles/colors");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,7 +25,10 @@ const DropdownList = _ref => {
     selectedItem,
     handleMultipleSelections,
     handleSingleSelection,
-    primaryColor
+    primaryColor,
+    checkboxSize,
+    checkboxStyle,
+    checkboxLabelStyle
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
     data: options,
@@ -43,7 +46,10 @@ const DropdownList = _ref => {
       isMultiple,
       selectedOption: isMultiple ? selectedItems : selectedItem,
       onChange: isMultiple ? handleMultipleSelections : handleSingleSelection,
-      primaryColor
+      primaryColor,
+      checkboxSize,
+      checkboxStyle,
+      checkboxLabelStyle
     }),
     keyExtractor: (_item, index) => `Options${index}`
   });
@@ -60,7 +66,10 @@ const _renderItem = (_ref2, props) => {
     isMultiple: props.isMultiple,
     selectedOption: props.selectedOption,
     onChange: props.onChange,
-    primaryColor: props.primaryColor
+    primaryColor: props.primaryColor,
+    checkboxSize: props.checkboxSize,
+    checkboxStyle: props.checkboxStyle,
+    checkboxLabelStyle: props.checkboxLabelStyle
   });
 };
 

package/lib/commonjs/components/Dropdown/DropdownList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","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":"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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  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\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          checkboxSize,\n          checkboxStyle,\n          checkboxLabelStyle,\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      checkboxSize={props.checkboxSize}\n      checkboxStyle={props.checkboxStyle}\n      checkboxLabelStyle={props.checkboxLabelStyle}\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 → components/Dropdown/DropdownListItem.js}

@@ -9,9 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _checkbox = _interopRequireDefault(require("@react-native-community/checkbox"));
+var _CheckBox = _interopRequireDefault(require("../CheckBox"));
 
-var _colors = require("./styles/colors");
+var _colors = require("../../styles/colors");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,34 +27,27 @@ const DropdownListItem = _ref => {
     isMultiple,
     selectedOption,
     onChange,
-    primaryColor
+    primaryColor,
+    checkboxSize,
+    checkboxStyle,
+    checkboxLabelStyle
   } = _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, {
+  }, /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
     value: isMultiple ? selectedOption.includes(item[selectedOptionValue]) : [selectedOption].includes(item[selectedOptionValue]),
+    label: item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : ''],
     onChange: () => onChange(item[selectedOptionValue]),
-    boxType: "circle" //works on ios only
-    ,
-    tintColors: {
-      true: primaryColor || _colors.colors.primary
-    } //android control
-    ,
-    onCheckColor: primaryColor || _colors.colors.primary //ios checkmark colour control
-    ,
-    onTintColor: primaryColor || _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'])));
+    primaryColor: primaryColor || _colors.colors.primary,
+    checkboxSize: checkboxSize,
+    checkboxStyle: checkboxStyle,
+    checkboxLabelStyle: checkboxLabelStyle
+  }));
 };
 
 const styles = _reactNative.StyleSheet.create({
-  spacing: {
-    marginRight: 10
-  },
   modalOptions: {
     paddingHorizontal: 20,
     paddingVertical: 10,

package/lib/commonjs/components/Dropdown/DropdownListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DropdownListItem.tsx"],"names":["DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","selectedOptionValue","styles","modalOptions","includes","colors","primary","StyleSheet","create","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,QAWd;AAAA,MAXe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA,QANwB;AAOxBC,IAAAA,YAPwB;AAQxBC,IAAAA,YARwB;AASxBC,IAAAA,aATwB;AAUxBC,IAAAA;AAVwB,GAWf;AACT,QAAMC,mBAAmB,GAAGR,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAES,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMP,QAAQ,CAACL,IAAI,CAACU,mBAAD,CAAL;AAFzB,kBAIE,6BAAC,iBAAD;AACE,IAAA,KAAK,EACHP,UAAU,GACNC,cAAc,CAACS,QAAf,CAAwBb,IAAI,CAACU,mBAAD,CAA5B,CADM,GAEN,CAACN,cAAD,EAAiBS,QAAjB,CAA0Bb,IAAI,CAACU,mBAAD,CAA9B,CAJR;AAME,IAAA,KAAK,EAAEV,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,EAAhB,CANb;AAOE,IAAA,QAAQ,EAAE,MAAMI,QAAQ,CAACL,IAAI,CAACU,mBAAD,CAAL,CAP1B;AAQE,IAAA,YAAY,EAAEJ,YAAY,IAAIQ,eAAOC,OARvC;AASE,IAAA,YAAY,EAAER,YAThB;AAUE,IAAA,aAAa,EAAEC,aAVjB;AAWE,IAAA,kBAAkB,EAAEC;AAXtB,IAJF,CADF;AAoBD,CAjCD;;AAmCA,MAAME,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,YAAY,EAAE;AACZM,IAAAA,iBAAiB,EAAE,EADP;AAEZC,IAAAA,eAAe,EAAE,EAFL;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,UAAU,EAAE;AAJA;AADiB,CAAlB,CAAf;;4BASe,iBAAKtB,gBAAL,C","sourcesContent":["import React, { memo } from 'react';\nimport { TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '../CheckBox';\nimport { colors } from '../../styles/colors';\n\nconst DropdownListItem = ({\n  item,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedOption,\n  onChange,\n  primaryColor,\n  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\n}: any) => {\n  const selectedOptionValue = optionValue ?? 'value';\n  return (\n    <TouchableOpacity\n      style={styles.modalOptions}\n      onPress={() => onChange(item[selectedOptionValue])}\n    >\n      <CheckBox\n        value={\n          isMultiple\n            ? selectedOption.includes(item[selectedOptionValue])\n            : [selectedOption].includes(item[selectedOptionValue])\n        }\n        label={item[optionLabel ?? '']}\n        onChange={() => onChange(item[selectedOptionValue])}\n        primaryColor={primaryColor || colors.primary}\n        checkboxSize={checkboxSize}\n        checkboxStyle={checkboxStyle}\n        checkboxLabelStyle={checkboxLabelStyle}\n      />\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\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/{Dropdown.js → components/Dropdown/SelectedItemsView.js}

@@ -9,41 +9,29 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _colors = require("./styles/colors");
+var _colors = require("../../styles/colors");
 
-var _input = require("./styles/input");
-
-var _typography = require("./styles/typography");
+var _input = require("../../styles/input");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Dropdown = _ref => {
+const SelectedItemsView = _ref => {
   let {
-    label,
     placeholder,
-    helperText,
     error,
     getSelectedItemsLabel,
     handleToggleModal,
     isMultiple,
     selectedItem,
     selectedItems,
-    labelStyle,
     dropdownStyle,
-    dropdownContainerStyle,
     selectedItemStyle,
     multipleSelectedItemStyle,
     dropdownErrorStyle,
-    dropdownErrorTextStyle,
-    dropdownHelperTextStyle,
     primaryColor,
     disabled
   } = _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, {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
     onPress: () => handleToggleModal(),
     style: _ref2 => {
       let {
@@ -51,7 +39,7 @@ const Dropdown = _ref => {
       } = _ref2;
       return [pressed && { ..._input.inputStyles.inputFocusState,
         borderColor: primaryColor
-      }, _input.inputStyles.input, dropdownStyle, error && //order matters
+      }, _input.inputStyles.input, dropdownStyle, error && //this must be last
       error !== '' && !pressed && { ..._input.inputStyles.inputFocusErrorState,
         ...dropdownErrorStyle
       }];
@@ -66,7 +54,7 @@ const Dropdown = _ref => {
     onStartShouldSetResponder: () => true
   }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     onPress: () => handleToggleModal(),
-    key: `SelectedItems${i}`,
+    key: `react-native-input-select-${Math.random()}-${i}`,
     disabled: disabled
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.selectedItems, {
@@ -82,44 +70,16 @@ const Dropdown = _ref => {
   }, 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, dropdownErrorTextStyle]
-  }, error), helperText && helperText !== '' && !error && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: [styles.helper, dropdownHelperTextStyle]
-  }, helperText));
+    source: require('../../asset/arrow-down.png')
+  })));
 };
 
 const styles = _reactNative.StyleSheet.create({
-  label: {
-    marginBottom: 16,
-    color: _colors.colors.gray,
-    ..._typography.typography.caption
-  },
-  inputFocusErrorState: {
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: _colors.colors.red
-  },
   iconStyle: {
     position: 'absolute',
     right: 25,
     top: 25
   },
-  error: {
-    color: _colors.colors.red,
-    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'
@@ -137,6 +97,6 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 
-var _default = Dropdown;
+var _default = SelectedItemsView;
 exports.default = _default;
-//# sourceMappingURL=Dropdown.js.map
+//# sourceMappingURL=SelectedItemsView.js.map

package/lib/commonjs/components/Dropdown/SelectedItemsView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SelectedItemsView.tsx"],"names":["SelectedItemsView","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","styles","selectedItemsContainer","map","item","i","Math","random","backgroundColor","blackText","length","iconStyle","require","StyleSheet","create","position","right","top","flexDirection","flexWrap","color","colors","white","paddingHorizontal","paddingVertical","borderRadius","primary","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';\n\nconst SelectedItemsView = ({\n  placeholder,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  dropdownStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  dropdownErrorStyle,\n  primaryColor,\n  disabled,\n}: any) => {\n  return (\n    <Pressable\n      onPress={() => handleToggleModal()}\n      style={({ pressed }) => [\n        pressed && {\n          ...inputStyles.inputFocusState,\n          borderColor: primaryColor,\n        },\n        inputStyles.input,\n        dropdownStyle,\n        error && //this must be last\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={`react-native-input-select-${Math.random()}-${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('../../asset/arrow-down.png')} />\n      </View>\n    </Pressable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\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 SelectedItemsView;\n"]}

package/lib/commonjs/{Input.js → components/Input/index.js}

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _input = require("./styles/input");
+var _input = require("../../styles/input");
 
 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); }
 
@@ -50,4 +50,4 @@ const styles = _reactNative.StyleSheet.create({
     margin: 23
   }
 });
-//# sourceMappingURL=Input.js.map
+//# sourceMappingURL=index.js.map

package/lib/commonjs/{Input.js.map → components/Input/index.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["Input.tsx"],"names":["Input","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","styles","container","inputStyles","input","inputFocusState","borderColor","StyleSheet","create","margin"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,KAAK,GAAG,QAOV;AAAA,MAPW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpBC,IAAAA,YALoB;AAMpB,OAAGC;AANiB,GAOX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwB,qBAAS,KAAT,CAA9B;AAEA,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACC;AAApB,kBACE,6BAAC,sBAAD;AACE,IAAA,WAAW,EAAET,WADf;AAEE,IAAA,KAAK,EAAE,CACLU,mBAAYC,KADP,EAELL,SAAS,IACPI,mBAAYE,eADd,IACiC;AAAEC,MAAAA,WAAW,EAAET;AAAf,KAH5B,EAILD,KAJK,CAFT;AAQE,IAAA,OAAO,EAAE,MAAM;AACbI,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAVH;AAWE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAXxB;AAYE,IAAA,KAAK,EAAEN,KAZT;AAaE,IAAA,YAAY,EAAEC;AAbhB,KAcMG,IAdN,EADF,CADF;AAoBD,CA9BM;;;;AAgCP,MAAMG,MAAM,GAAGM,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,SAAS,EAAE;AAAEO,IAAAA,MAAM,EAAE;AAAV;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useState } from 'react';\nimport { TextInput, StyleSheet, View } from 'react-native';\nimport { inputStyles } from './styles/input';\n\nexport const Input = ({\n  placeholder,\n  value,\n  onChangeText,\n  style,\n  primaryColor,\n  ...rest\n}: any) => {\n  const [isFocused, setFocus] = useState(false);\n\n  return (\n    <View style={styles.container}>\n      <TextInput\n        placeholder={placeholder}\n        style={[\n          inputStyles.input,\n          isFocused &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\n          style,\n        ]}\n        onFocus={() => {\n          setFocus(true);\n        }}\n        onBlur={() => setFocus(false)}\n        value={value}\n        onChangeText={onChangeText}\n        {...rest}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { margin: 23 },\n});\n"]}
+{"version":3,"sources":["index.tsx"],"names":["Input","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","styles","container","inputStyles","input","inputFocusState","borderColor","StyleSheet","create","margin"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,KAAK,GAAG,QAOV;AAAA,MAPW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpBC,IAAAA,YALoB;AAMpB,OAAGC;AANiB,GAOX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwB,qBAAS,KAAT,CAA9B;AAEA,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACC;AAApB,kBACE,6BAAC,sBAAD;AACE,IAAA,WAAW,EAAET,WADf;AAEE,IAAA,KAAK,EAAE,CACLU,mBAAYC,KADP,EAELL,SAAS,IACPI,mBAAYE,eADd,IACiC;AAAEC,MAAAA,WAAW,EAAET;AAAf,KAH5B,EAILD,KAJK,CAFT;AAQE,IAAA,OAAO,EAAE,MAAM;AACbI,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAVH;AAWE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAXxB;AAYE,IAAA,KAAK,EAAEN,KAZT;AAaE,IAAA,YAAY,EAAEC;AAbhB,KAcMG,IAdN,EADF,CADF;AAoBD,CA9BM;;;;AAgCP,MAAMG,MAAM,GAAGM,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,SAAS,EAAE;AAAEO,IAAAA,MAAM,EAAE;AAAV;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useState } from 'react';\nimport { TextInput, StyleSheet, View } from 'react-native';\nimport { inputStyles } from '../../styles/input';\n\nexport const Input = ({\n  placeholder,\n  value,\n  onChangeText,\n  style,\n  primaryColor,\n  ...rest\n}: any) => {\n  const [isFocused, setFocus] = useState(false);\n\n  return (\n    <View style={styles.container}>\n      <TextInput\n        placeholder={placeholder}\n        style={[\n          inputStyles.input,\n          isFocused &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\n          style,\n        ]}\n        onFocus={() => {\n          setFocus(true);\n        }}\n        onBlur={() => setFocus(false)}\n        value={value}\n        onChangeText={onChangeText}\n        {...rest}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { margin: 23 },\n});\n"]}

package/lib/commonjs/constants/index.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_OPTION_VALUE = exports.DEFAULT_OPTION_LABEL = void 0;
+exports.DEFAULT_OPTION_VALUE = exports.DEFAULT_OPTION_LABEL = exports.CHECKBOX_SIZE = void 0;
 const DEFAULT_OPTION_LABEL = 'label';
 exports.DEFAULT_OPTION_LABEL = DEFAULT_OPTION_LABEL;
 const DEFAULT_OPTION_VALUE = 'value';
 exports.DEFAULT_OPTION_VALUE = DEFAULT_OPTION_VALUE;
+const CHECKBOX_SIZE = 14;
+exports.CHECKBOX_SIZE = CHECKBOX_SIZE;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE"],"mappings":";;;;;;AAAO,MAAMA,oBAAoB,GAAG,OAA7B;;AACA,MAAMC,oBAAoB,GAAG,OAA7B","sourcesContent":["export const DEFAULT_OPTION_LABEL = 'label';\nexport const DEFAULT_OPTION_VALUE = 'value';\n"]}
+{"version":3,"sources":["index.ts"],"names":["DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","CHECKBOX_SIZE"],"mappings":";;;;;;AAAO,MAAMA,oBAAoB,GAAG,OAA7B;;AACA,MAAMC,oBAAoB,GAAG,OAA7B;;AACA,MAAMC,aAAa,GAAG,EAAtB","sourcesContent":["export const DEFAULT_OPTION_LABEL = 'label';\nexport const DEFAULT_OPTION_VALUE = 'value';\nexport const CHECKBOX_SIZE = 14;\n"]}