1- import * as React from 'react'
2- import { View , Text , Modal , ActivityIndicator , TextStyle , ViewStyle } from 'react-native' ;
3- import styles from './style'
1+ import * as React from 'react' ;
2+ import {
3+ View ,
4+ Text ,
5+ Modal ,
6+ ActivityIndicator ,
7+ TextStyle ,
8+ ViewStyle
9+ } from 'react-native' ;
10+ import styles from './style' ;
411
512const transparent = 'transparent' ;
613
7-
8-
9-
1014export interface SpinnerPropTypes {
11- cancelable ?: boolean ,
12- color ?: string ,
13- animation ?: 'none' | 'slide' | 'fade' ,
14- overlayColor ?: string ,
15- size ?: 'small' | 'large' | number //size props does not support value normal
16- textContent ?: string ,
17- textStyle ?: TextStyle ,
18- visible ?: boolean ,
19- indicatorStyle ?: ViewStyle ,
20- customIndicator ?: React . ReactNode ,
21- children ?: React . ReactNode ,
22- spinnerKey ?: string
15+ cancelable ?: boolean ;
16+ color ?: string ;
17+ animation ?: 'none' | 'slide' | 'fade' ;
18+ overlayColor ?: string ;
19+ size ?: 'small' | 'large' | number ; // size props does not support value normal
20+ textContent ?: string ;
21+ textStyle ?: TextStyle ;
22+ visible ?: boolean ;
23+ indicatorStyle ?: ViewStyle ;
24+ customIndicator ?: React . ReactNode ;
25+ children ?: React . ReactNode ;
26+ spinnerKey ?: string ;
2327}
2428
25-
26-
2729const Spinner = ( {
28- cancelable= false ,
29- color= 'white' ,
30- animation= 'none' ,
31- overlayColor= 'rgba(0, 0, 0, 0.25)' ,
32- size= 'large' ,
33- textContent= '' ,
34- textStyle,
35- visible= false ,
36- indicatorStyle,
37- customIndicator,
38- children,
39- spinnerKey
40- } :SpinnerPropTypes ) => {
30+ cancelable = false ,
31+ color = 'white' ,
32+ animation = 'none' ,
33+ overlayColor = 'rgba(0, 0, 0, 0.25)' ,
34+ size = 'large' ,
35+ textContent = '' ,
36+ textStyle,
37+ visible = false ,
38+ indicatorStyle,
39+ customIndicator,
40+ children,
41+ spinnerKey
42+ } : SpinnerPropTypes ) => {
43+ const [ spinnerVisible , setSpinnerVisibility ] = React . useState ( visible ) ;
44+ const close = ( ) => {
45+ setSpinnerVisibility ( false ) ;
46+ } ;
4147
42- const [ spinnerVisible , setSpinnerVisibility ] = React . useState ( visible )
43- const close = ( ) => {
44- setSpinnerVisibility ( false )
48+ const _handleOnRequestClose = ( ) => {
49+ if ( cancelable ) {
50+ close ( ) ;
4551 }
52+ } ;
4653
47- const _handleOnRequestClose = ( ) => {
48- if ( cancelable ) {
49- close ( ) ;
50- }
51- }
52-
53- React . useEffect ( ( ) => {
54- setSpinnerVisibility ( visible )
55- } , [ visible ] )
56- const _renderDefaultContent = ( ) => {
57- return (
58- < View style = { styles . background } >
59- { customIndicator || (
60- < ActivityIndicator
61- color = { color }
62- size = { size }
63- style = { [ styles . activityIndicator , { ...indicatorStyle } ] }
64- />
65- ) }
66- < View style = { [ styles . textContainer , { ...indicatorStyle } ] } >
67- < Text style = { [ styles . textContent , textStyle ] } >
68- { textContent }
69- </ Text >
70- </ View >
71- </ View >
72- ) ;
73- }
54+ React . useEffect ( ( ) => {
55+ setSpinnerVisibility ( visible ) ;
56+ } , [ visible ] ) ;
57+ const _renderDefaultContent = ( ) => {
58+ return (
59+ < View style = { styles . background } >
60+ { customIndicator || (
61+ < ActivityIndicator
62+ color = { color }
63+ size = { size }
64+ style = { [ styles . activityIndicator , { ...indicatorStyle } ] }
65+ />
66+ ) }
67+ < View style = { [ styles . textContainer , { ...indicatorStyle } ] } >
68+ < Text style = { [ styles . textContent , textStyle ] } > { textContent } </ Text >
69+ </ View >
70+ </ View >
71+ ) ;
72+ } ;
7473
75- const _renderSpinner = ( ) => {
76- const spinner = (
77- < View
78- style = { [ styles . container , { backgroundColor : overlayColor } ] }
79- key = { spinnerKey || `spinner_${ Date . now ( ) } ` } >
80- { children || _renderDefaultContent ( ) }
81- </ View >
82- ) ;
83-
84- return (
85- < Modal
86- animationType = { animation }
87- onRequestClose = { ( ) => _handleOnRequestClose ( ) }
88- supportedOrientations = { [ 'landscape' , 'portrait' ] }
89- transparent
90- visible = { spinnerVisible }
91- statusBarTranslucent = { true }
92- >
93- { spinner }
94- </ Modal >
95- ) ;
96- }
74+ const _renderSpinner = ( ) => {
75+ const spinner = (
76+ < View
77+ style = { [ styles . container , { backgroundColor : overlayColor } ] }
78+ key = { spinnerKey || `spinner_${ Date . now ( ) } ` }
79+ >
80+ { children || _renderDefaultContent ( ) }
81+ </ View >
82+ ) ;
9783
98- return _renderSpinner ( )
84+ return (
85+ < Modal
86+ animationType = { animation }
87+ onRequestClose = { ( ) => {
88+ _handleOnRequestClose ( ) ;
89+ } }
90+ supportedOrientations = { [ 'landscape' , 'portrait' ] }
91+ transparent
92+ visible = { spinnerVisible }
93+ statusBarTranslucent = { true }
94+ >
95+ { spinner }
96+ </ Modal >
97+ ) ;
98+ } ;
9999
100- }
100+ return _renderSpinner ( ) ;
101+ } ;
101102
102- export default Spinner
103+ export default Spinner ;
0 commit comments