[DevTools] Support for adding props | Improved state/props value editing

packages/react-devtools-shared/src/devtools/utils.js

@@ -82,3 +82,16 @@ export function printStore(store: Store, includeWeight: boolean = false) {
 
   return snapshotLines.join('\n');
 }
+
+// We use JSON.parse to parse string values
+// e.g. 'foo' is not valid JSON but it is a valid string
+// so this method replaces e.g. 'foo' with "foo"
+export function sanitizeForParse(value: any) {
+  if (typeof value === 'string') {
+    if (value.charAt(0) === "'" && value.charAt(value.length - 1) === "'") {
+      return '"' + value.substr(1, value.length - 2) + '"';
+    }
+  }
+
+  return value;
+}

packages/react-devtools-shared/src/devtools/views/Components/EditableKey.css

@@ -0,0 +1,15 @@
+.Input {
+  width: 100px;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-attribute-name);
+  border-radius: 0.125rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}
+
+.Input:focus {
+  color: var(--color-attribute-editable-value);
+  background-color: var(--color-button-background-focus);
+  outline: none;
+}

packages/react-devtools-shared/src/devtools/views/Components/EditableKey.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, {useRef, useCallback, useEffect, useState} from 'react';
+import styles from './EditableKey.css';
+
+type OverrideKeyFn = (path: Array<string | number>, value: any) => void;
+
+type EditableKeyProps = {|
+  key?: string,
+  overrideKeyFn: OverrideKeyFn,
+|};
+
+export default function EditableKey({
+  key = '',
+  overrideKeyFn,
+}: EditableKeyProps) {
+  const [editableKey, setEditableKey] = useState(key);
+  const [isValid, setIsValid] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(
+    () => {
+      if (inputRef.current !== null) {
+        inputRef.current.focus();
+      }
+    },
+    [inputRef],
+  );
+
+  const handleChange = useCallback(
+    ({target}) => {
+      const value = target.value.trim();
+
+      if (value) {
+        setIsValid(true);
+      } else {
+        setIsValid(false);
+      }
+
+      setEditableKey(value);
+    },
+    [overrideKeyFn],
+  );
+
+  const handleKeyDown = useCallback(
+    event => {
+      // Prevent keydown events from e.g. change selected element in the tree
+      event.stopPropagation();
+
+      const eventKey = event.key;
+
+      if ((eventKey === 'Enter' || eventKey === 'Tab') && isValid) {
+        overrideKeyFn(editableKey);
+      } else if (eventKey === 'Escape') {
+        setEditableKey(key);
+      }
+    },
+    [editableKey, setEditableKey, isValid, key, overrideKeyFn],
+  );
+
+  return (
+    <input
+      className={styles.Input}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      ref={inputRef}
+      type="text"
+      value={editableKey}
+    />
+  );
+}

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css

@@ -19,7 +19,23 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
 }
-.Input:focus {
+
+.Invalid {
+  flex: 1 1;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-attribute-editable-value);
+  border-radius: 0.125rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  background-color: var(--color-background-invalid);
+  color: var(--color-text-invalid);
+
+  --color-border: var(--color-text-invalid);
+}
+
+.Input:focus,
+.Invalid:focus {
   background-color: var(--color-button-background-focus);
   outline: none;
 }

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js

@@ -7,10 +7,11 @@
  * @flow
  */
 
-import React, {Fragment, useCallback, useRef, useState} from 'react';
+import React, {Fragment, useEffect, useCallback, useRef, useState} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import styles from './EditableValue.css';
+import {sanitizeForParse} from '../../utils';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
@@ -27,20 +28,38 @@ export default function EditableValue({
   path,
   value,
 }: EditableValueProps) {
+  const [isValid, setIsValid] = useState(true);
   const [hasPendingChanges, setHasPendingChanges] = useState(false);
-  const [editableValue, setEditableValue] = useState(value);
+  const [stringifiedValue, setStringifiedValue] = useState(
+    JSON.stringify(value),
+  );
+  const [editableValue, setEditableValue] = useState(stringifiedValue);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  if (hasPendingChanges && editableValue === value) {
+  useEffect(
+    () => {
+      setStringifiedValue(JSON.stringify(value));
+    },
+    [value],
+  );
+
+  if (hasPendingChanges && editableValue === stringifiedValue) {
     setHasPendingChanges(false);
   }
 
   const handleChange = useCallback(
     ({target}) => {
       if (dataType === 'boolean') {
-        setEditableValue(target.checked);
+        setEditableValue(JSON.stringify(target.checked));
         overrideValueFn(path, target.checked);
       } else {
+        let isValidJSON = false;
+        try {
+          JSON.parse(sanitizeForParse(target.value));
+          isValidJSON = true;
+        } catch (error) {}
+
+        setIsValid(isValidJSON);
         setEditableValue(target.value);
       }
       setHasPendingChanges(true);
@@ -50,14 +69,15 @@ export default function EditableValue({
 
   const handleReset = useCallback(
     () => {
-      setEditableValue(value);
+      setEditableValue(stringifiedValue);
       setHasPendingChanges(false);
+      setIsValid(true);
 
       if (inputRef.current !== null) {
         inputRef.current.focus();
       }
     },
-    [value],
+    [stringifiedValue],
   );
 
   const handleKeyDown = useCallback(
@@ -67,71 +87,59 @@ export default function EditableValue({
 
       const {key} = event;
 
-      if (key === 'Enter') {
-        if (dataType === 'number') {
-          const parsedValue = parseFloat(editableValue);
-          if (!Number.isNaN(parsedValue)) {
-            overrideValueFn(path, parsedValue);
-          }
-        } else {
-          overrideValueFn(path, editableValue);
+      if (key === 'Enter' && isValid) {
+        const parsedEditableValue = JSON.parse(sanitizeForParse(editableValue));
+
+        if (value !== parsedEditableValue) {
+          overrideValueFn(path, parsedEditableValue);
         }
 
         // Don't reset the pending change flag here.
         // The inspected fiber won't be updated until after the next "inspectElement" message.
         // We'll reset that flag during a subsequent render.
       } else if (key === 'Escape') {
-        setEditableValue(value);
+        setEditableValue(stringifiedValue);
         setHasPendingChanges(false);
+        setIsValid(true);
       }
     },
-    [editableValue, dataType, overrideValueFn, path, value],
+    [editableValue, isValid, dataType, overrideValueFn, path, value],
   );
 
-  // Render different input types based on the dataType
-  let type = 'text';
-  if (dataType === 'boolean') {
-    type = 'checkbox';
-  } else if (dataType === 'number') {
-    type = 'number';
-  }
-
-  let inputValue = value == null ? '' : value;
+  let inputValue = value === undefined ? '' : stringifiedValue;
   if (hasPendingChanges) {
-    inputValue = editableValue == null ? '' : editableValue;
+    inputValue = editableValue;
   }
 
   let placeholder = '';
-  if (value === null) {
-    placeholder = '(null)';
-  } else if (value === undefined) {
+  if (value === undefined) {
     placeholder = '(undefined)';
-  } else if (dataType === 'string') {
-    placeholder = '(string)';
+  } else {
+    placeholder = 'Enter valid JSON';
   }
 
   return (
     <Fragment>
       {dataType === 'boolean' && (
         <label className={styles.CheckboxLabel}>
           <input
-            checked={inputValue}
+            checked={inputValue === 'true'}
             className={styles.Checkbox}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
             ref={inputRef}
-            type={type}
+            type="checkbox"
           />
         </label>
       )}
       {dataType !== 'boolean' && (
         <input
-          className={styles.Input}
+          className={isValid ? styles.Input : styles.Invalid}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
           ref={inputRef}
-          type={type}
+          type="text"
           value={inputValue}
         />
       )}

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css

@@ -46,3 +46,8 @@
   font-style: italic;
   padding-left: 0.75rem;
 }
+
+.AddEntry {
+  display: flex;
+  padding-left: 0.9rem;
+}