diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-15 11:18:58 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-15 11:18:58 -0300 |
commit | 1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 (patch) | |
tree | 99e8241a5eb5af4d752be93a460004bc0c6255aa /packages/taler-wallet-webextension/src/components/EditableText.tsx | |
parent | 9692f589c687a2ba39a705ca4238cf123f444c61 (diff) | |
download | wallet-core-1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5.tar.xz |
prettier
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/EditableText.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/EditableText.tsx | 66 |
1 files changed, 40 insertions, 26 deletions
diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx index 6f3388bf9..8b3e6d375 100644 --- a/packages/taler-wallet-webextension/src/components/EditableText.tsx +++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx @@ -25,25 +25,37 @@ interface Props { name: string; description?: string; } -export function EditableText({ name, value, onChange, label, description }: Props): JSX.Element { - const [editing, setEditing] = useState(false) - const ref = useRef<HTMLInputElement>(null) +export function EditableText({ + name, + value, + onChange, + label, + description, +}: Props): JSX.Element { + 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 = () => ( + <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 = () => ( + <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> + ); } return ( <div> @@ -54,16 +66,18 @@ export function EditableText({ name, value, onChange, label, description }: Prop {label} </label> <InputText /> - {description && <span - style={{ - color: "#383838", - fontSize: "smaller", - display: "block", - marginLeft: "2em", - }} - > - {description} - </span>} + {description && ( + <span + style={{ + color: "#383838", + fontSize: "smaller", + display: "block", + marginLeft: "2em", + }} + > + {description} + </span> + )} </div> ); } |