react-native-cross-components
Version:
Beautiful React-Native components using RN Paper by Callstack
1 lines • 9.88 kB
Source Map (JSON)
{"file":"/Users/thomas/Source/react-native-core/source/components/modals/CrossBusyIndicator.tsx","mappings":";;;;;AAAA,kDAA0B;AAC1B,+CAOsB;AACtB,yCAAsC;AACtC,4EAAuC;AACvC,6DAIoC;AACpC,0DAAkC;AAkIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAa,kBAAmB,SAAQ,eAAK,CAAC,SAA8B;IAC1E,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;SACvB;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8BAAC,mBAAI,IAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,GAAG;YACpC,8BAAC,4BAAK,oBACA,IAAI,CAAC,KAAK,CAAC,UAAU,IACzB,KAAK,EACH,IAAI,CAAC,KAAK,CAAC,UAAU;oBACnB,CAAC,CAAC,CAAC,gBAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;oBAClD,CAAC,CAAC,gBAAM,CAAC,gBAAgB,EAE7B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAC5B,SAAS,EAAE,IAAI,CAAC,QAAQ;gBAExB,8BAAC,mBAAI,IACH,KAAK,EACH,IAAI,CAAC,KAAK,CAAC,cAAc;wBACvB,CAAC,CAAC;4BACE,gBAAM,CAAC,SAAS;4BAChB,gBAAM,CAAC,cAAc;4BACrB,IAAI,CAAC,KAAK,CAAC,cAAc;yBAC1B;wBACH,CAAC,CAAC,CAAC,gBAAM,CAAC,SAAS,EAAE,gBAAM,CAAC,cAAc,CAAC;oBAG/C,8BAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,gBAAM,CAAC,sBAAsB,CAAC;wBAC1C,8BAAC,2BAAY,kBACX,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,mBAAmB,EAC5C,KAAK,EAAE,gBAAM,CAAC,OAAO,IACjB,IAAI,CAAC,KAAK,CAAC,YAAY,EAC3B,CACG;oBAEP,8BAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,gBAAM,CAAC,sBAAsB,CAAC;wBAC1C,8BAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,gBAAM,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IACvD,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CACpB;wBACN,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAClC,8BAAC,+BAAgB,IAAC,OAAO,EAAE,IAAI,CAAC,QAAQ;4BACtC,8BAAC,mBAAI,IACH,MAAM,EAAC,YAAY,EACnB,KAAK,EAAE;oCACL,gBAAM,CAAC,WAAW;oCAClB,EAAE,KAAK,EAAE,eAAM,CAAC,YAAY,EAAE;oCAC9B,IAAI,CAAC,KAAK,CAAC,eAAe;iCAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,QAAQ,CAC7B,CACU,CACpB,CAAC,CAAC,CAAC,IAAI,CACH,CACF,CACD,CACH,CACR,CAAC;IACJ,CAAC;CACF;AAxED,gDAwEC;AAED,kBAAe,kBAAkB,CAAC","names":[],"sources":["/Users/thomas/Source/react-native-core/source/components/modals/CrossBusyIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n TouchableOpacity,\n StyleProp,\n ViewStyle,\n TextStyle,\n} from 'react-native';\nimport { Colors } from '../../styles';\nimport Modal from 'react-native-modal';\nimport {\n CrossSpinnerType,\n CrossSpinner,\n ICrossSpinnerProps,\n} from '../animations/CrossSpinner';\nimport styles from '../../styles';\n\nexport type AnimationConfig = string | { from: Object; to: Object };\n\nexport type Orientation =\n | 'portrait'\n | 'portrait-upside-down'\n | 'landscape'\n | 'landscape-left'\n | 'landscape-right';\n\n/**\n * Representation of react-native-modal props. All props except `isVisible` and `children` from:\n *\n * https://github.com/react-native-community/react-native-modal#available-props\n */\nexport interface IModalProps {\n animationIn?: AnimationConfig;\n animationInTiming?: number;\n animationOut?: AnimationConfig;\n animationOutTiming?: number;\n avoidKeyboard?: boolean;\n backdropColor?: string;\n backdropOpacity?: number;\n backdropTransitionInTiming?: number;\n backdropTransitionOutTiming?: number;\n useNativeDriver?: boolean;\n deviceHeight?: number;\n deviceWidth?: number;\n hideModalContentWhileAnimating?: boolean;\n onModalShow?: () => void;\n onModalHide?: () => void;\n onBackButtonPress?: () => void;\n onBackdropPress?: () => void;\n onSwipe?: () => void;\n swipeThreshold?: number;\n style?: StyleProp<ViewStyle>;\n swipeDirection?: 'up' | 'down' | 'left' | 'right';\n scrollTo?: (e: any) => void;\n scrollOffset?: number;\n scrollOffsetMax?: number;\n supportedOrientations?: Orientation[];\n onDismiss?: () => void;\n onShow?: () => void;\n hardwareAccelerated?: boolean;\n onOrientationChange?: (orientation: 'portrait' | 'landscape') => void;\n presentationStyle?:\n | 'fullScreen'\n | 'pageSheet'\n | 'formSheet'\n | 'overFullScreen';\n}\n\n/**\n * Describes the props for {@link CrossBusyIndicator}\n *\n * @export\n * @interface IBusyIndicatorProps\n */\nexport interface IBusyIndicatorProps {\n /**\n * Determines if the indicator is visible\n *\n * @type {boolean}\n * @memberof IBusyIndicatorProps\n */\n isBusy: boolean;\n /**\n * Optional message to show while busy. Defaults to empty string.\n *\n * @type {string}\n * @memberof IBusyIndicatorProps\n */\n message?: string | undefined;\n /**\n * Type of spinner to use\n *\n * @type {CrossSpinnerType}\n * @memberof IBusyIndicatorProps\n */\n type?: CrossSpinnerType | undefined;\n /**\n * Optional test id to assign this component. Default is \"1\"\n *\n * @type {string}\n * @memberof IBusyIndicatorProps\n */\n testID?: string | undefined;\n /**\n * Determines if the modal is cancellable. Otherwise visibility is controlled by {@link isBusy}\n */\n isCancelButtonVisible: boolean;\n /**\n * Optional callback for user cancel event.\n */\n onCancel?: () => void;\n /**\n * Text for cancel button. Default is \"Cancel\"\n */\n cancelText?: string | undefined;\n /**\n * Optional custom style for the {@link cancelText}\n */\n cancelTextStyle?: StyleProp<TextStyle> | undefined;\n /**\n * Optional custom style for the modal view\n */\n modalStyle?: StyleProp<ViewStyle> | undefined;\n /**\n * Optional custom style for the inner view, contained in the modal\n */\n innerViewStyle?: StyleProp<ViewStyle> | undefined;\n /**\n * Optional custom style for the {@link message}\n */\n messageStyle?: StyleProp<TextStyle> | undefined;\n /**\n * Optional properties to configure the spinner\n *\n * See {@link ICrossSpinnerProps}\n */\n spinnerProps?: ICrossSpinnerProps | undefined;\n /**\n * Optional properties to customize the modal. All props except `isVisible` and `children` from\n *\n * https://github.com/react-native-community/react-native-modal#available-props\n */\n modalProps?: IModalProps | undefined;\n}\n\n/**\n * @description\n * Displays a modal with busy indicator (spinner) and message when {@link IBusyIndicatorProps.isBusy} is `true`.\n *\n * Properties are {@link IBusyIndicatorProps}.\n *\n * Customize the modal through {@link IBusyIndicatorProps.modalProps}.\n *\n * Also supports cancelling the modal using properties\n * {@link IBusyIndicatorProps.isCancelButtonVisible},\n * {@link IBusyIndicatorProps.cancelText} and\n * {@link IBusyIndicatorProps.onCancel}.\n * This does however not hide the modal.\n *\n * @example <caption>Modal with cancel</caption>\n * <CrossBusyIndicator\n * isBusy={this.state.isBusy}\n * type='PacmanIndicator'\n * isCancelButtonVisible={true}\n * message=\"Loading..\"\n * onCancel={() => this.setState({ isBusy: false })}\n * />\n *\n * @example <caption>Non cancellable and custom styles</caption>\n * <CrossBusyIndicator\n * spinnerProps={{\n * color: 'red',\n * type: 'WaveIndicator'\n * }}\n * messageStyle={{color: 'red'}}\n * isBusy={this.state.isBusy2}\n * isCancelButtonVisible={false}\n * message=\"Resistance is futile\"\n * />\n *\n * @example <caption>Customize modal props</caption>\n * <CrossBusyIndicator\n * modalProps={{\n * swipeDirection: 'up',\n * backdropColor: 'blue'\n * }}\n * isBusy={this.state.isBusy2}\n * isCancelButtonVisible={false}\n * message=\"Busy busy busy..\"\n * />\n */\nexport class CrossBusyIndicator extends React.Component<IBusyIndicatorProps> {\n constructor(props: IBusyIndicatorProps) {\n super(props);\n this.onCancel = this.onCancel.bind(this);\n }\n\n onCancel() {\n if (!this.props.isCancelButtonVisible) {\n return;\n }\n\n if (this.props.onCancel) {\n this.props.onCancel();\n }\n }\n\n render() {\n return (\n <View testID={this.props.testID || '1'}>\n <Modal\n {...this.props.modalProps}\n style={\n this.props.modalStyle\n ? [styles.absoluteCentered, this.props.modalStyle]\n : styles.absoluteCentered\n }\n isVisible={this.props.isBusy}\n onDismiss={this.onCancel}\n >\n <View\n style={\n this.props.innerViewStyle\n ? [\n styles.container,\n styles.paddingDefault,\n this.props.innerViewStyle,\n ]\n : [styles.container, styles.paddingDefault]\n }\n >\n <View style={[styles.columnContentTopCenter]}>\n <CrossSpinner\n type={this.props.type || 'MaterialIndicator'}\n style={styles.spinner}\n {...this.props.spinnerProps}\n />\n </View>\n\n <View style={[styles.columnContentTopCenter]}>\n <Text style={[styles.textSpinner, this.props.messageStyle]}>\n {this.props.message || ''}\n </Text>\n {this.props.isCancelButtonVisible ? (\n <TouchableOpacity onPress={this.onCancel}>\n <Text\n testID='cancelText'\n style={[\n styles.textSpinner,\n { color: Colors.CancelButton },\n this.props.cancelTextStyle,\n ]}\n >\n {this.props.cancelText || 'Cancel'}\n </Text>\n </TouchableOpacity>\n ) : null}\n </View>\n </View>\n </Modal>\n </View>\n );\n }\n}\n\nexport default CrossBusyIndicator;\n"],"version":3}