react-native-input-select 1.3.5 → 1.3.6
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/lib/commonjs/components/CustomModal/index.js +17 -4
- package/lib/commonjs/components/CustomModal/index.js.map +1 -1
- package/lib/module/components/CustomModal/index.js +18 -5
- package/lib/module/components/CustomModal/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CustomModal/index.tsx +47 -24
|
@@ -9,7 +9,20 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _colors = require("../../styles/colors");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
11
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
12
|
-
|
|
12
|
+
// In iOS, `SafeAreaView` does not automatically account on keyboard.
|
|
13
|
+
// Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.
|
|
14
|
+
const ModalContentWrapper = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
children
|
|
17
|
+
} = _ref;
|
|
18
|
+
return _reactNative.Platform.OS === 'ios' ? /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
|
|
19
|
+
style: [{
|
|
20
|
+
flex: 1
|
|
21
|
+
}],
|
|
22
|
+
behavior: "padding"
|
|
23
|
+
}, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
|
|
24
|
+
};
|
|
25
|
+
const CustomModal = _ref2 => {
|
|
13
26
|
let {
|
|
14
27
|
visible,
|
|
15
28
|
onRequestClose,
|
|
@@ -21,20 +34,20 @@ const CustomModal = _ref => {
|
|
|
21
34
|
modalProps,
|
|
22
35
|
//kept for backwards compatibility
|
|
23
36
|
children
|
|
24
|
-
} =
|
|
37
|
+
} = _ref2;
|
|
25
38
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, _extends({
|
|
26
39
|
transparent: true,
|
|
27
40
|
visible: visible,
|
|
28
41
|
onRequestClose: () => onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose(),
|
|
29
42
|
animationType: "fade"
|
|
30
|
-
}, modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalProps, modalProps), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
43
|
+
}, modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalProps, modalProps), /*#__PURE__*/_react.default.createElement(ModalContentWrapper, null, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
31
44
|
onPress: () => onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose(),
|
|
32
45
|
style: [styles.modalContainer, styles.modalBackgroundStyle, (modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalBackgroundStyle) || modalBackgroundStyle]
|
|
33
46
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
|
|
34
47
|
onPress: () => {}
|
|
35
48
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
|
|
36
49
|
style: [styles.modalOptionsContainer, (modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalOptionsContainerStyle) || modalOptionsContainerStyle]
|
|
37
|
-
}, children))));
|
|
50
|
+
}, children)))));
|
|
38
51
|
};
|
|
39
52
|
const styles = _reactNative.StyleSheet.create({
|
|
40
53
|
modalContainer: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_colors","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_colors","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ModalContentWrapper","_ref","children","Platform","OS","createElement","KeyboardAvoidingView","style","flex","behavior","Fragment","CustomModal","_ref2","visible","onRequestClose","modalBackgroundStyle","modalOptionsContainerStyle","modalControls","modalProps","Modal","transparent","animationType","TouchableOpacity","onPress","styles","modalContainer","TouchableWithoutFeedback","SafeAreaView","modalOptionsContainer","StyleSheet","create","justifyContent","backgroundColor","maxHeight","colors","white","borderTopLeftRadius","borderTopRightRadius","zIndex","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport {\n KeyboardAvoidingView,\n Modal,\n ModalProps,\n Platform,\n SafeAreaView,\n StyleSheet,\n TouchableOpacity,\n TouchableWithoutFeedback,\n} from 'react-native';\nimport { colors } from '../../styles/colors';\nimport { TCustomModalControls } from 'src/types/index.types';\n\ntype ScreenWrapperProps = {\n children: React.ReactNode;\n};\n\n// In iOS, `SafeAreaView` does not automatically account on keyboard.\n// Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.\nconst ModalContentWrapper = ({\n children,\n}: ScreenWrapperProps): ReactElement => {\n return Platform.OS === 'ios' ? (\n <KeyboardAvoidingView style={[{ flex: 1 }]} behavior=\"padding\">\n {children}\n </KeyboardAvoidingView>\n ) : (\n <>{children}</>\n );\n};\n\nconst CustomModal = ({\n visible,\n onRequestClose,\n modalBackgroundStyle, //kept for backwards compatibility\n modalOptionsContainerStyle, //kept for backwards compatibility\n modalControls,\n modalProps, //kept for backwards compatibility\n children,\n}: TCustomModalControls & ModalProps) => {\n return (\n <Modal\n transparent={true}\n visible={visible}\n onRequestClose={() => onRequestClose?.()}\n animationType=\"fade\"\n {...modalControls?.modalProps}\n {...modalProps} //kept for backwards compatibility\n >\n {/*Used to fix the select with search box behavior in iOS*/}\n <ModalContentWrapper>\n <TouchableOpacity\n onPress={() => onRequestClose?.()}\n style={[\n styles.modalContainer,\n styles.modalBackgroundStyle,\n modalControls?.modalBackgroundStyle || modalBackgroundStyle,\n ]}\n >\n {/* Added this `TouchableWithoutFeedback` wrapper because of the closing modal on expo web */}\n <TouchableWithoutFeedback onPress={() => {}}>\n <SafeAreaView\n style={[\n styles.modalOptionsContainer,\n modalControls?.modalOptionsContainerStyle ||\n modalOptionsContainerStyle,\n ]}\n >\n {children}\n </SafeAreaView>\n </TouchableWithoutFeedback>\n </TouchableOpacity>\n </ModalContentWrapper>\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 zIndex: 5,\n },\n});\n\nexport default CustomModal;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAUA,IAAAE,OAAA,GAAAF,OAAA;AAA6C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAO7C;AACA;AACA,MAAMQ,mBAAmB,GAAGC,IAAA,IAEY;EAAA,IAFX;IAC3BC;EACkB,CAAC,GAAAD,IAAA;EACnB,OAAOE,qBAAQ,CAACC,EAAE,KAAK,KAAK,gBAC1B1B,MAAA,CAAAO,OAAA,CAAAoB,aAAA,CAACxB,YAAA,CAAAyB,oBAAoB;IAACC,KAAK,EAAE,CAAC;MAAEC,IAAI,EAAE;IAAE,CAAC,CAAE;IAACC,QAAQ,EAAC;EAAS,GAC3DP,QACmB,CAAC,gBAEvBxB,MAAA,CAAAO,OAAA,CAAAoB,aAAA,CAAA3B,MAAA,CAAAO,OAAA,CAAAyB,QAAA,QAAGR,QAAW,CACf;AACH,CAAC;AAED,MAAMS,WAAW,GAAGC,KAAA,IAQqB;EAAA,IARpB;IACnBC,OAAO;IACPC,cAAc;IACdC,oBAAoB;IAAE;IACtBC,0BAA0B;IAAE;IAC5BC,aAAa;IACbC,UAAU;IAAE;IACZhB;EACiC,CAAC,GAAAU,KAAA;EAClC,oBACElC,MAAA,CAAAO,OAAA,CAAAoB,aAAA,CAACxB,YAAA,CAAAsC,KAAK,EAAAjC,QAAA;IACJkC,WAAW,EAAE,IAAK;IAClBP,OAAO,EAAEA,OAAQ;IACjBC,cAAc,EAAEA,CAAA,KAAMA,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAG,CAAE;IACzCO,aAAa,EAAC;EAAM,GAChBJ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEC,UAAU,EACzBA,UAAU,gBAGdxC,MAAA,CAAAO,OAAA,CAAAoB,aAAA,CAACL,mBAAmB,qBAClBtB,MAAA,CAAAO,OAAA,CAAAoB,aAAA,CAACxB,YAAA,CAAAyC,gBAAgB;IACfC,OAAO,EAAEA,CAAA,KAAMT,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAG,CAAE;IAClCP,KAAK,EAAE,CACLiB,MAAM,CAACC,cAAc,EACrBD,MAAM,CAACT,oBAAoB,EAC3B,CAAAE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,oBAAoB,KAAIA,oBAAoB;EAC3D,gBAGFrC,MAAA,CAAAO,OAAA,CAAAoB,aAAA,CAACxB,YAAA,CAAA6C,wBAAwB;IAACH,OAAO,EAAEA,CAAA,KAAM,CAAC;EAAE,gBAC1C7C,MAAA,CAAAO,OAAA,CAAAoB,aAAA,CAACxB,YAAA,CAAA8C,YAAY;IACXpB,KAAK,EAAE,CACLiB,MAAM,CAACI,qBAAqB,EAC5B,CAAAX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAED,0BAA0B,KACvCA,0BAA0B;EAC5B,GAEDd,QACW,CACU,CACV,CACC,CAChB,CAAC;AAEZ,CAAC;AAED,MAAMsB,MAAM,GAAGK,uBAAU,CAACC,MAAM,CAAC;EAC/BL,cAAc,EAAE;IACdjB,IAAI,EAAE,CAAC;IACPuB,cAAc,EAAE;EAClB,CAAC;EACDhB,oBAAoB,EAAE;IAAEiB,eAAe,EAAE;EAAqB,CAAC;EAC/DJ,qBAAqB,EAAE;IACrBK,SAAS,EAAE,KAAK;IAChBD,eAAe,EAAEE,cAAM,CAACC,KAAK;IAC7BC,mBAAmB,EAAE,EAAE;IACvBC,oBAAoB,EAAE,EAAE;IACxBC,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAEY5B,WAAW;AAAA6B,OAAA,CAAAvD,OAAA,GAAAsD,QAAA"}
|
|
@@ -1,8 +1,21 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { Modal,
|
|
3
|
+
import { KeyboardAvoidingView, Modal, Platform, SafeAreaView, StyleSheet, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
|
|
4
4
|
import { colors } from '../../styles/colors';
|
|
5
|
-
|
|
5
|
+
// In iOS, `SafeAreaView` does not automatically account on keyboard.
|
|
6
|
+
// Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.
|
|
7
|
+
const ModalContentWrapper = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
children
|
|
10
|
+
} = _ref;
|
|
11
|
+
return Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
|
|
12
|
+
style: [{
|
|
13
|
+
flex: 1
|
|
14
|
+
}],
|
|
15
|
+
behavior: "padding"
|
|
16
|
+
}, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
17
|
+
};
|
|
18
|
+
const CustomModal = _ref2 => {
|
|
6
19
|
let {
|
|
7
20
|
visible,
|
|
8
21
|
onRequestClose,
|
|
@@ -14,20 +27,20 @@ const CustomModal = _ref => {
|
|
|
14
27
|
modalProps,
|
|
15
28
|
//kept for backwards compatibility
|
|
16
29
|
children
|
|
17
|
-
} =
|
|
30
|
+
} = _ref2;
|
|
18
31
|
return /*#__PURE__*/React.createElement(Modal, _extends({
|
|
19
32
|
transparent: true,
|
|
20
33
|
visible: visible,
|
|
21
34
|
onRequestClose: () => onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose(),
|
|
22
35
|
animationType: "fade"
|
|
23
|
-
}, modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalProps, modalProps), /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
36
|
+
}, modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalProps, modalProps), /*#__PURE__*/React.createElement(ModalContentWrapper, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
24
37
|
onPress: () => onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose(),
|
|
25
38
|
style: [styles.modalContainer, styles.modalBackgroundStyle, (modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalBackgroundStyle) || modalBackgroundStyle]
|
|
26
39
|
}, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
|
27
40
|
onPress: () => {}
|
|
28
41
|
}, /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
29
42
|
style: [styles.modalOptionsContainer, (modalControls === null || modalControls === void 0 ? void 0 : modalControls.modalOptionsContainerStyle) || modalOptionsContainerStyle]
|
|
30
|
-
}, children))));
|
|
43
|
+
}, children)))));
|
|
31
44
|
};
|
|
32
45
|
const styles = StyleSheet.create({
|
|
33
46
|
modalContainer: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Modal","
|
|
1
|
+
{"version":3,"names":["React","KeyboardAvoidingView","Modal","Platform","SafeAreaView","StyleSheet","TouchableOpacity","TouchableWithoutFeedback","colors","ModalContentWrapper","_ref","children","OS","createElement","style","flex","behavior","Fragment","CustomModal","_ref2","visible","onRequestClose","modalBackgroundStyle","modalOptionsContainerStyle","modalControls","modalProps","_extends","transparent","animationType","onPress","styles","modalContainer","modalOptionsContainer","create","justifyContent","backgroundColor","maxHeight","white","borderTopLeftRadius","borderTopRightRadius","zIndex"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport {\n KeyboardAvoidingView,\n Modal,\n ModalProps,\n Platform,\n SafeAreaView,\n StyleSheet,\n TouchableOpacity,\n TouchableWithoutFeedback,\n} from 'react-native';\nimport { colors } from '../../styles/colors';\nimport { TCustomModalControls } from 'src/types/index.types';\n\ntype ScreenWrapperProps = {\n children: React.ReactNode;\n};\n\n// In iOS, `SafeAreaView` does not automatically account on keyboard.\n// Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.\nconst ModalContentWrapper = ({\n children,\n}: ScreenWrapperProps): ReactElement => {\n return Platform.OS === 'ios' ? (\n <KeyboardAvoidingView style={[{ flex: 1 }]} behavior=\"padding\">\n {children}\n </KeyboardAvoidingView>\n ) : (\n <>{children}</>\n );\n};\n\nconst CustomModal = ({\n visible,\n onRequestClose,\n modalBackgroundStyle, //kept for backwards compatibility\n modalOptionsContainerStyle, //kept for backwards compatibility\n modalControls,\n modalProps, //kept for backwards compatibility\n children,\n}: TCustomModalControls & ModalProps) => {\n return (\n <Modal\n transparent={true}\n visible={visible}\n onRequestClose={() => onRequestClose?.()}\n animationType=\"fade\"\n {...modalControls?.modalProps}\n {...modalProps} //kept for backwards compatibility\n >\n {/*Used to fix the select with search box behavior in iOS*/}\n <ModalContentWrapper>\n <TouchableOpacity\n onPress={() => onRequestClose?.()}\n style={[\n styles.modalContainer,\n styles.modalBackgroundStyle,\n modalControls?.modalBackgroundStyle || modalBackgroundStyle,\n ]}\n >\n {/* Added this `TouchableWithoutFeedback` wrapper because of the closing modal on expo web */}\n <TouchableWithoutFeedback onPress={() => {}}>\n <SafeAreaView\n style={[\n styles.modalOptionsContainer,\n modalControls?.modalOptionsContainerStyle ||\n modalOptionsContainerStyle,\n ]}\n >\n {children}\n </SafeAreaView>\n </TouchableWithoutFeedback>\n </TouchableOpacity>\n </ModalContentWrapper>\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 zIndex: 5,\n },\n});\n\nexport default CustomModal;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAwB,OAAO;AAC3C,SACEC,oBAAoB,EACpBC,KAAK,EAELC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,gBAAgB,EAChBC,wBAAwB,QACnB,cAAc;AACrB,SAASC,MAAM,QAAQ,qBAAqB;AAO5C;AACA;AACA,MAAMC,mBAAmB,GAAGC,IAAA,IAEY;EAAA,IAFX;IAC3BC;EACkB,CAAC,GAAAD,IAAA;EACnB,OAAOP,QAAQ,CAACS,EAAE,KAAK,KAAK,gBAC1BZ,KAAA,CAAAa,aAAA,CAACZ,oBAAoB;IAACa,KAAK,EAAE,CAAC;MAAEC,IAAI,EAAE;IAAE,CAAC,CAAE;IAACC,QAAQ,EAAC;EAAS,GAC3DL,QACmB,CAAC,gBAEvBX,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAiB,QAAA,QAAGN,QAAW,CACf;AACH,CAAC;AAED,MAAMO,WAAW,GAAGC,KAAA,IAQqB;EAAA,IARpB;IACnBC,OAAO;IACPC,cAAc;IACdC,oBAAoB;IAAE;IACtBC,0BAA0B;IAAE;IAC5BC,aAAa;IACbC,UAAU;IAAE;IACZd;EACiC,CAAC,GAAAQ,KAAA;EAClC,oBACEnB,KAAA,CAAAa,aAAA,CAACX,KAAK,EAAAwB,QAAA;IACJC,WAAW,EAAE,IAAK;IAClBP,OAAO,EAAEA,OAAQ;IACjBC,cAAc,EAAEA,CAAA,KAAMA,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAG,CAAE;IACzCO,aAAa,EAAC;EAAM,GAChBJ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEC,UAAU,EACzBA,UAAU,gBAGdzB,KAAA,CAAAa,aAAA,CAACJ,mBAAmB,qBAClBT,KAAA,CAAAa,aAAA,CAACP,gBAAgB;IACfuB,OAAO,EAAEA,CAAA,KAAMR,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAG,CAAE;IAClCP,KAAK,EAAE,CACLgB,MAAM,CAACC,cAAc,EACrBD,MAAM,CAACR,oBAAoB,EAC3B,CAAAE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,oBAAoB,KAAIA,oBAAoB;EAC3D,gBAGFtB,KAAA,CAAAa,aAAA,CAACN,wBAAwB;IAACsB,OAAO,EAAEA,CAAA,KAAM,CAAC;EAAE,gBAC1C7B,KAAA,CAAAa,aAAA,CAACT,YAAY;IACXU,KAAK,EAAE,CACLgB,MAAM,CAACE,qBAAqB,EAC5B,CAAAR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAED,0BAA0B,KACvCA,0BAA0B;EAC5B,GAEDZ,QACW,CACU,CACV,CACC,CAChB,CAAC;AAEZ,CAAC;AAED,MAAMmB,MAAM,GAAGzB,UAAU,CAAC4B,MAAM,CAAC;EAC/BF,cAAc,EAAE;IACdhB,IAAI,EAAE,CAAC;IACPmB,cAAc,EAAE;EAClB,CAAC;EACDZ,oBAAoB,EAAE;IAAEa,eAAe,EAAE;EAAqB,CAAC;EAC/DH,qBAAqB,EAAE;IACrBI,SAAS,EAAE,KAAK;IAChBD,eAAe,EAAE3B,MAAM,CAAC6B,KAAK;IAC7BC,mBAAmB,EAAE,EAAE;IACvBC,oBAAoB,EAAE,EAAE;IACxBC,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAetB,WAAW"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-input-select",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.6",
|
|
4
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",
|
|
@@ -1,15 +1,35 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
2
|
import {
|
|
3
|
+
KeyboardAvoidingView,
|
|
3
4
|
Modal,
|
|
4
|
-
|
|
5
|
+
ModalProps,
|
|
6
|
+
Platform,
|
|
5
7
|
SafeAreaView,
|
|
6
8
|
StyleSheet,
|
|
9
|
+
TouchableOpacity,
|
|
7
10
|
TouchableWithoutFeedback,
|
|
8
|
-
ModalProps,
|
|
9
11
|
} from 'react-native';
|
|
10
12
|
import { colors } from '../../styles/colors';
|
|
11
13
|
import { TCustomModalControls } from 'src/types/index.types';
|
|
12
14
|
|
|
15
|
+
type ScreenWrapperProps = {
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// In iOS, `SafeAreaView` does not automatically account on keyboard.
|
|
20
|
+
// Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.
|
|
21
|
+
const ModalContentWrapper = ({
|
|
22
|
+
children,
|
|
23
|
+
}: ScreenWrapperProps): ReactElement => {
|
|
24
|
+
return Platform.OS === 'ios' ? (
|
|
25
|
+
<KeyboardAvoidingView style={[{ flex: 1 }]} behavior="padding">
|
|
26
|
+
{children}
|
|
27
|
+
</KeyboardAvoidingView>
|
|
28
|
+
) : (
|
|
29
|
+
<>{children}</>
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
|
|
13
33
|
const CustomModal = ({
|
|
14
34
|
visible,
|
|
15
35
|
onRequestClose,
|
|
@@ -28,27 +48,30 @@ const CustomModal = ({
|
|
|
28
48
|
{...modalControls?.modalProps}
|
|
29
49
|
{...modalProps} //kept for backwards compatibility
|
|
30
50
|
>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
{/*Used to fix the select with search box behavior in iOS*/}
|
|
52
|
+
<ModalContentWrapper>
|
|
53
|
+
<TouchableOpacity
|
|
54
|
+
onPress={() => onRequestClose?.()}
|
|
55
|
+
style={[
|
|
56
|
+
styles.modalContainer,
|
|
57
|
+
styles.modalBackgroundStyle,
|
|
58
|
+
modalControls?.modalBackgroundStyle || modalBackgroundStyle,
|
|
59
|
+
]}
|
|
60
|
+
>
|
|
61
|
+
{/* Added this `TouchableWithoutFeedback` wrapper because of the closing modal on expo web */}
|
|
62
|
+
<TouchableWithoutFeedback onPress={() => {}}>
|
|
63
|
+
<SafeAreaView
|
|
64
|
+
style={[
|
|
65
|
+
styles.modalOptionsContainer,
|
|
66
|
+
modalControls?.modalOptionsContainerStyle ||
|
|
67
|
+
modalOptionsContainerStyle,
|
|
68
|
+
]}
|
|
69
|
+
>
|
|
70
|
+
{children}
|
|
71
|
+
</SafeAreaView>
|
|
72
|
+
</TouchableWithoutFeedback>
|
|
73
|
+
</TouchableOpacity>
|
|
74
|
+
</ModalContentWrapper>
|
|
52
75
|
</Modal>
|
|
53
76
|
);
|
|
54
77
|
};
|