status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Add a modal.opened property for inspecting whether the modal is open (#13723) 

* ui: Add a modal.opened property for inspecting whether the modal is open

* merge isOpen setting into the exiting event handler

* Revert to multiple listeners, plus comment to explain

* Wrap close in an afterRender
This commit is contained in:
John Cowen 2022-07-18 15:30:37 +01:00 committed by GitHub
parent cdf40a6ae6
commit 24417d94ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/packages/consul-ui/app/components/modal-dialog/README.mdx
View File

@ -70,5 +70,6 @@ Then all modals will be rendered into the `<ModalLayer />`.
| --- | --- | --- |
| `open` | `Function` | Opens the modal dialog |
| `close` | `Function` | Closes the modal dialog |
| `opened` | `boolean` | Whether the modal is currently open or not |

3
ui/packages/consul-ui/app/components/modal-dialog/index.hbs
View File

@ -30,6 +30,7 @@
{{yield (hash
open=(action "open")
close=(action "close")
opened=this.isOpen
aria=aria
)}}
</YieldSlot>
@ -39,6 +40,7 @@
{{yield (hash
open=(action "open")
close=(action "close")
opened=this.isOpen
aria=aria
)}}
</YieldSlot>
@ -48,6 +50,7 @@
{{yield (hash
open=(action "open")
close=(action "close")
opened=this.isOpen
aria=aria
)}}
</YieldSlot>

15
ui/packages/consul-ui/app/components/modal-dialog/index.js
View File

@ -1,18 +1,27 @@
import Component from '@ember/component';
import { set } from '@ember/object';
import Slotted from 'block-slots';
import A11yDialog from 'a11y-dialog';
import { schedule } from '@ember/runloop';
export default Component.extend(Slotted, {
tagName: '',
onclose: function() {},
onopen: function() {},
isOpen: false,
actions: {
connect: function($el) {
this.dialog = new A11yDialog($el);
this.dialog.on('hide', () => this.onclose({ target: $el }));
this.dialog.on('show', () => this.onopen({ target: $el }));
this.dialog.on('hide', () => {
schedule('afterRender', _ => set(this, 'isOpen', false));
this.onclose({ target: $el })
});
this.dialog.on('show', () => {
set(this, 'isOpen', true)
this.onopen({ target: $el })
});
if (this.open) {
this.dialog.show();
this.actions.open.apply(this, []);
}
},
disconnect: function($el) {