reactjs / react-modal Goto Github PK

opacity is repeated

.//simple-react-modal/build/styles.js
Module parse failed:/node_modules/simple-react-modal/build/styles.js Line 17: Duplicate data property in object literal not allowed in strict mode
You may need an appropriate loader to handle this file type.
| opacity: 0,
| transition: 'opacity 400ms ease-in',
| opacity: 1,
| pointerEvents: 'auto'
| };
@ .//simple-react-modal/build/simple-modal.js 23:14-33

@mzabriskie @ryanflorence Guys could you please let's know when you can release react-modal with 0.14 support, required pull request is already merged #81

When I try to load react-modal in a jsfiddle, I get Uncaught Error: Script error for: react-modal. According to the doc page linked by the error, "This usually means there is a JavaScript syntax error or other execution problem running the script." It's using require 2.1.7 from CDNJS.

If I copy and paste the entire contents of the react-modal.js file into the jsfiddle above this line: require(['react-modal'], function(Modal) { the error it spits out is:

Uncaught Error: Mismatched anonymous define() module: function (){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o])

and the error includes the entire contents of the script.

When I open and modal and close it and try to open it again the modal does not show because the overlay styles (position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px;) are not being added to then dom element the second time I open it.

Could you please advise how I can fix this

Is there some way to block scrolling events behind the modal while the modal is active? I have a long list of items and each one opens a modal. If you scroll while the modal is active, even if there isn't data to scroll in the modal, it scrolls the list behind the modal. This can be replicated by just adding a bunch of paragraph tags to the example project so that you page is large. What's worse is when there is data in the modal that also scrolls. The scrolling will scroll behind the modal all the way to the top or bottom and then start scrolling the data inside the modal.

Anyone know how to fix this behavior?

Thanks!

Pressing Shift+Tab takes focus outside of the modal and underneath the overlay.

As far as I can tell this is because of https://github.com/rackt/react-modal/blob/master/lib/components/ModalPortal.js#L83 which focuses on the ReactModal__Content div which is great.

The problem is that the tab isn't scoped at that point by https://github.com/rackt/react-modal/blob/master/lib/helpers/focusManager.js so until the end user drills into the modal the tab isn't scoped around the elements inside allowing them to go back with Shift+Tab and escape the modal's grasp.

tabbable array is empty.

My code:

...
Modal.setAppElement(document.getElementsByTagName('body')[0]);
...
render() {
    return (
        <div>
            <Modal isOpen={true}>
                <div>some text</div>
            </Modal>
        </div>
    );
}

It seems that with the isOpen api, neither componentDidMount nor componentDidUpdate actually guarantee the modal is open, even when making sure props.isOpen is set. I'm not sure what causes the delay, but if I want to do something like focus an input on modal open, I can't do it because the modal isn't visible yet.

I'm trying to use React-Modal but I'm stuck with "ReferenceError: Modal is not defined"

So I ask if i need something else like a lib or so

thx

Seeing this error in the latest 0.6.1:

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded 

Anyone else having this issue?

// And when using document to get the dom element, server side won't support "document" object for the following code:
Modal.setAppElement(el);
Modal.injectCSS();

// I have also tried the following but It will prompt me about I need to insert element in that area
let el = React.findDOMNode(this.refs.cdrExportModal)
console.info('el', el)
Modal.setAppElement(el);
Modal.injectCSS();

Please help!

http://codepen.io/anon/pen/MwRmKd?editors=001

'React-router' Link on modal failed context router.

If generate Modal on the fly

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined

when running example

We would like to lock the app from scrolling when the modal is open. Currently we have a wrapper around Modal to set the class on our app element based on the isOpen prop.

I'm looking at https://github.com/mzabriskie/react-draggable. However, you cannot do this:

<Draggable><Modal /></Draggable>

nor can you do this:

<Modal><Draggable>Contents</Draggable></Modal>

because of the way modalportal works. Any suggestions?

It'd be nice to be able to provide a custom modificator className to the Modal content.

The use case is that we need modals that may vary in size on the screen, and we have a set of prefixed sizes we would like to set to the modal (small, medium, large). It'd be nice if we could pass a className prop that would get appended to the rest of the content classes.

I don't know if the same use case exists for the overlay classes, so I'm asking for feedback on this issue so that I can then submit a PR.

What do you guys think?

Awesome library thanks for building!

Is there a way to pass on inline styles to the modal overlay?

I am using Radium / trying to avoid using css etc...

ie., this:

<Modal style={myStyles}.../>

would pass the styles onto the modal overlay. I think this makes sense in react speak

I can't seem to use jquery .focus() inside componentdidmount.

Someone please help!

I'm trying to use react-modal with Radium, which requires you to wrap your root element inside a Radium() function call like so:

React.render(React.createElement(Radium(App)), document.getElementById('ReactRenderTarget'));

Doesn't look like react-modal supports this kind of thing. My end goal is to be able to use Radium's inline media query styling support to style the modal portal at different breakpoints. I tried doing this in renderPortal:

this.portal = React.render(React.createElement(Radium(ModalPortal(props))), this.node);

But I get the error:

Uncaught TypeError: inst.render is not a function ReactCompositeComponent.js:789

Any tips?

Looks like these lines cause the timeout not to trigger when onRequestClose is missing: https://github.com/rackt/react-modal/blob/master/lib/components/ModalPortal.js#L113-L114

So, I am needing to put in an empty function:

        <Modal
          closeTimeoutMS={150}
          isOpen={this.props.isModalOpen}
          onRequestClose={() => {}} >

          <LoginForm />

        </Modal>

Should we make a change? I could do a PR, but unsure on the best direction.

I am seeing a lot of messages in the console: You tried to return focus to null but it is not in the DOM anymore. I am unsure how to make this warning go away.

The library currently doesn't work with React 0.14 due to the use of react/lib/ExecutionEnvironment which no longer exists.

On React 0.13 we are getting a warning.

Warning: React.addons.classSet will be deprecated in a future version. See http://fb.me/react-addons-classset

If you are ok with clearing out this warning by either using plain js or use the dependency (https://www.npmjs.com/package/classnames I'm in favor of just plain js), I would be more than happy to submit a PR.

Thanks!

@ryanflorence , @mzabriskie Is this project still alive? You need contributors?
There is no activity for more than two months

Is there a way to completely disable the default styles?

I was hoping I could just use:

var customStyles = {
      overlay : false,
      content: false
    };

But, _.assign will just ignore the false value.

Shift+Tab doesn't seem to scope properly in Chrome or Firefox. I made a little test app you can get here: https://github.com/claydiffrient/react-test

You'll notice that it will scope fine and be circular when pressing tab, but when you press shift+tab it takes you under the modal.

There are some cases in my app where I'd like to not have the overlay behind the modal. Because the (position: fixed) styles are set as inline on the overlay, I cannot override them with overlayClassName to massage the overlay into being hidden.

react-modal is acting outside of the purview of any of React's test utilities.

renderedModal.getDomNode()
// => <noscript data-reactid=".0"></noscript>

React.scryRenderedDOMComponentsWithClass(renderedModal, "my-modal-class");
// => []

I see there are some work arounds that were developed circa React 0.12 but I can't figure out why that is necessary. If I was guessing I would say that this has to do with how you mount to the DOM to properly apply the overlay. If this is true, maybe a small wrapper around those helpers as a part of the release would be a helpful thing for us app devs who want to write lots of tests :)

https://github.com/rackt/react-modal/blob/master/specs/helper.js

This may be more of a problem with my app, but tab never seems to scope right in Firefox. It doesn't start in the modal. I think that something might be happening that prevents the initial item from grabbing focus with Firefox.

Consider:

class Foo extends Component {
  render() {
    var modalStyles = {overlay: {}};
    modalStyles.overlay["z-index"] = 10;

    return(
      <Modal style={ modalStyles }>
        Hello World!
      </Modal>
    )
  }
}

This will produce a modal with a z-index of "10px", which is not a valid z-index value.

Hi ya'll,

It looks like the changelog hasn't been update from 0.5.0 to 0.6.1. I'm going to give it a crack and open a PR for it.

Folks -

Is there any reason that you peer-require >=0.13.3 for this, and could >=0.13.2 be used instead? I'm not sure what the react changes are from those versions. I unfortunately can't seem to get another dependency I have's latest version to work with our builds. Wondering if this is an option to update, or how much work would be involved?

I can do the legwork if you think there's a decent amount to do, or hold off on pulling this in to our apps until we can update that other module as well.

Thoughts?

Update: wondering if you're requiring anything in this release specifically

I see that react-modal used to have the ability to specify classes for styles but that was removed in favor of inline styles.

While some might argue that inline styles are better for react applications, not everyone has that option (including myself).

It would be nice if react-modal wasn't opinionated about this and supported both giving classNames and inline styles.

https://github.com/rackt/eslint-config-rackt contains a starting point that all org repos can build off of. This can be introduced by first using the config and overriding any rules that the repo doesn't comply with, without having to change any of the source. Then for non-controversial rules, PRs can be made to update the source to comply.

Here's the initial PR: #90

I have a grid with many items, and would like each item to open its own modal when clicked (i.e. a zoomed in photo). Is there a way to do this so that instead of rendering a bunch of modals, we only need to create a single one that renders the proper content?

Does anyone know how to dynamically size the modal? For example, if I hard-coded the width of some content to be 100px wide, and the app element that the modal is bound to is 200px wide, I want the modal to be centered in the window at 100px wide. Any ideas?

We need to be able to add a class to the overlay portion of the css.. for example:

<Modal className="foo">...</Modal>

should render as:

<div class="ReactModal__Overlay ReactModal__Overlay--foo">
  <div class="ReactModal__Content ReactModal__Content--foo">
    ...
   </div>
</iv>

There is error when import

ERROR in .//react-modal/lib/components/Modal.js
Module not found: Error: Cannot resolve module 'react/lib/ExecutionEnvironment' in /home/yesa/Projects/sporta/node_modules/react-modal/lib/components
@ .//react-modal/lib/components/Modal.js 2:27-68

A source tree with react-modal in it, running in Node, yields the following:

/node_modules/react-modal/lib/components/Modal.js:18
    appElement: React.PropTypes.instanceOf(HTMLElement),
                                           ^
ReferenceError: HTMLElement is not defined

...and halts entirely.

How would you feel about making this propType a little more lenient (object, perhaps)?

I want to allow close on ESC press but not on overlay click, can you pass the event through the onRequestClose prop.

If you run the current version and go to http://localhost:8080/bootstrap/ , the default styles are applied, together with the bootstrap styles.

This library uses the global HTMLElement which only exists in DOM land. We mock our environment with JSDom, however this code is loaded at require() time before JSDom is instantiated, so the require fails and crashes execution. What about React.PropTypes.object, or global.HTMLElement (which wouldn't fail the require() and also fix the linting error in the file) or typeof window === "undefined" ? React.PropTypes.object : global.HTMLElement ?

Requiring user interaction in a modal wouldn't allow for animations because of this:

  close: function() {
    if (!this.ownerHandlesClose())
      return;
    if (this.props.closeTimeoutMS > 0)
      this.closeWithTimeout();
    else
      this.closeWithoutTimeout();
  },

For now I'm working around this by defaulting onRequestClose to a noop.

I find this more convenient compared to the current approach.

{ condition ? (
<Modal
  onRequestClose={fn}
  closeTimeoutMS={n}
>
  <h1>Modal Content</h1>
  <p>Etc.</p>
</Modal>
) : null }

However, I haven't tried this (whether is works), and I do not acknowledge any pros and cons of the approach besides a cleaner API.

When my modal mounts, I get the error

Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0

The first conflicting element with data-reactid is the modal element that gets put in the DOM:

The other is the "root" of our application. Note the modal element is not inside this root element. It's outside. But setting appElement to this location did not immediately fix the problem.

I'm not what issue is exactly. We didn't have this issue with react-bootstrap but it might be an implemetnation difference.

When the modal is unmounted, it will abruptly close, not waiting for any animations to finish. Sometimes it is desired for the modal to graciously close with animations instead.

What I'm not too sure yet is how this should be handled, should it be a prop that is sent to tell that the modal should be closed on unmount? Should that be the normal behavior?

What do you guys think? Have you ever needed this in your apps?

Totally understand if this is out of scope, but I was hoping to use with Meteor (which now supports React).

As soon as react-modal is added to the project (before any other code changes) I get this error. Full stack trace below:

W20150927-22:54:50.503(1)? (STDERR) /Users/mbrookes/.meteor/packages/meteor-tool/.1.1.8.1nd2ri6++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
W20150927-22:54:50.503(1)? (STDERR)                         throw(ex);
W20150927-22:54:50.503(1)? (STDERR)                               ^
W20150927-22:54:50.517(1)? (STDERR) ReferenceError: document is not defined
W20150927-22:54:50.517(1)? (STDERR)     at Object.<anonymous> (node_modules/react-modal/lib/helpers/ariaAppHider.js:1:1)
W20150927-22:54:50.517(1)? (STDERR)     at s (../../../../../../.meteor/packages/cosmos_browserify/.0.7.0.5ftnjc++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
W20150927-22:54:50.518(1)? (STDERR)     at ../../../../../../.meteor/packages/cosmos_browserify/.0.7.0.5ftnjc++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1
W20150927-22:54:50.518(1)? (STDERR)     at Object.<anonymous> (node_modules/react-modal/lib/components/Modal.js:4:1)
W20150927-22:54:50.518(1)? (STDERR)     at Object.../helpers/ariaAppHider (node_modules/react-modal/lib/components/Modal.js:82:1)
W20150927-22:54:50.518(1)? (STDERR)     at s (../../../../../../.meteor/packages/cosmos_browserify/.0.7.0.5ftnjc++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
W20150927-22:54:50.518(1)? (STDERR)     at ../../../../../../.meteor/packages/cosmos_browserify/.0.7.0.5ftnjc++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1
W20150927-22:54:50.518(1)? (STDERR)     at Object../components/Modal (node_modules/react-modal/lib/index.js:1:1)
W20150927-22:54:50.518(1)? (STDERR)     at s (../../../../../../.meteor/packages/cosmos_browserify/.0.7.0.5ftnjc++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
W20150927-22:54:50.518(1)? (STDERR)     at ../../../../../../.meteor/packages/cosmos_browserify/.0.7.0.5ftnjc++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1

Any help appreciated!

Code example:

var React = require('react');
var Modal = require('react-modal');
var {Link} = require('react-router');

Modal.setAppElement(document.body);
Modal.injectCSS();

require('../assets/styles/modal.scss');

var PageModal = React.createClass({
  render: function () {
    return (
      <Modal isOpen={true} className='modal-dialog'>
        <div className="modal-content">
          <div className='modal-body'>
            <p>Modal Content</p>
            <Link to='page-home'>Home</Link>
          </div>
        </div>
      </Modal>
    );
  }
});

module.exports = PageModal;

Console log:

"Warning: owner-based and parent-based contexts differ (values: `function (props, context) {
"use strict";

          // This constructor is overridden by mocks. The argument is used
          // by mocks to assert on what gets mounted.

          if ("production" !== process.env.NODE_ENV) {
            ("production" !== process.env.NODE_ENV ? warning(
              this instanceof Constructor,
              'Something is calling a React component directly. Use a factory or ' +
              'JSX instead. See: http://fb.me/react-legacyfactory'
            ) : null);
          }

          // Wire up auto-binding
          if (this.__reactAutoBindMap) {
            bindAutoBindMethods(this);
          }

          this.props = props;
          this.context = context;
          this.state = null;

          // ReactClasses doesn't have constructors. Instead, they use the
          // getInitialState and componentWillMount methods for initialization.

          var initialState = this.getInitialState ? this.getInitialState() : null;
          if ("production" !== process.env.NODE_ENV) {
            // We allow auto-mocks to proceed as if they're returning null.
            if (typeof initialState === 'undefined' &&
                this.getInitialState._isMockFunction) {
              // This is probably bad practice. Consider warning here and
              // deprecating this convenience.
              initialState = null;
            }
          }
          ("production" !== process.env.NODE_ENV ? invariant(
            typeof initialState === 'object' && !Array.isArray(initialState),
            '%s.getInitialState(): must return an object or null',
            Constructor.displayName || 'ReactCompositeComponent'
          ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));

          this.state = initialState;
        }` vs `undefined`) for key (router) while mounting Link (see: http://fb.me/react-context-by-parent)" app.js:11529:7

I just recently tried applying the recent commits that add support 0.14 but still ended up having problems with the module 'exenv'.

I noticed that this was recently added under devDependencies and am wondering if this should actually be applied to dependencies.

This is what I needed to get things working properly.

Thoughts?

Thanks in advance