diff options
author | Boss Marco <bossm8@bfh.ch> | 2021-11-05 16:57:32 +0100 |
---|---|---|
committer | Boss Marco <bossm8@bfh.ch> | 2021-11-05 16:57:32 +0100 |
commit | 98064f0652d8e1dff661e3bb0d8791f4af04ad6f (patch) | |
tree | 5d278fd1fab17b0c4b03cc89bcea678edd3789d3 /packages/anastasis-webui/src/components/fields/TextInput.tsx | |
parent | 8d9386ac008e9d095867433bfc789d09bd93414d (diff) | |
parent | 842cc327541ebcfc761208f42bf5f74e22c6283c (diff) | |
download | wallet-core-98064f0652d8e1dff661e3bb0d8791f4af04ad6f.tar.gz wallet-core-98064f0652d8e1dff661e3bb0d8791f4af04ad6f.tar.bz2 wallet-core-98064f0652d8e1dff661e3bb0d8791f4af04ad6f.zip |
added some logging messages
Diffstat (limited to 'packages/anastasis-webui/src/components/fields/TextInput.tsx')
-rw-r--r-- | packages/anastasis-webui/src/components/fields/TextInput.tsx | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx new file mode 100644 index 000000000..c093689c5 --- /dev/null +++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx @@ -0,0 +1,42 @@ +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; + +export interface TextInputProps { + label: string; + grabFocus?: boolean; + error?: string; + placeholder?: string; + tooltip?: string; + bind: [string, (x: string) => void]; +} + +export function TextInput(props: TextInputProps): 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} + placeholder={props.placeholder} + class={showError ? 'input is-danger' : 'input'} + onInput={(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> + ); +} |