From 4448c96418b4f14bbe7157d4a73b556e03d22bae Mon Sep 17 00:00:00 2001 From: Nikolay Kozhukharenko Date: Wed, 1 Nov 2017 12:57:57 +0200 Subject: [PATCH 1/4] update to newer react and prop-types --- .gitignore | 1 + dist/react-crop.js | 2108 ++-- dist/react-crop.js.map | 2 +- dist/react-crop.min.js | 2 +- dist/react-crop.min.js.map | 2 +- docs/bundle.js | 16480 +++++++++++++++++-------------- docs/index.js | 16 +- draggable-resizable-box.js | 980 +- index.js | 297 +- lib/draggable-resizable-box.js | 88 +- lib/index.src.js | 45 +- package.json | 4 +- 12 files changed, 10901 insertions(+), 9124 deletions(-) diff --git a/.gitignore b/.gitignore index 5d64e21..742e7ac 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ .DS_Store npm_debug.log +.idea \ No newline at end of file diff --git a/dist/react-crop.js b/dist/react-crop.js index 7b1e7a0..fee0c20 100644 --- a/dist/react-crop.js +++ b/dist/react-crop.js @@ -60,156 +60,201 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); + 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; }; }(); + var _react = __webpack_require__(1); var _react2 = _interopRequireDefault(_react); - var _draggableResizableBox = __webpack_require__(2); + var _propTypes = __webpack_require__(2); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _draggableResizableBox = __webpack_require__(7); var _draggableResizableBox2 = _interopRequireDefault(_draggableResizableBox); - var _dataUriToBlob = __webpack_require__(3); + var _dataUriToBlob = __webpack_require__(8); var _dataUriToBlob2 = _interopRequireDefault(_dataUriToBlob); - __webpack_require__(4); + __webpack_require__(9); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - exports.default = _react2.default.createClass({ - displayName: 'Cropper', - - propTypes: { - width: _react2.default.PropTypes.number.isRequired, - height: _react2.default.PropTypes.number.isRequired, - center: _react2.default.PropTypes.bool, - image: _react2.default.PropTypes.any, - widthLabel: _react2.default.PropTypes.string, - heightLabel: _react2.default.PropTypes.string, - offsetXLabel: _react2.default.PropTypes.string, - offsetYLabel: _react2.default.PropTypes.string, - onImageLoaded: _react2.default.PropTypes.func, - minConstraints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number) - }, - - getDefaultProps: function getDefaultProps() { - return { - center: false, - width: 'Width', - height: 'Height', - offsetXLabel: 'Offset X', - offsetYLabel: 'Offset Y' - }; - }, - getInitialState: function getInitialState() { - return { - imageLoaded: false, - width: this.props.width, - height: this.props.height, - url: window.URL.createObjectURL(this.props.image) - }; - }, - componentWillReceiveProps: function componentWillReceiveProps(nextProps) { - if (this.props.image !== nextProps.image) { - this.setState({ - url: window.URL.createObjectURL(nextProps.image), - imageLoaded: false - }); - } - }, - shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) { - var image = this.props.image; - - return nextProps.image.size !== image.size || nextProps.image.name !== image.name || nextProps.image.type !== image.type || nextState.imageLoaded !== this.state.imageLoaded; - }, - onLoad: function onLoad(evt) { - var _this = this; - - var box = this.refs.box.getBoundingClientRect(); - this.setState({ - imageLoaded: true, - width: box.width, - height: box.height - }, function () { - var img = _this.refs.image; - _this.props.onImageLoaded && _this.props.onImageLoaded(img); - }); - }, - cropImage: function cropImage() { - var _this2 = this; - - return new Promise(function (resolve, reject) { - var img = new Image(); - img.onload = function () { - var canvas = _this2.refs.canvas; - var img = _this2.refs.image; - var ctx = canvas.getContext('2d'); - var xScale = img.naturalWidth / _this2.state.width, - yScale = img.naturalHeight / _this2.state.height; + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + 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; } + + 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; } + var _class = function (_React$Component) { + _inherits(_class, _React$Component); - var imageOffsetX = xScale < 1 ? 0 : _this2.state.offset.left * xScale; - var imageOffsetY = yScale < 1 ? 0 : _this2.state.offset.top * yScale; - var imageWidth = xScale < 1 ? img.naturalWidth : _this2.state.dimensions.width * xScale; - var imageHeight = yScale < 1 ? img.naturalHeight : _this2.state.dimensions.height * yScale; + function _class() { + var _ref; - var canvasOffsetX = xScale < 1 ? Math.floor((_this2.state.dimensions.width - img.naturalWidth) / 2) : 0; - var canvasOffsetY = yScale < 1 ? Math.floor((_this2.state.dimensions.height - img.naturalHeight) / 2) : 0; - var canvasWidth = xScale < 1 ? img.naturalWidth : _this2.props.width; - var canvasHeight = yScale < 1 ? img.naturalHeight : _this2.props.height; + var _temp, _this, _ret; - ctx.clearRect(0, 0, _this2.props.width, _this2.props.height); - ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight); - resolve((0, _dataUriToBlob2.default)(canvas.toDataURL())); + _classCallCheck(this, _class); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.displayName = 'Cropper', _this.propTypes = { + width: _propTypes2.default.number.isRequired, + height: _propTypes2.default.number.isRequired, + center: _propTypes2.default.bool, + image: _propTypes2.default.any, + widthLabel: _propTypes2.default.string, + heightLabel: _propTypes2.default.string, + offsetXLabel: _propTypes2.default.string, + offsetYLabel: _propTypes2.default.string, + onImageLoaded: _propTypes2.default.func, + minConstraints: _propTypes2.default.arrayOf(_propTypes2.default.number) + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + _createClass(_class, [{ + key: 'getDefaultProps', + value: function getDefaultProps() { + return { + center: false, + width: 'Width', + height: 'Height', + offsetXLabel: 'Offset X', + offsetYLabel: 'Offset Y' }; - img.src = window.URL.createObjectURL(_this2.props.image); - }); - }, - onChange: function onChange(offset, dimensions) { - this.setState({ offset: offset, dimensions: dimensions }); - }, - render: function render() { - return _react2.default.createElement( - 'div', - { - ref: 'box', - className: 'Cropper', - style: { - minWidth: this.props.width, - minHeight: this.props.height - } }, - _react2.default.createElement('canvas', { - className: 'Cropper-canvas', - ref: 'canvas', + } + }, { + key: 'getInitialState', + value: function getInitialState() { + return { + imageLoaded: false, width: this.props.width, - height: this.props.height }), - _react2.default.createElement('img', { - ref: 'image', - src: this.state.url, - className: 'Cropper-image', - onLoad: this.onLoad, - style: { top: this.state.height / 2 } }), - this.state.imageLoaded && _react2.default.createElement( + height: this.props.height, + url: window.URL.createObjectURL(this.props.image) + }; + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.image !== nextProps.image) { + this.setState({ + url: window.URL.createObjectURL(nextProps.image), + imageLoaded: false + }); + } + } + }, { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps, nextState) { + var image = this.props.image; + + return nextProps.image.size !== image.size || nextProps.image.name !== image.name || nextProps.image.type !== image.type || nextState.imageLoaded !== this.state.imageLoaded; + } + }, { + key: 'onLoad', + value: function onLoad(evt) { + var _this2 = this; + + var box = this.refs.box.getBoundingClientRect(); + this.setState({ + imageLoaded: true, + width: box.width, + height: box.height + }, function () { + var img = _this2.refs.image; + _this2.props.onImageLoaded && _this2.props.onImageLoaded(img); + }); + } + }, { + key: 'cropImage', + value: function cropImage() { + var _this3 = this; + + return new Promise(function (resolve, reject) { + var img = new Image(); + img.onload = function () { + var canvas = _this3.refs.canvas; + var img = _this3.refs.image; + var ctx = canvas.getContext('2d'); + var xScale = img.naturalWidth / _this3.state.width, + yScale = img.naturalHeight / _this3.state.height; + + + var imageOffsetX = xScale < 1 ? 0 : _this3.state.offset.left * xScale; + var imageOffsetY = yScale < 1 ? 0 : _this3.state.offset.top * yScale; + var imageWidth = xScale < 1 ? img.naturalWidth : _this3.state.dimensions.width * xScale; + var imageHeight = yScale < 1 ? img.naturalHeight : _this3.state.dimensions.height * yScale; + + var canvasOffsetX = xScale < 1 ? Math.floor((_this3.state.dimensions.width - img.naturalWidth) / 2) : 0; + var canvasOffsetY = yScale < 1 ? Math.floor((_this3.state.dimensions.height - img.naturalHeight) / 2) : 0; + var canvasWidth = xScale < 1 ? img.naturalWidth : _this3.props.width; + var canvasHeight = yScale < 1 ? img.naturalHeight : _this3.props.height; + + ctx.clearRect(0, 0, _this3.props.width, _this3.props.height); + ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight); + resolve((0, _dataUriToBlob2.default)(canvas.toDataURL())); + }; + img.src = window.URL.createObjectURL(_this3.props.image); + }); + } + }, { + key: 'onChange', + value: function onChange(offset, dimensions) { + this.setState({ offset: offset, dimensions: dimensions }); + } + }, { + key: 'render', + value: function render() { + return _react2.default.createElement( 'div', - { className: 'box' }, - _react2.default.createElement( - _draggableResizableBox2.default, - { - aspectRatio: this.props.width / this.props.height, - width: this.state.width, - height: this.state.height, - minConstraints: this.props.minConstraints, - onChange: this.onChange, - widthLabel: this.props.widthLabel, - heightLabel: this.props.heightLabel, - offsetXLabel: this.props.offsetXLabel, - offsetYLabel: this.props.offsetYLabel }, - _react2.default.createElement('div', { className: 'Cropper-box' }) + { + ref: 'box', + className: 'Cropper', + style: { + minWidth: this.props.width, + minHeight: this.props.height + } }, + _react2.default.createElement('canvas', { + className: 'Cropper-canvas', + ref: 'canvas', + width: this.props.width, + height: this.props.height }), + _react2.default.createElement('img', { + ref: 'image', + src: this.state.url, + className: 'Cropper-image', + onLoad: this.onLoad, + style: { top: this.state.height / 2 } }), + this.state.imageLoaded && _react2.default.createElement( + 'div', + { className: 'box' }, + _react2.default.createElement( + _draggableResizableBox2.default, + { + aspectRatio: this.props.width / this.props.height, + width: this.state.width, + height: this.state.height, + minConstraints: this.props.minConstraints, + onChange: this.onChange, + widthLabel: this.props.widthLabel, + heightLabel: this.props.heightLabel, + offsetXLabel: this.props.offsetXLabel, + offsetYLabel: this.props.offsetYLabel }, + _react2.default.createElement('div', { className: 'Cropper-box' }) + ) ) - ) - ); - } - }); + ); + } + }]); + + return _class; + }(_react2.default.Component); + + exports.default = _class; /***/ }, /* 1 */ @@ -219,6 +264,221 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 2 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + if (false) { + var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' && + Symbol.for && + Symbol.for('react.element')) || + 0xeac7; + + var isValidElement = function(object) { + return typeof object === 'object' && + object !== null && + object.$$typeof === REACT_ELEMENT_TYPE; + }; + + // By explicitly using `prop-types` you are opting into new development behavior. + // http://fb.me/prop-types-in-prod + var throwOnDirectAccess = true; + module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess); + } else { + // By explicitly using `prop-types` you are opting into new production behavior. + // http://fb.me/prop-types-in-prod + module.exports = __webpack_require__(3)(); + } + + +/***/ }, +/* 3 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + 'use strict'; + + var emptyFunction = __webpack_require__(4); + var invariant = __webpack_require__(5); + var ReactPropTypesSecret = __webpack_require__(6); + + module.exports = function() { + function shim(props, propName, componentName, location, propFullName, secret) { + if (secret === ReactPropTypesSecret) { + // It is still safe when called from React. + return; + } + invariant( + false, + 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + + 'Use PropTypes.checkPropTypes() to call them. ' + + 'Read more at http://fb.me/use-check-prop-types' + ); + }; + shim.isRequired = shim; + function getShim() { + return shim; + }; + // Important! + // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. + var ReactPropTypes = { + array: shim, + bool: shim, + func: shim, + number: shim, + object: shim, + string: shim, + symbol: shim, + + any: shim, + arrayOf: getShim, + element: shim, + instanceOf: getShim, + node: shim, + objectOf: getShim, + oneOf: getShim, + oneOfType: getShim, + shape: getShim, + exact: getShim + }; + + ReactPropTypes.checkPropTypes = emptyFunction; + ReactPropTypes.PropTypes = ReactPropTypes; + + return ReactPropTypes; + }; + + +/***/ }, +/* 4 */ +/***/ function(module, exports) { + + "use strict"; + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * + */ + + function makeEmptyFunction(arg) { + return function () { + return arg; + }; + } + + /** + * This function accepts and discards inputs; it has no side effects. This is + * primarily useful idiomatically for overridable function endpoints which + * always need to be callable, since JS lacks a null-call idiom ala Cocoa. + */ + var emptyFunction = function emptyFunction() {}; + + emptyFunction.thatReturns = makeEmptyFunction; + emptyFunction.thatReturnsFalse = makeEmptyFunction(false); + emptyFunction.thatReturnsTrue = makeEmptyFunction(true); + emptyFunction.thatReturnsNull = makeEmptyFunction(null); + emptyFunction.thatReturnsThis = function () { + return this; + }; + emptyFunction.thatReturnsArgument = function (arg) { + return arg; + }; + + module.exports = emptyFunction; + +/***/ }, +/* 5 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + 'use strict'; + + /** + * Use invariant() to assert state which your program assumes to be true. + * + * Provide sprintf-style format (only %s is supported) and arguments + * to provide information about what broke and what you were + * expecting. + * + * The invariant message will be stripped in production, but the invariant + * will remain to ensure logic does not differ in production. + */ + + var validateFormat = function validateFormat(format) {}; + + if (false) { + validateFormat = function validateFormat(format) { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + }; + } + + function invariant(condition, format, a, b, c, d, e, f) { + validateFormat(format); + + if (!condition) { + var error; + if (format === undefined) { + error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error(format.replace(/%s/g, function () { + return args[argIndex++]; + })); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } + } + + module.exports = invariant; + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + 'use strict'; + + var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; + + module.exports = ReactPropTypesSecret; + + +/***/ }, +/* 7 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -231,484 +491,566 @@ return /******/ (function(modules) { // webpackBootstrap var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); + 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; }; }(); + var _react = __webpack_require__(1); var _react2 = _interopRequireDefault(_react); + var _propTypes = __webpack_require__(2); + + var _propTypes2 = _interopRequireDefault(_propTypes); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - exports.default = _react2.default.createClass({ - displayName: 'DraggableResizableBox', - - propTypes: { - aspectRatio: _react2.default.PropTypes.number.isRequired, - width: _react2.default.PropTypes.number.isRequired, - height: _react2.default.PropTypes.number.isRequired, - onChange: _react2.default.PropTypes.func, - offset: _react2.default.PropTypes.array, - minConstraints: _react2.default.PropTypes.array, - children: _react2.default.PropTypes.node, - widthLabel: _react2.default.PropTypes.string, - heightLabel: _react2.default.PropTypes.string, - offsetXLabel: _react2.default.PropTypes.string, - offsetYLabel: _react2.default.PropTypes.string - }, - - getDefaultProps: function getDefaultProps() { - return { - widthLabel: 'Width', - heightLabel: 'Height', - offsetXLabel: 'Offset X', - offsetYLabel: 'Offset Y' - }; - }, - getInitialState: function getInitialState() { - var _preserveAspectRatio = this.preserveAspectRatio(this.props.width, this.props.height), - _preserveAspectRatio2 = _slicedToArray(_preserveAspectRatio, 2), - width = _preserveAspectRatio2[0], - height = _preserveAspectRatio2[1]; - - var centerYOffset = (this.props.height - height) / 2; - var centerXOffset = (this.props.width - width) / 2; - return { - top: centerYOffset, - left: centerXOffset, - bottom: centerYOffset, - right: centerXOffset, - width: width, - height: height - }; - }, - componentDidMount: function componentDidMount() { - document.addEventListener('mousemove', this.eventMove); - document.addEventListener('mouseup', this.eventEnd); - document.addEventListener('touchmove', this.eventMove); - document.addEventListener('touchend', this.eventEnd); - document.addEventListener('keydown', this.handleKey); - this.props.onChange({ - top: this.state.top, - left: this.state.left - }, { - width: this.state.width, - height: this.state.height - }); - }, - componentWillUnmount: function componentWillUnmount() { - document.removeEventListener('mousemove', this.eventMove); - document.removeEventListener('mouseup', this.eventEnd); - document.removeEventListener('touchmove', this.eventMove); - document.removeEventListener('touchend', this.eventEnd); - document.removeEventListener('keydown', this.handleKey); - }, - calculateDimensions: function calculateDimensions(_ref) { - var top = _ref.top, - left = _ref.left, - bottom = _ref.bottom, - right = _ref.right; - - return { width: this.props.width - left - right, height: this.props.height - top - bottom }; - }, - - - // If you do this, be careful of constraints - preserveAspectRatio: function preserveAspectRatio(width, height) { - if (this.props.minConstraints) { - width = Math.max(width, this.props.minConstraints[0]); - height = Math.max(height, this.props.minConstraints[1]); + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + 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; } + + 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; } + + var _class = function (_React$Component) { + _inherits(_class, _React$Component); + + function _class() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, _class); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; } - var currentAspectRatio = width / height; - if (currentAspectRatio < this.props.aspectRatio) { - return [width, width / this.props.aspectRatio]; - } else if (currentAspectRatio > this.props.aspectRatio) { - return [height * this.props.aspectRatio, height]; - } else { - return [width, height]; + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.displayName = 'DraggableResizableBox', _this.propTypes = { + width: _propTypes2.default.number.isRequired, + height: _propTypes2.default.number.isRequired, + center: _propTypes2.default.bool, + image: _propTypes2.default.any, + widthLabel: _propTypes2.default.string, + heightLabel: _propTypes2.default.string, + offsetXLabel: _propTypes2.default.string, + offsetYLabel: _propTypes2.default.string, + onImageLoaded: _propTypes2.default.func, + minConstraints: _propTypes2.default.arrayOf(_propTypes2.default.number) + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + _createClass(_class, [{ + key: 'getDefaultProps', + value: function getDefaultProps() { + return { + widthLabel: 'Width', + heightLabel: 'Height', + offsetXLabel: 'Offset X', + offsetYLabel: 'Offset Y' + }; } - }, - constrainBoundary: function constrainBoundary(side) { - return side < 0 ? 0 : side; - }, - getClientCoordinates: function getClientCoordinates(evt) { - return evt.touches ? { - clientX: evt.touches[0].clientX, - clientY: evt.touches[0].clientY - } : { - clientX: evt.clientX, - clientY: evt.clientY - }; - }, - eventMove: function eventMove(evt) { - if (this.state.resizing) { - this.onResize(evt); - } else if (this.state.moving) { - this.eventMoveBox(evt); + }, { + key: 'getInitialState', + value: function getInitialState() { + var _preserveAspectRatio = this.preserveAspectRatio(this.props.width, this.props.height), + _preserveAspectRatio2 = _slicedToArray(_preserveAspectRatio, 2), + width = _preserveAspectRatio2[0], + height = _preserveAspectRatio2[1]; + + var centerYOffset = (this.props.height - height) / 2; + var centerXOffset = (this.props.width - width) / 2; + return { + top: centerYOffset, + left: centerXOffset, + bottom: centerYOffset, + right: centerXOffset, + width: width, + height: height + }; + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + document.addEventListener('mousemove', this.eventMove); + document.addEventListener('mouseup', this.eventEnd); + document.addEventListener('touchmove', this.eventMove); + document.addEventListener('touchend', this.eventEnd); + document.addEventListener('keydown', this.handleKey); + this.props.onChange({ + top: this.state.top, + left: this.state.left + }, { + width: this.state.width, + height: this.state.height + }); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + document.removeEventListener('mousemove', this.eventMove); + document.removeEventListener('mouseup', this.eventEnd); + document.removeEventListener('touchmove', this.eventMove); + document.removeEventListener('touchend', this.eventEnd); + document.removeEventListener('keydown', this.handleKey); + } + }, { + key: 'calculateDimensions', + value: function calculateDimensions(_ref2) { + var top = _ref2.top, + left = _ref2.left, + bottom = _ref2.bottom, + right = _ref2.right; + + return { width: this.props.width - left - right, height: this.props.height - top - bottom }; } - }, - eventEnd: function eventEnd(evt) { - if (this.state.resizing) { - this.stopResize(evt); - } else if (this.state.moving) { - this.stopMove(evt); + + // If you do this, be careful of constraints + + }, { + key: 'preserveAspectRatio', + value: function preserveAspectRatio(width, height) { + if (this.props.minConstraints) { + width = Math.max(width, this.props.minConstraints[0]); + height = Math.max(height, this.props.minConstraints[1]); + } + var currentAspectRatio = width / height; + + if (currentAspectRatio < this.props.aspectRatio) { + return [width, width / this.props.aspectRatio]; + } else if (currentAspectRatio > this.props.aspectRatio) { + return [height * this.props.aspectRatio, height]; + } else { + return [width, height]; + } } - }, - - - // Resize methods - startResize: function startResize(corner, event) { - event.stopPropagation(); - event.preventDefault(); - this.setState({ - resizing: true, - corner: corner - }); - }, - stopResize: function stopResize() { - this.setState({ resizing: false }); - }, - - - // resize strategies - nw: function nw(mousePos, boxPos) { - var pos = _extends({}, this.state, { - top: this.constrainBoundary(mousePos.clientY - boxPos.top), - left: this.constrainBoundary(mousePos.clientX - boxPos.left) - }); - var dimensions = this.calculateDimensions(pos); - - var _preserveAspectRatio3 = this.preserveAspectRatio(dimensions.width, dimensions.height), - _preserveAspectRatio4 = _slicedToArray(_preserveAspectRatio3, 2), - width = _preserveAspectRatio4[0], - height = _preserveAspectRatio4[1]; - - pos.top = this.props.height - pos.bottom - height; - pos.left = this.props.width - pos.right - width; - return pos; - }, - ne: function ne(mousePos, boxPos) { - var pos = _extends({}, this.state, { - top: this.constrainBoundary(mousePos.clientY - boxPos.top), - right: this.constrainBoundary(boxPos.right - mousePos.clientX) - }); - var dimensions = this.calculateDimensions(pos); - - var _preserveAspectRatio5 = this.preserveAspectRatio(dimensions.width, dimensions.height), - _preserveAspectRatio6 = _slicedToArray(_preserveAspectRatio5, 2), - width = _preserveAspectRatio6[0], - height = _preserveAspectRatio6[1]; - - pos.top = this.props.height - pos.bottom - height; - pos.right = this.props.width - pos.left - width; - return pos; - }, - se: function se(mousePos, boxPos) { - var pos = _extends({}, this.state, { - bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY), - right: this.constrainBoundary(boxPos.right - mousePos.clientX) - }); - var dimensions = this.calculateDimensions(pos); - - var _preserveAspectRatio7 = this.preserveAspectRatio(dimensions.width, dimensions.height), - _preserveAspectRatio8 = _slicedToArray(_preserveAspectRatio7, 2), - width = _preserveAspectRatio8[0], - height = _preserveAspectRatio8[1]; - - pos.bottom = this.props.height - pos.top - height; - pos.right = this.props.width - pos.left - width; - return pos; - }, - sw: function sw(mousePos, boxPos) { - var pos = _extends({}, this.state, { - bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY), - left: this.constrainBoundary(mousePos.clientX - boxPos.left) - }); - var dimensions = this.calculateDimensions(pos); - - var _preserveAspectRatio9 = this.preserveAspectRatio(dimensions.width, dimensions.height), - _preserveAspectRatio10 = _slicedToArray(_preserveAspectRatio9, 2), - width = _preserveAspectRatio10[0], - height = _preserveAspectRatio10[1]; - - pos.bottom = this.props.height - pos.top - height; - pos.left = this.props.width - pos.right - width; - return pos; - }, - onResize: function onResize(event) { - var box = this.refs.box.parentElement.parentElement.getBoundingClientRect(); - var coordinates = this.getClientCoordinates(event); - var position = this[this.state.corner](coordinates, box); - this.resize(position, coordinates); - }, - controlsResize: function controlsResize(event) { - var box = this.refs.box.parentElement.parentElement.getBoundingClientRect(); - var width = event.target.name === 'width' ? +event.target.value : +event.target.value * this.props.aspectRatio; - var height = event.target.name === 'height' ? +event.target.value : +event.target.value / this.props.aspectRatio; - var dimensions = this.preserveAspectRatio(width, height); - width = dimensions[0]; - height = dimensions[1]; - - if (width > box.width - this.state.left || height > box.height - this.state.top) return; - - var widthDifference = this.state.width - width; - var heightDifference = this.state.height - height; - var pos = _extends({}, this.state, { - right: this.state.right + widthDifference, - bottom: this.state.bottom + heightDifference - }); - var coordinates = { - clientX: box.right - pos.right, - clientY: box.bottom - pos.bottom - }; - - this.resize(pos, coordinates); - }, - resize: function resize(position, coordinates) { - var _this = this; - - var dimensions = this.calculateDimensions(position); - var widthChanged = dimensions.width !== this.state.width, - heightChanged = dimensions.height !== this.state.height; - if (!widthChanged && !heightChanged) return; - - this.setState(_extends({}, coordinates, position, dimensions), function () { - _this.props.onChange({ - top: position.top, - left: position.left - }, dimensions); - }); - }, - - - // Move methods - startMove: function startMove(evt) { - var _getClientCoordinates = this.getClientCoordinates(evt), - clientX = _getClientCoordinates.clientX, - clientY = _getClientCoordinates.clientY; - - this.setState({ - moving: true, - clientX: clientX, - clientY: clientY - }); - }, - stopMove: function stopMove(evt) { - this.setState({ - moving: false - }); - }, - eventMoveBox: function eventMoveBox(evt) { - evt.preventDefault(); - - var _getClientCoordinates2 = this.getClientCoordinates(evt), - clientX = _getClientCoordinates2.clientX, - clientY = _getClientCoordinates2.clientY; - - var movedX = clientX - this.state.clientX; - var movedY = clientY - this.state.clientY; - - this.moveBox(clientX, clientY, movedX, movedY); - }, - controlsMoveBox: function controlsMoveBox(evt) { - var movedX = evt.target.name === 'x' ? evt.target.value - this.state.left : 0; - var movedY = evt.target.name === 'y' ? evt.target.value - this.state.top : 0; - this.moveBox(0, 0, movedX, movedY); - }, - moveBox: function moveBox(clientX, clientY, movedX, movedY) { - var _this2 = this; - - var position = { - top: this.constrainBoundary(this.state.top + movedY), - left: this.constrainBoundary(this.state.left + movedX), - bottom: this.constrainBoundary(this.state.bottom - movedY), - right: this.constrainBoundary(this.state.right - movedX) - }; - - if (!position.top) { - position.bottom = this.props.height - this.state.height; + }, { + key: 'constrainBoundary', + value: function constrainBoundary(side) { + return side < 0 ? 0 : side; } - if (!position.bottom) { - position.top = this.props.height - this.state.height; + }, { + key: 'getClientCoordinates', + value: function getClientCoordinates(evt) { + return evt.touches ? { + clientX: evt.touches[0].clientX, + clientY: evt.touches[0].clientY + } : { + clientX: evt.clientX, + clientY: evt.clientY + }; } - if (!position.left) { - position.right = this.props.width - this.state.width; + }, { + key: 'eventMove', + value: function eventMove(evt) { + if (this.state.resizing) { + this.onResize(evt); + } else if (this.state.moving) { + this.eventMoveBox(evt); + } } - if (!position.right) { - position.left = this.props.width - this.state.width; + }, { + key: 'eventEnd', + value: function eventEnd(evt) { + if (this.state.resizing) { + this.stopResize(evt); + } else if (this.state.moving) { + this.stopMove(evt); + } } - this.setState(_extends({}, { - clientX: clientX, - clientY: clientY - }, position), function () { - _this2.props.onChange({ - top: position.top, - left: position.left - }, _this2.calculateDimensions(position)); - }); - }, - keyboardResize: function keyboardResize(change) { - if (this.state.right - change < 0) { - return; + // Resize methods + + }, { + key: 'startResize', + value: function startResize(corner, event) { + event.stopPropagation(); + event.preventDefault(); + this.setState({ + resizing: true, + corner: corner + }); } - if (this.state.bottom - change < 0) { - return; + }, { + key: 'stopResize', + value: function stopResize() { + this.setState({ resizing: false }); } - var _preserveAspectRatio11 = this.preserveAspectRatio(this.state.width + change, this.state.height + change), - _preserveAspectRatio12 = _slicedToArray(_preserveAspectRatio11, 2), - width = _preserveAspectRatio12[0], - height = _preserveAspectRatio12[1]; - - var widthChange = width - this.state.width; - var heightChange = height - this.state.height; - - this.setState({ - bottom: this.state.bottom - heightChange, - right: this.state.right - widthChange, - width: width, - height: height - }); - }, - handleKey: function handleKey(event) { - // safari doesn't support event.key, so fall back to keyCode - if (event.shiftKey) { - if (event.key === 'ArrowUp' || event.keyCode === 38) { - this.keyboardResize(-10); - event.preventDefault(); - } else if (event.key === 'ArrowDown' || event.keyCode === 40) { - this.keyboardResize(10); - event.preventDefault(); - } else if (event.key === 'ArrowLeft' || event.keyCode === 37) { - this.keyboardResize(-10); - event.preventDefault(); - } else if (event.key === 'ArrowRight' || event.keyCode === 39) { - this.keyboardResize(10); - event.preventDefault(); + // resize strategies + + }, { + key: 'nw', + value: function nw(mousePos, boxPos) { + var pos = _extends({}, this.state, { + top: this.constrainBoundary(mousePos.clientY - boxPos.top), + left: this.constrainBoundary(mousePos.clientX - boxPos.left) + }); + var dimensions = this.calculateDimensions(pos); + + var _preserveAspectRatio3 = this.preserveAspectRatio(dimensions.width, dimensions.height), + _preserveAspectRatio4 = _slicedToArray(_preserveAspectRatio3, 2), + width = _preserveAspectRatio4[0], + height = _preserveAspectRatio4[1]; + + pos.top = this.props.height - pos.bottom - height; + pos.left = this.props.width - pos.right - width; + return pos; + } + }, { + key: 'ne', + value: function ne(mousePos, boxPos) { + var pos = _extends({}, this.state, { + top: this.constrainBoundary(mousePos.clientY - boxPos.top), + right: this.constrainBoundary(boxPos.right - mousePos.clientX) + }); + var dimensions = this.calculateDimensions(pos); + + var _preserveAspectRatio5 = this.preserveAspectRatio(dimensions.width, dimensions.height), + _preserveAspectRatio6 = _slicedToArray(_preserveAspectRatio5, 2), + width = _preserveAspectRatio6[0], + height = _preserveAspectRatio6[1]; + + pos.top = this.props.height - pos.bottom - height; + pos.right = this.props.width - pos.left - width; + return pos; + } + }, { + key: 'se', + value: function se(mousePos, boxPos) { + var pos = _extends({}, this.state, { + bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY), + right: this.constrainBoundary(boxPos.right - mousePos.clientX) + }); + var dimensions = this.calculateDimensions(pos); + + var _preserveAspectRatio7 = this.preserveAspectRatio(dimensions.width, dimensions.height), + _preserveAspectRatio8 = _slicedToArray(_preserveAspectRatio7, 2), + width = _preserveAspectRatio8[0], + height = _preserveAspectRatio8[1]; + + pos.bottom = this.props.height - pos.top - height; + pos.right = this.props.width - pos.left - width; + return pos; + } + }, { + key: 'sw', + value: function sw(mousePos, boxPos) { + var pos = _extends({}, this.state, { + bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY), + left: this.constrainBoundary(mousePos.clientX - boxPos.left) + }); + var dimensions = this.calculateDimensions(pos); + + var _preserveAspectRatio9 = this.preserveAspectRatio(dimensions.width, dimensions.height), + _preserveAspectRatio10 = _slicedToArray(_preserveAspectRatio9, 2), + width = _preserveAspectRatio10[0], + height = _preserveAspectRatio10[1]; + + pos.bottom = this.props.height - pos.top - height; + pos.left = this.props.width - pos.right - width; + return pos; + } + }, { + key: 'onResize', + value: function onResize(event) { + var box = this.refs.box.parentElement.parentElement.getBoundingClientRect(); + var coordinates = this.getClientCoordinates(event); + var position = this[this.state.corner](coordinates, box); + this.resize(position, coordinates); + } + }, { + key: 'controlsResize', + value: function controlsResize(event) { + var box = this.refs.box.parentElement.parentElement.getBoundingClientRect(); + var width = event.target.name === 'width' ? +event.target.value : +event.target.value * this.props.aspectRatio; + var height = event.target.name === 'height' ? +event.target.value : +event.target.value / this.props.aspectRatio; + var dimensions = this.preserveAspectRatio(width, height); + width = dimensions[0]; + height = dimensions[1]; + + if (width > box.width - this.state.left || height > box.height - this.state.top) return; + + var widthDifference = this.state.width - width; + var heightDifference = this.state.height - height; + var pos = _extends({}, this.state, { + right: this.state.right + widthDifference, + bottom: this.state.bottom + heightDifference + }); + var coordinates = { + clientX: box.right - pos.right, + clientY: box.bottom - pos.bottom + }; + + this.resize(pos, coordinates); + } + }, { + key: 'resize', + value: function resize(position, coordinates) { + var _this2 = this; + + var dimensions = this.calculateDimensions(position); + var widthChanged = dimensions.width !== this.state.width, + heightChanged = dimensions.height !== this.state.height; + if (!widthChanged && !heightChanged) return; + + this.setState(_extends({}, coordinates, position, dimensions), function () { + _this2.props.onChange({ + top: position.top, + left: position.left + }, dimensions); + }); + } + + // Move methods + + }, { + key: 'startMove', + value: function startMove(evt) { + var _getClientCoordinates = this.getClientCoordinates(evt), + clientX = _getClientCoordinates.clientX, + clientY = _getClientCoordinates.clientY; + + this.setState({ + moving: true, + clientX: clientX, + clientY: clientY + }); + } + }, { + key: 'stopMove', + value: function stopMove(evt) { + this.setState({ + moving: false + }); + } + }, { + key: 'eventMoveBox', + value: function eventMoveBox(evt) { + evt.preventDefault(); + + var _getClientCoordinates2 = this.getClientCoordinates(evt), + clientX = _getClientCoordinates2.clientX, + clientY = _getClientCoordinates2.clientY; + + var movedX = clientX - this.state.clientX; + var movedY = clientY - this.state.clientY; + + this.moveBox(clientX, clientY, movedX, movedY); + } + }, { + key: 'controlsMoveBox', + value: function controlsMoveBox(evt) { + var movedX = evt.target.name === 'x' ? evt.target.value - this.state.left : 0; + var movedY = evt.target.name === 'y' ? evt.target.value - this.state.top : 0; + this.moveBox(0, 0, movedX, movedY); + } + }, { + key: 'moveBox', + value: function moveBox(clientX, clientY, movedX, movedY) { + var _this3 = this; + + var position = { + top: this.constrainBoundary(this.state.top + movedY), + left: this.constrainBoundary(this.state.left + movedX), + bottom: this.constrainBoundary(this.state.bottom - movedY), + right: this.constrainBoundary(this.state.right - movedX) + }; + + if (!position.top) { + position.bottom = this.props.height - this.state.height; } - } else { - if (event.key === 'ArrowUp' || event.keyCode === 38) { - this.moveBox(this.state.clientX, this.state.clientY, 0, -10); - event.preventDefault(); - } else if (event.key === 'ArrowDown' || event.keyCode === 40) { - this.moveBox(this.state.clientX, this.state.clientY, 0, 10); - event.preventDefault(); - } else if (event.key === 'ArrowLeft' || event.keyCode === 37) { - this.moveBox(this.state.clientX, this.state.clientY, -10, 0); - event.preventDefault(); - } else if (event.key === 'ArrowRight' || event.keyCode === 39) { - this.moveBox(this.state.clientX, this.state.clientY, 10, 0); - event.preventDefault(); + if (!position.bottom) { + position.top = this.props.height - this.state.height; + } + if (!position.left) { + position.right = this.props.width - this.state.width; } + if (!position.right) { + position.left = this.props.width - this.state.width; + } + + this.setState(_extends({}, { + clientX: clientX, + clientY: clientY + }, position), function () { + _this3.props.onChange({ + top: position.top, + left: position.left + }, _this3.calculateDimensions(position)); + }); } - }, - render: function render() { - var style = { - position: 'absolute', - top: this.state.top, - left: this.state.left, - right: this.state.right, - bottom: this.state.bottom - }; - - var _calculateDimensions = this.calculateDimensions(this.state), - width = _calculateDimensions.width, - height = _calculateDimensions.height; - - var topStyle = { - height: this.state.top - }; - var bottomStyle = { - height: this.state.bottom - }; - var leftStyle = { - top: this.state.top, - right: width + this.state.right, - bottom: this.state.bottom - }; - var rightStyle = { - top: this.state.top, - left: width + this.state.left, - bottom: this.state.bottom - }; - - return _react2.default.createElement( - 'div', - { ref: 'box', className: 'DraggableResizable' }, - _react2.default.createElement( + }, { + key: 'keyboardResize', + value: function keyboardResize(change) { + if (this.state.right - change < 0) { + return; + } + if (this.state.bottom - change < 0) { + return; + } + + var _preserveAspectRatio11 = this.preserveAspectRatio(this.state.width + change, this.state.height + change), + _preserveAspectRatio12 = _slicedToArray(_preserveAspectRatio11, 2), + width = _preserveAspectRatio12[0], + height = _preserveAspectRatio12[1]; + + var widthChange = width - this.state.width; + var heightChange = height - this.state.height; + + this.setState({ + bottom: this.state.bottom - heightChange, + right: this.state.right - widthChange, + width: width, + height: height + }); + } + }, { + key: 'handleKey', + value: function handleKey(event) { + // safari doesn't support event.key, so fall back to keyCode + if (event.shiftKey) { + if (event.key === 'ArrowUp' || event.keyCode === 38) { + this.keyboardResize(-10); + event.preventDefault(); + } else if (event.key === 'ArrowDown' || event.keyCode === 40) { + this.keyboardResize(10); + event.preventDefault(); + } else if (event.key === 'ArrowLeft' || event.keyCode === 37) { + this.keyboardResize(-10); + event.preventDefault(); + } else if (event.key === 'ArrowRight' || event.keyCode === 39) { + this.keyboardResize(10); + event.preventDefault(); + } + } else { + if (event.key === 'ArrowUp' || event.keyCode === 38) { + this.moveBox(this.state.clientX, this.state.clientY, 0, -10); + event.preventDefault(); + } else if (event.key === 'ArrowDown' || event.keyCode === 40) { + this.moveBox(this.state.clientX, this.state.clientY, 0, 10); + event.preventDefault(); + } else if (event.key === 'ArrowLeft' || event.keyCode === 37) { + this.moveBox(this.state.clientX, this.state.clientY, -10, 0); + event.preventDefault(); + } else if (event.key === 'ArrowRight' || event.keyCode === 39) { + this.moveBox(this.state.clientX, this.state.clientY, 10, 0); + event.preventDefault(); + } + } + } + }, { + key: 'render', + value: function render() { + var style = { + position: 'absolute', + top: this.state.top, + left: this.state.left, + right: this.state.right, + bottom: this.state.bottom + }; + + var _calculateDimensions = this.calculateDimensions(this.state), + width = _calculateDimensions.width, + height = _calculateDimensions.height; + + var topStyle = { + height: this.state.top + }; + var bottomStyle = { + height: this.state.bottom + }; + var leftStyle = { + top: this.state.top, + right: width + this.state.right, + bottom: this.state.bottom + }; + var rightStyle = { + top: this.state.top, + left: width + this.state.left, + bottom: this.state.bottom + }; + + return _react2.default.createElement( 'div', - { className: 'DraggableResizable-controls' }, - _react2.default.createElement( - 'label', - null, - this.props.offsetXLabel, - _react2.default.createElement('input', { - name: 'x', - value: Math.round(this.state.left), - onChange: this.controlsMoveBox, - tabIndex: '-1', - type: 'number' }) - ), + { ref: 'box', className: 'DraggableResizable' }, _react2.default.createElement( - 'label', - null, - this.props.offsetYLabel, - _react2.default.createElement('input', { - name: 'y', - value: Math.round(this.state.top), - onChange: this.controlsMoveBox, - tabIndex: '-1', - type: 'number' }) + 'div', + { className: 'DraggableResizable-controls' }, + _react2.default.createElement( + 'label', + null, + this.props.offsetXLabel, + _react2.default.createElement('input', { + name: 'x', + value: Math.round(this.state.left), + onChange: this.controlsMoveBox, + tabIndex: '-1', + type: 'number' }) + ), + _react2.default.createElement( + 'label', + null, + this.props.offsetYLabel, + _react2.default.createElement('input', { + name: 'y', + value: Math.round(this.state.top), + onChange: this.controlsMoveBox, + tabIndex: '-1', + type: 'number' }) + ), + _react2.default.createElement( + 'label', + null, + this.props.widthLabel, + _react2.default.createElement('input', { + name: 'width', + value: Math.round(width), + type: 'number', + tabIndex: '-1', + onChange: this.controlsResize }) + ), + _react2.default.createElement( + 'label', + null, + this.props.heightLabel, + _react2.default.createElement('input', { + value: Math.round(height), + type: 'number', + name: 'height', + tabIndex: '-1', + onChange: this.controlsResize }) + ) ), + _react2.default.createElement('div', { className: 'DraggableResizable-top', style: topStyle }), + _react2.default.createElement('div', { className: 'DraggableResizable-left', style: leftStyle }), _react2.default.createElement( - 'label', - null, - this.props.widthLabel, - _react2.default.createElement('input', { - name: 'width', - value: Math.round(width), - type: 'number', - tabIndex: '-1', - onChange: this.controlsResize }) + 'div', + { style: style, onMouseDown: this.startMove, onTouchStart: this.startMove }, + this.props.children, + _react2.default.createElement('div', { className: 'resize-handle resize-handle-se', + onMouseDown: this.startResize.bind(null, 'se'), + onTouchStart: this.startResize.bind(null, 'se') }), + _react2.default.createElement('div', { className: 'resize-handle resize-handle-ne', + onMouseDown: this.startResize.bind(null, 'ne'), + onTouchStart: this.startResize.bind(null, 'ne') }), + _react2.default.createElement('div', { className: 'resize-handle resize-handle-sw', + onMouseDown: this.startResize.bind(null, 'sw'), + onTouchStart: this.startResize.bind(null, 'sw') }), + _react2.default.createElement('div', { className: 'resize-handle resize-handle-nw', + onMouseDown: this.startResize.bind(null, 'nw'), + onTouchStart: this.startResize.bind(null, 'nw') }) ), - _react2.default.createElement( - 'label', - null, - this.props.heightLabel, - _react2.default.createElement('input', { - value: Math.round(height), - type: 'number', - name: 'height', - tabIndex: '-1', - onChange: this.controlsResize }) - ) - ), - _react2.default.createElement('div', { className: 'DraggableResizable-top', style: topStyle }), - _react2.default.createElement('div', { className: 'DraggableResizable-left', style: leftStyle }), - _react2.default.createElement( - 'div', - { style: style, onMouseDown: this.startMove, onTouchStart: this.startMove }, - this.props.children, - _react2.default.createElement('div', { className: 'resize-handle resize-handle-se', - onMouseDown: this.startResize.bind(null, 'se'), - onTouchStart: this.startResize.bind(null, 'se') }), - _react2.default.createElement('div', { className: 'resize-handle resize-handle-ne', - onMouseDown: this.startResize.bind(null, 'ne'), - onTouchStart: this.startResize.bind(null, 'ne') }), - _react2.default.createElement('div', { className: 'resize-handle resize-handle-sw', - onMouseDown: this.startResize.bind(null, 'sw'), - onTouchStart: this.startResize.bind(null, 'sw') }), - _react2.default.createElement('div', { className: 'resize-handle resize-handle-nw', - onMouseDown: this.startResize.bind(null, 'nw'), - onTouchStart: this.startResize.bind(null, 'nw') }) - ), - _react2.default.createElement('div', { className: 'DraggableResizable-right', style: rightStyle }), - _react2.default.createElement('div', { className: 'DraggableResizable-bottom', style: bottomStyle }) - ); - } - }); + _react2.default.createElement('div', { className: 'DraggableResizable-right', style: rightStyle }), + _react2.default.createElement('div', { className: 'DraggableResizable-bottom', style: bottomStyle }) + ); + } + }]); + + return _class; + }(_react2.default.Component); + + exports.default = _class; /***/ }, -/* 3 */ +/* 8 */ /***/ function(module, exports) { @@ -757,23 +1099,23 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 4 */ +/* 9 */ /***/ function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a