Dingdong_client/components/Button.js

import * as React from 'react';
import { View } from 'react-native';
import {
  Paragraph,
  Button,
  Caption,
  withTheme,
  Text,
  Subheading,
} from 'react-native-paper';

function MyButton(props) {
  const {
    children,
    onPress,
    outline,
    text,
    size,
    type,
    theme,
    block,
    style,
    left,
  } = props;
  let { fontColor } = props;
  const { colors } = theme;
  let contentStyle = {};
  let color = '';
  let mode = 'contained';
  let childNode;
  let dark = true;

  switch (type) {
    case 'primary':
      color = colors.primary;
      break;
    case 'info':
      if (outline || text) {
        color = colors.info;
      } else {
        color = colors.lightInfo;
        fontColor = colors.info;
      }
      break;
    case 'danger':
      color = colors.error;
      break;
    default:
      color = colors.font;
      break;
  }

  if (outline) {
    mode = 'outline';
    dark = false;
  }
  if (text) {
    mode = 'text';
    dark = false;
  }

  switch (size) {
    case 'mini':
      contentStyle = { height: 22 };
      childNode = () => (
        <Text
          style={[
            { fontSize: 10, lineHeight: 10 },
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Text>
      );
      break;
    case 'small':
      contentStyle = { height: 30 };
      childNode = () => (
        // 14
        <Caption
          style={[
            { lineHeight: 14 },
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Caption>
      );
      break;
    case 'normal':
      contentStyle = { width: 120, height: 44 };
      childNode = () => (
        <Paragraph
          style={[
            { lineHeight: 16 },
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Paragraph>
      );
      break;
    case 'large':
      // 16
      contentStyle = { width: 120, height: 44 };
      if (left) {
        contentStyle = { height: 44, paddingRight: 30 };
      }
      childNode = () => (
        <Subheading
          style={[
            { lineHeight: 18 },
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Subheading>
      );
      break;
    default:
      contentStyle = { width: 120, height: 30 };
      childNode = () => (
        <Paragraph
          style={[
            { lineHeight: 16 },
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Paragraph>
      );
      break;
  }

  if (block) {
    delete contentStyle.width;
    return (
      <Button
        mode={mode}
        color={color}
        contentStyle={contentStyle}
        onPress={onPress}
        style={{
          elevation: 0,
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowOpacity: 0,
          paddingVertical: 0,
        }}
      >
        {childNode()}
      </Button>
    );
  } else {
    return (
      <View style={{ ...style }}>
        <Button
          mode={mode}
          color={color}
          contentStyle={contentStyle}
          style={{
            elevation: 0,
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowOpacity: 0,
          }}
          onPress={onPress}
          compact={left}
        >
          {childNode()}
        </Button>
      </View>
    );
  }
}

export default withTheme(MyButton);