summaryrefslogtreecommitdiff
path: root/packages/anastasis-webui/src/components/fields/LabeledInput.tsx
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2021-10-27 15:13:35 -0300
committerSebastian <sebasjm@gmail.com>2021-10-27 15:13:35 -0300
commit32318a80f48bf52ca7823a0c055164f43bdaf1d6 (patch)
tree08ef42e65d1db93f3958dd75d39f4bff1d03d2b6 /packages/anastasis-webui/src/components/fields/LabeledInput.tsx
parent21b60c8f6ff69bf114779a767a3ac3355f69a34f (diff)
downloadwallet-core-32318a80f48bf52ca7823a0c055164f43bdaf1d6.tar.gz
wallet-core-32318a80f48bf52ca7823a0c055164f43bdaf1d6.tar.bz2
wallet-core-32318a80f48bf52ca7823a0c055164f43bdaf1d6.zip
working version with improved ui
Diffstat (limited to 'packages/anastasis-webui/src/components/fields/LabeledInput.tsx')
-rw-r--r--packages/anastasis-webui/src/components/fields/LabeledInput.tsx40
1 files changed, 0 insertions, 40 deletions
diff --git a/packages/anastasis-webui/src/components/fields/LabeledInput.tsx b/packages/anastasis-webui/src/components/fields/LabeledInput.tsx
deleted file mode 100644
index 96d634a4f..000000000
--- a/packages/anastasis-webui/src/components/fields/LabeledInput.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { h, VNode } from "preact";
-import { useLayoutEffect, useRef, useState } from "preact/hooks";
-
-export interface LabeledInputProps {
- label: string;
- grabFocus?: boolean;
- error?: string;
- tooltip?: string;
- bind: [string, (x: string) => void];
-}
-
-export function LabeledInput(props: LabeledInputProps): VNode {
- const inputRef = useRef<HTMLInputElement>(null);
- useLayoutEffect(() => {
- if (props.grabFocus) {
- inputRef.current?.focus();
- }
- }, [props.grabFocus]);
- const value = props.bind[0];
- const [dirty, setDirty] = useState(false)
- const showError = dirty && props.error
- return (<div class="field">
- <label class="label">
- {props.label}
- {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
- <i class="mdi mdi-information" />
- </span>}
- </label>
- <div class="control has-icons-right">
- <input
- value={value}
- class={showError ? 'input is-danger' : 'input'}
- onChange={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
- ref={inputRef}
- style={{ display: "block" }} />
- </div>
- {showError && <p class="help is-danger">{props.error}</p>}
- </div>
- );
-}