Merge branch 'master' into sophie-ai-images

3 files changed, 100 insertions, 0 deletions

diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.scss b/src/client/views/newlightbox/components/EditableText/EditableText.scss
new file mode 100644
index 000000000..7828538ab
--- /dev/null
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.scss
@@ -0,0 +1,34 @@
+@import '../../NewLightboxStyles.scss';
+
+.lb-editableText,
+.lb-displayText {
+    padding: 4px 7px !important;
+    border: $standard-border !important;
+    border-color: $gray-l2 !important;
+}
+
+.lb-editableText {
+  -webkit-appearance: none;
+  overflow: hidden;
+  font-size: inherit;
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+  box-shadow: none !important;
+  background: none;
+
+  &:focus {
+    outline: none;
+    background-color: $blue-l1;
+  }
+}
+
+.lb-displayText {
+  cursor: text !important;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.tsx b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
new file mode 100644
index 000000000..e9e7ca264
--- /dev/null
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
@@ -0,0 +1,65 @@
+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
+}
+
+/**
+ * Editable Text is used for inline renaming of some text.
+ * It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it.
+ * @param props
+ * @returns
+ */
+export const EditableText = (props: IEditableTextProps) => {
+  const {
+    editing,
+    height,
+    size,
+    text,
+    onEdit,
+    setEditing,
+    backgroundColor,
+    placeholder,
+  } = props
+
+  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>
+  )
+}
diff --git a/src/client/views/newlightbox/components/EditableText/index.ts b/src/client/views/newlightbox/components/EditableText/index.ts
new file mode 100644
index 000000000..e3367b175
--- /dev/null
+++ b/src/client/views/newlightbox/components/EditableText/index.ts
@@ -0,0 +1 @@
+export * from './EditableText'