diff options
author | Sebastian <sebasjm@gmail.com> | 2021-10-27 15:13:35 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-10-27 15:13:35 -0300 |
commit | 32318a80f48bf52ca7823a0c055164f43bdaf1d6 (patch) | |
tree | 08ef42e65d1db93f3958dd75d39f4bff1d03d2b6 /packages/anastasis-webui/src/components/fields/LabeledInput.tsx | |
parent | 21b60c8f6ff69bf114779a767a3ac3355f69a34f (diff) | |
download | wallet-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.tsx | 40 |
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> - ); -} |