fix(rn): add Badge component

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>

client/react-native/common/components/Library/Badge.js

@@ -0,0 +1,114 @@
+import React from 'react'
+import { Flex, Text } from '.'
+import { colors } from '../../constants'
+
+const find = ({ inside, from, or }) => {
+  const key = Object.keys(inside).find(
+    inKey =>
+      Object.keys(from).some(fromKey => fromKey === inKey) && !!inside[inKey]
+  )
+  return from[key] || from[or]
+}
+
+const getVertiPos = (
+  props,
+  positions = {
+    top: 'start',
+    bottom: 'end',
+  }
+) => find({ inside: props, from: positions, or: 'top' })
+
+const getHorizPos = (
+  props,
+  positions = {
+    left: 'start',
+    right: 'end',
+  }
+) => find({ inside: props, from: positions, or: 'right' })
+
+const getSize = (
+  props,
+  sizes = {
+    tiny: props.icon ? 20 : 14,
+    small: props.icon ? 28 : 20,
+    medium: props.icon ? 34 : 25,
+    large: props.icon ? 38 : 30,
+    big: props.icon ? 49 : 39,
+  }
+) => find({ inside: props, from: sizes, or: 'small' })
+
+const getPadding = (
+  props,
+  paddings = {
+    tiny: 2,
+    small: 3,
+    medium: 4,
+    large: 5,
+    big: 6,
+  }
+) => find({ inside: props, from: paddings, or: 'small' })
+
+const getHorizAbsol = (
+  props,
+  padding = getPadding(props),
+  positions = {
+    top: { top: -padding },
+    bottom: { bottom: -padding },
+  }
+) => find({ inside: props, from: positions, or: 'top' })
+
+const getVertiAbsol = (
+  props,
+  padding = getPadding(props),
+  positions = {
+    left: { left: -padding },
+    right: { right: -padding },
+  }
+) => find({ inside: props, from: positions, or: 'right' })
+
+const Badge = props => {
+  const {
+    background,
+    color,
+    value,
+    icon,
+    children,
+    top,
+    bottom,
+    left,
+    right,
+    height,
+    ...otherProps
+  } = props
+  const [horizPos, vertiPos, size, padding, absolute] = [
+    getHorizPos(props),
+    getVertiPos(props),
+    getSize(props),
+    getPadding(props),
+    { ...getHorizAbsol(props), ...getVertiAbsol(props) },
+  ]
+  if (value == null && !icon) {
+    return children
+  }
+  return (
+    <Flex.Rows justify={vertiPos} align={horizPos} style={{ padding }}>
+      {children}
+      <Text
+        icon={value == null && icon}
+        height={size}
+        padding
+        middle
+        center
+        rounded='circle'
+        absolute={absolute}
+        background={background || colors.red}
+        color={color || colors.white}
+        {...otherProps}
+      >
+        {value != null && value}
+      </Text>
+    </Flex.Rows>
+  )
+}
+
+export default Badge

client/react-native/common/components/Library/Icon.js

@@ -4,7 +4,7 @@ import IconAwesome from 'react-native-vector-icons/dist/FontAwesome'
 import IconMatCom from 'react-native-vector-icons/dist/MaterialCommunityIcons'
 import { colors } from '../../constants'
 
-const Icon = ({ name, color, rotate, style, ...props }) => {
+const Icon = ({ name, color, rotate, src, style, ...props }) => {
   if (name == null) return null
   const [type, iconName] = [
     name.split('-', 1)[0],

client/react-native/common/components/Library/Image.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Image as ImageNative } from 'react-native'
+
+const Image = ({ src, style }) => {
+  return <ImageNative style={style} source={{ uri: require(src) }} />
+}
+
+export default Image

client/react-native/common/components/Library/ListItem.js

@@ -21,7 +21,7 @@ export default class ListItem extends PureComponent {
         <Flex.Cols align='center'>
           <Flex.Rows size={1} align='center'>
             <Image
-              style={{ width: 40, height: 40, borderRadius: 20 }}
+              style={{ width: 40, height: 40, borderRadius: 20, margin: 4 }}
               source={{
                 uri: 'https://api.adorable.io/avatars/285/' + id + '.png',
               }}

client/react-native/common/components/Library/Text.js

@@ -68,7 +68,7 @@ const getPadding = (
       return null
   }
   return {
-    paddingVertical: padding / 3,
+    paddingVertical: props.rounded === 'circle' ? padding : padding / 3,
     paddingHorizontal: padding,
   }
 }
@@ -214,9 +214,12 @@ export const BackgroundText = props => {
     align,
     self,
     onPress,
+    absolute,
   } = props
   const styleProp = [
     {
+      position: absolute && 'absolute',
+      ...(typeof absolute === 'object' ? absolute : {}),
       backgroundColor:
         (background === true && colors.blackGrey) ||
         background ||

client/react-native/common/components/Library/index.js

@@ -9,3 +9,5 @@ export Flex from './Flex'
 export Separator from './Separator'
 export Button from './Button'
 export CustomTextInput from './CustomTextInput.js'
+export Image from './Image'
+export Badge from './Badge'