75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";
|
||
|
|
import { Color } from '../../config/Color';
|
||
|
|
import PropTypes from "prop-types";
|
||
|
|
import CustomText from "../CustomText";
|
||
|
|
import styles from "./styles";
|
||
|
|
|
||
|
|
export default function CustomButton(props) {
|
||
|
|
const {
|
||
|
|
style,
|
||
|
|
styleCustomText,
|
||
|
|
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}
|
||
|
|
<CustomText
|
||
|
|
style={StyleSheet.flatten([
|
||
|
|
styles.textDefault,
|
||
|
|
outline && { color: Color.primaryColor },
|
||
|
|
styleCustomText
|
||
|
|
])}
|
||
|
|
numberOfLines={1}
|
||
|
|
>
|
||
|
|
{children || "CustomButton"}
|
||
|
|
</CustomText>
|
||
|
|
{loading ? (
|
||
|
|
<ActivityIndicator
|
||
|
|
size="small"
|
||
|
|
color={outline ? Color.primaryColor : Color.whiteColor}
|
||
|
|
style={{ paddingLeft: 5 }}
|
||
|
|
/>
|
||
|
|
) : null}
|
||
|
|
</TouchableOpacity>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
CustomButton.propTypes = {
|
||
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||
|
|
icon: PropTypes.node,
|
||
|
|
outline: PropTypes.bool,
|
||
|
|
full: PropTypes.bool,
|
||
|
|
round: PropTypes.bool,
|
||
|
|
loading: PropTypes.bool
|
||
|
|
};
|
||
|
|
|
||
|
|
CustomButton.defaultProps = {
|
||
|
|
style: {},
|
||
|
|
icon: null,
|
||
|
|
outline: false,
|
||
|
|
full: false,
|
||
|
|
round: false,
|
||
|
|
loading: false
|
||
|
|
};
|