mobile/src/components/ButtonCell.tsx

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>
);