Merge pull request #199 from orangemug/fix/issue-97-layer-list-cutoff

Fixed layer list cutoff (#97)

src/components/inputs/AutocompleteInput.jsx

@@ -4,11 +4,72 @@ import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
 
 
+const MAX_HEIGHT = 140;
+
+class AutocompleteMenu extends React.Component {
+  static propTypes = {
+    keepMenuWithinWindowBounds: PropTypes.bool,
+    style: PropTypes.object,
+    children: PropTypes.node
+  }
+
+  calcMaxHeight() {
+    if(this.props.keepMenuWithinWindowBounds) {
+      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
+      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
+
+      if(limitedMaxHeight != this.state.maxHeight) {
+        this.setState({
+          maxHeight: limitedMaxHeight
+        })
+      }
+    }
+  }
+  componentDidMount() {
+    this.calcMaxHeight();
+  }
+
+  componentDidUpdate() {
+    this.calcMaxHeight();
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      maxHeight: MAX_HEIGHT
+    };
+  }
+
+  static defaultProps = {
+    style: {}
+  }
+
+  render() {
+    const maxHeight = this.state.maxHeight - this.props.style.marginBottom || 0;
+    const style = {
+      maxHeight: maxHeight+"px"
+    }
+
+    return (
+      <div
+        ref={(el) => {
+          this.autocompleteMenuEl = el;
+        }}
+        className={"maputnik-autocomplete-menu"}
+        style={style}
+      >
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
 class AutocompleteInput extends React.Component {
   static propTypes = {
     value: PropTypes.string,
     options: PropTypes.array,
     onChange: PropTypes.func,
+    keepMenuWithinWindowBounds: PropTypes.bool
   }
 
   static defaultProps = {
@@ -17,14 +78,16 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
-    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"}>{items}</div>
-
     return <Autocomplete
       wrapperProps={{
         className: "maputnik-autocomplete",
         style: null
       }}
-      renderMenu={AutocompleteMenu}
+      renderMenu={(items) => {
+        return <AutocompleteMenu keepMenuWithinWindowBounds={this.props.keepMenuWithinWindowBounds} style={{marginBottom: 4}}>
+          {items}
+        </AutocompleteMenu>
+      }}
       inputProps={{
         className: "maputnik-string"
       }}

src/components/layers/LayerSourceLayerBlock.jsx

@@ -12,16 +12,19 @@ class LayerSourceLayer extends React.Component {
     value: PropTypes.string,
     onChange: PropTypes.func,
     sourceLayerIds: PropTypes.array,
+    isFixed: PropTypes.bool,
   }
 
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
+    isFixed: false
   }
 
   render() {
     return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
       <AutocompleteInput
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}

src/components/modals/AddModal.jsx

@@ -127,6 +127,7 @@ class AddModal extends React.Component {
       }
       {this.state.type !== 'background' && this.state.type !== 'raster' &&
       <LayerSourceLayerBlock
+        isFixed={true}
         sourceLayerIds={layers}
         value={this.state['source-layer']}
         onChange={v => this.setState({ 'source-layer': v })}