From b4bad2deaf93eff5858d903cd68b8fdd5a5eecd3 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 26 Oct 2022 14:50:50 -0300 Subject: pretty --- .../src/components/fields/DateInput.tsx | 22 +++++++--------- .../src/components/fields/EmailInput.tsx | 16 +++++------- .../src/components/fields/FileInput.tsx | 29 +++++++++++----------- .../src/components/fields/ImageInput.tsx | 21 +++++++--------- .../src/components/fields/NumberInput.tsx | 16 +++++------- .../src/components/fields/TextInput.tsx | 22 +++++++--------- 6 files changed, 53 insertions(+), 73 deletions(-) (limited to 'packages/demobank-ui/src/components/fields') 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(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 {

{ - 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(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" }} /> {showError &&

{props.error}

} 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(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const fileInputRef = useRef(null); @@ -56,9 +54,7 @@ export function FileInput(props: FileInputProps): VNode {
- - {props.label} - + {props.label} {props.tooltip && ( @@ -69,15 +65,14 @@ export function FileInput(props: FileInputProps): VNode {
{ 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(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 { /> { 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(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" }} />
{showError &&

{props.error}

} 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(null); useLayoutEffect(() => { - if (grabFocus) - inputRef.current?.focus(); - + if (grabFocus) inputRef.current?.focus(); }, [grabFocus]); - return inputType === 'multiline' ? ( -