57 lines
1.1 KiB
TypeScript
57 lines
1.1 KiB
TypeScript
import { Editable } from "@chakra-ui/react";
|
|
import { FC } from "react";
|
|
|
|
interface InputProps {
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
defaultValue?: string;
|
|
placeholder?: string;
|
|
props?: any;
|
|
type?:string
|
|
isDisabled?: boolean;
|
|
}
|
|
const EditableInput: FC<InputProps> = ({
|
|
value,
|
|
onChange,
|
|
defaultValue,
|
|
placeholder,
|
|
type,
|
|
isDisabled,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<Editable.Root
|
|
{...props}
|
|
value={value}
|
|
onChange={() => onChange && onChange}
|
|
w={"100%"}
|
|
size={"sm"}
|
|
textAlign="start"
|
|
defaultValue={defaultValue || ""}
|
|
>
|
|
<Editable.Preview
|
|
bg={"#00000006"}
|
|
fontSize={"xs"}
|
|
w={"100%"}
|
|
bgSize={"sm"}
|
|
ps={3}
|
|
// _hover={{ backgroundColor: "#00000010" }}
|
|
/>
|
|
<Editable.Input
|
|
fontSize={"xs"}
|
|
placeholder={placeholder}
|
|
w={"100%"}
|
|
border={"#ccc 1px solid"}
|
|
type={type}
|
|
_focus={{ bg: "#02A0A015" }}
|
|
outline={"#007F33"}
|
|
bgSize={"xs"}
|
|
ps={3}
|
|
disabled={isDisabled}
|
|
/>
|
|
</Editable.Root>
|
|
);
|
|
};
|
|
|
|
export default EditableInput;
|