wwan5803 / react-modal-resizable-draggable Goto Github PK

Hi
I think it would be a great feature to be able to open multiple popups on the same page
Is it possible somehow ?

How can I resize the model from the left side? I found that I can only resize the model from the right side using your default code.

Originally posted by @CatherineJieWang in #4 (comment)

You named your component's class modal. this clashes with any bootstrap or react-bootstrap implementation. Your code doesn't work with bootstrap.

Please change the base class name if you want developers to use this code.

Thank you creating for a great component.

I'd love to use this, but I'm unable to, without a proper license.

What are you thoughts on adding an MIT license?

You're modal is jumping to (0, 0) on starting a drag&drop.

It seems to come from ReactDOM.findDOMNode(this.node_modal) (in onMouseDown) pointing to the <div> without props in Modal which is located (0, 0) instead of the one with props

I don't know if this is an issue or something I configured wrong on the modal component.
I have a color picker inside a draggable modal.
The problem happend when I tried to pick a color and I release the mouse button.
It seems that the modal is not allowing the mouseup to execute correctly, because the mouse is still caught in the picker.

I think the problem is with the modal because the picker works if I use it outside

Could it be a stopPropagation or something like that?

This is an example, I release the mouse button but it is still captured

And this is the same picker but outside of the modal

Downloading it from npm, it has this error.

/src/index.js
line 84 -> disableKeystroke is not defined

It needs to be defined as
const { disableKeystroke } = this.props
at line 81

It seems like the published version 0.1.5 (link to build) contains eval()s which is not a good thing to use beyond development. The beginning shows a clear warning:

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */

This is not the case for the earlier 0.1.4 version (link)

I see that anyways a new version 0.1.6 is ready, containing also TypeScript. Could you publish that version and this time not use eval?

Hi,
I used react-modal (version 0.1.6), with stepper componet by "@progress/kendo-react-layout" (version 4.13.0).
When try to resize the modal, gives the error: "Unable to find node on an unmounted component".
I reverted the react modal vertion to 0.1.4, and then able to resize the modal, but the stapper is gone bad - on click him, the click event not fired, and seem that nothing happen.
version:
react-modal-resizable-draggable 0.1.6
@progress/kendo-react-layout 4.13.0
Node.js verion 16.13.0
react 17.0.2

Thanks for the attention

Is there an easy way to restrict aspect ratio of modal window on resize to init or reset proportions?

Hi, first of all, thanks for this package.

Im having a problem while using last React version + react-modal-resizable-draggable.

It works as expected but it throws an error in console.

Environment
React 18.0.0
Vite 2.7.2
React-modal-resizable-draggable

Note: It can be fixed temporarily by updating to React 18 in the package [React 18 runs StrictMode just in development environment] but it must be fixed by changing findDOMNode to Ref.

I've followed your example and get this error when trying to drag or resize the modal:

react-dom.development.js:55 Uncaught Error: Unable to find node on an unmounted component. at invariant (react-dom.development.js:55) at findCurrentFiberUsingSlowPath (react-dom.development.js:4256) at findCurrentHostFiber (react-dom.development.js:4266) at findHostInstance (react-dom.development.js:17676) at Object.findDOMNode (react-dom.development.js:18145) at e.value (main.js:1) at HTMLUnknownElement.callCallback (react-dom.development.js:100) at Object.invokeGuardedCallbackDev (react-dom.development.js:138) at Object.invokeGuardedCallback (react-dom.development.js:187) at Object.invokeGuardedCallbackAndCatchFirstError (react

Is there any functionality that Modal does not close on out side click?

main.js:1 Uncaught (in promise) ReferenceError: disableKeyStroke is not defined

Could you add typescript definitions so this library could easily be used in typescript?

I have a problem with captured / stopped mouseup events when using the FlexibleModal in combination with react-switch. When clicking the switch, the mouseup event will be captured by the listener registered in componentDidMount on document.

The following change fixes the problem:

onMouseUp(e: { stopPropagation: () => void; }) { document.removeEventListener('mousemove', this.onMouseMove); if (this.state.isDragging || this.state.isResizing){ this.setState({ isDragging: false }); this.setState({ isResizing: false }); e.stopPropagation(); // e.preventDefault(); } }

Having trouble installing this library.

Logs when I yarn add:
warning "react-modal-resizable-draggable > react-icons > [email protected]" has unmet peer dependency "prop-types@*". warning " > [email protected]" has incorrect peer dependency "react@^15.5.4".

package.json
"dependencies": { "react": "^16.8.3", "react-dom": "^16.8.3", "react-markdown": "^4.0.8", "react-modal-resizable-draggable": "^0.1.1-rc.16", "react-scripts": "2.1.5" },

Error message when trying to yarn start
./src/components/Modal.js
Module not found: Can't resolve 'react-modal-resizable-draggable' in '/home/kyle/programming/projects/interactive-modal-chart/src/components'

you can not removeEventListener by this

      document.removeEventListener('mousemove', this.onMouseMove.bind(this));
      document.removeEventListener('mouseup', this.onMouseUp.bind(this));

if you use bind addEventListener removeEventListener is not the same function

hope u fix this

Hi Folks,

Its a nice modal. But I am unable to resize the modal by funtion instead of manually?

The resizing itself works fine for me. but how to call it externally by function?

Regards,

Sebastian

Currently, webpack is in the dependencies. This is causing issues when migrating to create-react-app 2.0 (as it depends on webpack 4). It doesn't look like there is a reason for this to be a dependency in production, so it should probably be moved to devDependenices.

I actually can't prevent modal to go out of window, do you have any idea how I can make it ?

I added some changes to the source and I'm try to build using npm run build off-course after running npm install.

I am getting this error without changing anything

ERROR in ./src/index.js 13:4
Module parse failed: Unexpected token (13:4)
You may need an appropriate loader to handle this file type.
| if (isOpen) {
| return (

|
| <div

What am I missing?

On https://www.npmjs.com/package/react-modal-resizable-draggable there are two examples shown, one uses and the other uses , which one is correct?

Why is this not documented? It seems to work just fine, as is exposed as a prop already. I've created a pull request to have it added to the options list in the README.md file. See pull request #35

I want to disable keyboard button support for modal move . How i disable that.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

This warning happens when we have Mouse Click or Keyboard Press events (onMouseMove, onMouseUp, pressKey) after closed the dialog.
I think we should remove these event listeners in componentWillUnmount() life cycle.

Hi,

When I try to install the last version, I got :

warning " > [email protected]" has incorrect peer dependency "react@^0.14.9 || ^15.3.0 || ^16.0.0".

Then I tried to start my app and just import the module, and got this webpack error in browser :

TypeError: __webpack_modules__[moduleId] is not a function
__webpack_require__
node_modules/react-modal-resizable-draggable/build/main.js:557

Thanks for you help ! I would like to use your module which seems great !

Emilie

There's a strange bug: when I start to resize, it unexpectedly gets larger.
The behavior is different with this link.
https://wwan5803.github.io/react-modal-resizable-draggable/

please provide some example for appending the modal to body

Moving the modal top edge of screen and i am not able to move down vertically

Can you fix the issue

It doesn't resize and move it by code

I use this component as a window, in which I am resizing with the rnd component. However, when the rnd component is resized, the onMouseUp event conflicts and does not allow processing.

Modal created through this are not accessible. Moreover, there are no props provided in the library to support accessibility for a Modal.

Description

• seems like the modal only allows users to modify size of modal on the bottom-right border. Possible to resize by dragging the horizontal and vertical borders?

I'm able to resize using keyboard hot-keys (ctrl+arrow) even when disableResize is set to true. Is this an expected behavior?)

How can i disable keyboard support on this plugin. Do we have any props for this