ilink-world/components/CustomButton/index.js

75 lines
2.2 KiB
JavaScript
Executable File

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
};