210 lines
5.8 KiB
TypeScript
210 lines
5.8 KiB
TypeScript
import { h, Component } from "preact";
|
|
import { IVault, ViewNote } from "../../../notes";
|
|
import { Trash2 as Trash, X, Save } from "preact-feather";
|
|
|
|
import Navigation from "../../../navigation";
|
|
import { YesNoModal } from "../../modals/YesNoModal";
|
|
import Notifications, { MessageType } from "../../../notifications";
|
|
|
|
const minRows = 3;
|
|
export default class EntryComponent extends Component<
|
|
{ vault: Promise<IVault>; id: string | undefined; note: string | undefined },
|
|
{ title: string; changed: boolean }
|
|
> {
|
|
private text: string = "";
|
|
private vault: IVault;
|
|
// private lineHeight: number = 24;
|
|
private note: ViewNote;
|
|
|
|
private rows: number = minRows;
|
|
|
|
private skip_save: boolean = false;
|
|
|
|
private inputElm: HTMLInputElement;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { changed: false, title: "" };
|
|
this.textAreaChange = this.textAreaChange.bind(this);
|
|
this.textAreaKeyPress = this.textAreaKeyPress.bind(this);
|
|
}
|
|
|
|
private toVault() {
|
|
history.back();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.inputElm.focus();
|
|
}
|
|
|
|
async componentWillMount() {
|
|
this.text = "";
|
|
this.vault = undefined;
|
|
this.note = undefined;
|
|
this.rows = minRows;
|
|
this.skip_save = false;
|
|
this.setState({ changed: false, title: "" });
|
|
try {
|
|
this.skip_save = false;
|
|
|
|
this.vault = await this.props.vault;
|
|
let note: ViewNote;
|
|
let changed = false;
|
|
if (this.props.id) note = await this.vault.getNote(this.props.id);
|
|
else {
|
|
note = this.vault.newNote();
|
|
if (this.props.note) {
|
|
note.__value = this.props.note;
|
|
changed = true;
|
|
}
|
|
}
|
|
|
|
if (!note) {
|
|
Notifications.sendNotification(
|
|
"Note not found!",
|
|
MessageType.ERROR
|
|
);
|
|
} else {
|
|
this.note = note;
|
|
this.text = note.__value;
|
|
let rows = this.getRows(this.text);
|
|
if (rows !== this.rows) {
|
|
this.rows = rows;
|
|
}
|
|
let [title] = this.text.split("\n", 1);
|
|
this.setState({ title, changed });
|
|
}
|
|
} catch (err) {
|
|
Notifications.sendError(err);
|
|
}
|
|
}
|
|
|
|
private async save() {
|
|
try {
|
|
if (this.state.changed) {
|
|
this.note.__value = this.text;
|
|
await this.vault.saveNote(this.note);
|
|
this.setState({ changed: false });
|
|
}
|
|
} catch (err) {
|
|
Notifications.sendError(err);
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (!this.skip_save) this.save();
|
|
}
|
|
|
|
strToNr(value: string) {
|
|
let match = value.match(/\d/g);
|
|
return Number(match.join(""));
|
|
}
|
|
|
|
getRows(value: string) {
|
|
const lines = (value.match(/\r?\n/g) || "").length + 1;
|
|
return Math.max(lines + 1, minRows);
|
|
}
|
|
|
|
textAreaChange(evt: KeyboardEvent) {
|
|
if (evt.keyCode === 17 || evt.keyCode === 27) return; //No character, so not relevant for this function
|
|
if (!this.state.changed && this.textAreaKeyPress(evt))
|
|
this.setState({ changed: true });
|
|
|
|
let target = evt.target as HTMLTextAreaElement;
|
|
let value = target.value;
|
|
|
|
this.text = value;
|
|
|
|
let [title] = value.split("\n", 1);
|
|
if (title !== this.state.title) this.setState({ title });
|
|
|
|
let rows = this.getRows(value);
|
|
if (rows !== this.rows) {
|
|
target.rows = rows;
|
|
this.rows = rows;
|
|
}
|
|
}
|
|
|
|
async exitHandler() {
|
|
if (this.state.changed) {
|
|
let modal = new YesNoModal("Really want to quit?");
|
|
let res = await modal.getResult();
|
|
if (res === true) {
|
|
this.skip_save = true;
|
|
this.toVault();
|
|
}
|
|
} else this.toVault();
|
|
}
|
|
|
|
textAreaKeyPress(evt: KeyboardEvent) {
|
|
console.log(evt);
|
|
if ((evt.keyCode === 83 || evt.keyCode === 13) && evt.ctrlKey) {
|
|
evt.preventDefault();
|
|
this.save();
|
|
return false;
|
|
} else if (evt.keyCode === 27) {
|
|
evt.preventDefault();
|
|
this.exitHandler();
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
render() {
|
|
const save_handler = async () => {
|
|
await this.save();
|
|
Navigation.setPage(
|
|
"/vault",
|
|
{ id: this.vault.id },
|
|
{ entry: "false" },
|
|
true
|
|
);
|
|
this.toVault();
|
|
};
|
|
|
|
const delete_handler = async () => {
|
|
await this.vault.deleteNote(this.props.id);
|
|
this.toVault();
|
|
};
|
|
|
|
console.log("Rerender");
|
|
|
|
return (
|
|
<div>
|
|
<header class="header">
|
|
<a class="header-icon-button" onClick={() => this.exitHandler()}>
|
|
<X height={undefined} width={undefined} />
|
|
</a>
|
|
{this.state.changed ? (
|
|
<a
|
|
class="header-icon-button"
|
|
style="margin-left: 0.5em;"
|
|
onClick={() => save_handler()}
|
|
>
|
|
<Save height={undefined} width={undefined} />
|
|
</a>
|
|
) : undefined}
|
|
<h3 style="display:inline" class="button header-title">
|
|
{this.state.title}
|
|
</h3>
|
|
<a class="header-icon-button" onClick={() => delete_handler()}>
|
|
<Trash height={undefined} width={undefined} />
|
|
</a>
|
|
</header>
|
|
<div class="container">
|
|
<textarea
|
|
value={this.text}
|
|
rows={this.rows}
|
|
class="inp"
|
|
style="width:100%;"
|
|
onInput={this.textAreaChange}
|
|
onKeyDown={this.textAreaKeyPress}
|
|
onChange={this.textAreaChange}
|
|
ref={(elm) => (this.inputElm = elm)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|