Giter Site home page Giter Site logo

bokuweb / react-rnd Goto Github PK

View Code? Open in Web Editor NEW
3.7K 22.0 314.0 28.74 MB

🖱 A resizable and draggable component for React.

Home Page: https://bokuweb.github.io/react-rnd/stories

License: MIT License

JavaScript 7.97% HTML 0.41% Shell 0.54% CSS 0.29% TypeScript 90.79%
react drag resize resizable component draggable

react-rnd's Introduction

A resizable and draggable component for React.

Build Status Build Status

Table of Contents

Screenshot

https://codesandbox.io/s/xpm699v4lp

Live Demo

Storybook

Storybook

CodeSandbox

Edit y3997qply9
CodeSandbox(with default)
CodeSandbox(with size and position)
CodeSandbox(with typescript)
CodeSandbox(with hooks)

Install

  • use npm
npm i -S react-rnd
  • use yarn
yarn add react-rnd

Usage

Example with default

<Rnd
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  }}
>
  Rnd
</Rnd>

Example with position and size

<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onResizeStop={(e, direction, ref, delta, position) => {
    this.setState({
      width: ref.style.width,
      height: ref.style.height,
      ...position,
    });
  }}
>
  001
</Rnd>

Props

default: { x: number; y: number; width?: number | string; height?: number | string; };

The width and height property is used to set the default size of the component. For example, you can set 300, '300px', 50%. If omitted, set 'auto'.

The x and y property is used to set the default position of the component.

size?: { width: (number | string), height: (number | string) };

The size property is used to set size of the component. For example, you can set 300, '300px', 50%.

Use size if you need to control size state by yourself.

position?: { x: number, y: number };

The position property is used to set position of the component. Use position if you need to control size state by yourself.

see, following example.

<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onResize={(e, direction, ref, delta, position) => {
    this.setState({
      width: ref.offsetWidth,
      height: ref.offsetHeight,
      ...position,
    });
  }}
>
  001
</Rnd>

className?: string;

The className property is used to set the custom className of the component.

style?: { [key: string]: string };

The style property is used to set the custom style of the component.

minWidth?: number | string;

The minWidth property is used to set the minimum width of the component. For example, you can set 300, '300px', 50%.

minHeight?: number | string;

The minHeight property is used to set the minimum height of the component. For example, you can set 300, '300px', 50%.

maxWidth?: number | string;

The maxWidth property is used to set the maximum width of the component. For example, you can set 300, '300px', 50%.

maxHeight?: number | string;

The maxHeight property is used to set the maximum height of the component. For example, you can set 300, '300px', 50%.

resizeGrid?: [number, number];

The resizeGrid property is used to specify the increments that resizing should snap to. Defaults to [1, 1].

dragGrid?: [number, number];

The dragGrid property is used to specify the increments that moving should snap to. Defaults to [1, 1].

lockAspectRatio?: boolean | number;

The lockAspectRatio property is used to lock aspect ratio. Set to true to lock the aspect ratio based on the initial size. Set to a numeric value to lock a specific aspect ratio (such as 16/9). If set to numeric, make sure to set initial height/width to values with correct aspect ratio. If omitted, set false.

lockAspectRatioExtraWidth?: number;

The lockAspectRatioExtraWidth property enables a resizable component to maintain an aspect ratio plus extra width. For instance, a video could be displayed 16:9 with a 50px side bar. If omitted, set 0.

scale?: number;

Specifies the scale of the canvas you are dragging or resizing this element on. This allows you to, for example, get the correct drag / resize deltas while you are zoomed in or out via a transform or matrix in the parent of this element. If omitted, set 1.

lockAspectRatioExtraHeight?: number;

The lockAspectRatioExtraHeight property enables a resizable component to maintain an aspect ratio plus extra height. For instance, a video could be displayed 16:9 with a 50px header bar. If omitted, set 0.

dragHandleClassName?: string;

Specifies a selector to be used as the handle that initiates drag. Example: handle.

resizeHandleStyles?: HandleStyles;

The resizeHandleStyles property is used to override the style of one or more resize handles. Only the axis you specify will have its handle style replaced. If you specify a value for right it will completely replace the styles for the right resize handle, but other handle will still use the default styles.

export type HandleStyles = {
  bottom?: React.CSSProperties,
  bottomLeft?: React.CSSProperties,
  bottomRight?: React.CSSProperties,
  left?: React.CSSProperties,
  right?: React.CSSProperties,
  top?: React.CSSProperties,
  topLeft?: React.CSSProperties,
  topRight?: React.CSSProperties
}

resizeHandleClasses?: HandleClasses;

The resizeHandleClasses property is used to set the className of one or more resize handles.

type HandleClasses = {
  bottom?: string;
  bottomLeft?: string;
  bottomRight?: string;
  left?: string;
  right?: string;
  top?: string;
  topLeft?: string;
  topRight?: string;
}

resizeHandleComponent?: HandleCompoent;`

The resizeHandleComponent allows you to pass a custom React component as the resize handle.

type HandleComponent = {
  top?: React.ReactElement<any>;
  right?: React.ReactElement<any>;
  bottom?: React.ReactElement<any>;
  left?: React.ReactElement<any>;
  topRight?: React.ReactElement<any>;
  bottomRight?: React.ReactElement<any>;
  bottomLeft?: React.ReactElement<any>;
  topLeft?: React.ReactElement<any>;
}

resizeHandleWrapperClass?: string;

The resizeHandleWrapperClass property is used to set css class name of resize handle wrapper(span) element.

resizeHandleWrapperStyle?: Style;

The resizeHandleWrapperStyle property is used to set css class name of resize handle wrapper(span) element.

enableResizing?: ?Enable;

The enableResizing property is used to set the resizable permission of the component.

The permission of top, right, bottom, left, topRight, bottomRight, bottomLeft, topLeft direction resizing. If omitted, all resizer are enabled. If you want to permit only right direction resizing, set { top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }.

export type Enable = {
  bottom?: boolean;
  bottomLeft?: boolean;
  bottomRight?: boolean;
  left?: boolean;
  right?: boolean;
  top?: boolean;
  topLeft?: boolean;
  topRight?: boolean;
} | boolean

disableDragging?: boolean;

The disableDragging property disables dragging completely.

cancel?: string;

The cancel property disables specifies a selector to be used to prevent drag initialization (e.g. .body).

dragAxis?: 'x' | 'y' | 'both' | 'none'

The direction of allowed movement (dragging) allowed ('x','y','both','none').

bounds?: string; | Element

Specifies movement boundaries. Accepted values:

  • parent restricts movement within the node's offsetParent (nearest node with position relative or absolute)
  • window, body, Selector like .fooClassName or
  • Element.

enableUserSelectHack?: boolean;

By default, we add 'user-select:none' attributes to the document body
to prevent ugly text selection during drag. If this is causing problems
for your app, set this to false.

scale?: number;

Specifies the scale of the canvas your are resizing and dragging this element on. This allows you to, for example, get the correct resize and drag deltas while you are zoomed in or out via a transform or matrix in the parent of this element. If omitted, set 1.

Callback

onResizeStart?: RndResizeStartCallback;

RndResizeStartCallback type is below.

export type RndResizeStartCallback = (
  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
) => void;

Calls when resizable component resize start.

onResize?: RndResizeCallback;

RndResizeCallback type is below.

export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;

Calls when resizable component resizing.

onResizeStop?: RndResizeCallback;

RndResizeCallback type is below.

export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;

Calls when resizable component resize stop.

onDragStart: DraggableEventHandler;

Callback called on dragging start.

type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;

onDrag: DraggableEventHandler;

onDrag called with the following parameters:

type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;

onDragStop: DraggableEventHandler;

onDragStop called on dragging stop.

type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;

Instance API

updateSize(size: { width: string | number, height: string | number })

Update component size. For example, you can set 300, '300px', 50%.

  • for example
class YourComponent extends Component {

  ...

  update() {
    this.rnd.updateSize({ width: 200, height: 300 });
  }

  render() {
    return (
      <Rnd ref={c => { this.rnd = c; }} ...rest >
        example
      </Rnd>
    );
  }
  ...
}

updatePosition({ x: number, y: number }): void

Update component position. grid bounds props is ignored, when this method called.

  • for example
class YourComponent extends Component {

  ...

  update() {
    this.rnd.updatePosition({ x: 200, y: 300 });
  }

  render() {
    return (
      <Rnd ref={c => { this.rnd = c; }} ...rest >
        example
      </Rnd>
    );
  }

  ...
}

allowAnyClick?: boolean

If set to true, will allow dragging on non left-button clicks.

Test

npm t

Contribute

If you have a feature request, please add it as an issue or make a pull request.

If you have a bug to report, please reproduce the bug in CodeSandbox to help us easily isolate it.

Changelog

v10.4.10

  • Upgrade re-resizable to 6.9.14

v10.4.7

  • Fixed a bug, maxHeight does not work with % #914

v10.4.6

  • Upgrade re-resizable to 6.9.11
  • Upgrade react-draggable to 4.4.6
  • Fixed a bug, wrong position in onDrag #910

v10.4.1

  • Support Element for bounds.

v10.3.7

  • Upgrade re-resizable to 6.9.6
  • Add peer deps.

v10.3.6

  • Upgrade re-resizable to 6.9.2
  • Upgrade react-draggable to v4.4.4

v10.3.5

  • Upgrade re-resizable to 6.9.1

v10.3.4

  • Fixed a bound check with locked aspect ratio (fully fixes #209)

v10.3.1, v10.3.2

  • Fixed a bug, top and left resize issue, caused by "position" #792

v10.3.0

  • Fixed a callback position when dragAxis specified

v10.2.5

  • Fixed a glitch when dragAxis is enabled and component is being resized #780

v10.2.3

  • Fixed a bug, if set minWidth or minHeight with px, reize dowes not work. #739

v10.2.0

  • Upgrade react-draggable to v4.4.3
  • Add allowAnyClick props.
  • Add nodeRef props.

v10.1.10

  • Downgrade react-draggable to v4.2.0 #690

v10.1.9

  • Update react-draggable to v4.3.1

v10.1.8

  • Update re-resizable to v6.3.2

v10.1.7

  • A minor fix for a bug with forwarding of cancelling indication of an onDrag event. (#667)

v10.1.6

  • Fixes #641 without causing other issues with typing.

v10.1.5

  • Fixed a bug, react-draggable not bundling with rollup #641

v10.1.4

  • Fixed a bug, box moves when resized #622

v10.1.3

  • Fixed a bug, position is wrong when onResize #618

v10.1.2

  • Upgrade re-resizable to 6.1.1
  • Upgrade react-draggable to 4.1.0

v10.1.1

  • Upgrade re-resizable to 6.1.0

v10.1.0

  • Implement resizeHandleComponent #591
  • Update dependency react-draggable to v4

v10.0.0

  • Fix: Fix #526
  • Feat: Add onMouseUp callback.
  • Feat: Use React.pureComponent

v9.2.0

  • Chore: Use re-resizablev5

v9.1.2

  • Fix: Fixes memory leak #499

v9.1.1

  • Fix: Add scale props to index.js.flow.

v9.1.0

  • Feat: Add scale props. #482
  • Feat: Upgrade deps.

v9.0.4

  • Fix: cursor style #469

v9.0.3

  • update dependency re-resizable to v4.9.3 #444

v9.0.2

  • fix: resizeHandleWrapperClass warning shown in console #428

v9.0.1

  • fix: Allow additional props in typescript.

v9.0.0

  • fix: change default export to export #405

v8.0.2

  • fix: fixed a bug, bounds is ignored when lock aspect ratio set.
  • feat: add body to bounds props.

v8.0.1

  • fix: [#221] fixed a bug, maxwidth / height not applied.

v8.0.0

  • fix: fixed some position and resizing bug.
  • fix: [#209] bounds window. you can check here.
  • fix: [#317] add onMouseDown. i.e) <Rnd onMouseDown={...} />
  • [BREAKING] fix: [#335] add . to dragHandleClassName automatically, Please pass string (i.e handle.
  • [BREAKING] fix: remove extendsProps. Please add extends props directly. i.e) <Rnd data-foo="42" />
  • [BREAKING] fix: remove z props. Please add zIndex via style props. i.e) <Rnd style={{ zIndex: 9 }} />

v8.0.0-beta.2

  • fix: Upgrade re-resizable to fix percentage size and bare behavior.

v8.0.0-beta.1

  • fix: Fixed a bug, controlled position does not work correctly.
  • feat: Use typescript instead of flowype.

v8.0.0-beta.0

  • fix: Remove dummy <div />, isMounted state and setParentPosition().

v7.4.3

  • fix: Add props,children to dummy <div> to render children in first.

v7.4.2 (unpublished)

fix: isMounted and (!this.state.isMounted) return <div /> line #356

v7.4.1

  • fix: Fixed Array.from error in IE11

v7.4.0

  • fix: add enableUserSelectHack?: boolean;.

v7.3.1

  • chore(deps): upgrade deps
  • chore(deps): upgrade lint and remove unused state
  • chore(deps): install prettier

v7.3.0

  • chore(deps): upgrade re-resizable

v7.2.0

  • Support for cancel feature of react-draggable #206

v7.1.5

  • Fixed a issue #199 Add enableUserSelectHack props to react-draggable

v7.1.4

  • Fixed a issue #188 maxWidth and maxHeight props don't respect after resize

v7.1.3

  • Fixed a bug, extendProps is not passed correctly.
  • Fixed a bug, bounds is not work correctly. (#162)

v7.1.1 / v7.1.2

  • Add internal props.

v7.1.0

  • Add size.
  • Add position.

v7.0.0

  • Add default instead of x, y, width, height.
  • Add resizeHandleWrapperClass and resizeHandleWrapperStyle.

v6.0.1

  • Remove unnecessary types.

v6.0.0

  • Use rollup.
  • Support % min/max size.
  • Change props, remove default and add x, y, width, height.
  • Rename dragHandlersXXXX and resizeHandlersXXXX props to dragHandleXXXX and resizeHandleXXXX.

v5.1.3

  • Fix cursor style, set normal to cursor style when dragHandlerClassName is not empty.

v5.1.2

  • Add position relative when component will update.

v5.1.1

  • Add top: 0, left: 0.
  • Add position relative when parent position equals static.

v5.1.0

  • Update dependencies(react-draggable v3, flow-bin v0.53, and other...)

v5.0.9

  • Fix bug new z props is not applied to state.

v5.0.8

  • Add extendsProps. #129

v5.0.7

  • Add disableDragging props.

v5.0.6

  • Fix flow error.

v5.0.5

  • Add index.js.flow

v5.0.4

  • Fix Issue #117.

v5.0.3

  • Fix updateZIndex.
  • Fix updateSize.
  • Fix left and top bounds.

v5.0.2

  • Fix argument events #100

v5.0.1

  • Fix example
  • Update README

v5.0.0

  • Fix resize bounds.
  • Modify API.
  • Use original react-draggable.

v4.2.1

  • Added updateZIndex, method to updated component zIndex state.

v4.2.0

  • Pass the new position in the onResizeStop callback #60

v4.1.0

  • Pass the new position along in the resize callback #55

v4.0.1

  • Fix style props to applt zIndex chaned.

v4.0.0

  • Rename react-rnd.
  • Remove canUpdatePositionByParent property.
  • Remove canUpdateSizeByParent property.
  • Remove initiAsResizing property.
  • Change x, y, width and height property to initial.
  • Add updateSize, updatePosition, method to updated conponent state.
  • Add lockAspectRatio property to lock aspect ratio when resizing.

v3.0.0

  • Add canUpdatePositionByParent property.

v2.0.0

  • Fix bug, resize and grid not work properly.

v1.2.0

  • Add grid props to snap grid. (thanks @paulyoung)
  • Fix bug, moveAxis not work properly.

v1.1.3

  • Fix situations when on dragStop you wanted to revert to 0,0 position #39
  • Add canUpdateSizeByParent props #38

v1.1.2

  • Add object.assign transform

v1.1.0

  • Add add module exports plugin for require

v1.0.1

  • Bug fix

v1.0.0

  • Support react v15.x
  • Support left, top resizer
  • Remove start props, use width, height, x, and y.

v0.5.3

  • Add handle selector

License

The MIT License (MIT)

Copyright (c) 2018 bokuweb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

react-rnd's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-rnd's Issues

the problem of draging picture

Drag the picture, the original picture did not follow the move, is a relatively low transparency of the picture with the mouse moving. At the end of the drag and release the mouse, the original image will be moved to the location of the end of the drag and drop, and if this time to move the mouse, the original image can be moved
qq 20170301145150

bug when dragHandlerClassName is used

<div>
    <div class="handle">
        <h1>Window title</h1>
    </div>
    <div>content</div>
</div>

With above dom structure if dragHandlerClassName is set to .handle , dragging does not work when drag target is h1. If h1 has some padding then the padded area allows dragging.

Feature: prevent overlapping/collisions

Hi,

it would be really nice to include a feature like "allowOverlaping", and when disabled react-draggable(s) from the same parent will avoid being on top of each other (overlapping).

Thank you

An in-range update of react-resizable-box is breaking the build 🚨

Version 2.0.3 of react-resizable-box just got published.

Branch Build failing 🚨
Dependency react-resizable-box
Current Version 2.0.2
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

react-resizable-box is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details - ❌ **continuous-integration/travis-ci/push** The Travis CI build could not complete due to an error [Details](https://travis-ci.org/bokuweb/react-rnd/builds/227463752?utm_source=github_status&utm_medium=notification)

Commits

The new version differs by 12 commits0.

false

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

onDragStart not working??

Hi,

It seems like onDragStart does not work. I have the following:
<ResizableAndMovable start={{x:0, y:0, width:200}} minWidth={250} maxWidth={500} minHeight={250} maxHeight={500} isResizable={{x:true, y:false, xy:false}} onResizeStop={this.onResizeStop} onDragStart={this.onDragStart} onDragStop={this.onDragStop}> {this.getDOM()} </ResizableAndMovable>

onDragStart() { console.log('hi'); }

Can't install package

Hi,

I'd like to use your component as it is exactly what I'm looking for, but unforunately, I get a following error:

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "react-resizable-and-movable"
npm ERR! node v5.11.1
npm ERR! npm  v3.8.6
npm ERR! code E404

npm ERR! 404 no such package available : @bokuweb/react-draggable-custom
npm ERR! 404 
npm ERR! 404  '@bokuweb/react-draggable-custom' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'react-resizable-and-movable'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Is there a problem with my system or is this a global problem? I haven't found anyone dealing with the same issue.

onResize callback

Hello Bokuweb,

I have a shape (eg. square or rectangle) inside Rnd component and if I resize the component I would want the shape also to resize accordingly. How will I be able to achieve this onResize ?

Thanks.

Multiple Rnd

Hello I have Multiple Rnd element into a components and I need to get the current instance and call the function updatePosition but seems like all the Rnd is update it and I just need one.

This is an example that I have , I removed others props
captions.captions.map(
(caption, i) => <Rnd key={caption.id} ref={c => { this.rnd = c;}}
initial={{
x : caption.position,
y : CAPTION_Y_POSITION,
width : caption.width,
height : CAPTION_HEIGHT,
}}
bounds={'parent'}
className={classes.box}
minWidth={50}
minHeight={50}
maxWidth={2500}
maxHeight={50}
onDragStop={(event, ui)=>{
updateCaptionRank(i, ui.position.left, caption.width);
/* if (captions.resetPosition) {
// Here is the issue sometimes get other box and not the current dragging box
this.rnd.updatePosition({ x : caption.position, y : 0 });
}*/
}}
onResizeStop={(dir, styleSize, clientSize, delta, newPos)=>{
updateCaptionRank(i, newPos.x, clientSize.width);
}}>


{caption.copy}



<span className={classes.edit} onClick={()=>captionUpdateMode(i)}/>

)

Parent padding problem

Using bounds = 'parent' and setting both padding-left and padding-right on the parent makes the right drag limit wrong (it looks like its padding-left + padding-right).
Reproducing the bug on the demo is easy, just open the dev tools and set the padding (left and right) to 100px.

Setting only the left padding 'works' (in this case, the right padding could not be set and is the same as left...).

The same thing happens on padding-top and padding-bottom.

Maybe I missed something ?

Resizer div sizes

Is it possible to change resizer div size and position? By default they are "height:10px" or "width: 10px".
How can I make them "height:4px" or "width: 4px" and move them a little inside?

zIndex stutters to lower values when using multiple Rnd elements

I'm building a web app that uses multiple Rnd elements at once to replicate a desktop experience - multiple draggable icons, and draggable + resizable 'windows'. Clicking on windows that are 'in the background' brings them to the forefront by tracking the 'highest zIndex' and adding to that. However, sometimes, when an element in already in the foreground, clicking on it (and thus firing the onDragStart and onDragEnd events in the Rnd element) causes the zIndex to momentarily switch to the same value as an element 'lower' on the screen. Through the React state/prop tree, new zIndex values haven't been passed down to any elements, but the react-draggable div's inline styles are changing. After digging into the source a bit, I'm finding it's caused by line 216 here:
https://github.com/bokuweb/react-rnd/blob/master/src/index.js

<div style={Object.assign(boxStyle, { zIndex })}>

I was able to solve this problem by just inlining the whole object instead of using Object.assign - I didn't have time to delve further to figure out if this is the right way to go about it, if I find time at some point I'll try to submit a pull request, but if someone wants to check this out, feel free.

why cannot specify a drag handle?

Hi,

it is very cool to use your react-resizable-and-movable. but i meet some problems with my content that i need select some text of the movable panel. in this case, when i try to select the text, the panel moves. is there a way to set drag handle like react-draggable?

Thanks.

Support span editablesu

When press the Enter key, the span tag whitch the contenteditable attribute is true cannot be displayed correctly

11
22

zIndex seems to be not applying

It seems to get applied on first render but it is not getting applied if pass through props (setting zIndex dynamically). It worked fine in v3.

Resize bounds not working for left and top directions

When I set bounds to parent and try to resize the box beyond the right or bottom border of the parent element, it works as expected, but when I try to resize the box beyond the top or left border of the parent element, it allows me to do that. I'll take a look at react-resizable-box and try to make a PR if I come with a solution.

onChange prop

Does it make sense to suggest an additional prop onChange: (updatedPosition: { x, y, width, height }) => void? It will call the passed callback when any change did happen (resize or drag) with the updated coords and dimensions.

enhancement: don't allow overlap

Hello,

I see a few way to restrict the overlaping of two rnd elements, but it would be nice to just set a boolean for that.

As I need this, could you tell me how you would do that? (Do I use onDrag callback to verify if overlap is happening and prevent it?)

Thank you very much for the nice work,
regards

Unnecessary dragging if using a select tag inside rnd component

Hi,

I am using a select tag inside my rnd component. When I click on it, the dropdown opens and everything works fine if I select an option from the dropdown. Now when I open the dropdown and do not select anything and click anywhere in my page, the rnd is component moves to the place where I had clicked. Is there a way to stop this ?

problem in webpack environment

ERROR in .//react-resizable-and-movable//react-resizable-box/lib/index.js
Module parse failed: /Users/geohu/Codings/Web_front/hingeOrgChart/node_modules/react-resizable-and-movable/node_modules/react-resizable-box/lib/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, { Component, PropTypes } from 'react';
| import assign from 'react/lib/Object.assign';
| import Resizer from './resizer';
@ ./~/react-resizable-and-movable/lib/index.js 17:25-55

touch problems to resize elements

Hey, I think we have an issue with touch support when resizing elements.
I haven't gone through all the code, but I could trace the problem..

I'm not sure why the whole event isn't passed forward in this line
https://github.com/bokuweb/react-resizable-box/blob/master/src/resizer.js#L91

But if we do that, we can't call e. stopPropagation here. Not sure if it needs to be stopped (probably it does), but if it doesnt, we could just test if the object has that function.
https://github.com/bokuweb/react-rnd/blob/master/src/index.js#L134

Otherwise we could pass the whole event and adapt the other function to work properly with this change.

Am I missing something?
What do you think about it?

Resizing does not lock moving

Great component thanks!
However, when i place in in my app, every time I resize the box moves too. This does not happen in you demo. Any ideas why?
Also, is there a way to stop the resize arrow from appearing on the y axis?
Thanks!

Problem with nested movable components.

Moving a nested ResizableAndMovable component results in the parent moving and the child moving at double speed. I believe all that is needed is a call to e.stopPropagation() inside the onDragStart function.

Module not found:

Hey! So this issue is pretty strange – I was previously using version 4.2.0. Since I upgraded, I'm seeing:

Error: Cannot find module 'react-rnd'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/coletownsend/Documents/gits/design-af/.next/dist/components/resizeableDiv.js:39:17)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3) code: 'MODULE_NOT_FOUND'

I've tried:

  • deleting and reinstalling node modules
  • using node 7.2.0 and 7.9.0
  • installing with npm instead of yarn

Abort Warning: setState(...) when using timeStamp as component key

For special purpose, I need to use time-stamp as component key.
In my project, I used Redux as state manager.
After drag a component, and I try to use onDragStop event to update redux's state.
At this time , I received a Warning below:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Draggable component.

<div>
    // Rnd has key={timeStamp} 
    <Rnd onDragStart={this.onStart} onDragStop={this.onStop}>
        {this.props.children}
    </Rnd>
</div>
// action updateComponent is to update it redux state
onStop(e, ui) {
        // 组件的top和left
        const position = ui.position;
        this.props.updateComponent({
            wrapperKey: this.props.wrapperKey,
            top: position.top,
            left: position.left,
            width: ui.node.offsetWidth,
            height: ui.node.offsetHeight
        });
    }

I found another way to set the key, so the question below should close.

Why doesn't setState effect component's position?

Hi,

For x, y and width I'm using component's state. That is because the state of the component can be fetched for recovery and things like that. but it seems like "ResizableAndMovable" does not handle reRendering of the component.

Any advice?

Thanks.

Resize on left and top edge

Hi Bokuweb,
I would like to be able to resize by clicking and dragging on the left (and top) edges.
Are there any plans to allow for this?

After I call an updatePosition and updateSize the component isn't draggable

This may be my mistake (probably is) but I have a component that uses your component for some features my component as a fullscreen toggle that uses your component, but after I toggle the code I can no longer drag the component. The code is:

  componentWillUpdate(nextProps, nextState) {
    if (nextState.fullscreen && !this.hasBeenSetToFullscreen) { this.setToFullScreen(); }
    if (!nextState.fullscreen && this.hasBeenSetToFullscreen) { this.toggleOffFullScreen(); }
  }

  setToFullScreen() {
    const { clientWidth, clientHeight } = document.body;
    const bodyRect = document.body.getBoundingClientRect();
    const elemRect = this.rnd.wrapper.getBoundingClientRect();

    this.oldSizePos = {
      width: this.rnd.wrapper.offsetWidth,
      height: this.rnd.wrapper.offsetHeight,
      x: elemRect.left - bodyRect.left,
      y: elemRect.top - bodyRect.rop,
    };

    this.rnd.updateSize({ width: clientWidth - 40, height: clientHeight - 80 });
    this.rnd.updatePosition({ x: 0, y: 0 });
    this.hasBeenSetToFullscreen = true;
  }

  toggleOffFullScreen() {
    const { width, height, x, y } = this.oldSizePos;
    this.rnd.updateSize({ width, height });
    this.rnd.updatePosition({ x, y });
    this.hasBeenSetToFullscreen = false;
  }

Here is a demo sorry the gif is kind of fast: out

I'm sure this is an error I am doing?

An in-range update of react-draggable is breaking the build 🚨

Version 2.2.6 of react-draggable just got published.

Branch Build failing 🚨
Dependency react-draggable
Current Version 2.2.5
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

react-draggable is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details - ❌ **continuous-integration/travis-ci/push** The Travis CI build could not complete due to an error [Details](https://travis-ci.org/bokuweb/react-rnd/builds/227435661?utm_source=github_status&utm_medium=notification)

Commits

The new version differs by 5 commits0.

  • 2673062 release v2.2.6
  • 845aaa8 Merge branch 'ts-tests'
  • d746352 feat(ts): Remove unused root d.ts & update yarn.lock
  • bfc9374 docs(deprecations): remove old props
  • a31c5bb Move TS defs to own folder and add tests

false

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Nested exception

If the Rnd is nested, the'onClick' events of the subclass and parent are no longer responsive,the parent copies the z-index value witch belongs to sub class

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.