51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { EditableText as BlueprintEditableText } 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;
|
|
};
|
|
|
|
const EditableTextWrapper = styled.div<{ isEditing: boolean }>`
|
|
&& {
|
|
& .bp3-editable-text {
|
|
border: ${props => (props.isEditing ? "1px solid #ccc" : "none")};
|
|
cursor: pointer;
|
|
padding: 5px 10px;
|
|
&:before,
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const EditableText = (props: EditableTextProps) => {
|
|
const [isEditing, setIsEditing] = useState(props.isEditing);
|
|
useEffect(() => {
|
|
setIsEditing(props.isEditing);
|
|
}, [props.isEditing]);
|
|
|
|
const edit = () => setIsEditing(true);
|
|
const onChange = (value: string) => {
|
|
props.onTextChanged(value);
|
|
setIsEditing(false);
|
|
};
|
|
return (
|
|
<EditableTextWrapper onDoubleClick={edit} isEditing={isEditing}>
|
|
<BlueprintEditableText
|
|
{...props}
|
|
disabled={false}
|
|
isEditing={true}
|
|
onConfirm={onChange}
|
|
selectAllOnFocus
|
|
/>
|
|
</EditableTextWrapper>
|
|
);
|
|
};
|
|
|
|
export default EditableText;
|