aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/newlightbox/components/EditableText/EditableText.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2024-10-10 20:06:17 -0400
committerbobzel <zzzman@gmail.com>2024-10-10 20:06:17 -0400
commit962302d41ba5b086818f5db9ea5103c1e754b66f (patch)
treefe7b36ce2ac3c8276e4175e4dd8d5e223e1373a7 /src/client/views/newlightbox/components/EditableText/EditableText.tsx
parent3a35e2687e3c7b0c864dd4f00b1002ff088b56d3 (diff)
parent040a1c5fd3e80606793e65be3ae821104460511b (diff)
Merge branch 'master' into alyssa-starter
Diffstat (limited to 'src/client/views/newlightbox/components/EditableText/EditableText.tsx')
-rw-r--r--src/client/views/newlightbox/components/EditableText/EditableText.tsx73
1 files changed, 21 insertions, 52 deletions
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.tsx b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
index e9e7ca264..6273e1859 100644
--- a/src/client/views/newlightbox/components/EditableText/EditableText.tsx
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react'
-import './EditableText.scss'
-import { Size } from 'browndash-components'
+import * as React from 'react';
+import './EditableText.scss';
+import { Size } from 'browndash-components';
export interface IEditableTextProps {
- text: string
- placeholder?: string
- editing: boolean
- onEdit: (newText: string) => void
- setEditing: (editing: boolean) => void
- backgroundColor?: string
- size?: Size
- height?: number
+ text: string;
+ placeholder?: string;
+ editing: boolean;
+ onEdit: (newText: string) => void;
+ setEditing: (editing: boolean) => void;
+ backgroundColor?: string;
+ size?: Size;
+ height?: number;
}
/**
@@ -20,46 +20,15 @@ export interface IEditableTextProps {
* @returns
*/
export const EditableText = (props: IEditableTextProps) => {
- const {
- editing,
- height,
- size,
- text,
- onEdit,
- setEditing,
- backgroundColor,
- placeholder,
- } = props
+ const { editing, height, text, onEdit, setEditing, backgroundColor, placeholder } = props;
- const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- onEdit(event.target.value)
- }
+ const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ onEdit(event.target.value);
+ };
- return editing ? (
- <input
- style={{ background: backgroundColor, height: height }}
- placeholder={placeholder}
- size={1}
- className="lb-editableText"
- autoFocus
- onChange={handleOnChange}
- onBlur={() => setEditing(false)}
- defaultValue={text}
- ></input>
- ) : (
- <input
- style={{ background: backgroundColor, height: height }}
- placeholder={placeholder}
- size={1}
- className="lb-editableText"
- autoFocus
- onChange={handleOnChange}
- onBlur={() => setEditing(false)}
- defaultValue={text}
- ></input>
- // <div className="lb-displayText" onClick={(e) => {
- // e.stopPropagation()
- // setEditing(true)
- // }}>{text}</div>
- )
-}
+ return editing ? (
+ <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
+ ) : (
+ <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
+ );
+};