48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import "./ProjectName.css";
|
|
|
|
import React, { Component } from "react";
|
|
import { selectNode, removeSelection } from "../utils";
|
|
|
|
type Props = {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
label: string;
|
|
};
|
|
|
|
export class ProjectName extends Component<Props> {
|
|
private handleFocus = (e: React.FocusEvent<HTMLElement>) => {
|
|
selectNode(e.currentTarget);
|
|
};
|
|
|
|
private handleBlur = (e: React.FocusEvent<HTMLElement>) => {
|
|
const value = e.currentTarget.innerText.trim();
|
|
if (value !== this.props.value) this.props.onChange(value);
|
|
removeSelection();
|
|
};
|
|
|
|
private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
e.currentTarget.blur();
|
|
}
|
|
};
|
|
|
|
public render() {
|
|
return (
|
|
<span
|
|
suppressContentEditableWarning
|
|
contentEditable="true"
|
|
data-type="wysiwyg"
|
|
className="ProjectName"
|
|
role="textbox"
|
|
aria-label={this.props.label}
|
|
onBlur={this.handleBlur}
|
|
onKeyDown={this.handleKeyDown}
|
|
onFocus={this.handleFocus}
|
|
>
|
|
{this.props.value}
|
|
</span>
|
|
);
|
|
}
|
|
}
|