From 1221441245c402433b16da0ef389f45610b7181c Mon Sep 17 00:00:00 2001 From: nyts Date: Sun, 25 Mar 2018 12:25:26 +0200 Subject: [PATCH 01/13] Update index.js --- src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 1ed660ae..f107be10 100755 --- a/src/index.js +++ b/src/index.js @@ -160,7 +160,7 @@ export default class Rnd extends React.Component { onResizeStop: () => {}, onDragStart: () => {}, onDrag: () => {}, - onDragStop: () => {}, + onDragStop: () => {} }; resizable: React$ElementRef | null; draggable: Draggable; @@ -194,6 +194,7 @@ export default class Rnd extends React.Component { maxWidth: props.maxWidth, maxHeight: props.maxHeight, isMounted: false, + isAbsolute:props.hasOwnProperty('absolutePos') }; this.onResizeStart = this.onResizeStart.bind(this); this.onResize = this.onResize.bind(this); @@ -424,7 +425,7 @@ export default class Rnd extends React.Component { ...this.props.style, }; // HACK: Wait for setting relative to parent element. - if (!this.state.isMounted) return
; + if (!this.state.isMounted && !this.state.isAbsolute) return
; const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line return ( Date: Sun, 25 Mar 2018 12:31:25 +0200 Subject: [PATCH 02/13] Update index.js --- src/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index f107be10..9251bbf6 100755 --- a/src/index.js +++ b/src/index.js @@ -194,7 +194,6 @@ export default class Rnd extends React.Component { maxWidth: props.maxWidth, maxHeight: props.maxHeight, isMounted: false, - isAbsolute:props.hasOwnProperty('absolutePos') }; this.onResizeStart = this.onResizeStart.bind(this); this.onResize = this.onResize.bind(this); @@ -424,8 +423,8 @@ export default class Rnd extends React.Component { ...cursorStyle, ...this.props.style, }; - // HACK: Wait for setting relative to parent element. - if (!this.state.isMounted && !this.state.isAbsolute) return
; + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return
; const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line return ( Date: Sun, 25 Mar 2018 12:50:57 +0200 Subject: [PATCH 03/13] ^ --- .gitignore | 2 +- lib/index.es5.js | 408 ++++++++++++++++++ lib/index.es5.js.flow | 478 +++++++++++++++++++++ lib/index.es5.js.map | 1 + lib/index.js | 402 ++++++++++++++++++ lib/index.js.flow | 478 +++++++++++++++++++++ lib/index.js.map | 1 + lib/index.test.js.flow | 867 +++++++++++++++++++++++++++++++++++++++ lib/react-rnd.umd.js | 410 ++++++++++++++++++ lib/react-rnd.umd.js.map | 1 + 10 files changed, 3047 insertions(+), 1 deletion(-) create mode 100644 lib/index.es5.js create mode 100644 lib/index.es5.js.flow create mode 100644 lib/index.es5.js.map create mode 100644 lib/index.js create mode 100644 lib/index.js.flow create mode 100644 lib/index.js.map create mode 100644 lib/index.test.js.flow create mode 100644 lib/react-rnd.umd.js create mode 100644 lib/react-rnd.umd.js.map diff --git a/.gitignore b/.gitignore index f9d3d667..2e7a4d6d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ example/dist/ -lib/ +#lib/ npm-debug.log diff --git a/lib/index.es5.js b/lib/index.es5.js new file mode 100644 index 00000000..34f4212a --- /dev/null +++ b/lib/index.es5.js @@ -0,0 +1,408 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } + +var React = require('react'); +var reactDom = require('react-dom'); +var Draggable = _interopDefault(require('react-draggable')); +var Resizable = _interopDefault(require('re-resizable')); + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +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 _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 inherits = function (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 possibleConstructorReturn = function (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; +}; + +var resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0 +}; + +var Rnd = function (_React$Component) { + inherits(Rnd, _React$Component); + + function Rnd(props) { + classCallCheck(this, Rnd); + + var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); + + _this.state = { + z: props.z, + original: { + x: 0, + y: 0 + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false + }; + _this.onResizeStart = _this.onResizeStart.bind(_this); + _this.onResize = _this.onResize.bind(_this); + _this.onResizeStop = _this.onResizeStop.bind(_this); + _this.onDragStart = _this.onDragStart.bind(_this); + _this.onDrag = _this.onDrag.bind(_this); + _this.onDragStop = _this.onDragStop.bind(_this); + _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); + return _this; + } + + createClass(Rnd, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.setParentPosition(); + } + }, { + key: 'getParentSize', + value: function getParentSize() { + return this.resizable.getParentSize(); + } + }, { + key: 'getMaxSizesFromProps', + value: function getMaxSizesFromProps() { + var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth: maxWidth, maxHeight: maxHeight }; + } + }, { + key: 'getSelfElement', + value: function getSelfElement() { + if (!this) return null; + return reactDom.findDOMNode(this); + } + }, { + key: 'setParentPosition', + value: function setParentPosition() { + var element = this.getSelfElement(); + if (element instanceof Element) { + var parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + }, { + key: 'onDragStart', + value: function onDragStart(e, data) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + var parentRect = parent.getBoundingClientRect(); + var parentLeft = parentRect.left; + var parentTop = parentRect.top; + var left = targetLeft - parentLeft; + var top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top: top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), + left: left + } + }); + } + }, { + key: 'onDrag', + value: function onDrag(e, data) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + }, { + key: 'onDragStop', + value: function onDragStop(e, data) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + }, { + key: 'onResizeStart', + value: function onResizeStart(e, dir, refToElement) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y } + }); + if (this.props.bounds) { + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + var self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + var _getMaxSizesFromProps = this.getMaxSizesFromProps(), + _maxWidth = _getMaxSizesFromProps.maxWidth, + _maxHeight = _getMaxSizesFromProps.maxHeight; + + var parentSize = this.getParentSize(); + if (_maxWidth && typeof _maxWidth === 'string') { + if (_maxWidth.endsWith('%')) { + var ratio = Number(_maxWidth.replace('%', '')) / 100; + _maxWidth = parentSize.width * ratio; + } else if (_maxWidth.endsWith('px')) { + _maxWidth = Number(_maxWidth.replace('px', '')); + } + } + if (_maxHeight && typeof _maxHeight === 'string') { + if (_maxHeight.endsWith('%')) { + var _ratio = Number(_maxHeight.replace('%', '')) / 100; + _maxHeight = parentSize.width * _ratio; + } else if (_maxHeight.endsWith('px')) { + _maxHeight = Number(_maxHeight.replace('px', '')); + } + } + var selfRect = self.getBoundingClientRect(); + var selfLeft = selfRect.left; + var selfTop = selfRect.top; + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + var max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); + } + if (/right/i.test(dir)) { + var _max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); + } + if (/top/i.test(dir) && this.resizable) { + var _max2 = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 + }); + } + if (/bottom/i.test(dir)) { + var _max3 = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + }, { + key: 'onResize', + value: function onResize(e, direction, refToResizableElement, delta) { + var x = void 0; + var y = void 0; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x: x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y: y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y + }); + } + } + }, { + key: 'onResizeStop', + value: function onResizeStop(e, direction, refToResizableElement, delta) { + var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), + maxWidth = _getMaxSizesFromProps2.maxWidth, + maxHeight = _getMaxSizesFromProps2.maxHeight; + + this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); + if (this.props.onResizeStop) { + var _position = { + x: this.draggable.state.x, + y: this.draggable.state.y + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); + } + } + }, { + key: 'updateSize', + value: function updateSize(size) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + }, { + key: 'updatePosition', + value: function updatePosition(position) { + this.draggable.setState(position); + } + }, { + key: 'updateZIndex', + value: function updateZIndex(z) { + this.setState({ z: z }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + var innerStyle = _extends({}, resizableStyle, { + zIndex: this.state.z + }, cursorStyle, this.props.style); + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null); + var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return React.createElement( + Draggable, + { + ref: function ref(c) { + _this2.draggable = c; + }, + handle: this.props.dragHandleClassName, + defaultPosition: this.props.default, + onStart: this.onDragStart, + onDrag: this.onDrag, + onStop: this.onDragStop, + axis: this.props.dragAxis, + disabled: this.props.disableDragging, + grid: this.props.dragGrid, + bounds: this.props.bounds ? this.state.bounds : undefined, + position: this.props.position, + enableUserSelectHack: this.props.enableUserSelectHack, + cancel: this.props.cancel + }, + React.createElement( + Resizable, + _extends({}, this.props.extendsProps, { + className: this.props.className, + ref: function ref(c) { + _this2.resizable = c; + }, + defaultSize: this.props.default, + size: this.props.size, + enable: this.props.enableResizing, + onResizeStart: this.onResizeStart, + onResize: this.onResize, + onResizeStop: this.onResizeStop, + style: innerStyle, + minWidth: this.props.minWidth, + minHeight: this.props.minHeight, + maxWidth: this.state.maxWidth, + maxHeight: maxHeight, + grid: this.props.resizeGrid, + handleWrapperClass: this.props.resizeHandleWrapperClass, + handleWrapperStyle: this.props.resizeHandleWrapperStyle, + lockAspectRatio: this.props.lockAspectRatio, + lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, + lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, + handleStyles: this.props.resizeHandleStyles, + handleClasses: this.props.resizeHandleClasses + }), + this.props.children + ) + ); + } + }]); + return Rnd; +}(React.Component); + +Rnd.defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: function onResizeStart() {}, + onResize: function onResize() {}, + onResizeStop: function onResizeStop() {}, + onDragStart: function onDragStart() {}, + onDrag: function onDrag() {}, + onDragStop: function onDragStop() {} +}; + +exports.default = Rnd; +//# sourceMappingURL=index.es5.js.map diff --git a/lib/index.es5.js.flow b/lib/index.es5.js.flow new file mode 100644 index 00000000..9251bbf6 --- /dev/null +++ b/lib/index.es5.js.flow @@ -0,0 +1,478 @@ +/* @flow */ + +import * as React from 'react'; +import { findDOMNode } from 'react-dom'; +import Draggable from 'react-draggable'; +import Resizable from 're-resizable'; +import type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable'; + +export type Grid = [number, number]; + +export type Position = { + x: number, + y: number, +}; + +export type DraggableData = { + node: HTMLElement, + deltaX: number, + deltaY: number, + lastX: number, + lastY: number, +} & Position; + +export type RndDragCallback = (e: Event, data: DraggableData) => void | false; + +export type RndResizeStartCallback = ( + e: SyntheticMouseEvent | SyntheticTouchEvent, + dir: ResizeDirection, + refToElement: React.ElementRef<'div'>, +) => void; + +export type ResizableDelta = { + width: number, + height: number, +}; + +export type RndResizeCallback = ( + e: MouseEvent | TouchEvent, + dir: ResizeDirection, + refToElement: React.ElementRef<'div'>, + delta: ResizableDelta, + position: Position, +) => void; + +type Size = { + width: string | number, + height: string | number, +}; + +type State = { + z?: number, + original: Position, + bounds: { + top: number, + right: number, + bottom: number, + left: number, + }, + maxWidth?: number | string, + maxHeight?: number | string, + isMounted: boolean, +}; + +export type ResizeEnable = { + bottom?: boolean, + bottomLeft?: boolean, + bottomRight?: boolean, + left?: boolean, + right?: boolean, + top?: boolean, + topLeft?: boolean, + topRight?: boolean, +}; + +export type HandleClasses = { + bottom?: string, + bottomLeft?: string, + bottomRight?: string, + left?: string, + right?: string, + top?: string, + topLeft?: string, + topRight?: string, +}; + +type Style = { + [key: string]: string | number, +}; + +export type HandleStyles = { + bottom?: Style, + bottomLeft?: Style, + bottomRight?: Style, + left?: Style, + right?: Style, + top?: Style, + topLeft?: Style, + topRight?: Style, +}; + +type Props = { + z?: number, + dragGrid?: Grid, + default?: { + x: number, + y: number, + } & Size, + position?: { + x: number, + y: number, + }, + size?: Size, + resizeGrid?: Grid, + bounds?: string, + onResizeStart?: RndResizeStartCallback, + onResize?: RndResizeCallback, + onResizeStop?: RndResizeCallback, + onDragStart?: RndDragCallback, + onDrag?: RndDragCallback, + onDragStop?: RndDragCallback, + className?: string, + style?: Style, + children?: React.Node, + enableResizing?: ResizeEnable, + extendsProps?: { [key: string]: any }, + resizeHandleClasses?: HandleClasses, + resizeHandleStyles?: HandleStyles, + resizeHandleWrapperClass?: string, + resizeHandleWrapperStyle?: Style, + lockAspectRatio?: boolean | number, + lockAspectRatioExtraWidth?: number, + lockAspectRatioExtraHeight?: number, + maxHeight?: number | string, + maxWidth?: number | string, + minHeight?: number | string, + minWidth?: number | string, + dragAxis?: 'x' | 'y' | 'both' | 'none', + dragHandleClassName?: string, + disableDragging?: boolean, + cancel?: boolean, + enableUserSelectHack?: boolean, + _freeBottomBounds?: boolean, // Back door for react-elastic-grid. +}; + +const resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0, +}; + +export default class Rnd extends React.Component { + static defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: () => {}, + onResize: () => {}, + onResizeStop: () => {}, + onDragStart: () => {}, + onDrag: () => {}, + onDragStop: () => {} + }; + resizable: React$ElementRef | null; + draggable: Draggable; + onResizeStart: ResizeStartCallback; + onResize: ResizeCallback; + onResizeStop: ResizeCallback; + onDragStart: RndDragCallback; + onDrag: RndDragCallback; + onDragStop: RndDragCallback; + getMaxSizesFromProps: () => { + maxWidth: number | string, + maxHeight: number | string, + }; + wrapper: HTMLElement; + parentId: string; + + constructor(props: Props) { + super(props); + this.state = { + z: props.z, + original: { + x: 0, + y: 0, + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0, + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false, + }; + this.onResizeStart = this.onResizeStart.bind(this); + this.onResize = this.onResize.bind(this); + this.onResizeStop = this.onResizeStop.bind(this); + this.onDragStart = this.onDragStart.bind(this); + this.onDrag = this.onDrag.bind(this); + this.onDragStop = this.onDragStop.bind(this); + this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this); + } + + componentWillReceiveProps(nextProps: Props) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + + componentDidMount() { + this.setParentPosition(); + } + + getParentSize(): { width: number, height: number } { + return (this.resizable: any).getParentSize(); + } + + getMaxSizesFromProps(): { + maxWidth: number | string, + maxHeight: number | string, + } { + const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth, maxHeight }; + } + + getSelfElement(): null | Element | Text { + if (!this) return null; + return findDOMNode(this); + } + + setParentPosition() { + const element = this.getSelfElement(); + if (element instanceof Element) { + const parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + + onDragStart(e: Event, data: DraggableData) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + const parent = this.resizable && this.resizable.parentNode; + const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + const targetRect = target.getBoundingClientRect(); + const targetLeft = targetRect.left; + const targetTop = targetRect.top; + const parentRect = parent.getBoundingClientRect(); + const parentLeft = parentRect.left; + const parentTop = parentRect.top; + const left = targetLeft - parentLeft; + const top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 + : top + (target.offsetHeight - this.resizable.size.height), + left, + }, + }); + } + + onDrag(e: Event, data: DraggableData) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + + onDragStop(e: Event, data: DraggableData) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + + onResizeStart( + e: SyntheticMouseEvent | SyntheticTouchEvent, + dir: ResizeDirection, + refToElement: React.ElementRef<'div'>, + ) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y }, + }); + if (this.props.bounds) { + const parent = this.resizable && this.resizable.parentNode; + const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + const self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + let { maxWidth, maxHeight } = this.getMaxSizesFromProps(); + const parentSize = this.getParentSize(); + if (maxWidth && typeof maxWidth === 'string') { + if (maxWidth.endsWith('%')) { + const ratio = Number(maxWidth.replace('%', '')) / 100; + maxWidth = parentSize.width * ratio; + } else if (maxWidth.endsWith('px')) { + maxWidth = Number(maxWidth.replace('px', '')); + } + } + if (maxHeight && typeof maxHeight === 'string') { + if (maxHeight.endsWith('%')) { + const ratio = Number(maxHeight.replace('%', '')) / 100; + maxHeight = parentSize.width * ratio; + } else if (maxHeight.endsWith('px')) { + maxHeight = Number(maxHeight.replace('px', '')); + } + } + const selfRect = self.getBoundingClientRect(); + const selfLeft = selfRect.left; + const selfTop = selfRect.top; + const targetRect = target.getBoundingClientRect(); + const targetLeft = targetRect.left; + const targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + const max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); + } + if (/right/i.test(dir)) { + const max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); + } + if (/top/i.test(dir) && this.resizable) { + const max = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: max > Number(maxHeight) ? maxHeight : max, + }); + } + if (/bottom/i.test(dir)) { + const max = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: max > Number(maxHeight) ? maxHeight : max, + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight, + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + + onResize( + e: MouseEvent | TouchEvent, + direction: ResizeDirection, + refToResizableElement: React.ElementRef<'div'>, + delta: { height: number, width: number }, + ) { + let x; + let y; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y, + }); + } + } + + onResizeStop( + e: MouseEvent | TouchEvent, + direction: ResizeDirection, + refToResizableElement: HTMLDivElement, + delta: { height: number, width: number }, + ) { + const { maxWidth, maxHeight } = this.getMaxSizesFromProps(); + this.setState({ maxWidth, maxHeight }); + if (this.props.onResizeStop) { + const position: Position = { + x: this.draggable.state.x, + y: this.draggable.state.y, + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, position); + } + } + + updateSize(size: { width: number | string, height: number | string }) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + + updatePosition(position: Position) { + this.draggable.setState(position); + } + + updateZIndex(z: number) { + this.setState({ z }); + } + + render(): React.Node { + const cursorStyle = + this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + const innerStyle = { + ...resizableStyle, + zIndex: this.state.z, + ...cursorStyle, + ...this.props.style, + }; + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return
; + const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return ( + { + this.draggable = c; + }} + handle={this.props.dragHandleClassName} + defaultPosition={this.props.default} + onStart={this.onDragStart} + onDrag={this.onDrag} + onStop={this.onDragStop} + axis={this.props.dragAxis} + disabled={this.props.disableDragging} + grid={this.props.dragGrid} + bounds={this.props.bounds ? this.state.bounds : undefined} + position={this.props.position} + enableUserSelectHack={this.props.enableUserSelectHack} + cancel={this.props.cancel} + > + | null) => { + this.resizable = c; + }} + defaultSize={this.props.default} + size={this.props.size} + enable={this.props.enableResizing} + onResizeStart={this.onResizeStart} + onResize={this.onResize} + onResizeStop={this.onResizeStop} + style={innerStyle} + minWidth={this.props.minWidth} + minHeight={this.props.minHeight} + maxWidth={this.state.maxWidth} + maxHeight={maxHeight} + grid={this.props.resizeGrid} + handleWrapperClass={this.props.resizeHandleWrapperClass} + handleWrapperStyle={this.props.resizeHandleWrapperStyle} + lockAspectRatio={this.props.lockAspectRatio} + lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth} + lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight} + handleStyles={this.props.resizeHandleStyles} + handleClasses={this.props.resizeHandleClasses} + > + {this.props.children} + + + ); + } +} diff --git a/lib/index.es5.js.map b/lib/index.es5.js.map new file mode 100644 index 00000000..0b2c97b0 --- /dev/null +++ b/lib/index.es5.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.es5.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 00000000..102a8b9f --- /dev/null +++ b/lib/index.js @@ -0,0 +1,402 @@ +import { createElement, Component } from 'react'; +import { findDOMNode } from 'react-dom'; +import Draggable from 'react-draggable'; +import Resizable from 're-resizable'; + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +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 _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 inherits = function (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 possibleConstructorReturn = function (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; +}; + +var resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0 +}; + +var Rnd = function (_React$Component) { + inherits(Rnd, _React$Component); + + function Rnd(props) { + classCallCheck(this, Rnd); + + var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); + + _this.state = { + z: props.z, + original: { + x: 0, + y: 0 + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false + }; + _this.onResizeStart = _this.onResizeStart.bind(_this); + _this.onResize = _this.onResize.bind(_this); + _this.onResizeStop = _this.onResizeStop.bind(_this); + _this.onDragStart = _this.onDragStart.bind(_this); + _this.onDrag = _this.onDrag.bind(_this); + _this.onDragStop = _this.onDragStop.bind(_this); + _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); + return _this; + } + + createClass(Rnd, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.setParentPosition(); + } + }, { + key: 'getParentSize', + value: function getParentSize() { + return this.resizable.getParentSize(); + } + }, { + key: 'getMaxSizesFromProps', + value: function getMaxSizesFromProps() { + var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth: maxWidth, maxHeight: maxHeight }; + } + }, { + key: 'getSelfElement', + value: function getSelfElement() { + if (!this) return null; + return findDOMNode(this); + } + }, { + key: 'setParentPosition', + value: function setParentPosition() { + var element = this.getSelfElement(); + if (element instanceof Element) { + var parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + }, { + key: 'onDragStart', + value: function onDragStart(e, data) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + var parentRect = parent.getBoundingClientRect(); + var parentLeft = parentRect.left; + var parentTop = parentRect.top; + var left = targetLeft - parentLeft; + var top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top: top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), + left: left + } + }); + } + }, { + key: 'onDrag', + value: function onDrag(e, data) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + }, { + key: 'onDragStop', + value: function onDragStop(e, data) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + }, { + key: 'onResizeStart', + value: function onResizeStart(e, dir, refToElement) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y } + }); + if (this.props.bounds) { + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + var self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + var _getMaxSizesFromProps = this.getMaxSizesFromProps(), + _maxWidth = _getMaxSizesFromProps.maxWidth, + _maxHeight = _getMaxSizesFromProps.maxHeight; + + var parentSize = this.getParentSize(); + if (_maxWidth && typeof _maxWidth === 'string') { + if (_maxWidth.endsWith('%')) { + var ratio = Number(_maxWidth.replace('%', '')) / 100; + _maxWidth = parentSize.width * ratio; + } else if (_maxWidth.endsWith('px')) { + _maxWidth = Number(_maxWidth.replace('px', '')); + } + } + if (_maxHeight && typeof _maxHeight === 'string') { + if (_maxHeight.endsWith('%')) { + var _ratio = Number(_maxHeight.replace('%', '')) / 100; + _maxHeight = parentSize.width * _ratio; + } else if (_maxHeight.endsWith('px')) { + _maxHeight = Number(_maxHeight.replace('px', '')); + } + } + var selfRect = self.getBoundingClientRect(); + var selfLeft = selfRect.left; + var selfTop = selfRect.top; + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + var max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); + } + if (/right/i.test(dir)) { + var _max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); + } + if (/top/i.test(dir) && this.resizable) { + var _max2 = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 + }); + } + if (/bottom/i.test(dir)) { + var _max3 = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + }, { + key: 'onResize', + value: function onResize(e, direction, refToResizableElement, delta) { + var x = void 0; + var y = void 0; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x: x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y: y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y + }); + } + } + }, { + key: 'onResizeStop', + value: function onResizeStop(e, direction, refToResizableElement, delta) { + var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), + maxWidth = _getMaxSizesFromProps2.maxWidth, + maxHeight = _getMaxSizesFromProps2.maxHeight; + + this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); + if (this.props.onResizeStop) { + var _position = { + x: this.draggable.state.x, + y: this.draggable.state.y + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); + } + } + }, { + key: 'updateSize', + value: function updateSize(size) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + }, { + key: 'updatePosition', + value: function updatePosition(position) { + this.draggable.setState(position); + } + }, { + key: 'updateZIndex', + value: function updateZIndex(z) { + this.setState({ z: z }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + var innerStyle = _extends({}, resizableStyle, { + zIndex: this.state.z + }, cursorStyle, this.props.style); + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return createElement('div', null); + var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return createElement( + Draggable, + { + ref: function ref(c) { + _this2.draggable = c; + }, + handle: this.props.dragHandleClassName, + defaultPosition: this.props.default, + onStart: this.onDragStart, + onDrag: this.onDrag, + onStop: this.onDragStop, + axis: this.props.dragAxis, + disabled: this.props.disableDragging, + grid: this.props.dragGrid, + bounds: this.props.bounds ? this.state.bounds : undefined, + position: this.props.position, + enableUserSelectHack: this.props.enableUserSelectHack, + cancel: this.props.cancel + }, + createElement( + Resizable, + _extends({}, this.props.extendsProps, { + className: this.props.className, + ref: function ref(c) { + _this2.resizable = c; + }, + defaultSize: this.props.default, + size: this.props.size, + enable: this.props.enableResizing, + onResizeStart: this.onResizeStart, + onResize: this.onResize, + onResizeStop: this.onResizeStop, + style: innerStyle, + minWidth: this.props.minWidth, + minHeight: this.props.minHeight, + maxWidth: this.state.maxWidth, + maxHeight: maxHeight, + grid: this.props.resizeGrid, + handleWrapperClass: this.props.resizeHandleWrapperClass, + handleWrapperStyle: this.props.resizeHandleWrapperStyle, + lockAspectRatio: this.props.lockAspectRatio, + lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, + lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, + handleStyles: this.props.resizeHandleStyles, + handleClasses: this.props.resizeHandleClasses + }), + this.props.children + ) + ); + } + }]); + return Rnd; +}(Component); + +Rnd.defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: function onResizeStart() {}, + onResize: function onResize() {}, + onResizeStop: function onResizeStop() {}, + onDragStart: function onDragStart() {}, + onDrag: function onDrag() {}, + onDragStop: function onDragStop() {} +}; + +export default Rnd; +//# sourceMappingURL=index.js.map diff --git a/lib/index.js.flow b/lib/index.js.flow new file mode 100644 index 00000000..9251bbf6 --- /dev/null +++ b/lib/index.js.flow @@ -0,0 +1,478 @@ +/* @flow */ + +import * as React from 'react'; +import { findDOMNode } from 'react-dom'; +import Draggable from 'react-draggable'; +import Resizable from 're-resizable'; +import type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable'; + +export type Grid = [number, number]; + +export type Position = { + x: number, + y: number, +}; + +export type DraggableData = { + node: HTMLElement, + deltaX: number, + deltaY: number, + lastX: number, + lastY: number, +} & Position; + +export type RndDragCallback = (e: Event, data: DraggableData) => void | false; + +export type RndResizeStartCallback = ( + e: SyntheticMouseEvent | SyntheticTouchEvent, + dir: ResizeDirection, + refToElement: React.ElementRef<'div'>, +) => void; + +export type ResizableDelta = { + width: number, + height: number, +}; + +export type RndResizeCallback = ( + e: MouseEvent | TouchEvent, + dir: ResizeDirection, + refToElement: React.ElementRef<'div'>, + delta: ResizableDelta, + position: Position, +) => void; + +type Size = { + width: string | number, + height: string | number, +}; + +type State = { + z?: number, + original: Position, + bounds: { + top: number, + right: number, + bottom: number, + left: number, + }, + maxWidth?: number | string, + maxHeight?: number | string, + isMounted: boolean, +}; + +export type ResizeEnable = { + bottom?: boolean, + bottomLeft?: boolean, + bottomRight?: boolean, + left?: boolean, + right?: boolean, + top?: boolean, + topLeft?: boolean, + topRight?: boolean, +}; + +export type HandleClasses = { + bottom?: string, + bottomLeft?: string, + bottomRight?: string, + left?: string, + right?: string, + top?: string, + topLeft?: string, + topRight?: string, +}; + +type Style = { + [key: string]: string | number, +}; + +export type HandleStyles = { + bottom?: Style, + bottomLeft?: Style, + bottomRight?: Style, + left?: Style, + right?: Style, + top?: Style, + topLeft?: Style, + topRight?: Style, +}; + +type Props = { + z?: number, + dragGrid?: Grid, + default?: { + x: number, + y: number, + } & Size, + position?: { + x: number, + y: number, + }, + size?: Size, + resizeGrid?: Grid, + bounds?: string, + onResizeStart?: RndResizeStartCallback, + onResize?: RndResizeCallback, + onResizeStop?: RndResizeCallback, + onDragStart?: RndDragCallback, + onDrag?: RndDragCallback, + onDragStop?: RndDragCallback, + className?: string, + style?: Style, + children?: React.Node, + enableResizing?: ResizeEnable, + extendsProps?: { [key: string]: any }, + resizeHandleClasses?: HandleClasses, + resizeHandleStyles?: HandleStyles, + resizeHandleWrapperClass?: string, + resizeHandleWrapperStyle?: Style, + lockAspectRatio?: boolean | number, + lockAspectRatioExtraWidth?: number, + lockAspectRatioExtraHeight?: number, + maxHeight?: number | string, + maxWidth?: number | string, + minHeight?: number | string, + minWidth?: number | string, + dragAxis?: 'x' | 'y' | 'both' | 'none', + dragHandleClassName?: string, + disableDragging?: boolean, + cancel?: boolean, + enableUserSelectHack?: boolean, + _freeBottomBounds?: boolean, // Back door for react-elastic-grid. +}; + +const resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0, +}; + +export default class Rnd extends React.Component { + static defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: () => {}, + onResize: () => {}, + onResizeStop: () => {}, + onDragStart: () => {}, + onDrag: () => {}, + onDragStop: () => {} + }; + resizable: React$ElementRef | null; + draggable: Draggable; + onResizeStart: ResizeStartCallback; + onResize: ResizeCallback; + onResizeStop: ResizeCallback; + onDragStart: RndDragCallback; + onDrag: RndDragCallback; + onDragStop: RndDragCallback; + getMaxSizesFromProps: () => { + maxWidth: number | string, + maxHeight: number | string, + }; + wrapper: HTMLElement; + parentId: string; + + constructor(props: Props) { + super(props); + this.state = { + z: props.z, + original: { + x: 0, + y: 0, + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0, + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false, + }; + this.onResizeStart = this.onResizeStart.bind(this); + this.onResize = this.onResize.bind(this); + this.onResizeStop = this.onResizeStop.bind(this); + this.onDragStart = this.onDragStart.bind(this); + this.onDrag = this.onDrag.bind(this); + this.onDragStop = this.onDragStop.bind(this); + this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this); + } + + componentWillReceiveProps(nextProps: Props) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + + componentDidMount() { + this.setParentPosition(); + } + + getParentSize(): { width: number, height: number } { + return (this.resizable: any).getParentSize(); + } + + getMaxSizesFromProps(): { + maxWidth: number | string, + maxHeight: number | string, + } { + const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth, maxHeight }; + } + + getSelfElement(): null | Element | Text { + if (!this) return null; + return findDOMNode(this); + } + + setParentPosition() { + const element = this.getSelfElement(); + if (element instanceof Element) { + const parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + + onDragStart(e: Event, data: DraggableData) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + const parent = this.resizable && this.resizable.parentNode; + const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + const targetRect = target.getBoundingClientRect(); + const targetLeft = targetRect.left; + const targetTop = targetRect.top; + const parentRect = parent.getBoundingClientRect(); + const parentLeft = parentRect.left; + const parentTop = parentRect.top; + const left = targetLeft - parentLeft; + const top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 + : top + (target.offsetHeight - this.resizable.size.height), + left, + }, + }); + } + + onDrag(e: Event, data: DraggableData) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + + onDragStop(e: Event, data: DraggableData) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + + onResizeStart( + e: SyntheticMouseEvent | SyntheticTouchEvent, + dir: ResizeDirection, + refToElement: React.ElementRef<'div'>, + ) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y }, + }); + if (this.props.bounds) { + const parent = this.resizable && this.resizable.parentNode; + const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + const self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + let { maxWidth, maxHeight } = this.getMaxSizesFromProps(); + const parentSize = this.getParentSize(); + if (maxWidth && typeof maxWidth === 'string') { + if (maxWidth.endsWith('%')) { + const ratio = Number(maxWidth.replace('%', '')) / 100; + maxWidth = parentSize.width * ratio; + } else if (maxWidth.endsWith('px')) { + maxWidth = Number(maxWidth.replace('px', '')); + } + } + if (maxHeight && typeof maxHeight === 'string') { + if (maxHeight.endsWith('%')) { + const ratio = Number(maxHeight.replace('%', '')) / 100; + maxHeight = parentSize.width * ratio; + } else if (maxHeight.endsWith('px')) { + maxHeight = Number(maxHeight.replace('px', '')); + } + } + const selfRect = self.getBoundingClientRect(); + const selfLeft = selfRect.left; + const selfTop = selfRect.top; + const targetRect = target.getBoundingClientRect(); + const targetLeft = targetRect.left; + const targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + const max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); + } + if (/right/i.test(dir)) { + const max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); + } + if (/top/i.test(dir) && this.resizable) { + const max = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: max > Number(maxHeight) ? maxHeight : max, + }); + } + if (/bottom/i.test(dir)) { + const max = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: max > Number(maxHeight) ? maxHeight : max, + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight, + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + + onResize( + e: MouseEvent | TouchEvent, + direction: ResizeDirection, + refToResizableElement: React.ElementRef<'div'>, + delta: { height: number, width: number }, + ) { + let x; + let y; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y, + }); + } + } + + onResizeStop( + e: MouseEvent | TouchEvent, + direction: ResizeDirection, + refToResizableElement: HTMLDivElement, + delta: { height: number, width: number }, + ) { + const { maxWidth, maxHeight } = this.getMaxSizesFromProps(); + this.setState({ maxWidth, maxHeight }); + if (this.props.onResizeStop) { + const position: Position = { + x: this.draggable.state.x, + y: this.draggable.state.y, + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, position); + } + } + + updateSize(size: { width: number | string, height: number | string }) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + + updatePosition(position: Position) { + this.draggable.setState(position); + } + + updateZIndex(z: number) { + this.setState({ z }); + } + + render(): React.Node { + const cursorStyle = + this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + const innerStyle = { + ...resizableStyle, + zIndex: this.state.z, + ...cursorStyle, + ...this.props.style, + }; + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return
; + const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return ( + { + this.draggable = c; + }} + handle={this.props.dragHandleClassName} + defaultPosition={this.props.default} + onStart={this.onDragStart} + onDrag={this.onDrag} + onStop={this.onDragStop} + axis={this.props.dragAxis} + disabled={this.props.disableDragging} + grid={this.props.dragGrid} + bounds={this.props.bounds ? this.state.bounds : undefined} + position={this.props.position} + enableUserSelectHack={this.props.enableUserSelectHack} + cancel={this.props.cancel} + > + | null) => { + this.resizable = c; + }} + defaultSize={this.props.default} + size={this.props.size} + enable={this.props.enableResizing} + onResizeStart={this.onResizeStart} + onResize={this.onResize} + onResizeStop={this.onResizeStop} + style={innerStyle} + minWidth={this.props.minWidth} + minHeight={this.props.minHeight} + maxWidth={this.state.maxWidth} + maxHeight={maxHeight} + grid={this.props.resizeGrid} + handleWrapperClass={this.props.resizeHandleWrapperClass} + handleWrapperStyle={this.props.resizeHandleWrapperStyle} + lockAspectRatio={this.props.lockAspectRatio} + lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth} + lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight} + handleStyles={this.props.resizeHandleStyles} + handleClasses={this.props.resizeHandleClasses} + > + {this.props.children} + + + ); + } +} diff --git a/lib/index.js.map b/lib/index.js.map new file mode 100644 index 00000000..ab402dcb --- /dev/null +++ b/lib/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/index.test.js.flow b/lib/index.test.js.flow new file mode 100644 index 00000000..b310f304 --- /dev/null +++ b/lib/index.test.js.flow @@ -0,0 +1,867 @@ +/* eslint-disable */ + +import test from 'ava'; +import React from 'react'; +import { spy } from 'sinon'; +import Enzyme, { mount } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import Rnd from './'; + +Enzyme.configure({ adapter: new Adapter() }); + +const mouseMove = (x, y) => { + const event = document.createEvent('MouseEvents'); + event.initMouseEvent('mousemove', true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null); + document.dispatchEvent(event); + return event; +}; + +const mouseUp = (x, y) => { + const event = document.createEvent('MouseEvents'); + event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null); + document.dispatchEvent(event); + return event; +}; + +test.beforeEach(async t => { + const div = document.createElement('div'); + document.body.appendChild(div); +}); + +test('should mount without error', async t => { + const rnd = mount(); + t.truthy(!!rnd); +}); + +test('Should custom class name be applied to box', async t => { + const rnd = mount(); + t.truthy(rnd.getDOMNode().classList.contains('custom-class-name')); +}); + +test('Should set handler className', async t => { + const rnd = mount( + , + ); + const handlers = rnd.find('.handler'); + // FIXME: Is it a enzyme 3.x bug ? I can not understand why handlers.length equals 16. + // When use enzyme v2.x this test is passed... + // t.is(handlers.length, 8); + t.is(handlers.length, 16); +}); + +test('Should not render resizer when enable props all false', async t => { + const rnd = mount( + , + ); + const handlers = rnd.find('.handler'); + t.is(handlers.length, 0); +}); + +test('should call onDragStart when start dragging', async t => { + const onDragStart = spy(); + const rnd = mount(); + rnd + .find('div') + .at(0) + .simulate('mousedown'); + t.is(onDragStart.callCount, 1); + t.is(onDragStart.firstCall.args[0].type, 'mousedown'); + t.is(onDragStart.firstCall.args[1].x, 100); + t.is(onDragStart.firstCall.args[1].y, 100); +}); + +test('should call onDrag when dragging', async t => { + const onDrag = spy(); + const rnd = mount(); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + t.is(onDrag.callCount, 1); + t.is(onDrag.firstCall.args[1].x, 300); + t.is(onDrag.firstCall.args[1].y, 320); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(300px, 320px)'), + -1, + ); +}); + +test('should call onDragStop when drag stop', async t => { + const onDragStop = spy(); + const rnd = mount(); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + mouseUp(100, 120); + t.is(onDragStop.callCount, 1); + t.is(onDragStop.firstCall.args[1].x, 200); + t.is(onDragStop.firstCall.args[1].y, 220); +}); + +test('should dragging disabled when axis equals none', async t => { + const onDrag = spy(); + const rnd = mount(, { + attachTo: document.querySelector('div'), + }); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + t.is(onDrag.callCount, 1); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(100px, 100px)'), + -1, + ); +}); + +test('should enable dragging only x when axis equals x', async t => { + const onDrag = spy(); + const rnd = mount(, { + attachTo: document.querySelector('div'), + }); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + t.is(onDrag.callCount, 1); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(300px, 100px)'), + -1, + ); +}); + +test('should enable dragging only y when axis equals y', async t => { + const onDrag = spy(); + const rnd = mount(, { + attachTo: document.querySelector('div'), + }); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + t.is(onDrag.callCount, 1); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(100px, 320px)'), + -1, + ); +}); + +test('should enable dragging both x & y when axis equals both', async t => { + const onDrag = spy(); + const rnd = mount(, { + attachTo: document.querySelector('div'), + }); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + t.is(onDrag.callCount, 1); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(300px, 320px)'), + -1, + ); +}); + +test('should snap when dragging smaller than threshold', async t => { + const rnd = mount(, { + attachTo: document.querySelector('div'), + }); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(14, 49); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(100px, 100px)'), + -1, + ); +}); + +test('should snap when dragging larger than threshold', async t => { + const rnd = mount(, { + attachTo: document.querySelector('div'), + }); + rnd + .find('div') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(15, 50); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(130px, 200px)'), + -1, + ); +}); + +test('should limit position by parent bounds', async t => { + const rnd = mount( +
+ +
, + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div') + .at(0) + .childAt(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(1000, 1000); + t.not( + rnd + .childAt(0) + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(700px, 500px)'), + -1, + ); +}); + +test('should limit position by selector bounds', async t => { + const rnd = mount( +
+
+ +
+
, + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div') + .at(0) + .childAt(0) + .childAt(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(2000, 2000); + t.not( + rnd + .childAt(0) + .childAt(0) + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(900px, 700px)'), + -1, + ); +}); + +test('Should box width and height equal 100px', async t => { + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + t.is(rnd.getDOMNode().style.width, '100px'); + t.is(rnd.getDOMNode().style.height, '100px'); +}); + +test('Should call onResizeStart when mousedown', async t => { + const onResizeStart = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + t.is(onResizeStart.callCount, 1); + t.is(onResizeStart.getCall(0).args[1], 'right'); +}); + +test('should call onResize with expected args when resize direction right', async t => { + const onResize = spy(); + const onResizeStart = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + t.is(onResize.callCount, 1); + t.truthy(onResize.getCall(0).args[0] instanceof Event); + t.is(onResize.getCall(0).args[1], 'right'); + t.deepEqual(onResize.getCall(0).args[2].clientWidth, 300); + t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); + t.deepEqual(onResize.getCall(0).args[3], { width: 200, height: 0 }); +}); + +test('should call onResizeStop with expected args when resize direction right', async t => { + const onResize = spy(); + const onResizeStop = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(200, 220); + mouseUp(200, 220); + t.is(onResizeStop.callCount, 1); + t.truthy(onResize.getCall(0).args[0] instanceof Event); + t.is(onResize.getCall(0).args[1], 'right'); + t.deepEqual(onResize.getCall(0).args[2].clientWidth, 300); + t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); + t.deepEqual(onResize.getCall(0).args[3], { width: 200, height: 0 }); +}); + +test('should move x when resizing left', async t => { + const onResize = spy(); + const onResizeStart = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(-50, 0); + t.is(onResize.callCount, 1); + t.is(onResize.getCall(0).args[1], 'left'); + t.deepEqual(onResize.getCall(0).args[2].clientWidth, 150); + t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); + t.deepEqual(onResize.getCall(0).args[3], { width: 50, height: 0 }); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(50px, 100px)'), + -1, + ); +}); + +test('should move y when resizing top', async t => { + const onResize = spy(); + const onResizeStart = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(0, -50); + t.is(onResize.callCount, 1); + t.is(onResize.getCall(0).args[1], 'top'); + t.deepEqual(onResize.getCall(0).args[2].clientWidth, 100); + t.deepEqual(onResize.getCall(0).args[2].clientHeight, 150); + t.deepEqual(onResize.getCall(0).args[3], { width: 0, height: 50 }); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(100px, 50px)'), + -1, + ); +}); + +test('should snapped by original grid when x axis resizing smaller then threshold', async t => { + const onResize = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(9, 0); + t.deepEqual(onResize.getCall(0).args[2].clientWidth, 100); +}); + +test('should snapped by original grid when x axis resizing larger then threshold', async t => { + const onResize = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(10, 0); + t.deepEqual(onResize.getCall(0).args[2].clientWidth, 120); +}); + +test('should snapped by original grid when y axis resizing smaller then threshold', async t => { + const onResize = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(0, 9); + t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); +}); + +test('should snapped by original grid when y axis resizing larger then threshold', async t => { + const onResize = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(0, 10); + t.deepEqual(onResize.getCall(0).args[2].clientHeight, 120); +}); + +test('should snapped by original grid when y axis resizing larger then threshold', async t => { + const onResize = spy(); + const rnd = mount( + , + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(20, 10); + // TODO: It'a resizable-box grid bug?? + t.deepEqual(onResize.getCall(0).args[2].clientWidth, 120); + t.deepEqual(onResize.getCall(0).args[2].clientHeight, 120); +}); + +test('should clamped by parent size', async t => { + const rnd = mount( +
+ +
, + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(1200, 1200); + t.is(rnd.childAt(0).getDOMNode().style.width, '800px'); + t.is(rnd.childAt(0).getDOMNode().style.height, '600px'); +}); + +test('should clamped by selector size', async t => { + const rnd = mount( +
+
+ +
+
, + { attachTo: document.querySelector('div') }, + ); + rnd + .find('div.handler') + .at(0) + .simulate('mousedown', { clientX: 0, clientY: 0 }); + mouseMove(2000, 2000); + t.is( + rnd + .childAt(0) + .childAt(0) + .getDOMNode().style.width, + '1000px', + ); + t.is( + rnd + .childAt(0) + .childAt(0) + .getDOMNode().style.height, + '800px', + ); +}); + +test('should get rnd updated when updatePosition invoked', async t => { + const rnd = mount(); + rnd.instance().updatePosition({ x: 200, y: 300 }); + t.not( + rnd + .getDOMNode() + .getAttribute('style') + .indexOf('transform: translate(200px, 300px)'), + -1, + ); +}); + +test('should get rnd updated when updateSize invoked', async t => { + const rnd = mount(); + rnd.instance().updateSize({ width: 200, height: 300 }); + t.is(rnd.getDOMNode().style.width, '200px'); + t.is(rnd.getDOMNode().style.height, '300px'); +}); + +test('should get rnd updated when updateZIndex invoked', async t => { + const rnd = mount(); + rnd.instance().updateZIndex(300); + t.is( + rnd + .find('div') + .at(0) + .getDOMNode().style.zIndex, + '300', + ); +}); diff --git a/lib/react-rnd.umd.js b/lib/react-rnd.umd.js new file mode 100644 index 00000000..54bc465b --- /dev/null +++ b/lib/react-rnd.umd.js @@ -0,0 +1,410 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) : + typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react-draggable', 're-resizable'], factory) : + (factory((global['react-rnd'] = {}),global.React,global.ReactDOM,global.Draggable,global.Resizable)); +}(this, (function (exports,React,reactDom,Draggable,Resizable) { 'use strict'; + + Draggable = Draggable && Draggable.hasOwnProperty('default') ? Draggable['default'] : Draggable; + Resizable = Resizable && Resizable.hasOwnProperty('default') ? Resizable['default'] : Resizable; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + 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 _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 inherits = function (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 possibleConstructorReturn = function (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; + }; + + var resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0 + }; + + var Rnd = function (_React$Component) { + inherits(Rnd, _React$Component); + + function Rnd(props) { + classCallCheck(this, Rnd); + + var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); + + _this.state = { + z: props.z, + original: { + x: 0, + y: 0 + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false + }; + _this.onResizeStart = _this.onResizeStart.bind(_this); + _this.onResize = _this.onResize.bind(_this); + _this.onResizeStop = _this.onResizeStop.bind(_this); + _this.onDragStart = _this.onDragStart.bind(_this); + _this.onDrag = _this.onDrag.bind(_this); + _this.onDragStop = _this.onDragStop.bind(_this); + _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); + return _this; + } + + createClass(Rnd, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.setParentPosition(); + } + }, { + key: 'getParentSize', + value: function getParentSize() { + return this.resizable.getParentSize(); + } + }, { + key: 'getMaxSizesFromProps', + value: function getMaxSizesFromProps() { + var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth: maxWidth, maxHeight: maxHeight }; + } + }, { + key: 'getSelfElement', + value: function getSelfElement() { + if (!this) return null; + return reactDom.findDOMNode(this); + } + }, { + key: 'setParentPosition', + value: function setParentPosition() { + var element = this.getSelfElement(); + if (element instanceof Element) { + var parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + }, { + key: 'onDragStart', + value: function onDragStart(e, data) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + var parentRect = parent.getBoundingClientRect(); + var parentLeft = parentRect.left; + var parentTop = parentRect.top; + var left = targetLeft - parentLeft; + var top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top: top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), + left: left + } + }); + } + }, { + key: 'onDrag', + value: function onDrag(e, data) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + }, { + key: 'onDragStop', + value: function onDragStop(e, data) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + }, { + key: 'onResizeStart', + value: function onResizeStart(e, dir, refToElement) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y } + }); + if (this.props.bounds) { + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + var self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + var _getMaxSizesFromProps = this.getMaxSizesFromProps(), + _maxWidth = _getMaxSizesFromProps.maxWidth, + _maxHeight = _getMaxSizesFromProps.maxHeight; + + var parentSize = this.getParentSize(); + if (_maxWidth && typeof _maxWidth === 'string') { + if (_maxWidth.endsWith('%')) { + var ratio = Number(_maxWidth.replace('%', '')) / 100; + _maxWidth = parentSize.width * ratio; + } else if (_maxWidth.endsWith('px')) { + _maxWidth = Number(_maxWidth.replace('px', '')); + } + } + if (_maxHeight && typeof _maxHeight === 'string') { + if (_maxHeight.endsWith('%')) { + var _ratio = Number(_maxHeight.replace('%', '')) / 100; + _maxHeight = parentSize.width * _ratio; + } else if (_maxHeight.endsWith('px')) { + _maxHeight = Number(_maxHeight.replace('px', '')); + } + } + var selfRect = self.getBoundingClientRect(); + var selfLeft = selfRect.left; + var selfTop = selfRect.top; + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + var max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); + } + if (/right/i.test(dir)) { + var _max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); + } + if (/top/i.test(dir) && this.resizable) { + var _max2 = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 + }); + } + if (/bottom/i.test(dir)) { + var _max3 = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + }, { + key: 'onResize', + value: function onResize(e, direction, refToResizableElement, delta) { + var x = void 0; + var y = void 0; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x: x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y: y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y + }); + } + } + }, { + key: 'onResizeStop', + value: function onResizeStop(e, direction, refToResizableElement, delta) { + var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), + maxWidth = _getMaxSizesFromProps2.maxWidth, + maxHeight = _getMaxSizesFromProps2.maxHeight; + + this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); + if (this.props.onResizeStop) { + var _position = { + x: this.draggable.state.x, + y: this.draggable.state.y + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); + } + } + }, { + key: 'updateSize', + value: function updateSize(size) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + }, { + key: 'updatePosition', + value: function updatePosition(position) { + this.draggable.setState(position); + } + }, { + key: 'updateZIndex', + value: function updateZIndex(z) { + this.setState({ z: z }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + var innerStyle = _extends({}, resizableStyle, { + zIndex: this.state.z + }, cursorStyle, this.props.style); + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null); + var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return React.createElement( + Draggable, + { + ref: function ref(c) { + _this2.draggable = c; + }, + handle: this.props.dragHandleClassName, + defaultPosition: this.props.default, + onStart: this.onDragStart, + onDrag: this.onDrag, + onStop: this.onDragStop, + axis: this.props.dragAxis, + disabled: this.props.disableDragging, + grid: this.props.dragGrid, + bounds: this.props.bounds ? this.state.bounds : undefined, + position: this.props.position, + enableUserSelectHack: this.props.enableUserSelectHack, + cancel: this.props.cancel + }, + React.createElement( + Resizable, + _extends({}, this.props.extendsProps, { + className: this.props.className, + ref: function ref(c) { + _this2.resizable = c; + }, + defaultSize: this.props.default, + size: this.props.size, + enable: this.props.enableResizing, + onResizeStart: this.onResizeStart, + onResize: this.onResize, + onResizeStop: this.onResizeStop, + style: innerStyle, + minWidth: this.props.minWidth, + minHeight: this.props.minHeight, + maxWidth: this.state.maxWidth, + maxHeight: maxHeight, + grid: this.props.resizeGrid, + handleWrapperClass: this.props.resizeHandleWrapperClass, + handleWrapperStyle: this.props.resizeHandleWrapperStyle, + lockAspectRatio: this.props.lockAspectRatio, + lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, + lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, + handleStyles: this.props.resizeHandleStyles, + handleClasses: this.props.resizeHandleClasses + }), + this.props.children + ) + ); + } + }]); + return Rnd; + }(React.Component); + + Rnd.defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: function onResizeStart() {}, + onResize: function onResize() {}, + onResizeStop: function onResizeStop() {}, + onDragStart: function onDragStart() {}, + onDrag: function onDrag() {}, + onDragStop: function onDragStop() {} + }; + + exports.default = Rnd; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); +//# sourceMappingURL=react-rnd.umd.js.map diff --git a/lib/react-rnd.umd.js.map b/lib/react-rnd.umd.js.map new file mode 100644 index 00000000..6d80248a --- /dev/null +++ b/lib/react-rnd.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"react-rnd.umd.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","width","height","display","position","top","left","Rnd","props","state","z","original","x","y","bounds","right","bottom","maxWidth","maxHeight","isMounted","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","style","e","data","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","targetTop","parentRect","parentLeft","parentTop","offsetWidth","size","_freeBottomBounds","offsetHeight","dir","refToElement","stopPropagation","draggable","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","zIndex","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file From 5d9fa3f53c8e5c1feeea2d3cbbc2ad657484e07a Mon Sep 17 00:00:00 2001 From: nathb Date: Sun, 25 Mar 2018 14:16:22 +0200 Subject: [PATCH 04/13] ^ --- src/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 9251bbf6..a90b8d6c 100755 --- a/src/index.js +++ b/src/index.js @@ -160,7 +160,8 @@ export default class Rnd extends React.Component { onResizeStop: () => {}, onDragStart: () => {}, onDrag: () => {}, - onDragStop: () => {} + onDragStop: () => {}, + absolutePos:false, }; resizable: React$ElementRef | null; draggable: Draggable; @@ -423,8 +424,9 @@ export default class Rnd extends React.Component { ...cursorStyle, ...this.props.style, }; - // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). - if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return
; + // HACK: Wait for setting relative to parent element + // skip if props.absolutePos == true ( SSR need initial render ). + if (!this.state.isMounted && !this.props.absolutePos) return
; const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line return ( Date: Sun, 25 Mar 2018 14:17:47 +0200 Subject: [PATCH 05/13] ^ --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 2e7a4d6d..f9d3d667 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ example/dist/ -#lib/ +lib/ npm-debug.log From 0078a31b9d7a79fa8a98f3fb592d873853bceb99 Mon Sep 17 00:00:00 2001 From: nathb Date: Sun, 25 Mar 2018 14:20:52 +0200 Subject: [PATCH 06/13] ^ --- lib/index.es5.js | 408 -------------------------------------- lib/index.es5.js.map | 1 - lib/index.js | 402 -------------------------------------- lib/index.js.map | 1 - lib/react-rnd.umd.js | 410 --------------------------------------- lib/react-rnd.umd.js.map | 1 - src/index.js | 2 +- 7 files changed, 1 insertion(+), 1224 deletions(-) delete mode 100644 lib/index.es5.js delete mode 100644 lib/index.es5.js.map delete mode 100644 lib/index.js delete mode 100644 lib/index.js.map delete mode 100644 lib/react-rnd.umd.js delete mode 100644 lib/react-rnd.umd.js.map diff --git a/lib/index.es5.js b/lib/index.es5.js deleted file mode 100644 index 34f4212a..00000000 --- a/lib/index.es5.js +++ /dev/null @@ -1,408 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } - -var React = require('react'); -var reactDom = require('react-dom'); -var Draggable = _interopDefault(require('react-draggable')); -var Resizable = _interopDefault(require('re-resizable')); - -var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } -}; - -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 _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 inherits = function (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 possibleConstructorReturn = function (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; -}; - -var resizableStyle = { - width: 'auto', - height: 'auto', - display: 'inline-block', - position: 'absolute', - top: 0, - left: 0 -}; - -var Rnd = function (_React$Component) { - inherits(Rnd, _React$Component); - - function Rnd(props) { - classCallCheck(this, Rnd); - - var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); - - _this.state = { - z: props.z, - original: { - x: 0, - y: 0 - }, - bounds: { - top: 0, - right: 0, - bottom: 0, - left: 0 - }, - maxWidth: props.maxWidth, - maxHeight: props.maxHeight, - isMounted: false - }; - _this.onResizeStart = _this.onResizeStart.bind(_this); - _this.onResize = _this.onResize.bind(_this); - _this.onResizeStop = _this.onResizeStop.bind(_this); - _this.onDragStart = _this.onDragStart.bind(_this); - _this.onDrag = _this.onDrag.bind(_this); - _this.onDragStop = _this.onDragStop.bind(_this); - _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); - return _this; - } - - createClass(Rnd, [{ - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (this.props.z !== nextProps.z) { - this.setState({ z: nextProps.z }); - } - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this.setParentPosition(); - } - }, { - key: 'getParentSize', - value: function getParentSize() { - return this.resizable.getParentSize(); - } - }, { - key: 'getMaxSizesFromProps', - value: function getMaxSizesFromProps() { - var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; - var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; - return { maxWidth: maxWidth, maxHeight: maxHeight }; - } - }, { - key: 'getSelfElement', - value: function getSelfElement() { - if (!this) return null; - return reactDom.findDOMNode(this); - } - }, { - key: 'setParentPosition', - value: function setParentPosition() { - var element = this.getSelfElement(); - if (element instanceof Element) { - var parent = element.parentNode; - if (!parent || typeof window === 'undefined') return; - if (!(parent instanceof HTMLElement)) return; - if (getComputedStyle(parent).position !== 'static') { - this.setState({ isMounted: true }); - return; - } - parent.style.position = 'relative'; - this.setState({ isMounted: true }); - } - } - }, { - key: 'onDragStart', - value: function onDragStart(e, data) { - if (this.props.onDragStart) { - this.props.onDragStart(e, data); - } - if (!this.props.bounds) return; - var parent = this.resizable && this.resizable.parentNode; - var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { - return; - } - var targetRect = target.getBoundingClientRect(); - var targetLeft = targetRect.left; - var targetTop = targetRect.top; - var parentRect = parent.getBoundingClientRect(); - var parentLeft = parentRect.left; - var parentTop = parentRect.top; - var left = targetLeft - parentLeft; - var top = targetTop - parentTop; - if (!this.resizable) return; - this.setState({ - bounds: { - top: top, - right: left + (target.offsetWidth - this.resizable.size.width), - bottom: this.props._freeBottomBounds // eslint-disable-line - ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), - left: left - } - }); - } - }, { - key: 'onDrag', - value: function onDrag(e, data) { - if (this.props.onDrag) { - this.props.onDrag(e, data); - } - } - }, { - key: 'onDragStop', - value: function onDragStop(e, data) { - if (this.props.onDragStop) { - this.props.onDragStop(e, data); - } - } - }, { - key: 'onResizeStart', - value: function onResizeStart(e, dir, refToElement) { - e.stopPropagation(); - this.setState({ - original: { x: this.draggable.state.x, y: this.draggable.state.y } - }); - if (this.props.bounds) { - var parent = this.resizable && this.resizable.parentNode; - var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - var self = this.getSelfElement(); - if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { - var _getMaxSizesFromProps = this.getMaxSizesFromProps(), - _maxWidth = _getMaxSizesFromProps.maxWidth, - _maxHeight = _getMaxSizesFromProps.maxHeight; - - var parentSize = this.getParentSize(); - if (_maxWidth && typeof _maxWidth === 'string') { - if (_maxWidth.endsWith('%')) { - var ratio = Number(_maxWidth.replace('%', '')) / 100; - _maxWidth = parentSize.width * ratio; - } else if (_maxWidth.endsWith('px')) { - _maxWidth = Number(_maxWidth.replace('px', '')); - } - } - if (_maxHeight && typeof _maxHeight === 'string') { - if (_maxHeight.endsWith('%')) { - var _ratio = Number(_maxHeight.replace('%', '')) / 100; - _maxHeight = parentSize.width * _ratio; - } else if (_maxHeight.endsWith('px')) { - _maxHeight = Number(_maxHeight.replace('px', '')); - } - } - var selfRect = self.getBoundingClientRect(); - var selfLeft = selfRect.left; - var selfTop = selfRect.top; - var targetRect = target.getBoundingClientRect(); - var targetLeft = targetRect.left; - var targetTop = targetRect.top; - if (/left/i.test(dir) && this.resizable) { - var max = selfLeft - targetLeft + this.resizable.size.width; - this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); - } - if (/right/i.test(dir)) { - var _max = target.offsetWidth + (targetLeft - selfLeft); - this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); - } - if (/top/i.test(dir) && this.resizable) { - var _max2 = selfTop - targetTop + this.resizable.size.height; - this.setState({ - maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 - }); - } - if (/bottom/i.test(dir)) { - var _max3 = target.offsetHeight + (targetTop - selfTop); - this.setState({ - maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 - }); - } - } - } else { - this.setState({ - maxWidth: this.props.maxWidth, - maxHeight: this.props.maxHeight - }); - } - if (this.props.onResizeStart) { - this.props.onResizeStart(e, dir, refToElement); - } - } - }, { - key: 'onResize', - value: function onResize(e, direction, refToResizableElement, delta) { - var x = void 0; - var y = void 0; - if (/left/i.test(direction)) { - x = this.state.original.x - delta.width; - this.draggable.setState({ x: x }); - } - if (/top/i.test(direction)) { - y = this.state.original.y - delta.height; - this.draggable.setState({ y: y }); - } - if (this.props.onResize) { - this.props.onResize(e, direction, refToResizableElement, delta, { - x: x || this.draggable.state.x, - y: y || this.draggable.state.y - }); - } - } - }, { - key: 'onResizeStop', - value: function onResizeStop(e, direction, refToResizableElement, delta) { - var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), - maxWidth = _getMaxSizesFromProps2.maxWidth, - maxHeight = _getMaxSizesFromProps2.maxHeight; - - this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); - if (this.props.onResizeStop) { - var _position = { - x: this.draggable.state.x, - y: this.draggable.state.y - }; - this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); - } - } - }, { - key: 'updateSize', - value: function updateSize(size) { - if (!this.resizable) return; - this.resizable.updateSize({ width: size.width, height: size.height }); - } - }, { - key: 'updatePosition', - value: function updatePosition(position) { - this.draggable.setState(position); - } - }, { - key: 'updateZIndex', - value: function updateZIndex(z) { - this.setState({ z: z }); - } - }, { - key: 'render', - value: function render() { - var _this2 = this; - - var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; - var innerStyle = _extends({}, resizableStyle, { - zIndex: this.state.z - }, cursorStyle, this.props.style); - // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). - if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null); - var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line - return React.createElement( - Draggable, - { - ref: function ref(c) { - _this2.draggable = c; - }, - handle: this.props.dragHandleClassName, - defaultPosition: this.props.default, - onStart: this.onDragStart, - onDrag: this.onDrag, - onStop: this.onDragStop, - axis: this.props.dragAxis, - disabled: this.props.disableDragging, - grid: this.props.dragGrid, - bounds: this.props.bounds ? this.state.bounds : undefined, - position: this.props.position, - enableUserSelectHack: this.props.enableUserSelectHack, - cancel: this.props.cancel - }, - React.createElement( - Resizable, - _extends({}, this.props.extendsProps, { - className: this.props.className, - ref: function ref(c) { - _this2.resizable = c; - }, - defaultSize: this.props.default, - size: this.props.size, - enable: this.props.enableResizing, - onResizeStart: this.onResizeStart, - onResize: this.onResize, - onResizeStop: this.onResizeStop, - style: innerStyle, - minWidth: this.props.minWidth, - minHeight: this.props.minHeight, - maxWidth: this.state.maxWidth, - maxHeight: maxHeight, - grid: this.props.resizeGrid, - handleWrapperClass: this.props.resizeHandleWrapperClass, - handleWrapperStyle: this.props.resizeHandleWrapperStyle, - lockAspectRatio: this.props.lockAspectRatio, - lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, - lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, - handleStyles: this.props.resizeHandleStyles, - handleClasses: this.props.resizeHandleClasses - }), - this.props.children - ) - ); - } - }]); - return Rnd; -}(React.Component); - -Rnd.defaultProps = { - maxWidth: Number.MAX_SAFE_INTEGER, - maxHeight: Number.MAX_SAFE_INTEGER, - onResizeStart: function onResizeStart() {}, - onResize: function onResize() {}, - onResizeStop: function onResizeStop() {}, - onDragStart: function onDragStart() {}, - onDrag: function onDrag() {}, - onDragStop: function onDragStop() {} -}; - -exports.default = Rnd; -//# sourceMappingURL=index.es5.js.map diff --git a/lib/index.es5.js.map b/lib/index.es5.js.map deleted file mode 100644 index 0b2c97b0..00000000 --- a/lib/index.es5.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.es5.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/index.js b/lib/index.js deleted file mode 100644 index 102a8b9f..00000000 --- a/lib/index.js +++ /dev/null @@ -1,402 +0,0 @@ -import { createElement, Component } from 'react'; -import { findDOMNode } from 'react-dom'; -import Draggable from 'react-draggable'; -import Resizable from 're-resizable'; - -var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } -}; - -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 _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 inherits = function (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 possibleConstructorReturn = function (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; -}; - -var resizableStyle = { - width: 'auto', - height: 'auto', - display: 'inline-block', - position: 'absolute', - top: 0, - left: 0 -}; - -var Rnd = function (_React$Component) { - inherits(Rnd, _React$Component); - - function Rnd(props) { - classCallCheck(this, Rnd); - - var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); - - _this.state = { - z: props.z, - original: { - x: 0, - y: 0 - }, - bounds: { - top: 0, - right: 0, - bottom: 0, - left: 0 - }, - maxWidth: props.maxWidth, - maxHeight: props.maxHeight, - isMounted: false - }; - _this.onResizeStart = _this.onResizeStart.bind(_this); - _this.onResize = _this.onResize.bind(_this); - _this.onResizeStop = _this.onResizeStop.bind(_this); - _this.onDragStart = _this.onDragStart.bind(_this); - _this.onDrag = _this.onDrag.bind(_this); - _this.onDragStop = _this.onDragStop.bind(_this); - _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); - return _this; - } - - createClass(Rnd, [{ - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (this.props.z !== nextProps.z) { - this.setState({ z: nextProps.z }); - } - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this.setParentPosition(); - } - }, { - key: 'getParentSize', - value: function getParentSize() { - return this.resizable.getParentSize(); - } - }, { - key: 'getMaxSizesFromProps', - value: function getMaxSizesFromProps() { - var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; - var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; - return { maxWidth: maxWidth, maxHeight: maxHeight }; - } - }, { - key: 'getSelfElement', - value: function getSelfElement() { - if (!this) return null; - return findDOMNode(this); - } - }, { - key: 'setParentPosition', - value: function setParentPosition() { - var element = this.getSelfElement(); - if (element instanceof Element) { - var parent = element.parentNode; - if (!parent || typeof window === 'undefined') return; - if (!(parent instanceof HTMLElement)) return; - if (getComputedStyle(parent).position !== 'static') { - this.setState({ isMounted: true }); - return; - } - parent.style.position = 'relative'; - this.setState({ isMounted: true }); - } - } - }, { - key: 'onDragStart', - value: function onDragStart(e, data) { - if (this.props.onDragStart) { - this.props.onDragStart(e, data); - } - if (!this.props.bounds) return; - var parent = this.resizable && this.resizable.parentNode; - var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { - return; - } - var targetRect = target.getBoundingClientRect(); - var targetLeft = targetRect.left; - var targetTop = targetRect.top; - var parentRect = parent.getBoundingClientRect(); - var parentLeft = parentRect.left; - var parentTop = parentRect.top; - var left = targetLeft - parentLeft; - var top = targetTop - parentTop; - if (!this.resizable) return; - this.setState({ - bounds: { - top: top, - right: left + (target.offsetWidth - this.resizable.size.width), - bottom: this.props._freeBottomBounds // eslint-disable-line - ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), - left: left - } - }); - } - }, { - key: 'onDrag', - value: function onDrag(e, data) { - if (this.props.onDrag) { - this.props.onDrag(e, data); - } - } - }, { - key: 'onDragStop', - value: function onDragStop(e, data) { - if (this.props.onDragStop) { - this.props.onDragStop(e, data); - } - } - }, { - key: 'onResizeStart', - value: function onResizeStart(e, dir, refToElement) { - e.stopPropagation(); - this.setState({ - original: { x: this.draggable.state.x, y: this.draggable.state.y } - }); - if (this.props.bounds) { - var parent = this.resizable && this.resizable.parentNode; - var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - var self = this.getSelfElement(); - if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { - var _getMaxSizesFromProps = this.getMaxSizesFromProps(), - _maxWidth = _getMaxSizesFromProps.maxWidth, - _maxHeight = _getMaxSizesFromProps.maxHeight; - - var parentSize = this.getParentSize(); - if (_maxWidth && typeof _maxWidth === 'string') { - if (_maxWidth.endsWith('%')) { - var ratio = Number(_maxWidth.replace('%', '')) / 100; - _maxWidth = parentSize.width * ratio; - } else if (_maxWidth.endsWith('px')) { - _maxWidth = Number(_maxWidth.replace('px', '')); - } - } - if (_maxHeight && typeof _maxHeight === 'string') { - if (_maxHeight.endsWith('%')) { - var _ratio = Number(_maxHeight.replace('%', '')) / 100; - _maxHeight = parentSize.width * _ratio; - } else if (_maxHeight.endsWith('px')) { - _maxHeight = Number(_maxHeight.replace('px', '')); - } - } - var selfRect = self.getBoundingClientRect(); - var selfLeft = selfRect.left; - var selfTop = selfRect.top; - var targetRect = target.getBoundingClientRect(); - var targetLeft = targetRect.left; - var targetTop = targetRect.top; - if (/left/i.test(dir) && this.resizable) { - var max = selfLeft - targetLeft + this.resizable.size.width; - this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); - } - if (/right/i.test(dir)) { - var _max = target.offsetWidth + (targetLeft - selfLeft); - this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); - } - if (/top/i.test(dir) && this.resizable) { - var _max2 = selfTop - targetTop + this.resizable.size.height; - this.setState({ - maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 - }); - } - if (/bottom/i.test(dir)) { - var _max3 = target.offsetHeight + (targetTop - selfTop); - this.setState({ - maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 - }); - } - } - } else { - this.setState({ - maxWidth: this.props.maxWidth, - maxHeight: this.props.maxHeight - }); - } - if (this.props.onResizeStart) { - this.props.onResizeStart(e, dir, refToElement); - } - } - }, { - key: 'onResize', - value: function onResize(e, direction, refToResizableElement, delta) { - var x = void 0; - var y = void 0; - if (/left/i.test(direction)) { - x = this.state.original.x - delta.width; - this.draggable.setState({ x: x }); - } - if (/top/i.test(direction)) { - y = this.state.original.y - delta.height; - this.draggable.setState({ y: y }); - } - if (this.props.onResize) { - this.props.onResize(e, direction, refToResizableElement, delta, { - x: x || this.draggable.state.x, - y: y || this.draggable.state.y - }); - } - } - }, { - key: 'onResizeStop', - value: function onResizeStop(e, direction, refToResizableElement, delta) { - var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), - maxWidth = _getMaxSizesFromProps2.maxWidth, - maxHeight = _getMaxSizesFromProps2.maxHeight; - - this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); - if (this.props.onResizeStop) { - var _position = { - x: this.draggable.state.x, - y: this.draggable.state.y - }; - this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); - } - } - }, { - key: 'updateSize', - value: function updateSize(size) { - if (!this.resizable) return; - this.resizable.updateSize({ width: size.width, height: size.height }); - } - }, { - key: 'updatePosition', - value: function updatePosition(position) { - this.draggable.setState(position); - } - }, { - key: 'updateZIndex', - value: function updateZIndex(z) { - this.setState({ z: z }); - } - }, { - key: 'render', - value: function render() { - var _this2 = this; - - var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; - var innerStyle = _extends({}, resizableStyle, { - zIndex: this.state.z - }, cursorStyle, this.props.style); - // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). - if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return createElement('div', null); - var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line - return createElement( - Draggable, - { - ref: function ref(c) { - _this2.draggable = c; - }, - handle: this.props.dragHandleClassName, - defaultPosition: this.props.default, - onStart: this.onDragStart, - onDrag: this.onDrag, - onStop: this.onDragStop, - axis: this.props.dragAxis, - disabled: this.props.disableDragging, - grid: this.props.dragGrid, - bounds: this.props.bounds ? this.state.bounds : undefined, - position: this.props.position, - enableUserSelectHack: this.props.enableUserSelectHack, - cancel: this.props.cancel - }, - createElement( - Resizable, - _extends({}, this.props.extendsProps, { - className: this.props.className, - ref: function ref(c) { - _this2.resizable = c; - }, - defaultSize: this.props.default, - size: this.props.size, - enable: this.props.enableResizing, - onResizeStart: this.onResizeStart, - onResize: this.onResize, - onResizeStop: this.onResizeStop, - style: innerStyle, - minWidth: this.props.minWidth, - minHeight: this.props.minHeight, - maxWidth: this.state.maxWidth, - maxHeight: maxHeight, - grid: this.props.resizeGrid, - handleWrapperClass: this.props.resizeHandleWrapperClass, - handleWrapperStyle: this.props.resizeHandleWrapperStyle, - lockAspectRatio: this.props.lockAspectRatio, - lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, - lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, - handleStyles: this.props.resizeHandleStyles, - handleClasses: this.props.resizeHandleClasses - }), - this.props.children - ) - ); - } - }]); - return Rnd; -}(Component); - -Rnd.defaultProps = { - maxWidth: Number.MAX_SAFE_INTEGER, - maxHeight: Number.MAX_SAFE_INTEGER, - onResizeStart: function onResizeStart() {}, - onResize: function onResize() {}, - onResizeStop: function onResizeStop() {}, - onDragStart: function onDragStart() {}, - onDrag: function onDrag() {}, - onDragStop: function onDragStop() {} -}; - -export default Rnd; -//# sourceMappingURL=index.js.map diff --git a/lib/index.js.map b/lib/index.js.map deleted file mode 100644 index ab402dcb..00000000 --- a/lib/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/react-rnd.umd.js b/lib/react-rnd.umd.js deleted file mode 100644 index 54bc465b..00000000 --- a/lib/react-rnd.umd.js +++ /dev/null @@ -1,410 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react-draggable', 're-resizable'], factory) : - (factory((global['react-rnd'] = {}),global.React,global.ReactDOM,global.Draggable,global.Resizable)); -}(this, (function (exports,React,reactDom,Draggable,Resizable) { 'use strict'; - - Draggable = Draggable && Draggable.hasOwnProperty('default') ? Draggable['default'] : Draggable; - Resizable = Resizable && Resizable.hasOwnProperty('default') ? Resizable['default'] : Resizable; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - 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 _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 inherits = function (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 possibleConstructorReturn = function (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; - }; - - var resizableStyle = { - width: 'auto', - height: 'auto', - display: 'inline-block', - position: 'absolute', - top: 0, - left: 0 - }; - - var Rnd = function (_React$Component) { - inherits(Rnd, _React$Component); - - function Rnd(props) { - classCallCheck(this, Rnd); - - var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); - - _this.state = { - z: props.z, - original: { - x: 0, - y: 0 - }, - bounds: { - top: 0, - right: 0, - bottom: 0, - left: 0 - }, - maxWidth: props.maxWidth, - maxHeight: props.maxHeight, - isMounted: false - }; - _this.onResizeStart = _this.onResizeStart.bind(_this); - _this.onResize = _this.onResize.bind(_this); - _this.onResizeStop = _this.onResizeStop.bind(_this); - _this.onDragStart = _this.onDragStart.bind(_this); - _this.onDrag = _this.onDrag.bind(_this); - _this.onDragStop = _this.onDragStop.bind(_this); - _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); - return _this; - } - - createClass(Rnd, [{ - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (this.props.z !== nextProps.z) { - this.setState({ z: nextProps.z }); - } - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - this.setParentPosition(); - } - }, { - key: 'getParentSize', - value: function getParentSize() { - return this.resizable.getParentSize(); - } - }, { - key: 'getMaxSizesFromProps', - value: function getMaxSizesFromProps() { - var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; - var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; - return { maxWidth: maxWidth, maxHeight: maxHeight }; - } - }, { - key: 'getSelfElement', - value: function getSelfElement() { - if (!this) return null; - return reactDom.findDOMNode(this); - } - }, { - key: 'setParentPosition', - value: function setParentPosition() { - var element = this.getSelfElement(); - if (element instanceof Element) { - var parent = element.parentNode; - if (!parent || typeof window === 'undefined') return; - if (!(parent instanceof HTMLElement)) return; - if (getComputedStyle(parent).position !== 'static') { - this.setState({ isMounted: true }); - return; - } - parent.style.position = 'relative'; - this.setState({ isMounted: true }); - } - } - }, { - key: 'onDragStart', - value: function onDragStart(e, data) { - if (this.props.onDragStart) { - this.props.onDragStart(e, data); - } - if (!this.props.bounds) return; - var parent = this.resizable && this.resizable.parentNode; - var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { - return; - } - var targetRect = target.getBoundingClientRect(); - var targetLeft = targetRect.left; - var targetTop = targetRect.top; - var parentRect = parent.getBoundingClientRect(); - var parentLeft = parentRect.left; - var parentTop = parentRect.top; - var left = targetLeft - parentLeft; - var top = targetTop - parentTop; - if (!this.resizable) return; - this.setState({ - bounds: { - top: top, - right: left + (target.offsetWidth - this.resizable.size.width), - bottom: this.props._freeBottomBounds // eslint-disable-line - ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), - left: left - } - }); - } - }, { - key: 'onDrag', - value: function onDrag(e, data) { - if (this.props.onDrag) { - this.props.onDrag(e, data); - } - } - }, { - key: 'onDragStop', - value: function onDragStop(e, data) { - if (this.props.onDragStop) { - this.props.onDragStop(e, data); - } - } - }, { - key: 'onResizeStart', - value: function onResizeStart(e, dir, refToElement) { - e.stopPropagation(); - this.setState({ - original: { x: this.draggable.state.x, y: this.draggable.state.y } - }); - if (this.props.bounds) { - var parent = this.resizable && this.resizable.parentNode; - var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - var self = this.getSelfElement(); - if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { - var _getMaxSizesFromProps = this.getMaxSizesFromProps(), - _maxWidth = _getMaxSizesFromProps.maxWidth, - _maxHeight = _getMaxSizesFromProps.maxHeight; - - var parentSize = this.getParentSize(); - if (_maxWidth && typeof _maxWidth === 'string') { - if (_maxWidth.endsWith('%')) { - var ratio = Number(_maxWidth.replace('%', '')) / 100; - _maxWidth = parentSize.width * ratio; - } else if (_maxWidth.endsWith('px')) { - _maxWidth = Number(_maxWidth.replace('px', '')); - } - } - if (_maxHeight && typeof _maxHeight === 'string') { - if (_maxHeight.endsWith('%')) { - var _ratio = Number(_maxHeight.replace('%', '')) / 100; - _maxHeight = parentSize.width * _ratio; - } else if (_maxHeight.endsWith('px')) { - _maxHeight = Number(_maxHeight.replace('px', '')); - } - } - var selfRect = self.getBoundingClientRect(); - var selfLeft = selfRect.left; - var selfTop = selfRect.top; - var targetRect = target.getBoundingClientRect(); - var targetLeft = targetRect.left; - var targetTop = targetRect.top; - if (/left/i.test(dir) && this.resizable) { - var max = selfLeft - targetLeft + this.resizable.size.width; - this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); - } - if (/right/i.test(dir)) { - var _max = target.offsetWidth + (targetLeft - selfLeft); - this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); - } - if (/top/i.test(dir) && this.resizable) { - var _max2 = selfTop - targetTop + this.resizable.size.height; - this.setState({ - maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 - }); - } - if (/bottom/i.test(dir)) { - var _max3 = target.offsetHeight + (targetTop - selfTop); - this.setState({ - maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 - }); - } - } - } else { - this.setState({ - maxWidth: this.props.maxWidth, - maxHeight: this.props.maxHeight - }); - } - if (this.props.onResizeStart) { - this.props.onResizeStart(e, dir, refToElement); - } - } - }, { - key: 'onResize', - value: function onResize(e, direction, refToResizableElement, delta) { - var x = void 0; - var y = void 0; - if (/left/i.test(direction)) { - x = this.state.original.x - delta.width; - this.draggable.setState({ x: x }); - } - if (/top/i.test(direction)) { - y = this.state.original.y - delta.height; - this.draggable.setState({ y: y }); - } - if (this.props.onResize) { - this.props.onResize(e, direction, refToResizableElement, delta, { - x: x || this.draggable.state.x, - y: y || this.draggable.state.y - }); - } - } - }, { - key: 'onResizeStop', - value: function onResizeStop(e, direction, refToResizableElement, delta) { - var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), - maxWidth = _getMaxSizesFromProps2.maxWidth, - maxHeight = _getMaxSizesFromProps2.maxHeight; - - this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); - if (this.props.onResizeStop) { - var _position = { - x: this.draggable.state.x, - y: this.draggable.state.y - }; - this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); - } - } - }, { - key: 'updateSize', - value: function updateSize(size) { - if (!this.resizable) return; - this.resizable.updateSize({ width: size.width, height: size.height }); - } - }, { - key: 'updatePosition', - value: function updatePosition(position) { - this.draggable.setState(position); - } - }, { - key: 'updateZIndex', - value: function updateZIndex(z) { - this.setState({ z: z }); - } - }, { - key: 'render', - value: function render() { - var _this2 = this; - - var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; - var innerStyle = _extends({}, resizableStyle, { - zIndex: this.state.z - }, cursorStyle, this.props.style); - // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). - if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null); - var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line - return React.createElement( - Draggable, - { - ref: function ref(c) { - _this2.draggable = c; - }, - handle: this.props.dragHandleClassName, - defaultPosition: this.props.default, - onStart: this.onDragStart, - onDrag: this.onDrag, - onStop: this.onDragStop, - axis: this.props.dragAxis, - disabled: this.props.disableDragging, - grid: this.props.dragGrid, - bounds: this.props.bounds ? this.state.bounds : undefined, - position: this.props.position, - enableUserSelectHack: this.props.enableUserSelectHack, - cancel: this.props.cancel - }, - React.createElement( - Resizable, - _extends({}, this.props.extendsProps, { - className: this.props.className, - ref: function ref(c) { - _this2.resizable = c; - }, - defaultSize: this.props.default, - size: this.props.size, - enable: this.props.enableResizing, - onResizeStart: this.onResizeStart, - onResize: this.onResize, - onResizeStop: this.onResizeStop, - style: innerStyle, - minWidth: this.props.minWidth, - minHeight: this.props.minHeight, - maxWidth: this.state.maxWidth, - maxHeight: maxHeight, - grid: this.props.resizeGrid, - handleWrapperClass: this.props.resizeHandleWrapperClass, - handleWrapperStyle: this.props.resizeHandleWrapperStyle, - lockAspectRatio: this.props.lockAspectRatio, - lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, - lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, - handleStyles: this.props.resizeHandleStyles, - handleClasses: this.props.resizeHandleClasses - }), - this.props.children - ) - ); - } - }]); - return Rnd; - }(React.Component); - - Rnd.defaultProps = { - maxWidth: Number.MAX_SAFE_INTEGER, - maxHeight: Number.MAX_SAFE_INTEGER, - onResizeStart: function onResizeStart() {}, - onResize: function onResize() {}, - onResizeStop: function onResizeStop() {}, - onDragStart: function onDragStart() {}, - onDrag: function onDrag() {}, - onDragStop: function onDragStop() {} - }; - - exports.default = Rnd; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); -//# sourceMappingURL=react-rnd.umd.js.map diff --git a/lib/react-rnd.umd.js.map b/lib/react-rnd.umd.js.map deleted file mode 100644 index 6d80248a..00000000 --- a/lib/react-rnd.umd.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"react-rnd.umd.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","width","height","display","position","top","left","Rnd","props","state","z","original","x","y","bounds","right","bottom","maxWidth","maxHeight","isMounted","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","style","e","data","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","targetTop","parentRect","parentLeft","parentTop","offsetWidth","size","_freeBottomBounds","offsetHeight","dir","refToElement","stopPropagation","draggable","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","zIndex","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/src/index.js b/src/index.js index a90b8d6c..1a50a100 100755 --- a/src/index.js +++ b/src/index.js @@ -161,7 +161,7 @@ export default class Rnd extends React.Component { onDragStart: () => {}, onDrag: () => {}, onDragStop: () => {}, - absolutePos:false, + absolutePos: false, }; resizable: React$ElementRef | null; draggable: Draggable; From 44fc611041ca9193208bdd9a206731a69a1e3c3a Mon Sep 17 00:00:00 2001 From: nathb Date: Sun, 25 Mar 2018 14:25:59 +0200 Subject: [PATCH 07/13] ^ --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index f9d3d667..2e7a4d6d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ example/dist/ -lib/ +#lib/ npm-debug.log From 7cca1a346e39a0a42b4f005eca9c6fca82649f0a Mon Sep 17 00:00:00 2001 From: nathb Date: Sun, 25 Mar 2018 14:26:55 +0200 Subject: [PATCH 08/13] ^ --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 2e7a4d6d..f9d3d667 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ example/dist/ -#lib/ +lib/ npm-debug.log From b2d9174406836e78a0366b8a2b3b000ff1f9f91c Mon Sep 17 00:00:00 2001 From: nathb Date: Sun, 25 Mar 2018 14:28:27 +0200 Subject: [PATCH 09/13] ^ --- .gitignore | 2 +- lib/index.es5.js.flow | 478 ----------------------- lib/index.js.flow | 478 ----------------------- lib/index.test.js.flow | 867 ----------------------------------------- 4 files changed, 1 insertion(+), 1824 deletions(-) delete mode 100644 lib/index.es5.js.flow delete mode 100644 lib/index.js.flow delete mode 100644 lib/index.test.js.flow diff --git a/.gitignore b/.gitignore index f9d3d667..2e7a4d6d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ example/dist/ -lib/ +#lib/ npm-debug.log diff --git a/lib/index.es5.js.flow b/lib/index.es5.js.flow deleted file mode 100644 index 9251bbf6..00000000 --- a/lib/index.es5.js.flow +++ /dev/null @@ -1,478 +0,0 @@ -/* @flow */ - -import * as React from 'react'; -import { findDOMNode } from 'react-dom'; -import Draggable from 'react-draggable'; -import Resizable from 're-resizable'; -import type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable'; - -export type Grid = [number, number]; - -export type Position = { - x: number, - y: number, -}; - -export type DraggableData = { - node: HTMLElement, - deltaX: number, - deltaY: number, - lastX: number, - lastY: number, -} & Position; - -export type RndDragCallback = (e: Event, data: DraggableData) => void | false; - -export type RndResizeStartCallback = ( - e: SyntheticMouseEvent | SyntheticTouchEvent, - dir: ResizeDirection, - refToElement: React.ElementRef<'div'>, -) => void; - -export type ResizableDelta = { - width: number, - height: number, -}; - -export type RndResizeCallback = ( - e: MouseEvent | TouchEvent, - dir: ResizeDirection, - refToElement: React.ElementRef<'div'>, - delta: ResizableDelta, - position: Position, -) => void; - -type Size = { - width: string | number, - height: string | number, -}; - -type State = { - z?: number, - original: Position, - bounds: { - top: number, - right: number, - bottom: number, - left: number, - }, - maxWidth?: number | string, - maxHeight?: number | string, - isMounted: boolean, -}; - -export type ResizeEnable = { - bottom?: boolean, - bottomLeft?: boolean, - bottomRight?: boolean, - left?: boolean, - right?: boolean, - top?: boolean, - topLeft?: boolean, - topRight?: boolean, -}; - -export type HandleClasses = { - bottom?: string, - bottomLeft?: string, - bottomRight?: string, - left?: string, - right?: string, - top?: string, - topLeft?: string, - topRight?: string, -}; - -type Style = { - [key: string]: string | number, -}; - -export type HandleStyles = { - bottom?: Style, - bottomLeft?: Style, - bottomRight?: Style, - left?: Style, - right?: Style, - top?: Style, - topLeft?: Style, - topRight?: Style, -}; - -type Props = { - z?: number, - dragGrid?: Grid, - default?: { - x: number, - y: number, - } & Size, - position?: { - x: number, - y: number, - }, - size?: Size, - resizeGrid?: Grid, - bounds?: string, - onResizeStart?: RndResizeStartCallback, - onResize?: RndResizeCallback, - onResizeStop?: RndResizeCallback, - onDragStart?: RndDragCallback, - onDrag?: RndDragCallback, - onDragStop?: RndDragCallback, - className?: string, - style?: Style, - children?: React.Node, - enableResizing?: ResizeEnable, - extendsProps?: { [key: string]: any }, - resizeHandleClasses?: HandleClasses, - resizeHandleStyles?: HandleStyles, - resizeHandleWrapperClass?: string, - resizeHandleWrapperStyle?: Style, - lockAspectRatio?: boolean | number, - lockAspectRatioExtraWidth?: number, - lockAspectRatioExtraHeight?: number, - maxHeight?: number | string, - maxWidth?: number | string, - minHeight?: number | string, - minWidth?: number | string, - dragAxis?: 'x' | 'y' | 'both' | 'none', - dragHandleClassName?: string, - disableDragging?: boolean, - cancel?: boolean, - enableUserSelectHack?: boolean, - _freeBottomBounds?: boolean, // Back door for react-elastic-grid. -}; - -const resizableStyle = { - width: 'auto', - height: 'auto', - display: 'inline-block', - position: 'absolute', - top: 0, - left: 0, -}; - -export default class Rnd extends React.Component { - static defaultProps = { - maxWidth: Number.MAX_SAFE_INTEGER, - maxHeight: Number.MAX_SAFE_INTEGER, - onResizeStart: () => {}, - onResize: () => {}, - onResizeStop: () => {}, - onDragStart: () => {}, - onDrag: () => {}, - onDragStop: () => {} - }; - resizable: React$ElementRef | null; - draggable: Draggable; - onResizeStart: ResizeStartCallback; - onResize: ResizeCallback; - onResizeStop: ResizeCallback; - onDragStart: RndDragCallback; - onDrag: RndDragCallback; - onDragStop: RndDragCallback; - getMaxSizesFromProps: () => { - maxWidth: number | string, - maxHeight: number | string, - }; - wrapper: HTMLElement; - parentId: string; - - constructor(props: Props) { - super(props); - this.state = { - z: props.z, - original: { - x: 0, - y: 0, - }, - bounds: { - top: 0, - right: 0, - bottom: 0, - left: 0, - }, - maxWidth: props.maxWidth, - maxHeight: props.maxHeight, - isMounted: false, - }; - this.onResizeStart = this.onResizeStart.bind(this); - this.onResize = this.onResize.bind(this); - this.onResizeStop = this.onResizeStop.bind(this); - this.onDragStart = this.onDragStart.bind(this); - this.onDrag = this.onDrag.bind(this); - this.onDragStop = this.onDragStop.bind(this); - this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this); - } - - componentWillReceiveProps(nextProps: Props) { - if (this.props.z !== nextProps.z) { - this.setState({ z: nextProps.z }); - } - } - - componentDidMount() { - this.setParentPosition(); - } - - getParentSize(): { width: number, height: number } { - return (this.resizable: any).getParentSize(); - } - - getMaxSizesFromProps(): { - maxWidth: number | string, - maxHeight: number | string, - } { - const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; - const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; - return { maxWidth, maxHeight }; - } - - getSelfElement(): null | Element | Text { - if (!this) return null; - return findDOMNode(this); - } - - setParentPosition() { - const element = this.getSelfElement(); - if (element instanceof Element) { - const parent = element.parentNode; - if (!parent || typeof window === 'undefined') return; - if (!(parent instanceof HTMLElement)) return; - if (getComputedStyle(parent).position !== 'static') { - this.setState({ isMounted: true }); - return; - } - parent.style.position = 'relative'; - this.setState({ isMounted: true }); - } - } - - onDragStart(e: Event, data: DraggableData) { - if (this.props.onDragStart) { - this.props.onDragStart(e, data); - } - if (!this.props.bounds) return; - const parent = this.resizable && this.resizable.parentNode; - const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { - return; - } - const targetRect = target.getBoundingClientRect(); - const targetLeft = targetRect.left; - const targetTop = targetRect.top; - const parentRect = parent.getBoundingClientRect(); - const parentLeft = parentRect.left; - const parentTop = parentRect.top; - const left = targetLeft - parentLeft; - const top = targetTop - parentTop; - if (!this.resizable) return; - this.setState({ - bounds: { - top, - right: left + (target.offsetWidth - this.resizable.size.width), - bottom: this.props._freeBottomBounds // eslint-disable-line - ? 2147483647 - : top + (target.offsetHeight - this.resizable.size.height), - left, - }, - }); - } - - onDrag(e: Event, data: DraggableData) { - if (this.props.onDrag) { - this.props.onDrag(e, data); - } - } - - onDragStop(e: Event, data: DraggableData) { - if (this.props.onDragStop) { - this.props.onDragStop(e, data); - } - } - - onResizeStart( - e: SyntheticMouseEvent | SyntheticTouchEvent, - dir: ResizeDirection, - refToElement: React.ElementRef<'div'>, - ) { - e.stopPropagation(); - this.setState({ - original: { x: this.draggable.state.x, y: this.draggable.state.y }, - }); - if (this.props.bounds) { - const parent = this.resizable && this.resizable.parentNode; - const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - const self = this.getSelfElement(); - if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { - let { maxWidth, maxHeight } = this.getMaxSizesFromProps(); - const parentSize = this.getParentSize(); - if (maxWidth && typeof maxWidth === 'string') { - if (maxWidth.endsWith('%')) { - const ratio = Number(maxWidth.replace('%', '')) / 100; - maxWidth = parentSize.width * ratio; - } else if (maxWidth.endsWith('px')) { - maxWidth = Number(maxWidth.replace('px', '')); - } - } - if (maxHeight && typeof maxHeight === 'string') { - if (maxHeight.endsWith('%')) { - const ratio = Number(maxHeight.replace('%', '')) / 100; - maxHeight = parentSize.width * ratio; - } else if (maxHeight.endsWith('px')) { - maxHeight = Number(maxHeight.replace('px', '')); - } - } - const selfRect = self.getBoundingClientRect(); - const selfLeft = selfRect.left; - const selfTop = selfRect.top; - const targetRect = target.getBoundingClientRect(); - const targetLeft = targetRect.left; - const targetTop = targetRect.top; - if (/left/i.test(dir) && this.resizable) { - const max = selfLeft - targetLeft + this.resizable.size.width; - this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); - } - if (/right/i.test(dir)) { - const max = target.offsetWidth + (targetLeft - selfLeft); - this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); - } - if (/top/i.test(dir) && this.resizable) { - const max = selfTop - targetTop + this.resizable.size.height; - this.setState({ - maxHeight: max > Number(maxHeight) ? maxHeight : max, - }); - } - if (/bottom/i.test(dir)) { - const max = target.offsetHeight + (targetTop - selfTop); - this.setState({ - maxHeight: max > Number(maxHeight) ? maxHeight : max, - }); - } - } - } else { - this.setState({ - maxWidth: this.props.maxWidth, - maxHeight: this.props.maxHeight, - }); - } - if (this.props.onResizeStart) { - this.props.onResizeStart(e, dir, refToElement); - } - } - - onResize( - e: MouseEvent | TouchEvent, - direction: ResizeDirection, - refToResizableElement: React.ElementRef<'div'>, - delta: { height: number, width: number }, - ) { - let x; - let y; - if (/left/i.test(direction)) { - x = this.state.original.x - delta.width; - this.draggable.setState({ x }); - } - if (/top/i.test(direction)) { - y = this.state.original.y - delta.height; - this.draggable.setState({ y }); - } - if (this.props.onResize) { - this.props.onResize(e, direction, refToResizableElement, delta, { - x: x || this.draggable.state.x, - y: y || this.draggable.state.y, - }); - } - } - - onResizeStop( - e: MouseEvent | TouchEvent, - direction: ResizeDirection, - refToResizableElement: HTMLDivElement, - delta: { height: number, width: number }, - ) { - const { maxWidth, maxHeight } = this.getMaxSizesFromProps(); - this.setState({ maxWidth, maxHeight }); - if (this.props.onResizeStop) { - const position: Position = { - x: this.draggable.state.x, - y: this.draggable.state.y, - }; - this.props.onResizeStop(e, direction, refToResizableElement, delta, position); - } - } - - updateSize(size: { width: number | string, height: number | string }) { - if (!this.resizable) return; - this.resizable.updateSize({ width: size.width, height: size.height }); - } - - updatePosition(position: Position) { - this.draggable.setState(position); - } - - updateZIndex(z: number) { - this.setState({ z }); - } - - render(): React.Node { - const cursorStyle = - this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; - const innerStyle = { - ...resizableStyle, - zIndex: this.state.z, - ...cursorStyle, - ...this.props.style, - }; - // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). - if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return
; - const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line - return ( - { - this.draggable = c; - }} - handle={this.props.dragHandleClassName} - defaultPosition={this.props.default} - onStart={this.onDragStart} - onDrag={this.onDrag} - onStop={this.onDragStop} - axis={this.props.dragAxis} - disabled={this.props.disableDragging} - grid={this.props.dragGrid} - bounds={this.props.bounds ? this.state.bounds : undefined} - position={this.props.position} - enableUserSelectHack={this.props.enableUserSelectHack} - cancel={this.props.cancel} - > - | null) => { - this.resizable = c; - }} - defaultSize={this.props.default} - size={this.props.size} - enable={this.props.enableResizing} - onResizeStart={this.onResizeStart} - onResize={this.onResize} - onResizeStop={this.onResizeStop} - style={innerStyle} - minWidth={this.props.minWidth} - minHeight={this.props.minHeight} - maxWidth={this.state.maxWidth} - maxHeight={maxHeight} - grid={this.props.resizeGrid} - handleWrapperClass={this.props.resizeHandleWrapperClass} - handleWrapperStyle={this.props.resizeHandleWrapperStyle} - lockAspectRatio={this.props.lockAspectRatio} - lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth} - lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight} - handleStyles={this.props.resizeHandleStyles} - handleClasses={this.props.resizeHandleClasses} - > - {this.props.children} - - - ); - } -} diff --git a/lib/index.js.flow b/lib/index.js.flow deleted file mode 100644 index 9251bbf6..00000000 --- a/lib/index.js.flow +++ /dev/null @@ -1,478 +0,0 @@ -/* @flow */ - -import * as React from 'react'; -import { findDOMNode } from 'react-dom'; -import Draggable from 'react-draggable'; -import Resizable from 're-resizable'; -import type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable'; - -export type Grid = [number, number]; - -export type Position = { - x: number, - y: number, -}; - -export type DraggableData = { - node: HTMLElement, - deltaX: number, - deltaY: number, - lastX: number, - lastY: number, -} & Position; - -export type RndDragCallback = (e: Event, data: DraggableData) => void | false; - -export type RndResizeStartCallback = ( - e: SyntheticMouseEvent | SyntheticTouchEvent, - dir: ResizeDirection, - refToElement: React.ElementRef<'div'>, -) => void; - -export type ResizableDelta = { - width: number, - height: number, -}; - -export type RndResizeCallback = ( - e: MouseEvent | TouchEvent, - dir: ResizeDirection, - refToElement: React.ElementRef<'div'>, - delta: ResizableDelta, - position: Position, -) => void; - -type Size = { - width: string | number, - height: string | number, -}; - -type State = { - z?: number, - original: Position, - bounds: { - top: number, - right: number, - bottom: number, - left: number, - }, - maxWidth?: number | string, - maxHeight?: number | string, - isMounted: boolean, -}; - -export type ResizeEnable = { - bottom?: boolean, - bottomLeft?: boolean, - bottomRight?: boolean, - left?: boolean, - right?: boolean, - top?: boolean, - topLeft?: boolean, - topRight?: boolean, -}; - -export type HandleClasses = { - bottom?: string, - bottomLeft?: string, - bottomRight?: string, - left?: string, - right?: string, - top?: string, - topLeft?: string, - topRight?: string, -}; - -type Style = { - [key: string]: string | number, -}; - -export type HandleStyles = { - bottom?: Style, - bottomLeft?: Style, - bottomRight?: Style, - left?: Style, - right?: Style, - top?: Style, - topLeft?: Style, - topRight?: Style, -}; - -type Props = { - z?: number, - dragGrid?: Grid, - default?: { - x: number, - y: number, - } & Size, - position?: { - x: number, - y: number, - }, - size?: Size, - resizeGrid?: Grid, - bounds?: string, - onResizeStart?: RndResizeStartCallback, - onResize?: RndResizeCallback, - onResizeStop?: RndResizeCallback, - onDragStart?: RndDragCallback, - onDrag?: RndDragCallback, - onDragStop?: RndDragCallback, - className?: string, - style?: Style, - children?: React.Node, - enableResizing?: ResizeEnable, - extendsProps?: { [key: string]: any }, - resizeHandleClasses?: HandleClasses, - resizeHandleStyles?: HandleStyles, - resizeHandleWrapperClass?: string, - resizeHandleWrapperStyle?: Style, - lockAspectRatio?: boolean | number, - lockAspectRatioExtraWidth?: number, - lockAspectRatioExtraHeight?: number, - maxHeight?: number | string, - maxWidth?: number | string, - minHeight?: number | string, - minWidth?: number | string, - dragAxis?: 'x' | 'y' | 'both' | 'none', - dragHandleClassName?: string, - disableDragging?: boolean, - cancel?: boolean, - enableUserSelectHack?: boolean, - _freeBottomBounds?: boolean, // Back door for react-elastic-grid. -}; - -const resizableStyle = { - width: 'auto', - height: 'auto', - display: 'inline-block', - position: 'absolute', - top: 0, - left: 0, -}; - -export default class Rnd extends React.Component { - static defaultProps = { - maxWidth: Number.MAX_SAFE_INTEGER, - maxHeight: Number.MAX_SAFE_INTEGER, - onResizeStart: () => {}, - onResize: () => {}, - onResizeStop: () => {}, - onDragStart: () => {}, - onDrag: () => {}, - onDragStop: () => {} - }; - resizable: React$ElementRef | null; - draggable: Draggable; - onResizeStart: ResizeStartCallback; - onResize: ResizeCallback; - onResizeStop: ResizeCallback; - onDragStart: RndDragCallback; - onDrag: RndDragCallback; - onDragStop: RndDragCallback; - getMaxSizesFromProps: () => { - maxWidth: number | string, - maxHeight: number | string, - }; - wrapper: HTMLElement; - parentId: string; - - constructor(props: Props) { - super(props); - this.state = { - z: props.z, - original: { - x: 0, - y: 0, - }, - bounds: { - top: 0, - right: 0, - bottom: 0, - left: 0, - }, - maxWidth: props.maxWidth, - maxHeight: props.maxHeight, - isMounted: false, - }; - this.onResizeStart = this.onResizeStart.bind(this); - this.onResize = this.onResize.bind(this); - this.onResizeStop = this.onResizeStop.bind(this); - this.onDragStart = this.onDragStart.bind(this); - this.onDrag = this.onDrag.bind(this); - this.onDragStop = this.onDragStop.bind(this); - this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this); - } - - componentWillReceiveProps(nextProps: Props) { - if (this.props.z !== nextProps.z) { - this.setState({ z: nextProps.z }); - } - } - - componentDidMount() { - this.setParentPosition(); - } - - getParentSize(): { width: number, height: number } { - return (this.resizable: any).getParentSize(); - } - - getMaxSizesFromProps(): { - maxWidth: number | string, - maxHeight: number | string, - } { - const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; - const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; - return { maxWidth, maxHeight }; - } - - getSelfElement(): null | Element | Text { - if (!this) return null; - return findDOMNode(this); - } - - setParentPosition() { - const element = this.getSelfElement(); - if (element instanceof Element) { - const parent = element.parentNode; - if (!parent || typeof window === 'undefined') return; - if (!(parent instanceof HTMLElement)) return; - if (getComputedStyle(parent).position !== 'static') { - this.setState({ isMounted: true }); - return; - } - parent.style.position = 'relative'; - this.setState({ isMounted: true }); - } - } - - onDragStart(e: Event, data: DraggableData) { - if (this.props.onDragStart) { - this.props.onDragStart(e, data); - } - if (!this.props.bounds) return; - const parent = this.resizable && this.resizable.parentNode; - const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { - return; - } - const targetRect = target.getBoundingClientRect(); - const targetLeft = targetRect.left; - const targetTop = targetRect.top; - const parentRect = parent.getBoundingClientRect(); - const parentLeft = parentRect.left; - const parentTop = parentRect.top; - const left = targetLeft - parentLeft; - const top = targetTop - parentTop; - if (!this.resizable) return; - this.setState({ - bounds: { - top, - right: left + (target.offsetWidth - this.resizable.size.width), - bottom: this.props._freeBottomBounds // eslint-disable-line - ? 2147483647 - : top + (target.offsetHeight - this.resizable.size.height), - left, - }, - }); - } - - onDrag(e: Event, data: DraggableData) { - if (this.props.onDrag) { - this.props.onDrag(e, data); - } - } - - onDragStop(e: Event, data: DraggableData) { - if (this.props.onDragStop) { - this.props.onDragStop(e, data); - } - } - - onResizeStart( - e: SyntheticMouseEvent | SyntheticTouchEvent, - dir: ResizeDirection, - refToElement: React.ElementRef<'div'>, - ) { - e.stopPropagation(); - this.setState({ - original: { x: this.draggable.state.x, y: this.draggable.state.y }, - }); - if (this.props.bounds) { - const parent = this.resizable && this.resizable.parentNode; - const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); - const self = this.getSelfElement(); - if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { - let { maxWidth, maxHeight } = this.getMaxSizesFromProps(); - const parentSize = this.getParentSize(); - if (maxWidth && typeof maxWidth === 'string') { - if (maxWidth.endsWith('%')) { - const ratio = Number(maxWidth.replace('%', '')) / 100; - maxWidth = parentSize.width * ratio; - } else if (maxWidth.endsWith('px')) { - maxWidth = Number(maxWidth.replace('px', '')); - } - } - if (maxHeight && typeof maxHeight === 'string') { - if (maxHeight.endsWith('%')) { - const ratio = Number(maxHeight.replace('%', '')) / 100; - maxHeight = parentSize.width * ratio; - } else if (maxHeight.endsWith('px')) { - maxHeight = Number(maxHeight.replace('px', '')); - } - } - const selfRect = self.getBoundingClientRect(); - const selfLeft = selfRect.left; - const selfTop = selfRect.top; - const targetRect = target.getBoundingClientRect(); - const targetLeft = targetRect.left; - const targetTop = targetRect.top; - if (/left/i.test(dir) && this.resizable) { - const max = selfLeft - targetLeft + this.resizable.size.width; - this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); - } - if (/right/i.test(dir)) { - const max = target.offsetWidth + (targetLeft - selfLeft); - this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max }); - } - if (/top/i.test(dir) && this.resizable) { - const max = selfTop - targetTop + this.resizable.size.height; - this.setState({ - maxHeight: max > Number(maxHeight) ? maxHeight : max, - }); - } - if (/bottom/i.test(dir)) { - const max = target.offsetHeight + (targetTop - selfTop); - this.setState({ - maxHeight: max > Number(maxHeight) ? maxHeight : max, - }); - } - } - } else { - this.setState({ - maxWidth: this.props.maxWidth, - maxHeight: this.props.maxHeight, - }); - } - if (this.props.onResizeStart) { - this.props.onResizeStart(e, dir, refToElement); - } - } - - onResize( - e: MouseEvent | TouchEvent, - direction: ResizeDirection, - refToResizableElement: React.ElementRef<'div'>, - delta: { height: number, width: number }, - ) { - let x; - let y; - if (/left/i.test(direction)) { - x = this.state.original.x - delta.width; - this.draggable.setState({ x }); - } - if (/top/i.test(direction)) { - y = this.state.original.y - delta.height; - this.draggable.setState({ y }); - } - if (this.props.onResize) { - this.props.onResize(e, direction, refToResizableElement, delta, { - x: x || this.draggable.state.x, - y: y || this.draggable.state.y, - }); - } - } - - onResizeStop( - e: MouseEvent | TouchEvent, - direction: ResizeDirection, - refToResizableElement: HTMLDivElement, - delta: { height: number, width: number }, - ) { - const { maxWidth, maxHeight } = this.getMaxSizesFromProps(); - this.setState({ maxWidth, maxHeight }); - if (this.props.onResizeStop) { - const position: Position = { - x: this.draggable.state.x, - y: this.draggable.state.y, - }; - this.props.onResizeStop(e, direction, refToResizableElement, delta, position); - } - } - - updateSize(size: { width: number | string, height: number | string }) { - if (!this.resizable) return; - this.resizable.updateSize({ width: size.width, height: size.height }); - } - - updatePosition(position: Position) { - this.draggable.setState(position); - } - - updateZIndex(z: number) { - this.setState({ z }); - } - - render(): React.Node { - const cursorStyle = - this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; - const innerStyle = { - ...resizableStyle, - zIndex: this.state.z, - ...cursorStyle, - ...this.props.style, - }; - // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). - if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return
; - const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line - return ( - { - this.draggable = c; - }} - handle={this.props.dragHandleClassName} - defaultPosition={this.props.default} - onStart={this.onDragStart} - onDrag={this.onDrag} - onStop={this.onDragStop} - axis={this.props.dragAxis} - disabled={this.props.disableDragging} - grid={this.props.dragGrid} - bounds={this.props.bounds ? this.state.bounds : undefined} - position={this.props.position} - enableUserSelectHack={this.props.enableUserSelectHack} - cancel={this.props.cancel} - > - | null) => { - this.resizable = c; - }} - defaultSize={this.props.default} - size={this.props.size} - enable={this.props.enableResizing} - onResizeStart={this.onResizeStart} - onResize={this.onResize} - onResizeStop={this.onResizeStop} - style={innerStyle} - minWidth={this.props.minWidth} - minHeight={this.props.minHeight} - maxWidth={this.state.maxWidth} - maxHeight={maxHeight} - grid={this.props.resizeGrid} - handleWrapperClass={this.props.resizeHandleWrapperClass} - handleWrapperStyle={this.props.resizeHandleWrapperStyle} - lockAspectRatio={this.props.lockAspectRatio} - lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth} - lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight} - handleStyles={this.props.resizeHandleStyles} - handleClasses={this.props.resizeHandleClasses} - > - {this.props.children} - - - ); - } -} diff --git a/lib/index.test.js.flow b/lib/index.test.js.flow deleted file mode 100644 index b310f304..00000000 --- a/lib/index.test.js.flow +++ /dev/null @@ -1,867 +0,0 @@ -/* eslint-disable */ - -import test from 'ava'; -import React from 'react'; -import { spy } from 'sinon'; -import Enzyme, { mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import Rnd from './'; - -Enzyme.configure({ adapter: new Adapter() }); - -const mouseMove = (x, y) => { - const event = document.createEvent('MouseEvents'); - event.initMouseEvent('mousemove', true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null); - document.dispatchEvent(event); - return event; -}; - -const mouseUp = (x, y) => { - const event = document.createEvent('MouseEvents'); - event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null); - document.dispatchEvent(event); - return event; -}; - -test.beforeEach(async t => { - const div = document.createElement('div'); - document.body.appendChild(div); -}); - -test('should mount without error', async t => { - const rnd = mount(); - t.truthy(!!rnd); -}); - -test('Should custom class name be applied to box', async t => { - const rnd = mount(); - t.truthy(rnd.getDOMNode().classList.contains('custom-class-name')); -}); - -test('Should set handler className', async t => { - const rnd = mount( - , - ); - const handlers = rnd.find('.handler'); - // FIXME: Is it a enzyme 3.x bug ? I can not understand why handlers.length equals 16. - // When use enzyme v2.x this test is passed... - // t.is(handlers.length, 8); - t.is(handlers.length, 16); -}); - -test('Should not render resizer when enable props all false', async t => { - const rnd = mount( - , - ); - const handlers = rnd.find('.handler'); - t.is(handlers.length, 0); -}); - -test('should call onDragStart when start dragging', async t => { - const onDragStart = spy(); - const rnd = mount(); - rnd - .find('div') - .at(0) - .simulate('mousedown'); - t.is(onDragStart.callCount, 1); - t.is(onDragStart.firstCall.args[0].type, 'mousedown'); - t.is(onDragStart.firstCall.args[1].x, 100); - t.is(onDragStart.firstCall.args[1].y, 100); -}); - -test('should call onDrag when dragging', async t => { - const onDrag = spy(); - const rnd = mount(); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - t.is(onDrag.callCount, 1); - t.is(onDrag.firstCall.args[1].x, 300); - t.is(onDrag.firstCall.args[1].y, 320); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(300px, 320px)'), - -1, - ); -}); - -test('should call onDragStop when drag stop', async t => { - const onDragStop = spy(); - const rnd = mount(); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - mouseUp(100, 120); - t.is(onDragStop.callCount, 1); - t.is(onDragStop.firstCall.args[1].x, 200); - t.is(onDragStop.firstCall.args[1].y, 220); -}); - -test('should dragging disabled when axis equals none', async t => { - const onDrag = spy(); - const rnd = mount(, { - attachTo: document.querySelector('div'), - }); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - t.is(onDrag.callCount, 1); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(100px, 100px)'), - -1, - ); -}); - -test('should enable dragging only x when axis equals x', async t => { - const onDrag = spy(); - const rnd = mount(, { - attachTo: document.querySelector('div'), - }); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - t.is(onDrag.callCount, 1); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(300px, 100px)'), - -1, - ); -}); - -test('should enable dragging only y when axis equals y', async t => { - const onDrag = spy(); - const rnd = mount(, { - attachTo: document.querySelector('div'), - }); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - t.is(onDrag.callCount, 1); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(100px, 320px)'), - -1, - ); -}); - -test('should enable dragging both x & y when axis equals both', async t => { - const onDrag = spy(); - const rnd = mount(, { - attachTo: document.querySelector('div'), - }); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - t.is(onDrag.callCount, 1); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(300px, 320px)'), - -1, - ); -}); - -test('should snap when dragging smaller than threshold', async t => { - const rnd = mount(, { - attachTo: document.querySelector('div'), - }); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(14, 49); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(100px, 100px)'), - -1, - ); -}); - -test('should snap when dragging larger than threshold', async t => { - const rnd = mount(, { - attachTo: document.querySelector('div'), - }); - rnd - .find('div') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(15, 50); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(130px, 200px)'), - -1, - ); -}); - -test('should limit position by parent bounds', async t => { - const rnd = mount( -
- -
, - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div') - .at(0) - .childAt(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(1000, 1000); - t.not( - rnd - .childAt(0) - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(700px, 500px)'), - -1, - ); -}); - -test('should limit position by selector bounds', async t => { - const rnd = mount( -
-
- -
-
, - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div') - .at(0) - .childAt(0) - .childAt(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(2000, 2000); - t.not( - rnd - .childAt(0) - .childAt(0) - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(900px, 700px)'), - -1, - ); -}); - -test('Should box width and height equal 100px', async t => { - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - t.is(rnd.getDOMNode().style.width, '100px'); - t.is(rnd.getDOMNode().style.height, '100px'); -}); - -test('Should call onResizeStart when mousedown', async t => { - const onResizeStart = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - t.is(onResizeStart.callCount, 1); - t.is(onResizeStart.getCall(0).args[1], 'right'); -}); - -test('should call onResize with expected args when resize direction right', async t => { - const onResize = spy(); - const onResizeStart = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - t.is(onResize.callCount, 1); - t.truthy(onResize.getCall(0).args[0] instanceof Event); - t.is(onResize.getCall(0).args[1], 'right'); - t.deepEqual(onResize.getCall(0).args[2].clientWidth, 300); - t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); - t.deepEqual(onResize.getCall(0).args[3], { width: 200, height: 0 }); -}); - -test('should call onResizeStop with expected args when resize direction right', async t => { - const onResize = spy(); - const onResizeStop = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(200, 220); - mouseUp(200, 220); - t.is(onResizeStop.callCount, 1); - t.truthy(onResize.getCall(0).args[0] instanceof Event); - t.is(onResize.getCall(0).args[1], 'right'); - t.deepEqual(onResize.getCall(0).args[2].clientWidth, 300); - t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); - t.deepEqual(onResize.getCall(0).args[3], { width: 200, height: 0 }); -}); - -test('should move x when resizing left', async t => { - const onResize = spy(); - const onResizeStart = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(-50, 0); - t.is(onResize.callCount, 1); - t.is(onResize.getCall(0).args[1], 'left'); - t.deepEqual(onResize.getCall(0).args[2].clientWidth, 150); - t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); - t.deepEqual(onResize.getCall(0).args[3], { width: 50, height: 0 }); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(50px, 100px)'), - -1, - ); -}); - -test('should move y when resizing top', async t => { - const onResize = spy(); - const onResizeStart = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(0, -50); - t.is(onResize.callCount, 1); - t.is(onResize.getCall(0).args[1], 'top'); - t.deepEqual(onResize.getCall(0).args[2].clientWidth, 100); - t.deepEqual(onResize.getCall(0).args[2].clientHeight, 150); - t.deepEqual(onResize.getCall(0).args[3], { width: 0, height: 50 }); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(100px, 50px)'), - -1, - ); -}); - -test('should snapped by original grid when x axis resizing smaller then threshold', async t => { - const onResize = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(9, 0); - t.deepEqual(onResize.getCall(0).args[2].clientWidth, 100); -}); - -test('should snapped by original grid when x axis resizing larger then threshold', async t => { - const onResize = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(10, 0); - t.deepEqual(onResize.getCall(0).args[2].clientWidth, 120); -}); - -test('should snapped by original grid when y axis resizing smaller then threshold', async t => { - const onResize = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(0, 9); - t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100); -}); - -test('should snapped by original grid when y axis resizing larger then threshold', async t => { - const onResize = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(0, 10); - t.deepEqual(onResize.getCall(0).args[2].clientHeight, 120); -}); - -test('should snapped by original grid when y axis resizing larger then threshold', async t => { - const onResize = spy(); - const rnd = mount( - , - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(20, 10); - // TODO: It'a resizable-box grid bug?? - t.deepEqual(onResize.getCall(0).args[2].clientWidth, 120); - t.deepEqual(onResize.getCall(0).args[2].clientHeight, 120); -}); - -test('should clamped by parent size', async t => { - const rnd = mount( -
- -
, - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(1200, 1200); - t.is(rnd.childAt(0).getDOMNode().style.width, '800px'); - t.is(rnd.childAt(0).getDOMNode().style.height, '600px'); -}); - -test('should clamped by selector size', async t => { - const rnd = mount( -
-
- -
-
, - { attachTo: document.querySelector('div') }, - ); - rnd - .find('div.handler') - .at(0) - .simulate('mousedown', { clientX: 0, clientY: 0 }); - mouseMove(2000, 2000); - t.is( - rnd - .childAt(0) - .childAt(0) - .getDOMNode().style.width, - '1000px', - ); - t.is( - rnd - .childAt(0) - .childAt(0) - .getDOMNode().style.height, - '800px', - ); -}); - -test('should get rnd updated when updatePosition invoked', async t => { - const rnd = mount(); - rnd.instance().updatePosition({ x: 200, y: 300 }); - t.not( - rnd - .getDOMNode() - .getAttribute('style') - .indexOf('transform: translate(200px, 300px)'), - -1, - ); -}); - -test('should get rnd updated when updateSize invoked', async t => { - const rnd = mount(); - rnd.instance().updateSize({ width: 200, height: 300 }); - t.is(rnd.getDOMNode().style.width, '200px'); - t.is(rnd.getDOMNode().style.height, '300px'); -}); - -test('should get rnd updated when updateZIndex invoked', async t => { - const rnd = mount(); - rnd.instance().updateZIndex(300); - t.is( - rnd - .find('div') - .at(0) - .getDOMNode().style.zIndex, - '300', - ); -}); From a73243de216175e41f60cd112370a11c2c1803ae Mon Sep 17 00:00:00 2001 From: nathb Date: Sun, 25 Mar 2018 14:28:39 +0200 Subject: [PATCH 10/13] ^ --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 2e7a4d6d..f9d3d667 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ example/dist/ -#lib/ +lib/ npm-debug.log From a9c5b7ef55256d222e0f4a0dc828829164e16aa1 Mon Sep 17 00:00:00 2001 From: nathb Date: Sun, 25 Mar 2018 14:35:12 +0200 Subject: [PATCH 11/13] ^ --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 1a50a100..4ebf95d1 100755 --- a/src/index.js +++ b/src/index.js @@ -140,6 +140,7 @@ type Props = { cancel?: boolean, enableUserSelectHack?: boolean, _freeBottomBounds?: boolean, // Back door for react-elastic-grid. + absolutePos: boolean, // allow initial absolute render for ssr }; const resizableStyle = { From b5d0ba5f73f5f97c80313e939e82e51bafc87395 Mon Sep 17 00:00:00 2001 From: nathb Date: Sat, 12 May 2018 08:41:28 +0200 Subject: [PATCH 12/13] ^ --- .gitignore | 2 +- lib/index.es5.js | 410 ++++++++++++++++++++++++++++++++++++++ lib/index.es5.js.map | 1 + lib/index.js | 404 ++++++++++++++++++++++++++++++++++++++ lib/index.js.map | 1 + lib/react-rnd.umd.js | 412 +++++++++++++++++++++++++++++++++++++++ lib/react-rnd.umd.js.map | 1 + 7 files changed, 1230 insertions(+), 1 deletion(-) create mode 100644 lib/index.es5.js create mode 100644 lib/index.es5.js.map create mode 100644 lib/index.js create mode 100644 lib/index.js.map create mode 100644 lib/react-rnd.umd.js create mode 100644 lib/react-rnd.umd.js.map diff --git a/.gitignore b/.gitignore index f9d3d667..2e7a4d6d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ example/dist/ -lib/ +#lib/ npm-debug.log diff --git a/lib/index.es5.js b/lib/index.es5.js new file mode 100644 index 00000000..3615cf2e --- /dev/null +++ b/lib/index.es5.js @@ -0,0 +1,410 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } + +var React = require('react'); +var reactDom = require('react-dom'); +var Draggable = _interopDefault(require('react-draggable')); +var Resizable = _interopDefault(require('re-resizable')); + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +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 _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 inherits = function (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 possibleConstructorReturn = function (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; +}; + +var resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0 +}; + +var Rnd = function (_React$Component) { + inherits(Rnd, _React$Component); + + function Rnd(props) { + classCallCheck(this, Rnd); + + var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); + + _this.state = { + z: props.z, + original: { + x: 0, + y: 0 + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false + }; + _this.onResizeStart = _this.onResizeStart.bind(_this); + _this.onResize = _this.onResize.bind(_this); + _this.onResizeStop = _this.onResizeStop.bind(_this); + _this.onDragStart = _this.onDragStart.bind(_this); + _this.onDrag = _this.onDrag.bind(_this); + _this.onDragStop = _this.onDragStop.bind(_this); + _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); + return _this; + } + + createClass(Rnd, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.setParentPosition(); + } + }, { + key: 'getParentSize', + value: function getParentSize() { + return this.resizable.getParentSize(); + } + }, { + key: 'getMaxSizesFromProps', + value: function getMaxSizesFromProps() { + var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth: maxWidth, maxHeight: maxHeight }; + } + }, { + key: 'getSelfElement', + value: function getSelfElement() { + if (!this) return null; + return reactDom.findDOMNode(this); + } + }, { + key: 'setParentPosition', + value: function setParentPosition() { + var element = this.getSelfElement(); + if (element instanceof Element) { + var parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + }, { + key: 'onDragStart', + value: function onDragStart(e, data) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + var parentRect = parent.getBoundingClientRect(); + var parentLeft = parentRect.left; + var parentTop = parentRect.top; + var left = targetLeft - parentLeft; + var top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top: top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), + left: left + } + }); + } + }, { + key: 'onDrag', + value: function onDrag(e, data) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + }, { + key: 'onDragStop', + value: function onDragStop(e, data) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + }, { + key: 'onResizeStart', + value: function onResizeStart(e, dir, refToElement) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y } + }); + if (this.props.bounds) { + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + var self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + var _getMaxSizesFromProps = this.getMaxSizesFromProps(), + _maxWidth = _getMaxSizesFromProps.maxWidth, + _maxHeight = _getMaxSizesFromProps.maxHeight; + + var parentSize = this.getParentSize(); + if (_maxWidth && typeof _maxWidth === 'string') { + if (_maxWidth.endsWith('%')) { + var ratio = Number(_maxWidth.replace('%', '')) / 100; + _maxWidth = parentSize.width * ratio; + } else if (_maxWidth.endsWith('px')) { + _maxWidth = Number(_maxWidth.replace('px', '')); + } + } + if (_maxHeight && typeof _maxHeight === 'string') { + if (_maxHeight.endsWith('%')) { + var _ratio = Number(_maxHeight.replace('%', '')) / 100; + _maxHeight = parentSize.width * _ratio; + } else if (_maxHeight.endsWith('px')) { + _maxHeight = Number(_maxHeight.replace('px', '')); + } + } + var selfRect = self.getBoundingClientRect(); + var selfLeft = selfRect.left; + var selfTop = selfRect.top; + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + var max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); + } + if (/right/i.test(dir)) { + var _max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); + } + if (/top/i.test(dir) && this.resizable) { + var _max2 = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 + }); + } + if (/bottom/i.test(dir)) { + var _max3 = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + }, { + key: 'onResize', + value: function onResize(e, direction, refToResizableElement, delta) { + var x = void 0; + var y = void 0; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x: x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y: y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y + }); + } + } + }, { + key: 'onResizeStop', + value: function onResizeStop(e, direction, refToResizableElement, delta) { + var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), + maxWidth = _getMaxSizesFromProps2.maxWidth, + maxHeight = _getMaxSizesFromProps2.maxHeight; + + this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); + if (this.props.onResizeStop) { + var _position = { + x: this.draggable.state.x, + y: this.draggable.state.y + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); + } + } + }, { + key: 'updateSize', + value: function updateSize(size) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + }, { + key: 'updatePosition', + value: function updatePosition(position) { + this.draggable.setState(position); + } + }, { + key: 'updateZIndex', + value: function updateZIndex(z) { + this.setState({ z: z }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + var innerStyle = _extends({}, resizableStyle, { + zIndex: this.state.z + }, cursorStyle, this.props.style); + // HACK: Wait for setting relative to parent element + // skip if props.absolutePos == true ( SSR need initial render ). + if (!this.state.isMounted && !this.props.absolutePos) return React.createElement('div', null); + var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return React.createElement( + Draggable, + { + ref: function ref(c) { + _this2.draggable = c; + }, + handle: this.props.dragHandleClassName, + defaultPosition: this.props.default, + onStart: this.onDragStart, + onDrag: this.onDrag, + onStop: this.onDragStop, + axis: this.props.dragAxis, + disabled: this.props.disableDragging, + grid: this.props.dragGrid, + bounds: this.props.bounds ? this.state.bounds : undefined, + position: this.props.position, + enableUserSelectHack: this.props.enableUserSelectHack, + cancel: this.props.cancel + }, + React.createElement( + Resizable, + _extends({}, this.props.extendsProps, { + className: this.props.className, + ref: function ref(c) { + _this2.resizable = c; + }, + defaultSize: this.props.default, + size: this.props.size, + enable: this.props.enableResizing, + onResizeStart: this.onResizeStart, + onResize: this.onResize, + onResizeStop: this.onResizeStop, + style: innerStyle, + minWidth: this.props.minWidth, + minHeight: this.props.minHeight, + maxWidth: this.state.maxWidth, + maxHeight: maxHeight, + grid: this.props.resizeGrid, + handleWrapperClass: this.props.resizeHandleWrapperClass, + handleWrapperStyle: this.props.resizeHandleWrapperStyle, + lockAspectRatio: this.props.lockAspectRatio, + lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, + lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, + handleStyles: this.props.resizeHandleStyles, + handleClasses: this.props.resizeHandleClasses + }), + this.props.children + ) + ); + } + }]); + return Rnd; +}(React.Component); + +Rnd.defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: function onResizeStart() {}, + onResize: function onResize() {}, + onResizeStop: function onResizeStop() {}, + onDragStart: function onDragStart() {}, + onDrag: function onDrag() {}, + onDragStop: function onDragStop() {}, + absolutePos: false +}; + +exports.default = Rnd; +//# sourceMappingURL=index.es5.js.map diff --git a/lib/index.es5.js.map b/lib/index.es5.js.map new file mode 100644 index 00000000..4c6b01c6 --- /dev/null +++ b/lib/index.es5.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.es5.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n absolutePos: boolean, // allow initial absolute render for ssr\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {},\n absolutePos: false,\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element\n // skip if props.absolutePos == true ( SSR need initial render ).\n if (!this.state.isMounted && !this.props.absolutePos) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","absolutePos","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 00000000..622ba45a --- /dev/null +++ b/lib/index.js @@ -0,0 +1,404 @@ +import { createElement, Component } from 'react'; +import { findDOMNode } from 'react-dom'; +import Draggable from 'react-draggable'; +import Resizable from 're-resizable'; + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +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 _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 inherits = function (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 possibleConstructorReturn = function (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; +}; + +var resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0 +}; + +var Rnd = function (_React$Component) { + inherits(Rnd, _React$Component); + + function Rnd(props) { + classCallCheck(this, Rnd); + + var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); + + _this.state = { + z: props.z, + original: { + x: 0, + y: 0 + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false + }; + _this.onResizeStart = _this.onResizeStart.bind(_this); + _this.onResize = _this.onResize.bind(_this); + _this.onResizeStop = _this.onResizeStop.bind(_this); + _this.onDragStart = _this.onDragStart.bind(_this); + _this.onDrag = _this.onDrag.bind(_this); + _this.onDragStop = _this.onDragStop.bind(_this); + _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); + return _this; + } + + createClass(Rnd, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.setParentPosition(); + } + }, { + key: 'getParentSize', + value: function getParentSize() { + return this.resizable.getParentSize(); + } + }, { + key: 'getMaxSizesFromProps', + value: function getMaxSizesFromProps() { + var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth: maxWidth, maxHeight: maxHeight }; + } + }, { + key: 'getSelfElement', + value: function getSelfElement() { + if (!this) return null; + return findDOMNode(this); + } + }, { + key: 'setParentPosition', + value: function setParentPosition() { + var element = this.getSelfElement(); + if (element instanceof Element) { + var parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + }, { + key: 'onDragStart', + value: function onDragStart(e, data) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + var parentRect = parent.getBoundingClientRect(); + var parentLeft = parentRect.left; + var parentTop = parentRect.top; + var left = targetLeft - parentLeft; + var top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top: top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), + left: left + } + }); + } + }, { + key: 'onDrag', + value: function onDrag(e, data) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + }, { + key: 'onDragStop', + value: function onDragStop(e, data) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + }, { + key: 'onResizeStart', + value: function onResizeStart(e, dir, refToElement) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y } + }); + if (this.props.bounds) { + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + var self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + var _getMaxSizesFromProps = this.getMaxSizesFromProps(), + _maxWidth = _getMaxSizesFromProps.maxWidth, + _maxHeight = _getMaxSizesFromProps.maxHeight; + + var parentSize = this.getParentSize(); + if (_maxWidth && typeof _maxWidth === 'string') { + if (_maxWidth.endsWith('%')) { + var ratio = Number(_maxWidth.replace('%', '')) / 100; + _maxWidth = parentSize.width * ratio; + } else if (_maxWidth.endsWith('px')) { + _maxWidth = Number(_maxWidth.replace('px', '')); + } + } + if (_maxHeight && typeof _maxHeight === 'string') { + if (_maxHeight.endsWith('%')) { + var _ratio = Number(_maxHeight.replace('%', '')) / 100; + _maxHeight = parentSize.width * _ratio; + } else if (_maxHeight.endsWith('px')) { + _maxHeight = Number(_maxHeight.replace('px', '')); + } + } + var selfRect = self.getBoundingClientRect(); + var selfLeft = selfRect.left; + var selfTop = selfRect.top; + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + var max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); + } + if (/right/i.test(dir)) { + var _max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); + } + if (/top/i.test(dir) && this.resizable) { + var _max2 = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 + }); + } + if (/bottom/i.test(dir)) { + var _max3 = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + }, { + key: 'onResize', + value: function onResize(e, direction, refToResizableElement, delta) { + var x = void 0; + var y = void 0; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x: x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y: y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y + }); + } + } + }, { + key: 'onResizeStop', + value: function onResizeStop(e, direction, refToResizableElement, delta) { + var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), + maxWidth = _getMaxSizesFromProps2.maxWidth, + maxHeight = _getMaxSizesFromProps2.maxHeight; + + this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); + if (this.props.onResizeStop) { + var _position = { + x: this.draggable.state.x, + y: this.draggable.state.y + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); + } + } + }, { + key: 'updateSize', + value: function updateSize(size) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + }, { + key: 'updatePosition', + value: function updatePosition(position) { + this.draggable.setState(position); + } + }, { + key: 'updateZIndex', + value: function updateZIndex(z) { + this.setState({ z: z }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + var innerStyle = _extends({}, resizableStyle, { + zIndex: this.state.z + }, cursorStyle, this.props.style); + // HACK: Wait for setting relative to parent element + // skip if props.absolutePos == true ( SSR need initial render ). + if (!this.state.isMounted && !this.props.absolutePos) return createElement('div', null); + var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return createElement( + Draggable, + { + ref: function ref(c) { + _this2.draggable = c; + }, + handle: this.props.dragHandleClassName, + defaultPosition: this.props.default, + onStart: this.onDragStart, + onDrag: this.onDrag, + onStop: this.onDragStop, + axis: this.props.dragAxis, + disabled: this.props.disableDragging, + grid: this.props.dragGrid, + bounds: this.props.bounds ? this.state.bounds : undefined, + position: this.props.position, + enableUserSelectHack: this.props.enableUserSelectHack, + cancel: this.props.cancel + }, + createElement( + Resizable, + _extends({}, this.props.extendsProps, { + className: this.props.className, + ref: function ref(c) { + _this2.resizable = c; + }, + defaultSize: this.props.default, + size: this.props.size, + enable: this.props.enableResizing, + onResizeStart: this.onResizeStart, + onResize: this.onResize, + onResizeStop: this.onResizeStop, + style: innerStyle, + minWidth: this.props.minWidth, + minHeight: this.props.minHeight, + maxWidth: this.state.maxWidth, + maxHeight: maxHeight, + grid: this.props.resizeGrid, + handleWrapperClass: this.props.resizeHandleWrapperClass, + handleWrapperStyle: this.props.resizeHandleWrapperStyle, + lockAspectRatio: this.props.lockAspectRatio, + lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, + lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, + handleStyles: this.props.resizeHandleStyles, + handleClasses: this.props.resizeHandleClasses + }), + this.props.children + ) + ); + } + }]); + return Rnd; +}(Component); + +Rnd.defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: function onResizeStart() {}, + onResize: function onResize() {}, + onResizeStop: function onResizeStop() {}, + onDragStart: function onDragStart() {}, + onDrag: function onDrag() {}, + onDragStop: function onDragStop() {}, + absolutePos: false +}; + +export default Rnd; +//# sourceMappingURL=index.js.map diff --git a/lib/index.js.map b/lib/index.js.map new file mode 100644 index 00000000..8b1d9913 --- /dev/null +++ b/lib/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n absolutePos: boolean, // allow initial absolute render for ssr\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {},\n absolutePos: false,\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element\n // skip if props.absolutePos == true ( SSR need initial render ).\n if (!this.state.isMounted && !this.props.absolutePos) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","absolutePos","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/react-rnd.umd.js b/lib/react-rnd.umd.js new file mode 100644 index 00000000..6323ed5b --- /dev/null +++ b/lib/react-rnd.umd.js @@ -0,0 +1,412 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) : + typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react-draggable', 're-resizable'], factory) : + (factory((global['react-rnd'] = {}),global.React,global.ReactDOM,global.Draggable,global.Resizable)); +}(this, (function (exports,React,reactDom,Draggable,Resizable) { 'use strict'; + + Draggable = Draggable && Draggable.hasOwnProperty('default') ? Draggable['default'] : Draggable; + Resizable = Resizable && Resizable.hasOwnProperty('default') ? Resizable['default'] : Resizable; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + 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 _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 inherits = function (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 possibleConstructorReturn = function (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; + }; + + var resizableStyle = { + width: 'auto', + height: 'auto', + display: 'inline-block', + position: 'absolute', + top: 0, + left: 0 + }; + + var Rnd = function (_React$Component) { + inherits(Rnd, _React$Component); + + function Rnd(props) { + classCallCheck(this, Rnd); + + var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props)); + + _this.state = { + z: props.z, + original: { + x: 0, + y: 0 + }, + bounds: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + maxWidth: props.maxWidth, + maxHeight: props.maxHeight, + isMounted: false + }; + _this.onResizeStart = _this.onResizeStart.bind(_this); + _this.onResize = _this.onResize.bind(_this); + _this.onResizeStop = _this.onResizeStop.bind(_this); + _this.onDragStart = _this.onDragStart.bind(_this); + _this.onDrag = _this.onDrag.bind(_this); + _this.onDragStop = _this.onDragStop.bind(_this); + _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this); + return _this; + } + + createClass(Rnd, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.z !== nextProps.z) { + this.setState({ z: nextProps.z }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.setParentPosition(); + } + }, { + key: 'getParentSize', + value: function getParentSize() { + return this.resizable.getParentSize(); + } + }, { + key: 'getMaxSizesFromProps', + value: function getMaxSizesFromProps() { + var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth; + var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight; + return { maxWidth: maxWidth, maxHeight: maxHeight }; + } + }, { + key: 'getSelfElement', + value: function getSelfElement() { + if (!this) return null; + return reactDom.findDOMNode(this); + } + }, { + key: 'setParentPosition', + value: function setParentPosition() { + var element = this.getSelfElement(); + if (element instanceof Element) { + var parent = element.parentNode; + if (!parent || typeof window === 'undefined') return; + if (!(parent instanceof HTMLElement)) return; + if (getComputedStyle(parent).position !== 'static') { + this.setState({ isMounted: true }); + return; + } + parent.style.position = 'relative'; + this.setState({ isMounted: true }); + } + } + }, { + key: 'onDragStart', + value: function onDragStart(e, data) { + if (this.props.onDragStart) { + this.props.onDragStart(e, data); + } + if (!this.props.bounds) return; + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) { + return; + } + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + var parentRect = parent.getBoundingClientRect(); + var parentLeft = parentRect.left; + var parentTop = parentRect.top; + var left = targetLeft - parentLeft; + var top = targetTop - parentTop; + if (!this.resizable) return; + this.setState({ + bounds: { + top: top, + right: left + (target.offsetWidth - this.resizable.size.width), + bottom: this.props._freeBottomBounds // eslint-disable-line + ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height), + left: left + } + }); + } + }, { + key: 'onDrag', + value: function onDrag(e, data) { + if (this.props.onDrag) { + this.props.onDrag(e, data); + } + } + }, { + key: 'onDragStop', + value: function onDragStop(e, data) { + if (this.props.onDragStop) { + this.props.onDragStop(e, data); + } + } + }, { + key: 'onResizeStart', + value: function onResizeStart(e, dir, refToElement) { + e.stopPropagation(); + this.setState({ + original: { x: this.draggable.state.x, y: this.draggable.state.y } + }); + if (this.props.bounds) { + var parent = this.resizable && this.resizable.parentNode; + var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds); + var self = this.getSelfElement(); + if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) { + var _getMaxSizesFromProps = this.getMaxSizesFromProps(), + _maxWidth = _getMaxSizesFromProps.maxWidth, + _maxHeight = _getMaxSizesFromProps.maxHeight; + + var parentSize = this.getParentSize(); + if (_maxWidth && typeof _maxWidth === 'string') { + if (_maxWidth.endsWith('%')) { + var ratio = Number(_maxWidth.replace('%', '')) / 100; + _maxWidth = parentSize.width * ratio; + } else if (_maxWidth.endsWith('px')) { + _maxWidth = Number(_maxWidth.replace('px', '')); + } + } + if (_maxHeight && typeof _maxHeight === 'string') { + if (_maxHeight.endsWith('%')) { + var _ratio = Number(_maxHeight.replace('%', '')) / 100; + _maxHeight = parentSize.width * _ratio; + } else if (_maxHeight.endsWith('px')) { + _maxHeight = Number(_maxHeight.replace('px', '')); + } + } + var selfRect = self.getBoundingClientRect(); + var selfLeft = selfRect.left; + var selfTop = selfRect.top; + var targetRect = target.getBoundingClientRect(); + var targetLeft = targetRect.left; + var targetTop = targetRect.top; + if (/left/i.test(dir) && this.resizable) { + var max = selfLeft - targetLeft + this.resizable.size.width; + this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max }); + } + if (/right/i.test(dir)) { + var _max = target.offsetWidth + (targetLeft - selfLeft); + this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max }); + } + if (/top/i.test(dir) && this.resizable) { + var _max2 = selfTop - targetTop + this.resizable.size.height; + this.setState({ + maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 + }); + } + if (/bottom/i.test(dir)) { + var _max3 = target.offsetHeight + (targetTop - selfTop); + this.setState({ + maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 + }); + } + } + } else { + this.setState({ + maxWidth: this.props.maxWidth, + maxHeight: this.props.maxHeight + }); + } + if (this.props.onResizeStart) { + this.props.onResizeStart(e, dir, refToElement); + } + } + }, { + key: 'onResize', + value: function onResize(e, direction, refToResizableElement, delta) { + var x = void 0; + var y = void 0; + if (/left/i.test(direction)) { + x = this.state.original.x - delta.width; + this.draggable.setState({ x: x }); + } + if (/top/i.test(direction)) { + y = this.state.original.y - delta.height; + this.draggable.setState({ y: y }); + } + if (this.props.onResize) { + this.props.onResize(e, direction, refToResizableElement, delta, { + x: x || this.draggable.state.x, + y: y || this.draggable.state.y + }); + } + } + }, { + key: 'onResizeStop', + value: function onResizeStop(e, direction, refToResizableElement, delta) { + var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(), + maxWidth = _getMaxSizesFromProps2.maxWidth, + maxHeight = _getMaxSizesFromProps2.maxHeight; + + this.setState({ maxWidth: maxWidth, maxHeight: maxHeight }); + if (this.props.onResizeStop) { + var _position = { + x: this.draggable.state.x, + y: this.draggable.state.y + }; + this.props.onResizeStop(e, direction, refToResizableElement, delta, _position); + } + } + }, { + key: 'updateSize', + value: function updateSize(size) { + if (!this.resizable) return; + this.resizable.updateSize({ width: size.width, height: size.height }); + } + }, { + key: 'updatePosition', + value: function updatePosition(position) { + this.draggable.setState(position); + } + }, { + key: 'updateZIndex', + value: function updateZIndex(z) { + this.setState({ z: z }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' }; + var innerStyle = _extends({}, resizableStyle, { + zIndex: this.state.z + }, cursorStyle, this.props.style); + // HACK: Wait for setting relative to parent element + // skip if props.absolutePos == true ( SSR need initial render ). + if (!this.state.isMounted && !this.props.absolutePos) return React.createElement('div', null); + var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line + return React.createElement( + Draggable, + { + ref: function ref(c) { + _this2.draggable = c; + }, + handle: this.props.dragHandleClassName, + defaultPosition: this.props.default, + onStart: this.onDragStart, + onDrag: this.onDrag, + onStop: this.onDragStop, + axis: this.props.dragAxis, + disabled: this.props.disableDragging, + grid: this.props.dragGrid, + bounds: this.props.bounds ? this.state.bounds : undefined, + position: this.props.position, + enableUserSelectHack: this.props.enableUserSelectHack, + cancel: this.props.cancel + }, + React.createElement( + Resizable, + _extends({}, this.props.extendsProps, { + className: this.props.className, + ref: function ref(c) { + _this2.resizable = c; + }, + defaultSize: this.props.default, + size: this.props.size, + enable: this.props.enableResizing, + onResizeStart: this.onResizeStart, + onResize: this.onResize, + onResizeStop: this.onResizeStop, + style: innerStyle, + minWidth: this.props.minWidth, + minHeight: this.props.minHeight, + maxWidth: this.state.maxWidth, + maxHeight: maxHeight, + grid: this.props.resizeGrid, + handleWrapperClass: this.props.resizeHandleWrapperClass, + handleWrapperStyle: this.props.resizeHandleWrapperStyle, + lockAspectRatio: this.props.lockAspectRatio, + lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, + lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, + handleStyles: this.props.resizeHandleStyles, + handleClasses: this.props.resizeHandleClasses + }), + this.props.children + ) + ); + } + }]); + return Rnd; + }(React.Component); + + Rnd.defaultProps = { + maxWidth: Number.MAX_SAFE_INTEGER, + maxHeight: Number.MAX_SAFE_INTEGER, + onResizeStart: function onResizeStart() {}, + onResize: function onResize() {}, + onResizeStop: function onResizeStop() {}, + onDragStart: function onDragStart() {}, + onDrag: function onDrag() {}, + onDragStop: function onDragStop() {}, + absolutePos: false + }; + + exports.default = Rnd; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); +//# sourceMappingURL=react-rnd.umd.js.map diff --git a/lib/react-rnd.umd.js.map b/lib/react-rnd.umd.js.map new file mode 100644 index 00000000..781cf815 --- /dev/null +++ b/lib/react-rnd.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"react-rnd.umd.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n absolutePos: boolean, // allow initial absolute render for ssr\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {},\n absolutePos: false,\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element\n // skip if props.absolutePos == true ( SSR need initial render ).\n if (!this.state.isMounted && !this.props.absolutePos) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","width","height","display","position","top","left","Rnd","props","state","z","original","x","y","bounds","right","bottom","maxWidth","maxHeight","isMounted","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","style","e","data","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","targetTop","parentRect","parentLeft","parentTop","offsetWidth","size","_freeBottomBounds","offsetHeight","dir","refToElement","stopPropagation","draggable","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","zIndex","absolutePos","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file From cd87ce50b508f452df6565f08ace48e1fb5189b8 Mon Sep 17 00:00:00 2001 From: nathb Date: Sat, 12 May 2018 09:28:34 +0200 Subject: [PATCH 13/13] ^ --- lib/index.es5.js | 8 +++----- lib/index.es5.js.map | 2 +- lib/index.js | 8 +++----- lib/index.js.map | 2 +- lib/react-rnd.umd.js | 8 +++----- lib/react-rnd.umd.js.map | 2 +- 6 files changed, 12 insertions(+), 18 deletions(-) diff --git a/lib/index.es5.js b/lib/index.es5.js index 3615cf2e..34f4212a 100644 --- a/lib/index.es5.js +++ b/lib/index.es5.js @@ -336,9 +336,8 @@ var Rnd = function (_React$Component) { var innerStyle = _extends({}, resizableStyle, { zIndex: this.state.z }, cursorStyle, this.props.style); - // HACK: Wait for setting relative to parent element - // skip if props.absolutePos == true ( SSR need initial render ). - if (!this.state.isMounted && !this.props.absolutePos) return React.createElement('div', null); + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null); var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line return React.createElement( Draggable, @@ -402,8 +401,7 @@ Rnd.defaultProps = { onResizeStop: function onResizeStop() {}, onDragStart: function onDragStart() {}, onDrag: function onDrag() {}, - onDragStop: function onDragStop() {}, - absolutePos: false + onDragStop: function onDragStop() {} }; exports.default = Rnd; diff --git a/lib/index.es5.js.map b/lib/index.es5.js.map index 4c6b01c6..0b2c97b0 100644 --- a/lib/index.es5.js.map +++ b/lib/index.es5.js.map @@ -1 +1 @@ -{"version":3,"file":"index.es5.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n absolutePos: boolean, // allow initial absolute render for ssr\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {},\n absolutePos: false,\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element\n // skip if props.absolutePos == true ( SSR need initial render ).\n if (!this.state.isMounted && !this.props.absolutePos) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","absolutePos","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJA,IAAMA,iBAAiB;SACd,MADc;UAEb,MAFa;WAGZ,cAHY;YAIX,UAJW;OAKhB,CALgB;QAMf;CANR;;IASqBC;;;eA2BPC,KAAZ,EAA0B;;;yGAClBA,KADkB;;UAEnBC,KAAL,GAAa;SACRD,MAAME,CADE;gBAED;WACL,CADK;WAEL;OAJM;cAMH;aACD,CADC;eAEC,CAFD;gBAGE,CAHF;cAIA;OAVG;gBAYDF,MAAMG,QAZL;iBAaAH,MAAMI,SAbN;iBAcA;KAdb;UAgBKC,aAAL,GAAqB,MAAKA,aAAL,CAAmBC,IAAnB,OAArB;UACKC,QAAL,GAAgB,MAAKA,QAAL,CAAcD,IAAd,OAAhB;UACKE,YAAL,GAAoB,MAAKA,YAAL,CAAkBF,IAAlB,OAApB;UACKG,WAAL,GAAmB,MAAKA,WAAL,CAAiBH,IAAjB,OAAnB;UACKI,MAAL,GAAc,MAAKA,MAAL,CAAYJ,IAAZ,OAAd;UACKK,UAAL,GAAkB,MAAKA,UAAL,CAAgBL,IAAhB,OAAlB;UACKM,oBAAL,GAA4B,MAAKA,oBAAL,CAA0BN,IAA1B,OAA5B;;;;;;8CAGwBO,WAAkB;UACtC,KAAKb,KAAL,CAAWE,CAAX,KAAiBW,UAAUX,CAA/B,EAAkC;aAC3BY,QAAL,CAAc,EAAEZ,GAAGW,UAAUX,CAAf,EAAd;;;;;wCAIgB;WACba,iBAAL;;;;oCAGiD;aACzC,KAAKC,SAAN,CAAsBC,aAAtB,EAAP;;;;2CAME;UACId,WAAW,OAAO,KAAKH,KAAL,CAAWG,QAAlB,KAA+B,WAA/B,GAA6Ce,OAAOC,gBAApD,GAAuE,KAAKnB,KAAL,CAAWG,QAAnG;UACMC,YAAY,OAAO,KAAKJ,KAAL,CAAWI,SAAlB,KAAgC,WAAhC,GAA8Cc,OAAOC,gBAArD,GAAwE,KAAKnB,KAAL,CAAWI,SAArG;aACO,EAAED,kBAAF,EAAYC,oBAAZ,EAAP;;;;qCAGsC;UAClC,CAAC,IAAL,EAAW,OAAO,IAAP;aACJgB,qBAAY,IAAZ,CAAP;;;;wCAGkB;UACZC,UAAU,KAAKC,cAAL,EAAhB;UACID,mBAAmBE,OAAvB,EAAgC;YACxBC,SAASH,QAAQI,UAAvB;YACI,CAACD,MAAD,IAAW,OAAOE,MAAP,KAAkB,WAAjC,EAA8C;YAC1C,EAAEF,kBAAkBG,WAApB,CAAJ,EAAsC;YAClCC,iBAAiBJ,MAAjB,EAAyBK,QAAzB,KAAsC,QAA1C,EAAoD;eAC7Cf,QAAL,CAAc,EAAEgB,WAAW,IAAb,EAAd;;;eAGKC,KAAP,CAAaF,QAAb,GAAwB,UAAxB;aACKf,QAAL,CAAc,EAAEgB,WAAW,IAAb,EAAd;;;;;gCAIQE,GAAUC,MAAqB;UACrC,KAAKjC,KAAL,CAAWS,WAAf,EAA4B;aACrBT,KAAL,CAAWS,WAAX,CAAuBuB,CAAvB,EAA0BC,IAA1B;;UAEE,CAAC,KAAKjC,KAAL,CAAWkC,MAAhB,EAAwB;UAClBV,SAAS,KAAKR,SAAL,IAAkB,KAAKA,SAAL,CAAeS,UAAhD;UACMU,SAAS,KAAKnC,KAAL,CAAWkC,MAAX,KAAsB,QAAtB,GAAiCV,MAAjC,GAA0CY,SAASC,aAAT,CAAuB,KAAKrC,KAAL,CAAWkC,MAAlC,CAAzD;UACI,EAAEC,kBAAkBR,WAApB,KAAoC,EAAEH,kBAAkBG,WAApB,CAAxC,EAA0E;;;UAGpEW,aAAaH,OAAOI,qBAAP,EAAnB;UACMC,aAAaF,WAAWG,IAA9B;UACMC,YAAYJ,WAAWK,GAA7B;UACMC,aAAapB,OAAOe,qBAAP,EAAnB;UACMM,aAAaD,WAAWH,IAA9B;UACMK,YAAYF,WAAWD,GAA7B;UACMF,OAAOD,aAAaK,UAA1B;UACMF,MAAMD,YAAYI,SAAxB;UACI,CAAC,KAAK9B,SAAV,EAAqB;WAChBF,QAAL,CAAc;gBACJ;kBAAA;iBAEC2B,QAAQN,OAAOY,WAAP,GAAqB,KAAK/B,SAAL,CAAegC,IAAf,CAAoBC,KAAjD,CAFD;kBAGE,KAAKjD,KAAL,CAAWkD,iBAAX;YACJ,UADI,GAEJP,OAAOR,OAAOgB,YAAP,GAAsB,KAAKnC,SAAL,CAAegC,IAAf,CAAoBI,MAAjD,CALE;;;OADV;;;;2BAYKpB,GAAUC,MAAqB;UAChC,KAAKjC,KAAL,CAAWU,MAAf,EAAuB;aAChBV,KAAL,CAAWU,MAAX,CAAkBsB,CAAlB,EAAqBC,IAArB;;;;;+BAIOD,GAAUC,MAAqB;UACpC,KAAKjC,KAAL,CAAWW,UAAf,EAA2B;aACpBX,KAAL,CAAWW,UAAX,CAAsBqB,CAAtB,EAAyBC,IAAzB;;;;;kCAKFD,GACAqB,KACAC,cACA;QACEC,eAAF;WACKzC,QAAL,CAAc;kBACF,EAAE0C,GAAG,KAAKC,SAAL,CAAexD,KAAf,CAAqBuD,CAA1B,EAA6BE,GAAG,KAAKD,SAAL,CAAexD,KAAf,CAAqByD,CAArD;OADZ;UAGI,KAAK1D,KAAL,CAAWkC,MAAf,EAAuB;YACfV,SAAS,KAAKR,SAAL,IAAkB,KAAKA,SAAL,CAAeS,UAAhD;YACMU,SAAS,KAAKnC,KAAL,CAAWkC,MAAX,KAAsB,QAAtB,GAAiCV,MAAjC,GAA0CY,SAASC,aAAT,CAAuB,KAAKrC,KAAL,CAAWkC,MAAlC,CAAzD;YACMyB,OAAO,KAAKrC,cAAL,EAAb;YACIqC,gBAAgBpC,OAAhB,IAA2BY,kBAAkBR,WAA7C,IAA4DH,kBAAkBG,WAAlF,EAA+F;sCAC/D,KAAKf,oBAAL,EAD+D;cACvFT,SADuF,yBACvFA,QADuF;cAC7EC,UAD6E,yBAC7EA,SAD6E;;cAEvFwD,aAAa,KAAK3C,aAAL,EAAnB;cACId,aAAY,OAAOA,SAAP,KAAoB,QAApC,EAA8C;gBACxCA,UAAS0D,QAAT,CAAkB,GAAlB,CAAJ,EAA4B;kBACpBC,QAAQ5C,OAAOf,UAAS4D,OAAT,CAAiB,GAAjB,EAAsB,EAAtB,CAAP,IAAoC,GAAlD;0BACWH,WAAWX,KAAX,GAAmBa,KAA9B;aAFF,MAGO,IAAI3D,UAAS0D,QAAT,CAAkB,IAAlB,CAAJ,EAA6B;0BACvB3C,OAAOf,UAAS4D,OAAT,CAAiB,IAAjB,EAAuB,EAAvB,CAAP,CAAX;;;cAGA3D,cAAa,OAAOA,UAAP,KAAqB,QAAtC,EAAgD;gBAC1CA,WAAUyD,QAAV,CAAmB,GAAnB,CAAJ,EAA6B;kBACrBC,SAAQ5C,OAAOd,WAAU2D,OAAV,CAAkB,GAAlB,EAAuB,EAAvB,CAAP,IAAqC,GAAnD;2BACYH,WAAWX,KAAX,GAAmBa,MAA/B;aAFF,MAGO,IAAI1D,WAAUyD,QAAV,CAAmB,IAAnB,CAAJ,EAA8B;2BACvB3C,OAAOd,WAAU2D,OAAV,CAAkB,IAAlB,EAAwB,EAAxB,CAAP,CAAZ;;;cAGEC,WAAWL,KAAKpB,qBAAL,EAAjB;cACM0B,WAAWD,SAASvB,IAA1B;cACMyB,UAAUF,SAASrB,GAAzB;cACML,aAAaH,OAAOI,qBAAP,EAAnB;cACMC,aAAaF,WAAWG,IAA9B;cACMC,YAAYJ,WAAWK,GAA7B;cACI,QAAQwB,IAAR,CAAad,GAAb,KAAqB,KAAKrC,SAA9B,EAAyC;gBACjCoD,MAAMH,WAAWzB,UAAX,GAAwB,KAAKxB,SAAL,CAAegC,IAAf,CAAoBC,KAAxD;iBACKnC,QAAL,CAAc,EAAEX,UAAUiE,MAAMlD,OAAOf,SAAP,CAAN,GAAyBA,SAAzB,GAAoCiE,GAAhD,EAAd;;cAEE,SAASD,IAAT,CAAcd,GAAd,CAAJ,EAAwB;gBAChBe,OAAMjC,OAAOY,WAAP,IAAsBP,aAAayB,QAAnC,CAAZ;iBACKnD,QAAL,CAAc,EAAEX,UAAUiE,OAAMlD,OAAOf,SAAP,CAAN,GAAyBA,SAAzB,GAAoCiE,IAAhD,EAAd;;cAEE,OAAOD,IAAP,CAAYd,GAAZ,KAAoB,KAAKrC,SAA7B,EAAwC;gBAChCoD,QAAMF,UAAUxB,SAAV,GAAsB,KAAK1B,SAAL,CAAegC,IAAf,CAAoBI,MAAtD;iBACKtC,QAAL,CAAc;yBACDsD,QAAMlD,OAAOd,UAAP,CAAN,GAA0BA,UAA1B,GAAsCgE;aADnD;;cAIE,UAAUD,IAAV,CAAed,GAAf,CAAJ,EAAyB;gBACjBe,QAAMjC,OAAOgB,YAAP,IAAuBT,YAAYwB,OAAnC,CAAZ;iBACKpD,QAAL,CAAc;yBACDsD,QAAMlD,OAAOd,UAAP,CAAN,GAA0BA,UAA1B,GAAsCgE;aADnD;;;OA7CN,MAkDO;aACAtD,QAAL,CAAc;oBACF,KAAKd,KAAL,CAAWG,QADT;qBAED,KAAKH,KAAL,CAAWI;SAFxB;;UAKE,KAAKJ,KAAL,CAAWK,aAAf,EAA8B;aACvBL,KAAL,CAAWK,aAAX,CAAyB2B,CAAzB,EAA4BqB,GAA5B,EAAiCC,YAAjC;;;;;6BAKFtB,GACAqC,WACAC,uBACAC,OACA;UACIf,UAAJ;UACIE,UAAJ;UACI,QAAQS,IAAR,CAAaE,SAAb,CAAJ,EAA6B;YACvB,KAAKpE,KAAL,CAAWuE,QAAX,CAAoBhB,CAApB,GAAwBe,MAAMtB,KAAlC;aACKQ,SAAL,CAAe3C,QAAf,CAAwB,EAAE0C,IAAF,EAAxB;;UAEE,OAAOW,IAAP,CAAYE,SAAZ,CAAJ,EAA4B;YACtB,KAAKpE,KAAL,CAAWuE,QAAX,CAAoBd,CAApB,GAAwBa,MAAMnB,MAAlC;aACKK,SAAL,CAAe3C,QAAf,CAAwB,EAAE4C,IAAF,EAAxB;;UAEE,KAAK1D,KAAL,CAAWO,QAAf,EAAyB;aAClBP,KAAL,CAAWO,QAAX,CAAoByB,CAApB,EAAuBqC,SAAvB,EAAkCC,qBAAlC,EAAyDC,KAAzD,EAAgE;aAC3Df,KAAK,KAAKC,SAAL,CAAexD,KAAf,CAAqBuD,CADiC;aAE3DE,KAAK,KAAKD,SAAL,CAAexD,KAAf,CAAqByD;SAF/B;;;;;iCAQF1B,GACAqC,WACAC,uBACAC,OACA;mCACgC,KAAK3D,oBAAL,EADhC;UACQT,QADR,0BACQA,QADR;UACkBC,SADlB,0BACkBA,SADlB;;WAEKU,QAAL,CAAc,EAAEX,kBAAF,EAAYC,oBAAZ,EAAd;UACI,KAAKJ,KAAL,CAAWQ,YAAf,EAA6B;YACrBqB,YAAqB;aACtB,KAAK4B,SAAL,CAAexD,KAAf,CAAqBuD,CADC;aAEtB,KAAKC,SAAL,CAAexD,KAAf,CAAqByD;SAF1B;aAIK1D,KAAL,CAAWQ,YAAX,CAAwBwB,CAAxB,EAA2BqC,SAA3B,EAAsCC,qBAAtC,EAA6DC,KAA7D,EAAoE1C,SAApE;;;;;+BAIOmB,MAA2D;UAChE,CAAC,KAAKhC,SAAV,EAAqB;WAChBA,SAAL,CAAeyD,UAAf,CAA0B,EAAExB,OAAOD,KAAKC,KAAd,EAAqBG,QAAQJ,KAAKI,MAAlC,EAA1B;;;;mCAGavB,UAAoB;WAC5B4B,SAAL,CAAe3C,QAAf,CAAwBe,QAAxB;;;;iCAGW3B,GAAW;WACjBY,QAAL,CAAc,EAAEZ,IAAF,EAAd;;;;6BAGmB;;;UACbwE,cACJ,KAAK1E,KAAL,CAAW2E,eAAX,IAA8B,KAAK3E,KAAL,CAAW4E,mBAAzC,GAA+D,EAAEC,QAAQ,QAAV,EAA/D,GAAsF,EAAEA,QAAQ,MAAV,EADxF;UAEMC,0BACDhF,cADC;gBAEI,KAAKG,KAAL,CAAWC;SAChBwE,WAHC,EAID,KAAK1E,KAAL,CAAW+B,KAJV,CAAN;;;UAQI,CAAC,KAAK9B,KAAL,CAAW6B,SAAZ,IAAyB,CAAC,KAAK9B,KAAL,CAAW+E,WAAzC,EAAsD,OAAOC,gCAAP;UAChD5E,YAAY,KAAKJ,KAAL,CAAWkD,iBAAX,GAA+B,UAA/B,GAA4C,KAAKjD,KAAL,CAAWG,SAAzE,CAZmB;aAcjB4E;iBAAA;;eACO,aAACC,CAAD,EAAkB;mBAChBxB,SAAL,GAAiBwB,CAAjB;WAFJ;kBAIU,KAAKjF,KAAL,CAAW4E,mBAJrB;2BAKmB,KAAK5E,KAAL,CAAWkF,OAL9B;mBAMW,KAAKzE,WANhB;kBAOU,KAAKC,MAPf;kBAQU,KAAKC,UARf;gBASQ,KAAKX,KAAL,CAAWmF,QATnB;oBAUY,KAAKnF,KAAL,CAAW2E,eAVvB;gBAWQ,KAAK3E,KAAL,CAAWoF,QAXnB;kBAYU,KAAKpF,KAAL,CAAWkC,MAAX,GAAoB,KAAKjC,KAAL,CAAWiC,MAA/B,GAAwCmD,SAZlD;oBAaY,KAAKrF,KAAL,CAAW6B,QAbvB;gCAcwB,KAAK7B,KAAL,CAAWsF,oBAdnC;kBAeU,KAAKtF,KAAL,CAAWuF;;;mBAEnB;uBACM,KAAKvF,KAAL,CAAWwF,YADjB;uBAEa,KAAKxF,KAAL,CAAWyF,SAFxB;iBAGO,aAACR,CAAD,EAAkD;qBAChDjE,SAAL,GAAiBiE,CAAjB;aAJJ;yBAMe,KAAKjF,KAAL,CAAWkF,OAN1B;kBAOQ,KAAKlF,KAAL,CAAWgD,IAPnB;oBAQU,KAAKhD,KAAL,CAAW0F,cARrB;2BASiB,KAAKrF,aATtB;sBAUY,KAAKE,QAVjB;0BAWgB,KAAKC,YAXrB;mBAYSsE,UAZT;sBAaY,KAAK9E,KAAL,CAAW2F,QAbvB;uBAca,KAAK3F,KAAL,CAAW4F,SAdxB;sBAeY,KAAK3F,KAAL,CAAWE,QAfvB;uBAgBaC,SAhBb;kBAiBQ,KAAKJ,KAAL,CAAW6F,UAjBnB;gCAkBsB,KAAK7F,KAAL,CAAW8F,wBAlBjC;gCAmBsB,KAAK9F,KAAL,CAAW+F,wBAnBjC;6BAoBmB,KAAK/F,KAAL,CAAWgG,eApB9B;uCAqB6B,KAAKhG,KAAL,CAAWiG,yBArBxC;wCAsB8B,KAAKjG,KAAL,CAAWkG,0BAtBzC;0BAuBgB,KAAKlG,KAAL,CAAWmG,kBAvB3B;2BAwBiB,KAAKnG,KAAL,CAAWoG;;eAEpBpG,KAAL,CAAWqG;;OA5ClB;;;;EArR6BC;;AAAZvG,IACZwG,eAAe;YACVrF,OAAOC,gBADG;aAETD,OAAOC,gBAFE;iBAGL,yBAAM,EAHD;YAIV,oBAAM,EAJI;gBAKN,wBAAM,EALA;eAMP,uBAAM,EANC;UAOZ,kBAAM,EAPM;cAQR,sBAAM,EARE;eASP;;;;;"} \ No newline at end of file +{"version":3,"file":"index.es5.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/index.js b/lib/index.js index 622ba45a..102a8b9f 100644 --- a/lib/index.js +++ b/lib/index.js @@ -330,9 +330,8 @@ var Rnd = function (_React$Component) { var innerStyle = _extends({}, resizableStyle, { zIndex: this.state.z }, cursorStyle, this.props.style); - // HACK: Wait for setting relative to parent element - // skip if props.absolutePos == true ( SSR need initial render ). - if (!this.state.isMounted && !this.props.absolutePos) return createElement('div', null); + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return createElement('div', null); var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line return createElement( Draggable, @@ -396,8 +395,7 @@ Rnd.defaultProps = { onResizeStop: function onResizeStop() {}, onDragStart: function onDragStart() {}, onDrag: function onDrag() {}, - onDragStop: function onDragStop() {}, - absolutePos: false + onDragStop: function onDragStop() {} }; export default Rnd; diff --git a/lib/index.js.map b/lib/index.js.map index 8b1d9913..ab402dcb 100644 --- a/lib/index.js.map +++ b/lib/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n absolutePos: boolean, // allow initial absolute render for ssr\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {},\n absolutePos: false,\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element\n // skip if props.absolutePos == true ( SSR need initial render ).\n if (!this.state.isMounted && !this.props.absolutePos) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","absolutePos","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file diff --git a/lib/react-rnd.umd.js b/lib/react-rnd.umd.js index 6323ed5b..54bc465b 100644 --- a/lib/react-rnd.umd.js +++ b/lib/react-rnd.umd.js @@ -334,9 +334,8 @@ var innerStyle = _extends({}, resizableStyle, { zIndex: this.state.z }, cursorStyle, this.props.style); - // HACK: Wait for setting relative to parent element - // skip if props.absolutePos == true ( SSR need initial render ). - if (!this.state.isMounted && !this.props.absolutePos) return React.createElement('div', null); + // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). + if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null); var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line return React.createElement( Draggable, @@ -400,8 +399,7 @@ onResizeStop: function onResizeStop() {}, onDragStart: function onDragStart() {}, onDrag: function onDrag() {}, - onDragStop: function onDragStop() {}, - absolutePos: false + onDragStop: function onDragStop() {} }; exports.default = Rnd; diff --git a/lib/react-rnd.umd.js.map b/lib/react-rnd.umd.js.map index 781cf815..6d80248a 100644 --- a/lib/react-rnd.umd.js.map +++ b/lib/react-rnd.umd.js.map @@ -1 +1 @@ -{"version":3,"file":"react-rnd.umd.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n absolutePos: boolean, // allow initial absolute render for ssr\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {},\n absolutePos: false,\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element\n // skip if props.absolutePos == true ( SSR need initial render ).\n if (!this.state.isMounted && !this.props.absolutePos) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","width","height","display","position","top","left","Rnd","props","state","z","original","x","y","bounds","right","bottom","maxWidth","maxHeight","isMounted","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","style","e","data","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","targetTop","parentRect","parentLeft","parentTop","offsetWidth","size","_freeBottomBounds","offsetHeight","dir","refToElement","stopPropagation","draggable","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","zIndex","absolutePos","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"react-rnd.umd.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n x: number,\n y: number,\n};\n\nexport type DraggableData = {\n node: HTMLElement,\n deltaX: number,\n deltaY: number,\n lastX: number,\n lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n width: number,\n height: number,\n};\n\nexport type RndResizeCallback = (\n e: MouseEvent | TouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n delta: ResizableDelta,\n position: Position,\n) => void;\n\ntype Size = {\n width: string | number,\n height: string | number,\n};\n\ntype State = {\n z?: number,\n original: Position,\n bounds: {\n top: number,\n right: number,\n bottom: number,\n left: number,\n },\n maxWidth?: number | string,\n maxHeight?: number | string,\n isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n bottom?: boolean,\n bottomLeft?: boolean,\n bottomRight?: boolean,\n left?: boolean,\n right?: boolean,\n top?: boolean,\n topLeft?: boolean,\n topRight?: boolean,\n};\n\nexport type HandleClasses = {\n bottom?: string,\n bottomLeft?: string,\n bottomRight?: string,\n left?: string,\n right?: string,\n top?: string,\n topLeft?: string,\n topRight?: string,\n};\n\ntype Style = {\n [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n bottom?: Style,\n bottomLeft?: Style,\n bottomRight?: Style,\n left?: Style,\n right?: Style,\n top?: Style,\n topLeft?: Style,\n topRight?: Style,\n};\n\ntype Props = {\n z?: number,\n dragGrid?: Grid,\n default?: {\n x: number,\n y: number,\n } & Size,\n position?: {\n x: number,\n y: number,\n },\n size?: Size,\n resizeGrid?: Grid,\n bounds?: string,\n onResizeStart?: RndResizeStartCallback,\n onResize?: RndResizeCallback,\n onResizeStop?: RndResizeCallback,\n onDragStart?: RndDragCallback,\n onDrag?: RndDragCallback,\n onDragStop?: RndDragCallback,\n className?: string,\n style?: Style,\n children?: React.Node,\n enableResizing?: ResizeEnable,\n extendsProps?: { [key: string]: any },\n resizeHandleClasses?: HandleClasses,\n resizeHandleStyles?: HandleStyles,\n resizeHandleWrapperClass?: string,\n resizeHandleWrapperStyle?: Style,\n lockAspectRatio?: boolean | number,\n lockAspectRatioExtraWidth?: number,\n lockAspectRatioExtraHeight?: number,\n maxHeight?: number | string,\n maxWidth?: number | string,\n minHeight?: number | string,\n minWidth?: number | string,\n dragAxis?: 'x' | 'y' | 'both' | 'none',\n dragHandleClassName?: string,\n disableDragging?: boolean,\n cancel?: boolean,\n enableUserSelectHack?: boolean,\n _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n width: 'auto',\n height: 'auto',\n display: 'inline-block',\n position: 'absolute',\n top: 0,\n left: 0,\n};\n\nexport default class Rnd extends React.Component {\n static defaultProps = {\n maxWidth: Number.MAX_SAFE_INTEGER,\n maxHeight: Number.MAX_SAFE_INTEGER,\n onResizeStart: () => {},\n onResize: () => {},\n onResizeStop: () => {},\n onDragStart: () => {},\n onDrag: () => {},\n onDragStop: () => {}\n };\n resizable: React$ElementRef | null;\n draggable: Draggable;\n onResizeStart: ResizeStartCallback;\n onResize: ResizeCallback;\n onResizeStop: ResizeCallback;\n onDragStart: RndDragCallback;\n onDrag: RndDragCallback;\n onDragStop: RndDragCallback;\n getMaxSizesFromProps: () => {\n maxWidth: number | string,\n maxHeight: number | string,\n };\n wrapper: HTMLElement;\n parentId: string;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n z: props.z,\n original: {\n x: 0,\n y: 0,\n },\n bounds: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n maxWidth: props.maxWidth,\n maxHeight: props.maxHeight,\n isMounted: false,\n };\n this.onResizeStart = this.onResizeStart.bind(this);\n this.onResize = this.onResize.bind(this);\n this.onResizeStop = this.onResizeStop.bind(this);\n this.onDragStart = this.onDragStart.bind(this);\n this.onDrag = this.onDrag.bind(this);\n this.onDragStop = this.onDragStop.bind(this);\n this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n }\n\n componentWillReceiveProps(nextProps: Props) {\n if (this.props.z !== nextProps.z) {\n this.setState({ z: nextProps.z });\n }\n }\n\n componentDidMount() {\n this.setParentPosition();\n }\n\n getParentSize(): { width: number, height: number } {\n return (this.resizable: any).getParentSize();\n }\n\n getMaxSizesFromProps(): {\n maxWidth: number | string,\n maxHeight: number | string,\n } {\n const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n return { maxWidth, maxHeight };\n }\n\n getSelfElement(): null | Element | Text {\n if (!this) return null;\n return findDOMNode(this);\n }\n\n setParentPosition() {\n const element = this.getSelfElement();\n if (element instanceof Element) {\n const parent = element.parentNode;\n if (!parent || typeof window === 'undefined') return;\n if (!(parent instanceof HTMLElement)) return;\n if (getComputedStyle(parent).position !== 'static') {\n this.setState({ isMounted: true });\n return;\n }\n parent.style.position = 'relative';\n this.setState({ isMounted: true });\n }\n }\n\n onDragStart(e: Event, data: DraggableData) {\n if (this.props.onDragStart) {\n this.props.onDragStart(e, data);\n }\n if (!this.props.bounds) return;\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n return;\n }\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const parentRect = parent.getBoundingClientRect();\n const parentLeft = parentRect.left;\n const parentTop = parentRect.top;\n const left = targetLeft - parentLeft;\n const top = targetTop - parentTop;\n if (!this.resizable) return;\n this.setState({\n bounds: {\n top,\n right: left + (target.offsetWidth - this.resizable.size.width),\n bottom: this.props._freeBottomBounds // eslint-disable-line\n ? 2147483647\n : top + (target.offsetHeight - this.resizable.size.height),\n left,\n },\n });\n }\n\n onDrag(e: Event, data: DraggableData) {\n if (this.props.onDrag) {\n this.props.onDrag(e, data);\n }\n }\n\n onDragStop(e: Event, data: DraggableData) {\n if (this.props.onDragStop) {\n this.props.onDragStop(e, data);\n }\n }\n\n onResizeStart(\n e: SyntheticMouseEvent | SyntheticTouchEvent,\n dir: ResizeDirection,\n refToElement: React.ElementRef<'div'>,\n ) {\n e.stopPropagation();\n this.setState({\n original: { x: this.draggable.state.x, y: this.draggable.state.y },\n });\n if (this.props.bounds) {\n const parent = this.resizable && this.resizable.parentNode;\n const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n const self = this.getSelfElement();\n if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n const parentSize = this.getParentSize();\n if (maxWidth && typeof maxWidth === 'string') {\n if (maxWidth.endsWith('%')) {\n const ratio = Number(maxWidth.replace('%', '')) / 100;\n maxWidth = parentSize.width * ratio;\n } else if (maxWidth.endsWith('px')) {\n maxWidth = Number(maxWidth.replace('px', ''));\n }\n }\n if (maxHeight && typeof maxHeight === 'string') {\n if (maxHeight.endsWith('%')) {\n const ratio = Number(maxHeight.replace('%', '')) / 100;\n maxHeight = parentSize.width * ratio;\n } else if (maxHeight.endsWith('px')) {\n maxHeight = Number(maxHeight.replace('px', ''));\n }\n }\n const selfRect = self.getBoundingClientRect();\n const selfLeft = selfRect.left;\n const selfTop = selfRect.top;\n const targetRect = target.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n if (/left/i.test(dir) && this.resizable) {\n const max = selfLeft - targetLeft + this.resizable.size.width;\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/right/i.test(dir)) {\n const max = target.offsetWidth + (targetLeft - selfLeft);\n this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n }\n if (/top/i.test(dir) && this.resizable) {\n const max = selfTop - targetTop + this.resizable.size.height;\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n if (/bottom/i.test(dir)) {\n const max = target.offsetHeight + (targetTop - selfTop);\n this.setState({\n maxHeight: max > Number(maxHeight) ? maxHeight : max,\n });\n }\n }\n } else {\n this.setState({\n maxWidth: this.props.maxWidth,\n maxHeight: this.props.maxHeight,\n });\n }\n if (this.props.onResizeStart) {\n this.props.onResizeStart(e, dir, refToElement);\n }\n }\n\n onResize(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: React.ElementRef<'div'>,\n delta: { height: number, width: number },\n ) {\n let x;\n let y;\n if (/left/i.test(direction)) {\n x = this.state.original.x - delta.width;\n this.draggable.setState({ x });\n }\n if (/top/i.test(direction)) {\n y = this.state.original.y - delta.height;\n this.draggable.setState({ y });\n }\n if (this.props.onResize) {\n this.props.onResize(e, direction, refToResizableElement, delta, {\n x: x || this.draggable.state.x,\n y: y || this.draggable.state.y,\n });\n }\n }\n\n onResizeStop(\n e: MouseEvent | TouchEvent,\n direction: ResizeDirection,\n refToResizableElement: HTMLDivElement,\n delta: { height: number, width: number },\n ) {\n const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n this.setState({ maxWidth, maxHeight });\n if (this.props.onResizeStop) {\n const position: Position = {\n x: this.draggable.state.x,\n y: this.draggable.state.y,\n };\n this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n }\n }\n\n updateSize(size: { width: number | string, height: number | string }) {\n if (!this.resizable) return;\n this.resizable.updateSize({ width: size.width, height: size.height });\n }\n\n updatePosition(position: Position) {\n this.draggable.setState(position);\n }\n\n updateZIndex(z: number) {\n this.setState({ z });\n }\n\n render(): React.Node {\n const cursorStyle =\n this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n const innerStyle = {\n ...resizableStyle,\n zIndex: this.state.z,\n ...cursorStyle,\n ...this.props.style,\n };\n // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return
;\n const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n return (\n {\n this.draggable = c;\n }}\n handle={this.props.dragHandleClassName}\n defaultPosition={this.props.default}\n onStart={this.onDragStart}\n onDrag={this.onDrag}\n onStop={this.onDragStop}\n axis={this.props.dragAxis}\n disabled={this.props.disableDragging}\n grid={this.props.dragGrid}\n bounds={this.props.bounds ? this.state.bounds : undefined}\n position={this.props.position}\n enableUserSelectHack={this.props.enableUserSelectHack}\n cancel={this.props.cancel}\n >\n | null) => {\n this.resizable = c;\n }}\n defaultSize={this.props.default}\n size={this.props.size}\n enable={this.props.enableResizing}\n onResizeStart={this.onResizeStart}\n onResize={this.onResize}\n onResizeStop={this.onResizeStop}\n style={innerStyle}\n minWidth={this.props.minWidth}\n minHeight={this.props.minHeight}\n maxWidth={this.state.maxWidth}\n maxHeight={maxHeight}\n grid={this.props.resizeGrid}\n handleWrapperClass={this.props.resizeHandleWrapperClass}\n handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n lockAspectRatio={this.props.lockAspectRatio}\n lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n handleStyles={this.props.resizeHandleStyles}\n handleClasses={this.props.resizeHandleClasses}\n >\n {this.props.children}\n \n \n );\n }\n}\n"],"names":["resizableStyle","width","height","display","position","top","left","Rnd","props","state","z","original","x","y","bounds","right","bottom","maxWidth","maxHeight","isMounted","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","style","e","data","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","targetTop","parentRect","parentLeft","parentTop","offsetWidth","size","_freeBottomBounds","offsetHeight","dir","refToElement","stopPropagation","draggable","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","zIndex","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"} \ No newline at end of file