diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-24 18:00:03 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-24 18:00:03 -0300 |
commit | db49eac6a76897edfaa650a986777d84d6a0c149 (patch) | |
tree | 7588225566863420c1cd601d05b3c8735b7de68f /packages/anastasis-webui/src/components/fields | |
parent | f49df12b441a2bd06520df42ddd41fc42f639147 (diff) | |
download | wallet-core-db49eac6a76897edfaa650a986777d84d6a0c149.tar.xz |
fix #7094
Diffstat (limited to 'packages/anastasis-webui/src/components/fields')
-rw-r--r-- | packages/anastasis-webui/src/components/fields/TextInput.tsx | 29 |
1 files changed, 20 insertions, 9 deletions
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx index efa95d84e..55643b4a1 100644 --- a/packages/anastasis-webui/src/components/fields/TextInput.tsx +++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx @@ -2,6 +2,7 @@ import { h, VNode } from "preact"; import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { + inputType?: "text" | "number" | "multiline" | "password"; label: string; grabFocus?: boolean; disabled?: boolean; @@ -12,13 +13,22 @@ export interface TextInputProps { bind: [string, (x: string) => void]; } -export function TextInput(props: TextInputProps): VNode { +const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode { const inputRef = useRef<HTMLInputElement>(null); useLayoutEffect(() => { - if (props.grabFocus) { + if (grabFocus) { inputRef.current?.focus(); } - }, [props.grabFocus]); + }, [grabFocus]); + + return inputType === "multiline" ? ( + <textarea {...rest} rows={5} ref={inputRef} style={{ height: "unset" }} /> + ) : ( + <input {...rest} type={inputType} ref={inputRef} /> + ); +}; + +export function TextInput(props: TextInputProps): VNode { const value = props.bind[0]; const [dirty, setDirty] = useState(false); const showError = dirty && props.error; @@ -33,21 +43,22 @@ export function TextInput(props: TextInputProps): VNode { )} </label> <div class="control has-icons-right"> - <input + <TextInputType + inputType={props.inputType} value={value} + grabFocus={props.grabFocus} disabled={props.disabled} placeholder={props.placeholder} class={showError ? "input is-danger" : "input"} - onKeyPress={(e) => { - if (e.key === 'Enter' && props.onConfirm) { - props.onConfirm() + onKeyPress={(e: any) => { + if (e.key === "Enter" && props.onConfirm) { + props.onConfirm(); } }} - onInput={(e) => { + onInput={(e: any) => { setDirty(true); props.bind[1]((e.target as HTMLInputElement).value); }} - ref={inputRef} style={{ display: "block" }} /> </div> |