Allow user to set file name (#145)
* Allow user to set file name * Add EditableText component Added editable text component and use component for project name edit. * rebased branch * Updated EditableText component * Set default project name * Move project name field away from the top section.pull/178/head
parent
7201198f23
commit
5f806474e3
@ -0,0 +1,68 @@
|
||||
import React, { Fragment, Component } from "react";
|
||||
|
||||
type InputState = {
|
||||
value: string;
|
||||
edit: boolean;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
};
|
||||
|
||||
export default class EditableText extends Component<Props, InputState> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
value: props.value,
|
||||
edit: false
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props: Props) {
|
||||
this.setState({ value: props.value });
|
||||
}
|
||||
|
||||
private handleEdit(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
this.setState({ value: e.target.value });
|
||||
}
|
||||
|
||||
private handleBlur() {
|
||||
const { value } = this.state;
|
||||
|
||||
if (!value) {
|
||||
this.setState({ value: this.props.value, edit: false });
|
||||
return;
|
||||
}
|
||||
this.props.onChange(value);
|
||||
this.setState({ edit: false });
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { value, edit } = this.state;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{edit ? (
|
||||
<input
|
||||
className="project-name-input"
|
||||
name="name"
|
||||
maxLength={25}
|
||||
value={value}
|
||||
onChange={e => this.handleEdit(e)}
|
||||
onBlur={() => this.handleBlur()}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={() => this.setState({ edit: true })}
|
||||
className="project-name"
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1,11 @@
|
||||
export const getDateTime = (): string => {
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
const hr = date.getHours();
|
||||
const min = date.getMinutes();
|
||||
const secs = date.getSeconds();
|
||||
|
||||
return `${year}${month}${day}${hr}${min}${secs}`;
|
||||
};
|
Loading…
Reference in New Issue