feat(overmind-devtools-client): change how to edit state

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/Inspector/index.tsx

@@ -4,6 +4,31 @@ import { isValidJson } from '../../overmind/utils'
 import * as styles from './styles'
 import { css } from 'emotion'
 import { colors } from '../../theme'
+import { FaEdit } from 'react-icons/fa'
+
+type PathToolsProps = {
+  path: string[]
+  onClickPath: (path: string[]) => void
+}
+
+const PathTools: FunctionComponent<PathToolsProps> = ({
+  path,
+  onClickPath,
+  children,
+}) => {
+  return (
+    <div className={styles.pathToolsWrapper}>
+      {children}{' '}
+      <FaEdit
+        className={styles.toolIcon}
+        onClick={(event) => {
+          event.stopPropagation()
+          onClickPath(path)
+        }}
+      />
+    </div>
+  )
+}
 
 type EditValueProps = {
   value: any
@@ -79,15 +104,7 @@ const Nested: FunctionComponent<NestedProps> = ({
         }}
       >
         {path.length ? (
-          <span
-            className={styles.key}
-            onClick={(event) => {
-              event.stopPropagation()
-              onClickPath(path)
-            }}
-          >
-            {path[path.length - 1]}:
-          </span>
+          <span className={styles.key}>{path[path.length - 1]}:</span>
         ) : null}
         <EditValue value={value} onSubmit={onSubmitState} />
       </div>
@@ -103,24 +120,18 @@ const Nested: FunctionComponent<NestedProps> = ({
           onToggleExpand(path)
         }}
       >
-        {path.length ? (
-          <span
-            className={styles.key}
-            onClick={(event) => {
-              event.stopPropagation()
-              onClickPath(path)
-            }}
-          >
-            {path[path.length - 1]}:
+        <PathTools path={path} onClickPath={onClickPath}>
+          {path.length ? (
+            <span className={styles.key}>{path[path.length - 1]}:</span>
+          ) : null}
+          {startBracket}
+          <span className={styles.keyCount}>
+            {isArray
+              ? keys.length + ' items'
+              : keys.slice(0, 3).join(', ') + '...'}
           </span>
-        ) : null}
-        {startBracket}
-        <span className={styles.keyCount}>
-          {isArray
-            ? keys.length + ' items'
-            : keys.slice(0, 3).join(', ') + '...'}
-        </span>
-        {endBracket}
+          {endBracket}
+        </PathTools>
       </div>
     )
   }
@@ -134,18 +145,12 @@ const Nested: FunctionComponent<NestedProps> = ({
           onToggleExpand(path)
         }}
       >
-        {path.length ? (
-          <span
-            className={styles.key}
-            onClick={(event) => {
-              event.stopPropagation()
-              onClickPath(path)
-            }}
-          >
-            {path[path.length - 1]}:
-          </span>
-        ) : null}
-        {startBracket}
+        <PathTools path={path} onClickPath={onClickPath}>
+          {path.length ? (
+            <span className={styles.key}>{path[path.length - 1]}:</span>
+          ) : null}
+          {startBracket}
+        </PathTools>
       </div>
       <div className={styles.nestedChildren}>{children()}</div>
       <div className={styles.bracket(false)}>{endBracket}</div>
@@ -172,15 +177,7 @@ const ValueComponent: FunctionComponent<ValueComponentProps> = ({
     return (
       <div className={styles.genericValue}>
         {path.length ? (
-          <span
-            className={styles.key}
-            onClick={(event) => {
-              event.stopPropagation()
-              onClickPath(path)
-            }}
-          >
-            {path[path.length - 1]}:
-          </span>
+          <span className={styles.key}>{path[path.length - 1]}:</span>
         ) : null}
         <EditValue value={value} onSubmit={onSubmitState} />
       </div>
@@ -194,55 +191,37 @@ const ValueComponent: FunctionComponent<ValueComponentProps> = ({
   ) {
     return (
       <div className={styles.otherValue}>
-        {path.length ? (
-          <span
-            className={styles.key}
-            onClick={(event) => {
-              event.stopPropagation()
-              onClickPath(path)
-            }}
-          >
-            {path[path.length - 1]}:
-          </span>
-        ) : null}
-        {value.substr(1, value.length - 2)}
+        <PathTools path={path} onClickPath={onClickPath}>
+          {path.length ? (
+            <span className={styles.key}>{path[path.length - 1]}:</span>
+          ) : null}
+          {value.substr(1, value.length - 2)}
+        </PathTools>
       </div>
     )
   }
 
   if (typeof value === 'string') {
     return (
       <div className={styles.stringValue}>
-        {path.length ? (
-          <span
-            className={styles.key}
-            onClick={(event) => {
-              event.stopPropagation()
-              onClickPath(path)
-            }}
-          >
-            {path[path.length - 1]}:
-          </span>
-        ) : null}
-        "{value.length > 50 ? value.substr(0, 50) + '...' : value}"
+        <PathTools path={path} onClickPath={onClickPath}>
+          {path.length ? (
+            <span className={styles.key}>{path[path.length - 1]}:</span>
+          ) : null}
+          "{value.length > 50 ? value.substr(0, 50) + '...' : value}"
+        </PathTools>
       </div>
     )
   }
 
   return (
     <div className={styles.genericValue}>
-      {path.length ? (
-        <span
-          className={styles.key}
-          onClick={(event) => {
-            event.stopPropagation()
-            onClickPath(path)
-          }}
-        >
-          {path[path.length - 1]}:
-        </span>
-      ) : null}
-      {String(value)}
+      <PathTools path={path} onClickPath={onClickPath}>
+        {path.length ? (
+          <span className={styles.key}>{path[path.length - 1]}:</span>
+        ) : null}
+        {String(value)}
+      </PathTools>
     </div>
   )
 }

packages/node_modules/overmind-devtools-client/src/components/Inspector/styles.ts

@@ -23,6 +23,27 @@ export const key = css({
   },
 })
 
+export const pathToolsWrapper = css({
+  display: 'flex',
+  alignItems: 'center',
+  svg: {
+    color: colors.white4,
+    cursor: 'pointer',
+    display: 'none',
+    opacity: 0.5,
+  },
+  'svg:hover': {
+    opacity: 1,
+  },
+  ':hover svg': {
+    display: 'block',
+  },
+})
+
+export const toolIcon = css({
+  margin: '0 0.75rem',
+})
+
 export const inlineNested = css({
   cursor: 'pointer',
 })

packages/node_modules/overmind-devtools-client/src/components/State/index.tsx

@@ -1,4 +1,4 @@
-import { createElement, FunctionComponent } from 'react'
+import { createElement, FunctionComponent, useEffect } from 'react'
 import { useOvermind } from '../../overmind'
 import * as styles from './styles'
 import * as textStyles from '../../styles/text'
@@ -21,6 +21,18 @@ const DerivedWrapper: FunctionComponent = ({ children }) => (
 const State: FunctionComponent = () => {
   const { state, actions } = useOvermind()
 
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.keyCode === 27) {
+        actions.undoSettingState()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [])
+
   return (
     <div className={styles.wrapper} onClick={() => actions.undoSettingState()}>
       <Inspector