minutemailer / react-popup Goto Github PK

I have a form in a popup with a button, which opens another popup with a form. I'd like to complete the second form, close the second popup and come back to the first one. At the moment, it will not show the second popup before the first one is closed. Is it possible to override the queue logic?

Thanks.

In prompt

Hello, I'm having an issue with the Popup rendering embedded on the page, instead of actually popping out.

Am I missing something here? I'm just dropping the component into the render of the larger "Contacts" component, and calling Popup.alert(). I also tried directly rendering it into the page with ReactDOM and document.getElementbyId, as suggested by the docs, but got the same result. Please advise, thanks!

Currently it looks like there is no possibility to attach the callback when user closes popup by:

1. clicking outside
2. clicking on cross button (a.k.a. closeBtn)
3. using Esc button on the keyboard.

Could you add such functionality? In my case I want to manage popup state via Redux so maybe adding of general handler for closing could help.

I've passed "closeOnOutsideClick = true" to the component, but the popup doesnt close when I click outside of it. What could be the reason?

Is there a way to pass a prop value for the header?

Got error when import. Using preact

If I create a plugin following the example docs everything works great, except some of the properties are being reverted to their defaults in the state. If I try to override closeBtn, closeHtml, escToClose the properties are stored in the initial components state, but when setState() is called on the component its not passing these parameters so their values are dropped. This does work for closeOnOutsideClick as its included in the setState() call..

Example:

this.create({
    title: 'Login',
    content: content,
    closeBtn: false,
    closeHtml: null,
    escToClose: false,
    closeOnOutsideClick: false,
    buttons: {
        left: [ 'Cancel' ],
        right: [{
            text: 'Login',
            className: 'success',
            action: () => {
                callback();
                Popup.close();
            }
        }]
    }
});

The issue is that this setState() call isn't supplying all of the supported properties: https://github.com/minutemailer/react-popup/blob/master/src/Popup.react.js#L212-L222

Target "cancel" button on ESC and "ok" button on ENTER.

Is there any method to add a select type to popup?

I would like to have a bit more advanced form with select type, but from the code it appears to only support normal inputs.

What do you recommend in such cases?

When I try to require react-popup in my file, I get this error:

/node_modules/react-popup/index.js Line 188: Unexpected token < You may need an appropriate loader to handle this file type.

After doing some research online (http://stackoverflow.com/questions/31374451/webpack-with-react-modules-giving-unexpected-token), it looks like there is JSX syntax on line 188 of index.js which is not valid js. Can this be fixed?

Hello, I get this error when I add to my index.js file.

Target container is not a DOM element.

ReactDOM.render(<Main />, document.getElementById('root'));
ReactDOM.render(<Popup />, document.getElementById('popupContainer'));

Any ideas what the issue can be? Should I create the element popupContainer somewhere?

I would like to run the callback function after popup.close (). This is real?

Automatic tests (with Jest and Enzyme?)

Is it possible to pass a variable to and from the popup. I've found a work around by setting a firebase varaible within the popup, but it would be super helpful to pass a variable

I just upgraded from 0.7.1 this morning and all my popups that were being rendered in a specific location - via the position attribute - have all started showing up in the upper center of the screen. Was there a breaking change for how to specify the position of the popup?

I am currently using it like so:
Popup.create({ ... position: { x: // some number y: // some number }, ...

Support for React 16 is missing

I'm getting these errors when i load in my project

warning.js:36 Warning: PopupHeader: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

warning.js:36 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

hey I'm having trouble with this package showing correctly in production, whereas it works correctly in development.

basically these two classes seem to the issue:

.mm-popup {
    display: none;
}

.mm-popup--visible {
    display: block;
}

In development it works, but in production .mm-popup--visible is always set to display: none;
it looks like it isn't even taking .mm-pop--visible into consideration and just using .mm-popup.

If I try and set it like this

.mm-popup .mm-popup--visible {
    display: block;
}

The opposite happens, it works in development but not in production.

Thoughts?

Hi,

works like a charm. However, could you give a short example of a react component as content? Looks like nothing is happening.

My component:

export default class PopupFields extends Component {
       render() {
        
       return (
            <div>
                <p>all fields are removed. testing</p>
            </div>
        );
    }
}

and the popup

import PopupFields from './PopupFields'
...

Popup.create({
    title: 'title',
        content: PopupFields,
    className: 'prompt',
    buttons: {
        left: [{
            text: 'cancel',
            action: function (Box) {
                Box.close();
            }
        }],
        right: [{
            text: 'Now',
            className: 'success margin-right',
            action: function (Box) {
                Popup.alert('to do.');
                Box.close();
        }},{
            text: 'Schedule',
            className: 'success',
            action: function (Box) {
                Popup.alert('to do ');
                Box.close();
        }}],
    }
});

what am i missing?

thnx!

This is thrown at Popup.react.js:213. Since a component can already be unmounted when onShow() is fired from the store

Ran into this issue when running webpack to compile.

Module build failed: ReferenceError: Unknown plugin "transform-object-assign" sp ecified in "D:\\CodeWork\\React-HWs\\NYT-React\\node_modules\\react-popup\\.babe lrc" at 0, attempted to resolve relative to "D:\\CodeWork\\React-HWs\\NYT-React\ \node_modules\\react-popup"

I updated react-popup to version 0.9.3, i found that wildClasses is no longer supported
is there another alternative?

ps: i use it to customize buttons

Hello.
I want to bold some words of the content of the popup.
I can't pass html tags when creating it, is there a workaround?

Sorry if this is not the right place to ask this.
Thank you in advance.

Looks like the Demo page has some rendering issues. In the prompt plugin example the render() method and the content member of the create() call are blank.

Looks like some kind of post processing with the gh-page because the raw html looks fine, https://github.com/minutemailer/react-popup/blob/gh-pages/index.html.

I receive the following warning when implementing react-popup. Is this a problem on my part? I am following example code precisely.

Hi,
We integrate react-popup in react boilerplate project.
Added lib
Added React-popup as reference in another component.

From button click event calling popup its coming as inbuilt layer of component.
Can you please let us know what is missing integration

Thanks

If I use your package i get following error when I place the <Popup /> :

bundle.js:1374 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).

The Package seems really good, especially the queuing and the ability to reuse popups. There are two things that maybe should be fixed.

• In the install section you are using React.render() instead of ReactDOM.render(). In v0.14 Facebook have split it up into react and react-dom.
• You are also not mentioning if it should be placed in the Root or in the Component

The component state is not persisted when opening a new popup, then coming back to the old one.
Checkout the demo - open a new popup, then use a button inside the popup to create a new one.

popup
constructor 1
component 1 will mount
popup
component 1 will unmount
constructor2
component 2 will mount

Now if you close the second popup, you will see:

component 2 will unmount
constructor 1
component 1 will mount

what we don't really want is constructor 1 happening again, because we want to keep the state of the first component.

I think when you do

    onClose() {
        this.setState(initialState); // set content to null
    }

This destroys

                    <div className={this.className('box__body')}>
                        {this.state.content}
                    </div>

and also probably when switching between contents, react is not able to restore them afterwards. A solution would be to keep all contents in a popup dom tree hidden, and only show the relevant one? Can't think of anything else. As a workaround, I have to pass state in a mutable object when opening popup.

Here's the source code

Have you got any thoughts on this?

Dear,
First, thank for this awesome work, but may you have to update your package.json.
it show:

"dependencies": {
    "react": "^0.14.0",
    "react-dom": "^0.14.0"
  },

So it will import react and react-dom even if they are already included, so may you have to put them in the peerDependency so they will be included only if they are missing.
http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies
Thanks.

I hope this isn't a silly question, but I'm creating an app with lots of clickable elements that are layered on a page, that can each fire up their own popup. The problem I have is that when a click is on an item with other items underneath it, the correct menu pops up first, but then there are multiple menus queued behind it that we don't need.

Is there any way that we can clear the queue when we hit OK? Or just change it so that popups are not queued? Thanks,

Malinna

would be great if you can add the styles used here http://minutemailer.github.io/react-popup/

After installing I receive the following error:

Failed to compile.

./node_modules/react-popup/dist/Popup.react.js
Module not found: Can't resolve 'keymaster' in '/home/shubham/mystuff/ttt_form/node_modules/react-popup/dist'

I tried re-installing react-popup, but still keymaster wasn't downloaded. So, I installed keymaster separately and things worked.

In componentWillUnmount() event listeners that were placed on the store in componentDidMount() were not removed.

    componentDidMount() {
        Store.on(Constants.SHOW, this.bound.onShow);
        Store.on(Constants.CLOSE, this.bound.onClose);
        Store.on(Constants.REFRESH, this.bound.onRefresh);
    }

    componentWillUnmount() {
        // need to remove Store event listeners
        key.deleteScope('react-popup');
        key.filter = defaultKeyFilter;
    }

Hey, I just started playing around with this component. It seems to work flawlessly, but I'm not sure how to get the popup to close when the user clicks outside of it. It seems like I can't get the popup to go away unless I explicitly call Popup.close().

Should this be default behavior? If not, how did you accomplish it in the demo page? Is there a "best practice" for this sort of thing?

Thanks!

I don't want the popup to be closed when the user clicks outside the popup. Is this possible?

Hey there,
I am trying to listen to a "keydown" event and submit the popup prompt upon it.

The problem is that if I create a plugin like on the Demo Site, I have no access to the buttonClick or handleButtonClicks methods of the Popup Parent Component.

Any idea how to solve this?

Thanks

After updating to 0.9.0, got this issue when npm start

Failed to compile
./node_modules/react-popup/dist/Popup.react.js
Module not found: Can't resolve 'keymaster' in '/my-project/node_modules/react-popup/dist'

I'm a newbie of React. And when I try to use react-popup in my project, I find that the style is totally not applied. And I wonder where is the css staff.

Trying to create a new line for the content property of a Popup, but it's not working. Am I perhaps doing it wrong or is it simply not implemented?

Trying to write: content: "Are you sure you want to cancel the following booking? <br> Soccer field"

Hello guys,
I tried :
npm install react-popup --save
yarn start

And I've got this error :
./node_modules/react-popup/dist/Popup.react.js
Module not found: Can't resolve 'keymaster' in 'D:\dev\myproject-react\node_modules\react-popup\dist'

On Initial load of a Page where Popup is used - I do not get this error. When I try to load a different page and go back to this page where Popup is used I get the error

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Popup component.

This happens to me with a very basic usage of the Popup component

import React, {Component} from "react";


class CreatePurchaseOrder extends Component {
  constructor(props) {
    super(props);

    this.showPopup = this.showPopup.bind(this);
  }

  showPopup() {
    Popup.alert('hey');

  }

  render() {
    return (
      <div>
        <Popup
          className="mm-popup"
          btnClass="mm-popup__btn"
          closeBtn={true}
          closeHtml={null}
          defaultOk="Ok"
          defaultCancel="Cancel"
          wildClasses={false} />

        <section className="content">
          <button onClick={this.showPopup}> Show Popup </button>
        </section>
      </div>
    )
  }
}

I love how your demo looks, but I can't get the popup to even show in my own code. I have tried to add an onClick and EventListener to a button accordingly. In the EventListener I didn't know what you were referring to by "target.offsetWidth" in you example though, so I just changed it to a "2". Any thoughts?

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import Popup from 'react-popup';
import {Button} from 'react-bootstrap';

class ExampleComponent extends Component {

    constructor (props) {
        super(props);

        this.state = {
            events: [],
        };

        this.handleSelectEvent = this.handleSelectEvent.bind(this)
    }


 componentDidMount(){
       
        const trigger = document.getElementById('trigger');

        trigger.addEventListener('click', function (e) {
            e.preventDefault();

            Popup.create({
                content: 'This popup will be displayed right above this button.',
                buttons: {
                    right: ['ok']
                },
                noOverlay: true, // Make it look like a tooltip
                position: (box) => {
                    const bodyRect      = document.body.getBoundingClientRect();
                    const btnRect       = trigger.getBoundingClientRect();
                    const btnOffsetTop  = btnRect.top - bodyRect.top;
                    const btnOffsetLeft = btnRect.left - bodyRect.left;
                    const scroll        = document.documentElement.scrollTop || document.body.scrollTop;

                    box.style.top  = (btnOffsetTop - box.offsetHeight - 10) - scroll + 'px';
                    box.style.left = (btnOffsetLeft + 1 - (box.offsetWidth / 2)) + 'px';
                    box.style.margin = 0;
                    box.style.opacity = 1;
                }
            });
        });
    }

  handleSelectEvent() {

        Popup.create({
            className: 'prompt'
        });
        Popup.alert('Hello, look at me');

        let mySpecialPopup = Popup.register({
            title: 'I am special',
            content: 'Since I am special you might need me again later. Save me!',
            buttons: {
                left: ['cancel'],
                right: ['ok']
            }
        });

        Popup.queue(mySpecialPopup);
    }


    render() {
        return (
            <div>
                <Popup
                    className="mm-popup"
                    btnClass="mm-popup__btn"
                    closeBtn={true}
                    closeHtml={null}
                    defaultOk="Ok"
                    defaultCancel="Cancel"
                    wildClasses={false}/>
                <Button id='trigger' onClick={this.handleSelectEvent}/>
            </div>

        );
    }
}

export default ExampleComponent;

Trying to use this with a server render react app, but it blows up.

The problem seems to be with keymaster. Anyway to turn that off?

node_modules/keymaster/keymaster.js:267
  addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48


ReferenceError: document is not defined
    at node_modules/keymaster/keymaster.js:267:12

In the example page the pop ups arent responsive, that would be a great improvement.

Makes it possible to save a custom popup as a reusable item, like an ajax popup or a popup with a specific placement.

/** Example */
Popup.plugin.ajax('/url');

I have installed react-popup with npm, but I had to manually install keymaster to get it working.

Module not found: Error: Cannot resolve module 'keymaster' in 

Is it possible to close the popup with android back button or browser back button?