smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated EditableText component

Browse source
This commit is contained in:
Israel Adura 2020-01-05 20:11:43 +00:00
parent bfcd33e6bb
commit 80b0b26f3f
2 changed files with 18 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/EditableText.tsx
View file

@ -1,51 +1,38 @@
import React, { createRef, Fragment, Component } from "react"; import React, { Fragment, Component } from "react";
type InputState = { type InputState = {
initialValue: string;
value: string; value: string;
edit: boolean; edit: boolean;
}; };
type Props = { type Props = {
value: string; value: string;
updateName: (name: string) => void; onChange: (value: string) => void;
}; };
export default class EditableInput extends Component<Props, InputState> { export default class EditableText extends Component<Props, InputState> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
const { value } = props;
this.state = { this.state = {
initialValue: value, value: props.value,
value,
edit: false edit: false
}; };
} }
private inputRef = createRef<HTMLInputElement>();
private handleEdit(e: React.ChangeEvent<HTMLInputElement>) { private handleEdit(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({ value: e.target.value }); this.setState({ value: e.target.value });
} }
private handleBlur() { private handleBlur() {
const { value, initialValue } = this.state; const { value } = this.state;
if (!value) { if (!value) {
this.setState({ value: initialValue, edit: false }); this.setState({ value: this.props.value, edit: false });
return; return;
} }
this.props.updateName(value); this.props.onChange(value);
this.setState({ edit: false, initialValue: value }); this.setState({ edit: false });
}
private focusInput() {
const input = this.inputRef.current;
if (input) {
input.focus();
}
this.setState({ edit: true });
} }
public render() { public render() {
@ -61,10 +48,13 @@ export default class EditableInput extends Component<Props, InputState> {
value={value} value={value}
onChange={e => this.handleEdit(e)} onChange={e => this.handleEdit(e)}
onBlur={() => this.handleBlur()} onBlur={() => this.handleBlur()}
ref={this.inputRef} autoFocus
/> />
) : ( ) : (
<span onClick={() => this.focusInput()} className="project-name"> <span
onClick={() => this.setState({ edit: true })}
className="project-name"
>
{value} {value}
</span> </span>
)} )}

12
src/index.tsx
View file

@ -626,7 +626,7 @@ function exportAsPNG({
} }
); );
saveFile(name, tempCanvas.toDataURL("image/png")); saveFile(`${name}.png`, tempCanvas.toDataURL("image/png"));
// clean up the DOM // clean up the DOM
if (tempCanvas !== canvas) tempCanvas.remove(); if (tempCanvas !== canvas) tempCanvas.remove();
@ -992,6 +992,7 @@ class App extends React.Component<{}, AppState> {
this.setState(savedState); this.setState(savedState);
} }
// set default name
if (!(savedState && savedState.name)) { if (!(savedState && savedState.name)) {
const name = `excalidraw-${getDateTime()}`; const name = `excalidraw-${getDateTime()}`;
this.setState({ name }); this.setState({ name });
@ -1147,8 +1148,6 @@ class App extends React.Component<{}, AppState> {
const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT; const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP; const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
const { name } = this.state;
return ( return (
<div <div
className="container" className="container"
@ -1194,13 +1193,12 @@ class App extends React.Component<{}, AppState> {
> >
<div className="sidePanel"> <div className="sidePanel">
<h4>Project name</h4> <h4>Project name</h4>
{name && ( {this.state.name && (
<EditableText <EditableText
value={name} value={this.state.name}
updateName={(name: string) => this.updateProjectName(name)} onChange={(name: string) => this.updateProjectName(name)}
/> />
)} )}
<h4>Shapes</h4> <h4>Shapes</h4>
<div className="panelTools"> <div className="panelTools">
{SHAPES.map(({ value, icon }) => ( {SHAPES.map(({ value, icon }) => (