57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import React from "react";
|
||
import { Chip } from "./Chip";
|
||
// import "./chips.css";
|
||
|
||
|
||
export function ChipsInput(props: {
|
||
value: string[];
|
||
onChange: (value: string[]) => void;
|
||
placeholder?: string;
|
||
label?: React.ReactNode;
|
||
}) {
|
||
const { value, onChange, placeholder = "Введите и нажмите Enter", label } = props;
|
||
const [text, setText] = React.useState("");
|
||
|
||
const add = () => {
|
||
const v = text.trim();
|
||
if (!v) return;
|
||
if (value.includes(v)) {
|
||
setText("");
|
||
return;
|
||
}
|
||
onChange([...value, v]);
|
||
setText("");
|
||
};
|
||
|
||
return (
|
||
<div style={{ display: "grid", gap: 8 }}>
|
||
{label ? <div style={{ fontWeight: 700, fontSize: 13 }}>{label}</div> : null}
|
||
<div className="ui-chipsbox">
|
||
<div className="ui-chiprow">
|
||
{value.map((v) => (
|
||
<Chip key={v} label={v} onRemove={() => onChange(value.filter((x) => x !== v))} />
|
||
))}
|
||
<input
|
||
className="ui-chipsinput__input"
|
||
value={text}
|
||
placeholder={placeholder}
|
||
onChange={(e) => setText(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
add();
|
||
}
|
||
if (e.key === "Backspace" && text.length === 0 && value.length > 0) {
|
||
onChange(value.slice(0, -1));
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
<div style={{ color: "var(--ui-muted)", fontSize: 12 }}>
|
||
Подсказка: Enter — добавить, Backspace — удалить последний.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|