| 1 | {"version":3,"sources":["ActivityIndicator.tsx"],"names":["React","Animated","Easing","Platform","StyleSheet","View","withTheme","DURATION","ActivityIndicator","animating","color","indicatorColor","hidesWhenStopped","size","indicatorSize","style","theme","rest","current","timer","useRef","Value","fade","rotation","undefined","animation","scale","startRotation","useCallback","timing","duration","toValue","isInteraction","useNativeDriver","start","setValue","loop","stopRotation","stop","useEffect","easing","linear","OS","colors","primary","frames","bezier","containerStyle","width","height","overflow","styles","container","busy","opacity","map","index","inputRange","Array","from","_","frameIndex","outputRange","progress","direction","layerStyle","transform","rotate","interpolate","viewportStyle","translateY","offsetStyle","top","lineStyle","borderColor","borderWidth","borderRadius","layer","create","justifyContent","alignItems","absoluteFillObject"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,QADF,EAEEC,MAFF,EAGEC,QAHF,EAKEC,UALF,EAMEC,IANF,QAQO,cARP;AASA,SAASC,SAAT,QAA0B,iBAA1B;AA0BA,MAAMC,QAAQ,GAAG,IAAjB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,QAQb;AAAA,MARc;AACzBC,IAAAA,SAAS,GAAG,IADa;AAEzBC,IAAAA,KAAK,EAAEC,cAFkB;AAGzBC,IAAAA,gBAAgB,GAAG,IAHM;AAIzBC,IAAAA,IAAI,EAAEC,aAAa,GAAG,OAJG;AAKzBC,IAAAA,KALyB;AAMzBC,IAAAA,KANyB;AAOzB,OAAGC;AAPsB,GAQd;AACX,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAqBnB,KAAK,CAACoB,MAAN,CACzB,IAAInB,QAAQ,CAACoB,KAAb,CAAmB,CAAnB,CADyB,CAA3B;AAGA,QAAM;AAAEH,IAAAA,OAAO,EAAEI;AAAX,MAAoBtB,KAAK,CAACoB,MAAN,CACxB,IAAInB,QAAQ,CAACoB,KAAb,CAAmB,CAACZ,SAAD,IAAcG,gBAAd,GAAiC,CAAjC,GAAqC,CAAxD,CADwB,CAA1B;AAIA,QAAMW,QAAQ,GAAGvB,KAAK,CAACoB,MAAN,CACfI,SADe,CAAjB;AAIA,QAAM;AACJC,IAAAA,SAAS,EAAE;AAAEC,MAAAA;AAAF;AADP,MAEFV,KAFJ;AAIA,QAAMW,aAAa,GAAG3B,KAAK,CAAC4B,WAAN,CAAkB,MAAM;AAC5C;AACA3B,IAAAA,QAAQ,CAAC4B,MAAT,CAAgBP,IAAhB,EAAsB;AACpBQ,MAAAA,QAAQ,EAAE,MAAMJ,KADI;AAEpBK,MAAAA,OAAO,EAAE,CAFW;AAGpBC,MAAAA,aAAa,EAAE,KAHK;AAIpBC,MAAAA,eAAe,EAAE;AAJG,KAAtB,EAKGC,KALH,GAF4C,CAS5C;;AACA,QAAIX,QAAQ,CAACL,OAAb,EAAsB;AACpBC,MAAAA,KAAK,CAACgB,QAAN,CAAe,CAAf,EADoB,CAEpB;;AACAlC,MAAAA,QAAQ,CAACmC,IAAT,CAAcb,QAAQ,CAACL,OAAvB,EAAgCgB,KAAhC;AACD;AACF,GAfqB,EAenB,CAACR,KAAD,EAAQJ,IAAR,EAAcH,KAAd,CAfmB,CAAtB;;AAiBA,QAAMkB,YAAY,GAAG,MAAM;AACzB,QAAId,QAAQ,CAACL,OAAb,EAAsB;AACpBK,MAAAA,QAAQ,CAACL,OAAT,CAAiBoB,IAAjB;AACD;AACF,GAJD;;AAMAtC,EAAAA,KAAK,CAACuC,SAAN,CAAgB,MAAM;AACpB,QAAIhB,QAAQ,CAACL,OAAT,KAAqBM,SAAzB,EAAoC;AAClC;AACAD,MAAAA,QAAQ,CAACL,OAAT,GAAmBjB,QAAQ,CAAC4B,MAAT,CAAgBV,KAAhB,EAAuB;AACxCW,QAAAA,QAAQ,EAAEvB,QAD8B;AAExCiC,QAAAA,MAAM,EAAEtC,MAAM,CAACuC,MAFyB;AAGxC;AACAR,QAAAA,eAAe,EAAE9B,QAAQ,CAACuC,EAAT,KAAgB,KAJO;AAKxCX,QAAAA,OAAO,EAAE,CAL+B;AAMxCC,QAAAA,aAAa,EAAE;AANyB,OAAvB,CAAnB;AAQD;;AAED,QAAIvB,SAAJ,EAAe;AACbkB,MAAAA,aAAa;AACd,KAFD,MAEO,IAAIf,gBAAJ,EAAsB;AAC3B;AACAX,MAAAA,QAAQ,CAAC4B,MAAT,CAAgBP,IAAhB,EAAsB;AACpBQ,QAAAA,QAAQ,EAAE,MAAMJ,KADI;AAEpBK,QAAAA,OAAO,EAAE,CAFW;AAGpBE,QAAAA,eAAe,EAAE,IAHG;AAIpBD,QAAAA,aAAa,EAAE;AAJK,OAAtB,EAKGE,KALH,CAKSG,YALT;AAMD,KARM,MAQA;AACLA,MAAAA,YAAY;AACb;AACF,GA1BD,EA0BG,CAAC5B,SAAD,EAAYa,IAAZ,EAAkBV,gBAAlB,EAAoCe,aAApC,EAAmDD,KAAnD,EAA0DP,KAA1D,CA1BH;AA4BA,QAAMT,KAAK,GAAGC,cAAc,IAAIK,KAAK,CAAC2B,MAAN,CAAaC,OAA7C;AACA,QAAM/B,IAAI,GACR,OAAOC,aAAP,KAAyB,QAAzB,GACIA,aAAa,KAAK,OAAlB,GACE,EADF,GAEE,EAHN,GAIIA,aAAa,GACbA,aADa,GAEb,EAPN;AASA,QAAM+B,MAAM,GAAI,KAAKtC,QAAN,GAAkB,IAAjC;AACA,QAAMiC,MAAM,GAAGtC,MAAM,CAAC4C,MAAP,CAAc,GAAd,EAAmB,GAAnB,EAAwB,GAAxB,EAA6B,GAA7B,CAAf;AACA,QAAMC,cAAc,GAAG;AACrBC,IAAAA,KAAK,EAAEnC,IADc;AAErBoC,IAAAA,MAAM,EAAEpC,IAAI,GAAG,CAFM;AAGrBqC,IAAAA,QAAQ,EAAE;AAHW,GAAvB;AAMA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBrC,KAAnB;AADT,KAEME,IAFN;AAGE,IAAA,UAAU,MAHZ;AAIE,IAAA,iBAAiB,EAAC,aAJpB;AAKE,IAAA,kBAAkB,EAAE;AAAEoC,MAAAA,IAAI,EAAE5C;AAAR;AALtB,mBAOE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAAC;AAAEuC,MAAAA,KAAK,EAAEnC,IAAT;AAAeoC,MAAAA,MAAM,EAAEpC,IAAvB;AAA6ByC,MAAAA,OAAO,EAAEhC;AAAtC,KAAD,CADT;AAEE,IAAA,WAAW,EAAE;AAFf,KAIG,CAAC,CAAD,EAAI,CAAJ,EAAOiC,GAAP,CAAYC,KAAD,IAAW;AACrB;AACA,UAAMC,UAAU,GAAGC,KAAK,CAACC,IAAN,CACjB,IAAID,KAAJ,CAAUb,MAAV,CADiB,EAEjB,CAACe,CAAD,EAAIC,UAAJ,KAAmBA,UAAU,IAAIhB,MAAM,GAAG,CAAb,CAFZ,CAAnB;AAIA,UAAMiB,WAAW,GAAGJ,KAAK,CAACC,IAAN,CAAW,IAAID,KAAJ,CAAUb,MAAV,CAAX,EAA8B,CAACe,CAAD,EAAIC,UAAJ,KAAmB;AACnE,UAAIE,QAAQ,GAAI,IAAIF,UAAL,IAAoBhB,MAAM,GAAG,CAA7B,CAAf;AACA,YAAMtB,QAAQ,GAAGiC,KAAK,GAAG,EAAE,MAAM,EAAR,CAAH,GAAiB,EAAE,MAAM,EAAR,CAAvC;;AAEA,UAAIO,QAAQ,GAAG,GAAf,EAAoB;AAClBA,QAAAA,QAAQ,GAAG,MAAMA,QAAjB;AACD;;AAED,YAAMC,SAAS,GAAGR,KAAK,GAAG,CAAC,CAAJ,GAAQ,CAAC,CAAhC;AAEA,aAAQ,GAAEQ,SAAS,IAAI,MAAM,EAAV,CAAT,GAAyBxB,MAAM,CAACuB,QAAD,CAA/B,GAA4CxC,QAAS,KAA/D;AACD,KAXmB,CAApB;AAaA,UAAM0C,UAAU,GAAG;AACjBjB,MAAAA,KAAK,EAAEnC,IADU;AAEjBoC,MAAAA,MAAM,EAAEpC,IAFS;AAGjBqD,MAAAA,SAAS,EAAE,CACT;AACEC,QAAAA,MAAM,EAAEhD,KAAK,CAACiD,WAAN,CAAkB;AACxBX,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADY;AAExBK,UAAAA,WAAW,EAAE,CAAE,GAAE,IAAI,EAAJ,GAAS,EAAG,KAAhB,EAAuB,GAAE,IAAI,GAAJ,GAAU,EAAV,GAAe,EAAG,KAA3C;AAFW,SAAlB;AADV,OADS;AAHM,KAAnB;AAaA,UAAMO,aAAa,GAAG;AACpBrB,MAAAA,KAAK,EAAEnC,IADa;AAEpBoC,MAAAA,MAAM,EAAEpC,IAFY;AAGpBqD,MAAAA,SAAS,EAAE,CACT;AACEI,QAAAA,UAAU,EAAEd,KAAK,GAAG,CAAC3C,IAAD,GAAQ,CAAX,GAAe;AADlC,OADS,EAIT;AACEsD,QAAAA,MAAM,EAAEhD,KAAK,CAACiD,WAAN,CAAkB;AAAEX,UAAAA,UAAF;AAAcK,UAAAA;AAAd,SAAlB;AADV,OAJS;AAHS,KAAtB;AAaA,UAAMS,WAAW,GAAGf,KAAK,GAAG;AAAEgB,MAAAA,GAAG,EAAE3D,IAAI,GAAG;AAAd,KAAH,GAAuB,IAAhD;AAEA,UAAM4D,SAAS,GAAG;AAChBzB,MAAAA,KAAK,EAAEnC,IADS;AAEhBoC,MAAAA,MAAM,EAAEpC,IAFQ;AAGhB6D,MAAAA,WAAW,EAAEhE,KAHG;AAIhBiE,MAAAA,WAAW,EAAE9D,IAAI,GAAG,EAJJ;AAKhB+D,MAAAA,YAAY,EAAE/D,IAAI,GAAG;AALL,KAAlB;AAQA,wBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,MAAA,GAAG,EAAE2C,KAApB;AAA2B,MAAA,KAAK,EAAE,CAACL,MAAM,CAAC0B,KAAR;AAAlC,oBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,MAAA,KAAK,EAAEZ;AAAtB,oBACE,oBAAC,QAAD,CAAU,IAAV;AACE,MAAA,KAAK,EAAE,CAAClB,cAAD,EAAiBwB,WAAjB,CADT;AAEE,MAAA,WAAW,EAAE;AAFf,oBAIE,oBAAC,QAAD,CAAU,IAAV;AAAe,MAAA,KAAK,EAAEF;AAAtB,oBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,MAAA,KAAK,EAAEtB,cAAtB;AAAsC,MAAA,WAAW,EAAE;AAAnD,oBACE,oBAAC,QAAD,CAAU,IAAV;AAAe,MAAA,KAAK,EAAE0B;AAAtB,MADF,CADF,CAJF,CADF,CADF,CADF;AAgBD,GAvEA,CAJH,CAPF,CADF;AAuFD,CApLD;;AAsLA,MAAMtB,MAAM,GAAG/C,UAAU,CAAC0E,MAAX,CAAkB;AAC/B1B,EAAAA,SAAS,EAAE;AACT2B,IAAAA,cAAc,EAAE,QADP;AAETC,IAAAA,UAAU,EAAE;AAFH,GADoB;AAM/BH,EAAAA,KAAK,EAAE,EACL,GAAGzE,UAAU,CAAC6E,kBADT;AAGLF,IAAAA,cAAc,EAAE,QAHX;AAILC,IAAAA,UAAU,EAAE;AAJP;AANwB,CAAlB,CAAf;AAcA,eAAe1E,SAAS,CAACE,iBAAD,CAAxB","sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n Easing,\n Platform,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\nimport { withTheme } from '../core/theming';\n\ntype Props = React.ComponentPropsWithRef<typeof View> & {\n /**\n * Whether to show the indicator or hide it.\n */\n animating?: boolean;\n /**\n * The color of the spinner.\n */\n color?: string;\n /**\n * Size of the indicator.\n */\n size?: 'small' | 'large' | number;\n /**\n * Whether the indicator should hide when not animating.\n */\n hidesWhenStopped?: boolean;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\nconst DURATION = 2400;\n\n/**\n * Activity indicator is used to present progress of some activity in the app.\n * It can be used as a drop-in for the ActivityIndicator shipped with React Native.\n *\n * <div class=\"screenshots\">\n * <img src=\"screenshots/activity-indicator.gif\" style=\"width: 100px;\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ActivityIndicator, Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <ActivityIndicator animating={true} color={Colors.red800} />\n * );\n *\n * export default MyComponent;\n * ```\n */\nconst ActivityIndicator = ({\n animating = true,\n color: indicatorColor,\n hidesWhenStopped = true,\n size: indicatorSize = 'small',\n style,\n theme,\n ...rest\n}: Props) => {\n const { current: timer } = React.useRef<Animated.Value>(\n new Animated.Value(0)\n );\n const { current: fade } = React.useRef<Animated.Value>(\n new Animated.Value(!animating && hidesWhenStopped ? 0 : 1)\n );\n\n const rotation = React.useRef<Animated.CompositeAnimation | undefined>(\n undefined\n );\n\n const {\n animation: { scale },\n } = theme;\n\n const startRotation = React.useCallback(() => {\n // Show indicator\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 1,\n isInteraction: false,\n useNativeDriver: true,\n }).start();\n\n // Circular animation in loop\n if (rotation.current) {\n timer.setValue(0);\n // $FlowFixMe\n Animated.loop(rotation.current).start();\n }\n }, [scale, fade, timer]);\n\n const stopRotation = () => {\n if (rotation.current) {\n rotation.current.stop();\n }\n };\n\n React.useEffect(() => {\n if (rotation.current === undefined) {\n // Circular animation in loop\n rotation.current = Animated.timing(timer, {\n duration: DURATION,\n easing: Easing.linear,\n // Animated.loop does not work if useNativeDriver is true on web\n useNativeDriver: Platform.OS !== 'web',\n toValue: 1,\n isInteraction: false,\n });\n }\n\n if (animating) {\n startRotation();\n } else if (hidesWhenStopped) {\n // Hide indicator first and then stop rotation\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 0,\n useNativeDriver: true,\n isInteraction: false,\n }).start(stopRotation);\n } else {\n stopRotation();\n }\n }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);\n\n const color = indicatorColor || theme.colors.primary;\n const size =\n typeof indicatorSize === 'string'\n ? indicatorSize === 'small'\n ? 24\n : 48\n : indicatorSize\n ? indicatorSize\n : 24;\n\n const frames = (60 * DURATION) / 1000;\n const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);\n const containerStyle = {\n width: size,\n height: size / 2,\n overflow: 'hidden' as const,\n };\n\n return (\n <View\n style={[styles.container, style]}\n {...rest}\n accessible\n accessibilityRole=\"progressbar\"\n accessibilityState={{ busy: animating }}\n >\n <Animated.View\n style={[{ width: size, height: size, opacity: fade }]}\n collapsable={false}\n >\n {[0, 1].map((index) => {\n // Thanks to https://github.com/n4kz/react-native-indicators for the great work\n const inputRange = Array.from(\n new Array(frames),\n (_, frameIndex) => frameIndex / (frames - 1)\n );\n const outputRange = Array.from(new Array(frames), (_, frameIndex) => {\n let progress = (2 * frameIndex) / (frames - 1);\n const rotation = index ? +(360 - 15) : -(180 - 15);\n\n if (progress > 1.0) {\n progress = 2.0 - progress;\n }\n\n const direction = index ? -1 : +1;\n\n return `${direction * (180 - 30) * easing(progress) + rotation}deg`;\n });\n\n const layerStyle = {\n width: size,\n height: size,\n transform: [\n {\n rotate: timer.interpolate({\n inputRange: [0, 1],\n outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],\n }),\n },\n ],\n };\n\n const viewportStyle = {\n width: size,\n height: size,\n transform: [\n {\n translateY: index ? -size / 2 : 0,\n },\n {\n rotate: timer.interpolate({ inputRange, outputRange }),\n },\n ],\n };\n\n const offsetStyle = index ? { top: size / 2 } : null;\n\n const lineStyle = {\n width: size,\n height: size,\n borderColor: color,\n borderWidth: size / 10,\n borderRadius: size / 2,\n };\n\n return (\n <Animated.View key={index} style={[styles.layer]}>\n <Animated.View style={layerStyle}>\n <Animated.View\n style={[containerStyle, offsetStyle]}\n collapsable={false}\n >\n <Animated.View style={viewportStyle}>\n <Animated.View style={containerStyle} collapsable={false}>\n <Animated.View style={lineStyle} />\n </Animated.View>\n </Animated.View>\n </Animated.View>\n </Animated.View>\n </Animated.View>\n );\n })}\n </Animated.View>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n layer: {\n ...StyleSheet.absoluteFillObject,\n\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n\nexport default withTheme(ActivityIndicator);\n"]} |