react-native-cross-components
Version:
Beautiful React-Native components using RN Paper by Callstack
32 lines • 2 kB
JavaScript
import React from 'react';
// @ts-ignore
import { Button } from 'react-native-paper';
import { View } from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import _ from 'lodash';
import styles, { Colors } from '../../styles';
/**
* A custom button that displays as an Paper Button with icon or just an icon if {@link ICrossButtonProps.title} is not supplied.
*
* Remarks:
*
* * All icons are {@link https://fontawesome.com/v4.7.0/icons/ FontAwesome v4}.
* * react-native-paper is currently missing the option to customize `fontSize`.
* * Default appearence is "text", see {@link ICrossButtonProps.mode}
*
* Properties are {@link ICrossButtonProps}
*/
export class CrossButton extends React.Component {
render() {
const mode = this.props.mode || 'text';
return (React.createElement(View, { style: this.props.style ? this.props.style : styles.container }, _.isNil(this.props.title) && !_.isNil(this.props.iconName) ? (React.createElement(FontAwesome.Button, Object.assign({ testID: 'FontAwesomeButton' }, this.props, { style: this.props.iconStyle || styles.container, onPress: () => {
if (this.props.onPress) {
this.props.onPress();
}
}, color: this.props.color || Colors.CrossBlack, name: this.props.iconName.toString() }))) : (React.createElement(Button, Object.assign({ color: this.props.backgroundColor || Colors.NextButton, disabled: this.props.disabled || false }, this.props, { icon: ({ size, color }) => this.props.iconName ? (React.createElement(FontAwesome, { name: this.props.iconName, size: this.props.size || size, style: { margin: 0, padding: 0 }, color: color })) : null, style: this.props.buttonStyle || styles.button, onPress: this.props.onPress
? this.props.onPress
: () => console.log('** CrossButton press **'), mode: mode }), this.props.title))));
}
}
export default CrossButton;
//# sourceMappingURL=CrossButton.js.map