@tra-tech/react-native-kitra
Version:
UI kit for React Native
193 lines (191 loc) • 8.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Style = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _Feather = _interopRequireDefault(require("../Icons/Feather"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
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; }
/* eslint-disable no-unsafe-optional-chaining */
const windowsHeight = _reactNative.Dimensions.get('window').height;
const Dropdown = _ref => {
let {
left,
right,
theme,
typography,
data,
displayedRowValue,
displayedButtonValue,
listContainerStyle,
defaultValue = {},
buttonTitle,
rowStyle,
buttonStyle,
disabled,
buttonTextStyle,
onSelect,
rowTextStyle,
containerStyle,
iconStyle,
autoPosition = true,
testID,
buttonBackgrounColor = {
focusBackground: theme === null || theme === void 0 ? void 0 : theme.primary5,
defaultBackground: theme === null || theme === void 0 ? void 0 : theme.darkWhite
}
} = _ref;
const [visible, setVisible] = (0, _react.useState)(false);
const [selectedObject, setSelectedObject] = (0, _react.useState)(defaultValue);
const [cord, setCord] = (0, _react.useState)({
x: 0,
y: 0,
height: 0,
width: 0
});
const openAnimation = (0, _reactNativeReanimated.useSharedValue)(0);
const dropdown = (0, _react.useRef)(null);
const rightElement = (0, _react.useMemo)(() => typeof right === 'function' ? right(visible) : right, [visible, right]);
const leftElement = (0, _react.useMemo)(() => typeof left === 'function' ? left(visible) : left, [visible, left]);
const dropdownAnimation = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
rotate: `${openAnimation.value * 180}deg`
}]
}), []);
const isObjectSelected = Object.keys(selectedObject).length === 0;
const isSelectedObject = value => displayedButtonValue(selectedObject) === displayedButtonValue(value);
(0, _react.useLayoutEffect)(() => {
var _dropdown$current;
dropdown === null || dropdown === void 0 ? void 0 : (_dropdown$current = dropdown.current) === null || _dropdown$current === void 0 ? void 0 : _dropdown$current.measure((x, y, width, height, pageX, pageY) => {
setCord({
width,
height,
x: pageX,
y: pageY
});
});
}, [visible]);
(0, _react.useEffect)(() => {
openAnimation.value = (0, _reactNativeReanimated.withSpring)(visible ? 1 : 0);
}, [visible]);
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
testID: testID,
style: [containerStyle, {
opacity: disabled ? 0.5 : 1,
zIndex: visible ? 1000 : 0
}]
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
ref: dropdown,
activeOpacity: 0.9,
disabled: disabled,
onLayout: event => setCord(event.nativeEvent.layout),
onPress: () => {
setVisible(!visible);
},
style: [Style.button, buttonStyle, {
backgroundColor: visible ? buttonBackgrounColor.focusBackground : buttonBackgrounColor.defaultBackground
}]
}, leftElement, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Text, {
numberOfLines: 1,
key: displayedButtonValue(selectedObject),
entering: _reactNativeReanimated.FadeIn.delay(100),
exiting: _reactNativeReanimated.FadeOut,
style: [{
flex: 1,
marginLeft: 12,
color: isObjectSelected || disabled ? theme === null || theme === void 0 ? void 0 : theme.grey : theme === null || theme === void 0 ? void 0 : theme.primary
}, typography === null || typography === void 0 ? void 0 : typography.body.medium, buttonTextStyle]
}, isObjectSelected ? buttonTitle || 'Please Select' : displayedButtonValue(selectedObject)), rightElement || /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [Style.rightIcon, {
backgroundColor: visible ? buttonBackgrounColor.focusBackground : buttonBackgrounColor.defaultBackground
}, iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.container]
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: dropdownAnimation
}, /*#__PURE__*/_react.default.createElement(_Feather.default, {
name: "chevron-down",
size: 14,
color: (iconStyle === null || iconStyle === void 0 ? void 0 : iconStyle.color) || (visible ? theme === null || theme === void 0 ? void 0 : theme.primary : theme === null || theme === void 0 ? void 0 : theme.grey)
})))), visible && cord.x >= 0 && cord.y >= 0 && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
entering: _reactNativeReanimated.FadeIn,
exiting: _reactNativeReanimated.FadeOut,
style: [Style.listContainer, {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.darkWhite,
width: cord === null || cord === void 0 ? void 0 : cord.width,
left: 0
}, listContainerStyle, autoPosition ? windowsHeight - (cord === null || cord === void 0 ? void 0 : cord.y) <= windowsHeight / 3 ? {
bottom: (cord === null || cord === void 0 ? void 0 : cord.height) + 5
} : {
top: (cord === null || cord === void 0 ? void 0 : cord.height) + 5
} : {
top: (cord === null || cord === void 0 ? void 0 : cord.height) + 5
}]
}, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.ScrollView, {
nestedScrollEnabled: true
}, data === null || data === void 0 ? void 0 : data.map((value, index) => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.8,
key: index,
onPress: () => {
setSelectedObject(value);
setVisible(false);
onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
},
style: [Style.row, {
backgroundColor: isSelectedObject(value) ? theme === null || theme === void 0 ? void 0 : theme.primary15 : theme === null || theme === void 0 ? void 0 : theme.darkWhite
}, index === data.length - 1 ? {
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5
} : null, rowStyle]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: [typography === null || typography === void 0 ? void 0 : typography.body.smedium, {
color: isSelectedObject(value) ? theme === null || theme === void 0 ? void 0 : theme.primary : theme === null || theme === void 0 ? void 0 : theme.black,
marginVertical: 10,
marginHorizontal: 10
}, rowTextStyle]
}, displayedRowValue(value)))))));
};
var _default = Dropdown;
exports.default = _default;
const Style = _reactNative.StyleSheet.create({
button: {
height: 38,
width: '100%',
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5
},
listContainer: {
zIndex: 100,
padding: 10,
height: 36 * 4.5,
width: '100%',
position: 'absolute',
borderTopWidth: 0,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.37,
elevation: 4,
borderRadius: 5
},
row: {
height: 38,
borderRadius: 3,
borderWidth: 0,
justifyContent: 'center'
},
rightIcon: {
borderRadius: 3,
paddingVertical: 2,
paddingHorizontal: 6,
marginRight: 12
}
});
exports.Style = Style;
//# sourceMappingURL=Dropdown.js.map