Merge pull request #17 from georgeOsdDev/develop

Release v0.0.6
georgeOsdDev · Sep 20, 2016 · 943bf94 · 943bf94
2 parents 44f34bb + 382e723
commit 943bf94
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 68 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,35 +1,3 @@
 {
-  # TODO use airbnb
-  "extends": "airbnb/base",
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "mocha": true
-  },
-  "ecmaFeatures": {
-    "jsx": true
-  },
-  "parser": "babel-eslint",
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-    'max-len': [2, 160, 2, {
-      'ignoreUrls': true,
-      'ignoreComments': false
-    }],
-    "quotes": [1, "single", "avoid-escape"],
-    "react/display-name": 0,
-    "react/jsx-no-undef": 1,
-    "react/jsx-uses-react": 1,
-    "react/no-did-mount-set-state": 1,
-    "react/no-did-update-set-state": 1,
-    "react/no-multi-comp": 1,
-    "react/prop-types": [1, { "ignore": ["children", "className"] }],
-    "react/react-in-jsx-scope": 1,
-    "react/self-closing-comp": 1,
-    "react/wrap-multilines": 1,
-    "react/jsx-uses-vars": 1,
-  }
+  "extends": "airbnb/base"
 }
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 node_modules
 npm-debug.log
 dist
-example/bundle.js
+example/bundle.js
+coverage
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 ## Change Log
 
+### Ver 0.0.6
+  + #15 [Handle cancel button on file picker](https://github.com/georgeOsdDev/react-dropfile-field/issues/15)
+
 ### Ver 0.0.5
   + #12 [Installation issue](https://github.com/georgeOsdDev/react-dropfile-field/issues/12)
 

diff --git a/karma.conf.js b/karma.conf.js
@@ -28,12 +28,16 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'test/**/*_spec.js': ['browserify']
+      'test/**/*_spec.js': ['browserify'],
+      'src/**/*.js': ['coverage']
     },
 
     browserify: {
       debug: true,
       transform: [
+        ['browserify-istanbul', {
+          instrumenter: require('isparta')
+        }],
         [
           'babelify', {
             'presets': [
@@ -49,7 +53,12 @@ module.exports = function(config) {
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['spec'],
+    reporters: ['spec', 'coverage'],
+    coverageReporter: {
+      reporters: [
+        { type: 'text' }
+      ]
+    },
 
     // client: {
     //   mocha: {

diff --git a/lib/components/DropfileField.js b/lib/components/DropfileField.js
@@ -91,7 +91,7 @@ var DropfileField = function (_React$Component) {
   function DropfileField(props) {
     _classCallCheck(this, DropfileField);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(DropfileField).call(this, props));
+    var _this = _possibleConstructorReturn(this, (DropfileField.__proto__ || Object.getPrototypeOf(DropfileField)).call(this, props));
 
     _this.state = {
       files: []
@@ -153,7 +153,7 @@ var DropfileField = function (_React$Component) {
     value: function setFiles(_files, e) {
       var _this2 = this;
 
-      if (_files) {
+      if (_files && _files.length > 0) {
         (function () {
           var files = Array.prototype.slice.call(_files, 0, _this2.props.maxFileCount);
           _this2.setState({
@@ -163,6 +163,8 @@ var DropfileField = function (_React$Component) {
             _this2.props.onDrop(e, files);
           });
         })();
+      } else {
+        this.clearFiles();
       }
     }
   }, {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dropfile-field",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React component which handle file drop and preview",
   "main": "lib/index.js",
   "scripts": {
@@ -28,39 +28,42 @@
   },
   "homepage": "https://github.com/georgeosddev/react-dropfile-field",
   "devDependencies": {
-    "babel-cli": "^6.8.0",
-    "babel-core": "^6.8.0",
-    "babel-eslint": "^6.0.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-2": "^6.5.0",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-eslint": "^6.1.2",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-2": "^6.13.0",
     "babelify": "^7.3.0",
-    "browser-sync": "^2.12.5",
+    "browser-sync": "^2.16.0",
+    "browserify-istanbul": "^2.0.0",
     "chai": "^3.5.0",
-    "eslint": "^2.9.0",
-    "eslint-config-airbnb": "^8.0.0",
-    "eslint-plugin-import": "^1.6.1",
-    "eslint-plugin-jsx-a11y": "^1.0.4",
-    "eslint-plugin-react": "^5.0.1",
-    "karma": "^0.13.22",
-    "karma-browserify": "^5.0.4",
+    "eslint": "^3.5.0",
+    "eslint-config-airbnb": "^11.1.0",
+    "eslint-plugin-import": "^1.15.0",
+    "eslint-plugin-jsx-a11y": "^2.2.2",
+    "eslint-plugin-react": "^6.3.0",
+    "isparta": "^4.0.0",
+    "karma": "^1.3.0",
+    "karma-browserify": "^5.1.0",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-cli": "^1.0.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-coverage": "^1.1.1",
     "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.0.1",
+    "karma-mocha": "^1.1.1",
     "karma-safari-launcher": "^1.0.0",
     "karma-spec-reporter": "^0.0.26",
-    "material-ui": "^0.15.0-beta.2",
-    "mocha": "^2.4.5",
-    "react-addons-test-utils": "^15.0.2",
+    "material-ui": "^0.15.4",
+    "mocha": "^3.0.2",
+    "react-addons-test-utils": "^15.3.2",
     "react-tap-event-plugin": "^1.0.0",
-    "sinon": "^1.17.4",
+    "sinon": "^1.17.6",
     "watchify": "^3.7.0"
   },
   "dependencies": {
-    "react": "^15.0.2",
-    "react-dom": "^15.0.2",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
     "immutable": "^3.8.1"
   },
   "browserify": {

diff --git a/src/components/DropfileField.js b/src/components/DropfileField.js
@@ -113,14 +113,16 @@ class DropfileField extends React.Component {
   }
 
   setFiles(_files, e) {
-    if (_files) {
+    if (_files && _files.length > 0) {
       const files = Array.prototype.slice.call(_files, 0, this.props.maxFileCount);
       this.setState({
         files,
         isDragActive: false,
       }, () => {
         this.props.onDrop(e, files);
       });
+    } else {
+      this.clearFiles();
     }
   }
 
@@ -136,8 +138,8 @@ class DropfileField extends React.Component {
     let rootStyle = styles.root;
     let textFieldStyle = styles.textField;
     let previewStyle = styles.hidden;
-    let previewImageStyle = Helper.merge(styles.previewImage, this.props.previewImageStyle);
-    let previewIconStyle = Helper.merge(styles.previewIcon, this.props.previewIconStyle);
+    const previewImageStyle = Helper.merge(styles.previewImage, this.props.previewImageStyle);
+    const previewIconStyle = Helper.merge(styles.previewIcon, this.props.previewIconStyle);
 
     if (this.state.isDragActive) {
       rootStyle = Helper.merge(rootStyle, styles.dragActive);
@@ -148,15 +150,16 @@ class DropfileField extends React.Component {
     if (this.state.files.length > 0) {
       preview = Array.prototype.map.call(this.state.files, (f, i) => {
         if (f.type.indexOf('image') > -1) {
-          let src = URL.createObjectURL(f);
+          const src = URL.createObjectURL(f);
           return (
             <div className="df-preview" key={i} style={styles.previewFile}>
               <img src={src} style={previewImageStyle}/>
             </div>
           );
         }
         const extension = Helper.getFileExtension(f.name);
-        let iconClassName = this.props.iconClassNamesByExtension[extension] || this.props.iconClassNamesByExtension.default;
+        const iconClassName = this.props.iconClassNamesByExtension[extension] ||
+                              this.props.iconClassNamesByExtension.default;
         return (
           <div className="df-preview" key={i} style={styles.previewFile}>
             <icon className={iconClassName} style={previewIconStyle} />

diff --git a/test/components/DropfileField_spec.js b/test/components/DropfileField_spec.js
@@ -172,6 +172,14 @@ describe('Test of DropfileField', () => {
       component.clearFiles();
       expect(called).to.be.eql(true);
     });
+
+    it('should clear files when no file passed', () => {
+      let called;
+      component = TestUtils.renderIntoDocument(<DropfileField maxFileCount={2} onFileClear={() => {called = true; }}/>);
+      component.setFiles([file1]); // set file
+      component.setFiles([]); // set empty list
+      expect(called).to.be.eql(true);
+    });
   });
 
   // @TODO

diff --git a/test/helper/Helper_spec.js b/test/helper/Helper_spec.js
@@ -1,7 +1,7 @@
 'use strict';
 import chai from 'chai';
 const expect = chai.expect;
-import Helper from '../../lib/helper/Helper';
+import Helper from '../../src/helper/Helper';
 
 describe('Test of Helper', () => {
   describe('Helper offer merge helper', () => {