ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(overlays): keep hide/show hooks

Browse source
This commit is contained in:
Thomas Allmer 2020-12-01 14:12:13 +01:00
parent 0f41bf20c2
commit 2eeace23d5
4 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tricky-mugs-switch.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/overlays': patch
---
Keep transitionShow and transitionHide as user hooks

4
packages/combobox/test/lion-combobox.test.js
View file

@ -302,8 +302,8 @@ describe('lion-combobox', () => {
expect(document.activeElement).to.equal(el._inputNode);
// step [4]
el._inputNode.value = '';
el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'c' }));
await el.updateComplete;
mimicUserTyping(el, 'c');
await el.updateComplete;
expect(el.opened).to.equal(true);
});

1
packages/input-datepicker/test-helpers/DatepickerInputObject.js
View file

@ -26,6 +26,7 @@ export class DatepickerInputObject {
async closeCalendar() {
this.overlayCloseButtonEl.click();
await this.overlayEl.updateComplete;
}
/**

37
packages/overlays/src/OverlayController.js
View file

@ -681,7 +681,10 @@ export class OverlayController extends EventTargetShim {
await this._handlePosition({ phase: 'show' });
this.__elementToFocusAfterHide = elementToFocusAfterHide;
this.dispatchEvent(new Event('show'));
await this.transitionShow({ backdropNode: this.backdropNode, contentNode: this.contentNode });
await this._transitionShow({
backdropNode: this.backdropNode,
contentNode: this.contentNode,
});
}
/** @type {function} */
(this._showResolve)();
@ -787,7 +790,11 @@ export class OverlayController extends EventTargetShim {
const event = new CustomEvent('before-hide', { cancelable: true });
this.dispatchEvent(event);
if (!event.defaultPrevented) {
await this.transitionHide({ backdropNode: this.backdropNode, contentNode: this.contentNode });
await this._transitionHide({
backdropNode: this.backdropNode,
contentNode: this.contentNode,
});
this.contentWrapperNode.style.display = 'none';
this._handleFeatures({ phase: 'hide' });
this._keepBodySize({ phase: 'hide' });
@ -798,10 +805,21 @@ export class OverlayController extends EventTargetShim {
}
/**
* Method to be overriden by subclassers
*
* @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} hideConfig
*/
// eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
async transitionHide(hideConfig) {
async transitionHide(hideConfig) {}
/**
* @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} hideConfig
*/
// eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
async _transitionHide(hideConfig) {
// `this.transitionHide` is a hook for our users
await this.transitionHide({ backdropNode: this.backdropNode, contentNode: this.contentNode });
if (hideConfig.backdropNode) {
hideConfig.backdropNode.classList.remove(
`${this.placementMode}-overlays__backdrop--animation-in`,
@ -831,10 +849,21 @@ export class OverlayController extends EventTargetShim {
}
/**
* To be overridden by subclassers
*
* @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} showConfig
*/
// eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
async transitionShow(showConfig) {
async transitionShow(showConfig) {}
/**
* @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} showConfig
*/
// eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
async _transitionShow(showConfig) {
// `this.transitionShow` is a hook for our users
await this.transitionShow({ backdropNode: this.backdropNode, contentNode: this.contentNode });
if (showConfig.backdropNode) {
showConfig.backdropNode.classList.add(
`${this.placementMode}-overlays__backdrop--animation-in`,