Commit 3da63884 authored by Thomas Randolph's avatar Thomas Randolph Committed by Jacques Erasmus

Add the ability to close a flash message in code

Until now Flash instances could only be closed by interacting
with the UI. It's often desirable to be able to dismiss a message
without user interaction and without querying the DOM.

Basically: if some code opens a Flash, it should also be able to 
close said Flash.

This update adds a simple `close` property to the container that
allows anyone with a reference to the container to close it
programmatically.

Basic use goes something like this:

```
var myFlash = createFlash(...);
// ...later, message is irrelevant now!
myFlash.close();
```
parent c1ad0bb9
......@@ -9,6 +9,10 @@ const FLASH_TYPES = {
WARNING: 'warning',
};
const getCloseEl = (flashEl) => {
return flashEl.querySelector('.js-close-icon');
};
const hideFlash = (flashEl, fadeTransition = true) => {
if (fadeTransition) {
Object.assign(flashEl.style, {
......@@ -56,9 +60,7 @@ const createFlashEl = (message, type) => `
`;
const removeFlashClickListener = (flashEl, fadeTransition) => {
flashEl
.querySelector('.js-close-icon')
.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
getCloseEl(flashEl).addEventListener('click', () => hideFlash(flashEl, fadeTransition));
};
/*
......@@ -114,6 +116,10 @@ const createFlash = function createFlash({
if (captureError && error) Sentry.captureException(error);
flashContainer.close = () => {
getCloseEl(flashEl).click();
};
return flashContainer;
};
......
......@@ -339,6 +339,20 @@ describe('Flash', () => {
expect(actionConfig.clickHandler).toHaveBeenCalled();
});
});
describe('additional behavior', () => {
describe('close', () => {
it('clicks the close icon', () => {
const flash = createFlash({ ...defaultParams });
const close = document.querySelector('.flash-alert .js-close-icon');
jest.spyOn(close, 'click');
flash.close();
expect(close.click.mock.calls.length).toBe(1);
});
});
});
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment