83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { useRecoilState } from "recoil";
|
|
import Select from "react-dropdown-select";
|
|
|
|
import { styleQueryAtom } from "../../state/atoms";
|
|
import { IconStyle } from "../../lib";
|
|
import "./StyleInput.css";
|
|
import { PencilLine } from "phosphor-react";
|
|
|
|
const options = [
|
|
{
|
|
key: "Thin",
|
|
value: IconStyle.THIN,
|
|
icon: <PencilLine size={24} weight="thin" />,
|
|
},
|
|
{
|
|
key: "Light",
|
|
value: IconStyle.LIGHT,
|
|
icon: <PencilLine size={24} weight="light" />,
|
|
},
|
|
{
|
|
key: "Regular",
|
|
value: IconStyle.REGULAR,
|
|
icon: <PencilLine size={24} weight="regular" />,
|
|
},
|
|
{
|
|
key: "Bold",
|
|
value: IconStyle.BOLD,
|
|
icon: <PencilLine size={24} weight="bold" />,
|
|
},
|
|
{
|
|
key: "Fill",
|
|
value: IconStyle.FILL,
|
|
icon: <PencilLine size={24} weight="fill" />,
|
|
},
|
|
{
|
|
key: "Duotone",
|
|
value: IconStyle.DUOTONE,
|
|
icon: <PencilLine size={24} weight="duotone" />,
|
|
},
|
|
];
|
|
|
|
type StyleInputProps = {};
|
|
|
|
const StyleInput: React.FC<StyleInputProps> = () => {
|
|
const [style, setStyle] = useRecoilState(styleQueryAtom);
|
|
void style;
|
|
|
|
// const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
|
// setStyle(event.target.value as IconStyle);
|
|
// };
|
|
|
|
return (
|
|
<Select
|
|
options={options}
|
|
values={[options[2]]}
|
|
searchable={false}
|
|
labelField="key"
|
|
onChange={(values) => setStyle(values[0].value as IconStyle)}
|
|
itemRenderer={({ item, itemIndex, state: { cursor, values }, methods }) => (
|
|
<span
|
|
role="option"
|
|
aria-selected={item.key === values[0].key}
|
|
className={`react-dropdown-select-item ${itemIndex === cursor ? "react-dropdown-select-item-active" : ""}`}
|
|
tabIndex={-1}
|
|
onClick={() => methods.addItem(item)}
|
|
>
|
|
{item.icon}
|
|
{item.key}
|
|
</span>
|
|
)}
|
|
contentRenderer={({ state: { values }, methods }) => (
|
|
<div className="react-dropdown-select-content" {...methods}>
|
|
{values[0].icon}
|
|
{values[0].key}
|
|
</div>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default StyleInput;
|