From 439a3b618947e9080cbe011fc14e66e57cafa823 Mon Sep 17 00:00:00 2001 From: russ_zhong Date: Fri, 26 Oct 2018 11:12:24 +0800 Subject: [PATCH 01/21] add modal/dialog --- snippets/ModalDialog.md | 106 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 snippets/ModalDialog.md diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md new file mode 100644 index 000000000..cec15cf4f --- /dev/null +++ b/snippets/ModalDialog.md @@ -0,0 +1,106 @@ +### Modal/Dialog + +Renders a dialog component with modal. + +This is a simple React ModalDialog Component.It owns 4 props: `show`、`close`、`title` and `clickModal2Hide`. + +* `show` prop determines the initial state of the dialog(show/hide).It can influence the `display` css property of `modal` class div.E +* `close` prop defines the method for closing the dialog. +* `title` prop determines the title of the dialog. +* `clickModal2Hide` prop determines whether we can close the dialog via clicking on modal. + +Create 3 methods and bind them to component: + +* `close` used to call the `close` prop to close the dialog. +* `modalClick` used to define the click event handler of the modal.When `clickModal2Hide` prop passed as `true`,the `modalClick` will close the dialog when modal clicked. +* `dialogClick` used to stop propagation of the modal click event.You can define more logics in this method. + +Use `children` prop to get the content of the dialog passed by Component User.Render the content in `dialog-content` class div. + +```css + .modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 9998; + display: flex; + justify-content: center; + align-items: center; + } + .dialog { + background-color: white; + border-radius: 5px; + overflow: hidden; + } + .dialog-title { + box-sizing: border-box; + width: 100%; + height: 48px; + padding: 0 16px; + border-bottom: 0.5px solid #c3c3c3; + display: flex; + justify-content: space-between; + align-items: center; + } + .dialog-close { + font-size: 32px; + color: #c3c3c3; + cursor: pointer; + transform: rotate(45deg); + user-select: none; + } + .dialog-close:hover { + color: red; + } + .dialog-content { + min-width: 300px; + } +``` + +```jsx + class Dialog extends React.Component { + constructor() { + super(); + this.close = this.close.bind(this); + this.modalClick = this.modalClick.bind(this); + this.dialogClick = this.dialogClick.bind(this); + } + render() { + return
+
+
{ this.props.title }+
+
+ { + this.props.children + } +
+
+
+ } + close() { + this.props.close(); + } + modalClick() { + if (this.props.clickModal2Hide) { + this.close(); + } + } + dialogClick(e) { + e.stopPropagation(); + } + } +``` + +```jsx + let ModalDialog = {this.setState({visible: false})}}> + + ; + ReactDOM.render(, Node); +``` + + + + From cea83f45b2c405eabe9658ab357a184223355b4c Mon Sep 17 00:00:00 2001 From: russ_zhong Date: Thu, 8 Nov 2018 14:31:10 +0800 Subject: [PATCH 02/21] support single instance, call dialog via custom event --- snippets/ModalDialog.md | 91 ++++++++++++++++++++++++++--------------- 1 file changed, 59 insertions(+), 32 deletions(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index cec15cf4f..a6e3114bf 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -61,44 +61,71 @@ Use `children` prop to get the content of the dialog passed by Component User.Re ``` ```jsx - class Dialog extends React.Component { - constructor() { - super(); - this.close = this.close.bind(this); - this.modalClick = this.modalClick.bind(this); - this.dialogClick = this.dialogClick.bind(this); - } - render() { - return
-
-
{ this.props.title }+
-
- { - this.props.children - } -
+class Dialog extends React.Component { + constructor() { + super(); + this.modalHandler = (e) => { + this.setState({ + data: e.detail.data, + visible: true + }); + }; + this.state = { + data: { + title: '', + content: '' + }, + visible: false + }; + this.close = this.close.bind(this); + this.modalClick = this.modalClick.bind(this); + } + render() { + return
+
+
{ this.state.data.title }+
+
+ { + this.state.data.content + }
- } - close() { - this.props.close(); - } - modalClick() { - if (this.props.clickModal2Hide) { - this.close(); - } - } - dialogClick(e) { - e.stopPropagation(); - } +
} + componentDidMount() { + document.addEventListener('modal', this.modalHandler); + } + componentWillUnmount() { + document.removeEventListener('modal', this.modalHandler); + } + close() { + this.setState({ + visible: false + }); + } + static show(data) { + document.dispatchEvent(new CustomEvent('modal', { + detail: { + data + } + })); + } + modalClick() { + if (this.props.clickModal2Hide) this.close(); + } +} ``` ```jsx - let ModalDialog = {this.setState({visible: false})}}> - - ; - ReactDOM.render(, Node); +// add to render function + + +// every time you wanna call the dialog +// content is a jsx element +ModalDialog.show({ + title: 'Test', + content: +}); ``` From bb25e3a01a3aa6f90174e4b63fcc67103f3cb949 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Thu, 8 Nov 2018 16:03:49 +0800 Subject: [PATCH 03/21] Delete show prop Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 1 - 1 file changed, 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index a6e3114bf..939803bed 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -4,7 +4,6 @@ Renders a dialog component with modal. This is a simple React ModalDialog Component.It owns 4 props: `show`、`close`、`title` and `clickModal2Hide`. -* `show` prop determines the initial state of the dialog(show/hide).It can influence the `display` css property of `modal` class div.E * `close` prop defines the method for closing the dialog. * `title` prop determines the title of the dialog. * `clickModal2Hide` prop determines whether we can close the dialog via clicking on modal. From bb4b5272fed90752134fc180e35f68c4379b5de1 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Thu, 8 Nov 2018 16:05:30 +0800 Subject: [PATCH 04/21] modify clickModal2Hide prop to closeOnClick prop Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 939803bed..486e7075f 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -6,7 +6,7 @@ This is a simple React ModalDialog Component.It owns 4 props: `show`、`close` * `close` prop defines the method for closing the dialog. * `title` prop determines the title of the dialog. -* `clickModal2Hide` prop determines whether we can close the dialog via clicking on modal. +* `closeOnClick` prop determines whether we can close the dialog via clicking on modal. Create 3 methods and bind them to component: From ae533920ea57fd2ad61b88038d62991e3ce055cb Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Thu, 8 Nov 2018 16:05:52 +0800 Subject: [PATCH 05/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 486e7075f..bcae5417c 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -110,7 +110,7 @@ class Dialog extends React.Component { })); } modalClick() { - if (this.props.clickModal2Hide) this.close(); + if (this.props.closeOnClick) this.close(); } } ``` From af0c37716345c409b6630b400429f3d591f5b0c9 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Thu, 8 Nov 2018 16:05:58 +0800 Subject: [PATCH 06/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index bcae5417c..22a71e51a 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -117,7 +117,7 @@ class Dialog extends React.Component { ```jsx // add to render function - + // every time you wanna call the dialog // content is a jsx element From fabbe845be133a36e758072555010552e0b2d2c7 Mon Sep 17 00:00:00 2001 From: russ_zhong Date: Thu, 8 Nov 2018 16:49:17 +0800 Subject: [PATCH 07/21] update the whole doc --- snippets/ModalDialog.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 22a71e51a..d28b54ee6 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -2,19 +2,22 @@ Renders a dialog component with modal. -This is a simple React ModalDialog Component.It owns 4 props: `show`、`close`、`title` and `clickModal2Hide`. +This is a simple React ModalDialog Component.It owns only one prop: `closeOnClick`. -* `close` prop defines the method for closing the dialog. -* `title` prop determines the title of the dialog. * `closeOnClick` prop determines whether we can close the dialog via clicking on modal. -Create 3 methods and bind them to component: +Benefits from the CustomEvent API,this ModalDialog component supports single instance usage.We just need import `Dialog` once time,and can call the dialog everywhere.Every time we wanna show the dialog,we just call the static function `Dialog.show`.Passing our jsx templates and data as the parameter and then the dialog will show with the data and templates rendered. -* `close` used to call the `close` prop to close the dialog. -* `modalClick` used to define the click event handler of the modal.When `clickModal2Hide` prop passed as `true`,the `modalClick` will close the dialog when modal clicked. -* `dialogClick` used to stop propagation of the modal click event.You can define more logics in this method. +After the component mounted,Dialog binds a custom event called 'modal' to document element.The event handler defined in our component named `modalHandler`.It accepts and renders the data passed by users.When document node captured a `modal` event,`modalHandler` works. -Use `children` prop to get the content of the dialog passed by Component User.Render the content in `dialog-content` class div. +Before the component unmounted,Dialog removes the custom event from document element in case of memory leaks. + +Dialog exposed the `show` method via using `static` reserved keyword so that we can call it through Dialog class.The `show` method accepts a object parameter that contains two properties:`title` and `content`. + +* `title` is the text you wanna show as the title of the dialog,passed as a String. +* `content` is a jsx element.Dialog will render it.You can pass any content you want to show in the dialog. + +See the live demo on [stackblitz.com](https://stackblitz.com/edit/react-7yg2gr). ```css .modal { From ca9038c759c607926b0eb5e619d91de3c8aa7cdd Mon Sep 17 00:00:00 2001 From: russ_zhong Date: Thu, 8 Nov 2018 16:56:22 +0800 Subject: [PATCH 08/21] update the code --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index d28b54ee6..0ffac7de1 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -124,7 +124,7 @@ class Dialog extends React.Component { // every time you wanna call the dialog // content is a jsx element -ModalDialog.show({ +Dialog.show({ title: 'Test', content: }); From 22529619a44144f1e91469c1eece182e260c3962 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:34:14 +0800 Subject: [PATCH 09/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 0ffac7de1..13eabc9f8 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -2,7 +2,7 @@ Renders a dialog component with modal. -This is a simple React ModalDialog Component.It owns only one prop: `closeOnClick`. +This is a simple React ModalDialog Component that is called and controlled through events * `closeOnClick` prop determines whether we can close the dialog via clicking on modal. From bbd7d943024d94443c98dbb378b5411e4d20b4a1 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:34:30 +0800 Subject: [PATCH 10/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 1 - 1 file changed, 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 13eabc9f8..eef6e9952 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -4,7 +4,6 @@ Renders a dialog component with modal. This is a simple React ModalDialog Component that is called and controlled through events -* `closeOnClick` prop determines whether we can close the dialog via clicking on modal. Benefits from the CustomEvent API,this ModalDialog component supports single instance usage.We just need import `Dialog` once time,and can call the dialog everywhere.Every time we wanna show the dialog,we just call the static function `Dialog.show`.Passing our jsx templates and data as the parameter and then the dialog will show with the data and templates rendered. From e65db00c4e4722fcfb33f1cccfdd2c1bcaa2644c Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:35:14 +0800 Subject: [PATCH 11/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index eef6e9952..3488a712b 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -11,7 +11,7 @@ After the component mounted,Dialog binds a custom event called 'modal' to docume Before the component unmounted,Dialog removes the custom event from document element in case of memory leaks. -Dialog exposed the `show` method via using `static` reserved keyword so that we can call it through Dialog class.The `show` method accepts a object parameter that contains two properties:`title` and `content`. +Dialog exposed the `show` method via using `static` reserved keyword so that we can call it through Dialog class.The `show` method accepts a object parameter that contains three properties: `title`, `closeOnClick`, and `content`. * `title` is the text you wanna show as the title of the dialog,passed as a String. * `content` is a jsx element.Dialog will render it.You can pass any content you want to show in the dialog. From 35e59b47e21fa7b96a7e7ec987f79e91ecec69fe Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:35:55 +0800 Subject: [PATCH 12/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 3488a712b..9673f093d 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -14,6 +14,7 @@ Before the component unmounted,Dialog removes the custom event from document ele Dialog exposed the `show` method via using `static` reserved keyword so that we can call it through Dialog class.The `show` method accepts a object parameter that contains three properties: `title`, `closeOnClick`, and `content`. * `title` is the text you wanna show as the title of the dialog,passed as a String. +* `closeOnClick` is a boolean to determine if the modal should close when clicked on(true), or only when the X button is pressed(false). * `content` is a jsx element.Dialog will render it.You can pass any content you want to show in the dialog. See the live demo on [stackblitz.com](https://stackblitz.com/edit/react-7yg2gr). From 52a68f98509caada585241cc2521e055cf830555 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:36:11 +0800 Subject: [PATCH 13/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 9673f093d..cb1dd81ee 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -75,6 +75,7 @@ class Dialog extends React.Component { this.state = { data: { title: '', + closeOnClick: false, content: '' }, visible: false From d808d77ad28b25f6eb729f1c06bf112ab29c329a Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:37:06 +0800 Subject: [PATCH 14/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index cb1dd81ee..6da38b46b 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -103,7 +103,12 @@ class Dialog extends React.Component { } close() { this.setState({ - visible: false + visible: false, + data: { + title: '', + closeOnClick: false, + content: '' + } }); } static show(data) { From 95c4c3524e6de117044b50f8c9b553a231152ec3 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:37:12 +0800 Subject: [PATCH 15/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 6da38b46b..302fd497d 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -119,7 +119,7 @@ class Dialog extends React.Component { })); } modalClick() { - if (this.props.closeOnClick) this.close(); + if (this.state.data.closeOnClick) this.close(); } } ``` From a5ac8bf24ceeb6fb278b722dfc6e39ca31c46d23 Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:37:19 +0800 Subject: [PATCH 16/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 302fd497d..6647eb41b 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -126,7 +126,7 @@ class Dialog extends React.Component { ```jsx // add to render function - + // every time you wanna call the dialog // content is a jsx element From 9e1f036ddd35fcee884eaa3510975ac3ad8a173f Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Fri, 9 Nov 2018 08:37:29 +0800 Subject: [PATCH 17/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 6647eb41b..121e22ac7 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -131,7 +131,8 @@ class Dialog extends React.Component { // every time you wanna call the dialog // content is a jsx element Dialog.show({ - title: 'Test', + title: 'Test', + closeOnClick: true, content: }); ``` From 16d28e31a253049f5ee0e12ef91a5578a16f737c Mon Sep 17 00:00:00 2001 From: "DM.Zhong" Date: Fri, 9 Nov 2018 08:45:56 +0800 Subject: [PATCH 18/21] Update ModalDialog.md --- snippets/ModalDialog.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 121e22ac7..e624cd639 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -2,12 +2,12 @@ Renders a dialog component with modal. -This is a simple React ModalDialog Component that is called and controlled through events +This is a simple React ModalDialog Component that is called and controlled through events. Benefits from the CustomEvent API,this ModalDialog component supports single instance usage.We just need import `Dialog` once time,and can call the dialog everywhere.Every time we wanna show the dialog,we just call the static function `Dialog.show`.Passing our jsx templates and data as the parameter and then the dialog will show with the data and templates rendered. -After the component mounted,Dialog binds a custom event called 'modal' to document element.The event handler defined in our component named `modalHandler`.It accepts and renders the data passed by users.When document node captured a `modal` event,`modalHandler` works. +After the component mounted,Dialog binds a custom event called `modal` to document element.The event handler defined in our component named `modalHandler`.It accepts and renders the data passed by users.When document node captured a `modal` event,`modalHandler` works. Before the component unmounted,Dialog removes the custom event from document element in case of memory leaks. From ed2e5a247de6ba61f667cb3b8389743dedf97a1b Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Thu, 15 Nov 2018 23:21:55 +0800 Subject: [PATCH 19/21] Update snippets/ModalDialog.md Co-Authored-By: zhongdeming428 --- snippets/ModalDialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index e624cd639..10ad93216 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -84,7 +84,7 @@ class Dialog extends React.Component { this.modalClick = this.modalClick.bind(this); } render() { - return
+ return !this.state.visible ? null :
{ this.state.data.title }+
From f73fbae636d7b4902cd9fd9328b3a5c658365da2 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 29 Nov 2018 10:08:54 +0200 Subject: [PATCH 20/21] Include a notes section in the snippet template --- snippet-template.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/snippet-template.md b/snippet-template.md index 8984fe93e..d57150e6f 100644 --- a/snippet-template.md +++ b/snippet-template.md @@ -23,6 +23,12 @@ class ComponentName extends React.Component { ReactDOM.render(, mountNode); ``` + +#### Notes: +* Things to remember when using this +* Other options that might be less appealing or have lower compatibility +* Common mistakes and issues + From 2b0015dca270e6c4d62f1e2eef622a5e378c646b Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 29 Nov 2018 10:19:25 +0200 Subject: [PATCH 21/21] Update ModalDialog.md --- snippets/ModalDialog.md | 43 ++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/snippets/ModalDialog.md b/snippets/ModalDialog.md index 10ad93216..1dc392699 100644 --- a/snippets/ModalDialog.md +++ b/snippets/ModalDialog.md @@ -1,23 +1,18 @@ -### Modal/Dialog +### ModalDialog -Renders a dialog component with modal. +Renders a dialog component in a modal, controllable through events. +To use the component, import `ModalDialog` only once and then display it using `ModalDialog.show()`, passing the JSX templates and data as parameters. -This is a simple React ModalDialog Component that is called and controlled through events. +Define `modalHandler`, a method that will handle showing the modal dialog, set `state` to the default values initially and bind the `close` and `modalClick` methods to the component's context. +Define `close` and `modalClick` to toggle the visibility of the modal dialog, based on `state.closeOnClick`. +Use the CustomEvent API to listen for `modal` events, that can be dispatched from the `static` `show()` method, handle listeners appropriately from `componentDidMount` and `componentWillUnmount`. +The `show()` method accepts an argument, that should contain three parameters: +* `title`, a string for the dialog's title +* `closeOnClick`, `true` if the modal should close on click or `false` if it should only close when clicking the *X* button +* `content`, which is the JSX content to be rendered inside the dialog -Benefits from the CustomEvent API,this ModalDialog component supports single instance usage.We just need import `Dialog` once time,and can call the dialog everywhere.Every time we wanna show the dialog,we just call the static function `Dialog.show`.Passing our jsx templates and data as the parameter and then the dialog will show with the data and templates rendered. - -After the component mounted,Dialog binds a custom event called `modal` to document element.The event handler defined in our component named `modalHandler`.It accepts and renders the data passed by users.When document node captured a `modal` event,`modalHandler` works. - -Before the component unmounted,Dialog removes the custom event from document element in case of memory leaks. - -Dialog exposed the `show` method via using `static` reserved keyword so that we can call it through Dialog class.The `show` method accepts a object parameter that contains three properties: `title`, `closeOnClick`, and `content`. - -* `title` is the text you wanna show as the title of the dialog,passed as a String. -* `closeOnClick` is a boolean to determine if the modal should close when clicked on(true), or only when the X button is pressed(false). -* `content` is a jsx element.Dialog will render it.You can pass any content you want to show in the dialog. - -See the live demo on [stackblitz.com](https://stackblitz.com/edit/react-7yg2gr). +Finally, in the `render()` method, use a `
` to wrap everything and render the modal dialog with the content passed to `show()`. ```css .modal { @@ -63,7 +58,7 @@ See the live demo on [stackblitz.com](https://stackblitz.com/edit/react-7yg2gr). ``` ```jsx -class Dialog extends React.Component { +class ModalDialog extends React.Component { constructor() { super(); this.modalHandler = (e) => { @@ -126,17 +121,21 @@ class Dialog extends React.Component { ```jsx // add to render function - + // every time you wanna call the dialog // content is a jsx element -Dialog.show({ - title: 'Test', +ModalDialog.show({ + title: 'Hello, world!', closeOnClick: true, - content: + content: }); ``` - +#### Notes: +* This component includes a lot of CSS, which might conflict with other CSS in your project. +* A more up-to-date method with lower compatibility is to use [Portals](https://reactjs.org/docs/portals.html) in React 16+. + +