diff options
Diffstat (limited to 'packages/demobank-ui/src/components')
17 files changed, 206 insertions, 238 deletions
diff --git a/packages/demobank-ui/src/components/AsyncButton.tsx b/packages/demobank-ui/src/components/AsyncButton.tsx index 0c4305668..eec11f4a1 100644 --- a/packages/demobank-ui/src/components/AsyncButton.tsx +++ b/packages/demobank-ui/src/components/AsyncButton.tsx @@ -19,10 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ComponentChildren, h, VNode } from 'preact'; -import { useLayoutEffect, useRef } from 'preact/hooks'; +import { ComponentChildren, h, VNode } from "preact"; +import { useLayoutEffect, useRef } from "preact/hooks"; // import { LoadingModal } from "../modal"; -import { useAsync } from '../hooks/async'; +import { useAsync } from "../hooks/async"; // import { Translate } from "../../i18n"; type Props = { @@ -44,20 +44,16 @@ export function AsyncButton({ const buttonRef = useRef<HTMLButtonElement>(null); useLayoutEffect(() => { - if (grabFocus) - buttonRef.current?.focus(); - + if (grabFocus) buttonRef.current?.focus(); }, [grabFocus]); // if (isSlow) { // return <LoadingModal onCancel={cancel} />; // } - if (isLoading) - return <button class="button">Loading...</button>; - + if (isLoading) return <button class="button">Loading...</button>; return ( - <span data-tooltip={rest['data-tooltip']} style={{ marginLeft: 5 }}> + <span data-tooltip={rest["data-tooltip"]} style={{ marginLeft: 5 }}> <button {...rest} ref={buttonRef} onClick={request} disabled={disabled}> {children} </button> diff --git a/packages/demobank-ui/src/components/FileButton.tsx b/packages/demobank-ui/src/components/FileButton.tsx index dba86ccbf..7fad7f03a 100644 --- a/packages/demobank-ui/src/components/FileButton.tsx +++ b/packages/demobank-ui/src/components/FileButton.tsx @@ -1,5 +1,5 @@ -import { h, VNode } from 'preact'; -import { useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useRef, useState } from "preact/hooks"; const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; @@ -23,13 +23,12 @@ export function FileButton(props: Props): VNode { </button> <input ref={fileInputRef} - style={{ display: 'none' }} + style={{ display: "none" }} type="file" onChange={(e) => { const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) - return props.onChange(undefined); - + if (!f || f.length != 1) return props.onChange(undefined); + console.log(f); if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { setSizeError(true); @@ -39,7 +38,7 @@ export function FileButton(props: Props): VNode { return f[0].arrayBuffer().then((b) => { const content = new Uint8Array(b).reduce( (data, byte) => data + String.fromCharCode(byte), - '', + "", ); return props.onChange({ content, diff --git a/packages/demobank-ui/src/components/Notifications.tsx b/packages/demobank-ui/src/components/Notifications.tsx index 09329442a..e34550386 100644 --- a/packages/demobank-ui/src/components/Notifications.tsx +++ b/packages/demobank-ui/src/components/Notifications.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; +import { h, VNode } from "preact"; export interface Notification { message: string; @@ -27,7 +27,7 @@ export interface Notification { type: MessageType; } -export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'; +export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS"; interface Props { notifications: Notification[]; @@ -36,16 +36,16 @@ interface Props { function messageStyle(type: MessageType): string { switch (type) { - case 'INFO': - return 'message is-info'; - case 'WARN': - return 'message is-warning'; - case 'ERROR': - return 'message is-danger'; - case 'SUCCESS': - return 'message is-success'; - default: - return 'message'; + case "INFO": + return "message is-info"; + case "WARN": + return "message is-warning"; + case "ERROR": + return "message is-danger"; + case "SUCCESS": + return "message is-success"; + default: + return "message"; } } diff --git a/packages/demobank-ui/src/components/QR.tsx b/packages/demobank-ui/src/components/QR.tsx index ee5b73c69..f154ddebe 100644 --- a/packages/demobank-ui/src/components/QR.tsx +++ b/packages/demobank-ui/src/components/QR.tsx @@ -14,14 +14,14 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { h, VNode } from 'preact'; -import { useEffect, useRef } from 'preact/hooks'; -import qrcode from 'qrcode-generator'; +import { h, VNode } from "preact"; +import { useEffect, useRef } from "preact/hooks"; +import qrcode from "qrcode-generator"; export function QR({ text }: { text: string }): VNode { const divRef = useRef<HTMLDivElement>(null); useEffect(() => { - const qr = qrcode(0, 'L'); + const qr = qrcode(0, "L"); qr.addData(text); qr.make(); if (divRef.current) @@ -33,14 +33,14 @@ export function QR({ text }: { text: string }): VNode { return ( <div style={{ - width: '100%', - display: 'flex', - flexDirection: 'column', - alignItems: 'left', + width: "100%", + display: "flex", + flexDirection: "column", + alignItems: "left", }} > <div - style={{ width: '50%', minWidth: 200, maxWidth: 300 }} + style={{ width: "50%", minWidth: 200, maxWidth: 300 }} ref={divRef} /> </div> diff --git a/packages/demobank-ui/src/components/fields/DateInput.tsx b/packages/demobank-ui/src/components/fields/DateInput.tsx index 06ec4b6a7..22a83c93c 100644 --- a/packages/demobank-ui/src/components/fields/DateInput.tsx +++ b/packages/demobank-ui/src/components/fields/DateInput.tsx @@ -1,7 +1,7 @@ -import { format, subYears } from 'date-fns'; -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; -import { DatePicker } from '../picker/DatePicker'; +import { format, subYears } from "date-fns"; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; +import { DatePicker } from "../picker/DatePicker"; export interface DateInputProps { label: string; @@ -16,13 +16,11 @@ export interface DateInputProps { export function DateInput(props: DateInputProps): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const [opened, setOpened] = useState(false); - const value = props.bind[0] || ''; + const value = props.bind[0] || ""; const [dirty, setDirty] = useState(false); const showError = dirty && props.error; @@ -43,12 +41,10 @@ export function DateInput(props: DateInputProps): VNode { <p class="control"> <input type="text" - class={showError ? 'input is-danger' : 'input'} + class={showError ? "input is-danger" : "input"} value={value} onKeyPress={(e) => { - if (e.key === 'Enter' && props.onConfirm) - props.onConfirm() - + if (e.key === "Enter" && props.onConfirm) props.onConfirm(); }} onInput={(e) => { const text = e.currentTarget.value; @@ -81,7 +77,7 @@ export function DateInput(props: DateInputProps): VNode { closeFunction={() => setOpened(false)} dateReceiver={(d) => { setDirty(true); - const v = format(d, 'yyyy-MM-dd'); + const v = format(d, "yyyy-MM-dd"); props.bind[1](v); }} /> diff --git a/packages/demobank-ui/src/components/fields/EmailInput.tsx b/packages/demobank-ui/src/components/fields/EmailInput.tsx index 8b64264ed..2a22b26e8 100644 --- a/packages/demobank-ui/src/components/fields/EmailInput.tsx +++ b/packages/demobank-ui/src/components/fields/EmailInput.tsx @@ -1,5 +1,5 @@ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { label: string; @@ -14,9 +14,7 @@ export interface TextInputProps { export function EmailInput(props: TextInputProps): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const value = props.bind[0]; const [dirty, setDirty] = useState(false); @@ -37,18 +35,16 @@ export function EmailInput(props: TextInputProps): VNode { required placeholder={props.placeholder} type="email" - class={showError ? 'input is-danger' : 'input'} + class={showError ? "input is-danger" : "input"} onKeyPress={(e) => { - if (e.key === 'Enter' && props.onConfirm) - props.onConfirm() - + if (e.key === "Enter" && props.onConfirm) props.onConfirm(); }} onInput={(e) => { setDirty(true); props.bind[1]((e.target as HTMLInputElement).value); }} ref={inputRef} - style={{ display: 'block' }} + style={{ display: "block" }} /> </div> {showError && <p class="help is-danger">{props.error}</p>} diff --git a/packages/demobank-ui/src/components/fields/FileInput.tsx b/packages/demobank-ui/src/components/fields/FileInput.tsx index 17413b907..79cd76f30 100644 --- a/packages/demobank-ui/src/components/fields/FileInput.tsx +++ b/packages/demobank-ui/src/components/fields/FileInput.tsx @@ -18,8 +18,8 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; @@ -42,9 +42,7 @@ export interface FileInputProps { export function FileInput(props: FileInputProps): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const fileInputRef = useRef<HTMLInputElement>(null); @@ -56,9 +54,7 @@ export function FileInput(props: FileInputProps): VNode { <div class="icon is-small "> <i class="mdi mdi-folder" /> </div> - <span> - {props.label} - </span> + <span>{props.label}</span> </a> {props.tooltip && ( <span class="icon has-tooltip-right" data-tooltip={props.tooltip}> @@ -69,15 +65,14 @@ export function FileInput(props: FileInputProps): VNode { <div class="control"> <input ref={fileInputRef} - style={{ display: 'none' }} + style={{ display: "none" }} type="file" // name={String(name)} onChange={(e) => { const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) - return props.onChange(undefined); - - console.log(f) + if (!f || f.length != 1) return props.onChange(undefined); + + console.log(f); if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { setSizeError(true); return props.onChange(undefined); @@ -87,10 +82,14 @@ export function FileInput(props: FileInputProps): VNode { const b64 = btoa( new Uint8Array(b).reduce( (data, byte) => data + String.fromCharCode(byte), - '', + "", ), ); - return props.onChange({content: `data:${f[0].type};base64,${b64}`, name: f[0].name, type: f[0].type}); + return props.onChange({ + content: `data:${f[0].type};base64,${b64}`, + name: f[0].name, + type: f[0].type, + }); }); }} /> diff --git a/packages/demobank-ui/src/components/fields/ImageInput.tsx b/packages/demobank-ui/src/components/fields/ImageInput.tsx index 98457af21..c190de9a9 100644 --- a/packages/demobank-ui/src/components/fields/ImageInput.tsx +++ b/packages/demobank-ui/src/components/fields/ImageInput.tsx @@ -18,19 +18,17 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; -import emptyImage from '../../assets/empty.png'; -import { TextInputProps } from './TextInput'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; +import emptyImage from "../../assets/empty.png"; +import { TextInputProps } from "./TextInput"; const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; export function ImageInput(props: TextInputProps): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const value = props.bind[0]; @@ -59,14 +57,13 @@ export function ImageInput(props: TextInputProps): VNode { /> <input ref={image} - style={{ display: 'none' }} + style={{ display: "none" }} type="file" name={String(name)} onChange={(e) => { const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) - return onChange(emptyImage); - + if (!f || f.length != 1) return onChange(emptyImage); + if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { setSizeError(true); return onChange(emptyImage); @@ -76,7 +73,7 @@ export function ImageInput(props: TextInputProps): VNode { const b64 = btoa( new Uint8Array(b).reduce( (data, byte) => data + String.fromCharCode(byte), - '', + "", ), ); return onChange(`data:${f[0].type};base64,${b64}` as any); diff --git a/packages/demobank-ui/src/components/fields/NumberInput.tsx b/packages/demobank-ui/src/components/fields/NumberInput.tsx index 881c61c57..1a54d24b6 100644 --- a/packages/demobank-ui/src/components/fields/NumberInput.tsx +++ b/packages/demobank-ui/src/components/fields/NumberInput.tsx @@ -1,5 +1,5 @@ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { label: string; @@ -14,9 +14,7 @@ export interface TextInputProps { export function PhoneNumberInput(props: TextInputProps): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const value = props.bind[0]; const [dirty, setDirty] = useState(false); @@ -36,18 +34,16 @@ export function PhoneNumberInput(props: TextInputProps): VNode { value={value} type="tel" placeholder={props.placeholder} - class={showError ? 'input is-danger' : 'input'} + class={showError ? "input is-danger" : "input"} onKeyPress={(e) => { - if (e.key === 'Enter' && props.onConfirm) - props.onConfirm() - + if (e.key === "Enter" && props.onConfirm) props.onConfirm(); }} onInput={(e) => { setDirty(true); props.bind[1]((e.target as HTMLInputElement).value); }} ref={inputRef} - style={{ display: 'block' }} + style={{ display: "block" }} /> </div> {showError && <p class="help is-danger">{props.error}</p>} diff --git a/packages/demobank-ui/src/components/fields/TextInput.tsx b/packages/demobank-ui/src/components/fields/TextInput.tsx index 5cc9f32ad..cc7104cf5 100644 --- a/packages/demobank-ui/src/components/fields/TextInput.tsx +++ b/packages/demobank-ui/src/components/fields/TextInput.tsx @@ -1,8 +1,8 @@ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { - inputType?: 'text' | 'number' | 'multiline' | 'password'; + inputType?: "text" | "number" | "multiline" | "password"; label: string; grabFocus?: boolean; disabled?: boolean; @@ -16,13 +16,11 @@ export interface TextInputProps { const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { - if (grabFocus) - inputRef.current?.focus(); - + if (grabFocus) inputRef.current?.focus(); }, [grabFocus]); - return inputType === 'multiline' ? ( - <textarea {...rest} rows={5} ref={inputRef} style={{ height: 'unset' }} /> + return inputType === "multiline" ? ( + <textarea {...rest} rows={5} ref={inputRef} style={{ height: "unset" }} /> ) : ( <input {...rest} type={inputType} ref={inputRef} /> ); @@ -49,17 +47,15 @@ export function TextInput(props: TextInputProps): VNode { grabFocus={props.grabFocus} disabled={props.disabled} placeholder={props.placeholder} - class={showError ? 'input is-danger' : 'input'} + class={showError ? "input is-danger" : "input"} onKeyPress={(e: any) => { - if (e.key === 'Enter' && props.onConfirm) - props.onConfirm(); - + if (e.key === "Enter" && props.onConfirm) props.onConfirm(); }} onInput={(e: any) => { setDirty(true); props.bind[1]((e.target as HTMLInputElement).value); }} - style={{ display: 'block' }} + style={{ display: "block" }} /> </div> {showError && <p class="help is-danger">{props.error}</p>} diff --git a/packages/demobank-ui/src/components/menu/LangSelector.tsx b/packages/demobank-ui/src/components/menu/LangSelector.tsx index 221237a5b..69d6ee64a 100644 --- a/packages/demobank-ui/src/components/menu/LangSelector.tsx +++ b/packages/demobank-ui/src/components/menu/LangSelector.tsx @@ -19,23 +19,23 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, Fragment } from 'preact'; -import { useCallback, useEffect, useState } from 'preact/hooks'; -import langIcon from '../../assets/icons/languageicon.svg'; -import { useTranslationContext } from '../../context/translation'; -import { strings as messages } from '../../i18n/strings'; +import { h, VNode, Fragment } from "preact"; +import { useCallback, useEffect, useState } from "preact/hooks"; +import langIcon from "../../assets/icons/languageicon.svg"; +import { useTranslationContext } from "../../context/translation"; +import { strings as messages } from "../../i18n/strings"; type LangsNames = { [P in keyof typeof messages]: string; }; const names: LangsNames = { - es: 'Español [es]', - en: 'English [en]', - fr: 'Français [fr]', - de: 'Deutsch [de]', - sv: 'Svenska [sv]', - it: 'Italiano [it]', + es: "Español [es]", + en: "English [en]", + fr: "Français [fr]", + de: "Deutsch [de]", + sv: "Svenska [sv]", + it: "Italiano [it]", }; function getLangName(s: keyof LangsNames | string): string { @@ -47,36 +47,38 @@ function getLangName(s: keyof LangsNames | string): string { export function LangSelectorLikePy(): VNode { const [updatingLang, setUpdatingLang] = useState(false); const { lang, changeLanguage } = useTranslationContext(); - const [hidden, setHidden] = useState(true) + const [hidden, setHidden] = useState(true); useEffect(() => { - function bodyKeyPress(event:KeyboardEvent) { - if (event.code === 'Escape') - setHidden(true); - + function bodyKeyPress(event: KeyboardEvent) { + if (event.code === "Escape") setHidden(true); } - function bodyOnClick(event:Event) { + function bodyOnClick(event: Event) { setHidden(true); } - document.body.addEventListener('click', bodyOnClick) - document.body.addEventListener('keydown', bodyKeyPress as any) + document.body.addEventListener("click", bodyOnClick); + document.body.addEventListener("keydown", bodyKeyPress as any); return () => { - document.body.removeEventListener('keydown', bodyKeyPress as any) - document.body.removeEventListener('click', bodyOnClick) - } - },[]) + document.body.removeEventListener("keydown", bodyKeyPress as any); + document.body.removeEventListener("click", bodyOnClick); + }; + }, []); return ( <Fragment> - <button name="language" onClick={(ev) => { - setHidden(h => !h); - ev.stopPropagation(); - }}> + <button + name="language" + onClick={(ev) => { + setHidden((h) => !h); + ev.stopPropagation(); + }} + > {getLangName(lang)} </button> - <div id="lang" class={hidden ? 'hide' : ''}> + <div id="lang" class={hidden ? "hide" : ""}> <div style="position: relative; overflow: visible;"> <div class="nav" - style="position: absolute; max-height: 60vh; overflow-y: scroll"> + style="position: absolute; max-height: 60vh; overflow-y: scroll" + > {Object.keys(messages) .filter((l) => l !== lang) .map((l) => ( @@ -88,7 +90,8 @@ export function LangSelectorLikePy(): VNode { onClick={() => { changeLanguage(l); setUpdatingLang(false); - }}> + }} + > {getLangName(l)} </a> ))} diff --git a/packages/demobank-ui/src/components/menu/NavigationBar.tsx b/packages/demobank-ui/src/components/menu/NavigationBar.tsx index 9e540213d..d344875eb 100644 --- a/packages/demobank-ui/src/components/menu/NavigationBar.tsx +++ b/packages/demobank-ui/src/components/menu/NavigationBar.tsx @@ -19,9 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import logo from '../../assets/logo.jpeg'; -import { LangSelectorLikePy as LangSelector } from './LangSelector'; +import { h, VNode } from "preact"; +import logo from "../../assets/logo.jpeg"; +import { LangSelectorLikePy as LangSelector } from "./LangSelector"; interface Props { onMobileMenu: () => void; diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx index 7f9981a1c..d7833df5a 100644 --- a/packages/demobank-ui/src/components/menu/SideBar.tsx +++ b/packages/demobank-ui/src/components/menu/SideBar.tsx @@ -19,8 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import { Translate } from '../../i18n'; +import { h, VNode } from "preact"; +import { Translate } from "../../i18n"; interface Props { mobile?: boolean; @@ -28,9 +28,9 @@ interface Props { export function Sidebar({ mobile }: Props): VNode { // const config = useConfigContext(); - const config = { version: 'none' }; + const config = { version: "none" }; // FIXME: add replacement for __VERSION__ with the current version - const process = { env: { __VERSION__: '0.0.0' } }; + const process = { env: { __VERSION__: "0.0.0" } }; return ( <aside class="aside is-placed-left is-expanded"> diff --git a/packages/demobank-ui/src/components/menu/index.tsx b/packages/demobank-ui/src/components/menu/index.tsx index 07e1c5265..99d0f7646 100644 --- a/packages/demobank-ui/src/components/menu/index.tsx +++ b/packages/demobank-ui/src/components/menu/index.tsx @@ -14,11 +14,11 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { ComponentChildren, Fragment, h, VNode } from 'preact'; -import Match from 'preact-router/match'; -import { useEffect, useState } from 'preact/hooks'; -import { NavigationBar } from './NavigationBar'; -import { Sidebar } from './SideBar'; +import { ComponentChildren, Fragment, h, VNode } from "preact"; +import Match from "preact-router/match"; +import { useEffect, useState } from "preact/hooks"; +import { NavigationBar } from "./NavigationBar"; +import { Sidebar } from "./SideBar"; interface MenuProps { title: string; @@ -47,7 +47,7 @@ export function Menu({ title }: MenuProps): VNode { return ( <WithTitle title={titleWithSubtitle}> <div - class={mobileOpen ? 'has-aside-mobile-expanded' : ''} + class={mobileOpen ? "has-aside-mobile-expanded" : ""} onClick={() => setMobileOpen(false)} > <NavigationBar @@ -82,11 +82,11 @@ export function NotificationCard({ <div class="column is-12"> <article class={ - n.type === 'ERROR' - ? 'message is-danger' - : n.type === 'WARN' - ? 'message is-warning' - : 'message is-info' + n.type === "ERROR" + ? "message is-danger" + : n.type === "WARN" + ? "message is-warning" + : "message is-info" } > <div class="message-header"> @@ -132,4 +132,4 @@ export interface Notification { } export type ValueOrFunction<T> = T | ((p: T) => T); -export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'; +export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS"; diff --git a/packages/demobank-ui/src/components/picker/DatePicker.tsx b/packages/demobank-ui/src/components/picker/DatePicker.tsx index 94dbc9458..ba53578ef 100644 --- a/packages/demobank-ui/src/components/picker/DatePicker.tsx +++ b/packages/demobank-ui/src/components/picker/DatePicker.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, Component } from 'preact'; +import { h, Component } from "preact"; interface Props { closeFunction?: () => void; @@ -37,36 +37,36 @@ interface State { const now = new Date(); const monthArrShortFull = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", ]; const monthArrShort = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", ]; -const dayArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; +const dayArr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const yearArr: number[] = []; @@ -83,10 +83,10 @@ export class DatePicker extends Component<Props, State> { dayClicked(e: any) { const element = e.target; // the actual element clicked - if (element.innerHTML === '') return false; // don't continue if <span /> empty + if (element.innerHTML === "") return false; // don't continue if <span /> empty // get date from clicked element (gets attached when rendered) - const date = new Date(element.getAttribute('data-value')); + const date = new Date(element.getAttribute("data-value")); // update the state this.setState({ currentDate: date }); @@ -131,40 +131,37 @@ export class DatePicker extends Component<Props, State> { * Display previous month by updating state */ displayPrevMonth() { - if (this.state.displayedMonth <= 0) + if (this.state.displayedMonth <= 0) this.setState({ displayedMonth: 11, displayedYear: this.state.displayedYear - 1, }); - else + else this.setState({ displayedMonth: this.state.displayedMonth - 1, }); - } /** * Display next month by updating state */ displayNextMonth() { - if (this.state.displayedMonth >= 11) + if (this.state.displayedMonth >= 11) this.setState({ displayedMonth: 0, displayedYear: this.state.displayedYear + 1, }); - else + else this.setState({ displayedMonth: this.state.displayedMonth + 1, }); - } /** * Display the selected month (gets fired when clicking on the date string) */ displaySelectedMonth() { - if (this.state.selectYearMode) - this.toggleYearSelector(); + if (this.state.selectYearMode) this.toggleYearSelector(); else { if (!this.state.currentDate) return false; this.setState({ @@ -194,7 +191,7 @@ export class DatePicker extends Component<Props, State> { this.passDateToParent(this.state.currentDate); } passDateToParent(date: Date) { - if (typeof this.props.dateReceiver === 'function') + if (typeof this.props.dateReceiver === "function") this.props.dateReceiver(date); this.closeDatePicker(); } @@ -229,22 +226,18 @@ export class DatePicker extends Component<Props, State> { } render() { - const { - currentDate, - displayedMonth, - displayedYear, - selectYearMode, - } = this.state; + const { currentDate, displayedMonth, displayedYear, selectYearMode } = + this.state; return ( <div> - <div class={`datePicker ${this.props.opened && 'datePicker--opened'}`}> + <div class={`datePicker ${this.props.opened && "datePicker--opened"}`}> <div class="datePicker--titles"> <h3 style={{ color: selectYearMode - ? 'rgba(255,255,255,.87)' - : 'rgba(255,255,255,.57)', + ? "rgba(255,255,255,.87)" + : "rgba(255,255,255,.57)", }} onClick={this.toggleYearSelector} > @@ -253,12 +246,12 @@ export class DatePicker extends Component<Props, State> { <h2 style={{ color: !selectYearMode - ? 'rgba(255,255,255,.87)' - : 'rgba(255,255,255,.57)', + ? "rgba(255,255,255,.87)" + : "rgba(255,255,255,.57)", }} onClick={this.displaySelectedMonth} > - {dayArr[currentDate.getDay()]},{' '} + {dayArr[currentDate.getDay()]},{" "} {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()} </h2> </div> @@ -267,7 +260,7 @@ export class DatePicker extends Component<Props, State> { <nav> <span onClick={this.displayPrevMonth} class="icon"> <i - style={{ transform: 'rotate(180deg)' }} + style={{ transform: "rotate(180deg)" }} class="mdi mdi-forward" /> </span> @@ -284,7 +277,7 @@ export class DatePicker extends Component<Props, State> { {!selectYearMode && ( <div class="datePicker--calendar"> <div class="datePicker--dayNames"> - {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => ( + {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => ( <span key={i}>{day}</span> ))} </div> @@ -309,8 +302,8 @@ export class DatePicker extends Component<Props, State> { <span key={day.day} class={ - (day.today ? 'datePicker--today ' : '') + - (selected ? 'datePicker--selected' : '') + (day.today ? "datePicker--today " : "") + + (selected ? "datePicker--selected" : "") } disabled={!day.date} data-value={day.date} @@ -328,7 +321,7 @@ export class DatePicker extends Component<Props, State> { {(this.props.years || yearArr).map((year) => ( <span key={year} - class={year === displayedYear ? 'selected' : ''} + class={year === displayedYear ? "selected" : ""} onClick={this.changeDisplayedYear} > {year} @@ -343,7 +336,7 @@ export class DatePicker extends Component<Props, State> { class="datePicker--background" onClick={this.closeDatePicker} style={{ - display: this.props.opened ? 'block' : 'none', + display: this.props.opened ? "block" : "none", }} /> </div> @@ -351,6 +344,4 @@ export class DatePicker extends Component<Props, State> { } } -for (let i = 2010; i <= now.getFullYear() + 10; i++) - yearArr.push(i); - +for (let i = 2010; i <= now.getFullYear() + 10; i++) yearArr.push(i); diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx index 5e9930522..7f96cc15b 100644 --- a/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx +++ b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx @@ -19,16 +19,16 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, FunctionalComponent } from 'preact'; -import { useState } from 'preact/hooks'; -import { DurationPicker as TestedComponent } from './DurationPicker'; +import { h, FunctionalComponent } from "preact"; +import { useState } from "preact/hooks"; +import { DurationPicker as TestedComponent } from "./DurationPicker"; export default { - title: 'Components/Picker/Duration', + title: "Components/Picker/Duration", component: TestedComponent, argTypes: { - onCreate: { action: 'onCreate' }, - goBack: { action: 'goBack' }, + onCreate: { action: "onCreate" }, + goBack: { action: "goBack" }, }, }; diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.tsx index 542ff2f01..94f2326bc 100644 --- a/packages/demobank-ui/src/components/picker/DurationPicker.tsx +++ b/packages/demobank-ui/src/components/picker/DurationPicker.tsx @@ -19,10 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import { useState } from 'preact/hooks'; -import { useTranslator } from '../../i18n'; -import '../../scss/DurationPicker.scss'; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { useTranslator } from "../../i18n"; +import "../../scss/DurationPicker.scss"; export interface Props { hours?: boolean; @@ -129,9 +129,9 @@ function InputNumber({ }} style={{ width: 50, - border: 'none', - fontSize: 'inherit', - background: 'inherit', + border: "none", + fontSize: "inherit", + background: "inherit", }} /> ); @@ -157,7 +157,7 @@ function DurationColumn({ <div class="rdp-cell" key={value - 2}> {onDecrease && ( <button - style={{ width: '100%', textAlign: 'center', margin: 5 }} + style={{ width: "100%", textAlign: "center", margin: 5 }} onClick={onDecrease} > <span class="icon"> @@ -167,7 +167,7 @@ function DurationColumn({ )} </div> <div class="rdp-cell" key={value - 1}> - {value > min ? toTwoDigitString(value - 1) : ''} + {value > min ? toTwoDigitString(value - 1) : ""} </div> <div class="rdp-cell rdp-center" key={value}> {onChange ? ( @@ -182,13 +182,13 @@ function DurationColumn({ </div> <div class="rdp-cell" key={value + 1}> - {value < max ? toTwoDigitString(value + 1) : ''} + {value < max ? toTwoDigitString(value + 1) : ""} </div> <div class="rdp-cell" key={value + 2}> {onIncrease && ( <button - style={{ width: '100%', textAlign: 'center', margin: 5 }} + style={{ width: "100%", textAlign: "center", margin: 5 }} onClick={onIncrease} > <span class="icon"> @@ -204,8 +204,7 @@ function DurationColumn({ } function toTwoDigitString(n: number) { - if (n < 10) - return `0${n}`; - + if (n < 10) return `0${n}`; + return `${n}`; } |