init

CannerCMS · Mar 7, 2018 · 84e21e2 · 84e21e2
commit 84e21e2
Show file tree

Hide file tree

Showing 21 changed files with 8,002 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "react",
+    "flow",
+    "stage-0"
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,17 @@
+
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js}]
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+docs/static
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:flowtype/recommended"
+  ],
+  parser: "babel-eslint",
+  env: {
+    browser: true,
+    node: true
+  },
+  plugins: [
+    "react",
+    "flowtype"
+  ],
+  rules: {
+    "react/prop-types": 0,
+    "no-implicit-coercion": 0,
+    "max-len": 0
+  }
+};
diff --git a/.flowconfig b/.flowconfig
@@ -0,0 +1,12 @@
+
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+coverage
+npm-debug.log
+lib
+.DS_Store
+_gh-pages
+yarn-error.log
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "eslint.enable": true,
+  "flow.useNPMPackagedFlow": true,
+  "javascript.validate.enable": false
+}
diff --git a/.yo-rc.json b/.yo-rc.json
@@ -0,0 +1,10 @@
+{
+  "generator-canner-react": {
+    "promptValues": {
+      "authorName": "chilijung",
+      "authorEmail": "[email protected]",
+      "authorUrl": "",
+      "webpackExample": true
+    }
+  }
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 chilijung <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,40 @@
+# react-imgloader [![NPM version][npm-image]][npm-url]  [![Dependency Status][daviddm-image]][daviddm-url]
+> A react image loader component
+
+## Installation
+
+```sh
+$ npm install --save react-imgloader
+```
+
+## Usage
+
+```js
+var reactImgloader = require('react-imgloader');
+
+reactImgloader('Rainbow');
+```
+
+## Start example server
+
+```
+npm start
+```
+
+## generate demo
+
+```js
+npm run gh-pages
+```
+
+## License
+
+MIT © [chilijung]()
+
+
+[npm-image]: https://badge.fury.io/js/react-imgloader.svg
+[npm-url]: https://npmjs.org/package/react-imgloader
+[travis-image]: https://travis-ci.org/Canner/react-imgloader.svg?branch=master
+[travis-url]: https://travis-ci.org/Canner/react-imgloader
+[daviddm-image]: https://david-dm.org/Canner/react-imgloader.svg?theme=shields.io
+[daviddm-url]: https://david-dm.org/Canner/react-imgloader
diff --git a/__test__/.eslintrc b/__test__/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "env": {
+    "mocha": true
+  }
+}
diff --git a/__test__/react-imgloader.test.js b/__test__/react-imgloader.test.js
@@ -0,0 +1,6 @@
+
+describe('PackageName', function() {
+  it('should have unit test!', function() {
+    expect(true).toBe(true);
+  });
+});
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/react.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/react-dom.min.js"></script>
+    <script src="./static/bundle.js"></script>
+  </body>
+</html>
diff --git a/docs/index.js b/docs/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+  <div/>
+, document.getElementById('root'));
diff --git a/package.json b/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "react-imgloader",
+  "version": "0.0.0",
+  "description": "A react image loader component",
+  "homepage": "",
+  "author": {
+    "name": "chilijung",
+    "email": "[email protected]",
+    "url": ""
+  },
+  "files": [
+    "lib"
+  ],
+  "main": "lib/index.js",
+  "keywords": [
+    ""
+  ],
+  "devDependencies": {
+    "flow-bin": "^0.66.0",
+    "flow-copy-source": "^1.3.0",
+    "eslint": "^4.18.2",
+    "eslint-plugin-flowtype": "^2.46.1",
+    "eslint-plugin-react": "^6.2.0",
+    "babel-eslint": "^8.2.2",
+    "precommit-hook-eslint": "^3.0.0",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-loader": "^7.1.3",
+    "babel-preset-flow": "^6.23.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.11.6",
+    "cross-env": "^5.1.3",
+    "rimraf": "^2.5.4",
+    "jest": "^22.4.2",
+    "react-addons-test-utils": "^15.6.0",
+    "enzyme": "^2.4.1",
+    "mocha": "^3.2.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0",
+    "git-directory-deploy": "^1.5.1",
+    "ncp": "^2.0.0"
+  },
+  "scripts": {
+    "build:flow": "flow-copy-source -v -i '**/test/**' src lib",
+    "lint": "eslint src test docs",
+    "clean": "rimraf lib dist",
+    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
+    "build": "npm run build:commonjs && npm run build:flow",
+    "prepublish": "npm run clean && npm run check:src && npm run build",
+    "check:src": "npm run lint && npm run test",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "start": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --mode development",
+    "gh-pages:clean": "rimraf _gh-pages && ncp ./docs ./_gh-pages",
+    "gh-pages:build": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.ghPage.js",
+    "gh-pages:publish": "git-directory-deploy --directory _gh-pages",
+    "gh-pages": "npm run gh-pages:clean && npm run gh-pages:build && npm run gh-pages:publish",
+    "validate": "npm ls"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "repository": "Canner/react-imgloader",
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0 || 16.x",
+    "react-dom": "^0.14.0 || ^15.0.0 || 16.x"
+  },
+  "license": "MIT"
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,49 @@
+// @flow
+import React from 'react';
+import Spinner from './Spinner';
+
+export default class ImageLoader extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isLoading: true,
+            src: ''
+        }
+    }
+
+    componentDidMount() {
+        const image = new Image();
+        image.src = this.props.src;
+        image.onload = () => {
+            this.setState({
+                src: image.src,
+                isLoading: false
+            });
+            if (this.props.onLoad) {
+                this.props.onLoad(image);
+            }
+        };
+        image.onerror = (err) => {
+            this.setState({
+                src: '',
+                isLoading: false
+            });
+            if (this.props.onError) {
+                this.props.onError(err);
+            }
+        }
+    }
+
+    render() {
+        if (this.state.isLoading) {
+            return (
+                <Spinner src={this.props.spinnerSrc}/>
+            );
+        } else {
+            return (
+                <img className='ril--image' src={this.state.src} alt={this.props.alt} {...this.props}/>
+            );
+        }
+    }
+}
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -0,0 +1,25 @@
+const path = require('path');
+
+module.exports = {
+  entry: './docs/index.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/docs/static/'
+  },
+  resolve: {
+    extensions: ['.js']
+  },
+  resolveLoader: {
+    moduleExtensions: ['-loader']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel',
+        exclude: path.resolve(__dirname, "node_modules")
+      }
+    ]
+  }
+};
diff --git a/webpack.config.ghPages.js b/webpack.config.ghPages.js
@@ -0,0 +1,29 @@
+const path = require('path');
+
+module.exports = {
+  entry: './_gh-pages/index.js',
+  output: {
+    path: path.join(__dirname, '_gh-pages/static'),
+    filename: 'bundle.js',
+    libraryTarget: 'var'
+  },
+  externals: {
+    'react': "React",
+    'react-dom': "ReactDOM"
+  },
+  resolve: {
+    extensions: ['.js']
+  },
+  resolveLoader: {
+    moduleExtensions: ['-loader']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel',
+        exclude: path.resolve(__dirname, "node_modules")
+      }
+    ]
+  }
+};
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -0,0 +1,29 @@
+const path = require('path');
+
+module.exports = {
+  entry: './docs/index.js',
+  output: {
+    path: path.join(__dirname, 'docs/static'),
+    filename: 'bundle.js',
+    libraryTarget: 'var'
+  },
+  externals: {
+    'react': "React",
+    'react-dom': "ReactDOM"
+  },
+  resolve: {
+    extensions: ['.js']
+  },
+  resolveLoader: {
+    moduleExtensions: ['-loader']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel',
+        exclude: path.resolve(__dirname, "node_modules")
+      }
+    ]
+  }
+};