From f222fd1335ce5cc417ff14c5c67bef6c0ca9dd0a Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Mon, 10 Dec 2018 17:51:22 -0300
Subject: [PATCH] feature: add dropdown component

---
 app/components/Dropdown.mdx | 30 +++++++++++++
 app/components/dropdown.js  | 84 +++++++++++++++++++++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 app/components/Dropdown.mdx
 create mode 100644 app/components/dropdown.js

diff --git a/app/components/Dropdown.mdx b/app/components/Dropdown.mdx
new file mode 100644
index 0000000..a2b0c74
--- /dev/null
+++ b/app/components/Dropdown.mdx
@@ -0,0 +1,30 @@
+---
+name: DropDown
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { Dropdown } from './dropdown.js'
+import { DoczWrapper } from '../theme.js'
+
+# DropDown
+
+<PropsTable of={Dropdown} />
+
+## Basic usage
+
+<Playground>
+  <DoczWrapper>
+    {() => (
+      <div style={{ height: '500px' }}>
+        <Dropdown
+          options={[
+            { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
+            { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
+          ]}
+          renderTrigger={toggleVisibility => <button onClick={toggleVisibility}>Opa</button>}
+        />
+      </div>
+    )}
+  </DoczWrapper>
+</Playground>
diff --git a/app/components/dropdown.js b/app/components/dropdown.js
new file mode 100644
index 0000000..1c930a1
--- /dev/null
+++ b/app/components/dropdown.js
@@ -0,0 +1,84 @@
+// @flow
+import React, { type Node, Component } from 'react';
+import styled from 'styled-components';
+/* eslint-disable import/no-extraneous-dependencies */
+// $FlowFixMe
+import { darken } from 'polished';
+import Popover from 'react-popover';
+import ClickOutside from 'react-click-outside';
+
+import { TextComponent } from './text';
+
+/* eslint-disable max-len  */
+const MenuWrapper = styled.div`
+  background-image: ${props => `linear-gradient(to right, ${darken(0.005, props.theme.colors.activeItem)}, ${props.theme.colors.activeItem})`};
+  padding: 10px;
+  border-radius: 10px;
+  position: absolute;
+  margin-left: -10px;
+`;
+
+const MenuItem = styled.button`
+  outline: none;
+  background-color: transparent;
+  border: none;
+  border-bottom-style: solid;
+  border-bottom-color: ${props => props.theme.colors.text};
+  border-bottom-width: 1px;
+  padding: 15px 0;
+  cursor: pointer;
+  width: 100%;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+const PopoverWithStyle = styled(Popover)`
+  & > .Popover-tip {
+    fill: ${props => props.theme.colors.activeItem};
+  }
+`;
+
+type Props = {
+  renderTrigger: (() => void) => Node,
+  options: Array<{ label: string, onClick: () => void }>,
+};
+
+type State = {
+  isOpen: boolean,
+};
+
+export class Dropdown extends Component<Props, State> {
+  state = {
+    isOpen: false,
+  };
+
+  toggleVisibility() {
+    this.setState(state => ({ isOpen: !state.isOpen }));
+  }
+
+  render() {
+    return (
+      <PopoverWithStyle
+        isOpen={this.state.isOpen}
+        preferPlace='below'
+        body={[
+          <ClickOutside onClickOutside={() => this.setState(() => ({ isOpen: false }))}>
+            <MenuWrapper>
+              <TextComponent value='All Addresses' isBold />
+              {this.props.options.map(({ label, onClick }) => (
+                <MenuItem onClick={onClick}>
+                  <TextComponent value={label} />
+                </MenuItem>
+              ))}
+            </MenuWrapper>
+          </ClickOutside>,
+        ]}
+        tipSize={10}
+      >
+        {this.props.renderTrigger(() => this.toggleVisibility())}
+      </PopoverWithStyle>
+    );
+  }
+}