Dingdong_client/components/Chip.js

import * as React from 'react';
import { Chip, withTheme } from 'react-native-paper';
import { getColor } from '../Utils/ColorUtils';

function MyChip(props) {
  const { children, size, last, onPress, outline } = props;
  let { color, fontColor } = props;
  if (!color) {
    color = getColor();
  }
  if (!fontColor) {
    fontColor = '#fff';
  }
  let chipHeight = 20;
  let fontSize = 12;
  let fontLine = 12;
  if (size === 'mini') {
    fontSize = 10;
    fontLine = 10;
    chipHeight = 16;
  }

  let right = 6;
  if (last) {
    right = 0;
  }

  let mode = 'flat';
  if (outline) {
    mode = 'outlined';
  }

  return (
    <Chip
      theme={{ colors: { text: outline ? color : fontColor } }}
      color={color}
      mode={mode}
      style={[
        {
          padding: 0,
          margin: 0,
          height: chipHeight,
          marginRight: right,
          marginBottom: 6,
        },
        !outline && { backgroundColor: color },
        outline && { borderColor: color },
      ]}
      textStyle={[
        {
          fontSize,
          margin: 0,
          padding: 0,
          lineHeight: fontLine,
          minHeight: fontLine,
        },
      ]}
      onPress={onPress}
    >
      {children}
    </Chip>
  );
}

export default withTheme(MyChip);