Spaces:
Build error
Build error
File size: 3,337 Bytes
0bfe2e3 |
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 126 |
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from 'react';
import Select, { StylesConfig } from 'react-select';
import FakeSelect from './FakeSelect';
export const selectStyles: StylesConfig = {
control: (baseStyles: any, state: { isFocused: boolean }) => ({
...baseStyles,
borderWidth: '0px',
backgroundColor: 'white',
borderRadius: 'var(--borderRadius)',
borderColor: 'gray',
outline: '0',
color: 'black',
margin: '10px 0 0 -0px',
transition: 'border-color 0.2s, box-shadow 0.2s',
boxShadow: state.isFocused ? '0 0 0 3px rgb(112, 112, 112)' : 'none',
'&:hover': {
borderColor: '#5c5c5c',
boxShadow: state.isFocused
? '0 0 0 3px rgb(128, 128, 128)'
: '0 0 0 2px rgb(161, 161, 161)',
},
}),
input: (baseStyles: any) => ({
...baseStyles,
color: 'var(--ifm-color-primary-lightest)',
}),
multiValue: (baseStyles: any) => ({
...baseStyles,
backgroundColor: 'rgb(26, 26, 26)',
borderRadius: 'var(--borderRadius)',
height: '25px',
display: 'flex',
alignItems: 'center',
padding: '3px',
}),
multiValueLabel: (baseStyles: any) => ({
...baseStyles,
color: 'white',
fontSize: '0.8rem',
}),
multiValueRemove: (baseStyles: any) => ({
...baseStyles,
color: 'white',
transition: 'color 0.2s',
'&:hover': {
backgroundColor: 'transparent',
color: 'rgb(141, 141, 141)',
cursor: 'pointer',
},
}),
menu: (baseStyles: any) => ({
...baseStyles,
color: 'white',
backgroundColor: 'white',
margin: '5px',
borderRadius: 'var(--borderRadius)',
}),
valueContainer: (baseStyles: any) => ({
...baseStyles,
}),
option: (baseStyles: any, state: { isFocused: any }) => ({
...baseStyles,
color: state.isFocused ? 'white' : 'black',
backgroundColor: state.isFocused ? 'rgb(68, 68, 68)' : 'white',
'&:hover': {
backgroundColor: 'rgb(68, 68, 68)', //'#9c9c9c',
},
'&:active': {
transition: 'background-color 0.4s, color 0.1s',
backgroundColor: 'rgb(26, 26, 26)',
color: 'white',
},
}),
};
interface MultiSelectProps {
options: { value: string; label: string }[];
values?: string[];
setValues: (values: string[]) => void;
}
const MultiSelect: React.FC<MultiSelectProps> = ({
options,
setValues,
values,
}) => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return (
<>
{isClient ? (
// https://github.com/JedWatson/react-select/issues/5859
<Select
isMulti
value={
values
? values
.map((value) =>
options.find((option) => option.value === value)
)
.filter(Boolean)
: undefined
}
closeMenuOnSelect={false}
options={options}
onChange={(selectedOptions: any) => {
const selectedLanguages = selectedOptions.map(
(option: any) => option.value
);
setValues(selectedLanguages);
}}
styles={selectStyles}
/>
) : (
<FakeSelect innerText="Select..." />
)}
</>
);
};
export default MultiSelect;
|