react-native-cross-components
Version:
Beautiful React-Native components using RN Paper by Callstack
91 lines • 3.92 kB
JavaScript
import React from 'react';
import { View, Text, TouchableOpacity, } from 'react-native';
import { Colors } from '../../styles';
import Modal from 'react-native-modal';
import { CrossSpinner, } from '../animations/CrossSpinner';
import styles from '../../styles';
/**
* @description
* Displays a modal with busy indicator (spinner) and message when {@link IBusyIndicatorProps.isBusy} is `true`.
*
* Properties are {@link IBusyIndicatorProps}.
*
* Customize the modal through {@link IBusyIndicatorProps.modalProps}.
*
* Also supports cancelling the modal using properties
* {@link IBusyIndicatorProps.isCancelButtonVisible},
* {@link IBusyIndicatorProps.cancelText} and
* {@link IBusyIndicatorProps.onCancel}.
* This does however not hide the modal.
*
* @example <caption>Modal with cancel</caption>
* <CrossBusyIndicator
* isBusy={this.state.isBusy}
* type='PacmanIndicator'
* isCancelButtonVisible={true}
* message="Loading.."
* onCancel={() => this.setState({ isBusy: false })}
* />
*
* @example <caption>Non cancellable and custom styles</caption>
* <CrossBusyIndicator
* spinnerProps={{
* color: 'red',
* type: 'WaveIndicator'
* }}
* messageStyle={{color: 'red'}}
* isBusy={this.state.isBusy2}
* isCancelButtonVisible={false}
* message="Resistance is futile"
* />
*
* @example <caption>Customize modal props</caption>
* <CrossBusyIndicator
* modalProps={{
* swipeDirection: 'up',
* backdropColor: 'blue'
* }}
* isBusy={this.state.isBusy2}
* isCancelButtonVisible={false}
* message="Busy busy busy.."
* />
*/
export class CrossBusyIndicator extends React.Component {
constructor(props) {
super(props);
this.onCancel = this.onCancel.bind(this);
}
onCancel() {
if (!this.props.isCancelButtonVisible) {
return;
}
if (this.props.onCancel) {
this.props.onCancel();
}
}
render() {
return (React.createElement(View, { testID: this.props.testID || '1' },
React.createElement(Modal, Object.assign({}, this.props.modalProps, { style: this.props.modalStyle
? [styles.absoluteCentered, this.props.modalStyle]
: styles.absoluteCentered, isVisible: this.props.isBusy, onDismiss: this.onCancel }),
React.createElement(View, { style: this.props.innerViewStyle
? [
styles.container,
styles.paddingDefault,
this.props.innerViewStyle,
]
: [styles.container, styles.paddingDefault] },
React.createElement(View, { style: [styles.columnContentTopCenter] },
React.createElement(CrossSpinner, Object.assign({ type: this.props.type || 'MaterialIndicator', style: styles.spinner }, this.props.spinnerProps))),
React.createElement(View, { style: [styles.columnContentTopCenter] },
React.createElement(Text, { style: [styles.textSpinner, this.props.messageStyle] }, this.props.message || ''),
this.props.isCancelButtonVisible ? (React.createElement(TouchableOpacity, { onPress: this.onCancel },
React.createElement(Text, { testID: 'cancelText', style: [
styles.textSpinner,
{ color: Colors.CancelButton },
this.props.cancelTextStyle,
] }, this.props.cancelText || 'Cancel'))) : null)))));
}
}
export default CrossBusyIndicator;
//# sourceMappingURL=CrossBusyIndicator.js.map