react-native-input-select 0.29.0 → 0.31.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.
- package/README.md +66 -35
- package/lib/commonjs/components/CheckBox/index.js +8 -1
- package/lib/commonjs/components/CheckBox/index.js.map +1 -1
- package/lib/commonjs/components/CheckBox/types.js.map +1 -1
- package/lib/commonjs/components/CustomModal/index.js +7 -0
- package/lib/commonjs/components/CustomModal/index.js.map +1 -1
- package/lib/commonjs/components/Dropdown/Dropdown.js +13 -0
- package/lib/commonjs/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/commonjs/components/Dropdown/DropdownList.js +11 -1
- package/lib/commonjs/components/Dropdown/DropdownList.js.map +1 -1
- package/lib/commonjs/components/Dropdown/DropdownListItem.js +13 -2
- package/lib/commonjs/components/Dropdown/DropdownListItem.js.map +1 -1
- package/lib/commonjs/components/Dropdown/DropdownSelectedItemsView.js +16 -9
- package/lib/commonjs/components/Dropdown/DropdownSelectedItemsView.js.map +1 -1
- package/lib/commonjs/components/Input/index.js +10 -1
- package/lib/commonjs/components/Input/index.js.map +1 -1
- package/lib/commonjs/constants/index.js.map +1 -1
- package/lib/commonjs/index.js +47 -11
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/styles/colors.js.map +1 -1
- package/lib/commonjs/styles/input.js +4 -0
- package/lib/commonjs/styles/input.js.map +1 -1
- package/lib/commonjs/styles/typography.js +3 -0
- package/lib/commonjs/styles/typography.js.map +1 -1
- package/lib/commonjs/types/index.types.js.map +1 -1
- package/lib/module/components/CheckBox/index.js +2 -0
- package/lib/module/components/CheckBox/index.js.map +1 -1
- package/lib/module/components/CheckBox/types.js.map +1 -1
- package/lib/module/components/CustomModal/index.js +2 -0
- package/lib/module/components/CustomModal/index.js.map +1 -1
- package/lib/module/components/Dropdown/Dropdown.js +6 -0
- package/lib/module/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/module/components/Dropdown/DropdownList.js +5 -1
- package/lib/module/components/Dropdown/DropdownList.js.map +1 -1
- package/lib/module/components/Dropdown/DropdownListItem.js +5 -2
- package/lib/module/components/Dropdown/DropdownListItem.js.map +1 -1
- package/lib/module/components/Dropdown/DropdownSelectedItemsView.js +10 -9
- package/lib/module/components/Dropdown/DropdownSelectedItemsView.js.map +1 -1
- package/lib/module/components/Input/index.js +2 -1
- package/lib/module/components/Input/index.js.map +1 -1
- package/lib/module/constants/index.js.map +1 -1
- package/lib/module/index.js +31 -11
- package/lib/module/index.js.map +1 -1
- package/lib/module/styles/colors.js.map +1 -1
- package/lib/module/styles/input.js.map +1 -1
- package/lib/module/styles/typography.js.map +1 -1
- package/lib/module/types/index.types.js.map +1 -1
- package/lib/typescript/components/CheckBox/types.d.ts +1 -1
- package/lib/typescript/components/Dropdown/Dropdown.d.ts +1 -1
- package/lib/typescript/components/Dropdown/DropdownSelectedItemsView.d.ts +1 -1
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/types/index.types.d.ts +4 -2
- package/package.json +1 -1
- package/src/components/Dropdown/Dropdown.tsx +4 -0
- package/src/components/Dropdown/DropdownSelectedItemsView.tsx +6 -2
- package/src/index.tsx +6 -2
- package/src/types/index.types.ts +3 -1
package/README.md
CHANGED
|
@@ -57,6 +57,7 @@ export default function App() {
|
|
|
57
57
|
```js
|
|
58
58
|
import React from 'react';
|
|
59
59
|
import Dropdown from 'react-native-input-select';
|
|
60
|
+
import { View, StyleSheet, Text, Button, Alert, Image } from 'react-native';
|
|
60
61
|
|
|
61
62
|
export default function App() {
|
|
62
63
|
const [country, setCountry] = React.useState();
|
|
@@ -96,6 +97,15 @@ export default function App() {
|
|
|
96
97
|
padding: 10,
|
|
97
98
|
}}
|
|
98
99
|
checkboxLabelStyle={{ color: 'red', fontSize: 30 }}
|
|
100
|
+
dropdownIcon={
|
|
101
|
+
<Image
|
|
102
|
+
style={styles.tinyLogo}
|
|
103
|
+
source={{
|
|
104
|
+
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
|
|
105
|
+
}}
|
|
106
|
+
/>
|
|
107
|
+
}
|
|
108
|
+
dropdownIconStyle={{ top: 20, right: 20 }}
|
|
99
109
|
listHeaderComponent={
|
|
100
110
|
<View style={styles.customComponentContainer}>
|
|
101
111
|
<Text style={styles.text}>
|
|
@@ -119,9 +129,28 @@ export default function App() {
|
|
|
119
129
|
<Text>You can add any component to the bottom of this list</Text>
|
|
120
130
|
</View>
|
|
121
131
|
}
|
|
132
|
+
modalOptionsContainerStyle={{ padding: 10, backgroundColor: 'cyan' }}
|
|
122
133
|
/>
|
|
123
134
|
);
|
|
124
135
|
}
|
|
136
|
+
|
|
137
|
+
const styles = StyleSheet.create({
|
|
138
|
+
customComponentContainer: {
|
|
139
|
+
paddingHorizontal: 20,
|
|
140
|
+
paddingVertical: 10,
|
|
141
|
+
},
|
|
142
|
+
text: {
|
|
143
|
+
marginBottom: 20,
|
|
144
|
+
},
|
|
145
|
+
fixToText: {
|
|
146
|
+
flexDirection: 'row',
|
|
147
|
+
justifyContent: 'space-between',
|
|
148
|
+
},
|
|
149
|
+
tinyLogo: {
|
|
150
|
+
width: 20,
|
|
151
|
+
height: 20,
|
|
152
|
+
},
|
|
153
|
+
});
|
|
125
154
|
```
|
|
126
155
|
|
|
127
156
|
For more examples visit our [wiki page](https://github.com/azeezat/react-native-select/wiki)
|
|
@@ -135,44 +164,46 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native-
|
|
|
135
164
|
|
|
136
165
|
# Android
|
|
137
166
|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
| <img width="456" alt="Screenshot 2023-
|
|
167
|
+
| | | |
|
|
168
|
+
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
169
|
+
| <img width="456" alt="Screenshot 2023-05-16 at 6 17 09 AM" src="https://github.com/azeezat/react-native-select/assets/9849221/d695657f-d840-4368-b841-42af479d6543"> | <img width="456" alt="Screenshot 2023-03-23 at 5 26 58 PM" src="https://user-images.githubusercontent.com/9849221/227393548-28796d7b-9760-43a9-8ed3-fb1618cd1b7d.png"> | <img width="456" alt="Screenshot 2023-03-23 at 5 28 49 PM" src="https://user-images.githubusercontent.com/9849221/227393554-91ed1a92-d229-4814-84d8-5f9095e8d048.png"> |
|
|
141
170
|
|
|
142
171
|
## Props
|
|
143
172
|
|
|
144
|
-
| Proptypes
|
|
145
|
-
|
|
|
146
|
-
| label
|
|
147
|
-
| placeholder
|
|
148
|
-
| options
|
|
149
|
-
| optionLabel
|
|
150
|
-
| optionValue
|
|
151
|
-
| error
|
|
152
|
-
| helperText
|
|
153
|
-
| selectedValue
|
|
154
|
-
| onValueChange
|
|
155
|
-
| isMultiple
|
|
156
|
-
| isSearchable
|
|
157
|
-
| disabled
|
|
158
|
-
|
|
|
159
|
-
|
|
|
160
|
-
|
|
|
161
|
-
|
|
|
162
|
-
|
|
|
163
|
-
|
|
|
164
|
-
|
|
|
165
|
-
|
|
|
166
|
-
|
|
|
167
|
-
|
|
|
168
|
-
|
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
|
173
|
+
| Proptypes | Datatype | Example |
|
|
174
|
+
| -------------------------- | ------------------- | -------------------------------------------------------------------- |
|
|
175
|
+
| label | `string` | `Countries` |
|
|
176
|
+
| placeholder | `string` | `Select a country` |
|
|
177
|
+
| options | `Array` | `[{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }]` |
|
|
178
|
+
| optionLabel | `string` | `name` |
|
|
179
|
+
| optionValue | `string` | `code` |
|
|
180
|
+
| error | `string` | `This is a requiredfield` |
|
|
181
|
+
| helperText | `string` | `Only few countries are listed` |
|
|
182
|
+
| selectedValue | `string` or `Array` | `AL` or `[AL, AX]` |
|
|
183
|
+
| onValueChange | `function` | `()=>{}` |
|
|
184
|
+
| isMultiple | `Boolean` | `true` |
|
|
185
|
+
| isSearchable | `Boolean` | `true` |
|
|
186
|
+
| disabled | `Boolean` | `true` |
|
|
187
|
+
| dropdownIcon | `React Component` | `Image` or `<Text> Show <Text>` |
|
|
188
|
+
| labelStyle | `Object` | `{color: 'red', fontSize: 15, fontWeight: '500'}` |
|
|
189
|
+
| placeholderStyle | `Object` | `{color: 'blue', fontSize: 15, fontWeight: '500'}` |
|
|
190
|
+
| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` |
|
|
191
|
+
| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` |
|
|
192
|
+
| dropdownIconStyle | `Object` | `{top: 10 , right: 10, ...}` |
|
|
193
|
+
| searchInputStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
|
|
194
|
+
| selectedItemStyle | `Object` | `{fontWeight: '600', color: 'yellow', ...}` |
|
|
195
|
+
| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
|
|
196
|
+
| modalBackgroundStyle | `Object` | `{backgroundColor: 'rgba(196, 198, 246, 0.5)'}` |
|
|
197
|
+
| modalOptionsContainerStyle | `Object` | `{padding: 10, backgroundColor: 'cyan',}` |
|
|
198
|
+
| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` |
|
|
199
|
+
| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` |
|
|
200
|
+
| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` |
|
|
201
|
+
| primaryColor | `string` | `blue` |
|
|
202
|
+
| checkboxSize | `number` | `20` |
|
|
203
|
+
| checkboxStyle | `Object` | `{backgroundColor: 'blue', borderRadius: 30, padding: 10}` |
|
|
204
|
+
| checkboxLabelStyle | `Object` | `{color: 'red', fontWeight:'500'}` |
|
|
205
|
+
| listHeaderComponent | `React Component` | `<Text> You can add any component here` |
|
|
206
|
+
| listFooterComponent | `React Component` | `<Text> You can add any component here` |
|
|
176
207
|
|
|
177
208
|
## Contributing
|
|
178
209
|
|
|
@@ -4,13 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _reactNative = require("react-native");
|
|
11
|
+
|
|
9
12
|
var _colors = require("../../styles/colors");
|
|
13
|
+
|
|
10
14
|
var _constants = require("../../constants");
|
|
15
|
+
|
|
11
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
/* eslint-disable react-native/no-inline-styles */
|
|
13
17
|
|
|
18
|
+
/* eslint-disable react-native/no-inline-styles */
|
|
14
19
|
const CheckBox = _ref => {
|
|
15
20
|
let {
|
|
16
21
|
label,
|
|
@@ -42,6 +47,7 @@ const CheckBox = _ref => {
|
|
|
42
47
|
style: [checkboxLabelStyle, styles.labelStyle]
|
|
43
48
|
}, label));
|
|
44
49
|
};
|
|
50
|
+
|
|
45
51
|
const styles = _reactNative.StyleSheet.create({
|
|
46
52
|
checkboxContainer: {
|
|
47
53
|
flexDirection: 'row',
|
|
@@ -59,6 +65,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
59
65
|
marginLeft: 10
|
|
60
66
|
}
|
|
61
67
|
});
|
|
68
|
+
|
|
62
69
|
var _default = CheckBox;
|
|
63
70
|
exports.default = _default;
|
|
64
71
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["CheckBox","label","value","disabled","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","onChange","fillColor","backgroundColor","borderColor","colors","styles","checkbox","checkboxContainer","require","height","CHECKBOX_SIZE","width","labelStyle","StyleSheet","create","flexDirection","flexWrap","alignItems","padding","borderWidth","borderStyle","borderRadius","marginLeft"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAJA;AAOA,MAAMA,QAAQ,GAAG,QASI;AAAA,MATH;AAChBC,IAAAA,KADgB;AAEhBC,IAAAA,KAFgB;AAGhBC,IAAAA,QAHgB;AAIhBC,IAAAA,YAJgB;AAKhBC,IAAAA,YALgB;AAMhBC,IAAAA,aANgB;AAOhBC,IAAAA,kBAPgB;AAQhBC,IAAAA;AARgB,GASG;AACnB,QAAMC,SAAS,GAAG;AAChBC,IAAAA,eAAe,EAAEP,QAAQ,GACrB,SADqB,GAErBD,KAAK,GACL,CAAAI,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEI,eAAf,KAAkCN,YAAlC,IAAkD,OAD7C,GAEL,OALY;AAMhBO,IAAAA,WAAW,EAAER,QAAQ,GAAGS,eAAOT,QAAV,GAAqBU,MAAM,CAACC,QAAP,CAAgBH;AAN1C,GAAlB;AASA,sBACE,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAEH,QAAQ,GAAG,MAAMA,QAAQ,CAAC,CAACN,KAAF,CAAjB,GAA4B,IAD/C;AAEE,IAAA,KAAK,EAAE,CAACW,MAAM,CAACE,iBAAR,CAFT;AAGE,IAAA,QAAQ,EAAEZ;AAHZ,kBAKE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,QAAR,EAAkBR,aAAlB,EAAiCG,SAAjC;AAAb,kBACE,6BAAC,kBAAD;AACE,IAAA,MAAM,EAAEO,OAAO,CAAC,uBAAD,CADjB;AAEE,IAAA,KAAK,EAAE,CACL;AACEC,MAAAA,MAAM,EAAEZ,YAAY,IAAIa,wBAD1B;AAEEC,MAAAA,KAAK,EAAEd,YAAY,IAAIa;AAFzB,KADK;AAFT,IADF,CALF,EAgBGjB,KAAK,iBACJ,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACM,kBAAD,EAAqBM,MAAM,CAACO,UAA5B;AAAb,KAAuDnB,KAAvD,CAjBJ,CADF;AAsBD,CAzCD;;AA2CA,MAAMY,MAAM,GAAGQ,wBAAWC,MAAX,CAAkB;AAC/BP,EAAAA,iBAAiB,EAAE;AACjBQ,IAAAA,aAAa,EAAE,KADE;AAEjBC,IAAAA,QAAQ,EAAE,QAFO;AAGjBC,IAAAA,UAAU,EAAE;AAHK,GADY;AAM/BX,EAAAA,QAAQ,EAAE;AACRY,IAAAA,OAAO,EAAE,CADD;AAERC,IAAAA,WAAW,EAAE,CAFL;AAGRC,IAAAA,WAAW,EAAE,OAHL;AAIRC,IAAAA,YAAY,EAAE,CAJN;AAKRlB,IAAAA,WAAW,EAAE;AALL,GANqB;AAa/BS,EAAAA,UAAU,EAAE;AAAEU,IAAAA,UAAU,EAAE;AAAd;AAbmB,CAAlB,CAAf;;eAgBe9B,Q","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport React from 'react';\nimport { Pressable, Text, StyleSheet, Image, View } from 'react-native';\nimport { colors } from '../../styles/colors';\nimport { CHECKBOX_SIZE } from '../../constants';\nimport type { CheckboxProps } from './types';\n\nconst CheckBox = ({\n label,\n value,\n disabled,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n onChange,\n}: CheckboxProps) => {\n const fillColor = {\n backgroundColor: disabled\n ? '#d3d3d3'\n : value\n ? checkboxStyle?.backgroundColor || primaryColor || 'green'\n : 'white',\n borderColor: disabled ? colors.disabled : styles.checkbox.borderColor,\n };\n\n return (\n <Pressable\n onPress={onChange ? () => onChange(!value) : null}\n style={[styles.checkboxContainer]}\n disabled={disabled}\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -4,10 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _reactNative = require("react-native");
|
|
11
|
+
|
|
9
12
|
var _colors = require("../../styles/colors");
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
11
16
|
const CustomModal = _ref => {
|
|
12
17
|
let {
|
|
13
18
|
open,
|
|
@@ -29,6 +34,7 @@ const CustomModal = _ref => {
|
|
|
29
34
|
style: [styles.modalOptionsContainer, modalOptionsContainerStyle]
|
|
30
35
|
}, children)));
|
|
31
36
|
};
|
|
37
|
+
|
|
32
38
|
const styles = _reactNative.StyleSheet.create({
|
|
33
39
|
modalContainer: {
|
|
34
40
|
flex: 1,
|
|
@@ -44,6 +50,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
44
50
|
borderTopRightRadius: 16
|
|
45
51
|
}
|
|
46
52
|
});
|
|
53
|
+
|
|
47
54
|
var _default = CustomModal;
|
|
48
55
|
exports.default = _default;
|
|
49
56
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"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"]}
|
|
@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _reactNative = require("react-native");
|
|
11
|
+
|
|
9
12
|
var _DropdownSelectedItemsView = _interopRequireDefault(require("./DropdownSelectedItemsView"));
|
|
13
|
+
|
|
10
14
|
var _colors = require("../../styles/colors");
|
|
15
|
+
|
|
11
16
|
var _typography = require("../../styles/typography");
|
|
17
|
+
|
|
12
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
13
20
|
const Dropdown = _ref => {
|
|
14
21
|
let {
|
|
15
22
|
label,
|
|
@@ -21,8 +28,10 @@ const Dropdown = _ref => {
|
|
|
21
28
|
isMultiple,
|
|
22
29
|
selectedItem,
|
|
23
30
|
selectedItems,
|
|
31
|
+
dropdownIcon,
|
|
24
32
|
labelStyle,
|
|
25
33
|
dropdownStyle,
|
|
34
|
+
dropdownIconStyle,
|
|
26
35
|
dropdownContainerStyle,
|
|
27
36
|
selectedItemStyle,
|
|
28
37
|
placeholderStyle,
|
|
@@ -45,7 +54,9 @@ const Dropdown = _ref => {
|
|
|
45
54
|
isMultiple: isMultiple,
|
|
46
55
|
selectedItem: selectedItem,
|
|
47
56
|
selectedItems: selectedItems,
|
|
57
|
+
dropdownIcon: dropdownIcon,
|
|
48
58
|
dropdownStyle: dropdownStyle,
|
|
59
|
+
dropdownIconStyle: dropdownIconStyle,
|
|
49
60
|
selectedItemStyle: selectedItemStyle,
|
|
50
61
|
multipleSelectedItemStyle: multipleSelectedItemStyle,
|
|
51
62
|
dropdownErrorStyle: dropdownErrorStyle,
|
|
@@ -58,6 +69,7 @@ const Dropdown = _ref => {
|
|
|
58
69
|
style: [styles.helper, dropdownHelperTextStyle]
|
|
59
70
|
}, helperText));
|
|
60
71
|
};
|
|
72
|
+
|
|
61
73
|
const styles = _reactNative.StyleSheet.create({
|
|
62
74
|
label: {
|
|
63
75
|
marginBottom: 16,
|
|
@@ -82,6 +94,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
82
94
|
color: _colors.colors.black
|
|
83
95
|
}
|
|
84
96
|
});
|
|
97
|
+
|
|
85
98
|
var _default = Dropdown;
|
|
86
99
|
exports.default = _default;
|
|
87
100
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownIcon","labelStyle","dropdownStyle","dropdownIconStyle","dropdownContainerStyle","selectedItemStyle","placeholderStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","red","marginTop","primary","width","blackText","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport DropdownSelectedItemsView from './DropdownSelectedItemsView';\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 dropdownIcon,\n labelStyle,\n dropdownStyle,\n dropdownIconStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n placeholderStyle,\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 <DropdownSelectedItemsView\n placeholder={placeholder}\n error={error}\n getSelectedItemsLabel={getSelectedItemsLabel}\n handleToggleModal={handleToggleModal}\n isMultiple={isMultiple}\n selectedItem={selectedItem}\n selectedItems={selectedItems}\n dropdownIcon={dropdownIcon}\n dropdownStyle={dropdownStyle}\n dropdownIconStyle={dropdownIconStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n dropdownErrorStyle={dropdownErrorStyle}\n primaryColor={primaryColor}\n disabled={disabled}\n placeholderStyle={placeholderStyle}\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 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"]}
|
|
@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _reactNative = require("react-native");
|
|
11
|
+
|
|
9
12
|
var _DropdownListItem = _interopRequireDefault(require("./DropdownListItem"));
|
|
13
|
+
|
|
10
14
|
var _colors = require("../../styles/colors");
|
|
15
|
+
|
|
11
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
|
|
17
|
+
|
|
18
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
19
|
+
|
|
13
20
|
const DropdownList = _ref => {
|
|
14
21
|
let {
|
|
15
22
|
options,
|
|
@@ -54,6 +61,7 @@ const DropdownList = _ref => {
|
|
|
54
61
|
keyExtractor: (_item, index) => `Options${index}`
|
|
55
62
|
}, rest));
|
|
56
63
|
};
|
|
64
|
+
|
|
57
65
|
const _renderItem = (_ref2, props) => {
|
|
58
66
|
let {
|
|
59
67
|
item
|
|
@@ -71,6 +79,7 @@ const _renderItem = (_ref2, props) => {
|
|
|
71
79
|
checkboxLabelStyle: props.checkboxLabelStyle
|
|
72
80
|
});
|
|
73
81
|
};
|
|
82
|
+
|
|
74
83
|
const styles = _reactNative.StyleSheet.create({
|
|
75
84
|
itemSeparatorStyle: {
|
|
76
85
|
backgroundColor: _colors.colors.gray,
|
|
@@ -86,6 +95,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
86
95
|
paddingTop: 20
|
|
87
96
|
}
|
|
88
97
|
});
|
|
98
|
+
|
|
89
99
|
var _default = DropdownList;
|
|
90
100
|
exports.default = _default;
|
|
91
101
|
//# sourceMappingURL=DropdownList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","isSearchable","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","rest","styles","emptyListStyle","paddingTop","contentContainerStyle","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","StyleSheet","create","backgroundColor","colors","gray","height","opacity","alignItems","width","marginVertical"],"mappings":"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","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport 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 isSearchable,\n selectedItems,\n selectedItem,\n handleMultipleSelections,\n handleSingleSelection,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n ...rest\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 contentContainerStyle={[\n isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,\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 {...rest}\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 itemSeparatorStyle: {\n backgroundColor: colors.gray,\n height: 1,\n opacity: 0.15,\n },\n emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },\n contentContainerStyle: { paddingTop: 20 },\n});\n\nexport default DropdownList;\n"]}
|
|
@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _reactNative = require("react-native");
|
|
11
|
+
|
|
9
12
|
var _CheckBox = _interopRequireDefault(require("../CheckBox"));
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
11
16
|
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); }
|
|
17
|
+
|
|
12
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
|
|
13
20
|
const DropdownListItem = _ref => {
|
|
14
21
|
let {
|
|
15
22
|
item,
|
|
@@ -23,13 +30,14 @@ const DropdownListItem = _ref => {
|
|
|
23
30
|
checkboxStyle,
|
|
24
31
|
checkboxLabelStyle
|
|
25
32
|
} = _ref;
|
|
26
|
-
const selectedOptionValue = optionValue
|
|
33
|
+
const selectedOptionValue = optionValue !== null && optionValue !== void 0 ? optionValue : 'value';
|
|
27
34
|
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
28
35
|
style: styles.dropdownModalOptions,
|
|
29
36
|
onPress: item.disabled ? () => {} : () => onChange(item[selectedOptionValue]) // intentionally didn't use the disable property
|
|
37
|
+
|
|
30
38
|
}, /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
|
|
31
39
|
value: isMultiple ? selectedOption.includes(item[selectedOptionValue]) : [selectedOption].includes(item[selectedOptionValue]),
|
|
32
|
-
label: item[optionLabel
|
|
40
|
+
label: item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : ''],
|
|
33
41
|
onChange: () => onChange(item[selectedOptionValue]),
|
|
34
42
|
primaryColor: primaryColor,
|
|
35
43
|
checkboxSize: checkboxSize,
|
|
@@ -38,6 +46,7 @@ const DropdownListItem = _ref => {
|
|
|
38
46
|
disabled: item.disabled
|
|
39
47
|
}));
|
|
40
48
|
};
|
|
49
|
+
|
|
41
50
|
const styles = _reactNative.StyleSheet.create({
|
|
42
51
|
dropdownModalOptions: {
|
|
43
52
|
paddingHorizontal: 20,
|
|
@@ -46,6 +55,8 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
46
55
|
alignItems: 'center'
|
|
47
56
|
}
|
|
48
57
|
});
|
|
58
|
+
|
|
49
59
|
var _default = /*#__PURE__*/(0, _react.memo)(DropdownListItem);
|
|
60
|
+
|
|
50
61
|
exports.default = _default;
|
|
51
62
|
//# sourceMappingURL=DropdownListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["DropdownListItem.tsx"],"names":["DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","selectedOptionValue","styles","dropdownModalOptions","disabled","includes","StyleSheet","create","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":";;;;;;;AAAA;;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,oBADhB;AAEE,IAAA,OAAO,EACLZ,IAAI,CAACa,QAAL,GAAgB,MAAM,CAAE,CAAxB,GAA2B,MAAMR,QAAQ,CAACL,IAAI,CAACU,mBAAD,CAAL,CADpC,CACgE;;AAHzE,kBAME,6BAAC,iBAAD;AACE,IAAA,KAAK,EACHP,UAAU,GACNC,cAAc,CAACU,QAAf,CAAwBd,IAAI,CAACU,mBAAD,CAA5B,CADM,GAEN,CAACN,cAAD,EAAiBU,QAAjB,CAA0Bd,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,YARhB;AASE,IAAA,YAAY,EAAEC,YAThB;AAUE,IAAA,aAAa,EAAEC,aAVjB;AAWE,IAAA,kBAAkB,EAAEC,kBAXtB;AAYE,IAAA,QAAQ,EAAET,IAAI,CAACa;AAZjB,IANF,CADF;AAuBD,CApCD;;AAsCA,MAAMF,MAAM,GAAGI,wBAAWC,MAAX,CAAkB;AAC/BJ,EAAAA,oBAAoB,EAAE;AACpBK,IAAAA,iBAAiB,EAAE,EADC;AAEpBC,IAAAA,eAAe,EAAE,EAFG;AAGpBC,IAAAA,aAAa,EAAE,KAHK;AAIpBC,IAAAA,UAAU,EAAE;AAJQ;AADS,CAAlB,CAAf;;4BASe,iBAAKrB,gBAAL,C","sourcesContent":["import React, { memo } from 'react';\nimport { TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '../CheckBox';\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.dropdownModalOptions}\n onPress={\n item.disabled ? () => {} : () => onChange(item[selectedOptionValue]) // intentionally didn't use the disable property\n }\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}\n checkboxSize={checkboxSize}\n checkboxStyle={checkboxStyle}\n checkboxLabelStyle={checkboxLabelStyle}\n disabled={item.disabled}\n />\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n dropdownModalOptions: {\n paddingHorizontal: 20,\n paddingVertical: 10,\n flexDirection: 'row',\n alignItems: 'center',\n },\n});\n\nexport default memo(DropdownListItem);\n"]}
|
|
@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _reactNative = require("react-native");
|
|
11
|
+
|
|
9
12
|
var _colors = require("../../styles/colors");
|
|
13
|
+
|
|
10
14
|
var _input = require("../../styles/input");
|
|
15
|
+
|
|
11
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
12
18
|
const DropdownSelectedItemsView = _ref => {
|
|
13
19
|
let {
|
|
14
20
|
placeholder,
|
|
@@ -18,7 +24,9 @@ const DropdownSelectedItemsView = _ref => {
|
|
|
18
24
|
isMultiple,
|
|
19
25
|
selectedItem,
|
|
20
26
|
selectedItems,
|
|
27
|
+
dropdownIcon,
|
|
21
28
|
dropdownStyle,
|
|
29
|
+
dropdownIconStyle,
|
|
22
30
|
selectedItemStyle,
|
|
23
31
|
placeholderStyle,
|
|
24
32
|
multipleSelectedItemStyle,
|
|
@@ -32,13 +40,10 @@ const DropdownSelectedItemsView = _ref => {
|
|
|
32
40
|
let {
|
|
33
41
|
pressed
|
|
34
42
|
} = _ref2;
|
|
35
|
-
return [pressed && {
|
|
36
|
-
..._input.inputStyles.inputFocusState,
|
|
43
|
+
return [pressed && { ..._input.inputStyles.inputFocusState,
|
|
37
44
|
borderColor: primaryColor
|
|
38
|
-
}, _input.inputStyles.input, dropdownStyle, error &&
|
|
39
|
-
|
|
40
|
-
error !== '' && !pressed && {
|
|
41
|
-
..._input.inputStyles.inputFocusErrorState,
|
|
45
|
+
}, _input.inputStyles.input, dropdownStyle, error && //this must be last
|
|
46
|
+
error !== '' && !pressed && { ..._input.inputStyles.inputFocusErrorState,
|
|
42
47
|
...dropdownErrorStyle
|
|
43
48
|
}];
|
|
44
49
|
},
|
|
@@ -65,12 +70,13 @@ const DropdownSelectedItemsView = _ref => {
|
|
|
65
70
|
style: [styles.blackText, selectedItemStyle]
|
|
66
71
|
}, getSelectedItemsLabel()))), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
67
72
|
style: [styles.blackText, placeholderStyle]
|
|
68
|
-
}, placeholder
|
|
69
|
-
style: styles.iconStyle
|
|
70
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
73
|
+
}, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
74
|
+
style: [styles.iconStyle, dropdownIconStyle]
|
|
75
|
+
}, dropdownIcon || /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
71
76
|
source: require('../../asset/arrow-down.png')
|
|
72
77
|
})));
|
|
73
78
|
};
|
|
79
|
+
|
|
74
80
|
const styles = _reactNative.StyleSheet.create({
|
|
75
81
|
iconStyle: {
|
|
76
82
|
position: 'absolute',
|
|
@@ -94,6 +100,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
94
100
|
color: _colors.colors.black
|
|
95
101
|
}
|
|
96
102
|
});
|
|
103
|
+
|
|
97
104
|
var _default = DropdownSelectedItemsView;
|
|
98
105
|
exports.default = _default;
|
|
99
106
|
//# sourceMappingURL=DropdownSelectedItemsView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["DropdownSelectedItemsView.tsx"],"names":["DropdownSelectedItemsView","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownIcon","dropdownStyle","dropdownIconStyle","selectedItemStyle","placeholderStyle","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","overflow","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 DropdownSelectedItemsView = ({\n placeholder,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n dropdownIcon,\n dropdownStyle,\n dropdownIconStyle,\n selectedItemStyle,\n placeholderStyle,\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, placeholderStyle]}>\n {placeholder ?? 'Select an option'}\n </Text>\n )}\n </ScrollView>\n <View style={[styles.iconStyle, dropdownIconStyle]}>\n {dropdownIcon || (\n <Image source={require('../../asset/arrow-down.png')} />\n )}\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 overflow: 'hidden',\n },\n blackText: { color: colors.black },\n});\n\nexport default DropdownSelectedItemsView;\n"]}
|