128 lines
3.8 KiB
TypeScript
128 lines
3.8 KiB
TypeScript
import { forwardRef } from "react";
|
|
import { mauve, mauveDark, purple, purpleDark } from "@radix-ui/colors";
|
|
import { useTheme } from "next-themes";
|
|
import { styled } from "../stitches.config";
|
|
import dynamic from "next/dynamic";
|
|
import type { Props } from "react-select";
|
|
const SelectInput = dynamic(() => import("react-select"), { ssr: false });
|
|
|
|
// eslint-disable-next-line react/display-name
|
|
const Select = forwardRef<any, Props>((props, ref) => {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === "dark";
|
|
const colors: any = {
|
|
// primary: pink.pink9,
|
|
active: isDark ? purpleDark.purple9 : purple.purple9,
|
|
activeLight: isDark ? purpleDark.purple5 : purple.purple5,
|
|
primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
|
|
secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
|
|
background: isDark ? mauveDark.mauve4 : mauve.mauve4,
|
|
searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
|
|
bg: isDark ? mauveDark.mauve1 : mauve.mauve1,
|
|
dropDownBg: isDark ? mauveDark.mauve5 : mauve.mauve2,
|
|
mauve4: isDark ? mauveDark.mauve4 : mauve.mauve4,
|
|
mauve5: isDark ? mauveDark.mauve5 : mauve.mauve5,
|
|
mauve8: isDark ? mauveDark.mauve8 : mauve.mauve8,
|
|
mauve9: isDark ? mauveDark.mauve9 : mauve.mauve9,
|
|
mauve12: isDark ? mauveDark.mauve12 : mauve.mauve12,
|
|
border: isDark ? mauveDark.mauve10 : mauve.mauve10,
|
|
placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11,
|
|
};
|
|
colors.outline = colors.background;
|
|
colors.selected = colors.secondary;
|
|
return (
|
|
<SelectInput
|
|
ref={ref}
|
|
menuPosition={props.menuPosition || "fixed"}
|
|
styles={{
|
|
container: (provided) => {
|
|
return {
|
|
...provided,
|
|
position: "relative",
|
|
};
|
|
},
|
|
singleValue: (provided) => ({
|
|
...provided,
|
|
color: colors.mauve12,
|
|
}),
|
|
menu: (provided) => ({
|
|
...provided,
|
|
backgroundColor: colors.dropDownBg,
|
|
}),
|
|
control: (provided, state) => {
|
|
return {
|
|
...provided,
|
|
minHeight: 0,
|
|
border: "0px",
|
|
backgroundColor: colors.mauve4,
|
|
boxShadow: `0 0 0 1px ${
|
|
state.isFocused ? colors.border : colors.secondary
|
|
}`,
|
|
};
|
|
},
|
|
input: (provided) => {
|
|
return {
|
|
...provided,
|
|
color: "$text",
|
|
};
|
|
},
|
|
multiValue: (provided) => {
|
|
return {
|
|
...provided,
|
|
backgroundColor: colors.mauve8,
|
|
};
|
|
},
|
|
multiValueLabel: (provided) => {
|
|
return {
|
|
...provided,
|
|
color: colors.mauve12,
|
|
};
|
|
},
|
|
multiValueRemove: (provided) => {
|
|
return {
|
|
...provided,
|
|
":hover": {
|
|
background: colors.mauve9,
|
|
},
|
|
};
|
|
},
|
|
option: (provided, state) => {
|
|
return {
|
|
...provided,
|
|
color: colors.searchText,
|
|
backgroundColor:
|
|
state.isFocused
|
|
? colors.activeLight
|
|
: colors.dropDownBg,
|
|
":hover": {
|
|
backgroundColor: colors.active,
|
|
color: "#ffffff",
|
|
},
|
|
":selected": {
|
|
backgroundColor: "red",
|
|
},
|
|
};
|
|
},
|
|
indicatorSeparator: (provided) => {
|
|
return {
|
|
...provided,
|
|
backgroundColor: colors.secondary,
|
|
};
|
|
},
|
|
dropdownIndicator: (provided, state) => {
|
|
return {
|
|
...provided,
|
|
color: state.isFocused ? colors.border : colors.secondary,
|
|
":hover": {
|
|
color: colors.border,
|
|
},
|
|
};
|
|
},
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export default styled(Select, {});
|