From f69ff2d1141debe36bc2f3b7c256e9e43b20dc7e Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 17 Jan 2018 17:49:01 +0100
Subject: [PATCH] Better styling for unsearchable Select

---
 src/components/base/Select/Triangles.js | 29 +++++++++++++++++++++++++
 src/components/base/Select/index.js     | 18 +++++++--------
 src/components/base/Select/stories.js   |  1 +
 3 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 src/components/base/Select/Triangles.js

diff --git a/src/components/base/Select/Triangles.js b/src/components/base/Select/Triangles.js
new file mode 100644
index 00000000..a41f81bc
--- /dev/null
+++ b/src/components/base/Select/Triangles.js
@@ -0,0 +1,29 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+const UpTriangle = styled.div`
+  width: 0;
+  height: 0;
+  border-left: ${p => p.size}px solid transparent;
+  border-right: ${p => p.size}px solid transparent;
+  border-bottom: ${p => p.size}px solid ${p => p.theme.colors[p.color]};
+`
+
+const DownTriangle = styled.div`
+  width: 0;
+  height: 0;
+  border-left: ${p => p.size}px solid transparent;
+  border-right: ${p => p.size}px solid transparent;
+  border-top: ${p => p.size}px solid ${p => p.theme.colors[p.color]};
+`
+
+export default ({ size = 5, color = 'mouse' }: { size: number, color: string }) => (
+  <Box flow={1}>
+    <UpTriangle size={size} color={color} />
+    <DownTriangle size={size} color={color} />
+  </Box>
+)
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index d72b218e..59479cd6 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -11,6 +11,8 @@ import Box from 'components/base/Box'
 import Input from 'components/base/Input'
 import Search from 'components/base/Search'
 
+import Triangles from './Triangles'
+
 type Props = {
   items: Array<Object>,
   itemToString: Function,
@@ -34,8 +36,6 @@ const TriggerBtn = styled(Box).attrs({
   width: 100%;
   color: ${p => p.theme.colors.steel};
   background: ${p => p.theme.colors.white};
-  border-bottom-left-radius: ${p => (p.isOpen ? 0 : '')};
-  border-bottom-right-radius: ${p => (p.isOpen ? 0 : '')};
   &:focus {
     outline: none;
     box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
@@ -99,6 +99,7 @@ class Select extends PureComponent<Props> {
       fuseOptions,
       highlight,
       renderHighlight,
+      renderSelected,
       onChange,
     } = this.props
 
@@ -113,19 +114,16 @@ class Select extends PureComponent<Props> {
           isOpen,
           inputValue,
           openMenu,
+          selectedItem,
           ...downshiftProps
         }) => (
           <Container {...getRootProps({ refKey: 'innerRef' })}>
             {searchable ? (
-              <Input
-                keepEvent
-                {...getInputProps({ placeholder: 'Chess?' })}
-                isOpen={isOpen}
-                onClick={openMenu}
-              />
+              <Input keepEvent {...getInputProps({ placeholder: 'Chess?' })} onClick={openMenu} />
             ) : (
-              <TriggerBtn isOpen={isOpen} {...getButtonProps()} tabIndex={0}>
-                lablala
+              <TriggerBtn {...getButtonProps()} tabIndex={0} horizontal align="center" flow={2}>
+                <Box grow>{renderSelected(selectedItem)}</Box>
+                <Triangles />
               </TriggerBtn>
             )}
             {isOpen &&
diff --git a/src/components/base/Select/stories.js b/src/components/base/Select/stories.js
index e7fb9110..e73a0344 100644
--- a/src/components/base/Select/stories.js
+++ b/src/components/base/Select/stories.js
@@ -58,6 +58,7 @@ stories.add('basic', () => (
       <Select
         items={itemsChessPlayers}
         itemToString={item => (item ? item.name : '')}
+        renderSelected={item => (item ? item.name : 'Choose a chess player')}
         onChange={onChange}
       />
     )}