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
121
122
123
124
125
|
/*
* SonarQube
* Copyright (C) 2009-2023 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 { themeBorder, themeColor, themeContrast } from '../../helpers/theme';
import { InputSizeKeys } from '../../types/theme';
import { InputSelect, LabelValueSelectOption } from './InputSelect';
interface Props<V> {
className?: string;
components?: Parameters<typeof InputSelect>[0]['components'];
customValue?: JSX.Element;
isDisabled?: boolean;
menuIsOpen?: boolean;
onMenuClose?: () => void;
onMenuOpen?: () => void;
options: Array<LabelValueSelectOption<V>>;
setValue: ({ value }: LabelValueSelectOption<V>) => void;
size?: InputSizeKeys;
value: V;
}
export function DiscreetSelect<V>({
className,
customValue,
onMenuOpen,
options,
size = 'small',
setValue,
value,
...props
}: Props<V>) {
return (
<StyledSelect
className={className}
onChange={setValue}
onMenuOpen={onMenuOpen}
options={options}
placeholder={customValue}
size={size}
value={options.find((item) => item.value === value)}
{...props}
/>
);
}
const StyledSelect = styled(InputSelect)`
& {
width: inherit !important;
}
& .react-select__dropdown-indicator {
${tw`sw-p-0 sw-py-1`};
}
& .react-select__value-container {
${tw`sw-p-0`};
}
& .react-select__menu {
margin: 0;
}
& .react-select__control {
height: auto;
min-height: inherit;
color: ${themeContrast('discreetBackground')};
background: none;
outline: inherit;
box-shadow: none;
${tw`sw-border-none`};
${tw`sw-p-0`};
${tw`sw-cursor-pointer`};
${tw`sw-flex sw-items-center`};
${tw`sw-body-sm`};
${tw`sw-select-none`};
&:hover {
${tw`sw-border-none`};
outline: none;
color: ${themeColor('discreetButtonHover')};
border-color: inherit;
box-shadow: none;
& .react-select__single-value,
& .react-select__dropdown-indicator,
& .react-select__placeholder {
color: ${themeColor('discreetButtonHover')};
}
}
&:focus {
${tw`sw-rounded-1`};
color: ${themeColor('discreetButtonHover')};
background: ${themeColor('discreetBackground')};
outline: ${themeBorder('focus', 'discreetFocusBorder')};
border-color: inherit;
box-shadow: none;
}
}
& .react-select__control--is-focused,
& .react-select__control--menu-is-open {
${tw`sw-border-none`};
}
`;
|
