Skip to content

Commit 7ec5436

Browse files
csathcsath
committed
added initial view
1 parent 84bffb9 commit 7ec5436

File tree

4 files changed

+198
-0
lines changed

4 files changed

+198
-0
lines changed

‎index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import Breadcrumb from './src/breadcrumb';
2+
export default Breadcrumb;

‎package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "react-native-breadcrumb",
3+
"version": "1.0.0",
4+
"description": "A node module for creating breadcrumbs in both ios and android react-native projects.",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/csath/react-native-breadcrumb.git"
12+
},
13+
"keywords": [
14+
"react-native",
15+
"android",
16+
"ios",
17+
"breadcrumb"
18+
],
19+
"author": "Chanaka Athurugiriya <chanakaathurugiriya@gmail.com>",
20+
"license": "ISC",
21+
"bugs": {
22+
"url": "https://github.com/csath/react-native-breadcrumb/issues"
23+
},
24+
"homepage": "https://github.com/csath/react-native-breadcrumb#readme"
25+
}

‎src/.DS_Store‎

6 KB
Binary file not shown.

‎src/breadcrumb.js‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import React, { Component } from 'react';
2+
import {
3+
View,
4+
ViewPropTypes,
5+
TouchableOpacity,
6+
StyleSheet,
7+
Text,
8+
Platform
9+
} from 'react-native';
10+
import PropTypes from 'prop-types';
11+
12+
const HEIGHT = 23;
13+
const COLOR = '#e52b50';
14+
const TEXT_COLOR = '#fff';
15+
const DISABLE_TEXT_COLOR = '#f4f4f4'
16+
17+
const Crumb = ({ isCrumbActive, index, text, firstCrumbStyle, lastCrumbStyle, crumbStyle, activeTabStyle, crumbTextStyle, activeCrumbTextStyle,
18+
onCrumbPress, height, triangleHeadStyle, triangleTailStyle }) => {
19+
return (
20+
<TouchableOpacity
21+
style={[
22+
styles.crumbStyle,
23+
crumbStyle,
24+
isCrumbActive ? [styles.activeCrumbStyle, activeTabStyle] : {},
25+
firstCrumbStyle,
26+
lastCrumbStyle,
27+
{ height }]}
28+
onPress={() => onCrumbPress(index)}
29+
activeOpacity={1}
30+
>
31+
{Platform.OS === 'android' && !firstCrumbStyle ? <View style={{ width: height / 2.0, height, backgroundColor: 'transparent' }} /> : null}
32+
<View style={styles.crumbContainer}>
33+
{isCrumbActive && !firstCrumbStyle ? <View style={[styles.leftTriangleContainer, styles.triangleTail, triangleTailStyle, { left: - height / 2 }, Platform.OS === 'android' ? { top: -2 } : {}]} /> : null}
34+
<Text
35+
style={[
36+
styles.crumbTextStyle,
37+
crumbTextStyle,
38+
isCrumbActive ? [styles.activeCrumbTextStyle, activeCrumbTextStyle] : {}]}
39+
numberOfLines={1}
40+
ellipsizeMode="tail"
41+
>
42+
{text}
43+
</Text>
44+
{isCrumbActive && !lastCrumbStyle ? <View style={[styles.rightTriangleContainer, styles.triangleHead, triangleHeadStyle, { right: - height / 2 }, Platform.OS === 'android' ? { top: -2 } : {}]} /> : null}
45+
</View>
46+
{Platform.OS === 'android' && !lastCrumbStyle ? <View style={{ width: height / 2.0 , height, backgroundColor: 'white' }} /> : null}
47+
</TouchableOpacity>
48+
);
49+
};
50+
51+
const handleCrumbPress = (index, flowDepth, onCrumbPress) => {
52+
if (flowDepth !== index) {
53+
onCrumbPress(index);
54+
}
55+
};
56+
57+
const Breadcrumb = ({ flowDepth, entities, borderRadius, crumbsContainerStyle, crumbStyle, activeCrumbStyle, crumbTextStyle, activeCrumbTextStyle, onCrumbPress, isTouchable, height
58+
}) => {
59+
const firstCrumbStyle = [{ borderTopLeftRadius: borderRadius - 1, borderBottomLeftRadius: borderRadius - 1 }];
60+
const lastCrumbStyle = [{ borderTopRightRadius: borderRadius - 1, borderBottomRightRadius: borderRadius - 1 }];
61+
const triangleTailStyle = height ? { borderTopWidth: height / 2.0, borderBottomWidth: height / 2.0, borderLeftWidth: height / 2.0 } : {};
62+
const triangleHeadStyle = height ? { borderTopWidth: height / 2.0, borderBottomWidth: height / 2.0, borderLeftWidth: height / 2.0 } : {};
63+
64+
return (
65+
<View
66+
style={[styles.crumbsContainerStyle, borderRadius ? { borderRadius } : {}, crumbsContainerStyle]}
67+
removeClippedSubviews={false}
68+
>
69+
{
70+
entities.map((item, index) => {
71+
return (
72+
<Crumb
73+
key={index}
74+
index={index}
75+
isCrumbActive={flowDepth === index}
76+
text={item}
77+
onCrumbPress={isTouchable ? index => handleCrumbPress(index, flowDepth, onCrumbPress) : () => { }}
78+
firstCrumbStyle={index === 0 ? firstCrumbStyle : null}
79+
lastCrumbStyle={index === entities.length - 1 ? lastCrumbStyle : null}
80+
crumbStyle={crumbStyle}
81+
activeCrumbStyle={activeCrumbStyle}
82+
crumbTextStyle={[crumbTextStyle, index < flowDepth ? { color: TEXT_COLOR } : { color: DISABLE_TEXT_COLOR }]}
83+
activeCrumbTextStyle={activeCrumbTextStyle}
84+
height={height ? height : HEIGHT}
85+
triangleTailStyle={triangleTailStyle}
86+
triangleHeadStyle={triangleHeadStyle}
87+
/>
88+
);
89+
})
90+
}
91+
</View>
92+
);
93+
};
94+
95+
Breadcrumb.propTypes = {
96+
entities: PropTypes.array.isRequired,
97+
flowDepth: PropTypes.number.isRequired,
98+
isTouchable: PropTypes.bool.isRequired,
99+
onCrumbPress: PropTypes.func,
100+
spaceRatio: PropTypes.array,
101+
crumbsContainerStyle: ViewPropTypes.style,
102+
borderRadius: PropTypes.number,
103+
crumbStyle: ViewPropTypes.style,
104+
activeCrumbStyle: ViewPropTypes.style,
105+
crumbTextStyle: Text.propTypes.style,
106+
activeCrumbTextStyle: Text.propTypes.style,
107+
height: PropTypes.number
108+
};
109+
110+
const styles = StyleSheet.create({
111+
crumbsContainerStyle: {
112+
backgroundColor: 'transparent',
113+
flexDirection: 'row',
114+
borderWidth: 1,
115+
borderColor: '#d6d6d6',
116+
justifyContent: 'space-between'
117+
},
118+
crumbStyle: {
119+
flexDirection: 'row',
120+
justifyContent: 'center',
121+
backgroundColor: 'white',
122+
height: HEIGHT
123+
},
124+
activeCrumbStyle: {
125+
backgroundColor: COLOR,
126+
borderColor: COLOR
127+
},
128+
crumbTextStyle: {
129+
color: COLOR,
130+
fontSize: 12
131+
},
132+
activeCrumbTextStyle: {
133+
color: 'white'
134+
},
135+
crumbContainer: {
136+
flexDirection: 'row',
137+
alignSelf: 'center',
138+
alignItems: 'center',
139+
paddingHorizontal: 5
140+
},
141+
rightTriangleContainer: {
142+
position: 'absolute',
143+
right: 0,
144+
zIndex: 1
145+
},
146+
leftTriangleContainer: {
147+
position: 'absolute',
148+
left: 0,
149+
zIndex: 1
150+
},
151+
triangleHead: {
152+
borderTopWidth: HEIGHT / 2.0,
153+
borderRightWidth: 0,
154+
borderBottomWidth: HEIGHT / 2.0,
155+
borderLeftWidth: HEIGHT / 2.0,
156+
borderColor: COLOR,
157+
borderTopColor: 'white',
158+
borderBottomColor: 'white',
159+
},
160+
triangleTail: {
161+
borderTopWidth: HEIGHT / 2.0,
162+
borderRightWidth: 0,
163+
borderBottomWidth: HEIGHT / 2.0,
164+
borderLeftWidth: HEIGHT / 2.0,
165+
borderColor: 'white',
166+
borderTopColor: COLOR,
167+
borderBottomColor: COLOR,
168+
}
169+
});
170+
171+
export default Breadcrumb;

0 commit comments

Comments
 (0)