Skip to content

Commit

Permalink
Drag and drop added.
Browse files Browse the repository at this point in the history
  • Loading branch information
James Campbell committed Sep 5, 2016
1 parent 0b7009e commit c843860
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 4 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"react": "^15.3.1",
"react-addons-css-transition-group": "^15.3.1",
"react-dom": "^15.3.1",
"react-dropzone": "^2.2.4",
"socket.io-client": "^1.4.8",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0"
Expand Down
9 changes: 7 additions & 2 deletions web/components/chat.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ import io from 'socket.io-client'
import MessageList from './message-list'
import Composer from './composer'
import ChatSession from './chat-session'
import Dropzone from 'react-dropzone'

// FIXME:
// - Update open to use dropzone
// - dropzone hover effect
// - and to generate preview
class Chat extends React.Component {

constructor(props) {
Expand Down Expand Up @@ -42,13 +47,13 @@ class Chat extends React.Component {

render() {
return (
<div className="chat">
<Dropzone className="chat" onDrop={this.onUpload.bind(this)}>
<div className="header">
<h1>Pozi</h1>
</div>
<MessageList messages={this.state.messages} typing={this.state.typing}/>
<Composer onSubmit={this.onSubmit.bind(this)} onUpload={this.onUpload.bind(this)}/>
</div>
</Dropzone>
)
}

Expand Down
240 changes: 238 additions & 2 deletions web/dist/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -22322,6 +22322,10 @@

var _chatSession2 = _interopRequireDefault(_chatSession);

var _reactDropzone = __webpack_require__(237);

var _reactDropzone2 = _interopRequireDefault(_reactDropzone);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Expand All @@ -22330,6 +22334,10 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// FIXME:
// - Update open to use dropzone
// - dropzone hover effect
// - and to generate preview
var Chat = function (_React$Component) {
_inherits(Chat, _React$Component);

Expand Down Expand Up @@ -22373,8 +22381,8 @@
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: 'chat' },
_reactDropzone2.default,
{ className: 'chat', onDrop: this.onUpload.bind(this) },
_react2.default.createElement(
'div',
{ className: 'header' },
Expand Down Expand Up @@ -31573,5 +31581,233 @@
}


/***/ },
/* 237 */
/***/ function(module, exports, __webpack_require__) {

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var React = __webpack_require__(1);
var accept = __webpack_require__(238);

var Dropzone = React.createClass({
displayName: 'Dropzone',

getDefaultProps: function getDefaultProps() {
return {
disableClick: false,
multiple: true
};
},

getInitialState: function getInitialState() {
return {
isDragActive: false
};
},

propTypes: {
onDrop: React.PropTypes.func,
onDropAccepted: React.PropTypes.func,
onDropRejected: React.PropTypes.func,
onDragEnter: React.PropTypes.func,
onDragLeave: React.PropTypes.func,

style: React.PropTypes.object,
activeStyle: React.PropTypes.object,
className: React.PropTypes.string,
activeClassName: React.PropTypes.string,
rejectClassName: React.PropTypes.string,

disableClick: React.PropTypes.bool,
multiple: React.PropTypes.bool,
accept: React.PropTypes.string
},

componentDidMount: function componentDidMount() {
this.enterCounter = 0;
},

allFilesAccepted: function allFilesAccepted(files) {
var _this = this;

return files.every(function (file) {
return accept(file, _this.props.accept);
});
},

onDragEnter: function onDragEnter(e) {
e.preventDefault();

// Count the dropzone and any children that are entered.
++this.enterCounter;

// This is tricky. During the drag even the dataTransfer.files is null
// But Chrome implements some drag store, which is accesible via dataTransfer.items
var dataTransferItems = e.dataTransfer && e.dataTransfer.items ? e.dataTransfer.items : [];

// Now we need to convert the DataTransferList to Array
var itemsArray = Array.prototype.slice.call(dataTransferItems);
var allFilesAccepted = this.allFilesAccepted(itemsArray);

this.setState({
isDragActive: allFilesAccepted,
isDragReject: !allFilesAccepted
});

if (this.props.onDragEnter) {
this.props.onDragEnter(e);
}
},

onDragOver: function onDragOver(e) {
e.preventDefault();
},

onDragLeave: function onDragLeave(e) {
e.preventDefault();

// Only deactivate once the dropzone and all children was left.
if (--this.enterCounter > 0) {
return;
}

this.setState({
isDragActive: false,
isDragReject: false
});

if (this.props.onDragLeave) {
this.props.onDragLeave(e);
}
},

onDrop: function onDrop(e) {
e.preventDefault();

// Reset the counter along with the drag on a drop.
this.enterCounter = 0;

this.setState({
isDragActive: false,
isDragReject: false
});

var droppedFiles = e.dataTransfer ? e.dataTransfer.files : e.target.files;
var max = this.props.multiple ? droppedFiles.length : 1;
var files = [];

for (var i = 0; i < max; i++) {
var file = droppedFiles[i];
file.preview = URL.createObjectURL(file);
files.push(file);
}

if (this.props.onDrop) {
this.props.onDrop(files, e);
}

if (this.allFilesAccepted(files)) {
if (this.props.onDropAccepted) {
this.props.onDropAccepted(files, e);
}
} else {
if (this.props.onDropRejected) {
this.props.onDropRejected(files, e);
}
}
},

onClick: function onClick() {
if (!this.props.disableClick) {
this.open();
}
},

open: function open() {
var fileInput = React.findDOMNode(this.refs.fileInput);
fileInput.value = null;
fileInput.click();
},

render: function render() {

var className;
if (this.props.className) {
className = this.props.className;
if (this.state.isDragActive && this.props.activeClassName) {
className += ' ' + this.props.activeClassName;
};
if (this.state.isDragReject && this.props.rejectClassName) {
className += ' ' + this.props.rejectClassName;
};
};

var style, activeStyle;
if (this.props.style || this.props.activeStyle) {
if (this.props.style) {
style = this.props.style;
}
if (this.props.activeStyle) {
activeStyle = this.props.activeStyle;
}
} else if (!className) {
style = {
width: 200,
height: 200,
borderWidth: 2,
borderColor: '#666',
borderStyle: 'dashed',
borderRadius: 5
};
activeStyle = {
borderStyle: 'solid',
backgroundColor: '#eee'
};
}

var appliedStyle;
if (activeStyle && this.state.isDragActive) {
appliedStyle = _extends({}, style, activeStyle);
} else {
appliedStyle = _extends({}, style);
};

return React.createElement(
'div',
{
className: className,
style: appliedStyle,
onClick: this.onClick,
onDragEnter: this.onDragEnter,
onDragOver: this.onDragOver,
onDragLeave: this.onDragLeave,
onDrop: this.onDrop
},
this.props.children,
React.createElement('input', {
type: 'file',
ref: 'fileInput',
style: { display: 'none' },
multiple: this.props.multiple,
accept: this.props.accept,
onChange: this.onDrop
})
);
}

});

module.exports = Dropzone;


/***/ },
/* 238 */
/***/ function(module, exports) {

module.exports=function(t){function n(e){if(r[e])return r[e].exports;var o=r[e]={exports:{},id:e,loaded:!1};return t[e].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var r={};return n.m=t,n.c=r,n.p="",n(0)}([function(t,n,r){"use strict";n.__esModule=!0,r(8),r(9),n["default"]=function(t,n){if(t&&n){var r=function(){var r=n.split(","),e=t.name||"",o=t.type||"",i=o.replace(/\/.*$/,"");return{v:r.some(function(t){var n=t.trim();return"."===n.charAt(0)?e.toLowerCase().endsWith(n.toLowerCase()):/\/\*$/.test(n)?i===n.replace(/\/.*$/,""):o===n})}}();if("object"==typeof r)return r.v}return!0},t.exports=n["default"]},function(t,n){var r=t.exports={version:"1.2.2"};"number"==typeof __e&&(__e=r)},function(t,n){var r=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(t,n,r){var e=r(2),o=r(1),i=r(4),u=r(19),c="prototype",f=function(t,n){return function(){return t.apply(n,arguments)}},s=function(t,n,r){var a,p,l,d,y=t&s.G,h=t&s.P,v=y?e:t&s.S?e[n]||(e[n]={}):(e[n]||{})[c],x=y?o:o[n]||(o[n]={});y&&(r=n);for(a in r)p=!(t&s.F)&&v&&a in v,l=(p?v:r)[a],d=t&s.B&&p?f(l,e):h&&"function"==typeof l?f(Function.call,l):l,v&&!p&&u(v,a,l),x[a]!=l&&i(x,a,d),h&&((x[c]||(x[c]={}))[a]=l)};e.core=o,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,t.exports=s},function(t,n,r){var e=r(5),o=r(18);t.exports=r(22)?function(t,n,r){return e.setDesc(t,n,o(1,r))}:function(t,n,r){return t[n]=r,t}},function(t,n){var r=Object;t.exports={create:r.create,getProto:r.getPrototypeOf,isEnum:{}.propertyIsEnumerable,getDesc:r.getOwnPropertyDescriptor,setDesc:r.defineProperty,setDescs:r.defineProperties,getKeys:r.keys,getNames:r.getOwnPropertyNames,getSymbols:r.getOwnPropertySymbols,each:[].forEach}},function(t,n){var r=0,e=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++r+e).toString(36))}},function(t,n,r){var e=r(20)("wks"),o=r(2).Symbol;t.exports=function(t){return e[t]||(e[t]=o&&o[t]||(o||r(6))("Symbol."+t))}},function(t,n,r){r(26),t.exports=r(1).Array.some},function(t,n,r){r(25),t.exports=r(1).String.endsWith},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,n,r){var e=r(10);t.exports=function(t,n,r){if(e(t),void 0===n)return t;switch(r){case 1:return function(r){return t.call(n,r)};case 2:return function(r,e){return t.call(n,r,e)};case 3:return function(r,e,o){return t.call(n,r,e,o)}}return function(){return t.apply(n,arguments)}}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,n,r){t.exports=function(t){var n=/./;try{"/./"[t](n)}catch(e){try{return n[r(7)("match")]=!1,!"/./"[t](n)}catch(o){}}return!0}},function(t,n){t.exports=function(t){try{return!!t()}catch(n){return!0}}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n,r){var e=r(16),o=r(11),i=r(7)("match");t.exports=function(t){var n;return e(t)&&(void 0!==(n=t[i])?!!n:"RegExp"==o(t))}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,r){var e=r(2),o=r(4),i=r(6)("src"),u="toString",c=Function[u],f=(""+c).split(u);r(1).inspectSource=function(t){return c.call(t)},(t.exports=function(t,n,r,u){"function"==typeof r&&(o(r,i,t[n]?""+t[n]:f.join(String(n))),"name"in r||(r.name=n)),t===e?t[n]=r:(u||delete t[n],o(t,n,r))})(Function.prototype,u,function(){return"function"==typeof this&&this[i]||c.call(this)})},function(t,n,r){var e=r(2),o="__core-js_shared__",i=e[o]||(e[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,n,r){var e=r(17),o=r(13);t.exports=function(t,n,r){if(e(n))throw TypeError("String#"+r+" doesn't accept regex!");return String(o(t))}},function(t,n,r){t.exports=!r(15)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n){var r=Math.ceil,e=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?e:r)(t)}},function(t,n,r){var e=r(23),o=Math.min;t.exports=function(t){return t>0?o(e(t),9007199254740991):0}},function(t,n,r){"use strict";var e=r(3),o=r(24),i=r(21),u="endsWith",c=""[u];e(e.P+e.F*r(14)(u),"String",{endsWith:function(t){var n=i(this,t,u),r=arguments,e=r.length>1?r[1]:void 0,f=o(n.length),s=void 0===e?f:Math.min(o(e),f),a=String(t);return c?c.call(n,a,s):n.slice(s-a.length,s)===a}})},function(t,n,r){var e=r(5),o=r(3),i=r(1).Array||Array,u={},c=function(t,n){e.each.call(t.split(","),function(t){void 0==n&&t in i?u[t]=i[t]:t in[]&&(u[t]=r(12)(Function.call,[][t],n))})};c("pop,reverse,shift,keys,values,entries",1),c("indexOf,every,some,forEach,map,filter,find,findIndex,includes",3),c("join,slice,concat,push,splice,unshift,sort,lastIndexOf,reduce,reduceRight,copyWithin,fill"),o(o.S,"Array",u)}]);

/***/ }
/******/ ]);

0 comments on commit c843860

Please sign in to comment.