react-native-input-select 0.7.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +32 -28
  2. package/lib/commonjs/Dropdown.js +22 -9
  3. package/lib/commonjs/Dropdown.js.map +1 -1
  4. package/lib/commonjs/Input.js +4 -1
  5. package/lib/commonjs/Input.js.map +1 -1
  6. package/lib/commonjs/index.js +11 -7
  7. package/lib/commonjs/index.js.map +1 -1
  8. package/lib/commonjs/styles/input.js +6 -2
  9. package/lib/commonjs/styles/input.js.map +1 -1
  10. package/lib/commonjs/types/index.types.js +6 -0
  11. package/lib/commonjs/types/index.types.js.map +1 -0
  12. package/lib/module/Dropdown.js +23 -10
  13. package/lib/module/Dropdown.js.map +1 -1
  14. package/lib/module/Input.js +4 -1
  15. package/lib/module/Input.js.map +1 -1
  16. package/lib/module/index.js +11 -7
  17. package/lib/module/index.js.map +1 -1
  18. package/lib/module/styles/input.js +6 -2
  19. package/lib/module/styles/input.js.map +1 -1
  20. package/lib/module/types/index.types.js +2 -0
  21. package/lib/module/types/index.types.js.map +1 -0
  22. package/lib/typescript/Dropdown.d.ts +1 -1
  23. package/lib/typescript/Input.d.ts +1 -1
  24. package/lib/typescript/index.d.ts +2 -1
  25. package/lib/typescript/types/index.types.d.ts +24 -0
  26. package/package.json +2 -2
  27. package/src/Dropdown.tsx +39 -12
  28. package/src/Input.tsx +3 -1
  29. package/src/index.tsx +15 -8
  30. package/src/styles/input.ts +5 -1
  31. package/src/types/index.types.ts +25 -0
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
- # react-native-select
1
+ # react-native-input-select
2
2
 
3
- Dropdown package for react-native.
4
- Works perfectly on android and iOS.
3
+ A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.
5
4
 
6
5
  ## Installation
7
6
 
8
7
  ```sh
9
- npm install react-native-select
8
+ npm install react-native-input-select
9
+ yarn add react-native-input-select
10
10
  ```
11
11
 
12
12
  ## Demo
@@ -18,16 +18,14 @@ npm install react-native-select
18
18
  ## Usage
19
19
 
20
20
  ```js
21
- import * as React from 'react';
22
-
23
- import { StyleSheet, View } from 'react-native';
24
- import DropdownSelect from 'react-native-select';
21
+ import React from 'react';
22
+ import Dropdown from 'react-native-input-select';
25
23
 
26
24
  export default function App() {
27
25
  const [country, setCountry] = React.useState<number | undefined>();
28
26
 
29
27
  return (
30
- <DropdownSelect
28
+ <Dropdown
31
29
  label="Country"
32
30
  placeholder="Select an option..."
33
31
  options={[
@@ -53,25 +51,31 @@ export default function App() {
53
51
 
54
52
  ## Props
55
53
 
56
- | Proptypes | Datatype | Example |
57
- | ---------------------- | ------------------- | -------------------------------------------------------------------------- |
58
- | label | `string` | `Countries` |
59
- | placeholder | `string` | `Select a country` |
60
- | options | `Array` | `[{ name: 'Albania', code: 'AL' }, { name: 'Åland Islands', code: 'AX' }]` |
61
- | optionLabel | `string` | `name` |
62
- | optionValue | `string` | `code` |
63
- | selectedValue | `string` or `Array` | `AL` or `[AL, AX]` |
64
- | onValueChange | `function` | `()=>{}` |
65
- | isMultiple | `Boolean` | `true` |
66
- | isSearchable | `Boolean` | `true` |
67
- | labelStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
68
- | dropdownStyle | `Object` | `{backgroundColor: 'red', margin: 5, ...}` |
69
- | dropdownContainerStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
70
- | searchInputStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
71
- | selectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
72
- | modalBackgroundStyle | `Object` | `{backgroundColor: 'blue', ...}` |
73
- | modalOptionsContainer | `Object` | `{padding: 5}` |
74
- | primaryColor | `string` | `blue` |
54
+ | Proptypes | Datatype | Example |
55
+ | ------------------------- | ------------------- | -------------------------------------------------------------------------- |
56
+ | label | `string` | `Countries` |
57
+ | placeholder | `string` | `Select a country` |
58
+ | options | `Array` | `[{ name: 'Albania', code: 'AL' }, { name: 'Åland Islands', code: 'AX' }]` |
59
+ | optionLabel | `string` | `name` |
60
+ | optionValue | `string` | `code` |
61
+ | error | `string` | `This is a required field` |
62
+ | helperText | `string` | `Only countries in the east are listed` |
63
+ | selectedValue | `string` or `Array` | `AL` or `[AL, AX]` |
64
+ | onValueChange | `function` | `()=>{}` |
65
+ | isMultiple | `Boolean` | `true` |
66
+ | isSearchable | `Boolean` | `true` |
67
+ | labelStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
68
+ | dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` |
69
+ | dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` |
70
+ | searchInputStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
71
+ | selectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
72
+ | multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
73
+ | modalBackgroundStyle | `Object` | `{backgroundColor: 'blue', ...}` |
74
+ | modalOptionsContainer | `Object` | `{padding: 5}` |
75
+ | dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` |
76
+ | dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:500}` |
77
+ | dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:500}` |
78
+ | primaryColor | `string` | `blue` |
75
79
 
76
80
  ## Contributing
77
81
 
package/lib/commonjs/Dropdown.js CHANGED
@@ -32,7 +32,12 @@ const Dropdown = _ref => {
32
32
  dropdownStyle,
33
33
  dropdownContainerStyle,
34
34
  selectedItemStyle,
35
- primaryColor
35
+ multipleSelectedItemStyle,
36
+ dropdownErrorStyle,
37
+ dropdownErrorTextStyle,
38
+ dropdownHelperTextStyle,
39
+ primaryColor,
40
+ disabled
36
41
  } = _ref;
37
42
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
38
43
  style: [styles.dropdownInputContainer, dropdownContainerStyle]
@@ -44,8 +49,13 @@ const Dropdown = _ref => {
44
49
  let {
45
50
  pressed
46
51
  } = _ref2;
47
- return [pressed && _input.inputStyles.inputFocusState, _input.inputStyles.input, dropdownStyle];
48
- }
52
+ return [pressed && { ..._input.inputStyles.inputFocusState,
53
+ borderColor: primaryColor
54
+ }, _input.inputStyles.input, error && error !== '' && !pressed && { ..._input.inputStyles.inputFocusErrorState,
55
+ ...dropdownErrorStyle
56
+ }, dropdownStyle];
57
+ },
58
+ disabled: disabled
49
59
  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
50
60
  horizontal: true,
51
61
  alwaysBounceHorizontal: true,
@@ -53,13 +63,16 @@ const Dropdown = _ref => {
53
63
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
54
64
  style: styles.selectedItemsContainer,
55
65
  onStartShouldSetResponder: () => true
56
- }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
66
+ }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
67
+ onPress: () => handleToggleModal(),
57
68
  key: `SelectedItems${i}`,
69
+ disabled: disabled
70
+ }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
58
71
  style: [styles.selectedItems, {
59
72
  backgroundColor: primaryColor
60
- }, selectedItemStyle]
61
- }, item)) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
62
- style: styles.blackText
73
+ }, multipleSelectedItemStyle]
74
+ }, item))) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
75
+ style: [styles.blackText, selectedItemStyle]
63
76
  }, getSelectedItemsLabel())), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
64
77
  style: styles.blackText
65
78
  }, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -67,9 +80,9 @@ const Dropdown = _ref => {
67
80
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
68
81
  source: require('../src/asset/arrow-down.png')
69
82
  }))), error && error !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
70
- style: styles.error
83
+ style: [styles.error, dropdownErrorTextStyle]
71
84
  }, error), helperText && helperText !== '' && !error && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
72
- style: styles.helper
85
+ style: [styles.helper, dropdownHelperTextStyle]
73
86
  }, helperText));
74
87
  };
75
88
 
package/lib/commonjs/Dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","primaryColor","styles","dropdownInputContainer","pressed","inputStyles","inputFocusState","input","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n Pressable,\n ScrollView,\n StyleSheet,\n Image,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n label,\n placeholder,\n helperText,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n primaryColor,\n}: any) => {\n return (\n <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n {label && label !== '' && (\n <Text style={[styles.label, labelStyle]}>{label}</Text>\n )}\n <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && inputStyles.inputFocusState,\n inputStyles.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={[\n styles.selectedItems,\n { backgroundColor: primaryColor },\n selectedItemStyle,\n ]}\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 inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\n iconStyle: { position: 'absolute', right: 25, top: 25 },\n error: { color: colors.red, marginTop: 8, ...typography.caption },\n helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n dropdownInputContainer: { marginBottom: 23, width: '100%' },\n selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n selectedItems: {\n color: colors.white,\n paddingHorizontal: 10,\n paddingVertical: 5,\n borderRadius: 10,\n backgroundColor: colors.primary,\n marginRight: 10,\n },\n blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}
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","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","borderWidth","borderStyle","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n Pressable,\n ScrollView,\n StyleSheet,\n Image,\n TouchableOpacity,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n label,\n placeholder,\n helperText,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n primaryColor,\n disabled,\n}: any) => {\n return (\n <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n {label && label !== '' && (\n <Text style={[styles.label, labelStyle]}>{label}</Text>\n )}\n <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && {\n ...inputStyles.inputFocusState,\n borderColor: primaryColor,\n },\n inputStyles.input,\n error &&\n error !== '' &&\n !pressed && {\n ...inputStyles.inputFocusErrorState,\n ...dropdownErrorStyle,\n },\n dropdownStyle,\n ]}\n disabled={disabled}\n >\n <ScrollView\n horizontal\n alwaysBounceHorizontal\n showsHorizontalScrollIndicator={false}\n >\n <View\n style={styles.selectedItemsContainer}\n onStartShouldSetResponder={() => true}\n >\n {isMultiple ? (\n getSelectedItemsLabel().map((item: any, i: Number) => (\n <TouchableOpacity\n onPress={() => handleToggleModal()}\n key={`SelectedItems${i}`}\n disabled={disabled}\n >\n <Text\n style={[\n styles.selectedItems,\n { backgroundColor: primaryColor },\n multipleSelectedItemStyle,\n ]}\n >\n {item}\n </Text>\n </TouchableOpacity>\n ))\n ) : (\n <Text style={[styles.blackText, selectedItemStyle]}>\n {getSelectedItemsLabel()}\n </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 !== '' && (\n <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n )}\n\n {helperText && helperText !== '' && !error && (\n <Text style={[styles.helper, dropdownHelperTextStyle]}>\n {helperText}\n </Text>\n )}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\n iconStyle: { position: 'absolute', right: 25, top: 25 },\n error: { color: colors.red, marginTop: 8, ...typography.caption },\n helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n dropdownInputContainer: { marginBottom: 23, width: '100%' },\n selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n selectedItems: {\n color: colors.white,\n paddingHorizontal: 10,\n paddingVertical: 5,\n borderRadius: 10,\n backgroundColor: colors.primary,\n marginRight: 10,\n },\n blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}
package/lib/commonjs/Input.js CHANGED
@@ -23,6 +23,7 @@ const Input = _ref => {
23
23
  value,
24
24
  onChangeText,
25
25
  style,
26
+ primaryColor,
26
27
  ...rest
27
28
  } = _ref;
28
29
  const [isFocused, setFocus] = (0, _react.useState)(false);
@@ -30,7 +31,9 @@ const Input = _ref => {
30
31
  style: styles.container
31
32
  }, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
32
33
  placeholder: placeholder,
33
- style: [_input.inputStyles.input, isFocused && _input.inputStyles.inputFocusState, style],
34
+ style: [_input.inputStyles.input, isFocused && _input.inputStyles.inputFocusState && {
35
+ borderColor: primaryColor
36
+ }, style],
34
37
  onFocus: () => {
35
38
  setFocus(true);
36
39
  },
package/lib/commonjs/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Input.tsx"],"names":["Input","placeholder","value","onChangeText","style","rest","isFocused","setFocus","styles","container","inputStyles","input","inputFocusState","StyleSheet","create","margin"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,KAAK,GAAG,QAMV;AAAA,MANW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpB,OAAGC;AALiB,GAMX;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,EAAER,WADf;AAEE,IAAA,KAAK,EAAE,CACLS,mBAAYC,KADP,EAELL,SAAS,IAAII,mBAAYE,eAFpB,EAGLR,KAHK,CAFT;AAOE,IAAA,OAAO,EAAE,MAAM;AACbG,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KATH;AAUE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAVxB;AAWE,IAAA,KAAK,EAAEL,KAXT;AAYE,IAAA,YAAY,EAAEC;AAZhB,KAaME,IAbN,EADF,CADF;AAmBD,CA5BM;;;;AA8BP,MAAMG,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,SAAS,EAAE;AAAEM,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 ...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 && inputStyles.inputFocusState,\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"]}
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"]}
package/lib/commonjs/index.js CHANGED
@@ -40,10 +40,12 @@ const DropdownSelect = _ref => {
40
40
  dropdownStyle,
41
41
  dropdownContainerStyle,
42
42
  selectedItemStyle,
43
+ multipleSelectedItemStyle,
43
44
  modalBackgroundStyle,
44
45
  modalOptionsContainer,
45
46
  searchInputStyle,
46
- primaryColor
47
+ primaryColor,
48
+ disabled
47
49
  } = _ref;
48
50
  const [newOptions, setNewOptions] = (0, _react.useState)(options ? options : []);
49
51
  const [open, setOpen] = (0, _react.useState)(false);
@@ -104,11 +106,10 @@ const DropdownSelect = _ref => {
104
106
 
105
107
 
106
108
  const onSearch = value => {
109
+ console.log(value);
107
110
  setSearchValue(value);
108
- let searchTerm = value.toString().toLocaleLowerCase();
109
- const searchResults = options.filter(item => {
110
- return item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : _constants.DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : _constants.DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes();
111
- });
111
+ let searchTerm = value.toString().toLocaleLowerCase().trim();
112
+ const searchResults = options.filter(item => item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : _constants.DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : _constants.DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes());
112
113
  setNewOptions(searchResults);
113
114
  };
114
115
  /*===========================================
@@ -135,8 +136,10 @@ const DropdownSelect = _ref => {
135
136
  dropdownStyle: dropdownStyle,
136
137
  dropdownContainerStyle: dropdownContainerStyle,
137
138
  selectedItemStyle: selectedItemStyle,
139
+ multipleSelectedItemStyle: multipleSelectedItemStyle,
138
140
  isMultiple: isMultiple,
139
- primaryColor: primaryColor
141
+ primaryColor: primaryColor,
142
+ disabled: disabled
140
143
  }), /*#__PURE__*/_react.default.createElement(_Modal.default, {
141
144
  open: open,
142
145
  handleToggleModal: handleToggleModal,
@@ -146,7 +149,8 @@ const DropdownSelect = _ref => {
146
149
  }, isSearchable && /*#__PURE__*/_react.default.createElement(_Input.Input, {
147
150
  value: searchValue,
148
151
  onChangeText: text => onSearch(text),
149
- style: searchInputStyle
152
+ style: searchInputStyle,
153
+ primaryColor: primaryColor
150
154
  }), /*#__PURE__*/_react.default.createElement(_DropdownList.default, {
151
155
  options: newOptions,
152
156
  optionLabel: optionLabel,
package/lib/commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.tsx"],"names":["DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","DEFAULT_OPTION_VALUE","DEFAULT_OPTION_LABEL","onSearch","searchTerm","toString","toLocaleLowerCase","searchResults","toLowerCase","handleToggleModal","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport { Input } from './Input';\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 isSearchable,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n}: any) => {\n const [newOptions, setNewOptions] = useState(options ? options : []);\n const [open, setOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n const [selectedItems, setSelectedItems] = useState(\n Array.isArray(selectedValue)\n ? selectedValue\n : selectedValue === '' || selectedValue === undefined\n ? []\n : [selectedValue]\n ); //for multiple selection\n const [searchValue, setSearchValue] = useState('');\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) =>\n item[optionValue ?? DEFAULT_OPTION_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) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n );\n return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n };\n\n /*===========================================\n * Search\n *==========================================*/\n const onSearch = (value: string) => {\n setSearchValue(value);\n let searchTerm = value.toString().toLocaleLowerCase();\n const searchResults = options.filter((item: any) => {\n return (\n item[optionLabel ?? DEFAULT_OPTION_LABEL]\n .toString()\n .toLowerCase()\n .includes(searchTerm) ||\n item[optionValue ?? DEFAULT_OPTION_VALUE]\n .toString(searchTerm)\n .toLowerCase()\n .includes()\n );\n });\n\n setNewOptions(searchResults);\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\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 handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownStyle={dropdownStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n selectedItemStyle={selectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primaryColor}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\n modalBackgroundStyle={modalBackgroundStyle}\n modalOptionsContainer={modalOptionsContainer}\n onRequestClose={() => {}}\n >\n {isSearchable && (\n <Input\n value={searchValue}\n onChangeText={(text: string) => onSearch(text)}\n style={searchInputStyle}\n />\n )}\n <DropdownList\n options={newOptions}\n optionLabel={optionLabel}\n optionValue={optionValue}\n isMultiple={isMultiple}\n selectedItems={selectedItems}\n selectedItem={selectedItem}\n handleMultipleSelections={handleMultipleSelections}\n handleSingleSelection={handleSingleSelection}\n primaryColor={primaryColor}\n />\n </CustomModal>\n </>\n );\n};\n\nexport default DropdownSelect;\n"]}
1
+ {"version":3,"sources":["index.tsx"],"names":["DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","DEFAULT_OPTION_VALUE","DEFAULT_OPTION_LABEL","onSearch","console","log","searchTerm","toString","toLocaleLowerCase","trim","searchResults","toLowerCase","handleToggleModal","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\nimport { Input } from './Input';\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 isSearchable,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n disabled,\n}: DropdownProps) => {\n const [newOptions, setNewOptions] = useState(options ? options : []);\n const [open, setOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n const [selectedItems, setSelectedItems] = useState(\n Array.isArray(selectedValue)\n ? selectedValue\n : selectedValue === '' || selectedValue === undefined\n ? []\n : [selectedValue]\n ); //for multiple selection\n const [searchValue, setSearchValue] = useState('');\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: any) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === element\n )?.[optionLabel];\n selectedLabels.push(selectedItemLabel);\n });\n return selectedLabels;\n }\n\n let selectedItemLabel =\n options &&\n options.find(\n (item: any) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n );\n return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n };\n\n /*===========================================\n * Search\n *==========================================*/\n const onSearch = (value: string) => {\n console.log(value);\n setSearchValue(value);\n\n let searchTerm = value.toString().toLocaleLowerCase().trim();\n const searchResults = options.filter(\n (item: any) =>\n item[optionLabel ?? DEFAULT_OPTION_LABEL]\n .toString()\n .toLowerCase()\n .includes(searchTerm) ||\n item[optionValue ?? DEFAULT_OPTION_VALUE]\n .toString(searchTerm)\n .toLowerCase()\n .includes()\n );\n\n setNewOptions(searchResults);\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\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 handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownStyle={dropdownStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primaryColor}\n disabled={disabled}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\n modalBackgroundStyle={modalBackgroundStyle}\n modalOptionsContainer={modalOptionsContainer}\n onRequestClose={() => {}}\n >\n {isSearchable && (\n <Input\n value={searchValue}\n onChangeText={(text: string) => onSearch(text)}\n style={searchInputStyle}\n primaryColor={primaryColor}\n />\n )}\n <DropdownList\n options={newOptions}\n optionLabel={optionLabel}\n optionValue={optionValue}\n isMultiple={isMultiple}\n selectedItems={selectedItems}\n selectedItem={selectedItem}\n handleMultipleSelections={handleMultipleSelections}\n handleSingleSelection={handleSingleSelection}\n primaryColor={primaryColor}\n />\n </CustomModal>\n </>\n );\n};\n\nexport default DropdownSelect;\n"]}
package/lib/commonjs/styles/input.js CHANGED
@@ -21,11 +21,15 @@ const inputStyles = _reactNative.StyleSheet.create({
21
21
  width: '100%',
22
22
  minHeight: 64
23
23
  },
24
+ inputFocusErrorState: {
25
+ borderWidth: 2,
26
+ borderStyle: 'solid',
27
+ borderColor: _colors.colors.red
28
+ },
24
29
  inputFocusState: {
25
30
  borderWidth: 2,
26
31
  borderStyle: 'solid',
27
- borderColor: _colors.colors.primary,
28
- borderRadius: 8
32
+ borderColor: _colors.colors.primary
29
33
  }
30
34
  });
31
35
 
package/lib/commonjs/styles/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["input.ts"],"names":["inputStyles","StyleSheet","create","input","paddingVertical","paddingHorizontal","backgroundColor","colors","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusState","borderStyle","primary"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,MAAMA,WAAgB,GAAGC,wBAAWC,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEC,eAAOC,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAEH,eAAOI,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEN,eAAOI,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,eAAe,EAAE;AACfJ,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAEH,eAAOW,OAHL;AAIfT,IAAAA,YAAY,EAAE;AAJC;AAZ+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\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});\n"]}
1
+ {"version":3,"sources":["input.ts"],"names":["inputStyles","StyleSheet","create","input","paddingVertical","paddingHorizontal","backgroundColor","colors","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusErrorState","borderStyle","red","inputFocusState","primary"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,MAAMA,WAAgB,GAAGC,wBAAWC,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEC,eAAOC,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAEH,eAAOI,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEN,eAAOI,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,oBAAoB,EAAE;AACpBJ,IAAAA,WAAW,EAAE,CADO;AAEpBK,IAAAA,WAAW,EAAE,OAFO;AAGpBP,IAAAA,WAAW,EAAEH,eAAOW;AAHA,GAZ0B;AAiBhDC,EAAAA,eAAe,EAAE;AACfP,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAEH,eAAOa;AAHL;AAjB+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\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 inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\n inputFocusState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.primary,\n },\n});\n"]}
package/lib/commonjs/types/index.types.js ADDED
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=index.types.js.map
package/lib/commonjs/types/index.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
package/lib/module/Dropdown.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { View, Text, Pressable, ScrollView, StyleSheet, Image } from 'react-native';
2
+ import { View, Text, Pressable, ScrollView, StyleSheet, Image, TouchableOpacity } from 'react-native';
3
3
  import { colors } from './styles/colors';
4
4
  import { inputStyles } from './styles/input';
5
5
  import { typography } from './styles/typography';
@@ -19,7 +19,12 @@ const Dropdown = _ref => {
19
19
  dropdownStyle,
20
20
  dropdownContainerStyle,
21
21
  selectedItemStyle,
22
- primaryColor
22
+ multipleSelectedItemStyle,
23
+ dropdownErrorStyle,
24
+ dropdownErrorTextStyle,
25
+ dropdownHelperTextStyle,
26
+ primaryColor,
27
+ disabled
23
28
  } = _ref;
24
29
  return /*#__PURE__*/React.createElement(View, {
25
30
  style: [styles.dropdownInputContainer, dropdownContainerStyle]
@@ -31,8 +36,13 @@ const Dropdown = _ref => {
31
36
  let {
32
37
  pressed
33
38
  } = _ref2;
34
- return [pressed && inputStyles.inputFocusState, inputStyles.input, dropdownStyle];
35
- }
39
+ return [pressed && { ...inputStyles.inputFocusState,
40
+ borderColor: primaryColor
41
+ }, inputStyles.input, error && error !== '' && !pressed && { ...inputStyles.inputFocusErrorState,
42
+ ...dropdownErrorStyle
43
+ }, dropdownStyle];
44
+ },
45
+ disabled: disabled
36
46
  }, /*#__PURE__*/React.createElement(ScrollView, {
37
47
  horizontal: true,
38
48
  alwaysBounceHorizontal: true,
@@ -40,13 +50,16 @@ const Dropdown = _ref => {
40
50
  }, /*#__PURE__*/React.createElement(View, {
41
51
  style: styles.selectedItemsContainer,
42
52
  onStartShouldSetResponder: () => true
43
- }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/React.createElement(Text, {
53
+ }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/React.createElement(TouchableOpacity, {
54
+ onPress: () => handleToggleModal(),
44
55
  key: `SelectedItems${i}`,
56
+ disabled: disabled
57
+ }, /*#__PURE__*/React.createElement(Text, {
45
58
  style: [styles.selectedItems, {
46
59
  backgroundColor: primaryColor
47
- }, selectedItemStyle]
48
- }, item)) : /*#__PURE__*/React.createElement(Text, {
49
- style: styles.blackText
60
+ }, multipleSelectedItemStyle]
61
+ }, item))) : /*#__PURE__*/React.createElement(Text, {
62
+ style: [styles.blackText, selectedItemStyle]
50
63
  }, getSelectedItemsLabel())), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/React.createElement(Text, {
51
64
  style: styles.blackText
52
65
  }, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/React.createElement(View, {
@@ -54,9 +67,9 @@ const Dropdown = _ref => {
54
67
  }, /*#__PURE__*/React.createElement(Image, {
55
68
  source: require('../src/asset/arrow-down.png')
56
69
  }))), error && error !== '' && /*#__PURE__*/React.createElement(Text, {
57
- style: styles.error
70
+ style: [styles.error, dropdownErrorTextStyle]
58
71
  }, error), helperText && helperText !== '' && !error && /*#__PURE__*/React.createElement(Text, {
59
- style: styles.helper
72
+ style: [styles.helper, dropdownHelperTextStyle]
60
73
  }, helperText));
61
74
  };
62
75
 
package/lib/module/Dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","primaryColor","styles","dropdownInputContainer","pressed","inputFocusState","input","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n Pressable,\n ScrollView,\n StyleSheet,\n Image,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n label,\n placeholder,\n helperText,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n primaryColor,\n}: any) => {\n return (\n <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n {label && label !== '' && (\n <Text style={[styles.label, labelStyle]}>{label}</Text>\n )}\n <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && inputStyles.inputFocusState,\n inputStyles.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={[\n styles.selectedItems,\n { backgroundColor: primaryColor },\n selectedItemStyle,\n ]}\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 inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\n iconStyle: { position: 'absolute', right: 25, top: 25 },\n error: { color: colors.red, marginTop: 8, ...typography.caption },\n helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n dropdownInputContainer: { marginBottom: 23, width: '100%' },\n selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n selectedItems: {\n color: colors.white,\n paddingHorizontal: 10,\n paddingVertical: 5,\n borderRadius: 10,\n backgroundColor: colors.primary,\n marginRight: 10,\n },\n blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}
1
+ {"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","TouchableOpacity","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","pressed","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","borderWidth","borderStyle","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n Pressable,\n ScrollView,\n StyleSheet,\n Image,\n TouchableOpacity,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n label,\n placeholder,\n helperText,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n primaryColor,\n disabled,\n}: any) => {\n return (\n <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n {label && label !== '' && (\n <Text style={[styles.label, labelStyle]}>{label}</Text>\n )}\n <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && {\n ...inputStyles.inputFocusState,\n borderColor: primaryColor,\n },\n inputStyles.input,\n error &&\n error !== '' &&\n !pressed && {\n ...inputStyles.inputFocusErrorState,\n ...dropdownErrorStyle,\n },\n dropdownStyle,\n ]}\n disabled={disabled}\n >\n <ScrollView\n horizontal\n alwaysBounceHorizontal\n showsHorizontalScrollIndicator={false}\n >\n <View\n style={styles.selectedItemsContainer}\n onStartShouldSetResponder={() => true}\n >\n {isMultiple ? (\n getSelectedItemsLabel().map((item: any, i: Number) => (\n <TouchableOpacity\n onPress={() => handleToggleModal()}\n key={`SelectedItems${i}`}\n disabled={disabled}\n >\n <Text\n style={[\n styles.selectedItems,\n { backgroundColor: primaryColor },\n multipleSelectedItemStyle,\n ]}\n >\n {item}\n </Text>\n </TouchableOpacity>\n ))\n ) : (\n <Text style={[styles.blackText, selectedItemStyle]}>\n {getSelectedItemsLabel()}\n </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 !== '' && (\n <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n )}\n\n {helperText && helperText !== '' && !error && (\n <Text style={[styles.helper, dropdownHelperTextStyle]}>\n {helperText}\n </Text>\n )}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\n iconStyle: { position: 'absolute', right: 25, top: 25 },\n error: { color: colors.red, marginTop: 8, ...typography.caption },\n helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n dropdownInputContainer: { marginBottom: 23, width: '100%' },\n selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n selectedItems: {\n color: colors.white,\n paddingHorizontal: 10,\n paddingVertical: 5,\n borderRadius: 10,\n backgroundColor: colors.primary,\n marginRight: 10,\n },\n blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}
package/lib/module/Input.js CHANGED
@@ -9,6 +9,7 @@ export const Input = _ref => {
9
9
  value,
10
10
  onChangeText,
11
11
  style,
12
+ primaryColor,
12
13
  ...rest
13
14
  } = _ref;
14
15
  const [isFocused, setFocus] = useState(false);
@@ -16,7 +17,9 @@ export const Input = _ref => {
16
17
  style: styles.container
17
18
  }, /*#__PURE__*/React.createElement(TextInput, _extends({
18
19
  placeholder: placeholder,
19
- style: [inputStyles.input, isFocused && inputStyles.inputFocusState, style],
20
+ style: [inputStyles.input, isFocused && inputStyles.inputFocusState && {
21
+ borderColor: primaryColor
22
+ }, style],
20
23
  onFocus: () => {
21
24
  setFocus(true);
22
25
  },
package/lib/module/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Input.tsx"],"names":["React","useState","TextInput","StyleSheet","View","inputStyles","Input","placeholder","value","onChangeText","style","rest","isFocused","setFocus","styles","container","input","inputFocusState","create","margin"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,IAAhC,QAA4C,cAA5C;AACA,SAASC,WAAT,QAA4B,gBAA5B;AAEA,OAAO,MAAMC,KAAK,GAAG,QAMV;AAAA,MANW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpB,OAAGC;AALiB,GAMX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwBZ,QAAQ,CAAC,KAAD,CAAtC;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEa,MAAM,CAACC;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAER,WADf;AAEE,IAAA,KAAK,EAAE,CACLF,WAAW,CAACW,KADP,EAELJ,SAAS,IAAIP,WAAW,CAACY,eAFpB,EAGLP,KAHK,CAFT;AAOE,IAAA,OAAO,EAAE,MAAM;AACbG,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KATH;AAUE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAVxB;AAWE,IAAA,KAAK,EAAEL,KAXT;AAYE,IAAA,YAAY,EAAEC;AAZhB,KAaME,IAbN,EADF,CADF;AAmBD,CA5BM;AA8BP,MAAMG,MAAM,GAAGX,UAAU,CAACe,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE;AAAEI,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 ...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 && inputStyles.inputFocusState,\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"]}
1
+ {"version":3,"sources":["Input.tsx"],"names":["React","useState","TextInput","StyleSheet","View","inputStyles","Input","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","styles","container","input","inputFocusState","borderColor","create","margin"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,IAAhC,QAA4C,cAA5C;AACA,SAASC,WAAT,QAA4B,gBAA5B;AAEA,OAAO,MAAMC,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,IAAwBb,QAAQ,CAAC,KAAD,CAAtC;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEc,MAAM,CAACC;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAET,WADf;AAEE,IAAA,KAAK,EAAE,CACLF,WAAW,CAACY,KADP,EAELJ,SAAS,IACPR,WAAW,CAACa,eADd,IACiC;AAAEC,MAAAA,WAAW,EAAER;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,GAAGZ,UAAU,CAACiB,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AAAEK,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/module/index.js CHANGED
@@ -21,10 +21,12 @@ export const DropdownSelect = _ref => {
21
21
  dropdownStyle,
22
22
  dropdownContainerStyle,
23
23
  selectedItemStyle,
24
+ multipleSelectedItemStyle,
24
25
  modalBackgroundStyle,
25
26
  modalOptionsContainer,
26
27
  searchInputStyle,
27
- primaryColor
28
+ primaryColor,
29
+ disabled
28
30
  } = _ref;
29
31
  const [newOptions, setNewOptions] = useState(options ? options : []);
30
32
  const [open, setOpen] = useState(false);
@@ -85,11 +87,10 @@ export const DropdownSelect = _ref => {
85
87
 
86
88
 
87
89
  const onSearch = value => {
90
+ console.log(value);
88
91
  setSearchValue(value);
89
- let searchTerm = value.toString().toLocaleLowerCase();
90
- const searchResults = options.filter(item => {
91
- return item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes();
92
- });
92
+ let searchTerm = value.toString().toLocaleLowerCase().trim();
93
+ const searchResults = options.filter(item => item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes());
93
94
  setNewOptions(searchResults);
94
95
  };
95
96
  /*===========================================
@@ -116,8 +117,10 @@ export const DropdownSelect = _ref => {
116
117
  dropdownStyle: dropdownStyle,
117
118
  dropdownContainerStyle: dropdownContainerStyle,
118
119
  selectedItemStyle: selectedItemStyle,
120
+ multipleSelectedItemStyle: multipleSelectedItemStyle,
119
121
  isMultiple: isMultiple,
120
- primaryColor: primaryColor
122
+ primaryColor: primaryColor,
123
+ disabled: disabled
121
124
  }), /*#__PURE__*/React.createElement(CustomModal, {
122
125
  open: open,
123
126
  handleToggleModal: handleToggleModal,
@@ -127,7 +130,8 @@ export const DropdownSelect = _ref => {
127
130
  }, isSearchable && /*#__PURE__*/React.createElement(Input, {
128
131
  value: searchValue,
129
132
  onChangeText: text => onSearch(text),
130
- style: searchInputStyle
133
+ style: searchInputStyle,
134
+ primaryColor: primaryColor
131
135
  }), /*#__PURE__*/React.createElement(DropdownList, {
132
136
  options: newOptions,
133
137
  optionLabel: optionLabel,
package/lib/module/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","onSearch","searchTerm","toString","toLocaleLowerCase","searchResults","toLowerCase","handleToggleModal","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport { Input } from './Input';\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 isSearchable,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n}: any) => {\n const [newOptions, setNewOptions] = useState(options ? options : []);\n const [open, setOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n const [selectedItems, setSelectedItems] = useState(\n Array.isArray(selectedValue)\n ? selectedValue\n : selectedValue === '' || selectedValue === undefined\n ? []\n : [selectedValue]\n ); //for multiple selection\n const [searchValue, setSearchValue] = useState('');\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) =>\n item[optionValue ?? DEFAULT_OPTION_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) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n );\n return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n };\n\n /*===========================================\n * Search\n *==========================================*/\n const onSearch = (value: string) => {\n setSearchValue(value);\n let searchTerm = value.toString().toLocaleLowerCase();\n const searchResults = options.filter((item: any) => {\n return (\n item[optionLabel ?? DEFAULT_OPTION_LABEL]\n .toString()\n .toLowerCase()\n .includes(searchTerm) ||\n item[optionValue ?? DEFAULT_OPTION_VALUE]\n .toString(searchTerm)\n .toLowerCase()\n .includes()\n );\n });\n\n setNewOptions(searchResults);\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\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 handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownStyle={dropdownStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n selectedItemStyle={selectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primaryColor}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\n modalBackgroundStyle={modalBackgroundStyle}\n modalOptionsContainer={modalOptionsContainer}\n onRequestClose={() => {}}\n >\n {isSearchable && (\n <Input\n value={searchValue}\n onChangeText={(text: string) => onSearch(text)}\n style={searchInputStyle}\n />\n )}\n <DropdownList\n options={newOptions}\n optionLabel={optionLabel}\n optionValue={optionValue}\n isMultiple={isMultiple}\n selectedItems={selectedItems}\n selectedItem={selectedItem}\n handleMultipleSelections={handleMultipleSelections}\n handleSingleSelection={handleSingleSelection}\n primaryColor={primaryColor}\n />\n </CustomModal>\n </>\n );\n};\n\nexport default DropdownSelect;\n"]}
1
+ {"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","onSearch","console","log","searchTerm","toString","toLocaleLowerCase","trim","searchResults","toLowerCase","handleToggleModal","text"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,SAAxB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,SAASC,oBAAT,EAA+BC,oBAA/B,QAA2D,aAA3D;AAEA,SAASC,KAAT,QAAsB,SAAtB;AAEA,OAAO,MAAMC,cAAc,GAAG,QAsBT;AAAA,MAtBU;AAC7BC,IAAAA,WAD6B;AAE7BC,IAAAA,KAF6B;AAG7BC,IAAAA,KAH6B;AAI7BC,IAAAA,UAJ6B;AAK7BC,IAAAA,OAL6B;AAM7BC,IAAAA,WAN6B;AAO7BC,IAAAA,WAP6B;AAQ7BC,IAAAA,aAR6B;AAS7BC,IAAAA,aAT6B;AAU7BC,IAAAA,UAV6B;AAW7BC,IAAAA,YAX6B;AAY7BC,IAAAA,UAZ6B;AAa7BC,IAAAA,aAb6B;AAc7BC,IAAAA,sBAd6B;AAe7BC,IAAAA,iBAf6B;AAgB7BC,IAAAA,yBAhB6B;AAiB7BC,IAAAA,oBAjB6B;AAkB7BC,IAAAA,qBAlB6B;AAmB7BC,IAAAA,gBAnB6B;AAoB7BC,IAAAA,YApB6B;AAqB7BC,IAAAA;AArB6B,GAsBV;AACnB,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAACY,OAAO,GAAGA,OAAH,GAAa,EAArB,CAA5C;AACA,QAAM,CAACmB,IAAD,EAAOC,OAAP,IAAkBhC,QAAQ,CAAC,KAAD,CAAhC;AACA,QAAM,CAACiC,YAAD,EAAeC,eAAf,IAAkClC,QAAQ,CAACgB,aAAD,CAAhD,CAHmB,CAG8C;;AACjE,QAAM,CAACmB,aAAD,EAAgBC,gBAAhB,IAAoCpC,QAAQ,CAChDqC,KAAK,CAACC,OAAN,CAActB,aAAd,IACIA,aADJ,GAEIA,aAAa,KAAK,EAAlB,IAAwBA,aAAa,KAAKuB,SAA1C,GACA,EADA,GAEA,CAACvB,aAAD,CAL4C,CAAlD,CAJmB,CAUhB;;AACH,QAAM,CAACwB,WAAD,EAAcC,cAAd,IAAgCzC,QAAQ,CAAC,EAAD,CAA9C;AAEA;AACF;AACA;;AACE,QAAM0C,qBAAqB,GAAIC,KAAD,IAAgB;AAC5C,QAAIV,YAAY,KAAKU,KAArB,EAA4B;AAC1BT,MAAAA,eAAe,CAAC,IAAD,CAAf;AACD,KAFD,MAEO;AACLA,MAAAA,eAAe,CAACS,KAAD,CAAf;AACA5B,MAAAA,aAAa,CAAC4B,KAAD,CAAb,CAFK,CAEiB;;AACtBX,MAAAA,OAAO,CAAC,KAAD,CAAP,CAHK,CAGW;AACjB;AACF,GARD;;AAUA,QAAMY,wBAAwB,GAAID,KAAD,IAAgB;AAC/C,QAAIE,cAAc,GAAG,CAAC,GAAGV,aAAJ,CAArB;;AAEA,QAAIU,cAAc,CAACC,QAAf,CAAwBH,KAAxB,CAAJ,EAAoC;AAClCE,MAAAA,cAAc,GAAGA,cAAc,CAACE,MAAf,CAAuBC,IAAD,IAAUA,IAAI,KAAKL,KAAzC,CAAjB;AACD,KAFD,MAEO;AACLE,MAAAA,cAAc,CAACI,IAAf,CAAoBN,KAApB;AACD;;AACDP,IAAAA,gBAAgB,CAACS,cAAD,CAAhB;AACD,GATD;AAWA;AACF;AACA;;;AACE,QAAMK,qBAAqB,GAAG,MAAM;AAClC,QAAIjC,UAAJ,EAAgB;AACd,UAAIkC,cAA6B,GAAG,EAApC;AACAhB,MAAAA,aAAa,IACXA,aAAa,CAACiB,OAAd,CAAuBC,OAAD,IAAa;AAAA;;AACjC,YAAIC,iBAAiB,GACnB1C,OAAO,sBACPA,OAAO,CAAC2C,IAAR,CACGP,IAAD,IACEA,IAAI,CAAClC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,KAA8CgD,OAFlD,CADO,kDACP,cAGIxC,WAHJ,CADO,CADT;AAMAsC,QAAAA,cAAc,CAACF,IAAf,CAAoBK,iBAApB;AACD,OARD,CADF;AAUA,aAAOH,cAAP;AACD;;AAED,QAAIG,iBAAiB,GACnB1C,OAAO,IACPA,OAAO,CAAC2C,IAAR,CACGP,IAAD,IACEA,IAAI,CAAClC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,KAA8C4B,YAFlD,CAFF;AAMA,WAAOqB,iBAAP,aAAOA,iBAAP,uBAAOA,iBAAiB,CAAGzC,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkBT,oBAAlB,CAAxB;AACD,GAvBD;AAyBA;AACF;AACA;;;AACE,QAAMoD,QAAQ,GAAIb,KAAD,IAAmB;AAClCc,IAAAA,OAAO,CAACC,GAAR,CAAYf,KAAZ;AACAF,IAAAA,cAAc,CAACE,KAAD,CAAd;AAEA,QAAIgB,UAAU,GAAGhB,KAAK,CAACiB,QAAN,GAAiBC,iBAAjB,GAAqCC,IAArC,EAAjB;AACA,UAAMC,aAAa,GAAGnD,OAAO,CAACmC,MAAR,CACnBC,IAAD,IACEA,IAAI,CAACnC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,CACGwD,QADH,GAEGI,WAFH,GAGGlB,QAHH,CAGYa,UAHZ,KAIAX,IAAI,CAAClC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,CACGuD,QADH,CACYD,UADZ,EAEGK,WAFH,GAGGlB,QAHH,EANkB,CAAtB;AAYAhB,IAAAA,aAAa,CAACiC,aAAD,CAAb;AACD,GAlBD;AAoBA;AACF;AACA;;;AACE,QAAME,iBAAiB,GAAG,MAAM;AAC9BjC,IAAAA,OAAO,CAAC,CAACD,IAAF,CAAP;AACAU,IAAAA,cAAc,CAAC,EAAD,CAAd;AACAX,IAAAA,aAAa,CAAClB,OAAD,CAAb;AACD,GAJD;;AAMA,sBACE,uDACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAEH,KADT;AAEE,IAAA,WAAW,EAAED,WAFf;AAGE,IAAA,UAAU,EAAEG,UAHd;AAIE,IAAA,KAAK,EAAED,KAJT;AAKE,IAAA,qBAAqB,EAAEwC,qBALzB;AAME,IAAA,YAAY,EAAEjB,YANhB;AAOE,IAAA,aAAa,EAAEE,aAPjB;AAQE,IAAA,iBAAiB,EAAE8B,iBARrB;AASE,IAAA,UAAU,EAAE9C,UATd;AAUE,IAAA,aAAa,EAAEC,aAVjB;AAWE,IAAA,sBAAsB,EAAEC,sBAX1B;AAYE,IAAA,iBAAiB,EAAEC,iBAZrB;AAaE,IAAA,yBAAyB,EAAEC,yBAb7B;AAcE,IAAA,UAAU,EAAEN,UAdd;AAeE,IAAA,YAAY,EAAEU,YAfhB;AAgBE,IAAA,QAAQ,EAAEC;AAhBZ,IADF,eAmBE,oBAAC,WAAD;AACE,IAAA,IAAI,EAAEG,IADR;AAEE,IAAA,iBAAiB,EAAEkC,iBAFrB;AAGE,IAAA,oBAAoB,EAAEzC,oBAHxB;AAIE,IAAA,qBAAqB,EAAEC,qBAJzB;AAKE,IAAA,cAAc,EAAE,MAAM,CAAE;AAL1B,KAOGP,YAAY,iBACX,oBAAC,KAAD;AACE,IAAA,KAAK,EAAEsB,WADT;AAEE,IAAA,YAAY,EAAG0B,IAAD,IAAkBV,QAAQ,CAACU,IAAD,CAF1C;AAGE,IAAA,KAAK,EAAExC,gBAHT;AAIE,IAAA,YAAY,EAAEC;AAJhB,IARJ,eAeE,oBAAC,YAAD;AACE,IAAA,OAAO,EAAEE,UADX;AAEE,IAAA,WAAW,EAAEhB,WAFf;AAGE,IAAA,WAAW,EAAEC,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,aAAa,EAAEkB,aALjB;AAME,IAAA,YAAY,EAAEF,YANhB;AAOE,IAAA,wBAAwB,EAAEW,wBAP5B;AAQE,IAAA,qBAAqB,EAAEF,qBARzB;AASE,IAAA,YAAY,EAAEf;AAThB,IAfF,CAnBF,CADF;AAiDD,CAxKM;AA0KP,eAAepB,cAAf","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\nimport { Input } from './Input';\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 isSearchable,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n disabled,\n}: DropdownProps) => {\n const [newOptions, setNewOptions] = useState(options ? options : []);\n const [open, setOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n const [selectedItems, setSelectedItems] = useState(\n Array.isArray(selectedValue)\n ? selectedValue\n : selectedValue === '' || selectedValue === undefined\n ? []\n : [selectedValue]\n ); //for multiple selection\n const [searchValue, setSearchValue] = useState('');\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: any) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === element\n )?.[optionLabel];\n selectedLabels.push(selectedItemLabel);\n });\n return selectedLabels;\n }\n\n let selectedItemLabel =\n options &&\n options.find(\n (item: any) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n );\n return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n };\n\n /*===========================================\n * Search\n *==========================================*/\n const onSearch = (value: string) => {\n console.log(value);\n setSearchValue(value);\n\n let searchTerm = value.toString().toLocaleLowerCase().trim();\n const searchResults = options.filter(\n (item: any) =>\n item[optionLabel ?? DEFAULT_OPTION_LABEL]\n .toString()\n .toLowerCase()\n .includes(searchTerm) ||\n item[optionValue ?? DEFAULT_OPTION_VALUE]\n .toString(searchTerm)\n .toLowerCase()\n .includes()\n );\n\n setNewOptions(searchResults);\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\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 handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownStyle={dropdownStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primaryColor}\n disabled={disabled}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\n modalBackgroundStyle={modalBackgroundStyle}\n modalOptionsContainer={modalOptionsContainer}\n onRequestClose={() => {}}\n >\n {isSearchable && (\n <Input\n value={searchValue}\n onChangeText={(text: string) => onSearch(text)}\n style={searchInputStyle}\n primaryColor={primaryColor}\n />\n )}\n <DropdownList\n options={newOptions}\n optionLabel={optionLabel}\n optionValue={optionValue}\n isMultiple={isMultiple}\n selectedItems={selectedItems}\n selectedItem={selectedItem}\n handleMultipleSelections={handleMultipleSelections}\n handleSingleSelection={handleSingleSelection}\n primaryColor={primaryColor}\n />\n </CustomModal>\n </>\n );\n};\n\nexport default DropdownSelect;\n"]}
package/lib/module/styles/input.js CHANGED
@@ -12,11 +12,15 @@ export const inputStyles = StyleSheet.create({
12
12
  width: '100%',
13
13
  minHeight: 64
14
14
  },
15
+ inputFocusErrorState: {
16
+ borderWidth: 2,
17
+ borderStyle: 'solid',
18
+ borderColor: colors.red
19
+ },
15
20
  inputFocusState: {
16
21
  borderWidth: 2,
17
22
  borderStyle: 'solid',
18
- borderColor: colors.primary,
19
- borderRadius: 8
23
+ borderColor: colors.primary
20
24
  }
21
25
  });
22
26
  //# sourceMappingURL=input.js.map
package/lib/module/styles/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["input.ts"],"names":["StyleSheet","colors","inputStyles","create","input","paddingVertical","paddingHorizontal","backgroundColor","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusState","borderStyle","primary"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;AAEA,OAAO,MAAMC,WAAgB,GAAGF,UAAU,CAACG,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEN,MAAM,CAACO,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAET,MAAM,CAACU,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEZ,MAAM,CAACU,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,eAAe,EAAE;AACfJ,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAET,MAAM,CAACiB,OAHL;AAIfT,IAAAA,YAAY,EAAE;AAJC;AAZ+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\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});\n"]}
1
+ {"version":3,"sources":["input.ts"],"names":["StyleSheet","colors","inputStyles","create","input","paddingVertical","paddingHorizontal","backgroundColor","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusErrorState","borderStyle","red","inputFocusState","primary"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;AAEA,OAAO,MAAMC,WAAgB,GAAGF,UAAU,CAACG,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEN,MAAM,CAACO,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAET,MAAM,CAACU,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEZ,MAAM,CAACU,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,oBAAoB,EAAE;AACpBJ,IAAAA,WAAW,EAAE,CADO;AAEpBK,IAAAA,WAAW,EAAE,OAFO;AAGpBP,IAAAA,WAAW,EAAET,MAAM,CAACiB;AAHA,GAZ0B;AAiBhDC,EAAAA,eAAe,EAAE;AACfP,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAET,MAAM,CAACmB;AAHL;AAjB+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\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 inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\n inputFocusState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.primary,\n },\n});\n"]}
package/lib/module/types/index.types.js ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=index.types.js.map
package/lib/module/types/index.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
package/lib/typescript/Dropdown.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, primaryColor, }: any) => JSX.Element;
1
+ declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, dropdownErrorStyle, dropdownErrorTextStyle, dropdownHelperTextStyle, primaryColor, disabled, }: any) => JSX.Element;
2
2
  export default Dropdown;
package/lib/typescript/Input.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const Input: ({ placeholder, value, onChangeText, style, ...rest }: any) => JSX.Element;
1
+ export declare const Input: ({ placeholder, value, onChangeText, style, primaryColor, ...rest }: any) => JSX.Element;
package/lib/typescript/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, isSearchable, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, }: any) => JSX.Element;
1
+ import type { DropdownProps } from './types/index.types';
2
+ export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, isSearchable, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, disabled, }: DropdownProps) => JSX.Element;
2
3
  export default DropdownSelect;
package/lib/typescript/types/index.types.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import type { CSSProperties } from 'react';
2
+ export declare type DropdownProps = {
3
+ placeholder: string;
4
+ label: string;
5
+ error: string;
6
+ helperText: string;
7
+ options: any[];
8
+ optionLabel: string;
9
+ optionValue: string;
10
+ onValueChange: Function;
11
+ selectedValue: string | any[] | null;
12
+ isMultiple: boolean;
13
+ isSearchable: boolean;
14
+ labelStyle: string;
15
+ dropdownStyle: CSSProperties;
16
+ dropdownContainerStyle: CSSProperties;
17
+ selectedItemStyle: CSSProperties;
18
+ multipleSelectedItemStyle: CSSProperties;
19
+ modalBackgroundStyle: CSSProperties;
20
+ modalOptionsContainer: CSSProperties;
21
+ searchInputStyle: CSSProperties;
22
+ primaryColor: string;
23
+ disabled: boolean;
24
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-native-input-select",
3
- "version": "0.7.0",
4
- "description": "Dropdown package for react-native",
3
+ "version": "0.11.0",
4
+ "description": "A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
7
7
  "types": "lib/typescript/index.d.ts",
package/src/Dropdown.tsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  ScrollView,
7
7
  StyleSheet,
8
8
  Image,
9
+ TouchableOpacity,
9
10
  } from 'react-native';
10
11
  import { colors } from './styles/colors';
11
12
  import { inputStyles } from './styles/input';
@@ -25,7 +26,12 @@ const Dropdown = ({
25
26
  dropdownStyle,
26
27
  dropdownContainerStyle,
27
28
  selectedItemStyle,
29
+ multipleSelectedItemStyle,
30
+ dropdownErrorStyle,
31
+ dropdownErrorTextStyle,
32
+ dropdownHelperTextStyle,
28
33
  primaryColor,
34
+ disabled,
29
35
  }: any) => {
30
36
  return (
31
37
  <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
@@ -35,10 +41,20 @@ const Dropdown = ({
35
41
  <Pressable
36
42
  onPress={() => handleToggleModal()}
37
43
  style={({ pressed }) => [
38
- pressed && inputStyles.inputFocusState,
44
+ pressed && {
45
+ ...inputStyles.inputFocusState,
46
+ borderColor: primaryColor,
47
+ },
39
48
  inputStyles.input,
49
+ error &&
50
+ error !== '' &&
51
+ !pressed && {
52
+ ...inputStyles.inputFocusErrorState,
53
+ ...dropdownErrorStyle,
54
+ },
40
55
  dropdownStyle,
41
56
  ]}
57
+ disabled={disabled}
42
58
  >
43
59
  <ScrollView
44
60
  horizontal
@@ -51,19 +67,26 @@ const Dropdown = ({
51
67
  >
52
68
  {isMultiple ? (
53
69
  getSelectedItemsLabel().map((item: any, i: Number) => (
54
- <Text
70
+ <TouchableOpacity
71
+ onPress={() => handleToggleModal()}
55
72
  key={`SelectedItems${i}`}
56
- style={[
57
- styles.selectedItems,
58
- { backgroundColor: primaryColor },
59
- selectedItemStyle,
60
- ]}
73
+ disabled={disabled}
61
74
  >
62
- {item}
63
- </Text>
75
+ <Text
76
+ style={[
77
+ styles.selectedItems,
78
+ { backgroundColor: primaryColor },
79
+ multipleSelectedItemStyle,
80
+ ]}
81
+ >
82
+ {item}
83
+ </Text>
84
+ </TouchableOpacity>
64
85
  ))
65
86
  ) : (
66
- <Text style={styles.blackText}>{getSelectedItemsLabel()}</Text>
87
+ <Text style={[styles.blackText, selectedItemStyle]}>
88
+ {getSelectedItemsLabel()}
89
+ </Text>
67
90
  )}
68
91
  </View>
69
92
 
@@ -78,10 +101,14 @@ const Dropdown = ({
78
101
  </View>
79
102
  </Pressable>
80
103
 
81
- {error && error !== '' && <Text style={styles.error}>{error}</Text>}
104
+ {error && error !== '' && (
105
+ <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>
106
+ )}
82
107
 
83
108
  {helperText && helperText !== '' && !error && (
84
- <Text style={styles.helper}>{helperText}</Text>
109
+ <Text style={[styles.helper, dropdownHelperTextStyle]}>
110
+ {helperText}
111
+ </Text>
85
112
  )}
86
113
  </View>
87
114
  );
package/src/Input.tsx CHANGED
@@ -7,6 +7,7 @@ export const Input = ({
7
7
  value,
8
8
  onChangeText,
9
9
  style,
10
+ primaryColor,
10
11
  ...rest
11
12
  }: any) => {
12
13
  const [isFocused, setFocus] = useState(false);
@@ -17,7 +18,8 @@ export const Input = ({
17
18
  placeholder={placeholder}
18
19
  style={[
19
20
  inputStyles.input,
20
- isFocused && inputStyles.inputFocusState,
21
+ isFocused &&
22
+ inputStyles.inputFocusState && { borderColor: primaryColor },
21
23
  style,
22
24
  ]}
23
25
  onFocus={() => {
package/src/index.tsx CHANGED
@@ -3,6 +3,7 @@ import Dropdown from './Dropdown';
3
3
  import CustomModal from './Modal';
4
4
  import DropdownList from './DropdownList';
5
5
  import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
6
+ import type { DropdownProps } from './types/index.types';
6
7
  import { Input } from './Input';
7
8
 
8
9
  export const DropdownSelect = ({
@@ -21,11 +22,13 @@ export const DropdownSelect = ({
21
22
  dropdownStyle,
22
23
  dropdownContainerStyle,
23
24
  selectedItemStyle,
25
+ multipleSelectedItemStyle,
24
26
  modalBackgroundStyle,
25
27
  modalOptionsContainer,
26
28
  searchInputStyle,
27
29
  primaryColor,
28
- }: any) => {
30
+ disabled,
31
+ }: DropdownProps) => {
29
32
  const [newOptions, setNewOptions] = useState(options ? options : []);
30
33
  const [open, setOpen] = useState(false);
31
34
  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
@@ -73,7 +76,7 @@ export const DropdownSelect = ({
73
76
  let selectedItemLabel =
74
77
  options &&
75
78
  options.find(
76
- (item: string) =>
79
+ (item: any) =>
77
80
  item[optionValue ?? DEFAULT_OPTION_VALUE] === element
78
81
  )?.[optionLabel];
79
82
  selectedLabels.push(selectedItemLabel);
@@ -84,7 +87,7 @@ export const DropdownSelect = ({
84
87
  let selectedItemLabel =
85
88
  options &&
86
89
  options.find(
87
- (item: string) =>
90
+ (item: any) =>
88
91
  item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem
89
92
  );
90
93
  return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];
@@ -94,10 +97,12 @@ export const DropdownSelect = ({
94
97
  * Search
95
98
  *==========================================*/
96
99
  const onSearch = (value: string) => {
100
+ console.log(value);
97
101
  setSearchValue(value);
98
- let searchTerm = value.toString().toLocaleLowerCase();
99
- const searchResults = options.filter((item: any) => {
100
- return (
102
+
103
+ let searchTerm = value.toString().toLocaleLowerCase().trim();
104
+ const searchResults = options.filter(
105
+ (item: any) =>
101
106
  item[optionLabel ?? DEFAULT_OPTION_LABEL]
102
107
  .toString()
103
108
  .toLowerCase()
@@ -106,8 +111,7 @@ export const DropdownSelect = ({
106
111
  .toString(searchTerm)
107
112
  .toLowerCase()
108
113
  .includes()
109
- );
110
- });
114
+ );
111
115
 
112
116
  setNewOptions(searchResults);
113
117
  };
@@ -136,8 +140,10 @@ export const DropdownSelect = ({
136
140
  dropdownStyle={dropdownStyle}
137
141
  dropdownContainerStyle={dropdownContainerStyle}
138
142
  selectedItemStyle={selectedItemStyle}
143
+ multipleSelectedItemStyle={multipleSelectedItemStyle}
139
144
  isMultiple={isMultiple}
140
145
  primaryColor={primaryColor}
146
+ disabled={disabled}
141
147
  />
142
148
  <CustomModal
143
149
  open={open}
@@ -151,6 +157,7 @@ export const DropdownSelect = ({
151
157
  value={searchValue}
152
158
  onChangeText={(text: string) => onSearch(text)}
153
159
  style={searchInputStyle}
160
+ primaryColor={primaryColor}
154
161
  />
155
162
  )}
156
163
  <DropdownList
package/src/styles/input.ts CHANGED
@@ -13,10 +13,14 @@ export const inputStyles: any = StyleSheet.create({
13
13
  width: '100%',
14
14
  minHeight: 64,
15
15
  },
16
+ inputFocusErrorState: {
17
+ borderWidth: 2,
18
+ borderStyle: 'solid',
19
+ borderColor: colors.red,
20
+ },
16
21
  inputFocusState: {
17
22
  borderWidth: 2,
18
23
  borderStyle: 'solid',
19
24
  borderColor: colors.primary,
20
- borderRadius: 8,
21
25
  },
22
26
  });
package/src/types/index.types.ts ADDED
@@ -0,0 +1,25 @@
1
+ import type { CSSProperties } from 'react';
2
+
3
+ export type DropdownProps = {
4
+ placeholder: string;
5
+ label: string;
6
+ error: string;
7
+ helperText: string;
8
+ options: any[];
9
+ optionLabel: string;
10
+ optionValue: string;
11
+ onValueChange: Function;
12
+ selectedValue: string | any[] | null;
13
+ isMultiple: boolean;
14
+ isSearchable: boolean;
15
+ labelStyle: string;
16
+ dropdownStyle: CSSProperties;
17
+ dropdownContainerStyle: CSSProperties;
18
+ selectedItemStyle: CSSProperties;
19
+ multipleSelectedItemStyle: CSSProperties;
20
+ modalBackgroundStyle: CSSProperties;
21
+ modalOptionsContainer: CSSProperties;
22
+ searchInputStyle: CSSProperties;
23
+ primaryColor: string;
24
+ disabled: boolean;
25
+ };