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