Fixed scrolling when QuickLook is opened in Elements panel

resources/debugger/components/elements/element-tree-item.jsx

@@ -1,10 +1,16 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import styled from 'react-emotion'
 import { css } from 'emotion'
 import QuickLook from './quick-look'
+import { selectElement } from '../../redux/ducks/elements'
 import { ButtonToggle } from '../value/log-element'
 
+const mapStateToProps = state => ({
+  selectedElement: state.elements.selectedElement,
+})
+
 const Element = styled.ul`
   padding: 0 0 0 2rem;
   list-style: none;
@@ -56,12 +62,11 @@ const OffsetButtonToggle = styled(ButtonToggle)`
   top: 0.3rem;
 `
 
-export default class ElementTreeItem extends Component {
+class ElementTreeItem extends Component {
   constructor() {
     super()
     this.state = {
       expanded: false,
-      quickLook: false,
     }
   }
 
@@ -82,13 +87,11 @@ export default class ElementTreeItem extends Component {
           if (e.isDefaultPrevented() || this.props.element.id === '?') {
             return
           }
-          this.setState({
-            quickLook: !this.state.quickLook,
-          })
+          this.props.dispatch(selectElement(this.props.element.id))
         }}
         hasInfo={this.props.element.id !== '?'}
       >
-        &lt;{this.renderElementName()}{expanded ? '>' : ' />'} {this.state.quickLook && <QuickLook element={this.props.element} />}
+        &lt;{this.renderElementName()}{expanded ? '>' : ' />'} {this.props.selectedElement === this.props.element.id && <QuickLook element={this.props.element} />}
       </WrapElement>
     )
   }
@@ -109,7 +112,7 @@ export default class ElementTreeItem extends Component {
             <span>
               {this.renderQuickLook(true)}
               {element.children.map((e, i) => (
-                <ElementTreeItem key={element.id + i} element={e} />
+                <ElementTreeItemWrapper key={element.id + i} element={e} />
               ))}
               <WrapElement>&lt;/{this.renderElementName(true)}&gt;</WrapElement>
             </span>
@@ -139,4 +142,9 @@ ElementTreeItem.propTypes = {
     class: PropTypes.string,
     name: PropTypes.string,
   }).isRequired,
+  selectedElement: PropTypes.string,
+  dispatch: PropTypes.func.isRequired,
 }
+
+const ElementTreeItemWrapper = connect(mapStateToProps)(ElementTreeItem)
+export default ElementTreeItemWrapper

resources/debugger/components/elements/quick-look.jsx

@@ -51,16 +51,6 @@ const Wrapper = styled.div`
   }
 `
 
-const Overlay = styled.div`
-  position: fixed;
-  width: 100vw;
-  height: calc(100vh - 30px);
-  cursor: auto;
-  top: 30px;
-  left: 0;
-  z-index: 8;
-`
-
 class QuickLook extends Component {
   componentDidMount() {
     if (!this.props.element.meta) {
@@ -77,7 +67,6 @@ class QuickLook extends Component {
   render() {
     return (
       <div>
-        <Overlay />
         <Wrapper onClick={e => e.preventDefault()}>
           {!this.props.element.meta ? (
             <Loading>Loading...</Loading>

resources/debugger/components/list-element.jsx

@@ -25,6 +25,7 @@ export const ButtonFilter = styled(Filter)`
 export const Wrapper = styled.div`
   flex: 1;
   overflow: hidden;
+  height: 100vh;
 `
 
 export const ListInner = styled.ul`

resources/debugger/redux/ducks/elements.js

@@ -7,10 +7,12 @@ import {
 const FETCH_TREE = 'elements/FETCH_TREE'
 const FETCH_PAGE_METADATA = 'elements/FETCH_PAGE_METADATA'
 const FETCH_LAYER_METADATA = 'elements/FETCH_LAYER_METADATA'
+const SELECT_ELEMENT = 'elements/SELECT_ELEMENT'
 
 const initialState = {
   loading: true,
   tree: [],
+  selectedElement: '',
 }
 
 const handlers = {}
@@ -127,6 +129,18 @@ handlers[SET_LAYER_METADATA] = (state, { payload }) => ({
   })),
 })
 
+export const selectElement = id => ({
+  type: SELECT_ELEMENT,
+  payload: {
+    id,
+  },
+})
+
+handlers[SELECT_ELEMENT] = (state, { payload }) => ({
+  ...state,
+  selectedElement: payload.id,
+})
+
 export default function(state = initialState, action) {
   if (handlers[action.type]) {
     return handlers[action.type](state, action)

webpack.skpm.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const webpack = require('webpack')
+const path = require('path')
 
 module.exports = config => {
   config.resolve.extensions = ['.sketch.js', '.js', '.jsx']
@@ -29,6 +30,17 @@ module.exports = config => {
       },
     ],
   })
+  config.module.rules.push({
+    test: /\.jsx?$/,
+    include: [path.resolve(__dirname, 'node_modules/cocoascript-class')],
+    use: {
+      loader: 'babel-loader',
+      options: {
+        babelrc: false,
+        presets: ['babel-preset-airbnb'],
+      },
+    },
+  })
 
   config.plugins.push(
     new webpack.DefinePlugin({