mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-13 10:05:41 +08:00
Paul Lewis
9950e186c4
Please note: ESLint and Closure have different opinions on the necessity of imports, thus // eslint-disable-line no-unused-vars was added to imports used only for Closure types. Bug: 1006759 Change-Id: Idd32e12d23a636f1e0fdcb90742e4b706e3cef77 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1967134 Commit-Queue: Paul Lewis <aerotwist@chromium.org> Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
// Copyright 2018 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 {HBox} from './Widget.js';
|
|
|
|
export class SegmentedButton extends HBox {
|
|
constructor() {
|
|
super(true);
|
|
/** @type {!Map<string, !Element>} */
|
|
this._buttons = new Map();
|
|
|
|
/** @type {?string} */
|
|
this._selected = null;
|
|
this.registerRequiredCSS('ui/segmentedButton.css');
|
|
this.contentElement.classList.add('segmented-button');
|
|
}
|
|
|
|
/**
|
|
* @param {string} label
|
|
* @param {string} value
|
|
* @param {string=} tooltip
|
|
*/
|
|
addSegment(label, value, tooltip) {
|
|
const button = this.contentElement.createChild('button', 'segmented-button-segment');
|
|
button.textContent = label;
|
|
button.title = tooltip;
|
|
this._buttons.set(value, button);
|
|
button.addEventListener('click', () => this.select(value));
|
|
}
|
|
|
|
/**
|
|
* @param {string} value
|
|
*/
|
|
select(value) {
|
|
if (this._selected === value) {
|
|
return;
|
|
}
|
|
this._selected = value;
|
|
for (const key of this._buttons.keys()) {
|
|
this._buttons.get(key).classList.toggle('segmented-button-segment-selected', key === this._selected);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @return {?string}
|
|
*/
|
|
selected() {
|
|
return this._selected;
|
|
}
|
|
}
|