76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import {ActivityIndicator, StyleSheet, TouchableOpacity} from "react-native";
|
|
import PropTypes from "prop-types";
|
|
import styles from "./styles";
|
|
import {Color} from "../../config/Color";
|
|
import Text from '../Text';
|
|
|
|
|
|
export default function Button(props) {
|
|
const {
|
|
style,
|
|
styleText,
|
|
icon,
|
|
outline,
|
|
full,
|
|
round,
|
|
loading,
|
|
children,
|
|
...rest
|
|
} = props;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
{...rest}
|
|
style={StyleSheet.flatten([
|
|
[styles.default, {backgroundColor: Color.primaryColor}],
|
|
outline && [
|
|
styles.outline,
|
|
{backgroundColor: Color.cardBackgroundColor, borderColor: Color.primaryColor}
|
|
],
|
|
full && styles.full,
|
|
round && styles.round,
|
|
style
|
|
])}
|
|
activeOpacity={0.9}
|
|
>
|
|
{icon ? icon : null}
|
|
<Text
|
|
style={StyleSheet.flatten([
|
|
styles.textDefault,
|
|
outline && {color: Color.primaryColor},
|
|
styleText
|
|
])}
|
|
numberOfLines={1}
|
|
>
|
|
{children || "Button"}
|
|
</Text>
|
|
{loading ? (
|
|
<ActivityIndicator
|
|
size="small"
|
|
color={outline ? Color.primaryColor : Color.whiteColor}
|
|
style={{paddingLeft: 5}}
|
|
/>
|
|
) : null}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
Button.propTypes = {
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
icon: PropTypes.node,
|
|
outline: PropTypes.bool,
|
|
full: PropTypes.bool,
|
|
round: PropTypes.bool,
|
|
loading: PropTypes.bool
|
|
};
|
|
|
|
Button.defaultProps = {
|
|
style: {},
|
|
icon: null,
|
|
outline: false,
|
|
full: false,
|
|
round: false,
|
|
loading: false
|
|
};
|