Skip to content

Commit a3704ce

Browse files
cezarycezary
committed
Remove refs, update to latest babel
1 parent f6ce08a commit a3704ce

File tree

5 files changed

+141
-168
lines changed

5 files changed

+141
-168
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react", "stage-0"]
3+
}

‎dist/react-image-diff.js

+98-119
Original file line numberDiff line numberDiff line change
@@ -56,55 +56,78 @@ return /******/ (function(modules) { // webpackBootstrap
5656

5757
'use strict';
5858

59-
Object.defineProperty(exports, '__esModule', {
60-
value: true
61-
});
62-
6359
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; };
6460

65-
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
61+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
6662

67-
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
63+
var _react = __webpack_require__(1);
6864

69-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
65+
var _react2 = _interopRequireDefault(_react);
7066

71-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
67+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
7268

73-
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; }
69+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
7470

75-
var _react = __webpack_require__(1);
71+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
7672

77-
var _react2 = _interopRequireDefault(_react);
73+
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; }
7874

7975
var bgImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX5+fn///8pDrwNAAAAFElEQVQI12NgsP/AQAz+f4CBGAwAJIIdTTn0+w0AAAAASUVORK5CYII=';
8076

81-
var ImageDiff = (function (_Component) {
77+
var ImageDiff = function (_Component) {
8278
_inherits(ImageDiff, _Component);
8379

84-
_createClass(ImageDiff, null, [{
85-
key: 'propTypes',
86-
value: {
87-
after: _react2['default'].PropTypes.string.isRequired,
88-
before: _react2['default'].PropTypes.string.isRequired,
89-
height: _react2['default'].PropTypes.number,
90-
type: _react2['default'].PropTypes.string.isRequired,
91-
value: _react2['default'].PropTypes.number,
92-
width: _react2['default'].PropTypes.number
93-
},
94-
enumerable: true
95-
}, {
96-
key: 'defaultProps',
97-
value: {
98-
value: 1
99-
},
100-
enumerable: true
101-
}]);
102-
10380
function ImageDiff() {
10481
_classCallCheck(this, ImageDiff);
10582

106-
_get(Object.getPrototypeOf(ImageDiff.prototype), 'constructor', this).call(this);
107-
this.handleImgLoad = this.handleImgLoad.bind(this);
83+
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ImageDiff).call(this));
84+
85+
_this.renderFade = function () {
86+
var style = {
87+
backgroundImage: 'url(' + bgImage + ')',
88+
height: _this.state.height,
89+
margin: 0,
90+
position: 'absolute',
91+
width: _this.state.width
92+
};
93+
94+
var beforeStyle = _extends({
95+
border: '1px solid #f77'
96+
}, style);
97+
98+
var afterStyle = _extends({
99+
border: '1px solid #63c363',
100+
opacity: 1 - _this.props.value
101+
}, style);
102+
103+
return _react2.default.createElement(
104+
'div',
105+
{ className: 'ImageDiff__inner--fade', style: style },
106+
_react2.default.createElement(
107+
'div',
108+
{ className: 'ImageDiff__before', style: beforeStyle },
109+
_react2.default.createElement('img', {
110+
src: _this.props.before,
111+
height: _this.props.height,
112+
width: _this.props.width,
113+
onLoad: _this.handleImgLoad
114+
})
115+
),
116+
_react2.default.createElement(
117+
'div',
118+
{ className: 'ImageDiff__after', style: afterStyle },
119+
_react2.default.createElement('img', {
120+
src: _this.props.after,
121+
height: _this.props.height,
122+
width: _this.props.width,
123+
onLoad: _this.handleImgLoad
124+
})
125+
)
126+
);
127+
};
128+
129+
_this.handleImgLoad = _this.handleImgLoad.bind(_this);
130+
return _this;
108131
}
109132

110133
_createClass(ImageDiff, [{
@@ -125,26 +148,21 @@ return /******/ (function(modules) { // webpackBootstrap
125148
}
126149
}, {
127150
key: 'handleImgLoad',
128-
value: function handleImgLoad(ref) {
129-
var _this = this;
130-
131-
return function () {
132-
if (!_this.props.height && !_this.props.width) {
133-
var _React$findDOMNode = _react2['default'].findDOMNode(_this.refs[ref]);
134-
135-
var height = _React$findDOMNode.height;
136-
var width = _React$findDOMNode.width;
137-
138-
_this.setState({
139-
height: height, width: width
140-
});
141-
}
142-
};
151+
value: function handleImgLoad(e) {
152+
if (!this.props.height && !this.props.width) {
153+
var _e$target = e.target;
154+
var height = _e$target.height;
155+
var width = _e$target.width;
156+
157+
this.setState({
158+
height: height, width: width
159+
});
160+
}
143161
}
144162
}, {
145163
key: 'render',
146164
value: function render() {
147-
return _react2['default'].createElement(
165+
return _react2.default.createElement(
148166
'div',
149167
{ className: 'ImageDiff', style: { display: 'inline-block', height: this.state.height, width: this.state.width } },
150168
this.props.type === 'difference' ? this.renderDifference() : null,
@@ -165,77 +183,28 @@ return /******/ (function(modules) { // webpackBootstrap
165183
};
166184
var afterStyle = _extends({}, beforeStyle);
167185

168-
return _react2['default'].createElement(
186+
return _react2.default.createElement(
169187
'div',
170188
{ className: 'ImageDiff_inner--difference', style: style },
171-
_react2['default'].createElement(
189+
_react2.default.createElement(
172190
'div',
173191
{ className: 'ImageDiff__before', style: beforeStyle },
174-
_react2['default'].createElement('img', {
175-
ref: 'before',
192+
_react2.default.createElement('img', {
176193
src: this.props.before,
177194
height: this.props.height,
178195
width: this.props.width,
179-
onLoad: this.handleImgLoad('before')
196+
onLoad: this.handleImgLoad
180197
})
181198
),
182-
_react2['default'].createElement(
199+
_react2.default.createElement(
183200
'div',
184201
{ className: 'ImageDiff__after', style: afterStyle },
185-
_react2['default'].createElement('img', {
186-
ref: 'after',
202+
_react2.default.createElement('img', {
187203
src: this.props.after,
188204
height: this.props.height,
189205
width: this.props.width,
190206
style: { mixBlendMode: 'difference' },
191-
onLoad: this.handleImgLoad('after')
192-
})
193-
)
194-
);
195-
}
196-
}, {
197-
key: 'renderFade',
198-
value: function renderFade() {
199-
var style = {
200-
backgroundImage: 'url(' + bgImage + ')',
201-
height: this.state.height,
202-
margin: 0,
203-
position: 'absolute',
204-
width: this.state.width
205-
};
206-
207-
var beforeStyle = _extends({
208-
border: '1px solid #f77'
209-
}, style);
210-
211-
var afterStyle = _extends({
212-
border: '1px solid #63c363',
213-
opacity: this.props.value
214-
}, style);
215-
216-
return _react2['default'].createElement(
217-
'div',
218-
{ className: 'ImageDiff__inner--fade', style: style },
219-
_react2['default'].createElement(
220-
'div',
221-
{ className: 'ImageDiff__before', style: beforeStyle },
222-
_react2['default'].createElement('img', {
223-
ref: 'before',
224-
src: this.props.before,
225-
height: this.props.height,
226-
width: this.props.width,
227-
onLoad: this.handleImgLoad('before')
228-
})
229-
),
230-
_react2['default'].createElement(
231-
'div',
232-
{ className: 'ImageDiff__after', style: afterStyle },
233-
_react2['default'].createElement('img', {
234-
ref: 'after',
235-
src: this.props.after,
236-
height: this.props.height,
237-
width: this.props.width,
238-
onLoad: this.handleImgLoad('after')
207+
onLoad: this.handleImgLoad
239208
})
240209
)
241210
);
@@ -270,32 +239,30 @@ return /******/ (function(modules) { // webpackBootstrap
270239
width: this.state.width * (1 - this.props.value)
271240
};
272241

273-
return _react2['default'].createElement(
242+
return _react2.default.createElement(
274243
'div',
275244
{ className: 'ImageDiff__inner--swipe', style: style },
276-
_react2['default'].createElement(
245+
_react2.default.createElement(
277246
'div',
278247
{ className: 'ImageDiff__before', style: beforeStyle },
279-
_react2['default'].createElement('img', {
280-
ref: 'before',
248+
_react2.default.createElement('img', {
281249
src: this.props.before,
282250
height: this.props.height,
283251
width: this.props.width,
284-
onLoad: this.handleImgLoad('before')
252+
onLoad: this.handleImgLoad
285253
})
286254
),
287-
_react2['default'].createElement(
255+
_react2.default.createElement(
288256
'div',
289257
{ className: 'ImageDiff--swiper', style: swiperStyle },
290-
_react2['default'].createElement(
258+
_react2.default.createElement(
291259
'div',
292260
{ className: 'ImageDiff__after', style: afterStyle },
293-
_react2['default'].createElement('img', {
294-
ref: 'after',
261+
_react2.default.createElement('img', {
295262
src: this.props.after,
296263
height: this.props.height,
297264
width: this.props.width,
298-
onLoad: this.handleImgLoad('after')
265+
onLoad: this.handleImgLoad
299266
})
300267
)
301268
)
@@ -304,10 +271,22 @@ return /******/ (function(modules) { // webpackBootstrap
304271
}]);
305272

306273
return ImageDiff;
307-
})(_react.Component);
308-
309-
exports['default'] = ImageDiff;
310-
module.exports = exports['default'];
274+
}(_react.Component);
275+
276+
ImageDiff.propTypes = {
277+
after: _react.PropTypes.string.isRequired,
278+
before: _react.PropTypes.string.isRequired,
279+
height: _react.PropTypes.number,
280+
type: _react.PropTypes.string.isRequired,
281+
value: _react.PropTypes.number,
282+
width: _react.PropTypes.number
283+
};
284+
285+
ImageDiff.defaultProps = {
286+
value: 1
287+
};
288+
289+
module.exports = ImageDiff;
311290

312291
/***/ },
313292
/* 1 */

‎package.json

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-image-diff",
3-
"version": "0.0.5",
3+
"version": "0.1.0",
44
"description": "Highlight differences between images",
55
"main": "dist/react-image-diff.js",
66
"scripts": {
@@ -22,9 +22,15 @@
2222
"url": "https://github.com/cezary/react-image-diff/issues"
2323
},
2424
"homepage": "https://github.com/cezary/react-image-diff",
25+
"peerDependencies": {
26+
"react": ">=0.14.0",
27+
"react-dom": ">=0.14.0"
28+
},
2529
"devDependencies": {
26-
"babel-core": "^5.8.25",
27-
"babel-loader": "^5.3.2",
28-
"webpack": "^1.12.2"
30+
"babel-loader": "^6.2.4",
31+
"babel-preset-es2015": "^6.6.0",
32+
"babel-preset-react": "^6.5.0",
33+
"babel-preset-stage-0": "^6.5.0",
34+
"webpack": "^1.13.0"
2935
}
3036
}

0 commit comments

Comments
 (0)