diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-10 10:20:52 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-10 11:57:11 -0300 |
commit | a62deeef5d0cbe5fa98be390eac0e03bcae0f0b5 (patch) | |
tree | b7e5f4944b3c19bcdb267a95701f1b9ad6fdac16 /packages/anastasis-webui/src/components/fields/TextInput.tsx | |
parent | e03b0d1b9b60dbafe6b70db3bd07158cd65773e5 (diff) |
prettier
Diffstat (limited to 'packages/anastasis-webui/src/components/fields/TextInput.tsx')
-rw-r--r-- | packages/anastasis-webui/src/components/fields/TextInput.tsx | 45 |
1 files changed, 26 insertions, 19 deletions
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx index c093689c5..fd0c658ed 100644 --- a/packages/anastasis-webui/src/components/fields/TextInput.tsx +++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx @@ -18,25 +18,32 @@ export function TextInput(props: TextInputProps): VNode { } }, [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" }} /> + 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> - {showError && <p class="help is-danger">{props.error}</p>} - </div> ); } |