react component as content

[RoelantM]

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!

[tbleckert]

Almost correct. The problem is that you need to create the component (you're only passing the reference), either with JSX or React.createElement(...). Like this:

Popup.create({
    title     : 'title',
    content   : <PopupFields />,
    className : 'prompt'
});

[RoelantM]

noobie error! thnx!!

oke, last question then.... Then I will never bother you again.. I promise...

how can I access my input-fields in the

action: function (Box) {
Box.value is empty
}

so my code is:

start = moment(new Date()).format(localDateTimeFormat);
        stop = moment(new Date()).add(3, 'hour').format(localDateTimeFormat);

        ReactDom.render(
            <Popup id={this.props.id} programsStore={this.props.programsStore} />,
            document.getElementById('popupContainer')
        );

        Popup.create({
            title: 'test',
            content: <ScheduleForm start={start} stop={stop} />,
            className: 'prompt',
            buttons: {
                left: [{
                    text: 'Annuleer',
                    action: function (Box) {
                        Box.close();
                    }
                }],
                right: [{
                    text: 'Save',
                    className: 'success',
                    action: function (Box, start, stop) {
                        console.log(Box);
                        console.log(Box.value);
                        console.log(start, stop);
                        //var datetime = Box.value === null ? now : Box.value;
                        //Popup.alert('TO DO.');
                        //TODO
                        Box.close();
                }}],
            }
        });

and scheduleForm:

render() {
        return (
            <div>
                <p>test1?</p>
                <input type="text" id="start" defaultValue={this.props.start} className="mm-popup__input"/>
                <br />
                <p>test2?</p>
                <input type="text" id="stop" defaultValue={this.props.stop} className="mm-popup__input"/>
            </div>
        );
    }

any help would greatly appriciated!

[tbleckert]

Hehe no problem at all, I'm just happy to help.

This one is a bit more tricky. I'm not sure there's a good way to solve it from the popup component. The best way imo is to have a callback function on the content component that is called when values are updated and store it somewhere.

Maybe we should add functionality so you can access the content component state in an easy way. But for now I think this is a good workaround.

Popup.create({
        title: 'test',
        content: <ScheduleForm onChange={(value) => this.setState({value: value})} />
});

// then use this.state.value in your action callback

Of course, if this is outside a component you would use a global variable instead of the state object. Then you can also have a callback on cancel that resets this variable.

[RoelantM]

Thnx for helping and taking the time!

I was afraid that it wasn’t that easy..

However, now I have

<ScheduleForm schedule={schedule} start={start} stop={stop} onChange={(value) => alert('uhh')} />

But still won’t get an alert. It is a different component, could that be any issue?

Any thoughts?

Van: tbleckert [mailto:notifications@github.com] Verzonden: Friday, December 30, 2016 11:58 AM Aan: minutemailer/react-popup react-popup@noreply.github.com CC: Roetje86 info@mit-consult.nl; Author author@noreply.github.com Onderwerp: Re: [minutemailer/react-popup] react component as content (#18)

Hehe no problem at all, I'm just happy to help.

This one is a bit more tricky. I'm not sure there's a good way to solve it from the popup component. The best way imo is to have a callback function on the content component that is called when values are updated and store it somewhere.

Maybe we should add functionality so you can access the content component state in an easy way. But for now I think this is a good workaround.

Popup.create({ title: 'test', content: <ScheduleForm onChange={(value) => this.setState({value: value})} /> });

// then use this.state.value in your action callback

Of course, if this is outside a component you would use a global variable instead of the state object. Then you can also have a callback on cancel that resets this variable.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/minutemailer/react-popup/issues/18#issuecomment-269758637 , or mute the thread https://github.com/notifications/unsubscribe-auth/AXqDW109PMMXyaRodBr90ODVluUh6C39ks5rNOPRgaJpZM4LW7D2 .

[tbleckert]

You need to call the onChange function from your ScheduleForm component. Whenever the value has changed inside the component you call this.props.onChange(value).

[RoelantM]

perfect!

now I got:

_onClick() {
        ReactDom.render(
            <Popup id={this.props.id} programsStore={this.props.programsStore} />,
            document.getElementById('popupContainer')
        );

        var start;
        var stop;

        Popup.create({
            title: 'schedule',
            content: <ScheduleForm onChange={(type, value) => this.handleChange(start, stop, type, value)} />,
            className: 'prompt',
            buttons: {
                left: [{
                    text: 'cancel',
                    action: function (Box) {
                        Box.close();
                    }
                }],
                right: [{
                    text: 'save',
                    className: 'success',
                    action: function (Box) {
                        this.props.programsStore.schedule(this.props.id, start, stop);
                        Popup.alert('Works live a charm!.');
                        Box.close();
                }}],
            }
        });
    }

 handleChange(start, stop, type, value){
        if (type === 'start'){
            start = value;
        } else if (type === 'stop'){
            stop = value;
         }
    }

and in my component

export default class ScheduleForm extends Component {
    render() {

        var start = moment().format(localDateTimeFormat);
        var stop = moment().add(3, 'hour').format(localDateTimeFormat);

        return (
            <div>
                <p>blablabla</p>
                <input type="text" id="start" defaultValue={start} onChange={event => this.props.onChange('start', event.target.value)} className="mm-popup__input"/>
                <br />
                <p>blabla</p>
                <input type="text" id="stop" defaultValue={stop} onChange={event => this.props.onChange('stop', event.target.value)} className="mm-popup__input"/>
            </div>
        );
    }
}

posting it for someone that finds it usefull.

thnx for the help!

[tbleckert]

Great! :)