1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { Animated } from 'react-native';
|
14 | import ListItemBase from './ListItemBase';
|
15 | import ListItemContent from './ListItemContent';
|
16 | import { withTheme } from '../config';
|
17 | import { Icon } from '../icons/Icon';
|
18 | const Accordion = (_a) => {
|
19 | var { children, isExpanded, icon, expandIcon, content, noRotation, noIcon, animation = {
|
20 | duration: 350,
|
21 | type: 'timing',
|
22 | } } = _a, props = __rest(_a, ["children", "isExpanded", "icon", "expandIcon", "content", "noRotation", "noIcon", "animation"]);
|
23 | const { current: transition } = React.useRef(new Animated.Value(0));
|
24 | const startAnimation = React.useCallback(() => {
|
25 | if (typeof animation !== 'boolean') {
|
26 | Animated[animation.type || 'timing'](transition, {
|
27 | toValue: Number(isExpanded),
|
28 | useNativeDriver: false,
|
29 | duration: animation.duration || 350,
|
30 | }).start();
|
31 | }
|
32 | }, [isExpanded, transition, animation]);
|
33 | React.useEffect(() => {
|
34 | startAnimation();
|
35 | }, [isExpanded, startAnimation]);
|
36 | const rotate = noRotation || (typeof animation === 'boolean' && animation)
|
37 | ? '0deg'
|
38 | : transition.interpolate({
|
39 | inputRange: [0, 1],
|
40 | outputRange: ['0deg', '-180deg'],
|
41 | });
|
42 | return (<>
|
43 | <ListItemBase {...props}>
|
44 | {React.isValidElement(content) ? content : <ListItemContent />}
|
45 | {!noIcon && (<Animated.View style={{
|
46 | transform: [
|
47 | {
|
48 | rotate,
|
49 | },
|
50 | ],
|
51 | }}>
|
52 | {icon ? (<Icon {...(expandIcon
|
53 | ? isExpanded
|
54 | ? expandIcon
|
55 | : icon
|
56 | : icon)}/>) : (<Icon name={'chevron-down'} type="material-community"/>)}
|
57 | </Animated.View>)}
|
58 | </ListItemBase>
|
59 | <Animated.View style={[
|
60 | Boolean(animation) && {
|
61 | maxHeight: transition.interpolate({
|
62 | inputRange: [0, 1],
|
63 | outputRange: ['0%', '100%'],
|
64 | }),
|
65 | opacity: transition,
|
66 | },
|
67 | ]}>
|
68 | {children}
|
69 | </Animated.View>
|
70 | </>);
|
71 | };
|
72 | export default withTheme(Accordion, 'ListItemAccordion');
|