1
0
Fork 0

Port some elements to tsx.

This commit is contained in:
Kitteh 2021-05-23 14:33:41 +01:00
parent f002004c79
commit 36a5da4ff6
3 changed files with 90 additions and 0 deletions

View file

@ -7,6 +7,7 @@
"@babel/plugin-proposal-object-rest-spread": "^7.14.2",
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"@types/file-saver": "^2.0.2",
"@types/prismjs": "^1.16.5",
"@types/uikit": "^3.3.1",
"@typescript-eslint/eslint-plugin": "^4.24.0",

View file

@ -0,0 +1,69 @@
import { Component, JSX, createRef } from "preact";
import { addClipboardNotifications } from "../pageUtils";
import ClipboardJS from "clipboard";
import FileSaver from "file-saver";
import UIkit from "uikit";
import i18next from "i18next";
export type CopyableModalProps = {
name: string;
contentString: string;
};
export class CopyableModal extends Component<CopyableModalProps, unknown> {
ref = createRef();
copyButtonRef = createRef();
saveAsFile(): void {
const blob = new Blob([this.props.contentString], {
type: "text/plain;charset=utf-8",
});
FileSaver.saveAs(blob, "result.txt");
}
componentDidMount(): void {
const clipboard = new ClipboardJS(this.copyButtonRef.current);
addClipboardNotifications(clipboard, 600);
UIkit.modal(this.ref.current).show();
}
render(): JSX.Element {
return (
<div ref={this.ref} class="modal-section" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close />
<div class="uk-modal-header">
<h2>{this.props.name}</h2>
</div>
<div class="uk-modal-body">
<pre class="wrap-pre">{this.props.contentString}</pre>
</div>
<div class="uk-modal-footer uk-text-right">
<button
class="uk-button uk-button-primary"
type="button"
onClick={() => this.saveAsFile()}
>
{i18next.t("copy_modal_download_btn")}
</button>
<button
class="uk-button uk-button-primary"
ref={this.copyButtonRef}
type="button"
data-clipboard-text={this.props.contentString}
>
{i18next.t("copy_modal_copy_btn")}
</button>
<button
class="uk-button uk-button-secondary uk-modal-close"
type="button"
data-clipboard-text={this.props.contentString}
>
{i18next.t("copy_modal_close_btn")}
</button>
</div>
</div>
</div>
);
}
}

View file

@ -0,0 +1,20 @@
import { JSX } from "preact";
import i18next from "i18next";
export type FileUploadInputProps = {
name: string;
};
export function FileUploadInput(props: FileUploadInputProps): JSX.Element {
return (
<div uk-form-custom="target: true">
<a class="uk-form-icon" uk-icon="icon: upload" role="img" />
<input name={props.name} type="file" />
<input
class="uk-input uk-form-width-medium"
type="text"
placeholder={i18next.t("file_upload_input_btn")}
/>
</div>
);
}