ChargEco/Strides-APP/app/components/Button.js

import React, { useEffect } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

export default Button = ({
  style = styles.buttonView,
  text,
  textSize,
  textColor,
  textStyle = styles.buttonText,
  viewStyle = styles.button,
  children,
  onClick,
  onLongClick,
  disabled = false,
  elevation = 0,
  borderRadius = 4
}) => {
  var start = {}, end = {};
  const isSamsung = BRAND == 'samsung';
  return (
    <View style={getElevation(style, disabled, elevation, borderRadius)}>
      <Pressable
        style={({pressed }) => [
          pressed && isIOS && {
            backgroundColor: 'rgba(0,0,0,.2)'
          },
          isIOS && getRadius(style, borderRadius),
          viewStyle
        ]}
        disabled={disabled}
        onPress={e => {
          //if (!isSamsung && onClick) 
          onClick(e)
        }}
        onLongPress={e => {
          if (onLongClick) {
            onLongClick(e)
            start = {}
          }
        }}
        onPressIn={(e) => {
          /*if (isSamsung && e.nativeEvent)
            start = e.nativeEvent*/
          }
        }
        onPressOut={e => {
          /*if (isSamsung && e.nativeEvent && start.timestamp) {
            end = e.nativeEvent
            var x = Math.abs(start.pageX - end.pageX)
            var y = Math.abs(start.pageY - end.pageY)
            //console.log(x, y, viewStyle.height)
            if (x < 50 && y < 10) {
              if (end.timestamp - start.timestamp > 600) { //长按
                //console.log('LongClick')
                if (onClick) onClick(e)
              } else { //click
                //console.log('Click')
                if (onClick) onClick(e)
              }
            }
          }*/
        }}
        android_ripple={ripple}>
        { children ? children :
          <Text style={mergeStyle(textStyle, textColor, textSize, disabled)}>{text}</Text>
        }
      </Pressable>
    </View>
  );
}

const mergeStyle = (style, color, size, disabled) => {
  if (Array.isArray(style)) {
    let res = {}
    for (let s of style) {
      res = {...res, ...s};
    }
    style = res;
  }
  var s = Object.assign({}, style);
  if (disabled) {
    s.color = '#999';
  } else if (color) {
    s.color = color;
  }
  if (size) {
    s.fontSize = size;
  }
  return s;
}

const getRadius = (style, r) => {
  if (Array.isArray(style)) {
    let res = {}
    for (let s of style) {
      res = {...res, ...s};
    }
    style = res;
  }
  const s = {}
  if (style.borderTopLeftRadius !== undefined)
    s.borderTopLeftRadius = style.borderTopLeftRadius
  if (style.borderTopRightRadius !== undefined)
    s.borderTopRightRadius = style.borderTopRightRadius
  if (style.borderBottomLeftRadius !== undefined)
    s.borderBottomLeftRadius = style.borderBottomLeftRadius
  if (style.borderBottomRightRadius !== undefined)
    s.borderBottomRightRadius = style.borderBottomRightRadius
  if (style.borderRadius !== undefined)
    s.borderRadius = style.borderRadius
  if (Object.keys(s).length == 0 && r) {
    return $borderRadius(r)
  }
  return s;
}

const getElevation = (style, d, e, r) => {
  if (Array.isArray(style)) {
    let res = {}
    for (let s of style) {
      res = {...res, ...s};
    }
    style = res;
  }
  var s = Object.assign({}, style);
  s.padding = 0;
  if (!isIOS)
    s.overflow = 'hidden';
  s.flexDirection = 'row';
  if (style.borderRadius == undefined && r) {
    s.borderRadius = r;
  }
  if (!s.backgroundColor) {
    s.backgroundColor = colorAccent
  }
  if (!d) {
    var ele = e ? e : style.elevation ? style.elevation : 0
    s = Object.assign(ElevationObject(ele), s)
  } else {
    s = Object.assign(ElevationObject(0), s)
    s.backgroundColor = '#CCC';
  }
  return s;
}

export const ElevationObject = (e) => {
  if (e) {
    return {
      elevation: e,
      shadowOpacity: .5,
      shadowColor: '#999999',
      shadowOffset: {width: 0, height: e},
    };
  } else {
    return {};
  }
}

export const ViewHeight = (height) => {
  return {
    flex: 1,
    height: height,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  }
}

export const ViewHeightPadding = (height, padding=0) => {
  return {
    flex: 1,
    height: height,
    paddingLeft: padding,
    paddingRight: padding,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  }
}

const styles = StyleSheet.create({
  buttonView: {
    backgroundColor: colorAccent
  },
  button: {
    flex: 1,
    height: 50,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  buttonMini: {
    height: 42,
    borderRadius: 6,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colorAccent
  },
  buttonText: {
    color: '#333',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  }
});