feat: mobile app package (#1075)

packages/mobile/src/Components/ButtonCell.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import styled, { css } from 'styled-components/native'
+import { Props as TableCellProps, SectionedTableCellTouchableHighlight } from './SectionedTableCell'
+
+type Props = {
+  testID?: string
+  maxHeight?: number
+  leftAligned?: boolean
+  bold?: boolean
+  disabled?: boolean
+  important?: boolean
+  onPress: () => void
+  first?: boolean
+  last?: boolean
+  title?: string
+}
+
+type ContainerProps = Pick<Props, 'maxHeight'> & TableCellProps
+const Container = styled(SectionedTableCellTouchableHighlight).attrs(props => ({
+  underlayColor: props.theme.stylekitBorderColor,
+}))<ContainerProps>`
+  padding-top: ${12}px;
+  justify-content: center;
+  ${({ maxHeight }) =>
+    maxHeight &&
+    css`
+      max-height: 50px;
+    `};
+`
+const ButtonContainer = styled.View``
+
+type ButtonLabelProps = Pick<Props, 'leftAligned' | 'bold' | 'disabled' | 'important'>
+const ButtonLabel = styled.Text<ButtonLabelProps>`
+  text-align: ${props => (props.leftAligned ? 'left' : 'center')};
+  text-align-vertical: center;
+  color: ${props => {
+    let color = Platform.OS === 'android' ? props.theme.stylekitForegroundColor : props.theme.stylekitInfoColor
+    if (props.disabled) {
+      color = 'gray'
+    } else if (props.important) {
+      color = props.theme.stylekitDangerColor
+    }
+    return color
+  }};
+  font-size: ${props => props.theme.mainTextFontSize}px;
+  ${({ bold }) =>
+    bold &&
+    css`
+      font-weight: bold;
+    `}
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: 0.6;
+    `}
+`
+
+export const ButtonCell: React.FC<Props> = props => (
+  <Container
+    first={props.first}
+    last={props.last}
+    maxHeight={props.maxHeight}
+    testID={props.testID}
+    disabled={props.disabled}
+    onPress={props.onPress}
+  >
+    <ButtonContainer>
+      <ButtonLabel
+        important={props.important}
+        disabled={props.disabled}
+        bold={props.bold}
+        leftAligned={props.leftAligned}
+      >
+        {props.title}
+      </ButtonLabel>
+      {props.children && props.children}
+    </ButtonContainer>
+  </Container>
+)