react-native-accordion-wrapper
Version:
A handy wrapper of accordion behavior for react native components
81 lines (80 loc) • 3.49 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View, } from 'react-native';
const AccordionItem = (_a) => {
var _b;
var { customHeaderItem } = _a, configs = __rest(_a, ["customHeaderItem"]);
const [isExpanded, setIsExpanded] = React.useState((_b = configs.initialExpandedState) !== null && _b !== void 0 ? _b : false);
React.useEffect(() => {
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}, []);
React.useEffect(() => {
if (isExpanded !== configs.initialExpandedState) {
toggleExpandedState(configs.initialExpandedState);
}
}, [configs.initialExpandedState]);
React.useEffect(() => {
var _a;
(_a = configs.onExpandStateChange) === null || _a === void 0 ? void 0 : _a.call(configs, isExpanded);
}, [isExpanded]);
const changeExpandedState = () => {
var _a;
(_a = configs.onPress) === null || _a === void 0 ? void 0 : _a.call(configs);
toggleExpandedState();
};
const toggleExpandedState = (forcedValue) => {
if (configs.isExpandable === false)
return;
LayoutAnimation.configureNext({
duration: 200,
update: {
type: 'easeIn',
},
});
setIsExpanded((p) => forcedValue !== null && forcedValue !== void 0 ? forcedValue : !p);
};
return (React.createElement(View, { style: [styles.itemContainer, configs.itemWrapperStyle] },
customHeaderItem !== undefined ? customHeaderItem(Object.assign(Object.assign({}, configs), { isExpanded, onPress: changeExpandedState })) :
React.createElement(TouchableOpacity, { onPress: changeExpandedState },
React.createElement(View, { style: [styles.itemHeader, configs.headerStyle] },
React.createElement(Text, { style: configs.titleStyle }, configs.title),
configs.rightChevronIcon !== undefined &&
React.createElement(View, { style: Object.assign(Object.assign({}, styles.chevronIcon), { transform: [{ rotate: `${isExpanded ? '0' : '180'}deg` }] }) }, configs.rightChevronIcon))),
isExpanded && (React.createElement(View, { style: configs.childrenWrapperStyle }, configs.children))));
};
const styles = StyleSheet.create({
itemSeperator: {
width: '100%',
},
chevronIcon: {
justifyContent: "center",
alignContent: "center",
},
itemHeader: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 9,
paddingBottom: 10,
backgroundColor: '#F1F1F1',
borderBottomColor: '#DEDEDE',
borderBottomWidth: 1,
},
itemContainer: {
width: '100%',
},
});
export default AccordionItem;