@mustapha-ghlissi/react-native-select-picker
Version:
React Native Select Picker: Reanimated dropdown select compatible with Android, IOS and Web
164 lines (163 loc) • 7.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _react = _interopRequireWildcard(require("react"));
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
var _style = _interopRequireDefault(require("./style"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Dropdown = /*#__PURE__*/(0, _react.memo)(({
items,
displayItems = 4,
placeholder,
styles,
icon = 'chevron-down',
outlineColor = '#145DA0',
borderColor = '#E2E2E2',
borderWidth = 1,
multiple = false,
checkIcon = 'check',
inline = false,
onSelectChange,
animationDuration = 200
}) => {
const [selectedItems, setSelectedItems] = (0, _react.useState)([]);
const [selectedItem, setSelectedItem] = (0, _react.useState)(null);
const iconRotate = (0, _reactNativeReanimated.useSharedValue)('0deg');
const animatedIconStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
rotate: (0, _reactNativeReanimated.withSpring)(iconRotate.value)
}]
}));
const maxItemHeight = styles && styles.dropdownItem && styles.dropdownItem.height && typeof styles.dropdownItem.height === 'number' ? styles.dropdownItem.height : _style.default.dropdownItem.height;
const maxListHeight = displayItems * maxItemHeight;
const [isOpenDropdown, setIsOpendropdown] = (0, _react.useState)(false);
const dropdownListHeight = (0, _reactNativeReanimated.useSharedValue)(maxListHeight);
const deviredDropdownListHeight = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withTiming)(dropdownListHeight.value * Number(isOpenDropdown), {
duration: animationDuration
}));
const animatedDropdownListStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
height: deviredDropdownListHeight.value
}));
const activeItemStyle = {
..._style.default.activeDropdownItem,
...styles?.activeItem
};
const activeItemTextStyle = {
..._style.default.activeDropdownItemText,
...styles?.activeItemText
};
const togglerHeight = styles && styles.dropdownToggler && styles.dropdownToggler.height ? styles.dropdownToggler.height : _style.default.dropdownToggler.height;
const getBorderColor = () => ({
borderColor: isOpenDropdown ? outlineColor : borderColor
});
const innerStyles = _reactNative.StyleSheet.create({
dropdownList: {
display: isOpenDropdown ? 'flex' : 'none',
top: inline ? 0 : Number(togglerHeight) + borderWidth * 2,
position: inline ? 'relative' : 'absolute',
...getBorderColor()
}
});
const toggleDropdown = () => {
setIsOpendropdown(!isOpenDropdown);
iconRotate.value = iconRotate.value === '0deg' ? '180deg' : '0deg';
};
const renderIcon = () => {
if ( /*#__PURE__*/(0, _react.isValidElement)(icon)) {
return icon;
}
if (typeof icon === 'string') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MaterialCommunityIcons.default, {
name: icon,
size: 32,
color: "#000"
});
}
return null;
};
const renderSelectedItems = () => {
if (multiple && selectedItems.length) {
return selectedItems.map(_selectedItem => _selectedItem.label).join(', ');
}
if (selectedItem) {
return selectedItem?.label;
}
return placeholder ?? 'Select an option';
};
const isSelectedItem = item => {
if (selectedItems.length) {
return selectedItems.find(_selectedItem => _selectedItem.value === item.value) !== undefined;
}
return selectedItem?.value === item.value;
};
(0, _react.useEffect)(() => {
const changedSelected = selectedItem || selectedItems;
onSelectChange(changedSelected);
}, [onSelectChange, selectedItem, selectedItems]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [_style.default.dropdownInputContainer, styles && styles.inputContainer, getBorderColor(), {
borderWidth
}, isOpenDropdown && _style.default.focusedDropdownInputContainer],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
style: [_style.default.dropdownToggler, styles && styles.dropdownToggler],
android_ripple: {
foreground: true,
color: 'rgba(0,0,0,0.3)'
},
onPress: toggleDropdown,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [_style.default.dropdownText, styles && styles.inputText, (selectedItems || selectedItem) && _style.default.activeDropdownText],
numberOfLines: 1,
children: renderSelectedItems()
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [_style.default.iconContainer, animatedIconStyles, styles && styles.iconContainer],
children: renderIcon()
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [_style.default.dropdownList, styles && styles.dropdownList, {
borderWidth
}, animatedDropdownListStyle, innerStyles.dropdownList],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
showsVerticalScrollIndicator: true,
children: items.map((item, itemIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
android_ripple: {
color: 'rgba(0,0,0,0.3)'
},
style: [_style.default.dropdownItem, styles && styles.dropdownItem, isSelectedItem(item) && activeItemStyle],
onPress: () => {
if (multiple) {
const existItemIndex = selectedItems.findIndex(selectedItem => selectedItem.value === item.value);
if (existItemIndex > -1) {
setSelectedItems([...selectedItems.filter((_, index) => index !== existItemIndex)]);
} else {
setSelectedItems([...selectedItems, item]);
}
} else {
setSelectedItem(item);
toggleDropdown();
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [_style.default.dropdownItemText, styles && styles.dropdownItemText, isSelectedItem(item) && activeItemTextStyle],
children: item.label
}), multiple && isSelectedItem(item) && (typeof checkIcon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MaterialCommunityIcons.default, {
name: checkIcon,
size: 26,
color: '#FFF'
}) : checkIcon)]
}, `dropdownItemIndex_${itemIndex}`))
})
})]
});
});
var _default = exports.default = Dropdown;
//# sourceMappingURL=Dropdown.js.map