Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
chore: internal change
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 683793498
  • Loading branch information
@material-web-copybara @asyncLiz
material-web-copybara authored and asyncLiz committed Oct 8, 2024
1 parent 2123067 commit 810e22d
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 92 deletions.
73 changes: 46 additions & 27 deletions packages/mdc-base/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
*/

import {safeAttrPrefix} from 'safevalues';
import {safeElement} from 'safevalues/dom';
import {setElementPrefixedAttribute} from 'safevalues/dom';

import {MDCFoundation} from './foundation';
import {CustomEventListener, EventType, SpecificEventListener} from './types';
Expand All @@ -46,14 +46,16 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
protected foundation: FoundationType;

constructor(
public root: HTMLElement, foundation?: FoundationType,
...args: unknown[]) {
public root: HTMLElement,
foundation?: FoundationType,
...args: unknown[]
) {
this.initialize(...args);
// Note that we initialize foundation here and not within the constructor's
// default param so that this.root is defined and can be used within the
// foundation class.
this.foundation =
foundation === undefined ? this.getDefaultFoundation() : foundation;
foundation === undefined ? this.getDefaultFoundation() : foundation;
this.foundation.init();
this.initialSyncWithDOM();
}
Expand All @@ -72,8 +74,9 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
// Subclasses must override this method to return a properly configured
// foundation class for the component.
throw new Error(
'Subclasses must override getDefaultFoundation to return a properly configured ' +
'foundation class');
'Subclasses must override getDefaultFoundation to return a properly configured ' +
'foundation class',
);
}

initialSyncWithDOM() {
Expand All @@ -97,14 +100,20 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
* This is most useful when listening for custom events.
*/
listen<K extends EventType>(
eventType: K, handler: SpecificEventListener<K>,
options?: AddEventListenerOptions|boolean): void;
eventType: K,
handler: SpecificEventListener<K>,
options?: AddEventListenerOptions | boolean,
): void;
listen<E extends Event>(
eventType: string, handler: CustomEventListener<E>,
options?: AddEventListenerOptions|boolean): void;
eventType: string,
handler: CustomEventListener<E>,
options?: AddEventListenerOptions | boolean,
): void;
listen(
eventType: string, handler: EventListener,
options?: AddEventListenerOptions|boolean) {
eventType: string,
handler: EventListener,
options?: AddEventListenerOptions | boolean,
) {
this.root.addEventListener(eventType, handler, options);
}

Expand All @@ -113,22 +122,32 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
* This is most useful when unlistening for custom events.
*/
unlisten<K extends EventType>(
eventType: K, handler: SpecificEventListener<K>,
options?: AddEventListenerOptions|boolean): void;
eventType: K,
handler: SpecificEventListener<K>,
options?: AddEventListenerOptions | boolean,
): void;
unlisten<E extends Event>(
eventType: string, handler: CustomEventListener<E>,
options?: AddEventListenerOptions|boolean): void;
eventType: string,
handler: CustomEventListener<E>,
options?: AddEventListenerOptions | boolean,
): void;
unlisten(
eventType: string, handler: EventListener,
options?: AddEventListenerOptions|boolean) {
eventType: string,
handler: EventListener,
options?: AddEventListenerOptions | boolean,
) {
this.root.removeEventListener(eventType, handler, options);
}

/**
* Fires a cross-browser-compatible custom event from the component root of
* the given type, with the given data.
*/
emit<T extends object>(eventType: string, eventData: T, shouldBubble = false) {
emit<T extends object>(
eventType: string,
eventData: T,
shouldBubble = false,
) {
let event: CustomEvent<T>;
if (typeof CustomEvent === 'function') {
event = new CustomEvent<T>(eventType, {
Expand All @@ -153,21 +172,21 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
* caller can't set any attribute.
*/
protected safeSetAttribute(
element: HTMLElement,
attribute: string,
value: string,
element: HTMLElement,
attribute: string,
value: string,
) {
if (attribute.toLowerCase() === 'tabindex') {
element.tabIndex = Number(value);
} else if (attribute.indexOf('data-') === 0) {
const dataKey = toCamelCase(attribute.replace(/^data-/, ''));
element.dataset[dataKey] = value;
} else {
safeElement.setPrefixedAttribute(
[safeAttrPrefix`aria-`, safeAttrPrefix`role`],
element,
attribute,
value,
setElementPrefixedAttribute(
[safeAttrPrefix`aria-`, safeAttrPrefix`role`],
element,
attribute,
value,
);
}
}
Expand Down
60 changes: 41 additions & 19 deletions packages/mdc-chips/action/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,18 @@ import {MDCRipple, MDCRippleFactory} from '@material/ripple/component';
import {MDCRippleFoundation} from '@material/ripple/foundation';
import {MDCRippleCapableSurface} from '@material/ripple/types';
import {safeAttrPrefix} from 'safevalues';
import {safeElement} from 'safevalues/dom';
import {setElementPrefixedAttribute} from 'safevalues/dom';

import {MDCChipActionAdapter} from './adapter';
import {computePrimaryActionRippleClientRect, GRAPHIC_SELECTED_WIDTH_STYLE_PROP} from './component-ripple';
import {MDCChipActionCssClasses, MDCChipActionFocusBehavior, MDCChipActionType} from './constants';
import {
computePrimaryActionRippleClientRect,
GRAPHIC_SELECTED_WIDTH_STYLE_PROP,
} from './component-ripple';
import {
MDCChipActionCssClasses,
MDCChipActionFocusBehavior,
MDCChipActionType,
} from './constants';
import {MDCChipActionFoundation} from './foundation';
import {MDCChipPrimaryActionFoundation} from './primary-foundation';
import {MDCChipTrailingActionFoundation} from './trailing-foundation';
Expand All @@ -42,9 +49,10 @@ import {MDCChipTrailingActionFoundation} from './trailing-foundation';
* MDCChipActionFactory is used by the parent MDCChip component to initialize
* chip actions.
*/
export type MDCChipActionFactory =
(el: HTMLElement, foundation?: MDCChipActionFoundation) => MDCChipAction;

export type MDCChipActionFactory = (
el: HTMLElement,
foundation?: MDCChipActionFoundation,
) => MDCChipAction;

const ALLOWED_ATTR_PREFIXES = [
safeAttrPrefix`aria-`,
Expand All @@ -58,8 +66,10 @@ const ALLOWED_ATTR_PREFIXES = [
* MDCChipAction provides component encapsulation of the different foundation
* implementations.
*/
export class MDCChipAction extends
MDCComponent<MDCChipActionFoundation> implements MDCRippleCapableSurface {
export class MDCChipAction
extends MDCComponent<MDCChipActionFoundation>
implements MDCRippleCapableSurface
{
static override attachTo(root: HTMLElement): MDCChipAction {
return new MDCChipAction(root);
}
Expand All @@ -77,14 +87,17 @@ export class MDCChipAction extends
}

override initialize(
rippleFactory: MDCRippleFactory = (el, foundation) =>
new MDCRipple(el, foundation)) {
rippleFactory: MDCRippleFactory = (el, foundation) =>
new MDCRipple(el, foundation),
) {
const rippleAdapter: MDCRippleAdapter = {
...MDCRipple.createAdapter(this),
computeBoundingRect: () => this.computeRippleClientRect(),
};
this.rippleInstance =
rippleFactory(this.root, new MDCRippleFoundation(rippleAdapter));
this.rippleInstance = rippleFactory(
this.root,
new MDCRippleFoundation(rippleAdapter),
);
}

override initialSyncWithDOM() {
Expand Down Expand Up @@ -124,8 +137,12 @@ export class MDCChipAction extends
this.root.removeAttribute(name);
},
setAttribute: (name, value) => {
safeElement.setPrefixedAttribute(
ALLOWED_ATTR_PREFIXES, this.root, name, value);
setElementPrefixedAttribute(
ALLOWED_ATTR_PREFIXES,
this.root,
name,
value,
);
},
};

Expand Down Expand Up @@ -171,14 +188,19 @@ export class MDCChipAction extends

private computeRippleClientRect(): DOMRect {
if (this.root.classList.contains(MDCChipActionCssClasses.PRIMARY_ACTION)) {
const chipRoot =
closest(this.root, `.${MDCChipActionCssClasses.CHIP_ROOT}`);
const chipRoot = closest(
this.root,
`.${MDCChipActionCssClasses.CHIP_ROOT}`,
);
// Return the root client rect since it's better than nothing
if (!chipRoot) return this.root.getBoundingClientRect();
const graphicWidth = window.getComputedStyle(chipRoot).getPropertyValue(
GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
const graphicWidth = window
.getComputedStyle(chipRoot)
.getPropertyValue(GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
return computePrimaryActionRippleClientRect(
chipRoot.getBoundingClientRect(), graphicWidth);
chipRoot.getBoundingClientRect(),
graphicWidth,
);
}

return this.root.getBoundingClientRect();
Expand Down
42 changes: 28 additions & 14 deletions packages/mdc-switch/deprecated/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,16 @@ import {MDCRipple} from '@material/ripple/component';
import {MDCRippleFoundation} from '@material/ripple/foundation';
import {MDCRippleCapableSurface} from '@material/ripple/types';
import {safeAttrPrefix} from 'safevalues';
import {safeElement} from 'safevalues/dom';
import {setElementPrefixedAttribute} from 'safevalues/dom';

import {MDCSwitchAdapter} from './adapter';
import {MDCSwitchFoundation} from './foundation';

/** MDC Switch */
export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
MDCRippleCapableSurface {
export class MDCSwitch
extends MDCComponent<MDCSwitchFoundation>
implements MDCRippleCapableSurface
{
static override attachTo(root: HTMLElement) {
return new MDCSwitch(root);
}
Expand Down Expand Up @@ -76,13 +78,17 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
removeClass: (className) => {
this.root.classList.remove(className);
},
setNativeControlChecked: (checked) => this.nativeControl.checked =
checked,
setNativeControlDisabled: (disabled) => this.nativeControl.disabled =
disabled,
setNativeControlChecked: (checked) =>
(this.nativeControl.checked = checked),
setNativeControlDisabled: (disabled) =>
(this.nativeControl.disabled = disabled),
setNativeControlAttr: (attr, value) => {
safeElement.setPrefixedAttribute(
[safeAttrPrefix`aria-`], this.nativeControl, attr, value);
setElementPrefixedAttribute(
[safeAttrPrefix`aria-`],
this.nativeControl,
attr,
value,
);
},
};
return new MDCSwitchFoundation(adapter);
Expand Down Expand Up @@ -110,8 +116,9 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements

private createRipple(): MDCRipple {
const {RIPPLE_SURFACE_SELECTOR} = MDCSwitchFoundation.strings;
const rippleSurface =
this.root.querySelector<HTMLElement>(RIPPLE_SURFACE_SELECTOR)!;
const rippleSurface = this.root.querySelector<HTMLElement>(
RIPPLE_SURFACE_SELECTOR,
)!;

// DO NOT INLINE this variable. For backward compatibility, foundations take
// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
Expand All @@ -123,14 +130,21 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
},
computeBoundingRect: () => rippleSurface.getBoundingClientRect(),
deregisterInteractionHandler: <K extends EventType>(
eventType: K, handler: SpecificEventListener<K>) => {
eventType: K,
handler: SpecificEventListener<K>,
) => {
this.nativeControl.removeEventListener(
eventType, handler, applyPassive());
eventType,
handler,
applyPassive(),
);
},
isSurfaceActive: () => matches(this.nativeControl, ':active'),
isUnbounded: () => true,
registerInteractionHandler: <K extends EventType>(
eventType: K, handler: SpecificEventListener<K>) => {
eventType: K,
handler: SpecificEventListener<K>,
) => {
this.nativeControl.addEventListener(eventType, handler, applyPassive());
},
removeClass: (className: string) => {
Expand Down
Loading

0 comments on commit 810e22d

Please sign in to comment.