@momo-kits/badge 0.0.62-beta.9 → 0.0.65-beta.2

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.
Files changed (6) hide show
  1. package/Badge.js +99 -0
  2. package/RibbonRadius.js +112 -0
  3. package/RibbonSkew.js +111 -0
  4. package/Shape.js +63 -0
  5. package/index.js +4 -90
  6. package/package.json +2 -2
package/Badge.js ADDED
@@ -0,0 +1,99 @@
1
+ import React from 'react';
2
+ import {StyleSheet, View} from 'react-native';
3
+ import {Colors, Radius, Spacing, Text} from '@momo-kits/core-v2';
4
+ import PropTypes from 'prop-types';
5
+
6
+ const Badge = ({type, title, style}) => {
7
+ const isNumber = title => {
8
+ let parsedIntTitle = parseInt(title);
9
+ if (!isNaN(parsedIntTitle)) return true;
10
+ return false;
11
+ };
12
+
13
+ const getStyle = type => {
14
+ switch (type) {
15
+ case 'badge':
16
+ return [styles.container];
17
+
18
+ case 'dot':
19
+ return styles.dot;
20
+ case 'dot-small':
21
+ return styles.dotSmall;
22
+ }
23
+ };
24
+
25
+ const formatTitle = title => {
26
+ if (isNumber(title) && title > 99) {
27
+ return '99+';
28
+ }
29
+ return title;
30
+ };
31
+
32
+ const textBadgeStyle =
33
+ !isNumber(title) && type === 'badge' && styles.textBadge;
34
+
35
+ return (
36
+ <View style={style}>
37
+ <View style={[getStyle(type), textBadgeStyle]}>
38
+ {type === 'badge' && (
39
+ <Text.Action4 weight="medium" style={[styles.title]}>
40
+ {formatTitle(title)}
41
+ </Text.Action4>
42
+ )}
43
+ </View>
44
+ </View>
45
+ );
46
+ };
47
+
48
+ const styles = StyleSheet.create({
49
+ container: {
50
+ paddingHorizontal: Spacing.XS,
51
+ backgroundColor: Colors.red_03,
52
+ borderRadius: Radius.M,
53
+ justifyContent: 'center',
54
+ alignItems: 'center',
55
+ minWidth: 16,
56
+ height: 16,
57
+ flexDirection: 'row',
58
+ },
59
+ textBadge: {
60
+ backgroundColor: Colors.orange_03,
61
+ borderWidth: 1,
62
+ borderColor: Colors.black_01,
63
+ },
64
+ dot: {
65
+ width: 16,
66
+ height: 16,
67
+ borderWidth: 2,
68
+ borderColor: Colors.black_01,
69
+ backgroundColor: Colors.red_03,
70
+ borderRadius: 8,
71
+ },
72
+ dotSmall: {
73
+ width: 10,
74
+ height: 10,
75
+ borderWidth: 1,
76
+ borderColor: Colors.black_01,
77
+ backgroundColor: Colors.red_03,
78
+ borderRadius: 5,
79
+ },
80
+ title: {
81
+ fontSize: 10,
82
+ color: Colors.white,
83
+ lineHeight: 14,
84
+ },
85
+ });
86
+
87
+ Badge.propTypes = {
88
+ type: PropTypes.oneOf(['badge', 'dot', 'dot-small']),
89
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
90
+ style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
91
+ textStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
92
+ containerWidth: PropTypes.number,
93
+ };
94
+
95
+ Badge.defaultProps = {
96
+ type: 'badge',
97
+ };
98
+
99
+ export default Badge;
package/RibbonRadius.js ADDED
@@ -0,0 +1,112 @@
1
+ import { Colors, Text } from '@momo-kits/core-v2';
2
+ import React from 'react';
3
+ import { StyleSheet, View } from 'react-native';
4
+ import { DownTail, UpTail } from './Shape';
5
+
6
+ const styles = StyleSheet.create({
7
+ container: {
8
+ flexDirection: 'row',
9
+ position: 'absolute',
10
+
11
+ height: 20,
12
+ },
13
+ content: {
14
+ backgroundColor: Colors.orange_03,
15
+ alignSelf: 'baseline',
16
+ height: 16,
17
+ justifyContent: 'center',
18
+ alignItems: 'center',
19
+ borderBottomRightRadius: 12,
20
+ borderTopRightRadius: 12,
21
+ },
22
+ contentText: {
23
+ fontSize: 10,
24
+ lineHeight: 14,
25
+ color: Colors.black_01,
26
+ minWidth: 20,
27
+ marginRight: 8,
28
+ fontWeight: 'bold',
29
+ },
30
+ });
31
+
32
+ const RinbbonRadius = ({ title = 'Name', position = 'topLeft' }) => {
33
+ const getPosition = (position) => {
34
+ switch (position) {
35
+ case 'topLeft':
36
+ return {
37
+ top: -4,
38
+ left: -2,
39
+ };
40
+ case 'bottomLeft':
41
+ return {
42
+ bottom: -4,
43
+ left: -2,
44
+ };
45
+ case 'topRight':
46
+ return {
47
+ top: -4,
48
+ right: -2,
49
+ };
50
+ case 'bottomRight':
51
+ return {
52
+ bottom: -4,
53
+ right: -2,
54
+ };
55
+ }
56
+ };
57
+
58
+ return (
59
+ <View
60
+ style={[
61
+ styles.container,
62
+ {
63
+ transform: [
64
+ {
65
+ rotate:
66
+ position === 'topRight' ||
67
+ position === 'bottomRight'
68
+ ? '180deg'
69
+ : '0deg',
70
+ },
71
+ ],
72
+ },
73
+ getPosition(position),
74
+ ]}>
75
+ {position === 'bottomLeft' || position === 'topRight' ? (
76
+ <UpTail />
77
+ ) : (
78
+ <DownTail />
79
+ )}
80
+ <View
81
+ style={[
82
+ styles.content,
83
+ {
84
+ marginTop:
85
+ position === 'bottomLeft' || position === 'topRight'
86
+ ? 4
87
+ : 0,
88
+ },
89
+ ]}>
90
+ <Text
91
+ style={[
92
+ styles.contentText,
93
+ {
94
+ transform: [
95
+ {
96
+ rotate:
97
+ position === 'topRight' ||
98
+ position === 'bottomRight'
99
+ ? '180deg'
100
+ : '0deg',
101
+ },
102
+ ],
103
+ },
104
+ ]}>
105
+ {title}
106
+ </Text>
107
+ </View>
108
+ </View>
109
+ );
110
+ };
111
+
112
+ export default RinbbonRadius;
package/RibbonSkew.js ADDED
@@ -0,0 +1,111 @@
1
+ import { Colors, Text } from '@momo-kits/core-v2';
2
+ import React from 'react';
3
+ import { StyleSheet, View } from 'react-native';
4
+ import { DownTail, Skew, UpTail } from './Shape';
5
+
6
+ const styles = StyleSheet.create({
7
+ container: {
8
+ flexDirection: 'row',
9
+ position: 'absolute',
10
+
11
+ height: 20,
12
+ },
13
+ content: {
14
+ backgroundColor: Colors.orange_03,
15
+ alignSelf: 'baseline',
16
+ height: 16,
17
+ justifyContent: 'center',
18
+ alignItems: 'center',
19
+ },
20
+ contentText: {
21
+ fontSize: 10,
22
+ lineHeight: 14,
23
+ color: Colors.black_01,
24
+ minWidth: 20,
25
+ marginRight: 8,
26
+ fontWeight: 'bold',
27
+ },
28
+ });
29
+
30
+ const RibbonSkew = ({ title = 'Name', position = 'topLeft' }) => {
31
+ const getPosition = (position) => {
32
+ switch (position) {
33
+ case 'topLeft':
34
+ return {
35
+ top: -4,
36
+ left: -2,
37
+ };
38
+ case 'bottomLeft':
39
+ return {
40
+ bottom: -4,
41
+ left: -2,
42
+ };
43
+ case 'topRight':
44
+ return {
45
+ top: -4,
46
+ right: -2,
47
+ };
48
+ case 'bottomRight':
49
+ return {
50
+ bottom: -4,
51
+ right: -2,
52
+ };
53
+ }
54
+ };
55
+
56
+ return (
57
+ <View
58
+ style={[
59
+ styles.container,
60
+ {
61
+ transform: [
62
+ {
63
+ rotate:
64
+ position === 'topRight' ||
65
+ position === 'bottomRight'
66
+ ? '180deg'
67
+ : '0deg',
68
+ },
69
+ ],
70
+ },
71
+ getPosition(position),
72
+ ]}>
73
+ {position === 'bottomLeft' || position === 'topRight' ? (
74
+ <UpTail />
75
+ ) : (
76
+ <DownTail />
77
+ )}
78
+ <View
79
+ style={{
80
+ flexDirection: 'row',
81
+ marginTop:
82
+ position === 'bottomLeft' || position === 'topRight'
83
+ ? 4
84
+ : 0,
85
+ }}>
86
+ <View style={styles.content}>
87
+ <Text
88
+ style={[
89
+ styles.contentText,
90
+ {
91
+ transform: [
92
+ {
93
+ rotate:
94
+ position === 'topRight' ||
95
+ position === 'bottomRight'
96
+ ? '180deg'
97
+ : '0deg',
98
+ },
99
+ ],
100
+ },
101
+ ]}>
102
+ {title}
103
+ </Text>
104
+ </View>
105
+ <Skew />
106
+ </View>
107
+ </View>
108
+ );
109
+ };
110
+
111
+ export default RibbonSkew;
package/Shape.js ADDED
@@ -0,0 +1,63 @@
1
+ import React from 'react';
2
+ import Svg, { G, Path } from 'react-native-svg';
3
+
4
+ const UpTail = () => {
5
+ return (
6
+ <Svg
7
+ width="5px"
8
+ height="20px"
9
+ viewBox="0 0 5 20"
10
+ xmlns="http://www.w3.org/2000/svg">
11
+ <G stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
12
+ <Path
13
+ d="M0 0h2v4a2 2 0 01-2-2V0z"
14
+ fill="#C41B24"
15
+ transform="matrix(1 0 0 -1 0 4)"
16
+ />
17
+ <Path
18
+ d="M5 2l-.001 15.998H2.651l-.261-.003-.208.004-.229.014-.119.01-.246.036C.843 18.189.05 18.855 0 20V6a4 4 0 014-4h1z"
19
+ fill="#FA541C"
20
+ transform="matrix(1 0 0 -1 0 22)"
21
+ />
22
+ </G>
23
+ </Svg>
24
+ );
25
+ };
26
+
27
+ const DownTail = () => {
28
+ return (
29
+ <Svg
30
+ width="5px"
31
+ height="20px"
32
+ viewBox="0 0 5 20"
33
+ xmlns="http://www.w3.org/2000/svg">
34
+ <G stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
35
+ <Path d="M0 16h2v4a2 2 0 01-2-2v-2z" fill="#C41B24" />
36
+ <Path
37
+ d="M5 0l-.001 15.998H2.651l-.261-.003-.208.004-.229.014-.119.01-.246.036C.843 16.189.05 16.855 0 18V4a4 4 0 014-4h1z"
38
+ fill="#FA541C"
39
+ />
40
+ </G>
41
+ </Svg>
42
+ );
43
+ };
44
+
45
+ const Skew = () => {
46
+ return (
47
+ <Svg
48
+ width="4px"
49
+ height="16px"
50
+ viewBox="0 0 4 16"
51
+ xmlns="http://www.w3.org/2000/svg">
52
+ <Path
53
+ d="M3 0a1 1 0 011 1v1.143L.2 8 4 14v1a1 1 0 01-1 1H0V0h3z"
54
+ fill="#FA541C"
55
+ stroke="none"
56
+ strokeWidth={1}
57
+ fillRule="evenodd"
58
+ />
59
+ </Svg>
60
+ );
61
+ };
62
+
63
+ export { UpTail, DownTail, Skew };
package/index.js CHANGED
@@ -1,91 +1,5 @@
1
- import React from 'react';
2
- import { StyleSheet, View } from 'react-native';
3
- import { Colors, Radius, Spacing, Text } from '@momo-kits/core';
4
- import { isNumber } from 'lodash';
1
+ import Badge from './Badge';
2
+ import RinbbonRadius from './RibbonRadius';
3
+ import RibbonSkew from './RibbonSkew';
5
4
 
6
- const Badge = ({ type, title, style, textStyle, containerWidth }) => {
7
- const getStyle = (type) => {
8
- switch (type) {
9
- case 'badge':
10
- return [
11
- styles.container,
12
- {
13
- minWidth: 16,
14
- height: 16,
15
- left: containerWidth ? containerWidth - 12 : null,
16
- },
17
- ];
18
-
19
- case 'dot':
20
- return styles.dot;
21
- case 'dot-small':
22
- return styles.dotSmall;
23
- }
24
- };
25
-
26
- const formatTitle = (title) => {
27
- if (isNumber(title) && title > 99) {
28
- return '99+';
29
- }
30
- return title;
31
- };
32
-
33
- return (
34
- <View style={[getStyle(type), style]}>
35
- {type === 'badge' && (
36
- <Text
37
- weight="medium"
38
- style={[{ fontSize: 10, color: Colors.white }, textStyle]}>
39
- {formatTitle(title)}
40
- </Text>
41
- )}
42
- </View>
43
- );
44
- };
45
-
46
- const styles = StyleSheet.create({
47
- container: {
48
- paddingHorizontal: Spacing.XS,
49
- backgroundColor: Colors.warning,
50
- borderRadius: Radius.M,
51
- justifyContent: 'center',
52
- alignItems: 'center',
53
- position: 'absolute',
54
- top: -4,
55
- },
56
- ribbon: {
57
- width: '100%',
58
- height: '25%',
59
- transform: [{ rotate: '45deg' }],
60
- position: 'absolute',
61
- backgroundColor: Colors.error,
62
- },
63
- dot: {
64
- width: 14,
65
- height: 14,
66
- borderWidth: 2,
67
- borderColor: Colors.white,
68
- backgroundColor: Colors.error,
69
- borderRadius: 7,
70
- position: 'absolute',
71
- right: -8,
72
- top: -8,
73
- },
74
- dotSmall: {
75
- width: 10,
76
- height: 10,
77
- borderWidth: 1,
78
- borderColor: Colors.white,
79
- backgroundColor: Colors.error,
80
- borderRadius: 5,
81
- position: 'absolute',
82
- right: -5,
83
- top: -5,
84
- },
85
- });
86
-
87
- Badge.defaultProps = {
88
- type: 'badge',
89
- };
90
-
91
- export default Badge;
5
+ export { Badge, RinbbonRadius, RibbonSkew };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@momo-kits/badge",
3
- "version": "0.0.62-beta.9",
3
+ "version": "0.0.65-beta.2",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "peerDependencies": {
7
7
  "react": "16.9.0",
8
8
  "react-native": ">=0.55",
9
9
  "prop-types": "^15.7.2",
10
- "@momo-kits/core": ">=0.0.5-beta"
10
+ "@momo-kits/core-v2": ">=0.0.5-beta"
11
11
  },
12
12
  "devDependencies": {},
13
13
  "license": "MoMo",