feat: mobile app package (#1075)

2022-06-09 09:45:15 -05:00
parent 58b63898de
commit 8248a38280
336 changed files with 47696 additions and 22563 deletions
--- a/packages/mobile/src/Screens/SideMenu/SideMenuCell.tsx
+++ b/packages/mobile/src/Screens/SideMenu/SideMenuCell.tsx
@@ -0,0 +1,94 @@
+import { Circle } from '@Root/Components/Circle'
+import React, { useContext } from 'react'
+import Icon from 'react-native-vector-icons/Ionicons'
+import { ThemeContext } from 'styled-components'
+import {
+  CellContent,
+  IconAscii,
+  IconCircleContainer,
+  IconContainerLeft,
+  IconContainerRight,
+  IconGraphicContainer,
+  RegularText,
+  SubText,
+  SubTextContainer,
+  Text,
+  TextContainer,
+  Touchable,
+} from './SideMenuCell.styled'
+import { SideMenuOption, SideMenuOptionIconDescriptionType } from './SideMenuSection'
+
+const renderIcon = (desc: SideMenuOption['iconDesc'], color: string) => {
+  if (!desc) {
+    return null
+  }
+
+  if (desc.type === SideMenuOptionIconDescriptionType.Icon && desc.name) {
+    return (
+      <IconGraphicContainer>
+        <Icon name={desc.name} size={desc.size || 20} color={color} />
+      </IconGraphicContainer>
+    )
+  }
+  if (desc.type === SideMenuOptionIconDescriptionType.Ascii) {
+    return <IconAscii>{desc.value}</IconAscii>
+  }
+  if (desc.type === SideMenuOptionIconDescriptionType.Circle) {
+    return (
+      <IconCircleContainer>
+        <Circle backgroundColor={desc.backgroundColor} borderColor={desc.borderColor} />
+      </IconCircleContainer>
+    )
+  }
+  if (desc.type === SideMenuOptionIconDescriptionType.CustomComponent) {
+    return desc.value
+  }
+  return <RegularText>*</RegularText>
+}
+
+export const SideMenuCell: React.FC<SideMenuOption> = props => {
+  const theme = useContext(ThemeContext)
+  const colorForTextClass = (textClass: SideMenuOption['textClass']) => {
+    if (!textClass) {
+      return undefined
+    }
+
+    return {
+      info: theme.stylekitInfoColor,
+      danger: theme.stylekitDangerColor,
+      warning: theme.stylekitWarningColor,
+    }[textClass]
+  }
+
+  const hasIcon = props.iconDesc
+  const iconSide = hasIcon && props.iconDesc?.side ? props.iconDesc.side : hasIcon ? 'left' : null
+  return (
+    <Touchable
+      isSubtext={Boolean(props.subtext)}
+      onPress={props.onSelect}
+      onLongPress={props.onLongPress}
+      style={[props.style || {}]}
+    >
+      <CellContent iconSide={iconSide} style={props.cellContentStyle || {}}>
+        {iconSide === 'left' && (
+          <IconContainerLeft>{renderIcon(props.iconDesc, theme.stylekitInfoColor)}</IconContainerLeft>
+        )}
+
+        <TextContainer selected={props.selected} isSubtext={Boolean(props.subtext)}>
+          {props.subtext && (
+            <SubTextContainer>
+              <SubText>{props.subtext}</SubText>
+            </SubTextContainer>
+          )}
+          <Text textColor={colorForTextClass(props.textClass)}>{props.text}</Text>
+        </TextContainer>
+
+        {props.children}
+
+        {iconSide === 'right' && (
+          <IconContainerRight>{renderIcon(props.iconDesc, theme.stylekitInfoColor)}</IconContainerRight>
+        )}
+      </CellContent>
+    </Touchable>
+  )
+}