diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-16 13:59:53 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-16 14:01:38 -0300 |
commit | a994009d2f094c4d9c12da68dac3abb28bdef4b3 (patch) | |
tree | e403a58663f81889982635ffb324f9739e6976b3 /packages/taler-wallet-webextension/src/components/EditableText.tsx | |
parent | c33ed919719845f518d6491ef37df6ae16820dd0 (diff) | |
download | wallet-core-a994009d2f094c4d9c12da68dac3abb28bdef4b3.tar.xz |
reserveCreated new design
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/EditableText.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/EditableText.tsx | 47 |
1 files changed, 25 insertions, 22 deletions
diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx index 8b3e6d375..72bfbe809 100644 --- a/packages/taler-wallet-webextension/src/components/EditableText.tsx +++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx @@ -14,9 +14,8 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { h } from "preact"; +import { h, VNode } from "preact"; import { useRef, useState } from "preact/hooks"; -import { JSX } from "preact/jsx-runtime"; interface Props { value: string; @@ -31,31 +30,35 @@ export function EditableText({ onChange, label, description, -}: Props): JSX.Element { +}: Props): VNode { const [editing, setEditing] = useState(false); const ref = useRef<HTMLInputElement>(null); let InputText; if (!editing) { - InputText = () => ( - <div style={{ display: "flex", justifyContent: "space-between" }}> - <p>{value}</p> - <button onClick={() => setEditing(true)}>edit</button> - </div> - ); + InputText = function InputToEdit(): VNode { + return ( + <div style={{ display: "flex", justifyContent: "space-between" }}> + <p>{value}</p> + <button onClick={() => setEditing(true)}>edit</button> + </div> + ); + }; } else { - InputText = () => ( - <div style={{ display: "flex", justifyContent: "space-between" }}> - <input value={value} ref={ref} type="text" id={`text-${name}`} /> - <button - onClick={() => { - if (ref.current) - onChange(ref.current.value).then((r) => setEditing(false)); - }} - > - confirm - </button> - </div> - ); + InputText = function InputEditing(): VNode { + return ( + <div style={{ display: "flex", justifyContent: "space-between" }}> + <input value={value} ref={ref} type="text" id={`text-${name}`} /> + <button + onClick={() => { + if (ref.current) + onChange(ref.current.value).then(() => setEditing(false)); + }} + > + confirm + </button> + </div> + ); + }; } return ( <div> |