fix: Update Dropdown (react-select) style

This commit is contained in:
Sokna Ly 2023-11-25 23:19:00 +07:00
parent ed5313b87d
commit 48def92f92

View File

@ -1,4 +1,4 @@
import Select from 'react-select'; import Select, { ControlProps, GroupBase, OptionProps } from 'react-select';
import React, { import React, {
FunctionComponent, FunctionComponent,
ReactElement, ReactElement,
@ -126,6 +126,29 @@ const Dropdown: FunctionComponent<ComponentProps> = (
onFocus={() => { onFocus={() => {
props.onFocus && props.onFocus(); props.onFocus && props.onFocus();
}} }}
classNames={{
control: (
state: ControlProps<any, boolean, GroupBase<any>>
): string => {
return state.isFocused
? '!border-indigo-500'
: 'border-grey-300';
},
option: (
state: OptionProps<any, boolean, GroupBase<any>>
): string => {
if (state.isDisabled) {
return 'bg-gray-100';
}
if (state.isSelected) {
return '!bg-indigo-500';
}
if (state.isFocused) {
return '!bg-indigo-100';
}
return '';
},
}}
isClearable={true} isClearable={true}
isSearchable={true} isSearchable={true}
placeholder={props.placeholder} placeholder={props.placeholder}