update code style

Author: jsdf

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
   "rules": {
     "no-console": 0,
     "no-shadow": 2,
+    "no-var": 2,
     // style
     "semi": [2, 'always'],
     "comma-dangle": [2, "always-multiline"],

Img.js renamed to AutoSizedImage.js

@@ -1,55 +1,56 @@
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+import React from 'react';
+import {
   Image,
   Dimensions,
-} = ReactNative;
+} from 'react-native';
 
-var {width} = Dimensions.get('window');
+const {width} = Dimensions.get('window');
 
-var baseStyle = {
+const baseStyle = {
   backgroundColor: 'transparent',
 };
-var ResizableImage = React.createClass({
-  getInitialState: function() {
-    return {
+
+export default class AutoSizedImage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       // set width 1 is for preventing the warning
       // You must specify a width and height for the image %s
       width: this.props.style.width || 1,
       height: this.props.style.height || 1,
     };
-  },
-  componentDidMount: function() {
+  }
+
+  componentDidMount() {
     //avoid repaint if width/height is given
     if (this.props.style.width || this.props.style.height) {
       return;
     }
     Image.getSize(this.props.source.uri, (w, h) => {
       this.setState({width: w, height: h});
     });
-  },
-  render: function() {
-    var finalSize = {};
+  }
+
+  render() {
+    const finalSize = {};
     if (this.state.width > width) {
       finalSize.width = width;
-      var ratio = width / this.state.width;
+      const ratio = width / this.state.width;
       finalSize.height = this.state.height * ratio;
     }
-    var style = Object.assign(
+    const style = Object.assign(
       baseStyle,
       this.props.style,
       this.state,
       finalSize
     );
-    var source = {};
+    let source = {};
     if (!finalSize.width || !finalSize.height) {
       source = Object.assign(source, this.props.source, this.state);
     } else {
       source = Object.assign(source, this.props.source, finalSize);
     }
 
     return <Image style={style} source={source} />;
-  },
-});
-
-module.exports = ResizableImage;
+  }
+}

__tests__/HTMLView-test.js

@@ -77,9 +77,9 @@ describe('<HTMLView/>', () => {
     }
 
     expect(
-      renderer.create(
-        <HTMLView value={htmlContent} renderNode={renderNode} />
-      ).toJSON()
+      renderer
+        .create(<HTMLView value={htmlContent} renderNode={renderNode} />)
+        .toJSON()
     ).toMatchSnapshot();
   });
 });

example/Example.js

@@ -1,10 +1,14 @@
 import React from 'react';
-import { StyleSheet, View, Text, ScrollView } from 'react-native';
-import HTMLView from 'react-native-htmlview';
+import {StyleSheet, View, Text, ScrollView} from 'react-native';
+import HTMLView from '../';
 
 function renderNode(node, index) {
   if (node.name == 'iframe') {
-    return <View key={index} style={{width: 200, height: 200}}><Text>{node.attribs.src}</Text></View>;
+    return (
+      <View key={index} style={{width: 200, height: 200}}>
+        <Text>{node.attribs.src}</Text>
+      </View>
+    );
   }
 }
 
@@ -35,7 +39,6 @@ const htmlContent = `
 </div>
 `;
 
-
 export default class App extends React.Component {
   render() {
     return (

htmlToElement.js

@@ -1,18 +1,16 @@
-var React = require('react');
-var ReactNative = require('react-native');
-var htmlparser = require('htmlparser2-without-node-native');
-var entities = require('entities');
-
-var {
+import React from 'react';
+import {
   Text,
-} = ReactNative;
+} from 'react-native';
+import htmlparser from 'htmlparser2-without-node-native';
+import entities from 'entities';
 
-var Img = require('./Img');
+import AutoSizedImage from './AutoSizedImage';
 
-var LINE_BREAK = '\n';
-var BULLET = '\u2022 ';
+const LINE_BREAK = '\n';
+const BULLET = '\u2022 ';
 
-const ImgTag = props => {
+const Img = props => {
   const width = Number(props.attribs['width']) || Number(props.attribs['data-width']) || 0;
   const height = Number(props.attribs['height']) || Number(props.attribs['data-height']) || 0;
 
@@ -26,17 +24,17 @@ const ImgTag = props => {
     height,
   };
   return (
-    <Img source={source} style={imgStyle} />
+    <AutoSizedImage source={source} style={imgStyle} />
   );
 };
 
-function htmlToElement(rawHtml, opts, done) {
+export default function htmlToElement(rawHtml, opts, done) {
   function domToElement(dom, parent) {
     if (!dom) return null;
 
     return dom.map((node, index, list) => {
       if (opts.customRenderer) {
-        var rendered = opts.customRenderer(node, index, list, parent);
+        const rendered = opts.customRenderer(node, index, list, parent);
         if (rendered || rendered === null) return rendered;
       }
 
@@ -51,7 +49,7 @@ function htmlToElement(rawHtml, opts, done) {
       if (node.type == 'tag') {
         if (node.name == 'img') {
           return (
-            <ImgTag key={index} attribs={node.attribs} />
+            <Img key={index} attribs={node.attribs} />
           );
         }
 
@@ -74,13 +72,12 @@ function htmlToElement(rawHtml, opts, done) {
     });
   }
 
-  var handler = new htmlparser.DomHandler(function(err, dom) {
+  const handler = new htmlparser.DomHandler(function(err, dom) {
     if (err) done(err);
     done(null, domToElement(dom));
   });
-  var parser = new htmlparser.Parser(handler);
+  const parser = new htmlparser.Parser(handler);
   parser.write(rawHtml);
   parser.done();
 }
 
-module.exports = htmlToElement;

index.js

@@ -1 +1,3 @@
-module.exports = require('./HTMLView');
+import HTMLView from './HTMLView';
+
+export default HTMLView;

package.json

@@ -5,8 +5,9 @@
   "main": "index.js",
   "scripts": {
     "lint": "eslint .",
-    "test": "yarn run lint-format && yarn run lint && yarn run jest",
-    "lint-format": "./format.sh --list-different; if [ $? != 0 ]; then echo \"CODE FORMATTING: please run 'yarn run format' and commit the changes\"; exit 1; fi",
+    "lint-fix": "eslint . --fix",
+    "test": "yarn run format-lint && yarn run lint && yarn run jest",
+    "format-lint": "./format.sh --list-different; if [ $? != 0 ]; then echo \"CODE FORMATTING: please run 'yarn run format' and commit the changes\"; exit 1; fi",
     "format": "./format.sh --write && eslint . --fix",
     "jest": "jest"
   },