justqing00 / react-drag-resize Goto Github PK

View Code? Open in Web Editor NEW

18.0 2.0 6.0 607 KB

react component drag and resize

JavaScript 100.00%

react-drag-resize's Introduction

react-drag-resize

react component drag and resize

How to install

npm install --save react-drag-resize

How to use

see ./demo
child must use absolute style for position confirmation. Like style class: child-container size-auto
child must have key, key suggest use string

import DragResizeContainer from 'react-drag-resize';

const layout = [{ key: 'test', x: 0, y: 0, width: 200, height: 100, zIndex: 1 }]

<DragResizeContainer
    className='resize-container'
    resizeProps={{ 
        minWidth: 10, 
        minHeight: 10, 
        enable: canResizable(isResize) 
    }}
    onDoubleClick={clickScreen}
    layout={layout}
    dragProps={{ disabled: false }}
    onLayoutChange={onLayoutChange}
    scale={scale}
>
{layout.map((single) => {
  return (
    <div key={single.key} className='child-container size-auto border'>text test</div>
  );
})}
</DragResizeContainer>

const canResizable = (isResize) => {
    return { top: isResize, right: isResize, bottom: isResize, left: isResize, topRight: isResize, bottomRight: isResize, bottomLeft: isResize, topLeft: isResize };
};

DragResizeContainer Props

{
  layout,  // all children size and position,  demo: [{ key: 1, width: 100, height: 1000, x: 0, y: 0, zIndex: 1 } ]

  onLayoutChange, // callback layout

  dragProps,  // same to react-draggable props

  resizeProps,  // same to react-resizable-box props

  scale, // zoom or scale rate for component drag or resize

  onDoubleClick, // for resize-container double click
}

Base Packages

react-resizable-box

react-draggable

Inspiration From

In a project I have to make React compoments dragable and resizable, and I found react-rnd. But it has some bugs about muti compoments drag and show even when it's latest version(v5.0.3). So I refactor one, base on Base Packages.

CheckList

Changelog

0.1.4

resize to all direction

0.1.2

dragging scale fix in react-draggable

0.1.1

add support for resizing components inside scaled or zoom Div

0.1.0

onLayoutChange waring fix

0.0.9

fix resize width bug

0.0.8

key not empty, fix position bug

0.0.7

fix layout warning

0.0.6

can add other props for container

0.0.5

every single child z-index control

0.0.4

a way can export and restore all children size and postion

0.0.3

resize can not overflow boundary
support touchEvent
support other container

0.0.2

children drag and resize can not influence each other
can not drag when resize
can just use container not every DragResize component

0.0.1

base drag and resize

react-drag-resize's People

Contributors

Stargazers

Watchers

Forkers

happy-ferret hanwenbo jaymark820 alphadecodex waskito faiz-exploit

react-drag-resize's Issues

Cannot read property 'key' of undefined

Facing issue while passing render div as children, if div are used at the same component its working fine

<DragResizeContainer
        className='resize-container'
        resizeProps={{
          minWidth: 10,
          minHeight: 10,
          enable: this.canResizable()
        }}
        onDoubleClick={this.clickScreen}
        layout={layout}
        dragProps={{ disabled: false }}
        onLayoutChange={this.onLayoutChange}
        scale={2}
      > 
        {
          this.props.children
        }
      </DragResizeContainer>

Needs a demo

It's hard to understand what an abstract component like this is doing without a demo page.

Could you add a website / github page that demonstrates your component in action?
Perhaps use https://github.com/storybooks/storybook ?

Changing height also changes y position

As it can be seen on onLayoutChange y position must not changed since we only update height.

Reproduce steps:

Add console log to onLayoutChange to see difference
Click draggable once
Resize height
Click draggable once

When you click draggable once, you will notice it will turn back to its original y position

TypeError: childMap is undefined | Uncaught TypeError: Cannot read property 'zIndex' of undefined

I'm pretty new to React, javascript and the way the api docs are displayed so I may simply be misreading the instructions, however I believe I may have a bug.

For reference, I've added this to my project using 'npm install react-drag-resize'.

So when I try to use this code

import React from 'react';
import ReactDOM from 'react-dom';
import DragResizeContainer, {DragResize} from 'react-drag-resize';

ReactDOM.render(
    <DragResizeContainer>
    <div></div>
</DragResizeContainer>, document.getElementById('root'));

I receive this error in chrome.

bundle.js:21557 Uncaught TypeError: Cannot read property 'zIndex' of undefined
    at DragResize.render (bundle.js:21557)
    at finishClassComponent (bundle.js:13336)
    at updateClassComponent (bundle.js:13313)
    at beginWork (bundle.js:13692)
    at performUnitOfWork (bundle.js:15660)
    at workLoop (bundle.js:15769)
    at HTMLUnknownElement.callCallback (bundle.js:4386)
    at Object.invokeGuardedCallbackDev (bundle.js:4425)
    at invokeGuardedCallback (bundle.js:4282)
    at performWork (bundle.js:15887)

It seems like its because 'childMap' is missing, did I misunderstand something in the usage of your component or is this a bug? I tried passing 'childMap' as a prop entry through DragResizeContainer however it doesn't appear to help.

Cheers