add hover component style

packages/editor/src/components/ComponentWrapper.tsx

@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+import React from 'react';
+
+type ComponentWrapperProps = {
+  id: string;
+};
+
+export const genComponentWrapper = (
+  selectedComponentId: string,
+  hoverComponentId: string,
+  onClick: (id: string) => void,
+  onMouseEnter: (id: string) => void,
+  onMouseLeave: (id: string) => void
+): React.FC<ComponentWrapperProps> => {
+  return props => {
+    const isHover = hoverComponentId === props.id;
+    const isSelected = selectedComponentId === props.id;
+    let shadowColor = 'transparent';
+    console.log('hoverComponentId', hoverComponentId, props.id);
+    if (isSelected) {
+      shadowColor = 'red';
+    } else if (isHover) {
+      shadowColor = 'black';
+    }
+
+    console.log('shadowColor', shadowColor);
+    const style = css`
+      height: 100%;
+      box-shadow: 0 0 1px ${shadowColor};
+    `;
+    const onClickWrapper = (e: React.MouseEvent<HTMLElement>) => {
+      e.stopPropagation();
+      onClick(props.id);
+    };
+    const onMouseEnterWrapper = (e: React.MouseEvent<HTMLElement>) => {
+      e.stopPropagation();
+      onMouseEnter(props.id);
+    };
+    const onMouseLeaveWrapper = (e: React.MouseEvent<HTMLElement>) => {
+      e.stopPropagation();
+      onMouseLeave(props.id);
+    };
+    return (
+      <div
+        onClick={onClickWrapper}
+        onMouseEnter={onMouseEnterWrapper}
+        onMouseLeave={onMouseLeaveWrapper}
+        css={style}
+      >
+        {props.children}
+      </div>
+    );
+  };
+};

packages/editor/src/components/Editor.tsx

@@ -13,29 +13,57 @@ import { ComponentForm } from './ComponentForm';
 import { ComponentList } from './ComponentsList';
 import { useAppModel } from '../operations/useAppModel';
 import { KeyboardEventWrapper } from './KeyboardEventWrapper';
+import { genComponentWrapper } from './ComponentWrapper';
 
 let count = 0;
 export const Editor = () => {
   const [selectedComponentId, setSelectedComponentId] = useState('');
+  const [hoverComponentId, setHoverComponentId] = useState('');
   const { app } = useAppModel();
 
-  const Wrapper: React.FC<{ id: string }> = useMemo(() => {
-    return props => {
-      const style = css`
-        height: 100%;
-        box-shadow: 0 0 ${props.id === selectedComponentId ? 1 : 0}px red;
-      `;
-      const onClick = (e: React.MouseEvent<HTMLElement>) => {
-        e.stopPropagation();
-        setSelectedComponentId(() => props.id);
-      };
-      return (
-        <div onClick={onClick} css={style}>
-          {props.children}
-        </div>
-      );
+  const Wrapper = useMemo(() => {
+    const onClick = (id: string) => {
+      setSelectedComponentId(() => id);
     };
-  }, [selectedComponentId]);
+    const onMouseOver = (id: string) => {
+      setHoverComponentId(() => id);
+    };
+    const onMouseLeave = (id: string) => {
+      if (hoverComponentId === id) {
+        setHoverComponentId(() => '');
+      }
+    };
+    return genComponentWrapper(
+      selectedComponentId,
+      hoverComponentId,
+      onClick,
+      onMouseOver,
+      onMouseLeave
+    );
+  }, [
+    selectedComponentId,
+    setSelectedComponentId,
+    hoverComponentId,
+    setHoverComponentId,
+  ]);
+
+  // const Wrapper: React.FC<{ id: string }> = useMemo(() => {
+  //   return props => {
+  //     const style = css`
+  //       height: 100%;
+  //       box-shadow: 0 0 ${props.id === selectedComponentId ? 1 : 0}px red;
+  //     `;
+  //     const onClick = (e: React.MouseEvent<HTMLElement>) => {
+  //       e.stopPropagation();
+  //       setSelectedComponentId(() => props.id);
+  //     };
+  //     return (
+  //       <div onClick={onClick} css={style}>
+  //         {props.children}
+  //       </div>
+  //     );
+  //   };
+  // }, [selectedComponentId]);
 
   const gridCallbacks: GridCallbacks = {
     onDragStop(id, layout) {