You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
788 B
35 lines
788 B
2 years ago
|
import { useSelectorOptions } from "@/utilities";
|
||
|
import { FunctionComponent } from "react";
|
||
|
import { MultiSelector, MultiSelectorProps } from "./Selector";
|
||
|
|
||
|
export type ChipInputProps = Omit<
|
||
|
MultiSelectorProps<string>,
|
||
|
| "searchable"
|
||
|
| "creatable"
|
||
|
| "getCreateLabel"
|
||
|
| "onCreate"
|
||
|
| "options"
|
||
|
| "getkey"
|
||
|
>;
|
||
|
|
||
|
const ChipInput: FunctionComponent<ChipInputProps> = ({ ...props }) => {
|
||
|
const { value, onChange } = props;
|
||
|
|
||
|
const options = useSelectorOptions(value ?? [], (v) => v);
|
||
|
|
||
|
return (
|
||
|
<MultiSelector
|
||
|
{...props}
|
||
|
{...options}
|
||
|
creatable
|
||
|
searchable
|
||
|
getCreateLabel={(query) => `Add "${query}"`}
|
||
|
onCreate={(query) => {
|
||
|
onChange?.([...(value ?? []), query]);
|
||
|
}}
|
||
|
></MultiSelector>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default ChipInput;
|