bokuweb / re-resizable Goto Github PK

Hey,

I'm using the newest version of your library and would like to include an icon into a handle. I could not find an option to do that.

Best,
Jan

Overview of the problem

Resizable is preventing a child component from updating when its prop, which is an object, has a property change.

I'm using react-resizable-box 2.0.6

I am sure this issue is not a duplicate?

Description

I've made the props more generic for simplicity

I'm using <Resizable /> around a function that decides if a simple or complex version of a component should be used. The simple version is used most of the time, and only accepts a single data object prop. That data prop at a minimum contains a value property.

• When the function is wrapped in <Resizable /> and the data.value is changed upstream, the simple version of the component does not re-render.
• Without the function being wrapped in <Resizable />, when the data.value changes, the simple version of the component re-renders correctly.
• When I directly render the simple version of the component as a child of <Resizable />(instead of choosing it in a function), the component updates correctly when the data.value changes upstream.
• When I pass value directly (instead of data) as a prop to the simple version generated from a function wrapped in <Resizable />, it re-renders correctly when data.value changes upstream.

Theory

I was able to recreate the issue using a simple wrapping component that uses the same optimization in shouldComponentUpdate as <Resizable />:

import React from 'react'
import isEqual from 'lodash/isEqual'

export default class ExampleBlockingWrapper extends React.Component {
  shouldComponentUpdate (nextProps, nextState) {
    return (
      !isEqual(this.props, nextProps) ||
      !isEqual(this.state, nextState)
    )
  }

  render () {
    return (
      <div>
        { this.props.children }
      </div>
    )
  }
}

This leads me to believe that this is an issue with lodash's isEqual being unable to detect deep/complex differences between this.props.children and nextProps.children.

Proposed Solution

Sure, I can change my code to work within the constraints of this library's optimization, but I don't think that's a good long-term solution. A component that wraps around children is different than a parent component that renders subcomponents. Parent components can be optimized with your !isEqual strategy because only the props & state impact the subcomponents. Wrapper components accept the children as a prop, which can make detecting equality very complex.

I found this answer to this question about optimizing wrappers helpful in understanding what was going on.

With React 16 on the horizon, I propose that we remove the optimization in Resizable's shouldComponentUpdate in favor of allowing React to decide if a wrapper should allow its children to update.

I'm using re-resizable 4.1.1

Bug appears in IE11.
I can't provide reproduced project on webpackbin, cos webpackbin doesn't work in my IE11.

When I drag resize handle, the text around became seleted sometimes.
In my case, this bug appears with complext layout, when animation framerate slows down.

I solved that by adding "-ms-user-select: none; user-select: none;" to handle style;
"user-select: none" just for safity.

ref issue bokuweb/react-sortable-pane#49

It is not working properly...

when mouse down right corner, the resizable box width and height changed
before i drag

can you fix this?

Is it possible to use an Resizable component inside another Resizable component?

I tried to make the parent element with the ability to change its height and the child element with the possibility of changing its width. In this case, the width of the child element does not work correctly. At the first change of width nothing happens, the subsequent changes always lag behind one change.

working demo https://codesandbox.io/s/3lnZ2rPXr

I am using the version 4.1.2,and I used it in the left tree,and the tree's height can change when the tree opened or closed,but the drag bar's height not changed,in this case I can't resize it at the bottom of the tree

The current logic in componentWillReceiveProps doesn't look correct: newWidth is taken from this.props.width instead of the newly provided props.

It causes lag when controlling the width manually via props, which I'm currently doing to make corrections if the browser window is resized to not to fit the whole resizable container: https://github.com/airdcpp-web/airdcpp-webui/blob/master/src/routes/Sidebar/components/Sidebar.jsx#L62 (http://webdemo.airdcpp.net)

Description

There is an error in type definition (index.d.ts) file.

re-resizable v4.0.0
typescript v2.5.3

Expected behavior

No Error

Actual behavior

ERROR at /.../node_modules/re-resizable/index.d.ts(103,7):
TS1086: An accessor cannot be declared in an ambient context.

Link to webpackbin is broken, both in template for issues and on readme

https://www.webpackbin.com/bins/-Kvnrpd3GSG6-z0tpgH_

I need to pass props to the container div that aren't currently "whitelisted" by the component (such as id). Since the div container doesn't really contain any special logic, could it make sense to pass all unconsumed props to the div element as they are?

    const { componentProp1, componentProp2, ... , ...other  } = this.props;
    return (
      <div
        ref="resizable"
        style={{
          ...
        }}
        {...other}
...

I am displaying a window with a 16:9 video and a 60 pixel tall title bar. I would like to keep the video aspect ratio consistent when resizing the window, so I tried the lockAspectRatio option. Unfortunately, it is only really useful if the resizable panel contains only the content to show at a certain aspect ratio and no title bar, sidebar, border widths, etc.

Perhaps this could be solved by introducing some additional behavior and options?

• lockAspectRatio: boolean | number
• lockAspectRatioAdditionalHeight: number
• lockAspectRatioAdditionalWidth: number

The lockAspectRatio would be set to true for current behavior or 16/9 (for example) for new behavior. The other options would default to 0 to get the current behavior or some value (i.e. 60) would be subtracted from the window size before the ratio calculation takes place.

Thoughts?

Hi @bokuweb

Thanks for writing this component, I'm using it in my linter-ui-default. I visit the npmjs readme sometimes to read about the API and it's empty. Can you please make sure to include the README with the next update?

Feature request:
Can updateSize have an optional smooth transition? Just to make the updateSize look smooth.

Resize bounds not working for left and top directions.
Box position is changed when resizing top or left direction on react-rnd .
This has not been considered in react-resizable-box.

bokuweb/react-rnd#97

Overview of the problem

I'm using re-resizable version [4.2.1]

Description

Setting a minimumsize to 0 will result in the minimum size to be 10px, ref this line: https://github.com/bokuweb/re-resizable/blob/master/src/index.js#L411

Why is this limitation set?

Expected behavior

That the element should be allowed to resize to 0px

Actual behavior

Minimum size is 10px

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

There is no possibility to add custom class on resize handler.
Like I have enabled only bottomRight to handle drag, so I need to add some custom class on the div created for the bottomRight resize handler.

feature/question

Overview of the problem

I'm using re-resizable version [4.0.2]

My browser is: any

I am sure this issue is not a duplicate?
no

Description

I need an ability to pass custom handle component. Is there any way to do it?

I'm using re-resizable 4.0.3
My browser is Chrome
What is "__resizable0" element in DOM tree? It totally breaks my layout. Can I remove or customize it?

Object.assign() is not supported by IE11 (and previous versions also).
Object doesn't support property or method 'assign'
is thrown when attempting to render in IE11.

Is there a change you could replace Object.assign with a polyfill or something? I've tried to do it on my end with no luck :(

Def not the right place to ask this but am porting my app https://cloudup.com/c1mknrqo_8f and any way to animate orientation change (as shown) with the updateSize hook?

Overview of the problem

I'm using re-resizable version 4.0.2

https://www.webpackbin.com/bins/-KygHWlVVmSeZtaH2rc3

My browser is:

Chrome 62.0 and Firefox 56

Description

Can't resize height if it's given in %, width works fine with %.
OnResize event it firing correctly with events, but the actual shape does not change.

Steps to Reproduce

• Set the size to something using int values.
• Validate it resizes in both directions
• Change width to %
• Validate it resizes in both directions
• Change width back to int (or not, it does not matter)
• Change height to %
• Can not resize height anymore

Expected behavior

Can resize heigh if given in %, same as width

Version 15.6.1 of react just got published.

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

As react is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 2.31.0 of eslint-plugin-flowtype just got published.

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

As eslint-plugin-flowtype is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

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

Question

Overview of the problem

I'm using re-resizable version 2.1.0

My browser is:

Chrome

I am sure this issue is not a duplicate?

Description

I was using last react-resizable-box and wanted to get the last version in order to move to react 16 at some point.
When doing so, I noticed a different behaviour with the onResize callback.
Previously I was using the elementRef clientWidth and clientHeight to resize my element.

After the update, the width and height of the element is not changed when resizing.

Expected behavior

div clientWidth and clientHeight is updated

Actual behavior

element is not updated

I would like to unable resizing capabilities conditionally.

It was working fine in "react-resizable-box": "2.1.0": when resizable was disabled I was passing { enable: {@here for each was set to false@} } as a prop. Width and height has been set to 'auto'. When I wanted to activate resizable I was extending props by enabling one of the handlers and was setting width and height to specific px size, which were then set on the component.

With the latest version that behaviour is broken. When resize is enabled width and height are set to 'auto', then if I resize, they are set to specific px, later when I disable handlers width and height are not reset to 'auto'

And I would like to have Resizable component always mounted.

When I try to render a Resizable component, I always throw this error.

invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of DraggableElementsContainer.

How can I fix this?

I noticed that the cursors used in angles' style are all swapped. For example, here the south-west sw-resize cursor is used for the topRight angle.

I guess on Window (and maybe Mac) this is not noticeable since the ne icon is probably the same used for sw (i.e. a double-arrow line going from the top right to the bottom left), but on other OSes icons can be different. For example, here's what I see on Ubuntu:

I'm using react-resizable-box 4.0.0
My browser is: Mozilla Firefox / Chrome

Expected behavior

It should just remove it normally on ComponentWillUnmount

Actual behavior

i'm having an issue on last line of this...

console outputs "NotFoundError: Node was not found"

Hello, I noticed some jump/glitch when resizing an element with aspectRatio true

Looking at the code
https://github.com/bokuweb/react-resizable-box/blob/master/src/index.js#L174

I don't understand why there is this check. Removing it and updating both width and height solve my case.
I will make a PR as soon as I understand why you needed this check

Hi, I would like to rotate the buttons around origin point of the parent div, I've tried to change style for every button with transform, but the result is not working.

The easiest way is to group the buttons in a div, which would have a single rotate transform. Why? Because I need to change the rotation based on the childs rotation (when you rotate more than 180deg, the drag handlers are opposite, to fix this, I can change the rotation of the buttons, not the content). Example:

- resize
-- content - rotate: -130deg
-- handlers - rotate: 49deg

This will enable dragging by the bottom to resize box down, not up. Of course, there needs to be a prop to change the style of the div. (the handlers div needs 100% width and height).

Is it possible to add this feature soon ? :) Thanks for the package, works perfectly. For the project I need it I've written rotate button that works perfectly with your package. I could post it later on.

Have a great day,
Martin

Add bounds function for resizing.

Also see bokuweb/react-rnd#57

Is it possible to support Modifier Keys such as holding down shift triggers lockAspectRatio?

I didn't realize that this component can't resize top.
Dragging the top just works like you are grabbing the bottom of the box.
How can I fix this issue???
I need my box to be able to go up by resizing

I tried setting the width, height in the onResize function, but it seems to change the resizable-box container to the dragging values before I update the width and height via onResize.

Any ideas on how I could keep the aspect ratio of the resizable-box container?

I don't think that it's very useful to be able to select inner text while you are resizing. For instance, you can start resizing the left side to become smaller by dragging it to the right. That will change the cursor mid-drag to a text selector one and select the inner contents. I think that the cursor should be consistent through the drag process and not be able to select the text.

I might be able to add this functionality if it's a feature that you'd support merging.

I.e Holding ALT and resizing from the left should also resize on the right. This is how many drawing tools function.

Overview of the problem

I'm using re-resizable version [4.1.2]

My browser is: chrome Version 63.0.3239.132

I am sure this issue is not a duplicate?

Description

I use this with handleComponent props and revcived the wraings

Steps to Reproduce

<Resizable handleComponent={{right: Handler}} defaultSize={{width:180}} minWidth={180} enable={{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }} handleStyles={{right: {cursor: 'ew-resize'}}}>
    <div className='left'>
        <OtherComponent {...this.props} />
    </div>
 </Resizable>

import React, { Component } from 'react';

export default class Handler extends Component {
    constructor(props){
        super(props)
    }

	render() {
		return (
            <div className='custom-handler'>
                handleMe
            </div>
		);
	}
}

I'm using re-resizable 4.1.2
Chrome 62

There is a height changing handler in component. When height changed by setState somewhere, click to bottom handle. It jumps to height from previous state. I want to remove this shaking.

https://www.webpackbin.com/bins/-L0EL7WEi-xXHKFIZDvW

The problem seems to be in Resizable component state, where state.width isn't equal to props.size.width sometimes.

Overview of the problem

Description

Steps to Reproduce

Expected behavior

Actual behavior

Bug

Overview of the problem

I'm using re-resizable 4.3.0

Could you please provide reproduced project on webpackbin with latest version rnd?
No, the webpackbin link is broken. https://www.webpackbin.com/bins/-Kvnrpd3GSG6-z0tpgH_

My browser is: Chrome 63, Firefox 57

Description

When resizing width, height is calculated and set to a fixed px value. This is problematic if you want height to always be initial/auto, and still be able to resize width. Setting size/defaultSize does not affect this.

It is the same problem when resizing height, then a fixed px value is set on width.

Steps to Reproduce

1. Add resizable element
2. Start resizing width
3. Observe height is also set to a fixed px value.

Expected behavior

I would expect height to not be modified when only resizing width. Same goes for resizing only height, I would expect only height to be modified.

Actual behavior

Height is modified and set to a fixed px value.

Overriding that style manually causes unnecessary hassle when different positioning is wanted (and it broke my layout after converting an existing UI component to be resizable).