xref: /aosp_15_r20/external/perfetto/ui/src/widgets/segmented_buttons.ts (revision 6dbdd20afdafa5e3ca9b8809fa73465d530080dc)
1// Copyright (C) 2024 The Android Open Source Project
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//      http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14
15import m from 'mithril';
16import {Button} from './button';
17import {HTMLAttrs} from './common';
18
19interface IconOption {
20  // Icon buttons require an icon.
21  readonly icon: string;
22}
23
24interface LabelOption {
25  // Label buttons require a label.
26  readonly label: string;
27  // Label buttons can have an optional icon.
28  readonly icon?: string;
29}
30
31type Option = LabelOption | IconOption;
32
33export interface SegmentedButtonsAttrs extends HTMLAttrs {
34  // Options for segmented buttons.
35  readonly options: ReadonlyArray<Option>;
36
37  // The index of the selected button.
38  readonly selectedOption: number;
39
40  // Callback function which is called every time a
41  readonly onOptionSelected: (num: number) => void;
42
43  // Whether the segmented buttons is disabled.
44  // false by default.
45  readonly disabled?: boolean;
46}
47
48export class SegmentedButtons
49  implements m.ClassComponent<SegmentedButtonsAttrs>
50{
51  view({attrs}: m.CVnode<SegmentedButtonsAttrs>) {
52    const {options, selectedOption, disabled, onOptionSelected, ...htmlAttrs} =
53      attrs;
54    return m(
55      '.pf-segmented-buttons',
56      htmlAttrs,
57      options.map((o, i) =>
58        m(Button, {
59          ...o,
60          disabled: disabled,
61          active: i === selectedOption,
62          onclick: () => onOptionSelected(i),
63        }),
64      ),
65    );
66  }
67}
68