@momo-kits/badge 0.75.1-beta.2 → 0.75.1-beta.6

package/Badge.tsx

@@ -0,0 +1,35 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ApplicationContext, Colors, Text} from '@momo-kits/foundation';
+import {BadgeProps, BadgeType} from './types';
+import styles from './styles';
+
+const Badge: FC<BadgeProps> = ({label = 'Label', style}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const isNumber = () => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
+  const formatTitle = () => {
+    if (isNumber() && Number(label) > 99) {
+      return '99+';
+    }
+    return label.toString();
+  };
+
+  const backgroundColor = isNumber()
+    ? theme.colors.error.primary
+    : theme.colors.warning.primary;
+
+  return (
+    <View style={[style, styles.badge, {backgroundColor}]}>
+      <Text color={Colors.black_01} typography={'action_xxs'}>
+        {formatTitle()}
+      </Text>
+    </View>
+  );
+};
+
+export default Badge;

package/BadgeDot.tsx

@@ -0,0 +1,11 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {BadgeDotProps} from './types';
+import styles from './styles';
+
+const BadgeDot: FC<BadgeDotProps> = ({size = 'large', style}) => {
+  const dotStyle = size === 'small' ? styles.dotSmall : styles.dot;
+  return <View style={[style, dotStyle]} />;
+};
+
+export default BadgeDot;

package/BadgeRibbon.tsx

@@ -0,0 +1,141 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {DownTail, Skew, UpTail} from './Shape';
+import styles from './styles';
+import {BadgeRibbonProps} from './types';
+import {ApplicationContext, Colors, Text} from '@momo-kits/foundation';
+
+const BadgeRibbon: FC<BadgeRibbonProps> = ({
+  position = 'top_right',
+  label = 'Label',
+  isRound = false,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let ribbonRotate = '0deg';
+  let textRotate = '0deg';
+  let ribbonTail = <DownTail />;
+  let textMargin = 0;
+  let skewMargin = 0;
+
+  if (position === 'top_right' || position === 'bottom_right') {
+    ribbonRotate = '180deg';
+    textRotate = '180deg';
+  }
+
+  if (position === 'bottom_left' || position === 'top_right') {
+    textMargin = 4;
+    ribbonTail = <UpTail />;
+    skewMargin = 4;
+  }
+
+  const getPosition = () => {
+    switch (position) {
+      case 'top_left':
+        return {
+          top: -4,
+          left: -2,
+        };
+      case 'bottom_left':
+        return {
+          bottom: -4,
+          left: -2,
+        };
+      case 'top_right':
+        return {
+          top: -4,
+          right: -2,
+        };
+      case 'bottom_right':
+        return {
+          bottom: -4,
+          right: -2,
+        };
+    }
+  };
+
+  const renderRoundContent = () => {
+    return (
+      <View
+        style={[
+          styles.ribbonContent,
+          {
+            backgroundColor: theme.colors.warning.primary,
+            marginTop: textMargin,
+          },
+        ]}>
+        <Text
+          style={[
+            styles.ribbonLabel,
+            {
+              transform: [
+                {
+                  rotate: textRotate,
+                },
+              ],
+            },
+          ]}
+          color={Colors.black_01}
+          typography={'label_xs'}>
+          {label}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderSkewContent = () => {
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          marginTop: skewMargin,
+        }}>
+        <View
+          style={[
+            styles.ribbonSkewContent,
+            {
+              backgroundColor: theme.colors.warning.primary,
+            },
+          ]}>
+          <Text
+            style={[
+              styles.ribbonLabel,
+              {
+                transform: [
+                  {
+                    rotate: textRotate,
+                  },
+                ],
+              },
+            ]}
+            color={Colors.black_01}
+            typography={'label_xs'}>
+            {label}
+          </Text>
+        </View>
+        <Skew />
+      </View>
+    );
+  };
+
+  const content = isRound ? renderRoundContent() : renderSkewContent();
+
+  return (
+    <View
+      style={[
+        styles.ribbon,
+        {
+          transform: [
+            {
+              rotate: ribbonRotate,
+            },
+          ],
+        },
+        getPosition(),
+      ]}>
+      {ribbonTail}
+      {content}
+    </View>
+  );
+};
+
+export default BadgeRibbon;

package/index.tsx

@@ -0,0 +1,7 @@
+import Badge from './Badge';
+import BadgeDot from './BadgeDot';
+import BadgeRibbon from './BadgeRibbon';
+import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
+
+export {Badge, BadgeRibbon, BadgeDot};
+export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@momo-kits/badge",
-    "version": "0.75.1-beta.2",
+    "version": "0.75.1-beta.6",
     "private": false,
-    "main": "index.js",
+    "main": "index.tsx",
     "peerDependencies": {
         "react": "16.9.0",
         "react-native": ">=0.55",

package/styles.ts

@@ -0,0 +1,58 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  badge: {
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 16,
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    alignSelf: 'baseline',
+  },
+  dot: {
+    width: 16,
+    height: 16,
+    borderWidth: 2,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 8,
+  },
+  dotSmall: {
+    width: 10,
+    height: 10,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 5,
+  },
+  ribbon: {
+    flexDirection: 'row',
+    height: 20,
+  },
+  ribbonContent: {
+    alignSelf: 'baseline',
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomRightRadius: 12,
+    borderTopRightRadius: 12,
+  },
+  ribbonSkewContent: {
+    alignSelf: 'baseline',
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ribbonLabel: {
+    fontSize: 10,
+    lineHeight: 14,
+    color: Colors.black_01,
+    minWidth: 20,
+    marginRight: 8,
+    fontWeight: 'bold',
+  },
+});

package/types.ts

@@ -0,0 +1,19 @@
+import {ViewStyle} from 'react-native';
+
+export type BadgeType = 'badge' | 'badge_number' | 'dot' | 'dot_small';
+
+export type BadgeProps = {
+  label?: string | number;
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type BadgeDotProps = {
+  size?: 'small' | 'large';
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type BadgeRibbonProps = {
+  label: string;
+  position?: 'top_right' | 'top_left' | 'bottom_right' | 'bottom_left';
+  isRound?: boolean;
+};

package/Badge.js

@@ -1,101 +0,0 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-import {Colors, Radius, Spacing, Text} from '@momo-kits/core-v2';
-import PropTypes from 'prop-types';
-
-const Badge = ({type, title, style}) => {
-  const isNumber = title => {
-    let parsedIntTitle = parseInt(title);
-    if (!isNaN(parsedIntTitle)) return true;
-    return false;
-  };
-
-  const getStyle = type => {
-    switch (type) {
-      case 'badge':
-        return [styles.container];
-
-      case 'dot':
-        return styles.dot;
-      case 'dot-small':
-        return styles.dotSmall;
-    }
-  };
-
-  const formatTitle = title => {
-    if (isNumber(title) && title > 99) {
-      return '99+';
-    }
-    return title;
-  };
-
-  const textBadgeStyle =
-    !isNumber(title) && type === 'badge' && styles.textBadge;
-
-  return (
-    <View style={style}>
-      <View style={[getStyle(type), textBadgeStyle]}>
-        {type === 'badge' && (
-          <Text.Action4 weight="medium" style={[styles.title]}>
-            {formatTitle(title)}
-          </Text.Action4>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: Spacing.XS,
-    backgroundColor: Colors.red_03,
-    borderRadius: Radius.M,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: 16,
-    height: 16,
-    flexDirection: 'row',
-    borderWidth: 1,
-    borderColor: Colors.black_01,
-  },
-  textBadge: {
-    backgroundColor: Colors.orange_03,
-    borderWidth: 1,
-    borderColor: Colors.black_01,
-  },
-  dot: {
-    width: 16,
-    height: 16,
-    borderWidth: 2,
-    borderColor: Colors.black_01,
-    backgroundColor: Colors.red_03,
-    borderRadius: 8,
-  },
-  dotSmall: {
-    width: 10,
-    height: 10,
-    borderWidth: 1,
-    borderColor: Colors.black_01,
-    backgroundColor: Colors.red_03,
-    borderRadius: 5,
-  },
-  title: {
-    fontSize: 10,
-    color: Colors.white,
-    lineHeight: 14,
-  },
-});
-
-Badge.propTypes = {
-  type: PropTypes.oneOf(['badge', 'dot', 'dot-small']),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  textStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  containerWidth: PropTypes.number,
-};
-
-Badge.defaultProps = {
-  type: 'badge',
-};
-
-export default Badge;

package/RibbonRadius.js

@@ -1,112 +0,0 @@
-import { Colors, Text } from '@momo-kits/core-v2';
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { DownTail, UpTail } from './Shape';
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        position: 'absolute',
-
-        height: 20,
-    },
-    content: {
-        backgroundColor: Colors.orange_03,
-        alignSelf: 'baseline',
-        height: 16,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderBottomRightRadius: 12,
-        borderTopRightRadius: 12,
-    },
-    contentText: {
-        fontSize: 10,
-        lineHeight: 14,
-        color: Colors.black_01,
-        minWidth: 20,
-        marginRight: 8,
-        fontWeight: 'bold',
-    },
-});
-
-const RinbbonRadius = ({ title = 'Name', position = 'topLeft' }) => {
-    const getPosition = (position) => {
-        switch (position) {
-            case 'topLeft':
-                return {
-                    top: -4,
-                    left: -2,
-                };
-            case 'bottomLeft':
-                return {
-                    bottom: -4,
-                    left: -2,
-                };
-            case 'topRight':
-                return {
-                    top: -4,
-                    right: -2,
-                };
-            case 'bottomRight':
-                return {
-                    bottom: -4,
-                    right: -2,
-                };
-        }
-    };
-
-    return (
-        <View
-            style={[
-                styles.container,
-                {
-                    transform: [
-                        {
-                            rotate:
-                                position === 'topRight' ||
-                                position === 'bottomRight'
-                                    ? '180deg'
-                                    : '0deg',
-                        },
-                    ],
-                },
-                getPosition(position),
-            ]}>
-            {position === 'bottomLeft' || position === 'topRight' ? (
-                <UpTail />
-            ) : (
-                <DownTail />
-            )}
-            <View
-                style={[
-                    styles.content,
-                    {
-                        marginTop:
-                            position === 'bottomLeft' || position === 'topRight'
-                                ? 4
-                                : 0,
-                    },
-                ]}>
-                <Text
-                    style={[
-                        styles.contentText,
-                        {
-                            transform: [
-                                {
-                                    rotate:
-                                        position === 'topRight' ||
-                                        position === 'bottomRight'
-                                            ? '180deg'
-                                            : '0deg',
-                                },
-                            ],
-                        },
-                    ]}>
-                    {title}
-                </Text>
-            </View>
-        </View>
-    );
-};
-
-export default RinbbonRadius;

package/RibbonSkew.js

@@ -1,111 +0,0 @@
-import { Colors, Text } from '@momo-kits/core-v2';
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { DownTail, Skew, UpTail } from './Shape';
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        position: 'absolute',
-
-        height: 20,
-    },
-    content: {
-        backgroundColor: Colors.orange_03,
-        alignSelf: 'baseline',
-        height: 16,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    contentText: {
-        fontSize: 10,
-        lineHeight: 14,
-        color: Colors.black_01,
-        minWidth: 20,
-        marginRight: 8,
-        fontWeight: 'bold',
-    },
-});
-
-const RibbonSkew = ({ title = 'Name', position = 'topLeft' }) => {
-    const getPosition = (position) => {
-        switch (position) {
-            case 'topLeft':
-                return {
-                    top: -4,
-                    left: -2,
-                };
-            case 'bottomLeft':
-                return {
-                    bottom: -4,
-                    left: -2,
-                };
-            case 'topRight':
-                return {
-                    top: -4,
-                    right: -2,
-                };
-            case 'bottomRight':
-                return {
-                    bottom: -4,
-                    right: -2,
-                };
-        }
-    };
-
-    return (
-        <View
-            style={[
-                styles.container,
-                {
-                    transform: [
-                        {
-                            rotate:
-                                position === 'topRight' ||
-                                position === 'bottomRight'
-                                    ? '180deg'
-                                    : '0deg',
-                        },
-                    ],
-                },
-                getPosition(position),
-            ]}>
-            {position === 'bottomLeft' || position === 'topRight' ? (
-                <UpTail />
-            ) : (
-                <DownTail />
-            )}
-            <View
-                style={{
-                    flexDirection: 'row',
-                    marginTop:
-                        position === 'bottomLeft' || position === 'topRight'
-                            ? 4
-                            : 0,
-                }}>
-                <View style={styles.content}>
-                    <Text
-                        style={[
-                            styles.contentText,
-                            {
-                                transform: [
-                                    {
-                                        rotate:
-                                            position === 'topRight' ||
-                                            position === 'bottomRight'
-                                                ? '180deg'
-                                                : '0deg',
-                                    },
-                                ],
-                            },
-                        ]}>
-                        {title}
-                    </Text>
-                </View>
-                <Skew />
-            </View>
-        </View>
-    );
-};
-
-export default RibbonSkew;

package/index.js

@@ -1,5 +0,0 @@
-import Badge from './Badge';
-import RinbbonRadius from './RibbonRadius';
-import RibbonSkew from './RibbonSkew';
-
-export { Badge, RinbbonRadius, RibbonSkew };