Feat: Re-written in typescript (#109)

* feat: bug fixes, js to ts, class to hooks

* build: build files, package.json bugs

* bug:missing export bug

* fix: fixed type issue

Author: irohitb

.gitignore

@@ -4,3 +4,4 @@
 node_modules
 *.sw*
 .cache-loader
+

README.md

@@ -77,6 +77,7 @@ We recommend that you follow two rules when implementing this component.
 | Name                | Website                   |
 | ------------------- | ------------------------- |
 | **Nick Baugh**      | <http://niftylettuce.com> |
+| **Rohit Bhatia**    | <http://blendtale.com>    |
 | **Spencer Snyder**  | <http://spencersnyder.io> |
 | **Luciano Lima**    |                           |
 | **George Savvidis** |                           |

index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+export interface SpinnerPropTypes {
+    cancelable?: boolean;
+    color?: string;
+    animation?: 'none' | 'slide' | 'fade';
+    overlayColor?: string;
+    size?: 'small' | 'large' | number;
+    textContent?: string;
+    textStyle?: TextStyle;
+    visible?: boolean;
+    indicatorStyle?: ViewStyle;
+    customIndicator?: React.ReactNode;
+    children?: React.ReactNode;
+    spinnerKey?: string;
+}
+declare const Spinner: ({ cancelable, color, animation, overlayColor, size, textContent, textStyle, visible, indicatorStyle, customIndicator, children, spinnerKey }: SpinnerPropTypes) => JSX.Element;
+export default Spinner;

lib/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { View, Text, Modal, ActivityIndicator } from 'react-native';
+import styles from './style';
+const transparent = 'transparent';
+const Spinner = ({ cancelable = false, color = 'white', animation = 'none', overlayColor = 'rgba(0, 0, 0, 0.25)', size = 'large', textContent = '', textStyle, visible = false, indicatorStyle, customIndicator, children, spinnerKey }) => {
+    const [spinnerVisible, setSpinnerVisibility] = React.useState(visible);
+    const close = () => {
+        setSpinnerVisibility(false);
+    };
+    const _handleOnRequestClose = () => {
+        if (cancelable) {
+            close();
+        }
+    };
+    const _renderDefaultContent = () => {
+        return (React.createElement(View, { style: styles.background },
+            customIndicator || (React.createElement(ActivityIndicator, { color: color, size: size, style: [styles.activityIndicator, { ...indicatorStyle }] })),
+            React.createElement(View, { style: [styles.textContainer, { ...indicatorStyle }] },
+                React.createElement(Text, { style: [styles.textContent, textStyle] }, textContent))));
+    };
+    const _renderSpinner = () => {
+        const spinner = (React.createElement(View, { style: [styles.container, { backgroundColor: overlayColor }], key: spinnerKey || `spinner_${Date.now()}` }, children || _renderDefaultContent()));
+        return (React.createElement(Modal, { animationType: animation, onRequestClose: () => _handleOnRequestClose(), supportedOrientations: ['landscape', 'portrait'], transparent: true, visible: spinnerVisible, statusBarTranslucent: true }, spinner));
+    };
+    return _renderSpinner();
+};
+export default Spinner;

lib/index.js

@@ -0,0 +1,40 @@
+declare const styles: {
+    activityIndicator: {
+        flex: number;
+    };
+    background: {
+        alignItems: "center";
+        bottom: number;
+        justifyContent: "center";
+        left: number;
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+    container: {
+        backgroundColor: string;
+        bottom: number;
+        flex: number;
+        left: number;
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+    textContainer: {
+        alignItems: "center";
+        bottom: number;
+        flex: number;
+        justifyContent: "center";
+        left: number;
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+    textContent: {
+        fontSize: number;
+        fontWeight: "bold";
+        height: number;
+        top: number;
+    };
+};
+export default styles;

lib/style.d.ts

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+const transparent = 'transparent';
+const styles = StyleSheet.create({
+    activityIndicator: {
+        flex: 1
+    },
+    background: {
+        alignItems: 'center',
+        bottom: 0,
+        justifyContent: 'center',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0
+    },
+    container: {
+        backgroundColor: transparent,
+        bottom: 0,
+        flex: 1,
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0
+    },
+    textContainer: {
+        alignItems: 'center',
+        bottom: 0,
+        flex: 1,
+        justifyContent: 'center',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0
+    },
+    textContent: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        height: 50,
+        top: 80
+    }
+});
+export default styles;