kopia lustrzana https://github.com/shoelace-style/shoelace
Add slActivate/slDeactivate events to menu item
rodzic
be44db8e35
commit
6c16eb9a11
|
@ -1745,6 +1745,14 @@ declare namespace LocalJSX {
|
|||
* Set to true to draw the menu item in a disabled state.
|
||||
*/
|
||||
"disabled"?: boolean;
|
||||
/**
|
||||
* Emitted when the menu item becomes active.
|
||||
*/
|
||||
"onSlActivate"?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* Emitted when the menu item becomes inactive.
|
||||
*/
|
||||
"onSlDeactivate"?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* A unique value to store in the menu item.
|
||||
*/
|
||||
|
|
|
@ -94,6 +94,7 @@ export class Dropdown {
|
|||
connectedCallback() {
|
||||
this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
|
||||
this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
|
||||
this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
|
||||
this.handlePanelSelect = this.handlePanelSelect.bind(this);
|
||||
this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
|
||||
this.togglePanel = this.togglePanel.bind(this);
|
||||
|
@ -141,6 +142,7 @@ export class Dropdown {
|
|||
this.popover.show();
|
||||
this.ignoreOpenWatcher = false;
|
||||
|
||||
this.panel.addEventListener('slActivate', this.handleMenuItemActivate);
|
||||
this.panel.addEventListener('slSelect', this.handlePanelSelect);
|
||||
document.addEventListener('mousedown', this.handleDocumentMouseDown);
|
||||
document.addEventListener('keydown', this.handleDocumentKeyDown);
|
||||
|
@ -163,6 +165,7 @@ export class Dropdown {
|
|||
this.popover.hide();
|
||||
this.ignoreOpenWatcher = false;
|
||||
|
||||
this.panel.removeEventListener('slActivate', this.handleMenuItemActivate);
|
||||
this.panel.removeEventListener('slSelect', this.handlePanelSelect);
|
||||
document.removeEventListener('mousedown', this.handleDocumentMouseDown);
|
||||
document.removeEventListener('keydown', this.handleDocumentKeyDown);
|
||||
|
@ -220,16 +223,6 @@ export class Dropdown {
|
|||
event.preventDefault();
|
||||
menu.setFocus();
|
||||
}
|
||||
|
||||
// If a menu is present, ensure the active menu item stays in view when the selection changes
|
||||
if (menu && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
||||
const menuItems = [...menu.querySelectorAll('sl-menu-item')];
|
||||
const activeItem = menuItems.find(item => item.active);
|
||||
|
||||
if (activeItem) {
|
||||
scrollIntoView(activeItem, this.panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleDocumentMouseDown(event: MouseEvent) {
|
||||
|
@ -241,6 +234,11 @@ export class Dropdown {
|
|||
}
|
||||
}
|
||||
|
||||
handleMenuItemActivate(event: CustomEvent) {
|
||||
const item = event.target as HTMLSlMenuItemElement;
|
||||
scrollIntoView(item, this.panel);
|
||||
}
|
||||
|
||||
handlePanelSelect(event: CustomEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Prop, h } from '@stencil/core';
|
||||
import { Component, Event, EventEmitter, Prop, Watch, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
@ -33,6 +33,17 @@ export class MenuItem {
|
|||
/** Set to true to draw the menu item in a disabled state. */
|
||||
@Prop() disabled = false;
|
||||
|
||||
@Watch('active')
|
||||
handleActiveChange() {
|
||||
this.active ? this.slActivate.emit() : this.slDeactivate.emit();
|
||||
}
|
||||
|
||||
/** Emitted when the menu item becomes active. */
|
||||
@Event() slActivate: EventEmitter;
|
||||
|
||||
/** Emitted when the menu item becomes inactive. */
|
||||
@Event() slDeactivate: EventEmitter;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
|
|
Ładowanie…
Reference in New Issue