andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update the whole doc

Browse Source
This commit is contained in:
russ_zhong
2018-11-08 16:49:17 +08:00
parent af0c377163
commit fabbe845be
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
snippets/ModalDialog.md
View File

@ -2,19 +2,22 @@
Renders a dialog component with modal. 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. * `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. 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.
* `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. 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 ```css
.modal { .modal {