mirror of
https://github.com/ente-io/ente.git
synced 2025-08-08 15:30:40 +00:00
Fin
This commit is contained in:
parent
71d77a62fd
commit
1d239d409f
@ -65,7 +65,7 @@ import {
|
|||||||
} from "react-select";
|
} from "react-select";
|
||||||
import AsyncSelect from "react-select/async";
|
import AsyncSelect from "react-select/async";
|
||||||
import { getAutoCompleteSuggestions } from "services/searchService";
|
import { getAutoCompleteSuggestions } from "services/searchService";
|
||||||
import { Collection } from "types/collection";
|
import { type Collection } from "types/collection";
|
||||||
|
|
||||||
interface SearchBarProps {
|
interface SearchBarProps {
|
||||||
isInSearchMode: boolean;
|
isInSearchMode: boolean;
|
||||||
@ -285,51 +285,49 @@ const SearchInputWrapper = styled(Box)`
|
|||||||
|
|
||||||
const useSelectStyles = ({
|
const useSelectStyles = ({
|
||||||
colors,
|
colors,
|
||||||
}: Theme): StylesConfig<SearchOption, false> => {
|
}: Theme): StylesConfig<SearchOption, false> => ({
|
||||||
return {
|
container: (style) => ({ ...style, flex: 1 }),
|
||||||
container: (style) => ({ ...style, flex: 1 }),
|
control: (style, { isFocused }) => ({
|
||||||
control: (style, { isFocused }) => ({
|
...style,
|
||||||
...style,
|
backgroundColor: colors.background.elevated,
|
||||||
backgroundColor: colors.background.elevated,
|
borderColor: isFocused ? colors.accent.A500 : "transparent",
|
||||||
borderColor: isFocused ? colors.accent.A500 : "transparent",
|
boxShadow: "none",
|
||||||
boxShadow: "none",
|
":hover": {
|
||||||
":hover": {
|
borderColor: colors.accent.A300,
|
||||||
borderColor: colors.accent.A300,
|
cursor: "text",
|
||||||
cursor: "text",
|
},
|
||||||
},
|
}),
|
||||||
}),
|
input: (styles) => ({ ...styles, color: colors.text.base }),
|
||||||
input: (styles) => ({ ...styles, color: colors.text.base }),
|
menu: (style) => ({
|
||||||
menu: (style) => ({
|
...style,
|
||||||
...style,
|
// Suppress the default margin at the top.
|
||||||
// Suppress the default margin at the top.
|
marginTop: "1px",
|
||||||
marginTop: "1px",
|
backgroundColor: colors.background.elevated,
|
||||||
backgroundColor: colors.background.elevated,
|
}),
|
||||||
}),
|
option: (style, { isFocused }) => ({
|
||||||
option: (style, { isFocused }) => ({
|
...style,
|
||||||
...style,
|
padding: 0,
|
||||||
padding: 0,
|
backgroundColor: "transparent !important",
|
||||||
backgroundColor: "transparent !important",
|
"& :hover": {
|
||||||
"& :hover": {
|
cursor: "pointer",
|
||||||
cursor: "pointer",
|
},
|
||||||
},
|
"& .main": {
|
||||||
"& .main": {
|
backgroundColor: isFocused && colors.background.elevated2,
|
||||||
backgroundColor: isFocused && "#202020",
|
},
|
||||||
},
|
"&:last-child .MuiDivider-root": {
|
||||||
"&:last-child .MuiDivider-root": {
|
display: "none",
|
||||||
display: "none",
|
},
|
||||||
},
|
}),
|
||||||
}),
|
placeholder: (style) => ({
|
||||||
placeholder: (style) => ({
|
...style,
|
||||||
...style,
|
color: colors.text.muted,
|
||||||
color: colors.text.muted,
|
whiteSpace: "nowrap",
|
||||||
whiteSpace: "nowrap",
|
}),
|
||||||
}),
|
// Hide some things we don't need.
|
||||||
// Hide some things we don't need.
|
dropdownIndicator: (style) => ({ ...style, display: "none" }),
|
||||||
dropdownIndicator: (style) => ({ ...style, display: "none" }),
|
indicatorSeparator: (style) => ({ ...style, display: "none" }),
|
||||||
indicatorSeparator: (style) => ({ ...style, display: "none" }),
|
clearIndicator: (style) => ({ ...style, display: "none" }),
|
||||||
clearIndicator: (style) => ({ ...style, display: "none" }),
|
});
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => (
|
const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => (
|
||||||
<SelectComponents.Control {...props}>
|
<SelectComponents.Control {...props}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user