first commit

CiprianDraghici · Aug 23, 2016 · 9c7e552 · 9c7e552
commit 9c7e552
Show file tree

Hide file tree

Showing 12 changed files with 281 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+npm-debug.log
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Jared Reich
+
+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,32 @@
+react-files
+=======================
+
+A file input (dropzone) management component for React.
+
+## Installation
+
+Install from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
+
+```
+npm install react-files --save
+```
+
+## Usage
+
+```
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Files from './Files'
+
+ReactDOM.render(<Files name="Jane" />, document.getElementById('container'));
+```
+
+### Test
+
+```
+npm test
+```
+
+### License
+
+MIT. Copyright (c) 2016 Jared Reich.
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <title>My Component</title>
+    <style>
+      .div {
+        background-color: yellow;
+        height: 200px;
+        width: 200px;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "react-files",
+  "version": "0.0.1",
+  "main": "src/Files.js",
+  "description": "A file input (dropzone) management component for React",
+  "scripts": {
+    "start": "node server.js",
+    "test": "mocha --compilers js:babel-core/register",
+    "test:watch": "mocha --compilers js:babel-core/register --watch --reporter min"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mother/react-files.git"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "component",
+    "file",
+    "files",
+    "input",
+    "dropzone"
+  ],
+  "author": "Jared Reich",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mother/react-files/issues"
+  },
+  "homepage": "https://github.com/mother/react-files",
+  "dependencies": {
+    "react": "^0.14.6"
+  },
+  "devDependencies": {
+    "babel-core": "6.0.20",
+    "babel-eslint": "4.1.3",
+    "babel-loader": "6.0.1",
+    "babel-preset-es2015": "6.0.15",
+    "babel-preset-react": "6.0.15",
+    "babel-preset-stage-0": "6.0.15",
+    "eslint": "1.10.3",
+    "eslint-plugin-react": "3.6.2",
+    "expect": "1.20.2",
+    "expect-jsx": "2.6.0",
+    "mocha": "3.0.2",
+    "react-addons-test-utils": "15.3.1",
+    "react-dom": "^0.14.6",
+    "react-hot-loader": "1.3.0",
+    "webpack": "1.12.2",
+    "webpack-dev-server": "1.12.1"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,14 @@
+var webpack = require('webpack')
+var WebpackDevServer = require('webpack-dev-server')
+var config = require('./webpack.config')
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+}).listen(8000, 'localhost', function (err, result) {
+  if (err) {
+    return console.log(err)
+  }
+  console.log('Listening at http://localhost:8000/')
+})
diff --git a/src/Files.js b/src/Files.js
@@ -0,0 +1,49 @@
+import React from 'react'
+
+class Files extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.onClick = this.onClick.bind(this)
+    this.onDrop = this.onDrop.bind(this)
+    // this.onDragStart = this.onDragStart.bind(this)
+    // this.onDragEnter = this.onDragEnter.bind(this)
+    // this.onDragLeave = this.onDragLeave.bind(this)
+    // this.onDragOver = this.onDragOver.bind(this)
+  }
+
+  onClick() {
+    this.inputElement.click()
+  }
+
+  onDrop(e) {
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    this.props.onDrop(files)
+  }
+
+  render() {
+
+    const inputAttributes = {
+      type: 'file',
+      multiple: true,
+      style: { display: 'none' },
+      ref: element => this.inputElement = element,
+      onChange: this.onDrop
+    }
+
+    return (
+      <div
+        className="div"
+        onClick={this.onClick}
+        onDrop={this.onDrop}
+      >
+      <input
+        // {...inputProps/* expand user provided inputProps first so inputAttributes override them */}
+        {...inputAttributes}
+      />
+      </div>
+
+    )
+  }
+}
+
+export default Files
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Files from './Files'
+
+var FilesDemo = React.createClass({
+  onDrop: function (files) {
+    console.log(files)
+  },
+
+  onClick: function () {
+    console.log('click')
+  },
+
+  render: function () {
+    return (
+      <div>
+        <Files className="wow" onDrop={this.onDrop} onClick={this.onClick}>
+          <div>Try dropping some files here, or click to select files.</div>
+        </Files>
+      </div>
+    )
+  }
+})
+
+ReactDOM.render(<FilesDemo name="Jane" />, document.getElementById('container'))
diff --git a/test/test.js b/test/test.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import expect from 'expect'
+import { createRenderer } from 'react-addons-test-utils'
+import expectJSX from 'expect-jsx'
+expect.extend(expectJSX)
+
+import Files from '../src/Files.js'
+
+describe('Files', () => {
+  it('works', () => {
+    let renderer = createRenderer()
+    renderer.render(<Files name="Jane" />)
+    let actualElement = renderer.getRenderOutput()
+    let expectedElement = <h1>Hello, Jane</h1>
+    expect(actualElement).toEqualJSX(expectedElement)
+  })
+})
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,26 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  devtool: 'eval',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8000',
+    'webpack/hot/only-dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/static/'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['react-hot', 'babel'],
+      include: path.join(__dirname, 'src')
+    }]
+  }
+};