Added Reset to original functionality.

hristo-kanchev · Sep 10, 2019 · c4ad679 · c4ad679
1 parent a5cc62b
commit c4ad679
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -158,9 +158,9 @@ function useEditableValue(initialValue: any): [any, Function] {
   ) {
     if (shouldStringify) {
       setEditableValue(JSON.stringify(value));
+    } else {
+      setEditableValue(value);
     }
-
-    setEditableValue(value);
   }
 
   return [editableValue, setEditableValueWithStringify];

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -8,7 +8,7 @@
  */
 
 import {copy} from 'clipboard-js';
-import React, {useEffect, useCallback, useState} from 'react';
+import React, {useEffect, useMemo, useCallback, useState} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';
@@ -40,6 +40,12 @@ export default function InspectedElementTree({
 }: Props) {
   const [entries, setEntries] = useState(null);
   const [entryToAdd, setEntryToAdd] = useState(null);
+  const initialEntries = useMemo(() => {
+    if (data != null) {
+      return Object.entries(data).sort(alphaSortEntries);
+    }
+    return [];
+  }, []);
 
   useEffect(
     () => {
@@ -59,6 +65,13 @@ export default function InspectedElementTree({
     [data],
   );
 
+  const handleResetEntries = useCallback(
+    () => {
+      setEntries(initialEntries);
+    },
+    [data],
+  );
+
   const handleEntryAdd = useCallback(
     () => {
       setEntryToAdd({
@@ -97,16 +110,21 @@ export default function InspectedElementTree({
       <div className={styles.InspectedElementTree}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>{label}</div>
-          {!isEmpty && (
-            <Button onClick={handleCopy} title="Copy to clipboard">
-              <ButtonIcon type="copy" />
-            </Button>
-          )}
           {canAddEntries && (
             <Button onClick={handleEntryAdd} title={`Add ${label}`}>
               <ButtonIcon type="add" />
             </Button>
           )}
+          {canAddEntries && (
+            <Button onClick={handleResetEntries} title={`Reset ${label}`}>
+              <ButtonIcon type="undo" />
+            </Button>
+          )}
+          {!isEmpty && (
+            <Button onClick={handleCopy} title="Copy to clipboard">
+              <ButtonIcon type="copy" />
+            </Button>
+          )}
         </div>
         {isEmpty && <div className={styles.Empty}>None</div>}
         {!isEmpty &&

diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js
@@ -126,16 +126,7 @@ export default function EditableProps() {
     <Fragment>
       <h1>Editable props</h1>
       <strong>Class</strong>
-      <StatefulClass
-        name="Brian"
-        toggle={true}
-        newLineStringProp={'Hello \n World'}
-        nanProp={NaN}
-        infinityProp={Infinity}
-        minusInfinityProp={-Infinity}
-        emptyStringProp={''}
-        nullProp={null}
-      />
+      <StatefulClass name="Brian" toggle={true} />
       <strong>Function</strong>
       <StatefulFunction name="Brian" />
       <strong>Memoized Class</strong>