xue2han / react-dynamic-modal Goto Github PK

I can't add fix on Modal.js (My team install this package and receive default style) or how can I add class for overlay and content?

warning.js:36 Warning: Unknown props text, onRequestClose on tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in myModal

In trying to pass a few props to this component and always got this error, when i remove this props, the modal still don't pop in.

Does anybody know how to solve this?

Thanks

I tried to use react-dynamic-modal together with bootstrap way of showing modals, so that I have:

• the default effect when modal appears
• the modal-backdrop

I was successful, but it's kind of an ugly hack :)

What do you think about this?

ModalManager.open(<UserMembershipChangeModal onRequestClose={() => true}/>);
    $('.modal').modal('show');

<Modal
        overlayClassName="modal fade"
        className="modal-dialog"
        onRequestClose={() => $('.modal').modal('hide')}
        openTimeoutMS={150}
        closeTimeoutMS={150}
        style={{
          overlay: {
            backgroundColor: 'transparent',
          },

          content: {
            position: 'relative',
            top: 'initial',
            right: 'initial',
            bottom: 'initial',
            left: 'initial',
            overflow: 'initial',
            border: 'none',
            background: 'initial',
            padding: 0
          }
        }}
        >

Modal works great in Chrome and Firefox, but not IE10/EDGE. When I click the button to display the modal nothing happens. I don't have any console errors or nothing visible to investigate.

Not sure what info you need- I'm new at posting issues.

Hi! how can change the width of modal in smartphones?

I am using styled-components 2.0.0-4.
This library allow you to create React component that include their css.

It's also possible to use a ThemeProvider in order to modify the theme passed to sub components.

Unfortunallety, this doesn't work fine with react-dynamic-modal

I have created the following class :

import React, { PropTypes } from 'react';
import { Modal as ReactDynamicModal, ModalManager } from 'react-dynamic-modal';
import Effect from './Effect';
import Button from '../Button';

const defaultProps = {
  close: true,
};

class Modal extends React.Component {

  static propTypes = {
    effect: PropTypes.object,
    close: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.string,
    ]),
    children: PropTypes.node,
    onRequestClose: PropTypes.func,
  }

  render(){
    const { children, effect, onRequestClose, close, ...rest } = this.props;
    return (
      <ReactDynamicModal
        onRequestClose={onRequestClose}
        effect={effect || Effect.None}
        {...rest}
      >
        {children}
        {close && <Button className="btn-primary" onClick={ModalManager.close}>{typeof close === 'string' ? close : 'Close' }</Button>}
      </ReactDynamicModal>
    );
  }
}

Modal.defaultProps = defaultProps;

export default Modal;

This work fine, but for some reason, when trying to use withTheme when doing export default withTheme(modal) in order to have access to this.props.theme within the render method.

For some reason I don't know yet, this doesn't work in your library.

I have the following message : [withTheme] Please use ThemeProvider to be able to use withTheme

My whole app is wrapped around a <ThemeProvider theme={theme}>, so I guess react-dynamic-modal does something unconventional. (By modifying the DOM somehow).

Do you have an idea what is happening with your lib ?

When I update the content of the modal, the update is not being reflected on the open modal.
I have to close and re-open the modal for the change to show.
Unfortunately I think you may need to rethink the entire API in order to solve this.

The modal only shows a very limited amount of content (if you have a lot of things to show). Making it scrollable would be a big upgrade and the modal always start from the very center of the screen which makes it less effective if the amount of content is relatively big.

I would like to center the modal window in the viewport using fixed position, 50% top and left margin and transform: translate(-50%, -50%); for actually centering it. Unfortunately, this configuration {"transform":"translate(-50%, -50%)"} is simply ignored. I'm not sure why.

I am trying to use my keyboard to navigate in the modal but it seems I cannot escape it.

Is there a way to do it ?

How to can block de trigger when the background is clicked?

I'm using react-dynamic-modal to create a full screen modal ontop of the home screen which works great. But now I want to be able to push another modal ontop of it. Any way to do this? Right now, it seem to just replace the first modal with the second one (I want a popup ontop of the full screen modal, so simply replacing one with the other isn't an option)

Mind updating react-dynamic-modal for the latest releases of React?

When I import react-dynamic-modal to my project:
import { Modal, ModalManager} from 'react-dynamic-modal';

I get this:

ERROR in ./~/react-dynamic-modal/lib/Modal.jsx
Module parse failed: /Users/anton/pwork/net-engine/connect-two-admin-portal/node_modules/react-dynamic-modal/lib/Modal.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React,{ Component } from 'react';
| import ReactDOM from 'react-dom';
| import Assign from 'lodash.assign';
 @ ./~/react-dynamic-modal/lib/index.js 1:17-39