@tra-tech/react-native-kitra
Version:
UI kit for React Native
138 lines (137 loc) • 6.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _flashList = require("@shopify/flash-list");
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _KitraProvider = require("../../core/KitraProvider");
var _Octicons = _interopRequireDefault(require("../Icons/Octicons"));
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; }
const AnimatedIcon = _reactNativeReanimated.default.createAnimatedComponent(_Octicons.default);
const AccordionList = _ref => {
let {
data,
label,
left,
right,
labelContainerStyle,
labelStyle,
rowTextStyle,
rowStyle,
onSelect,
onExpand,
theme,
typography,
itemDisplay,
testID
} = _ref;
const [expanded, setExpanded] = (0, _react.useState)(false);
const listHeight = (0, _reactNativeReanimated.useSharedValue)(0);
const iconRotation = (0, _reactNativeReanimated.useSharedValue)(0);
const [contentHeight, setContentHeight] = (0, _react.useState)(0);
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
height: listHeight.value
}), [contentHeight]);
const iconStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
rotateZ: `${iconRotation.value}deg`
}]
}), [contentHeight]);
const handleListOpen = () => {
if (expanded) {
listHeight.value = (0, _reactNativeReanimated.withTiming)(0);
iconRotation.value = (0, _reactNativeReanimated.withTiming)(0);
} else {
onExpand === null || onExpand === void 0 ? void 0 : onExpand();
listHeight.value = (0, _reactNativeReanimated.withTiming)(contentHeight, {
duration: 600
});
iconRotation.value = (0, _reactNativeReanimated.withTiming)(180, {
duration: 200
});
}
setExpanded(prev => !prev);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.8,
onPress: handleListOpen,
testID: testID
}, /*#__PURE__*/React.createElement(_reactNative.View, {
style: [{
backgroundColor: expanded ? theme === null || theme === void 0 ? void 0 : theme.primary15 : theme === null || theme === void 0 ? void 0 : theme.primary5
}, styles.labelContianer, labelContainerStyle]
}, left && left(expanded), /*#__PURE__*/React.createElement(_reactNative.Text, {
style: [{
color: expanded ? theme === null || theme === void 0 ? void 0 : theme.primary : theme === null || theme === void 0 ? void 0 : theme.lightBlack
}, typography === null || typography === void 0 ? void 0 : typography.body.medium, styles.labelText, labelStyle]
}, label), right && right(expanded), /*#__PURE__*/React.createElement(_reactNative.View, {
style: [{
backgroundColor: expanded ? theme === null || theme === void 0 ? void 0 : theme.primary30 : theme === null || theme === void 0 ? void 0 : theme.lightGrey
}, styles.iconContainer]
}, /*#__PURE__*/React.createElement(AnimatedIcon, {
color: expanded ? theme === null || theme === void 0 ? void 0 : theme.primary : theme === null || theme === void 0 ? void 0 : theme.disabledLight,
name: "chevron-down",
style: iconStyle,
size: 20
})))), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
style: [animatedStyle, {
overflow: 'hidden'
}]
}, /*#__PURE__*/React.createElement(_flashList.FlashList, {
bounces: false,
data: data,
estimatedItemSize: 21,
onContentSizeChange: (w, h) => {
if (h > 0 && h !== contentHeight) setContentHeight(h);
},
renderItem: _ref2 => {
let {
item
} = _ref2;
return /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.9,
onPress: () => onSelect(item)
}, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
entering: _reactNativeReanimated.FadeInUp,
exiting: _reactNativeReanimated.FadeOut,
style: [styles.itemContainer, {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.primary5
}, rowStyle]
}, /*#__PURE__*/React.createElement(_reactNative.Text, {
style: [{
textAlign: 'center',
color: theme === null || theme === void 0 ? void 0 : theme.grey
}, typography === null || typography === void 0 ? void 0 : typography.body.smedium, rowTextStyle]
}, itemDisplay(item))));
}
})));
};
var _default = (0, _KitraProvider.applyDefaults)(AccordionList);
exports.default = _default;
const styles = _reactNative.StyleSheet.create({
labelContianer: {
padding: 10,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 3
},
labelText: {
textAlign: 'left',
marginHorizontal: 10,
flex: 1
},
iconContainer: {
borderRadius: 3,
paddingVertical: 6,
paddingHorizontal: 10
},
itemContainer: {
padding: 10
}
});
//# sourceMappingURL=AccordionList.js.map