hover on nodes

Summary: Adds a hover background color to nodes.

Reviewed By: emilsjolander

Differential Revision: D7009467

fbshipit-source-id: 1e1fb4d00086a6664ad8a53a0e8dbec075987a19

website/src/components/Playground/YogaNode.js

@@ -44,6 +44,7 @@ type Props = {|
 
 type State = {
   visible?: boolean,
+  hovered: boolean,
 };
 
 export default class YogaNode extends Component<Props, State> {
@@ -55,7 +56,9 @@ export default class YogaNode extends Component<Props, State> {
     showGuides: true,
   };
 
-  state = {};
+  state = {
+    hovered: false,
+  };
   computedLayout: ?ComputedLayout;
   rootNode: ?Yoga$Node;
 
@@ -91,6 +94,10 @@ export default class YogaNode extends Component<Props, State> {
     }
   }
 
+  onMouseMove = e => {
+    this.setState({hovered: e.target === this._ref});
+  };
+
   calculateLayout(props: Props) {
     const root = this.createYogaNodes(props.layoutDefinition);
     root.calculateLayout(
@@ -180,6 +187,8 @@ export default class YogaNode extends Component<Props, State> {
     }
   };
 
+  onMouseLeave = (e: SyntheticMouseEvent<>) => this.setState({hovered: false});
+
   showPositionGuides({node}: ComputedLayout) {
     const padding = PositionRecord({
       top: node.getComputedPadding(yoga.EDGE_TOP),
@@ -256,9 +265,14 @@ export default class YogaNode extends Component<Props, State> {
       <div
         className={`YogaNode ${isFocused ? 'focused' : ''} ${className || ''} ${
           this.state.visible ? '' : 'invisible'
-        }`}
+        } ${this.state.hovered ? 'hover' : ''}`}
         style={path.length == 0 ? {width, height} : {left, top, width, height}}
         onDoubleClick={this.onDoubleClick}
+        onMouseMove={this.onMouseMove}
+        onMouseLeave={this.onMouseLeave}
+        ref={ref => {
+          this._ref = ref;
+        }}
         onClick={this.onClick}>
         {label && <div className="label">{label}</div>}
         {isFocused &&