mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +08:00
Jack Franklin
e6e1b79912
It's clearer if a component's data setter is defined as:
set data(data: Foo)
Rather than:
set data(data: { x: string, y: number, ...})
And also has some advantages in that you can easily re-use the interface if you
define `get data`, and that you can use this type in Closure land if you need
to. So we are now enforcing at the component bridges level that each `set data`
follows this pattern.
This is part of a larger piece of work to ensure efficient DOM updates, because
exposing the interface like this lets us use it in a component's render code to
tell TypeScript how to type `.data=${{...}}` within lit-html.
Bug: 1129881
Change-Id: Ib8bbe5682acfed371d5afccc31727623167b1fdb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2422949
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
// Copyright 2020 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import * as LitHtml from '../third_party/lit-html/lit-html.js';
|
|
|
|
export interface ElementsPanelLinkData {
|
|
onElementRevealIconClick: (event?: Event) => void;
|
|
onElementRevealIconMouseEnter: (event?: Event) => void;
|
|
onElementRevealIconMouseLeave: (event?: Event) => void;
|
|
}
|
|
export class ElementsPanelLink extends HTMLElement {
|
|
private readonly shadow = this.attachShadow({mode: 'open'});
|
|
|
|
private onElementRevealIconClick: ((event?: Event) => void) = () => {};
|
|
private onElementRevealIconMouseEnter: ((event?: Event) => void) = () => {};
|
|
private onElementRevealIconMouseLeave: ((event?: Event) => void) = () => {};
|
|
|
|
set data(data: ElementsPanelLinkData) {
|
|
this.onElementRevealIconClick = data.onElementRevealIconClick;
|
|
this.onElementRevealIconMouseEnter = data.onElementRevealIconMouseEnter;
|
|
this.onElementRevealIconMouseLeave = data.onElementRevealIconMouseLeave;
|
|
this.update();
|
|
}
|
|
|
|
private update() {
|
|
this.render();
|
|
}
|
|
|
|
private render() {
|
|
// clang-format off
|
|
LitHtml.render(LitHtml.html`
|
|
<style>
|
|
.element-reveal-icon {
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 24px;
|
|
-webkit-mask-position:-140px 96px;
|
|
-webkit-mask-image: url(Images/largeIcons.svg);
|
|
background-color: rgb(110 110 110);
|
|
}
|
|
</style>
|
|
<span
|
|
class="element-reveal-icon"
|
|
@click=${this.onElementRevealIconClick}
|
|
@mouseenter=${this.onElementRevealIconMouseEnter}
|
|
@mouseleave=${this.onElementRevealIconMouseLeave}></span>
|
|
`, this.shadow);
|
|
// clang-format on
|
|
}
|
|
}
|
|
|
|
customElements.define('devtools-elements-panel-link', ElementsPanelLink);
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'devtools-elements-panel-link': ElementsPanelLink;
|
|
}
|
|
}
|