69 lines
2.1 KiB
JavaScript
69 lines
2.1 KiB
JavaScript
|
/**
|
||
|
|
* Project iLinkWorld
|
||
|
|
* File SpinnerOverlayComponent
|
||
|
|
* Path components
|
||
|
|
* Created by BRICE ZELE
|
||
|
|
* Date: 01/02/2022
|
||
|
|
*/
|
||
|
|
import React, {ReactNode} from 'react';
|
||
|
|
import {ActivityIndicator, Modal, View} from 'react-native';
|
||
|
|
import Text from './Text';
|
||
|
|
import I18n from "react-native-i18n";
|
||
|
|
|
||
|
|
interface SpinnerOverlayProps {
|
||
|
|
show: boolean;
|
||
|
|
color?: string;
|
||
|
|
backgroundColor?: string;
|
||
|
|
dimLights?: number;
|
||
|
|
children: ReactNode;
|
||
|
|
loadingMessage?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SpinnerOverlay = ({
|
||
|
|
show = false,
|
||
|
|
color = '',
|
||
|
|
backgroundColor = '',
|
||
|
|
dimLights = 0.6,
|
||
|
|
loadingMessage = '',
|
||
|
|
children = null
|
||
|
|
}: SpinnerOverlayProps) => {
|
||
|
|
return (
|
||
|
|
<Modal transparent animationType="none" visible={show}>
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
backgroundColor: `rgba(0,0,0,${dimLights})`,
|
||
|
|
}}>
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
padding: 13,
|
||
|
|
backgroundColor: `transparent`,
|
||
|
|
borderRadius: 13,
|
||
|
|
}}>
|
||
|
|
{children !== null ?
|
||
|
|
React.Children.map(children, child =>
|
||
|
|
React.cloneElement(child, {}),
|
||
|
|
)
|
||
|
|
:
|
||
|
|
<ActivityIndicator
|
||
|
|
animating={show}
|
||
|
|
color="white"
|
||
|
|
size="large"
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
<Text style={{color: 'white'}}>
|
||
|
|
{loadingMessage === ''
|
||
|
|
? I18n.t('LOADING_DOTS')
|
||
|
|
: loadingMessage}
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SpinnerOverlay;
|