narqo / react-islands

react-islands Components Library
MIT License
120 stars 13 forks source link

Popup: Click on 3rd nested popup closes all popups #132

Open narqo opened 7 years ago

narqo commented 7 years ago
render() {
    return (
        <div className="example">
                <Button
                    ref="popup1Anchor"
                    theme="islands"
                    size="s"
                    onClick={() => this.onPopup1AnchorClick()}
                >
                    Toggle popup 2.1
                </Button>
                <Popup
                    theme="islands"
                    anchor={this.refs.popup1Anchor}
                    visible={this.state.popup1Visible}
                    onRequestHide={() => this.onPopup1RequestHide()}
                >
                    <Link
                        ref="popup2Anchor"
                        theme="islands"
                        size="s"
                        onClick={() => this.onPopup2AnchorClick()}
                    >
                        Toggle popup 2.2
                    </Link>
                    <p>Blah-blah-blah</p>
                    <Popup
                        theme="islands"
                        anchor={this.refs.popup2Anchor}
                        visible={this.state.popup2Visible}
                        onRequestHide={() => this.onPopup2RequestHide()}
                    >
                        <Button
                            theme="islands"
                            size="s"
                            onClick={() => this.onPopup3AnchorClick()}
                        >
                            Toggle popup 2.3
                        </Button>
                        <p>Blah-blah-blah</p>
                        <Popup
                            theme="islands"
                            anchor={{ left: 50, top: 50 }}
                            visible={this.state.popup3Visible}
                            onRequestHide={() => this.onPopup3RequestHide()}
                        >
                            <Button theme="islands" size="s">Yandex</Button>
                            <p>Blah-blah-blah</p>
                        </Popup>
                    </Popup>
                </Popup>
            </div>
        );
}