react-native-bottom-sheet-dropdown 1.0.1 → 1.0.3
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/BottomSheetDropdown.js +2 -2
- package/lib/DropdownModal.js +9 -9
- package/lib/types.d.ts +2 -0
- package/package.json +1 -1
|
@@ -31,7 +31,7 @@ const react_native_1 = require("react-native");
|
|
|
31
31
|
const index_1 = require("./utils/index");
|
|
32
32
|
const DownIcon_1 = __importDefault(require("./icons/DownIcon"));
|
|
33
33
|
const DropdownModal_1 = __importDefault(require("./DropdownModal"));
|
|
34
|
-
const BottomSheetDropdown = ({ data, onSelect, rtl, title = "", placeholder = "Select an option", selectedValue, selectedValueStyle, placeholderStyle, mainDropdownInput, titleStyle, dropdownModalProps, selectedOption, }) => {
|
|
34
|
+
const BottomSheetDropdown = ({ data, onSelect, rtl, title = "", placeholder = "Select an option", selectedValue, selectedValueStyle, placeholderStyle, mainDropdownInput, titleStyle, dropdownModalProps, selectedOption, iconColor, }) => {
|
|
35
35
|
const [showModal, setShowModal] = React.useState(false);
|
|
36
36
|
const toggleDropdownModal = React.useCallback(() => {
|
|
37
37
|
setShowModal(!showModal);
|
|
@@ -49,6 +49,6 @@ const BottomSheetDropdown = ({ data, onSelect, rtl, title = "", placeholder = "S
|
|
|
49
49
|
React.createElement(react_native_1.Text, { style: styles.title }, title),
|
|
50
50
|
React.createElement(react_native_1.Pressable, { style: styles.dropdownContainer, onPress: toggleDropdownModal },
|
|
51
51
|
selectedOption ? (React.createElement(react_native_1.Text, { style: styles.selectedValue }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)) : (React.createElement(react_native_1.Text, { style: styles.placeholderValue }, placeholder)),
|
|
52
|
-
React.createElement(DownIcon_1.default,
|
|
52
|
+
React.createElement(DownIcon_1.default, { color: iconColor })))));
|
|
53
53
|
};
|
|
54
54
|
exports.default = BottomSheetDropdown;
|
package/lib/DropdownModal.js
CHANGED
|
@@ -9,7 +9,7 @@ const utils_1 = require("./utils");
|
|
|
9
9
|
const react_native_modal_1 = __importDefault(require("react-native-modal"));
|
|
10
10
|
const TickIcon_1 = __importDefault(require("./icons/TickIcon"));
|
|
11
11
|
const DropdownModal = ({ data, visible, onClose, onSelect, dropdownModalProps, selectedOption, rtl, }) => {
|
|
12
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
12
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
13
13
|
const styles = react_native_1.StyleSheet.create({
|
|
14
14
|
modalContainer: {
|
|
15
15
|
justifyContent: "flex-start",
|
|
@@ -20,7 +20,7 @@ const DropdownModal = ({ data, visible, onClose, onSelect, dropdownModalProps, s
|
|
|
20
20
|
borderTopRightRadius: (0, utils_1.wp)(2),
|
|
21
21
|
paddingHorizontal: (0, utils_1.wp)(4),
|
|
22
22
|
paddingVertical: (0, utils_1.hp)(2),
|
|
23
|
-
backgroundColor: "#fff",
|
|
23
|
+
backgroundColor: ((_a = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _a === void 0 ? void 0 : _a.modalBackgroundColor) || "#fff",
|
|
24
24
|
},
|
|
25
25
|
dash: {
|
|
26
26
|
width: (0, utils_1.wp)(10),
|
|
@@ -36,26 +36,26 @@ const DropdownModal = ({ data, visible, onClose, onSelect, dropdownModalProps, s
|
|
|
36
36
|
alignItems: "center",
|
|
37
37
|
justifyContent: "space-between",
|
|
38
38
|
},
|
|
39
|
-
dropdownTitle: Object.assign({ fontSize: 16 }, (
|
|
40
|
-
close: Object.assign({ fontSize: 16, color: "blue" }, (
|
|
39
|
+
dropdownTitle: Object.assign({ fontSize: 16 }, (_b = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _b === void 0 ? void 0 : _b.dropdownTitleStyle),
|
|
40
|
+
close: Object.assign({ fontSize: 16, color: "blue" }, (_c = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _c === void 0 ? void 0 : _c.closeTitleStyle),
|
|
41
41
|
leftSpacer: {
|
|
42
42
|
width: (0, utils_1.wp)(10),
|
|
43
43
|
},
|
|
44
|
-
optionContainer: Object.assign({ width: "100%", height: (0, utils_1.hp)(6), justifyContent: "space-between", borderBottomWidth: 1, borderBottomColor: "rgba(60, 60, 67, 0.3)", flexDirection: rtl ? "row-reverse" : "row", alignItems: "center" }, (
|
|
45
|
-
optionValueText: Object.assign({ fontSize: 14, textAlign: "left" }, (
|
|
44
|
+
optionContainer: Object.assign({ width: "100%", height: (0, utils_1.hp)(6), justifyContent: "space-between", borderBottomWidth: 1, borderBottomColor: "rgba(60, 60, 67, 0.3)", flexDirection: rtl ? "row-reverse" : "row", alignItems: "center" }, (_d = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _d === void 0 ? void 0 : _d.optionContainerStyle),
|
|
45
|
+
optionValueText: Object.assign({ fontSize: 14, textAlign: "left" }, (_e = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _e === void 0 ? void 0 : _e.optionValueText),
|
|
46
46
|
scrollView: {
|
|
47
47
|
width: "100%",
|
|
48
48
|
},
|
|
49
|
-
selectedValueText: Object.assign({ color: "#007AFF" }, (
|
|
49
|
+
selectedValueText: Object.assign({ color: "#007AFF" }, (_f = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownStyles) === null || _f === void 0 ? void 0 : _f.selectedOptionText),
|
|
50
50
|
});
|
|
51
51
|
return (react_1.default.createElement(react_native_modal_1.default, { isVisible: visible, onBackdropPress: onClose, style: { justifyContent: "flex-end", margin: 0 } },
|
|
52
52
|
react_1.default.createElement(react_native_1.View, { style: styles.modalContainer },
|
|
53
53
|
react_1.default.createElement(react_native_1.View, { style: styles.dash }),
|
|
54
54
|
react_1.default.createElement(react_native_1.View, { style: styles.row },
|
|
55
55
|
react_1.default.createElement(react_native_1.View, { style: styles.leftSpacer }),
|
|
56
|
-
react_1.default.createElement(react_native_1.Text, { style: styles.dropdownTitle }, (
|
|
56
|
+
react_1.default.createElement(react_native_1.Text, { style: styles.dropdownTitle }, (_g = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownProps) === null || _g === void 0 ? void 0 : _g.dropdownTitle),
|
|
57
57
|
react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: onClose },
|
|
58
|
-
react_1.default.createElement(react_native_1.Text, { style: styles.close }, (
|
|
58
|
+
react_1.default.createElement(react_native_1.Text, { style: styles.close }, (_h = dropdownModalProps === null || dropdownModalProps === void 0 ? void 0 : dropdownModalProps.dropdownProps) === null || _h === void 0 ? void 0 : _h.closeTitle))),
|
|
59
59
|
react_1.default.createElement(react_native_1.ScrollView, { style: styles.scrollView, showsVerticalScrollIndicator: false }, data.map((item, index) => {
|
|
60
60
|
var _a, _b;
|
|
61
61
|
const isSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === item.value;
|
package/lib/types.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ export interface DropdownProps {
|
|
|
23
23
|
titleStyle?: TextStyle;
|
|
24
24
|
selectedValueStyle?: TextStyle;
|
|
25
25
|
placeholderStyle?: TextStyle;
|
|
26
|
+
iconColor?: string;
|
|
26
27
|
dropdownModalProps: {
|
|
27
28
|
dropdownProps?: DropdownDataProps;
|
|
28
29
|
dropdownStyles?: DropdownModalStyles;
|
|
@@ -50,4 +51,5 @@ export interface DropdownModalStyles {
|
|
|
50
51
|
optionValueText?: TextStyle;
|
|
51
52
|
selectedOptionText?: TextStyle;
|
|
52
53
|
optionContainerStyle?: ViewStyle;
|
|
54
|
+
modalBackgroundColor?: string;
|
|
53
55
|
}
|