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

feat(overlays): make arrow config more composable (#1101)

Browse source
This commit is contained in:
Thijs Louisse 2020-11-19 10:58:05 +01:00 committed by GitHub
parent 4bacc17b16
commit 9142a53da3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/proud-geckos-arrive.md Normal file
View file

@ -0,0 +1,5 @@
---
"@lion/overlays": patch
---
overlays: make arrow config more composable

54
packages/overlays/src/ArrowMixin.js
View file

@ -4,7 +4,7 @@ import { OverlayMixin } from './OverlayMixin.js';
/** /**
* @typedef {import('../types/OverlayConfig').OverlayConfig} OverlayConfig * @typedef {import('../types/OverlayConfig').OverlayConfig} OverlayConfig
* @typedef {import('../types/ArrowMixinTypes').ArrowMixin} ArrowMixin * @typedef {import('../types/ArrowMixinTypes').ArrowMixin} ArrowMixin
* * @typedef {import('popper.js').PopperOptions} PopperOptions
*/ */
/** /**
@ -109,36 +109,46 @@ export const ArrowMixinImplementation = superclass =>
*/ */
// eslint-disable-next-line // eslint-disable-next-line
_defineOverlayConfig() { _defineOverlayConfig() {
const superConfig = super._defineOverlayConfig() || {};
if (!this.hasArrow) { if (!this.hasArrow) {
return super._defineOverlayConfig(); return superConfig;
} }
return { return {
...super._defineOverlayConfig(), ...superConfig,
popperConfig: { popperConfig: {
...super._defineOverlayConfig()?.popperConfig, ...this._getPopperArrowConfig(superConfig.popperConfig),
placement: 'top', },
};
}
modifiers: { /**
...super._defineOverlayConfig()?.popperConfig?.modifiers, * @param {PopperOptions} popperConfigToExtendFrom
keepTogether: { * @returns {PopperOptions}
...super._defineOverlayConfig()?.popperConfig?.modifiers?.keepTogether, */
enabled: true, _getPopperArrowConfig(popperConfigToExtendFrom = {}) {
}, return {
arrow: { placement: 'top',
...super._defineOverlayConfig()?.popperConfig?.modifiers?.arrow,
enabled: true,
},
},
/** @param {import("popper.js").default.Data} data */ modifiers: {
onCreate: data => { ...popperConfigToExtendFrom.modifiers,
this.__syncFromPopperState(data); keepTogether: {
...popperConfigToExtendFrom.modifiers?.keepTogether,
enabled: true,
}, },
/** @param {import("popper.js").default.Data} data */ arrow: {
onUpdate: data => { ...popperConfigToExtendFrom.modifiers?.arrow,
this.__syncFromPopperState(data); enabled: true,
}, },
}, },
/** @param {import("popper.js").default.Data} data */
onCreate: data => {
this.__syncFromPopperState(data);
},
/** @param {import("popper.js").default.Data} data */
onUpdate: data => {
this.__syncFromPopperState(data);
},
}; };
} }