react-native-styled-badges 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/BadgeStack/index.js.map +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/package.json +4 -4
- package/src/BadgeStack/index.tsx +126 -126
- package/src/index.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Text","StyleSheet","Animated","BadgeStack","badges","position","animate","badgeStyle","textStyle","children","positionStyle","getPositionStyle","renderBadges","map","badge","index","offset","animStyle","opacity","fadeInAnim","createElement","key","label","style","styles","top","includes","undefined","bottom","backgroundColor","color","badgeText","labelColor","textDecorationStyle","useRef","Value","current","useEffect","timing","toValue","duration","useNativeDriver","start","create","container","stackContainer","zIndex","elevation","paddingHorizontal","paddingVertical","borderRadius","marginVertical","alignSelf","fontSize","fontWeight","left","right"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\
|
|
1
|
+
{"version":3,"names":["React","View","Text","StyleSheet","Animated","BadgeStack","badges","position","animate","badgeStyle","textStyle","children","positionStyle","getPositionStyle","renderBadges","map","badge","index","offset","animStyle","opacity","fadeInAnim","createElement","key","label","style","styles","top","includes","undefined","bottom","backgroundColor","color","badgeText","labelColor","textDecorationStyle","useRef","Value","current","useEffect","timing","toValue","duration","useNativeDriver","start","create","container","stackContainer","zIndex","elevation","paddingHorizontal","paddingVertical","borderRadius","marginVertical","alignSelf","fontSize","fontWeight","left","right"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n StyleSheet,\n Animated,\n} from 'react-native';\n\nimport type { ViewStyle, TextStyle } from 'react-native';\ntype Badge = {\n label: string;\n color?: string; // Named color or hex\n labelColor?: string; // Named color or hex\n};\n\ntype Position =\n | 'top-right'\n | 'top-left'\n | 'bottom-right'\n | 'bottom-left';\n\ntype Props = {\n badges: Badge[];\n position?: Position;\n animate?: boolean;\n badgeStyle?: ViewStyle;\n textStyle?: TextStyle;\n children: React.ReactNode;\n};\n\nconst BadgeStack: React.FC<Props> = ({\n badges,\n position = 'top-right',\n animate = false,\n badgeStyle,\n textStyle,\n children,\n}) => {\n const positionStyle = getPositionStyle(position);\n\n const renderBadges = () => {\n return badges.map((badge, index) => {\n const offset = index * 22;\n const animStyle = animate ? { opacity: fadeInAnim } : {};\n return (\n <Animated.View\n key={badge.label + index}\n style={[\n styles.badge,\n {\n top: position.includes('top') ? offset : undefined,\n bottom: position.includes('bottom') ? offset : undefined,\n backgroundColor: badge.color || '#007AFF',\n \n },\n badgeStyle,\n animStyle,\n ]}\n >\n <Text style={[styles.badgeText, textStyle,{color:badge.labelColor ||\"#fff\",textDecorationStyle:'dotted'}]}>{badge.label}</Text>\n </Animated.View>\n );\n });\n };\n\n // Animation (optional)\n const fadeInAnim = React.useRef(new Animated.Value(0)).current;\n React.useEffect(() => {\n if (animate) {\n Animated.timing(fadeInAnim, {\n toValue: 1,\n duration: 500,\n useNativeDriver: true,\n }).start();\n }\n }, [animate]);\n\n\nconst styles = StyleSheet.create({\n container: {\n position: 'relative',\n },\n stackContainer: {\n position: 'absolute',\n zIndex: 10,\n elevation: 5,\n },\n badge: {\n paddingHorizontal: 8,\n paddingVertical: 3,\n borderRadius: 12,\n marginVertical: 1,\n alignSelf: 'flex-start',\n elevation: 5,\n },\n badgeText: {\n color: '#fff',\n fontSize: 10,\n fontWeight: '600',\n },\n});\n\n\n\n return (\n <View style={styles.container}>\n {children}\n <View style={[styles.stackContainer, positionStyle]}>\n {renderBadges()}\n </View>\n </View>\n );\n};\n\nfunction getPositionStyle(position: Position): ViewStyle {\n const style: ViewStyle = { position: 'absolute' };\n if (position.includes('top')) style.top = 0;\n if (position.includes('bottom')) style.bottom = 0;\n if (position.includes('left')) style.left = 0;\n if (position.includes('right')) style.right = 0;\n return style;\n}\n\n\n\nexport default BadgeStack;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as BadgeStack } from '
|
|
1
|
+
export { default as BadgeStack } from './BadgeStack';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","BadgeStack"],"sources":["index.tsx"],"sourcesContent":["export {default as BadgeStack} from '
|
|
1
|
+
{"version":3,"names":["default","BadgeStack"],"sources":["index.tsx"],"sourcesContent":["export {default as BadgeStack} from './BadgeStack';"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,UAAU,QAAO,cAAc","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-styled-badges",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A clean badge system without layout bugs",
|
|
5
5
|
"source": "./src/index.tsx",
|
|
6
6
|
"main": "./lib/module/index.js",
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
],
|
|
47
47
|
"repository": {
|
|
48
48
|
"type": "git",
|
|
49
|
-
"url": "git+https://github.com/InDataStar/react-native-badges
|
|
49
|
+
"url": "git+https://github.com/InDataStar/react-native-styled-badges/.git"
|
|
50
50
|
},
|
|
51
51
|
"author": "Lachlan Crawford <crawfordlp1@gmail.com> (https://github.com/InDataStar)",
|
|
52
52
|
"license": "MIT",
|
|
53
53
|
"bugs": {
|
|
54
|
-
"url": "https://github.com/InDataStar/react-native-badges/issues"
|
|
54
|
+
"url": "https://github.com/InDataStar/react-native-styled-badges/issues"
|
|
55
55
|
},
|
|
56
|
-
"homepage": "https://github.com/InDataStar/react-native-badges
|
|
56
|
+
"homepage": "https://github.com/InDataStar/react-native-styled-badges/#readme",
|
|
57
57
|
"publishConfig": {
|
|
58
58
|
"registry": "https://registry.npmjs.org/"
|
|
59
59
|
},
|
package/src/BadgeStack/index.tsx
CHANGED
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
View,
|
|
4
|
-
Text,
|
|
5
|
-
StyleSheet,
|
|
6
|
-
Animated,
|
|
7
|
-
} from 'react-native';
|
|
8
|
-
|
|
9
|
-
import type { ViewStyle, TextStyle } from 'react-native';
|
|
10
|
-
type Badge = {
|
|
11
|
-
label: string;
|
|
12
|
-
color?: string; // Named color or hex
|
|
13
|
-
labelColor?: string; // Named color or hex
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
type Position =
|
|
17
|
-
| 'top-right'
|
|
18
|
-
| 'top-left'
|
|
19
|
-
| 'bottom-right'
|
|
20
|
-
| 'bottom-left';
|
|
21
|
-
|
|
22
|
-
type Props = {
|
|
23
|
-
badges: Badge[];
|
|
24
|
-
position?: Position;
|
|
25
|
-
animate?: boolean;
|
|
26
|
-
badgeStyle?: ViewStyle;
|
|
27
|
-
textStyle?: TextStyle;
|
|
28
|
-
children: React.ReactNode;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const BadgeStack: React.FC<Props> = ({
|
|
32
|
-
badges,
|
|
33
|
-
position = 'top-right',
|
|
34
|
-
animate = false,
|
|
35
|
-
badgeStyle,
|
|
36
|
-
textStyle,
|
|
37
|
-
children,
|
|
38
|
-
}) => {
|
|
39
|
-
const positionStyle = getPositionStyle(position);
|
|
40
|
-
|
|
41
|
-
const renderBadges = () => {
|
|
42
|
-
return badges.map((badge, index) => {
|
|
43
|
-
const offset = index * 22;
|
|
44
|
-
const animStyle = animate ? { opacity: fadeInAnim } : {};
|
|
45
|
-
return (
|
|
46
|
-
<Animated.View
|
|
47
|
-
key={badge.label + index}
|
|
48
|
-
style={[
|
|
49
|
-
styles.badge,
|
|
50
|
-
{
|
|
51
|
-
top: position.includes('top') ? offset : undefined,
|
|
52
|
-
bottom: position.includes('bottom') ? offset : undefined,
|
|
53
|
-
backgroundColor: badge.color || '#007AFF',
|
|
54
|
-
|
|
55
|
-
},
|
|
56
|
-
badgeStyle,
|
|
57
|
-
animStyle,
|
|
58
|
-
]}
|
|
59
|
-
>
|
|
60
|
-
<Text style={[styles.badgeText, textStyle,{color:badge.labelColor ||"#fff",textDecorationStyle:'dotted'}]}>{badge.label}</Text>
|
|
61
|
-
</Animated.View>
|
|
62
|
-
);
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
// Animation (optional)
|
|
67
|
-
const fadeInAnim = React.useRef(new Animated.Value(0)).current;
|
|
68
|
-
React.useEffect(() => {
|
|
69
|
-
if (animate) {
|
|
70
|
-
Animated.timing(fadeInAnim, {
|
|
71
|
-
toValue: 1,
|
|
72
|
-
duration: 500,
|
|
73
|
-
useNativeDriver: true,
|
|
74
|
-
}).start();
|
|
75
|
-
}
|
|
76
|
-
}, [animate]);
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
const styles = StyleSheet.create({
|
|
80
|
-
container: {
|
|
81
|
-
position: 'relative',
|
|
82
|
-
},
|
|
83
|
-
stackContainer: {
|
|
84
|
-
position: 'absolute',
|
|
85
|
-
zIndex: 10,
|
|
86
|
-
elevation: 5,
|
|
87
|
-
},
|
|
88
|
-
badge: {
|
|
89
|
-
paddingHorizontal: 8,
|
|
90
|
-
paddingVertical: 3,
|
|
91
|
-
borderRadius: 12,
|
|
92
|
-
marginVertical: 1,
|
|
93
|
-
alignSelf: 'flex-start',
|
|
94
|
-
elevation: 5,
|
|
95
|
-
},
|
|
96
|
-
badgeText: {
|
|
97
|
-
color: '#fff',
|
|
98
|
-
fontSize: 10,
|
|
99
|
-
fontWeight: '600',
|
|
100
|
-
},
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
return (
|
|
106
|
-
<View style={styles.container}>
|
|
107
|
-
{children}
|
|
108
|
-
<View style={[styles.stackContainer, positionStyle]}>
|
|
109
|
-
{renderBadges()}
|
|
110
|
-
</View>
|
|
111
|
-
</View>
|
|
112
|
-
);
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
function getPositionStyle(position: Position): ViewStyle {
|
|
116
|
-
const style: ViewStyle = { position: 'absolute' };
|
|
117
|
-
if (position.includes('top')) style.top = 0;
|
|
118
|
-
if (position.includes('bottom')) style.bottom = 0;
|
|
119
|
-
if (position.includes('left')) style.left = 0;
|
|
120
|
-
if (position.includes('right')) style.right = 0;
|
|
121
|
-
return style;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
export default BadgeStack;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
View,
|
|
4
|
+
Text,
|
|
5
|
+
StyleSheet,
|
|
6
|
+
Animated,
|
|
7
|
+
} from 'react-native';
|
|
8
|
+
|
|
9
|
+
import type { ViewStyle, TextStyle } from 'react-native';
|
|
10
|
+
type Badge = {
|
|
11
|
+
label: string;
|
|
12
|
+
color?: string; // Named color or hex
|
|
13
|
+
labelColor?: string; // Named color or hex
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
type Position =
|
|
17
|
+
| 'top-right'
|
|
18
|
+
| 'top-left'
|
|
19
|
+
| 'bottom-right'
|
|
20
|
+
| 'bottom-left';
|
|
21
|
+
|
|
22
|
+
type Props = {
|
|
23
|
+
badges: Badge[];
|
|
24
|
+
position?: Position;
|
|
25
|
+
animate?: boolean;
|
|
26
|
+
badgeStyle?: ViewStyle;
|
|
27
|
+
textStyle?: TextStyle;
|
|
28
|
+
children: React.ReactNode;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const BadgeStack: React.FC<Props> = ({
|
|
32
|
+
badges,
|
|
33
|
+
position = 'top-right',
|
|
34
|
+
animate = false,
|
|
35
|
+
badgeStyle,
|
|
36
|
+
textStyle,
|
|
37
|
+
children,
|
|
38
|
+
}) => {
|
|
39
|
+
const positionStyle = getPositionStyle(position);
|
|
40
|
+
|
|
41
|
+
const renderBadges = () => {
|
|
42
|
+
return badges.map((badge, index) => {
|
|
43
|
+
const offset = index * 22;
|
|
44
|
+
const animStyle = animate ? { opacity: fadeInAnim } : {};
|
|
45
|
+
return (
|
|
46
|
+
<Animated.View
|
|
47
|
+
key={badge.label + index}
|
|
48
|
+
style={[
|
|
49
|
+
styles.badge,
|
|
50
|
+
{
|
|
51
|
+
top: position.includes('top') ? offset : undefined,
|
|
52
|
+
bottom: position.includes('bottom') ? offset : undefined,
|
|
53
|
+
backgroundColor: badge.color || '#007AFF',
|
|
54
|
+
|
|
55
|
+
},
|
|
56
|
+
badgeStyle,
|
|
57
|
+
animStyle,
|
|
58
|
+
]}
|
|
59
|
+
>
|
|
60
|
+
<Text style={[styles.badgeText, textStyle,{color:badge.labelColor ||"#fff",textDecorationStyle:'dotted'}]}>{badge.label}</Text>
|
|
61
|
+
</Animated.View>
|
|
62
|
+
);
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
// Animation (optional)
|
|
67
|
+
const fadeInAnim = React.useRef(new Animated.Value(0)).current;
|
|
68
|
+
React.useEffect(() => {
|
|
69
|
+
if (animate) {
|
|
70
|
+
Animated.timing(fadeInAnim, {
|
|
71
|
+
toValue: 1,
|
|
72
|
+
duration: 500,
|
|
73
|
+
useNativeDriver: true,
|
|
74
|
+
}).start();
|
|
75
|
+
}
|
|
76
|
+
}, [animate]);
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
const styles = StyleSheet.create({
|
|
80
|
+
container: {
|
|
81
|
+
position: 'relative',
|
|
82
|
+
},
|
|
83
|
+
stackContainer: {
|
|
84
|
+
position: 'absolute',
|
|
85
|
+
zIndex: 10,
|
|
86
|
+
elevation: 5,
|
|
87
|
+
},
|
|
88
|
+
badge: {
|
|
89
|
+
paddingHorizontal: 8,
|
|
90
|
+
paddingVertical: 3,
|
|
91
|
+
borderRadius: 12,
|
|
92
|
+
marginVertical: 1,
|
|
93
|
+
alignSelf: 'flex-start',
|
|
94
|
+
elevation: 5,
|
|
95
|
+
},
|
|
96
|
+
badgeText: {
|
|
97
|
+
color: '#fff',
|
|
98
|
+
fontSize: 10,
|
|
99
|
+
fontWeight: '600',
|
|
100
|
+
},
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<View style={styles.container}>
|
|
107
|
+
{children}
|
|
108
|
+
<View style={[styles.stackContainer, positionStyle]}>
|
|
109
|
+
{renderBadges()}
|
|
110
|
+
</View>
|
|
111
|
+
</View>
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
function getPositionStyle(position: Position): ViewStyle {
|
|
116
|
+
const style: ViewStyle = { position: 'absolute' };
|
|
117
|
+
if (position.includes('top')) style.top = 0;
|
|
118
|
+
if (position.includes('bottom')) style.bottom = 0;
|
|
119
|
+
if (position.includes('left')) style.left = 0;
|
|
120
|
+
if (position.includes('right')) style.right = 0;
|
|
121
|
+
return style;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
export default BadgeStack;
|
package/src/index.tsx
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {default as BadgeStack} from '
|
|
1
|
+
export {default as BadgeStack} from './BadgeStack';
|