Skip to content

Commit

Permalink
refactor(menu): rename selected to active for future md-select …
Browse files Browse the repository at this point in the history 
…work

PiperOrigin-RevId: 506740196
  • Loading branch information
@material-web-copybara @copybara-github
material-web-copybara authored and copybara-github committed Feb 2, 2023
1 parent 1f2a4d9 commit 8f69e62
Show file tree
Hide file tree
Showing 11 changed files with 129 additions and 128 deletions.
96 changes: 48 additions & 48 deletions list/lib/list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export class List extends LitElement {
@query('.md3-list') listRoot!: HTMLElement;

/**
* An array of selectable and disableable list items. Queries every assigned
* An array of activatable and disableable list items. Queries every assigned
* element that has the `md-list-item` attribute.
*
* _NOTE:_ This is a shallow, flattened query via
Expand Down Expand Up @@ -111,7 +111,7 @@ export class List extends LitElement {
*
* @param event {KeyboardEvent} The keyboard event that triggers this handler.
*/
protected handleKeydown(event: KeyboardEvent) {
handleKeydown(event: KeyboardEvent) {
const key = event.key;
if (!isNavigableKey(key)) {
return;
Expand All @@ -123,44 +123,44 @@ export class List extends LitElement {
return;
}

const selectedItemRecord = List.getSelectedItem(items);
const activeItemRecord = List.getActiveItem(items);

if (selectedItemRecord) {
selectedItemRecord.item.selected = false;
if (activeItemRecord) {
activeItemRecord.item.active = false;
}

event.preventDefault();

switch (key) {
// Select the next item
// Activate the next item
case NAVIGABLE_KEYS.ArrowDown:
if (selectedItemRecord) {
const next = List.getNextItem(items, selectedItemRecord.index);
if (activeItemRecord) {
const next = List.getNextItem(items, activeItemRecord.index);

if (next) next.selected = true;
if (next) next.active = true;
} else {
List.selectFirstItem(items);
List.activateFirstItem(items);
}
break;

// Select the previous item
// Activate the previous item
case NAVIGABLE_KEYS.ArrowUp:
if (selectedItemRecord) {
const prev = List.getPrevItem(items, selectedItemRecord.index);
if (prev) prev.selected = true;
if (activeItemRecord) {
const prev = List.getPrevItem(items, activeItemRecord.index);
if (prev) prev.active = true;
} else {
items[items.length - 1].selected = true;
items[items.length - 1].active = true;
}
break;

// Select the first item
// Activate the first item
case NAVIGABLE_KEYS.Home:
List.selectFirstItem(items);
List.activateFirstItem(items);
break;

// Select the last item
// Activate the last item
case NAVIGABLE_KEYS.End:
List.selectLastItem(items);
List.activateLastItem(items);
break;

default:
Expand All @@ -169,46 +169,46 @@ export class List extends LitElement {
}

/**
* Selects the first non-disabled item of a given array of items.
* Activates the first non-disabled item of a given array of items.
*
* @param items {Array<ListItem>} The items from which to select the
* @param items {Array<ListItem>} The items from which to activate the
* first item.
*/
static selectFirstItem<T extends ListItem>(items: T[]) {
static activateFirstItem<T extends ListItem>(items: T[]) {
// NOTE: These selector functions are static and not on the instance such
// that multiple operations can be chained and we do not have to re-query
// the DOM
const firstItem = List.getFirstSelectableItem(items);
const firstItem = List.getFirstActivatableItem(items);
if (firstItem) {
firstItem.selected = true;
firstItem.active = true;
}
}

/**
* Selects the last non-disabled item of a given array of items.
* Activates the last non-disabled item of a given array of items.
*
* @param items {Array<ListItem>} The items from which to select the
* @param items {Array<ListItem>} The items from which to activate the
* last item.
*/
static selectLastItem<T extends ListItem>(items: T[]) {
const lastItem = List.getLastSelectableItem(items);
static activateLastItem<T extends ListItem>(items: T[]) {
const lastItem = List.getLastActivatableItem(items);
if (lastItem) {
lastItem.selected = true;
lastItem.active = true;
}
}

/**
* Deselects the currently selected item of a given array of items.
* Deactivates the currently active item of a given array of items.
*
* @param items {Array<ListItem>} The items from which to deselect the
* selected item.
* @returns A record of the deleselcted selected item including the item and
* the index of the item or `null` if none are deselected.
* @param items {Array<ListItem>} The items from which to deactivate the
* active item.
* @returns A record of the deleselcted activated item including the item and
* the index of the item or `null` if none are deactivated.
*/
static deselectSelectedItem<T extends ListItem>(items: T[]) {
const activeItem = List.getSelectedItem(items);
static deactivateActiveItem<T extends ListItem>(items: T[]) {
const activeItem = List.getActiveItem(items);
if (activeItem) {
activeItem.item.selected = false;
activeItem.item.active = false;
}
return activeItem;
}
Expand All @@ -218,16 +218,16 @@ export class List extends LitElement {
}

/**
* Retrieves the the first selected item of a given array of items.
* Retrieves the the first activated item of a given array of items.
*
* @param items {Array<ListItem>} The items to search.
* @returns A record of the first selected item including the item and the
* index of the item or `null` if none are selected.
* @returns A record of the first activated item including the item and the
* index of the item or `null` if none are activated.
*/
static getSelectedItem<T extends ListItem>(items: T[]) {
static getActiveItem<T extends ListItem>(items: T[]) {
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.selected) {
if (item.active) {
return {
item,
index: i,
Expand All @@ -242,9 +242,9 @@ export class List extends LitElement {
* the first item that is not disabled.
*
* @param items {Array<ListItem>} The items to search.
* @returns The first selectable item or `null` if none are selectable.
* @returns The first activatable item or `null` if none are activatable.
*/
static getFirstSelectableItem<T extends ListItem>(items: T[]) {
static getFirstActivatableItem<T extends ListItem>(items: T[]) {
for (const item of items) {
if (!item.disabled) {
return item;
Expand All @@ -258,9 +258,9 @@ export class List extends LitElement {
* Retrieves the the last non-disabled item of a given array of items.
*
* @param items {Array<ListItem>} The items to search.
* @returns The last selectable item or `null` if none are selectable.
* @returns The last activatable item or `null` if none are activatable.
*/
static getLastSelectableItem<T extends ListItem>(items: T[]) {
static getLastActivatableItem<T extends ListItem>(items: T[]) {
for (let i = items.length - 1; i >= 0; i--) {
const item = items[i];
if (!item.disabled) {
Expand All @@ -276,7 +276,7 @@ export class List extends LitElement {
*
* @param items {Array<ListItem>} The items to search.
* @param index {{index: number}} The index to search from.
* @returns The next selectable item or `null` if none are selectable.
* @returns The next activatable item or `null` if none are activatable.
*/
protected static getNextItem<T extends ListItem>(items: T[], index: number) {
for (let i = 1; i < items.length; i++) {
Expand All @@ -294,7 +294,7 @@ export class List extends LitElement {
*
* @param items {Array<ListItem>} The items to search.
* @param index {{index: number}} The index to search from.
* @returns The previous selectable item or `null` if none are selectable.
* @returns The previous activatable item or `null` if none are activatable.
*/
protected static getPrevItem<T extends ListItem>(items: T[], index: number) {
for (let i = 1; i < items.length; i++) {
Expand Down
12 changes: 6 additions & 6 deletions list/lib/listitem/list-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {MdRipple} from '../../../ripple/ripple.js';
import {ARIARole} from '../../../types/aria.js';

interface ListItemSelf {
selected: boolean;
active: boolean;
disabled: boolean;
}

Expand Down Expand Up @@ -81,11 +81,11 @@ export class ListItemEl extends LitElement implements ListItem {
@property({type: Number}) itemTabIndex = -1;

/**
* Whether or not the element is in the selected state. When selected,
* Whether or not the element is in the selected visual state. When active,
* tabindex is set to 0, and in some list item variants (like md-list-item),
* focuses the underlying item.
*/
@property({type: Boolean, reflect: true}) selected = false;
@property({type: Boolean, reflect: true}) active = false;

/**
* READONLY. Sets the `md-list-item` attribute on the element.
Expand Down Expand Up @@ -114,8 +114,8 @@ export class ListItemEl extends LitElement implements ListItem {
private isFirstUpdate = true;

override willUpdate(changed: PropertyValues<this>) {
if (changed.has('selected') && !this.disabled) {
if (this.selected) {
if (changed.has('active') && !this.disabled) {
if (this.active) {
this.itemTabIndex = 0;

if (this.focusOnSelection) {
Expand Down Expand Up @@ -276,7 +276,7 @@ export class ListItemEl extends LitElement implements ListItem {

// will focus the list item root if it is selected but not on the first
// update or else it may cause the page to jump on first load.
if (changed.has('selected') && !this.isFirstUpdate && this.selected &&
if (changed.has('active') && !this.isFirstUpdate && this.active &&
this.focusOnSelection) {
this.listItemRoot.focus();
}
Expand Down
20 changes: 10 additions & 10 deletions menu/lib/menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ export abstract class Menu extends LitElement {
protected renderMenuItems() {
return html`<slot
@close-menu=${this.onCloseMenu}
@deselect-items=${this.onDeselectItems}></slot>`;
@deactivate-items=${this.onDeactivateItems}></slot>`;
}

/**
Expand Down Expand Up @@ -307,23 +307,23 @@ export abstract class Menu extends LitElement {
if (!this.listElement) return;

const items = this.listElement.items;
const activeItemRecord = List.getSelectedItem(items);
const activeItemRecord = List.getActiveItem(items);

if (activeItemRecord) {
activeItemRecord.item.selected = false;
if (activeItemRecord && this.defaultFocus !== 'NONE') {
activeItemRecord.item.active = false;
}

switch (this.defaultFocus) {
case 'FIRST_ITEM':
const first = List.getFirstSelectableItem(items);
const first = List.getFirstActivatableItem(items);
if (first) {
first.selected = true;
first.active = true;
}
break;
case 'LAST_ITEM':
const last = List.getLastSelectableItem(items);
const last = List.getLastActivatableItem(items);
if (last) {
last.selected = true;
last.active = true;
}
break;
case 'LIST_ROOT':
Expand Down Expand Up @@ -594,11 +594,11 @@ export abstract class Menu extends LitElement {
this.close();
}

protected onDeselectItems(e: Event) {
protected onDeactivateItems(e: Event) {
e.stopPropagation();
const items = this.items;
for (const item of items) {
item.selected = false;
item.active = false;
}
}

Expand Down
2 changes: 1 addition & 1 deletion menu/lib/menuitem/_menu-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $_custom-property-prefix: 'menu';
}

@mixin styles() {
:host([selected]) .list-item {
:host([active]) .list-item {
background-color: var(--_list-item-selected-container-color);
}

Expand Down
11 changes: 6 additions & 5 deletions menu/lib/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ interface MenuItemSelf {
*/
headline: string;
/**
* Whether or not the item is selected (focuses on selection).
* Whether or not the item is in the selected visual state (focuses on
* selection).
*/
selected: boolean;
active: boolean;
/**
* If it is a sub-menu-item, a method that can close the submenu.
*/
Expand Down Expand Up @@ -81,11 +82,11 @@ export class CloseMenuEvent<T extends Reason = DefaultReasons> extends Event {
export const DefaultCloseMenuEvent = CloseMenuEvent<DefaultReasons>;

/**
* The event that requests the parent md-menu to deselect all other items.
* The event that requests the parent md-menu to deactivate all other items.
*/
export class DeselectItemsEvent extends Event {
export class DeactivateItemsEvent extends Event {
constructor() {
super('deselect-items', {bubbles: true, composed: true});
super('deactivate-items', {bubbles: true, composed: true});
}
}

Expand Down
Loading

0 comments on commit 8f69e62

Please sign in to comment.