DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-03-09 00:09:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(button): Create ripple lazily for buttons

Browse Source 
PiperOrigin-RevId: 493350615
This commit is contained in:
Daniel Freedman 2022-12-06 10:43:28 -08:00 committed by Copybara-Service
parent 07edf86432
commit ca88cd765e
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
button/lib/button.ts
View File

@ -14,6 +14,7 @@ import {html, LitElement, TemplateResult} from 'lit';
import {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';
import {ClassInfo, classMap} from 'lit/directives/class-map.js';
import {ifDefined} from 'lit/directives/if-defined.js';
import {when} from 'lit/directives/when.js';
import {html as staticHtml, literal} from 'lit/static-html.js';
import {ariaProperty} from '../../decorators/aria-property.js';
@ -55,10 +56,12 @@ export abstract class Button extends LitElement implements ButtonState {
@query('.md3-button') buttonElement!: HTMLElement;
@queryAsync('md-ripple') ripple!: Promise<MdRipple>;
@queryAsync('md-ripple') ripple!: Promise<MdRipple|null>;
@state() protected showFocusRing = false;
@state() protected showRipple = false;
@queryAssignedElements({slot: 'icon', flatten: true})
protected iconElement!: HTMLElement[]|null;
@ -67,6 +70,10 @@ export abstract class Button extends LitElement implements ButtonState {
* @soyAttributes buttonAttributes: .md3-button
*/
protected override render(): TemplateResult {
const getRipple = () => {
this.showRipple = true;
return this.ripple;
};
// TODO(b/237283903): Replace ifDefined(... || undefined) with ifTruthy(...)
return html`
<button
@ -78,10 +85,10 @@ export abstract class Button extends LitElement implements ButtonState {
@focus="${this.handleFocus}"
@blur="${this.handleBlur}"
@click="${this.handleClick}"
${ripple(this.ripple)}>
${ripple(getRipple)}>
${this.renderFocusRing()}
${this.renderOverlay()}
${this.renderRipple()}
${when(this.showRipple, () => this.renderRipple())}
${this.renderOutline()}
${this.renderTouchTarget()}
${this.renderLeadingIcon()}
@ -119,7 +126,7 @@ export abstract class Button extends LitElement implements ButtonState {
}
/** @soyTemplate */
protected renderRipple(): TemplateResult|string {
protected renderRipple(): TemplateResult {
return html`<md-ripple class="md3-button__ripple" ?disabled="${
this.disabled}"></md-ripple>`;
}

10
button/lib/link-button.ts
View File

@ -8,6 +8,7 @@ import {html, TemplateResult} from 'lit';
import {property} from 'lit/decorators.js';
import {ClassInfo, classMap} from 'lit/directives/class-map.js';
import {ifDefined} from 'lit/directives/if-defined.js';
import {when} from 'lit/directives/when.js';
import {ripple} from '../../ripple/directive.js';
@ -43,6 +44,10 @@ export abstract class LinkButton extends Button {
* @soyAttributes buttonAttributes: .md3-button
*/
protected override render(): TemplateResult {
const getRipple = () => {
this.showRipple = true;
return this.ripple;
};
return html`
<span class="md3-link-button-wrapper">
<a class="md3-button ${classMap(this.getRenderClasses())}"
@ -53,11 +58,10 @@ export abstract class LinkButton extends Button {
@blur="${this.handleBlur}"
@pointerdown="${this.handlePointerDown}"
@click="${this.handleClick}"
${ripple(this.ripple)}
>
${ripple(getRipple)}>
${this.renderFocusRing()}
${this.renderOverlay()}
${this.renderRipple()}
${when(this.showRipple, () => this.renderRipple())}
${this.renderOutline()}
${this.renderTouchTarget()}
${this.renderIcon()}