mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 01:22:07 +01:00
Code Issues Releases Wiki Activity

Move DropdownController themeOptions to an instance property

Browse Source
This commit is contained in:
Sage Abdullah 2024-01-24 10:16:43 +00:00 committed by sag​e
parent bda0c45a40
commit a89812f6b9
1 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/controllers/DropdownController.ts
View File

@ -80,25 +80,7 @@ export const rotateToggleIcon = {
}, },
}; };
const themeOptions = { type TippyTheme = 'dropdown' | 'drilldown' | 'dropdown-button';
'dropdown': {
arrow: true,
maxWidth: 350,
placement: 'bottom',
},
'drilldown': {
arrow: false,
maxWidth: 'none',
placement: 'bottom-end',
},
'dropdown-button': {
arrow: false,
maxWidth: 'none',
placement: 'bottom-start',
},
} as const;
type TippyTheme = keyof typeof themeOptions;
/** /**
* A Tippy.js tooltip with interactive "dropdown" options. * A Tippy.js tooltip with interactive "dropdown" options.
@ -174,14 +156,12 @@ export class DropdownController extends Controller<HTMLElement> {
...(this.hasContentTarget ...(this.hasContentTarget
? { content: this.contentTarget as Content } ? { content: this.contentTarget as Content }
: {}), : {}),
...themeOptions[this.themeValue], ...this.themeOptions,
trigger: 'click', trigger: 'click',
interactive: true, interactive: true,
...(this.hasOffsetValue && { offset: this.offsetValue }), ...(this.hasOffsetValue && { offset: this.offsetValue }),
hideOnClick: !this.useCustomHideOnClickAway,
getReferenceClientRect: () => this.reference.getBoundingClientRect(), getReferenceClientRect: () => this.reference.getBoundingClientRect(),
theme: this.themeValue, theme: this.themeValue,
plugins: this.plugins,
onShow() { onShow() {
if (hoverTooltipInstance) { if (hoverTooltipInstance) {
hoverTooltipInstance.disable(); hoverTooltipInstance.disable();
@ -199,13 +179,35 @@ export class DropdownController extends Controller<HTMLElement> {
}; };
} }
get useCustomHideOnClickAway() { get themeOptions() {
// Tippy's default hideOnClick option for "hiding on click away" doesn't return (
// work well with our datetime libraries. Instead, we use a custom plugin {
// to hide the tooltip when clicking outside the dropdown. It's unlikely 'dropdown': {
// we'll render a datetime picker for themes other than drilldown, so use arrow: true,
// the custom solution for this theme only. maxWidth: 350,
return this.themeValue === 'drilldown'; placement: 'bottom',
plugins: this.plugins,
},
'drilldown': {
arrow: false,
maxWidth: 'none',
placement: 'bottom-end',
// Tippy's default hideOnClick option for "hiding on click away" doesn't
// work well with our datetime libraries. Instead, we use a custom plugin
// to hide the tooltip when clicking outside the dropdown. It's unlikely
// we'll render a datetime picker for themes other than drilldown, so use
// the custom solution for this theme only.
hideOnClick: false,
plugins: this.plugins.concat([this.hideTooltipOnClickAway]),
},
'dropdown-button': {
arrow: false,
maxWidth: 'none',
placement: 'bottom-start',
plugins: this.plugins,
},
} as const
)[this.themeValue];
} }
/** /**
@ -264,9 +266,6 @@ export class DropdownController extends Controller<HTMLElement> {
if (this.hideOnClickValue) { if (this.hideOnClickValue) {
plugins.push(hideTooltipOnClickInside); plugins.push(hideTooltipOnClickInside);
} }
if (this.useCustomHideOnClickAway) {
plugins.push(this.hideTooltipOnClickAway);
}
return plugins; return plugins;
} }