1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
/*
* SonarQube
* Copyright (C) 2009-2024 SonarSource SA
* mailto:info AT sonarsource DOT com
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
import tw from 'twin.macro';
import { getTabId, getTabPanelId } from '../helpers/tabs';
import { themeBorder, themeColor, themeContrast } from '../helpers/theme';
import { ButtonSecondary } from '../sonar-aligned/components/buttons';
import { Badge } from './Badge';
type ToggleButtonValueType = string | number | boolean;
export interface ToggleButtonsOption<T extends ToggleButtonValueType> {
counter?: number;
disabled?: boolean;
label: string | React.ReactNode;
value: T;
}
export interface ButtonToggleProps<T extends ToggleButtonValueType> {
disabled?: boolean;
label?: string;
onChange: (value: T) => void;
options: ReadonlyArray<ToggleButtonsOption<T>>;
role?: 'radiogroup' | 'tablist';
value?: T;
}
export function ToggleButton<T extends ToggleButtonValueType>(props: ButtonToggleProps<T>) {
const { disabled = false, label, options, value, role = 'radiogroup' } = props;
const isRadioGroup = role === 'radiogroup';
return (
<Wrapper aria-label={label} role={role}>
{options.map((option) => (
<OptionButton
aria-checked={isRadioGroup ? option.value === value : undefined}
aria-controls={isRadioGroup ? undefined : getTabPanelId(String(option.value))}
aria-current={option.value === value}
data-value={option.value}
disabled={disabled || option.disabled}
id={getTabId(String(option.value))}
key={option.value.toString()}
onClick={() => {
if (option.value !== value) {
props.onChange(option.value);
}
}}
role={isRadioGroup ? 'radio' : 'tab'}
selected={option.value === value}
>
{option.label}
{option.counter ? (
<Badge className="sw-ml-1" variant="counter">
{option.counter}
</Badge>
) : null}
</OptionButton>
))}
</Wrapper>
);
}
const Wrapper = styled.div`
border: ${themeBorder('default', 'toggleBorder')};
${tw`sw-inline-flex`}
${tw`sw-h-control`}
${tw`sw-box-border`}
${tw`sw-font-semibold`}
${tw`sw-rounded-2`}
`;
const OptionButton = styled(ButtonSecondary)<{ selected: boolean }>`
background: ${(props) => (props.selected ? themeColor('toggleHover') : themeColor('toggle'))};
color: ${(props) => (props.selected ? themeContrast('toggleHover') : themeContrast('toggle'))};
border: none;
height: auto;
${tw`sw-rounded-0`};
${tw`sw-truncate`};
&:first-of-type {
${tw`sw-rounded-l-2`};
}
&:last-of-type {
${tw`sw-rounded-r-2`};
}
&:not(:last-of-type) {
border-right: ${themeBorder('default', 'toggleBorder')};
}
&:hover {
background: ${themeColor('toggleHover')};
color: ${themeContrast('toggleHover')};
}
&:focus,
&:active {
outline: ${themeBorder('focus', 'toggleFocus')};
z-index: 1;
}
`;
|
