witching to UIKit 3
This commit is contained in:
Fabian
@ -3,23 +3,34 @@ import Notes, { IVault, BaseNote } from "../../../notes";
|
||||
import AddButton from "../../AddButton";
|
||||
import Navigation from "../../../navigation";
|
||||
import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg"
|
||||
import ContextMenu from "../../modals/context";
|
||||
import Search from "feather-icons/dist/icons/search.svg"
|
||||
import ContextMenu from "../../context";
|
||||
import Notifications from "../../../notifications";
|
||||
import { Observable, Lock } from "@hibas123/utils";
|
||||
|
||||
|
||||
export default class EntryList extends Component<{ vault: Promise<IVault> }, { notes: BaseNote[], context: JSX.Element | undefined }> {
|
||||
rawNotes: BaseNote[];
|
||||
|
||||
private searchObservableServer = new Observable<void>(1000);
|
||||
private searchObservable = this.searchObservableServer.getPublicApi();
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log("Creating new Instance of EntryList")
|
||||
this.state = { notes: [], context: undefined }
|
||||
this.onDragOver = this.onDragOver.bind(this);
|
||||
this.onDrop = this.onDrop.bind(this);
|
||||
this.reloadNotes = this.reloadNotes.bind(this);
|
||||
this.searchChanged = this.searchChanged.bind(this);
|
||||
}
|
||||
vault: IVault;
|
||||
|
||||
reloadNotes(s?: boolean) {
|
||||
async reloadNotes(s?: boolean) {
|
||||
if (s)
|
||||
return;
|
||||
return new Promise(yes => this.vault.getAllNotes().then(entries => this.setState({ notes: entries }, yes)));
|
||||
this.rawNotes = await this.vault.getAllNotes();
|
||||
await this.applySearch(true);
|
||||
}
|
||||
|
||||
async componentWillMount() {
|
||||
@ -28,6 +39,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
document.body.addEventListener("dragover", this.onDragOver);
|
||||
document.body.addEventListener("drop", this.onDrop);
|
||||
Notes.syncObservable.subscribe(this.reloadNotes);
|
||||
this.searchObservable.subscribeCollect(() => this.applySearch());
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@ -36,6 +48,11 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
Notes.syncObservable.unsubscribe(this.reloadNotes);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log("ON Component Did mount", this.search);
|
||||
this.searchInput.value = this.search;
|
||||
}
|
||||
|
||||
onDragOver(evt: DragEvent) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
@ -60,7 +77,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
|
||||
let share;
|
||||
if ((window.navigator as any).share) {
|
||||
share = <button onClick={() => shareNote()}>
|
||||
share = <button class="uk-button" onClick={() => shareNote()}>
|
||||
share
|
||||
</button>
|
||||
let context = <ContextMenu event={evt} >
|
||||
@ -140,6 +157,74 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
}
|
||||
}
|
||||
|
||||
searchLock = new Lock();
|
||||
oldSearch = "";
|
||||
async applySearch(force = false) {
|
||||
const search = this.search.toLowerCase();
|
||||
if (!force && search === this.oldSearch) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.searchLock.locked)
|
||||
return;
|
||||
const lock = await this.searchLock.getLock();
|
||||
console.time("SearchOP");
|
||||
|
||||
let notes: BaseNote[] = [];
|
||||
|
||||
if (search === "") {
|
||||
notes = this.rawNotes;
|
||||
} else {
|
||||
const parts = search.split(" ");
|
||||
const match = (note: BaseNote) => {
|
||||
return parts.every(function (el) {
|
||||
return note.preview.toLowerCase().indexOf(el) > -1;
|
||||
});
|
||||
}
|
||||
|
||||
let elements: BaseNote[];
|
||||
if (!force && this.oldSearch && search.startsWith(this.oldSearch)) {
|
||||
elements = [...this.state.notes];
|
||||
} else {
|
||||
elements = [...this.rawNotes];
|
||||
}
|
||||
|
||||
|
||||
await new Promise(yes => {
|
||||
const idle = () => {
|
||||
window.requestIdleCallback(deadline => {
|
||||
let invTR = deadline.timeRemaining() <= 0;
|
||||
while ((deadline.timeRemaining() > 0 || invTR) && elements.length > 0) {
|
||||
let element = elements.shift();
|
||||
if (match(element)) {
|
||||
notes.push(element);
|
||||
}
|
||||
}
|
||||
if (elements.length > 0)
|
||||
idle();
|
||||
else
|
||||
yes();
|
||||
}, { timeout: 100 });
|
||||
}
|
||||
idle();
|
||||
})
|
||||
// notes = elements.filter(note => match(note));
|
||||
}
|
||||
|
||||
await new Promise(yes => this.setState({ notes }, yes));
|
||||
this.oldSearch = search;
|
||||
lock.release();
|
||||
console.timeEnd("SearchOP");
|
||||
}
|
||||
|
||||
search = "";
|
||||
searchChanged(evt: Event) {
|
||||
let input = evt.target as HTMLInputElement;
|
||||
this.search = input.value;
|
||||
this.searchObservableServer.send();
|
||||
}
|
||||
|
||||
searchInput: HTMLInputElement;
|
||||
render() {
|
||||
const open_entry = (id: string | null) => {
|
||||
Navigation.setPage("/vault", { id: this.vault.id }, { id, entry: "true" })
|
||||
@ -147,36 +232,37 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
|
||||
|
||||
let elms = this.state.notes.map(note => {
|
||||
let [first, second] = note.preview.split("\n", 2);
|
||||
return <div class="vault_vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
|
||||
return <li class="vault-vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
|
||||
open_entry(note._id)
|
||||
}}>
|
||||
<span>{first}</span><br />
|
||||
<span>{second}</span>
|
||||
</div>
|
||||
<div>{first}</div>
|
||||
<div>{second}</div>
|
||||
</li>
|
||||
})
|
||||
|
||||
|
||||
return <div>
|
||||
{this.state.context}
|
||||
<header>
|
||||
<div>
|
||||
<a class="button header_icon_button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
|
||||
</div>
|
||||
<h1 style="display:inline" class="button header_title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h1>
|
||||
<header class="uk-background-primary">
|
||||
{/* <div> */}
|
||||
<a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
|
||||
{/* </div> */}
|
||||
<h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h3>
|
||||
<span></span>
|
||||
{/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
|
||||
</header>
|
||||
<AddButton onClick={() => open_entry(null)} />
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
{elms}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container">
|
||||
<div style="display:flex;">
|
||||
<input class="uk-input" type="text" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
|
||||
<button class="uk-button" style="padding: 0 10px;">
|
||||
<Search />
|
||||
</button>
|
||||
</div>
|
||||
<ul class="uk-list uk-list-divider">
|
||||
{elms}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user