hasura · rikinsk-zz · Jul 15, 2019 · May 21, 2019 · May 21, 2019 · May 21, 2019
@@ -511,6 +511,10 @@ input {
   margin-bottom: 10px;
 }
 
+.add_mar_bottom_small {
+  margin-bottom: 5px;
+}
+
 .add_mar_right {
   margin-right: 20px !important;
 }

@@ -2,62 +2,68 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { getParentNodeByAttribute } from '../../../utils/domFunctions';
-import Button from '../Button/Button';
 
 const styles = require('./Dropdown.scss');
 
-const ComponentData = ({ options }) => {
+const ComponentData = ({ options, dismiss, position }) => {
   /*
-   * options is an object which has following keys
-   *  callbackArguments [array]: Arguments to be sent to the onClick function
-   *  buttonText: Fills the action button text
-   *  displayText: Fills non actionable text
-   *  testId: Fills `data-test` attribute
-   *  onClick: Function to be called when clicked
+   * options is a list which has the following
+   *  content: html inside each row
+   *  onClick (optional): An onClick handler for each row. If this is undefined, the row is not clickable
    * */
-  const generateOptions = () => {
-    return options.map((o, i) => (
-      <li key={i} data-test={o.testId}>
-        <Button
-          color="white"
-          size="xs"
-          data-test={`run_manual_trigger_${o.testId}`}
-          onClick={() => o.onClick.apply(undefined, o.callbackArguments)}
-        >
-          {o.buttonText}
-        </Button>
-        {`${o.displayText}`}
+
+  const generateOptions = options.map((o, i) => {
+    const liStyle = o.onClick ? styles.cursorPointer : '';
+    const onClick = {};
+    if (o.onClick) {
+      onClick.onClick = () => {
+        o.onClick();
+        dismiss();
+      };
+    }
+    return (
+      <li key={i} className={liStyle} {...onClick}>
+        {o.content}
       </li>
-    ));
-  };
-  /*
-    TODO: Implement position API
-  */
-  return <ul className={styles.dropdown_wrapper}>{generateOptions()}</ul>;
+    );
+  });
+
+  const dropdownPositionStyle =
+    position === 'bottom' ? styles.dropdownBottom : styles.dropdownRight;
+
+  return (
+    <ul className={styles.dropdown_wrapper + ' ' + dropdownPositionStyle}>
+      {generateOptions}
+    </ul>
+  );
 };
 
 const attachEventListener = updateToggle => {
-  document.addEventListener('click', updateToggle, {
-    once: true,
-  });
+  document.addEventListener('click', updateToggle, { once: true });
 };
 
 const removeEventListener = updateToggle => {
   document.removeEventListener('click', updateToggle);
 };
 
-/* Accepts:
+/* Accepts
  *  keyPrefix: Prefixes keys with the value
  *  testId: Tag the component with this keyPrefix. This can be consumed in tests
  *  *children*: Dropdown is tied to this element. Dropdown state is toggled based on clicks to this element.
  *  options: Line items
- *  position: TODO: Unimplemented functionality.
+ *  position: bottom, right (default: right)
  *
  * */
 const Dropdown = ({ keyPrefix, testId, children, options, position }) => {
   const [isOpen, updateState] = useState(false);
-  const showDropdown = () =>
-    isOpen && <ComponentData position={position} options={options} />;
+  const showDropdown = dismissCallback =>
+    isOpen && (
+      <ComponentData
+        position={position}
+        options={options}
+        dismiss={dismissCallback}
+      />
+    );
 
   const nodeId = `data-dropdown-element_${testId}`;
 
@@ -75,8 +81,8 @@ const Dropdown = ({ keyPrefix, testId, children, options, position }) => {
       updateState(!d);
     }
   };
-  const onClick = e => {
-    e.stopPropagation();
+
+  const toggle = () => {
     /*
      * If the dropdown is not open, attach event on body
      * */
@@ -90,19 +96,25 @@ const Dropdown = ({ keyPrefix, testId, children, options, position }) => {
         attachEventListener(cb(true));
     }
   };
+
+  const dismissDropdown = () => updateState(false);
+
   return (
     <div
       key={`${keyPrefix}_wrapper`}
       data-test={`${testId}`}
       className={styles.data_dropdown_wrapper}
       data-element={nodeId}
     >
-      <span key={`${keyPrefix}_children_wrapper`}>
+      <div
+        className={styles.dataDropdown}
+        key={`${keyPrefix}_children_wrapper`}
+      >
         <span key={`${keyPrefix}_children`}>
-          {React.cloneElement(children, { onClick: onClick })}
+          {React.cloneElement(children, { onClick: toggle })}
         </span>
-        {showDropdown()}
-      </span>
+        {showDropdown(dismissDropdown)}
+      </div>
     </div>
   );
 };

@@ -1,20 +1,24 @@
+@import "../Common.scss";
+
 .data_dropdown_wrapper {
   display: inline-block;
-  // cursor: pointer;
-  span {
+  width: 100%;
+
+  .dataDropdown {
     position: relative;
+    width: 100%;
+
     .dropdown_wrapper {
       border-radius: 5px;
-      width: 175px;
+      width: auto;
       position: absolute;
       padding-inline-start: 0px;
       box-shadow: 7px 7px 20px 0 rgba(0, 0, 0, 0.32);
       background-color: #ffffff;
       color: yellow;
-      top: -12px;
-      left: 35px;
       -webkit-padding-start: 0px;
-      z-index: 100000000;
+      z-index: 10;
+
       li {
         display: flex;
         align-items: center;
@@ -23,25 +27,49 @@
         text-align: left;
         padding: 10px 15px;
         border-bottom: 1px solid #ededed;
+
         button {
           margin-right: 5px;
         }
+
         // &:hover {
         //   background-color: #eee;
         // }
       }
+
       li:last-child {
         border-bottom: none;
       }
     }
-    .dropdown_wrapper:before {
+
+    .dropdownRight {
+      top: -12px;
+      left: 35px;
+    }
+
+    .dropdownBottom {
+      top: 32px;
+      left: 0;
+    }
+
+    .dropdownRight:before,
+    .dropdownBottom:before {
     	content: "";
     	position: absolute;
     	border: solid 5px transparent;
-      border-right-color: white;
       z-index: 10000;
+    }
+
+    .dropdownRight:before {
+      border-right-color: white;
       left: -10px;
       top: 17px;
     }
+
+    .dropdownBottom:before {
+      border-bottom-color: white;
+      top: -10px;
+      left: 20px;
+    }
   }
 }
@@ -1,19 +1,5 @@
 @import "../Common.scss";
 
-$bgColor: #f9f9f9;
-
-.container {
-  margin: 10px 0;
-}
-
-.count {
-  display: inline-block;
-  max-height: 34px;
-  padding: 5px 20px;
-  margin-left: 10px;
-  border-radius: 4px;
-}
-
 .queryBox {
   box-sizing: border-box;
   position: relative;
@@ -45,66 +31,5 @@ $bgColor: #f9f9f9;
       cursor: pointer;
       color: #888;
     }
-
-    .descending {
-      padding-left: 10px;
-
-      input {
-        margin-right: 5px;
-      }
-      margin-right: 10px;
-    }
-  }
-}
-
-.inline {
-  display: inline-block;
-}
-
-.runQuery {
-  margin-left: 0px;
-  margin-bottom: 20px;
-
-  :global(.form-control):focus {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0px rgba(102, 175, 233, 0.6);
-  }
-
-  :global(.input-group) {
-    margin-top: -24px;
-    margin-right: 10px;
-
-    input {
-      max-width: 60px;
-    }
-  }
-
-  nav {
-    display: inline-block;
-  }
-
-  button {
-    margin-top: -24px;
-    margin-right: 15px;
   }
 }
-
-.filterOptions {
-  margin-top: 10px;
-  background: $bgColor;
-  // padding: 20px;
-}
-
-.pagination {
-  margin: 0;
-}
-
-.boxHeading {
-  top: -0.55em;
-  line-height: 1.1em;
-  background: $bgColor;
-  display: inline-block;
-  position: absolute;
-  padding: 0 10px;
-  color: #929292;
-  font-weight: normal;
-}