Skip to content

Commit dccd41f

Browse files
author
tleunen
committed
first attempt to change the mixin in a high-order component
1 parent f7cbe6d commit dccd41f

12 files changed

+391
-66
lines changed

Diff for: ‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.DS_Store
2+
node_modules/
3+
npm-debug.log

Diff for: ‎.jshintrc

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{
2+
"maxerr" : 50, // {int} Maximum error before stopping
3+
4+
// Enforcing
5+
"bitwise" : false, // true: Prohibit bitwise operators (&, |, ^, etc.)
6+
"camelcase" : true, // true: Identifiers must be in camelCase
7+
"curly" : false, // true: Require {} for every new block or scope
8+
"eqeqeq" : true, // true: Require triple equals (===) for comparison
9+
"freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
10+
"forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty()
11+
"immed" : true, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
12+
"indent" : 4, // {int} Number of spaces to use for indentation
13+
"latedef" : true, // true: Require variables/functions to be defined before being used
14+
"newcap" : true, // true: Require capitalization of all constructor functions e.g. `new F()`
15+
"noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
16+
"noempty" : true, // true: Prohibit use of empty blocks
17+
"nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters.
18+
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
19+
"plusplus" : false, // true: Prohibit use of `++` & `--`
20+
"quotmark" : true, // Quotation mark consistency:
21+
// false : do nothing (default)
22+
// true : ensure whatever is used is consistent
23+
// "single" : require single quotes
24+
// "double" : require double quotes
25+
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
26+
"unused" : true, // true: Require all defined variables be used
27+
"strict" : true, // true: Requires all functions run in ES5 Strict Mode
28+
"maxparams" : 8, // {int} Max number of formal params allowed per function
29+
"maxdepth" : 8, // {int} Max depth of nested blocks (within functions)
30+
"maxstatements" : false, // {int} Max number statements per function
31+
"maxcomplexity" : false, // {int} Max cyclomatic complexity per function
32+
"maxlen" : 200, // {int} Max number of characters per line
33+
34+
// Relaxing
35+
"asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
36+
"boss" : false, // true: Tolerate assignments where comparisons would be expected
37+
"debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
38+
"eqnull" : false, // true: Tolerate use of `== null`
39+
"es5" : false, // true: Allow ES5 syntax (ex: getters and setters)
40+
"esnext" : false, // true: Allow ES.next (ES6) syntax (ex: `const`)
41+
"moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
42+
// (ex: `for each`, multiple try/catch, function expression…)
43+
"evil" : false, // true: Tolerate use of `eval` and `new Function()`
44+
"expr" : false, // true: Tolerate `ExpressionStatement` as Programs
45+
"funcscope" : false, // true: Tolerate defining variables inside control statements
46+
"globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
47+
"iterator" : false, // true: Tolerate using the `__iterator__` property
48+
"lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
49+
"laxbreak" : false, // true: Tolerate possibly unsafe line breakings
50+
"laxcomma" : false, // true: Tolerate comma-first style coding
51+
"loopfunc" : false, // true: Tolerate functions being defined in loops
52+
"multistr" : false, // true: Tolerate multi-line strings
53+
"noyield" : false, // true: Tolerate generator functions with no yield statement in them.
54+
"notypeof" : false, // true: Tolerate invalid typeof operator values
55+
"proto" : false, // true: Tolerate using the `__proto__` property
56+
"scripturl" : false, // true: Tolerate script-targeted URLs
57+
"shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
58+
"sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
59+
"supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
60+
"validthis" : false, // true: Tolerate using this in a non-constructor function
61+
62+
// Environments
63+
"browser" : true, // Web Browser (window, document, etc)
64+
"browserify" : true, // Browserify (node.js code in the browser)
65+
"couch" : false, // CouchDB
66+
"devel" : true, // Development/debugging (alert, confirm, etc)
67+
"dojo" : false, // Dojo Toolkit
68+
"jasmine" : false, // Jasmine
69+
"jquery" : false, // jQuery
70+
"mocha" : false, // Mocha
71+
"mootools" : false, // MooTools
72+
"node" : false, // Node.js
73+
"nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
74+
"prototypejs" : false, // Prototype and Scriptaculous
75+
"qunit" : false, // QUnit
76+
"rhino" : false, // Rhino
77+
"shelljs" : false, // ShellJS
78+
"worker" : false, // Web Workers
79+
"wsh" : false, // Windows Scripting Host
80+
"yui" : false, // Yahoo User Interface
81+
82+
// Custom Globals
83+
"globals" : {} // additional predefined global variables
84+
}

Diff for: ‎LICENSE.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2014 Tommy Leunen
3+
Copyright (c) 2014-2015 Tommy Leunen
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

Diff for: ‎dist/clickdrag.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
"use strict";
2+
3+
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; };
4+
5+
var React = require("react");
6+
7+
function clickDrag(Component) {
8+
9+
return React.createClass({
10+
getInitialState: function getInitialState() {
11+
return {
12+
isMouseDown: false,
13+
mouseDownPositionX: 0,
14+
mouseDownPositionY: 0,
15+
moveDeltaX: 0,
16+
moveDeltaY: 0
17+
};
18+
},
19+
20+
componentDidMount: function componentDidMount() {
21+
var node = React.findDOMNode(this);
22+
23+
node.addEventListener("mousedown", this._onMouseDown);
24+
document.addEventListener("mousemove", this._onMouseMove);
25+
document.addEventListener("mouseup", this._onMouseUp);
26+
},
27+
28+
componentWillUnmount: function componentWillUnmount() {
29+
var node = React.findDOMNode(this);
30+
31+
node.removeEventListener("mousedown", this._onMouseDown);
32+
document.removeEventListener("mousemove", this._onMouseMove);
33+
document.removeEventListener("mouseup", this._onMouseUp);
34+
},
35+
36+
_onMouseDown: function _onMouseDown(e) {
37+
// only left mouse button
38+
if (e.button === 0) {
39+
this.setState({
40+
isMouseDown: true,
41+
isMoving: false,
42+
mouseDownPositionX: e.clientX,
43+
mouseDownPositionY: e.clientY,
44+
moveDeltaX: 0,
45+
moveDeltaY: 0
46+
});
47+
}
48+
},
49+
50+
_onMouseUp: function _onMouseUp() {
51+
if (this.state.isMouseDown) {
52+
this.setState({
53+
isMouseDown: false,
54+
isMoving: false
55+
});
56+
}
57+
},
58+
59+
_onMouseMove: function _onMouseMove(e) {
60+
if (this.state.isMouseDown) {
61+
this.setState({
62+
isMoving: true,
63+
moveDeltaX: e.clientX - this.state.mouseDownPositionX,
64+
moveDeltaY: e.clientY - this.state.mouseDownPositionY
65+
});
66+
}
67+
},
68+
69+
render: function render() {
70+
return React.createElement(Component, _extends({}, this.props, { dataDrag: this.state }));
71+
}
72+
73+
});
74+
}
75+
76+
module.exports = clickDrag;

Diff for: ‎examples/basic/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/app.min.js

Diff for: ‎examples/basic/app.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use strict';
2+
3+
var React = require('react');
4+
//var clickDrag = require('../..'); // for some reasons, the code is broken with this code, even if it's the same, bug entered https://github.com/substack/node-browserify/issues/1181
5+
var clickDrag = require('./clickDrag');
6+
7+
8+
var ExampleComponent = React.createClass({
9+
10+
getInitialState: function() {
11+
return {
12+
lastPositionX: 0,
13+
lastPositionY: 0,
14+
currentX: 0,
15+
currentY: 0
16+
};
17+
},
18+
19+
componentWillReceiveProps: function(nextProps) {
20+
if(nextProps.dataDrag.isMoving) {
21+
this.setState({
22+
currentX: this.state.lastPositionX + nextProps.dataDrag.moveDeltaX,
23+
currentY: this.state.lastPositionY + nextProps.dataDrag.moveDeltaY
24+
});
25+
}
26+
else {
27+
this.setState({
28+
lastPositionX: this.state.currentX,
29+
lastPositionY: this.state.currentY
30+
});
31+
}
32+
},
33+
34+
render: function () {
35+
var translation = 'translate('+this.state.currentX+'px, '+this.state.currentY+'px)';
36+
37+
return React.createElement('div', {
38+
style: {width: '200px', height: '200px', backgroundColor: 'red', transform: translation}
39+
});
40+
}
41+
});
42+
43+
var ClickDragExample = clickDrag(ExampleComponent);
44+
45+
React.render(React.createElement(ClickDragExample), document.getElementById('App'));

Diff for: ‎examples/basic/clickdrag.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
"use strict";
2+
3+
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; };
4+
5+
var React = require("react");
6+
7+
function clickDrag(Component) {
8+
9+
return React.createClass({
10+
getInitialState: function getInitialState() {
11+
return {
12+
isMouseDown: false,
13+
mouseDownPositionX: 0,
14+
mouseDownPositionY: 0,
15+
moveDeltaX: 0,
16+
moveDeltaY: 0
17+
};
18+
},
19+
20+
componentDidMount: function componentDidMount() {
21+
var node = React.findDOMNode(this);
22+
23+
node.addEventListener("mousedown", this._onMouseDown);
24+
document.addEventListener("mousemove", this._onMouseMove);
25+
document.addEventListener("mouseup", this._onMouseUp);
26+
},
27+
28+
componentWillUnmount: function componentWillUnmount() {
29+
var node = React.findDOMNode(this);
30+
31+
node.removeEventListener("mousedown", this._onMouseDown);
32+
document.removeEventListener("mousemove", this._onMouseMove);
33+
document.removeEventListener("mouseup", this._onMouseUp);
34+
},
35+
36+
_onMouseDown: function _onMouseDown(e) {
37+
// only left mouse button
38+
if (e.button === 0) {
39+
this.setState({
40+
isMouseDown: true,
41+
isMoving: false,
42+
mouseDownPositionX: e.clientX,
43+
mouseDownPositionY: e.clientY,
44+
moveDeltaX: 0,
45+
moveDeltaY: 0
46+
});
47+
}
48+
},
49+
50+
_onMouseUp: function _onMouseUp() {
51+
if (this.state.isMouseDown) {
52+
this.setState({
53+
isMouseDown: false,
54+
isMoving: false
55+
});
56+
}
57+
},
58+
59+
_onMouseMove: function _onMouseMove(e) {
60+
if (this.state.isMouseDown) {
61+
this.setState({
62+
isMoving: true,
63+
moveDeltaX: e.clientX - this.state.mouseDownPositionX,
64+
moveDeltaY: e.clientY - this.state.mouseDownPositionY
65+
});
66+
}
67+
},
68+
69+
render: function render() {
70+
return React.createElement(Component, _extends({}, this.props, { dataDrag: this.state }));
71+
}
72+
73+
});
74+
}
75+
76+
module.exports = clickDrag;

Diff for: ‎examples/basic/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Example</title>
5+
</head>
6+
<body>
7+
<div id="App"></div>
8+
<script src="app.min.js"></script>
9+
</body>
10+
</html>

Diff for: ‎examples/basic/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"scripts": {
3+
"build": "browserify app.js --debug -o app.min.js"
4+
},
5+
"dependencies": {
6+
"react": "^0.13.1"
7+
},
8+
"devDependencies": {
9+
"babelify": "^5.0.4"
10+
}
11+
}

Diff for: ‎index.js

+1-64
Original file line numberDiff line numberDiff line change
@@ -1,64 +1 @@
1-
"use strict";
2-
3-
var ReactClickDragMixin = {
4-
componentWillMount: function() {
5-
this.__isMouseDown = false;
6-
this.__mouseDownPosition = {
7-
x: 0,
8-
y: 0
9-
};
10-
},
11-
12-
componentDidMount: function() {
13-
var node = this.getDOMNode();
14-
15-
node.addEventListener('mousedown', this.__onMouseDown);
16-
document.addEventListener('mousemove', this.__onMouseMove);
17-
document.addEventListener('mouseup', this.__onMouseUp);
18-
},
19-
20-
componentWillUnmount: function() {
21-
var node = this.getDOMNode();
22-
23-
node.removeEventListener('mousedown', this.__onMouseDown);
24-
document.removeEventListener('mousemove', this.__onMouseMove);
25-
document.removeEventListener('mouseup', this.__onMouseUp);
26-
},
27-
28-
setMousePosition: function(x, y) {
29-
this.__mouseDownPosition.x = x;
30-
this.__mouseDownPosition.y = y;
31-
},
32-
33-
__onMouseDown: function(e) {
34-
// only left mouse button
35-
if (e.button !== 0) return
36-
37-
this.__isMouseDown = true;
38-
this.setMousePosition(e.clientX, e.clientY);
39-
40-
this._onDragStart && this._onDragStart(e, this.__mouseDownPosition);
41-
},
42-
43-
__onMouseUp: function(e) {
44-
if(this.__isMouseDown) {
45-
46-
this.__isMouseDown = false;
47-
this._onDragStop && this._onDragStop(e);
48-
}
49-
},
50-
51-
__onMouseMove: function(e) {
52-
if(this.__isMouseDown) {
53-
54-
var deltaPos = {
55-
x: e.clientX - this.__mouseDownPosition.x,
56-
y: e.clientY - this.__mouseDownPosition.y
57-
};
58-
59-
this._onDragMove && this._onDragMove(e, deltaPos);
60-
}
61-
}
62-
};
63-
64-
module.exports = ReactClickDragMixin;
1+
module.exports = require('./dist/clickdrag');

0 commit comments

Comments
 (0)