patternplate-client/application/components/common/frame/handle.js

Universal javascript client application for patternplate

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.default = undefined;

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _class2, _temp2;

var _autobindDecorator = require('autobind-decorator');

var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _lodash = require('lodash');

var _queryString = require('query-string');

var _queryString2 = _interopRequireDefault(_queryString);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var Handle = (0, _autobindDecorator2.default)(_class = (_temp2 = _class2 = function (_Component) {
	(0, _inherits3.default)(Handle, _Component);

	function Handle() {
		var _ref;

		var _temp, _this, _ret;

		(0, _classCallCheck3.default)(this, Handle);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Handle.__proto__ || (0, _getPrototypeOf2.default)(Handle)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
			active: false
		}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
	}

	(0, _createClass3.default)(Handle, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			global.addEventListener('mousemove', this.handleGlobalMouseMove);
			global.addEventListener('mouseup', this.handleGlobalMouseUp);
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			global.removeEventListener('mousemove', this.handleGlobalMouseMove);
			global.removeEventListener('mouseup', this.handleGlobalMouseUp);
		}
	}, {
		key: 'handleMouseDown',
		value: function handleMouseDown(e) {
			e.preventDefault();
			this.setState({ active: true });
		}
	}, {
		key: 'handleGlobalMouseMove',
		value: function handleGlobalMouseMove(e) {
			e.preventDefault();
			if (this.state.active) {
				this.props.onDrag(e);
			}
		}
	}, {
		key: 'handleGlobalMouseUp',
		value: function handleGlobalMouseUp() {
			if (this.state.active) {
				this.setState({ active: false });
			}
		}
	}, {
		key: 'render',
		value: function render() {
			var props = this.props;

			var style = { width: props.width, height: props.height };

			var target = props.value ? props.pathname + '?' + _queryString2.default.stringify(props.query) : '';

			var className = (0, _classnames2.default)('handle', props.className, {
				'handle--active': this.state.active
			});

			return _react2.default.createElement(
				'div',
				{ className: className, style: style },
				_react2.default.createElement(
					'div',
					{
						className: 'handle__interaction',
						onMouseDown: this.handleMouseDown
					},
					this.state.active && _react2.default.createElement('div', { className: 'handle__capture' })
				)
			);
		}
	}]);
	return Handle;
}(_react.Component), _class2.defaultProps = {
	onSubmit: _lodash.noop,
	onClear: _lodash.noop,
	onDrag: _lodash.noop
}, _temp2)) || _class;

exports.default = Handle;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NvdXJjZS9hcHBsaWNhdGlvbi9jb21wb25lbnRzL2NvbW1vbi9mcmFtZS9oYW5kbGUuanMiXSwibmFtZXMiOlsiSGFuZGxlIiwic3RhdGUiLCJhY3RpdmUiLCJnbG9iYWwiLCJhZGRFdmVudExpc3RlbmVyIiwiaGFuZGxlR2xvYmFsTW91c2VNb3ZlIiwiaGFuZGxlR2xvYmFsTW91c2VVcCIsInJlbW92ZUV2ZW50TGlzdGVuZXIiLCJlIiwicHJldmVudERlZmF1bHQiLCJzZXRTdGF0ZSIsInByb3BzIiwib25EcmFnIiwic3R5bGUiLCJ3aWR0aCIsImhlaWdodCIsInRhcmdldCIsInZhbHVlIiwicGF0aG5hbWUiLCJzdHJpbmdpZnkiLCJxdWVyeSIsImNsYXNzTmFtZSIsImhhbmRsZU1vdXNlRG93biIsImRlZmF1bHRQcm9wcyIsIm9uU3VibWl0Iiwib25DbGVhciJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7OztBQUNBOzs7O0FBQ0E7O0FBQ0E7Ozs7QUFDQTs7Ozs7O0lBR3FCQSxNOzs7Ozs7Ozs7Ozs7OzswTUFpQnBCQyxLLEdBQVE7QUFDUEMsV0FBUTtBQURELEc7Ozs7O3NDQUlZO0FBQ25CQyxVQUFPQyxnQkFBUCxDQUF3QixXQUF4QixFQUFxQyxLQUFLQyxxQkFBMUM7QUFDQUYsVUFBT0MsZ0JBQVAsQ0FBd0IsU0FBeEIsRUFBbUMsS0FBS0UsbUJBQXhDO0FBQ0E7Ozt5Q0FFc0I7QUFDdEJILFVBQU9JLG1CQUFQLENBQTJCLFdBQTNCLEVBQXdDLEtBQUtGLHFCQUE3QztBQUNBRixVQUFPSSxtQkFBUCxDQUEyQixTQUEzQixFQUFzQyxLQUFLRCxtQkFBM0M7QUFDQTs7O2tDQUVlRSxDLEVBQUc7QUFDbEJBLEtBQUVDLGNBQUY7QUFDQSxRQUFLQyxRQUFMLENBQWMsRUFBQ1IsUUFBUSxJQUFULEVBQWQ7QUFDQTs7O3dDQUVxQk0sQyxFQUFHO0FBQ3hCQSxLQUFFQyxjQUFGO0FBQ0EsT0FBSSxLQUFLUixLQUFMLENBQVdDLE1BQWYsRUFBdUI7QUFDdEIsU0FBS1MsS0FBTCxDQUFXQyxNQUFYLENBQWtCSixDQUFsQjtBQUNBO0FBQ0Q7Ozt3Q0FFcUI7QUFDckIsT0FBSSxLQUFLUCxLQUFMLENBQVdDLE1BQWYsRUFBdUI7QUFDdEIsU0FBS1EsUUFBTCxDQUFjLEVBQUNSLFFBQVEsS0FBVCxFQUFkO0FBQ0E7QUFDRDs7OzJCQUVRO0FBQUEsT0FDRFMsS0FEQyxHQUNRLElBRFIsQ0FDREEsS0FEQzs7QUFFUixPQUFNRSxRQUFRLEVBQUNDLE9BQU9ILE1BQU1HLEtBQWQsRUFBcUJDLFFBQVFKLE1BQU1JLE1BQW5DLEVBQWQ7O0FBRUEsT0FBTUMsU0FBU0wsTUFBTU0sS0FBTixHQUNYTixNQUFNTyxRQURLLFNBQ08sc0JBQVlDLFNBQVosQ0FBc0JSLE1BQU1TLEtBQTVCLENBRFAsS0FBZjs7QUFHQSxPQUFNQyxZQUFZLDBCQUFLLFFBQUwsRUFBZVYsTUFBTVUsU0FBckIsRUFBZ0M7QUFDakQsc0JBQWtCLEtBQUtwQixLQUFMLENBQVdDO0FBRG9CLElBQWhDLENBQWxCOztBQUlBLFVBQ0M7QUFBQTtBQUFBLE1BQUssV0FBV21CLFNBQWhCLEVBQTJCLE9BQU9SLEtBQWxDO0FBQ0M7QUFBQTtBQUFBO0FBQ0MsaUJBQVUscUJBRFg7QUFFQyxtQkFBYSxLQUFLUztBQUZuQjtBQUtFLFVBQUtyQixLQUFMLENBQVdDLE1BQVgsSUFDQyx1Q0FBSyxXQUFVLGlCQUFmO0FBTkg7QUFERCxJQUREO0FBa0NBOzs7NkJBbkZNcUIsWSxHQUFlO0FBQ3JCQyx1QkFEcUI7QUFFckJDLHNCQUZxQjtBQUdyQmI7QUFIcUIsQzs7a0JBWEZaLE0iLCJmaWxlIjoiaGFuZGxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGF1dG9iaW5kIGZyb20gJ2F1dG9iaW5kLWRlY29yYXRvcic7XG5pbXBvcnQgam9pbiBmcm9tICdjbGFzc25hbWVzJztcbmltcG9ydCB7bm9vcH0gZnJvbSAnbG9kYXNoJztcbmltcG9ydCBxdWVyeVN0cmluZyBmcm9tICdxdWVyeS1zdHJpbmcnO1xuaW1wb3J0IFJlYWN0LCB7Q29tcG9uZW50LCBQcm9wVHlwZXMgYXMgdH0gZnJvbSAncmVhY3QnO1xuXG5AYXV0b2JpbmRcbmV4cG9ydCBkZWZhdWx0IGNsYXNzIEhhbmRsZSBleHRlbmRzIENvbXBvbmVudCB7XG5cdHN0YXRpYyBwcm9wVHlwZXMgPSB7XG5cdFx0Y2xhc3NOYW1lOiB0LnN0cmluZyxcblx0XHRvbkNsZWFyOiB0LmZ1bmMuaXNSZXF1aXJlZCxcblx0XHRvbkRyYWc6IHQuZnVuYy5pc1JlcXVpcmVkLFxuXHRcdG9uU3VibWl0OiB0LmZ1bmMuaXNSZXF1aXJlZCxcblx0XHRwYXRobmFtZTogdC5zdHJpbmcsXG5cdFx0cXVlcnk6IHQub2JqZWN0LFxuXHRcdHZhbHVlOiB0LnN0cmluZ1xuXHR9XG5cblx0c3RhdGljIGRlZmF1bHRQcm9wcyA9IHtcblx0XHRvblN1Ym1pdDogbm9vcCxcblx0XHRvbkNsZWFyOiBub29wLFxuXHRcdG9uRHJhZzogbm9vcFxuXHR9O1xuXG5cdHN0YXRlID0ge1xuXHRcdGFjdGl2ZTogZmFsc2Vcblx0fTtcblxuXHRjb21wb25lbnREaWRNb3VudCgpIHtcblx0XHRnbG9iYWwuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vtb3ZlJywgdGhpcy5oYW5kbGVHbG9iYWxNb3VzZU1vdmUpO1xuXHRcdGdsb2JhbC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZXVwJywgdGhpcy5oYW5kbGVHbG9iYWxNb3VzZVVwKTtcblx0fVxuXG5cdGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuXHRcdGdsb2JhbC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZW1vdmUnLCB0aGlzLmhhbmRsZUdsb2JhbE1vdXNlTW92ZSk7XG5cdFx0Z2xvYmFsLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNldXAnLCB0aGlzLmhhbmRsZUdsb2JhbE1vdXNlVXApO1xuXHR9XG5cblx0aGFuZGxlTW91c2VEb3duKGUpIHtcblx0XHRlLnByZXZlbnREZWZhdWx0KCk7XG5cdFx0dGhpcy5zZXRTdGF0ZSh7YWN0aXZlOiB0cnVlfSk7XG5cdH1cblxuXHRoYW5kbGVHbG9iYWxNb3VzZU1vdmUoZSkge1xuXHRcdGUucHJldmVudERlZmF1bHQoKTtcblx0XHRpZiAodGhpcy5zdGF0ZS5hY3RpdmUpIHtcblx0XHRcdHRoaXMucHJvcHMub25EcmFnKGUpO1xuXHRcdH1cblx0fVxuXG5cdGhhbmRsZUdsb2JhbE1vdXNlVXAoKSB7XG5cdFx0aWYgKHRoaXMuc3RhdGUuYWN0aXZlKSB7XG5cdFx0XHR0aGlzLnNldFN0YXRlKHthY3RpdmU6IGZhbHNlfSk7XG5cdFx0fVxuXHR9XG5cblx0cmVuZGVyKCkge1xuXHRcdGNvbnN0IHtwcm9wc30gPSB0aGlzO1xuXHRcdGNvbnN0IHN0eWxlID0ge3dpZHRoOiBwcm9wcy53aWR0aCwgaGVpZ2h0OiBwcm9wcy5oZWlnaHR9O1xuXG5cdFx0Y29uc3QgdGFyZ2V0ID0gcHJvcHMudmFsdWUgP1xuXHRcdFx0YCR7cHJvcHMucGF0aG5hbWV9PyR7cXVlcnlTdHJpbmcuc3RyaW5naWZ5KHByb3BzLnF1ZXJ5KX1gIDogYGA7XG5cblx0XHRjb25zdCBjbGFzc05hbWUgPSBqb2luKCdoYW5kbGUnLCBwcm9wcy5jbGFzc05hbWUsIHtcblx0XHRcdCdoYW5kbGUtLWFjdGl2ZSc6IHRoaXMuc3RhdGUuYWN0aXZlXG5cdFx0fSk7XG5cblx0XHRyZXR1cm4gKFxuXHRcdFx0PGRpdiBjbGFzc05hbWU9e2NsYXNzTmFtZX0gc3R5bGU9e3N0eWxlfT5cblx0XHRcdFx0PGRpdlxuXHRcdFx0XHRcdGNsYXNzTmFtZT1cImhhbmRsZV9faW50ZXJhY3Rpb25cIlxuXHRcdFx0XHRcdG9uTW91c2VEb3duPXt0aGlzLmhhbmRsZU1vdXNlRG93bn1cblx0XHRcdFx0XHQ+XG5cdFx0XHRcdFx0e1xuXHRcdFx0XHRcdFx0dGhpcy5zdGF0ZS5hY3RpdmUgJiZcblx0XHRcdFx0XHRcdFx0PGRpdiBjbGFzc05hbWU9XCJoYW5kbGVfX2NhcHR1cmVcIi8+XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHQ8L2Rpdj5cblx0XHRcdFx0ey8qXG5cdFx0XHRcdFx0KCd2YWx1ZScgaW4gdGhpcy5wcm9wcykgJiZcblx0XHRcdFx0XHRcdDxmb3JtXG5cdFx0XHRcdFx0XHRcdGNsYXNzTmFtZT1cImhhbmRsZV9fdmFsdWVcIlxuXHRcdFx0XHRcdFx0XHRtZXRob2Q9XCJnZXRcIlxuXHRcdFx0XHRcdFx0XHR0YXJnZXQ9e3RhcmdldH1cblx0XHRcdFx0XHRcdFx0b25TdWJtaXQ9e3RoaXMucHJvcHMub25TdWJtaXR9XG5cdFx0XHRcdFx0XHRcdD5cblx0XHRcdFx0XHRcdFx0PGlucHV0XG5cdFx0XHRcdFx0XHRcdFx0Y2xhc3NOYW1lPVwiaGFuZGxlX19pbnB1dFwiXG5cdFx0XHRcdFx0XHRcdFx0dmFsdWU9e3RoaXMucHJvcHMudmFsdWV9XG5cdFx0XHRcdFx0XHRcdFx0Lz5cblx0XHRcdFx0XHRcdFx0PGJ1dHRvblxuXHRcdFx0XHRcdFx0XHRcdHR5cGU9XCJyZXNldFwiXG5cdFx0XHRcdFx0XHRcdFx0Y2xhc3NOYW1lPVwiaGFuZGxlX19jbGVhclwiXG5cdFx0XHRcdFx0XHRcdFx0b25DbGljaz17dGhpcy5wcm9wcy5vbkNsZWFyfVxuXHRcdFx0XHRcdFx0XHRcdD5cblx0XHRcdFx0XHRcdFx0XHRDbGVhclxuXHRcdFx0XHRcdFx0XHQ8L2J1dHRvbj5cblx0XHRcdFx0XHRcdDwvZm9ybT5cblx0XHRcdFx0Ki99XG5cdFx0XHQ8L2Rpdj5cblx0XHQpO1xuXHR9XG59XG4iXX0=