Dingdong_client/components/Button.js

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

function MyButton(props) {
  const {
    children,
    onPress,
    outline,
    text,
    size,
    type,
    theme,
    block,
    style,
  } = 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.primary
      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 },
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Text>
      )
      break
    case 'small':
      contentStyle = { height: 30 }
      childNode = () => (
        <Caption
          style={[
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Caption>
      )
      break
    case 'normal':
      contentStyle = { width: 120, height: 44 }
      childNode = () => (
        <Paragraph
          style={[
            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
          ]}
        >
          {children}
        </Paragraph>
      )
      break
    default:
      contentStyle = { width: 120, height: 30 }
      childNode = () => (
        <Paragraph
          style={[
            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,
        }}
      >
        {childNode()}
      </Button>
    )
  } else {
    return (
      <View style={{ ...style }}>
        <Button
          mode={mode}
          color={color}
          contentStyle={contentStyle}
          onPress={onPress}
          style={{
            elevation: 0,
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowOpacity: 0,
          }}
        >
          {childNode()}
        </Button>
      </View>
    )
  }
}

export default withTheme(MyButton)