65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
EditableText as BlueprintEditableText,
|
|
Classes,
|
|
} from "@blueprintjs/core";
|
|
import styled from "styled-components";
|
|
type EditableTextProps = {
|
|
type: "text" | "password" | "email" | "phone" | "date";
|
|
defaultValue: string;
|
|
onTextChanged: (value: string) => void;
|
|
isEditing: boolean;
|
|
placeholder: string;
|
|
onChange?: (value: string) => void;
|
|
value?: string;
|
|
className?: string;
|
|
};
|
|
|
|
const EditableTextWrapper = styled.div<{ isEditing: boolean }>`
|
|
&& {
|
|
& .${Classes.EDITABLE_TEXT} {
|
|
border: ${props => (props.isEditing ? "1px solid #ccc" : "none")};
|
|
cursor: pointer;
|
|
padding: 5px 10px;
|
|
text-transform: none;
|
|
&:before,
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
& div.${Classes.EDITABLE_TEXT_INPUT} {
|
|
text-transform: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const EditableText = (props: EditableTextProps) => {
|
|
const [isEditing, setIsEditing] = useState(props.isEditing);
|
|
useEffect(() => {
|
|
setIsEditing(props.isEditing);
|
|
}, [props.isEditing]);
|
|
|
|
const edit = (e: any) => {
|
|
setIsEditing(true);
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
const onChange = (value: string) => {
|
|
props.onTextChanged(value);
|
|
setIsEditing(false);
|
|
};
|
|
return (
|
|
<EditableTextWrapper onDoubleClick={edit} isEditing={isEditing}>
|
|
<BlueprintEditableText
|
|
{...props}
|
|
disabled={!isEditing}
|
|
isEditing={isEditing}
|
|
onConfirm={onChange}
|
|
selectAllOnFocus
|
|
/>
|
|
</EditableTextWrapper>
|
|
);
|
|
};
|
|
|
|
export default EditableText;
|