Skip to content

Commit 5822d2d

Browse files
palingheorghepalingheorghe
authored
Merge pull request #126 from galio-org/Alpha-1
v0.6
2 parents 639f86c + 743ceb5 commit 5822d2d

17 files changed

+1172
-636
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "galio-framework",
33
"main": "src/index.js",
4-
"version": "0.5.4",
4+
"version": "0.6.0",
55
"files": [
66
"src/"
77
],

‎src/Accordion.js

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import React, { useState, useEffect } from "react";
2+
import {
3+
Animated,
4+
TouchableWithoutFeedback,
5+
FlatList,
6+
StyleSheet,
7+
Dimensions
8+
} from "react-native";
9+
import PropTypes from "prop-types";
10+
11+
import Block from "./Block";
12+
import Icon from "./Icon";
13+
import Text from "./Text";
14+
import GalioTheme from "./theme";
15+
16+
const { width } = Dimensions.get("screen");
17+
18+
//
19+
function AccordionContent({ content, contentStyle }) {
20+
return <Text style={[styles.content, contentStyle]}>{content}</Text>;
21+
}
22+
23+
function AccordionHeader({
24+
expanded,
25+
expandedIcon,
26+
headerStyle,
27+
icon,
28+
title,
29+
chapterIcon
30+
}) {
31+
return (
32+
<Block row middle style={[{ padding: 6 }, headerStyle]}>
33+
{chapterIcon ? (
34+
<Icon
35+
name={chapterIcon.name}
36+
family={chapterIcon.family}
37+
size={chapterIcon.size || 14}
38+
color={chapterIcon.color || GalioTheme.COLORS.PRIMARY}
39+
style={chapterIcon.style || { marginRight: 5 }}
40+
/>
41+
) : null}
42+
<Block row space="between" middle flex>
43+
<Text size={16}>{title}</Text>
44+
{expanded
45+
? expandedIcon || (
46+
<Icon
47+
name="keyboard-arrow-up"
48+
family="material"
49+
size={16}
50+
color={GalioTheme.COLORS.MUTED}
51+
/>
52+
)
53+
: icon || (
54+
<Icon
55+
name="keyboard-arrow-down"
56+
family="material"
57+
size={16}
58+
color={GalioTheme.COLORS.MUTED}
59+
/>
60+
)}
61+
</Block>
62+
</Block>
63+
);
64+
}
65+
66+
function AccordionAnimation({ children, style }) {
67+
const [fade, setFade] = useState(new Animated.Value(0.3));
68+
69+
useEffect(() => {
70+
Animated.timing(fade, {
71+
toValue: 1,
72+
duration: 400,
73+
useNativeDriver: true
74+
}).start();
75+
});
76+
77+
return (
78+
<Animated.View style={{ ...style, opacity: fade }}>
79+
{children}
80+
</Animated.View>
81+
);
82+
}
83+
84+
function AccordionItem({
85+
expanded,
86+
expandedIcon,
87+
headerStyle,
88+
contentStyle,
89+
icon,
90+
index,
91+
item,
92+
onAccordionClose,
93+
onAccordionOpen,
94+
setSelected
95+
}) {
96+
return (
97+
<Block>
98+
<TouchableWithoutFeedback
99+
onPress={() => {
100+
onAccordionOpen && !expanded && onAccordionOpen(item, index);
101+
onAccordionClose && expanded && onAccordionClose(item, index);
102+
setSelected(index);
103+
}}
104+
>
105+
<Block>
106+
<AccordionHeader
107+
expanded={expanded}
108+
expandedIcon={expandedIcon}
109+
headerStyle={headerStyle}
110+
icon={icon}
111+
title={item.title}
112+
chapterIcon={item.icon}
113+
/>
114+
</Block>
115+
</TouchableWithoutFeedback>
116+
{expanded ? (
117+
<AccordionAnimation>
118+
<AccordionContent
119+
content={item.content}
120+
contentStyle={contentStyle}
121+
/>
122+
</AccordionAnimation>
123+
) : null}
124+
</Block>
125+
);
126+
}
127+
128+
function Accordion({
129+
theme,
130+
dataArray,
131+
icon,
132+
expandedIcon,
133+
headerStyle,
134+
contentStyle,
135+
opened,
136+
onAccordionOpen,
137+
onAccordionClose,
138+
listStyle,
139+
style
140+
}) {
141+
const [selected, setSelected] = useState(opened);
142+
143+
return (
144+
<Block style={[styles.container, style]}>
145+
<FlatList
146+
data={dataArray}
147+
extraData={selected}
148+
style={listStyle}
149+
keyExtractor={(item, index) => String(index)}
150+
renderItem={({ item, index }) => (
151+
<AccordionItem
152+
key={String(index)}
153+
expanded={selected === index}
154+
expandedIcon={expandedIcon}
155+
icon={icon}
156+
headerStyle={headerStyle}
157+
contentStyle={contentStyle}
158+
onAccordionOpen={onAccordionOpen}
159+
onAccordionClose={onAccordionClose}
160+
item={item}
161+
index={index}
162+
setSelected={s => setSelected(selected === s ? undefined : s)}
163+
/>
164+
)}
165+
/>
166+
</Block>
167+
);
168+
}
169+
170+
Accordion.propTypes = {
171+
theme: PropTypes.any,
172+
dataArray: PropTypes.array,
173+
opened: PropTypes.number,
174+
listStyle: PropTypes.any,
175+
style: PropTypes.any,
176+
icon: PropTypes.any,
177+
expandedIcon: PropTypes.any,
178+
headerStyle: PropTypes.any,
179+
contentStyle: PropTypes.any,
180+
onAccordionClose: PropTypes.func,
181+
onAccordionOpen: PropTypes.func,
182+
};
183+
184+
Accordion.defaultProps = {
185+
theme: GalioTheme,
186+
opened: 0
187+
};
188+
189+
const styles = StyleSheet.create({
190+
container: {
191+
flex: 1,
192+
width: width * 0.8,
193+
borderRadius: 16,
194+
padding: 8,
195+
shadowColor: "black",
196+
shadowOffset: { width: 0, height: 1 },
197+
shadowOpacity: 0.2,
198+
shadowRadius: 4,
199+
backgroundColor: 'white'
200+
},
201+
header: {
202+
padding: 6
203+
},
204+
content: {
205+
padding: 10
206+
}
207+
});
208+
209+
export default Accordion;

‎src/Block.js

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,64 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import { View, StyleSheet, SafeAreaView } from 'react-native';
33
import PropTypes from 'prop-types';
44
import GalioTheme, { withGalio } from './theme';
55

6-
class Block extends Component {
7-
render() {
8-
const {
9-
row,
10-
flex,
11-
center,
12-
middle,
13-
top,
14-
bottom,
15-
right,
16-
left,
17-
shadow,
18-
space,
19-
fluid,
20-
height,
21-
shadowColor,
22-
card,
23-
width,
24-
safe,
25-
children,
26-
style,
27-
styles,
28-
...props
29-
} = this.props;
6+
function Block({
7+
row,
8+
flex,
9+
center,
10+
middle,
11+
top,
12+
bottom,
13+
right,
14+
left,
15+
shadow,
16+
space,
17+
fluid,
18+
height,
19+
shadowColor,
20+
card,
21+
width,
22+
safe,
23+
children,
24+
style,
25+
styles,
26+
...rest
27+
}) {
3028

31-
const styleBlock = [
32-
styles.block,
33-
row && styles.row,
34-
flex && { flex: flex === true ? 1 : flex },
35-
center && styles.center,
36-
middle && styles.middle,
37-
top && styles.top,
38-
bottom && styles.bottom,
39-
right && styles.right,
40-
left && styles.left,
41-
space && { justifyContent: `space-${space}` },
42-
shadow && styles.shadow,
43-
fluid && styles.fluid,
44-
card && styles.card,
45-
height && { height },
46-
width && { width },
47-
shadowColor && { shadowColor },
48-
style,
49-
];
50-
51-
if (safe) {
52-
return (
53-
<SafeAreaView style={styleBlock} {...props}>
54-
{children}
55-
</SafeAreaView>
56-
);
57-
}
29+
const styleBlock = [
30+
styles.block,
31+
row && styles.row,
32+
flex && { flex: flex === true ? 1 : flex },
33+
center && styles.center,
34+
middle && styles.middle,
35+
top && styles.top,
36+
bottom && styles.bottom,
37+
right && styles.right,
38+
left && styles.left,
39+
space && { justifyContent: `space-${space}` },
40+
shadow && styles.shadow,
41+
fluid && styles.fluid,
42+
card && styles.card,
43+
height && { height },
44+
width && { width },
45+
shadowColor && { shadowColor },
46+
style,
47+
];
5848

49+
if (safe) {
5950
return (
60-
<View {...props} style={styleBlock}>
51+
<SafeAreaView style={styleBlock} {...rest}>
6152
{children}
62-
</View>
53+
</SafeAreaView>
6354
);
6455
}
56+
57+
return (
58+
<View style={styleBlock} {...rest}>
59+
{children}
60+
</View>
61+
);
6562
}
6663

6764
Block.defaultProps = {
@@ -143,7 +140,10 @@ const styles = theme =>
143140
},
144141
shadow: {
145142
shadowColor: theme.COLORS.BLOCK,
146-
shadowOffset: { width: 0, height: 3 },
143+
shadowOffset: {
144+
width: 0,
145+
height: 3,
146+
},
147147
shadowOpacity: theme.SIZES.BLOCK_SHADOW_OPACITY,
148148
shadowRadius: theme.SIZES.BLOCK_SHADOW_RADIUS,
149149
elevation: theme.SIZES.ANDROID_ELEVATION,

0 commit comments

Comments
 (0)