Add dropup for the last items such that they are visible #6687 (#6688)

* Add dropup for the last items such that they are visible #6687

* Solution that uses window.innerHeight #6687

* Used Pure component #6687

Co-authored-by: Petrica Nanca <petrica.nanca@metasfresh.com>
(cherry picked from commit b979d1c)

frontend/src/assets/css/inputs.css

@@ -881,6 +881,10 @@ input[type=checkbox]:disabled, input[type=radio]:disabled {
     margin-top:5px;
     width: 450px;
 }
+.attributes-dropup {
+  bottom: 35px;
+}
+
 
 /* Others */
 .number-field {

frontend/src/components/widget/Attributes/AttributesDropdown.js

@@ -1,24 +1,29 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import onClickOutside from 'react-onclickoutside';
 import { Map } from 'immutable';
-
+import classnames from 'classnames';
 import RawWidget from '../RawWidget';
 
 /**
  * @file Class based component.
  * @module AttributesDropdown
  * @extends Component
  */
-class AttributesDropdown extends Component {
+class AttributesDropdown extends PureComponent {
   constructor(props) {
     super(props);
-
+    this.selector = React.createRef();
     this.state = {
       patchCallbacks: Map(),
     };
   }
 
+  componentDidMount = () => {
+    const componentCoords = this.selector.current.getBoundingClientRect();
+    this.setState({ isVisible: true, dropdownCoords: componentCoords });
+  };
+
   /**
    * @method handleClickOutside
    * @summary ToDo: Describe the method
@@ -125,8 +130,21 @@ class AttributesDropdown extends Component {
    * @todo Write the documentation
    */
   render() {
+    const { isVisible, dropdownCoords } = this.state;
+    const BOTTOM_OFFSET = 230; // value from where we show the dropup
     return (
-      <div className="attributes-dropdown panel-shadowed panel-primary panel-bordered panel-spaced">
+      <div
+        ref={this.selector}
+        className={classnames(
+          'attributes-dropdown panel-shadowed panel-primary panel-bordered panel-spaced',
+          { 'hidden ': !isVisible },
+          {
+            'attributes-dropup':
+              dropdownCoords &&
+              window.innerHeight - dropdownCoords.y < BOTTOM_OFFSET,
+          }
+        )}
+      >
         {this.renderFields()}
       </div>
     );