It would be nice to have an option to disable motion animations in all different cases:

• dragging
• resizing
• others

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofPaneStack.warning

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method ofPaneStack.

This is a feature question.

Is it possible to have the grid move very freely in the X, and Y directions as you drag. The way that react-grid-layout can move? Demo here: https://strml.github.io/react-grid-layout/examples/1-basic.html

beautiful work!

Overview of the problem

I'm using react-sortable-pane version [1.0.2]
My browser is: Chrome 69.0.3497.81
I am sure this issue is not a duplicate
https://codesandbox.io/embed/r5x8x63v1n

Description

After init, I try to add panes to the sortablePane, but I find that the added panes are in the wrong place after the second insert.

Steps to Reproduce

1. In the demo before, just click the add button twice，you will find the problem

Expected behavior

added panes in the right position

Actual behavior

added panes in the wrong position, with a large blank space

My options

actually I find the reason after debugging. In the function below

   getPaneSizeList(): Array<number> {
    const width = this.panes.map((pane: PaneProperty) =>
      Number((pane.ref && (pane.ref as HTMLElement).offsetWidth) || 0),
    );
    const height = this.panes.map((pane: PaneProperty) =>
      Number((pane.ref && (pane.ref as HTMLElement).offsetHeight) || 0),
    );
    return this.isHorizontal() ? width : height;
  }

Seems the function is fine. but let's see the Dom

There is a div with className __resizable_base__, which will be involved in the calculation of next pane's position. This lead to the wrong position of the new added panes.
I know the reason but cannot find a way to fix it. Help is needed.

since panes are positioned absolute, we can't show or hide panes with the CSS display: none property, the other panes would remain in place....

@bokuweb I'll try to implement that functionality myself though, don't want you to work for my requirements - i'm sure you have a day job ;)

Getting reference error when trying to use react-sortable-pane with server-side rendered component, due to eventlisteners

Issue is also present in react-resizable-box dependency

I need a way to get the order of the panes. Is there an array I could look at too get that order.

Sorry to span Issues. But I believe this could be helpful for other people too.

I want to create a view with two columns.

The user shall be able to horizontally expand one column. When he does this, the other column should correspondingly reduce width so that both columns together always span 100% of width.

I believe this could be achieved with an onResize handler on SortablePane: on resize a function would reduce the width of the other pane.

I am a bit of a react noob. Could you tell me if this idea is correct and maybe how to set the width of a pane in a function?

Example: https://codesandbox.io/s/5wy4zk8n7k
The position of '000' element calculated incorrectly. And '001' probably too.

Hello!Why I can't run this code, when I opened the index.html page, it means that the error is Failed to load the resource: the requested URL on the server can't find

I am wondering if it is possible that only drag the pane with drag handle, so that I may add other mouse event on the pane which will not interfere with the drag.

Overview of the problem

Fix position when resizing with % width

Description

Steps to Reproduce

Expected behavior

Actual behavior

@bokuweb Great component! Was looking all over the web for this, think I struck a gold mine with react-sortable-pane... How / Where did you get the inspiration? :)

Roadmap suggests vertical panes on the horizon, any ETA on that feature? How can I help?

I would also like to split panes when dragged on top of each other...

So I have a react-sortable-pane on a page with two items. On initialization, they are in order [0,1]. If I swap the order to [1,0], I fire off a dragStop event (orderChanged fires even if I haven't dropped, and that's not desirable). At dragStop I update the order in my app state. Everything is good.

Then I click a button which opens a right-sidebar. This causes my react-sortable-pane to reset to [0,1] order. Within componentWillReceiveProps, if I log this.props.children I see the children in the original order. If I log next.children, I see the children in the desired [1,0] order.

However, because componentWillReceiveProps is checking the arbitrary order prop, the setState({ panes: newPanes }) never gets called. If I manually call this.setSize() from within componentWillReceiveProps, the order of my panes are correct.

The problem I have is - I'm not sure how to fix this properly. Since the internals of pane order simply uses the index in an array, as opposed to something concrete like id, I can't just explicitly update the order.

Do I now have to manage the order myself and pass it in to the SortablePane component? That seems like duplicitous effort - I don't really care - I just want the order to be maintained across re-renders.

Do you have any other thoughts on this?

Hi!

Storybook maintainer here. I'm looking around for a solution to a problem, and your package looks close to what we need!

I'm wondering if you'd be interested in cooperating with us and make storybook better by utilizing your package? Since you're using Storybook for your documentation, and this project is actively maintained ( 😍 ) I figured I would just see if you'd be interested in some collaboration?

- ❤️ - Storybook Team -

I was playing around with your demo and it crashed.

I hope my screenshot will help you:

How can I performe this logic on array list of values

state = {
    order: [['2', '1', '0'],['3','4']],
 
  };

I've encountered a strange behavior that only exists when disableEffect={true}. I have vertical panes, and when changing the y size of the first pane, it jumps to the same position as the second pane when releasing the mouse. It then jumps right back to its right spot if the mouse is clicked again. This does not happen when moving the second pane, even after it is rearranged. Take a look at the gif below.

If you have trouble reproducing, I'll try to create a minimal case. I had a look through the source, but couldn't figure out why this is happening. I believe it has to do with the translate3d not updating correctly, but that's as far as I got.

I wish I could bring this feature to my table Columns

Overview of the problem

I'm using react-sortable-pane for my react project it works fine on chrome (drag and drop and sort functions is working fine) but not on IE

Description

It seems to have a cross browser functionality issue.

Steps to Reproduce

Expected behavior

Actual behavior

@bokuweb In The Code of dependancy ‘react-resizable-box’ the string ’px’ is always appended to this.state.height and this.state.width in the component’s render() method

I tried hacking it but fruitless for now ... Any tips on how to achieve this without changes in your packages?

Overview of the problem

I'm using version 1.0.2
My browser is Google Chrome

Description

The onDragStop callback function is fired every time the mouse moves over a pane rather than just when the mouse is released.

Steps to Reproduce

• Create simple list of panes - e.g., https://codesandbox.io/s/0o4x4mx3xv
• Add onDragStop prop
• Move mouse over the panes. onDragStop function is called.

Expected behavior

onDragStop to only be called when mouse is released after dragging panes.

Actual behavior

onDragStop is fired on mouse move.

Bug

Hello, i report a general bug in the documentation you say :
"Calls when a Pane component is clicked (e.g. to sort it). It will not be executed if isSortable is false. Calls back with (id: number or string)"

Overview of the problem

• I'm using react-rnd version [0.5.5]
• My browser is: google chrome
• I am sure this issue isn't duplicate

Description

onDragEnd is call when you click everywhere in the browser window

Steps to Reproduce

This is your test updated for show my bug

/* eslint-disable */

import React from 'react';
import ReactDOM from 'react-dom';
import { SortablePane, Pane } from './components';

const root = document.querySelector('main');

const style = {
  fontSize: '40px',
  textAlign: 'center',
  borderRadius: '5px',
  padding: '15px',
};

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.id = 3;
    this.state = {
      order: [0, 1, 2],
      list: [
        <Pane
          id={1}
          key={1}
          width="100%"
          height={120}
          minWidth={100}
          maxWidth={800}
          minHeight={100}
          style={style}
          className="item"
        >
          <span>no1<br />resize or sort me!!</span>
        </Pane>,
        <Pane
          id={2}
          key={2}
          width={450}
          height={100}
          minWidth={100}
          minHeight={100}
          style={style}
          className="item"
        >
          <span>no2<br />resize or sort me!!</span>
        </Pane>,
        <Pane
          id={3}
          key={3}
          width={470}
          height={110}
          minWidth={100}
          minHeight={100}
          style={style}
          className="item"
        >
          <span>no3<br />resize or sort me!!</span>
        </Pane>,
      ],
    };
    this.add = this.add.bind(this);
    this.remove = this.remove.bind(this);
    this.onResize = this.onResize.bind(this);
  }

  onResize(i) {
    console.log(`resize pane id = ${i}`);
  }

  add() {
    this.state.list.splice(~~(Math.random() * this.state.list.length), 0, (
      <Pane
        id={++this.id}
        key={this.id}
        width={~~(Math.random() * 100) + 350}
        height={~~(Math.random() * 200) + 100}
        minWidth={50}
        minHeight={100}
        style={style}
        className="item"
      >
        <span>no{this.id}<br />resize or sort me!!</span>
      </Pane>
    ));
    this.setState({ list: this.state.list });
  }

  remove() {
    this.state.list.splice(~~(Math.random() * this.state.list.length), 1);
    this.setState({ list: this.state.list });
  }

  onDragEnd = () => {
    console.log('drag end !');
  }

  render() {
    return (
      <div style={{ width: '800px', background: '#ccc' }}>
        <h1>sortable pane</h1>
        <button
          onClick={this.add}
          style={{
            color: '#fff', borderColor: '#fff',
          }}
        >
          Add
        </button>
        <button
          onClick={this.remove}
          style={{
            color: '#fff', borderColor: '#fff', margin: '0 0 30px 10px',
          }}
        >
          Remove
          </button>
        <SortablePane
          direction="vertical"
          margin={20}
          onResize={this.onResize}
          onDragEnd={this.onDragEnd}
          onOrderChange={(pane) => console.dir(pane)}
          onResize={(e, data) => console.dir(data)}
          order={this.state.order}
          isSortable={false}
        >
          {this.state.list}
        </SortablePane>
      </div>
    );
  }
}

ReactDOM.render(<Example />, root);

Expected behavior

Event onDragEnd should not be call when the window is clicked or when isSortable is false

Actual behavior

onDragEvent is call everytime i click on my window and when isSortable is false

FIX

I propose a fix there #66

How can I set a drag interval (instead of the default 1px, if I want to drag in 10px or 50px intervals) ?

Thanks.

Overview of the problem

I'm using react-sortable-pane version [0.6.5]
My browser is: Firefox, or IE
I am sure this issue is not a duplicate

Description

When I try to drag a pane in Firefox or Internet Explorer, it returns "TouchEvent is not defined" in the console.

Steps to Reproduce

1. Use react-sortable-pane in Firefox
2. Try to drag a pane

I believe this is a simple fix, I found this article on stackoverflow that shows the code that needs to be added.

https://stackoverflow.com/questions/27313488/touchevent-not-working-in-firefox-and-other-website-browser

Great component...
but how can interact with specific element inside Pane Component?
For example inside Pane element I have 2 button that execute 2 different actions

Overview of the problem

I'm using react-sortable-pane version [0.7.0]
My browser is: Chrome
OS: Mac OS X

Description

During dragging phase when mouse leave track area or window dragging stopped instead continuously moving like react-draggable do. Is it bug or implementation limits? How to prevent this?

I notice that the left most pane (in horizontal setup) can't be dragged left to expand.

How do I set up the same behavior on the right most component? (Prevent dragging right to expand, but allow dragging left)

Thanks.

Bug

Overview of the problem

I'm using react-sortable-pane ^1.0.0 and ^1.0.4
My browser is: Tested Chrome and Safari
I am sure this issue is not a duplicate

https://codesandbox.io/s/66367ox0z

Description

Passing a custom React.Component instead of <Pane> as children of <SortablePane> will prevent sorting the Panes.

Steps to Reproduce

I modified the initial example to:

function PaneItem({ key }) {
  return (
    <Pane
      key={key}
      defaultSize={{ width: "100%", height: 120 }}
      style={paneStyle}
    >
      <p style={textStyle}>00{key}</p>
    </Pane>
  );
}

export default function SimpleVertical() {
  const panes = [0, 1, 2].map(key => <PaneItem key={key} />);
  return (
    <div style={{ padding: "10px" }}>
      <SortablePane direction="vertical" margin={20}>
        {panes}
      </SortablePane>
    </div>
  );
}

Expected behavior

You should be able to pass a React.Component that wraps a <Pane>.

Actual behavior

No sorting available. The CSS shows the Panes are position:relative instead of position:absolute

Question

Is it possible to fix a single pane in place so it can't be sorted and other panes flow around it?

If not could you lend some insight into maybe creating a PR for it if worth it?

@bokuweb: great work on version 0.2.0! :)

now that you got vertical panes implemented (by popular demand ;) how much effort would it be in your opinion, to mix horizontal and vertical panes, i.e. freely drag horizontal to vertical panes and vice versa?

see yellowiscool/LeCadreur as an example (click on flip - top right corner and then drag by color handles)

also kind of like a combined version of STRML/react-grid-layout and its horizontal counterpart cmelion/react-grid-layout

or even gridster.js

Thanks for your feedback! I checked out your github repos as well as blog and you have very interesting projects ... I can feel this component becoming big!

Hi,

I'm using version 0.6.8.
I have modified the example with the controllers to dynamically add and delete panes.

Here's one thing I don't understand, unless I'm doing something wrong:

1. The "order" value, which is provided when the panes are being initialized in the stories example doesn't seem to do anything and never seems to change when I log it in the onDragStop and onOrderChange.

...this.state = { order: [0, 1, 2], list: [0, 1, 2].map(id => (...

2. What's the use of the order prop in the pane, if you look at the demo log you'll also see that the array which is being logged in onDragStop has the proper order, but the order values never change, they actually represent the position of the pane at the time it was created.

Is the order prop there to represent the chronological order, not the current one and I have to get the current one programatically from the current array order?

BR
Daniel

I have an array of images, each represented by a pane, which I want to lay out in a floating grid, and then allow reordering by dragging left/right and also up/down. Is this possible in the current implementation? If not, will you consider this a worthy feature?

Overview of the problem

I'm using react-sortable-pane version [0.6.5]
My browser is: Google Chrome
I am sure this issue is not a duplicate?

Description

onDragStop event is bubbled up to the window for whatever reason instead of being tied to a parent element. This causes it to be called whenever someone clicks anywhere on the page. I believe it's the same for multiple other methods.

A thing to note is that I'm also using the drag handler. Not sure if there's a bug with that rather than the event itself.

Steps to Reproduce

1. Add onDragStop to your SortablePane component
2. console.log(panes)
3. Check console

Expected behavior

It should log the changed panes after you stop dragging.

Actual behavior

It logs the changed panes everytime you click on the page, regardless if you click on the handle or element.

dear @bokuweb, could you please update to the latest version (1.1.3), so latest improvements are carried over to its sister project... thanks! :)

Overview of the problem

You're not able to drag, drop or resize in safari. Not even on the demo: http://bokuweb.github.io/react-sortable-pane/

Safari
Version 11.0.3 (13604.5.6)

I've tried a few different things, but can't seem to get isSortable="false" to work. The panes can still be dragged as before.

Am I doing something wrong or is this a bug?

Thanks^^

render() {
    return (
        <SortablePane
          isSortable="false" /* <-- not working, also does not work on individual panes */
          direction="vertical"
          margin={3}
          onResize={(id, dir, size, rect) => null}
          onOrderChange={(panes) => null}
          disableEffect="true" /* <-- this does work :)  */
        >
          <Pane
            id={1}
            key={1}
            width={"99%"}
            height={25}
            style={this.state.styles}
          >
            こんにちは
          </Pane>
          <Pane
            id={2}
            key={2}
            width={"99%"}
            height={500}
            style={this.state.styles}
          >
            Bonjour
          </Pane>
          <Pane
            id={3}
            key={3}
            width={"99%"}
            height={"200"}
            style={this.state.styles}
          >
            Hello
          </Pane>
        </SortablePane>
    );
  }

in orderChange I get next

[
{ 
   height:252,
   id:9, 
   order: 1,
   width: 148,
>>want here add parameter  - name: 'some name from tag pane ', 
}
{ 
   height:252,
   id:12, 
   order: 2,
   width: 148,
}
{...}
]

my Pane

<Pane 	data-id =	{key.name} 
										key =		{index} 
										className =	'column'
									        isResizable =   {{x: false, y: false, xy:false}}
									        name =            {key.name}
										width =		{148} 
										height =	        '100%'
										id =		        {key.id}>
													<div className='table_head'>
														{language_variant[key.name]}
													</div>
													<div className='table_content'>
													</div>
								
										</Pane>

I'm using a text area in the panes. When expanding the text area, the pane does not resize. Setting minHeight on the pane element makes the pane resize in correlation to the text area if I did inspect element and changed the computed css thru firebug/dev tools

First of all, pretty neat implementation! Probably this feature request should be implemented as another component, I think usually we don't want horizontal scrolling or the elements to go out of the visible area. So, it would be great if by dragging an element edge, it would resize the next one as well to keep them fitted into the parent container. I guess it would be useful for your example as well.

Hi,

thanks for this amazing framework. I like to use it, but for mobile purposes it seems to crash always on touch events.

Steps to reproduce:

1. Go to https://codesandbox.io/s/5kn43wl9y4
2. Switch into your browsers developer mode with mobile preview
3. Try to drag elements
4. Observe the error

Question: Would you are going to support touch events in the future or not? Maybe it would be best to tell the user of the framework, that touch is not supported and catch the error? Otherwise, I would love to have touch events enabled.

Can we prevent sorting if certain condition is met?

Hi I'm using "react": "^15.6.1".
when setting direction to 'horizontal' the list are normal but when set it to vertical all panes come stacked on top of each other i'm wondring if it is a bug or the code need to be fixed, the code i used is the one provided in the example of the repostrie, code:

<SortablePane direction="vertical" margin={20}>
   <Pane id={0} key={0} width={120} height="100%">
     <p>0</p>
   </Pane>
   <Pane id={1} key={1} width={120} height="100%">
     <p>1</p>
   </Pane>
 </SortablePane>

item1

   </Pane>

   </Pane>
    </SortablePane>

If you change the size of any child then sizePropsUpdated is set to true, then setSize is called, which ignore the order from props

I made same component exactly same as example code
and just edit "isResizable" props like below code.

<Pane
                    width={200}
                    height={500}
                    style={style}
                    id="A"
                    isResizable={{ x:false, y:false, xy:false }}
                    >

but component still resizable.
I used version 0.2.3

hi there again @bokuweb, i'm not done making trouble! :)

if i've read your code correctly, the Pane component is not stateless, i.e. always same behavior with same props because when I change props width or height on <Pane>, box dimensions do not change but stay at the initial sizes...

Is that behavior on purpose? I would need to support resizing the box programmatically as well (not only via the resizers...)

As always, Any feedback is appreciated! ;) Thanks