Merge pull request #47 from premieroctet/feature/focus

remove children autofocus & add Text Input focus

Author: tlenclos

src/components/inspector/controls/ChildrenControl.tsx

@@ -1,26 +1,48 @@
-import React from "react";
-import { Input } from "@chakra-ui/core";
-import FormControl from "./FormControl";
-import { useForm } from "../../../hooks/useForm";
-import usePropsSelector from "../../../hooks/usePropsSelector";
+import React, { useRef, useEffect, KeyboardEvent } from 'react'
+import { Input } from '@chakra-ui/core'
+import FormControl from './FormControl'
+import useDispatch from '../../../hooks/useDispatch'
+import { useForm } from '../../../hooks/useForm'
+import usePropsSelector from '../../../hooks/usePropsSelector'
+import { useSelector } from 'react-redux'
+import { getInputTextFocused } from '../../../core/selectors/app'
 
 const ChildrenControl: React.FC = () => {
-  const { setValueFromEvent } = useForm();
-  const children = usePropsSelector("children");
+  const dispatch = useDispatch()
+  const textInput = useRef<HTMLInputElement>(null)
+  const focusInput = useSelector(getInputTextFocused)
+  const { setValueFromEvent } = useForm()
+  const children = usePropsSelector('children')
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.keyCode === 13 && textInput.current) {
+      textInput.current.blur()
+    }
+  }
+  useEffect(() => {
+    if (focusInput && textInput.current) {
+      textInput.current.focus()
+    } else if (focusInput === false && textInput.current) {
+      textInput.current.blur()
+    }
+  }, [focusInput])
 
   return (
     <FormControl htmlFor="children" label="Text">
       <Input
         id="children"
         name="children"
-        autoFocus
         size="sm"
-        value={children || ""}
+        value={children}
         type="text"
         onChange={setValueFromEvent}
+        ref={textInput}
+        onKeyUp={onKeyUp}
+        onBlur={() => {
+          dispatch.app.toggleInputText(false)
+        }}
       />
     </FormControl>
-  );
-};
+  )
+}
 
-export default ChildrenControl;
+export default ChildrenControl

src/core/models/app.ts

@@ -5,13 +5,15 @@ type Overlay = undefined | { rect: DOMRect; id: string; type: ComponentType }
 export type AppState = {
   showLayout: boolean
   showCode: boolean
+  inputTextFocused: boolean
   overlay: undefined | Overlay
 }
 
 const app = createModel({
   state: {
     showLayout: true,
     showCode: false,
+    inputTextFocused: false,
     overlay: undefined,
   } as AppState,
   reducers: {
@@ -27,6 +29,12 @@ const app = createModel({
         showCode: !state.showCode,
       }
     },
+    toggleInputText(state: AppState): AppState {
+      return {
+        ...state,
+        inputTextFocused: !state.inputTextFocused,
+      }
+    },
 
     setOverlay(state: AppState, overlay: Overlay | undefined): AppState {
       return {

src/core/selectors/app.ts

@@ -3,3 +3,10 @@ import { RootState } from '../store'
 export const getShowLayout = (state: RootState) => state.app.showLayout
 
 export const getShowCode = (state: RootState) => state.app.showCode
+
+export const getFocusedComponent = (id: IComponent['id']) => (
+  state: RootState,
+) => state.app.inputTextFocused && state.components.present.selectedId === id
+
+export const getInputTextFocused = (state: RootState) =>
+  state.app.inputTextFocused

src/hooks/useInteractive.ts

@@ -6,7 +6,7 @@ import {
   getIsSelectedComponent,
   getIsHovered,
 } from '../core/selectors/components'
-import { getShowLayout } from '../core/selectors/app'
+import { getShowLayout, getFocusedComponent } from '../core/selectors/app'
 
 export const useInteractive = (
   component: IComponent,
@@ -16,12 +16,13 @@ export const useInteractive = (
   const showLayout = useSelector(getShowLayout)
   const isComponentSelected = useSelector(getIsSelectedComponent(component.id))
   const isHovered = useSelector(getIsHovered(component.id))
+  const focusInput = useSelector(getFocusedComponent(component.id))
+
   const [, drag] = useDrag({
     item: { id: component.id, type: component.type, isMoved: true },
   })
 
   const ref = useRef<HTMLDivElement>(null)
-
   let props = {
     ...component.props,
     onMouseOver: (event: MouseEvent) => {
@@ -36,6 +37,13 @@ export const useInteractive = (
       event.stopPropagation()
       dispatch.components.select(component.id)
     },
+    onDoubleClick: (event: MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      if (focusInput === false) {
+        dispatch.app.toggleInputText()
+      }
+    },
   }
 
   if (showLayout && enableVisualHelper) {
@@ -49,7 +57,7 @@ export const useInteractive = (
   if (isHovered || isComponentSelected) {
     props = {
       ...props,
-      boxShadow: `#4FD1C5 0px 0px 0px 2px inset`,
+      boxShadow: `${focusInput ? '#ffc4c7' : '#4FD1C5'} 0px 0px 0px 2px inset`,
     }
   }