52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { Ico } from "components/Ico";
|
|
import { cIf, cJoin } from "helpers/className";
|
|
import { isDefinedAndNotEmpty } from "helpers/asserts";
|
|
|
|
/*
|
|
* ╭─────────────╮
|
|
* ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props {
|
|
value: string;
|
|
onChange: (newValue: string) => void;
|
|
className?: string;
|
|
name?: string;
|
|
placeholder?: string | null;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const TextInput = ({
|
|
value,
|
|
onChange,
|
|
className,
|
|
name,
|
|
placeholder,
|
|
disabled = false,
|
|
}: Props): JSX.Element => (
|
|
<div className={cJoin("relative", className)}>
|
|
<input
|
|
className="w-full"
|
|
type="text"
|
|
name={name}
|
|
value={value}
|
|
disabled={disabled}
|
|
placeholder={placeholder ?? undefined}
|
|
onChange={(event) => {
|
|
onChange(event.target.value);
|
|
}}
|
|
/>
|
|
{isDefinedAndNotEmpty(value) && (
|
|
<div className="absolute right-4 top-0 bottom-0 grid place-items-center">
|
|
<Ico
|
|
className={cJoin("!text-xs", cIf(disabled, "opacity-30 grayscale", "cursor-pointer"))}
|
|
icon="close"
|
|
onClick={() => !disabled && onChange("")}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|