Merge pull request #7 from sarmad1995/feature/typescript

Feature/typescript

.gitignore

@@ -1 +1,5 @@
-node_modules/
+node_modules/
+lib
+
+yarn.*
+yarn.lock

CHANGE_LOG.md

@@ -1,10 +1,10 @@
-##- 0.0.5
+## - 0.0.5
   - Beta
-##- 0.0.1
+## - 0.0.1
   - Work in progress
-##- 0.1.0
+## - 0.1.0
   - Initial Release
-##- 0.2.0
+## - 0.2.0
 ## BREAKING CHANGES
 Changed the default Title and Paragraph height.
 
@@ -13,4 +13,13 @@ Changed the default Title and Paragraph height.
 - Added INSTAGRAM style.
 - Added Bullet style.
 - Added List functionality.
-- Add support for hex colors.
+- Add support for hex colors.
+
+## - 0.2.3
+## BREAKING CHANGES
+No breaking changes :)
+
+## FEATURES
+- Typescript support.
+- Fully typed.
+- Removed extra things from npm, will be more lighter weight now.

README.md

@@ -13,6 +13,7 @@ Easy to implement and fun to use
 
 - :gear: **Customizable:** Feel free to change the colors, speed, sizes, paragraphs, title and much more.;
 - ⚛️ **Lightweight:** Lightweight with only neccessory code.;
+- :tada: **Typescript:** Fully typed
 
 
 ## Index

package.json

@@ -1,11 +1,15 @@
 {
   "name": "react-native-easy-content-loader",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "easy content loader for react-native apps",
-  "main": "index.js",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc"
   },
+  "files": [
+    "lib"
+  ],
   "keywords": [
     "react-native",
     "react native skeleton",
@@ -17,11 +21,25 @@
     "type": "git",
     "url": "https://github.com/sarmad1995/react-native-easy-content-loader"
   },
+  "bugs": {
+    "url": "https://github.com/sarmad1995/react-native-easy-content-loader/issues"
+  },
+  "homepage": "https://github.com/sarmad1995/react-native-easy-content-loader",
   "author": "Sarmad",
   "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^16.0.40",
+    "@types/react-native": "^0.52.16",
+    "tslint": "^5.9.1",
+    "tslint-config-prettier": "^1.9.0",
+    "tslint-react": "^3.5.1",
+    "typescript": "^2.7.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
   "dependencies": {
-    "prop-types": "^15.6.2",
-    "react": "^16.7.0",
     "hex-to-rgba": "^2.0.1"
   }
 }

src/Bullets.js → src/Bullets.tsx

@@ -1,25 +1,37 @@
-import React, { PureComponent } from 'react';
-import { Animated, View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
+import * as React from "react";
+import { Animated, View, StyleSheet, ViewStyle } from 'react-native';
 import {
   getInterpolatedColor,
-  commonPropTypes,
   commonDefaultProps,
-  startAnimationHelper
+  startAnimationHelper,
+  THeightType,
+  TWidthType,
+  CommonProps
 } from './shared';
 
 const AVATAR_SIZE = {
   default: 20,
   large: 30,
   small: 25
 };
-
-class ContentLoader extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
+interface Props extends CommonProps {
+  /**
+   * Used to determine the height of the main title
+   */
+  tHeight: THeightType,
+  /**
+   * Used to determine the width of the main title
+   */
+  tWidth: TWidthType,
+  /**
+   * add additinal avatarstyles or overwrite previous ones
+   */
+  avatarStyles?: ViewStyle
+}
+class ContentLoader extends React.PureComponent<Props> {
+  static defaultProps: Props;
+  state = {
       animation: new Animated.Value(0)
-    };
   }
 
   componentDidMount() {
@@ -75,7 +87,7 @@ class ContentLoader extends PureComponent {
     const avatarInitialStyles = {
       height: AVATAR_SIZE[aSize] || aSize,
       width: AVATAR_SIZE[aSize] || aSize,
-      borderRadius: aShape === 'circle' ? AVATAR_SIZE[aSize] / 2 || aSize / 2 : 3,
+      borderRadius: aShape === 'circle' ? AVATAR_SIZE[aSize] / 2 || (aSize as any) / 2 : 3,
       marginRight: reverse ? 0 : 5,
       marginLeft: reverse ? 5 : 0
     };
@@ -113,11 +125,6 @@ class ContentLoader extends PureComponent {
   }
 }
 
-ContentLoader.propTypes = {
-  ...commonPropTypes,
-  tWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  tHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
 ContentLoader.defaultProps = {
   ...commonDefaultProps,
   tWidth: '80%',

src/ContentLoader.js → src/ContentLoader.tsx

@@ -1,41 +1,87 @@
-import React, { PureComponent } from 'react';
-import { Animated, View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
+import * as React from "react";
+
+import { Animated, View, StyleSheet, ViewStyle } from 'react-native';
+
 import {
   getInterpolatedColor,
-  commonPropTypes,
   commonDefaultProps,
   startAnimationHelper,
-  paragraphInitialStyles
+  paragraphInitialStyles,
+  CommonProps,
+  PHeightType,
+  PWidthType,
+  TWidthType,
+  THeightType,
 } from './shared';
 /**
  * default content loader .
  *
  * can be customized to the needs, .
  *
  */
-const AVATAR_SIZE = {
+interface ContentLoaderAvatar {
+  default: string | number,
+  large: string | number ,
+  small: string | number
+}
+const AVATAR_SIZE: ContentLoaderAvatar= {
   default: 50,
   large: 70,
   small: 35
-};
-
-class ContentLoader extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      animation: new Animated.Value(0)
-    };
-  }
+}
+interface Props extends CommonProps {
+  /**
+   * Enables or disables paragraph lines.
+   */
+  paragraph?: boolean,
+  /**
+   * Used to determine height of the paragraph line.
+   */
+  pHeight: PHeightType,
+  /**
+   * Duration of fade animation, default = 500ms
+   */
+  animationDuration: number,
+  /**
+   * Used to determine the width of the paragraph lines, If you want dymanic widths for each line, you can add an array 
+   * [100,200,300] 
+   */
+  pWidth: PWidthType
+  /**
+   * Used to determine how many paragraph rows should be rendered.
+   */
+  pRows: number,
+  /**
+   * Used to determine the width of the title.
+   */
+  tWidth: TWidthType,
+  /**
+   * Used to determine the height of the title
+   */
+  tHeight: THeightType,
+  /**
+   * If you want to add additional styles/overwrite styles of paragraph
+   */
+  paragraphStyles?: ViewStyle,
+  /**
+    * If you want to add additional styles/overwrite styles of avatar
+   */
+  avatarStyles?: ViewStyle
+}
 
+class ContentLoader extends React.PureComponent<Props> {
+  static defaultProps: Props;
+  state = {
+    animation: new Animated.Value(0)
+  };
   componentDidMount() {
     const { active } = this.props;
     if (active) {
       this.startAnimation();
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
     const { loading } = this.props;
     if (prevProps.loading !== loading) {
       if (loading) {
@@ -44,7 +90,7 @@ class ContentLoader extends PureComponent {
     }
   }
 
-  startAnimation = () => {
+  private startAnimation= (): void=> {
     const { animation } = this.state;
     const { animationDuration } = this.props;
     startAnimationHelper(animation, animationDuration);
@@ -80,14 +126,14 @@ class ContentLoader extends PureComponent {
     if (loading === false) {
       return children || null;
     }
-    const titleInitialStyles = {
+    const titleInitialStyles: ViewStyle = {
       height: tHeight,
       width: tWidth
     };
-    const avatarInitialStyles = {
-      height: AVATAR_SIZE[aSize] || aSize,
-      width: AVATAR_SIZE[aSize] || aSize,
-      borderRadius: aShape === 'circle' ? AVATAR_SIZE[aSize] / 2 || aSize / 2 : 3,
+    const avatarInitialStyles: ViewStyle = {
+      height: (AVATAR_SIZE as any)[aSize] || aSize,
+      width: (AVATAR_SIZE as any)[aSize] || aSize,
+      borderRadius: aShape === 'circle' ? (AVATAR_SIZE as any)[aSize] / 2 || (aSize as any) / 2 : 3,
       marginRight: reverse ? 0 : 10,
       marginLeft: reverse ? 10 : 0
     };
@@ -142,17 +188,6 @@ class ContentLoader extends PureComponent {
     ));
   }
 }
-
-ContentLoader.propTypes = {
-  ...commonPropTypes,
-  paragraph: PropTypes.bool,
-  pHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  pWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-  pRows: PropTypes.number,
-  tWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  tHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  paragraphStyles: PropTypes.object
-};
 ContentLoader.defaultProps = {
   ...commonDefaultProps,
   paragraph: true,
@@ -183,7 +218,6 @@ const styles = StyleSheet.create({
     marginVertical: 5,
     borderRadius: 3
   },
-
   paragraphContainer: {}
 });
 export default ContentLoader;