aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/newlightbox/components/EditableText/EditableText.tsx
diff options
context:
space:
mode:
authorNathan-SR <144961007+Nathan-SR@users.noreply.github.com>2025-03-11 17:43:05 +0100
committerNathan-SR <144961007+Nathan-SR@users.noreply.github.com>2025-03-11 17:43:05 +0100
commitfa937182bc93aa2c6faadda80ea998cdfd479b4e (patch)
treecba8e16edcccc6fd2932173484ac444cb79abea2 /src/client/views/newlightbox/components/EditableText/EditableText.tsx
parentcf91c46cfec6e3e36b9184764016f9c1b5c997d4 (diff)
parent04669ffeb163688c7aefd7b5face7998252abdca (diff)
Merge branch 'master' of https://github.com/brown-dash/Dash-Web into DocCreatorMenu-work
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..cff84e990 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 '@dash/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>
+ );
+};