diff --git a/ripple/directive.ts b/ripple/directive.ts deleted file mode 100644 index 30a7c7d479..0000000000 --- a/ripple/directive.ts +++ /dev/null @@ -1,72 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {noChange} from 'lit'; -import {Directive, directive, DirectiveParameters, ElementPart, PartInfo, PartType} from 'lit/directive.js'; - -import {Ripple} from './lib/ripple.js'; - -/** - * Normalized ripple accessor type. - * - * Use with `await rippleFunction()` - */ -type RippleFunction = () => Ripple|null|Promise; - -class RippleDirective extends Directive { - private rippleGetter: RippleFunction = async () => null; - private element?: HTMLElement; - - constructor(partInfo: PartInfo) { - super(partInfo); - if (partInfo.type !== PartType.ELEMENT) { - throw new Error('The `ripple` directive must be used on an element'); - } - } - - render(ripple: RippleFunction|Promise) { - return noChange; - } - - // Use EventListenerObject::handleEvent interface to handle events without - // generating bound event handlers - async handleEvent(event: Event) { - const ripple = await this.rippleGetter(); - if (!ripple) { - return; - } - - await ripple.handleEvent(event); - } - - override update(part: ElementPart, [ripple]: DirectiveParameters) { - if (!this.element) { - // NOTE: addEventListener typing needs to be used with HTMLElements or a - // subclass - this.element = part.element as HTMLElement; - this.element.addEventListener('click', this); - this.element.addEventListener('contextmenu', this); - this.element.addEventListener('pointercancel', this); - this.element.addEventListener('pointerdown', this); - this.element.addEventListener('pointerenter', this); - this.element.addEventListener('pointerleave', this); - this.element.addEventListener('pointerup', this); - } - // Normalize given ripple accessor - this.rippleGetter = typeof ripple === 'function' ? ripple : () => ripple; - return noChange; - } -} - -/** - * Connects a Ripple element to a node that drives the interaction - * - * @param rippleGetter A function that returns an `md-ripple` element - * @param simulateKeyboardClick For elements that do not issue a click on - * keyboard interaction, pass `true` to enable press animations on Enter or - * Spacebar - */ -export const ripple = directive(RippleDirective); diff --git a/ripple/lib/ripple.ts b/ripple/lib/ripple.ts index 6f6e33ae39..6f2e6f52c9 100644 --- a/ripple/lib/ripple.ts +++ b/ripple/lib/ripple.ts @@ -114,11 +114,6 @@ export class Ripple extends LitElement implements Attachable { private readonly attachableController = new AttachableController(this, this.onControlChange.bind(this)); - // TODO(b/265337232): Remove once ripple directive is removed. This is used to - // prevent two animations while migrating ripples from the directive to the - // new attachment syntax. - private lastHandledEvent?: Event; - attach(control: HTMLElement) { this.attachableController.attach(control); } @@ -406,11 +401,6 @@ export class Ripple extends LitElement implements Attachable { /** @private */ async handleEvent(event: Event) { - if (this.lastHandledEvent === event) { - return; - } - - this.lastHandledEvent = event; switch (event.type) { case 'click': this.handleClick(); diff --git a/ripple/lib/ripple_test.ts b/ripple/lib/ripple_test.ts index 63cdfcfb1f..106c039ca8 100644 --- a/ripple/lib/ripple_test.ts +++ b/ripple/lib/ripple_test.ts @@ -6,11 +6,9 @@ import {html} from 'lit'; import {customElement} from 'lit/decorators.js'; -import {createRef, ref} from 'lit/directives/ref.js'; import {Environment} from '../../testing/environment.js'; import {Harness} from '../../testing/harness.js'; -import {ripple} from '../directive.js'; import {Ripple} from './ripple.js'; @@ -37,10 +35,9 @@ describe('Ripple', () => { const env = new Environment(); async function setupTest() { - const rippleRef = createRef(); const root = env.render(html` -
rippleRef.value || null)}> - +
+
`);