OpenServer/SecureNotes
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First Alpha

Browse Source
This commit is contained in:
Fabian
2019-03-24 21:25:08 -04:00
parent 3ef36ab6ca
commit 8b6c71247f
30 changed files with 636 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/modals/InputModal.tsx
View File

@ -23,7 +23,7 @@ export class InputModal extends Modal<string> {
render() {
return <Modal.BaseModal modal={this.props.modal}>
<fieldset style="border:none;">
<fieldset style="border:none; min-inline-size:0;">
<label for={this.rand}>{this.props.modal.fieldname}</label>
<input style="min-width: 85%" autofocus ref={elm => {
this.input = elm
@ -47,41 +47,4 @@ export class InputModal extends Modal<string> {
getComponent() {
return <InputModal.IMD modal={this} />
}
}
// export class InputModal extends Component<{ title: string, fieldname: string, type: "text" | "password", onResult: (result) => void }, {}> {
// input: HTMLInputElement;
// rand: string;
// constructor(props) {
// super(props);
// this.rand = Math.random().toString();
// }
// componentWillUnmount() {
// if (this.input)
// this.input.value = "";
// }
// render() {
// return <Modal title={this.props.title} onClose={() => this.props.onResult(null)}>
// <fieldset style="border:none;">
// <label for={this.rand}>{this.props.fieldname}</label>
// <input style="min-width: 85%" autofocus ref={elm => {
// this.input = elm
// if (this.input)
// setTimeout(() => this.input.focus(), 0)
// }} type={this.props.type} id={this.rand} placeholder={this.props.fieldname} onKeyDown={evt => {
// if (evt.keyCode === 13) {
// this.props.onResult(this.input.value)
// }
// }} />
// <div style="text-align: right;">
// <button class="primary" style="display: inline-block;" onClick={() => {
// this.props.onResult(this.input.value);
// }}>Enter</button>
// </div>
// </fieldset>
// </Modal>
// }
// }
}

62
src/components/modals/Modal.tsx
View File

@ -1,9 +1,10 @@
import Observable from "../../helper/observable";
import { Observable } from "@hibas123/utils";
import { h, Component } from "preact";
import CloseIcon from "feather-icons/dist/icons/x.svg";
export default abstract class Modal<T> {
// Static
private static modalObservableServer = new Observable<{ modal: Modal<any>, close: boolean }>(false);
private static modalObservableServer = new Observable<{ modal: Modal<any>, close: boolean }>();
public static modalObservable = Modal.modalObservableServer.getPublicApi();
@ -11,9 +12,12 @@ export default abstract class Modal<T> {
// Private
private onResult: (result: T | null) => void;
private closeOnResult: boolean;
// Protected
protected result(value: T | null) {
if (this.closeOnResult)
this.close()
if (this.onResult)
this.onResult(value);
}
@ -32,7 +36,8 @@ export default abstract class Modal<T> {
*
* Call close when successful
*/
public async getResult() {
public async getResult(close = true) {
this.closeOnResult = close;
this.show();
return new Promise<T | null>((yes) => this.onResult = yes);
}
@ -65,7 +70,12 @@ export default abstract class Modal<T> {
}
}}>
<div class="card" >
<h3 class="section">{this.props.modal.title}</h3>
<div class="section" style="display:flex;justify-content:space-between;">
<h3>{this.props.modal.title}</h3>
<h3>
<CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} style="height:calc(1rem * var(--heading-ratio) * var(--heading-ratio))" />
</h3>
</div>
{this.props.children}
</div>
</div>
@ -74,62 +84,24 @@ export default abstract class Modal<T> {
}
// export default abstract class Modal<T, S> extends Component<{}, S> {
// // Abstract
// protected abstract renderChilds(): JSX.Element;
// protected abstract title: string;
// render() {
// return <div class="modal_container" onClick={(evt) => {
// let path = evt.composedPath();
// if (!path.find(e => {
// let res = false;
// let s = (e as Element);
// if (s) {
// if (s.classList) {
// res = s.classList.contains("card")
// }
// }
// return res;
// })) {
// this.result(null)
// }
// }} onKeyDown={evt => {
// if (evt.keyCode === 27) {
// this.result(null)
// }
// }}>
// <div class="card" >
// <h3 class="section">{this.title}</h3>
// {this.renderChilds()}
// </div>
// </div>
// }
// }
export class ModalComponent extends Component<{}, { modal: Modal<any> | undefined, component: JSX.Element | undefined }>{
constructor(props) {
super(props);
this.onModal = this.onModal.bind(this);
}
onModal([{ modal, close }]: { modal: Modal<any>, close: boolean }[]) {
onModal({ modal, close }: { modal: Modal<any>, close: boolean }) {
if (!close && this.state.modal !== modal) {
this.setState({ modal: modal, component: modal.getComponent() })
}
else {
if (this.state.modal === modal) // Only close if the same
if (this.state.modal === modal && close) // Only close if the same
this.setState({ modal: undefined, component: undefined })
}
}
componentWillMount() {
Modal.modalObservable.subscribe(this.onModal, true);
Modal.modalObservable.subscribe(this.onModal);
}
componentWillUnmount() {

2
src/components/modals/YesNoModal.tsx
View File

@ -28,7 +28,7 @@ export class YesNoModal extends Modal<boolean> {
render() {
return <Modal.BaseModal modal={this.props.modal}>
<fieldset style="border:none;">
<fieldset style="border:none;min-inline-size:0;">
<div style="text-align: right;">
<button class="primary" style="display: inline-block;" onClick={() => {
this.props.modal.result(false);