Merge pull request #472 from trouble/refactor/sectionTitle

simplifies SectionTitle, addresses #471

src/admin/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.scss

@@ -1,46 +0,0 @@
-@import '../../../../../scss/styles.scss';
-
-.editable-block-title {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  max-width: 100%;
-  overflow-x: auto;
-
-  &__input-clone {
-    position: absolute;
-    top: 0; left: 0;
-    visibility: hidden;
-    white-space: pre;
-  }
-
-  &__input-clone,
-  input {
-    padding: base(.1) base(.2);
-    font-family: $font-body;
-    font-weight: 600;
-    margin-right: base(.5);
-    font-size: base(.75);
-    color: $color-dark-gray
-  }
-
-  input {
-    border: none;
-    width: 100%;
-    margin-left: base(.5);
-    background-color: transparent;
-
-    &:hover {
-      box-shadow: inset 0px -2px 0px -1px $color-light-gray;
-    }
-
-    &:hover,
-    &:focus {
-      outline: 0;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-}

src/admin/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.tsx

@@ -1,57 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import useFieldType from '../../../useFieldType';
-
-import './index.scss';
-
-const baseClass = 'editable-block-title';
-
-const EditableBlockTitle: React.FC<{ path: string }> = (props) => {
-  const { path } = props;
-  const inputRef = useRef(null);
-  const inputCloneRef = useRef(null);
-  const [inputWidth, setInputWidth] = useState(0);
-
-  const {
-    value,
-    setValue,
-  } = useFieldType({
-    path,
-  });
-
-  useEffect(() => {
-    setInputWidth(inputCloneRef.current.offsetWidth + 5);
-  }, [value]);
-
-  const onKeyDown = (e) => {
-    const blurKeys = [13, 27];
-    if (blurKeys.indexOf(e.keyCode) !== -1) inputRef.current.blur();
-  };
-
-  return (
-    <React.Fragment>
-      <div className={baseClass}>
-        <input
-          ref={inputRef}
-          id={path}
-          value={value as string || ''}
-          placeholder="Untitled"
-          type="text"
-          name={path}
-          onChange={setValue}
-          onKeyDown={onKeyDown}
-          style={{
-            width: `${inputWidth + 1}px`,
-          }}
-        />
-      </div>
-      <span
-        ref={inputCloneRef}
-        className={`${baseClass}__input-clone`}
-      >
-        {value || 'Untitled'}
-      </span>
-    </React.Fragment>
-  );
-};
-
-export default EditableBlockTitle;

src/admin/components/forms/DraggableSection/SectionTitle/index.scss

@@ -3,4 +3,31 @@
 .section-title {
   display: flex;
   align-items: center;
+  width: 100%;
+
+  &__input {
+    width: 100%;
+    color: $color-dark-gray;
+    background-color: transparent;
+    font-family: $font-body;
+    font-weight: 600;
+    font-size: base(.75);
+    padding: base(.1) base(.2);
+    margin-left: base(.5);
+    margin-right: base(.5);
+    border: none;
+
+    &:hover {
+      box-shadow: inset 0px -2px 0px -1px $color-light-gray;
+    }
+
+    &:hover,
+    &:focus {
+      outline: 0;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
 }

src/admin/components/forms/DraggableSection/SectionTitle/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import EditableBlockTitle from './EditableBlockTitle';
+import useFieldType from '../../useFieldType';
 import Pill from '../../../elements/Pill';
 import { Props } from './types';
 
@@ -8,7 +8,9 @@ import './index.scss';
 const baseClass = 'section-title';
 
 const SectionTitle: React.FC<Props> = (props) => {
-  const { label, ...remainingProps } = props;
+  const { label, path, readOnly } = props;
+
+  const { value, setValue } = useFieldType({ path });
 
   const classes = [
     baseClass,
@@ -17,7 +19,17 @@ const SectionTitle: React.FC<Props> = (props) => {
   return (
     <div className={classes}>
       <Pill pillStyle="light-gray">{label}</Pill>
-      <EditableBlockTitle {...remainingProps} />
+
+      <input
+        className={`${baseClass}__input`}
+        id={path}
+        value={value as string || ''}
+        placeholder="Untitled"
+        type="text"
+        name={path}
+        onChange={setValue}
+        readOnly={readOnly}
+      />
     </div>
   );
 };