From 3dfe9a775488b485ac8d233f0af006557593bbc4 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 17 Jan 2018 17:20:23 +0100
Subject: [PATCH 1/4] Make the Select explicitely searchable

---
 src/components/base/Search/index.js   |   6 +-
 src/components/base/Select/index.js   | 112 ++++++++++++++++++--------
 src/components/base/Select/stories.js |  82 ++++++++++++++++++-
 3 files changed, 161 insertions(+), 39 deletions(-)

diff --git a/src/components/base/Search/index.js b/src/components/base/Search/index.js
index f1945bb5..d8927ccf 100644
--- a/src/components/base/Search/index.js
+++ b/src/components/base/Search/index.js
@@ -42,7 +42,8 @@ class Search extends PureComponent<Props, State> {
   componentWillReceiveProps(nextProps: Props) {
     if (nextProps.value !== this.props.value) {
       if (this._fuse) {
-        this.formatResults(this._fuse.search(nextProps.value), nextProps)
+        const results = this._fuse.search(nextProps.value)
+        this.formatResults(results, nextProps)
       }
     }
     if (nextProps.highlight !== this.props.highlight) {
@@ -63,7 +64,8 @@ class Search extends PureComponent<Props, State> {
       includeMatches: highlight,
     })
 
-    this.formatResults(this._fuse.search(value), props)
+    const results = this._fuse.search(value)
+    this.formatResults(results, props)
   }
 
   formatResults(results: Array<Object>, props: Props) {
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index ae98ff35..d72b218e 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -3,6 +3,7 @@
 import React, { PureComponent } from 'react'
 import Downshift from 'downshift'
 import styled from 'styled-components'
+import { space } from 'styled-system'
 
 import type { Element } from 'react'
 
@@ -16,14 +17,29 @@ type Props = {
   onChange: Function,
   fuseOptions?: Object,
   highlight?: boolean,
+  searchable?: boolean,
   renderHighlight?: string => Element<*>,
+  renderItem?: (*) => Element<*>,
 }
 
 const Container = styled(Box).attrs({ relative: true, color: 'steel' })``
 
-const SearchInput = styled(Input)`
+const TriggerBtn = styled(Box).attrs({
+  p: 2,
+})`
+  ${space};
+  border: 1px solid ${p => p.theme.colors.mouse};
+  border-radius: 3px;
+  display: flex;
+  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;
+  }
 `
 
 const Item = styled(Box).attrs({
@@ -38,65 +54,93 @@ const ItemWrapper = styled(Box)`
   }
 `
 
-const Dropdown = styled(Box)`
+const Dropdown = styled(Box).attrs({
+  mt: 1,
+})`
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   border: 1px solid ${p => p.theme.colors.mouse};
-  border-top: none;
   max-height: 300px;
   overflow-y: auto;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-radius: 3px;
   box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
 `
 
 class Select extends PureComponent<Props> {
+  renderItems = (items: Array<Object>, downshiftProps: Object) => {
+    const { renderItem } = this.props
+    const { getItemProps, highlightedIndex } = downshiftProps
+    return (
+      <Dropdown>
+        {items.length ? (
+          items.map((item, i) => (
+            <ItemWrapper key={item.key} {...getItemProps({ item })}>
+              <Item highlighted={i === highlightedIndex}>
+                {renderItem ? renderItem(item) : <span>{item.name_highlight || item.name}</span>}
+              </Item>
+            </ItemWrapper>
+          ))
+        ) : (
+          <ItemWrapper>
+            <Item>{'No results'}</Item>
+          </ItemWrapper>
+        )}
+      </Dropdown>
+    )
+  }
+
   render() {
-    const { items, itemToString, fuseOptions, highlight, renderHighlight, onChange } = this.props
+    const {
+      items,
+      searchable,
+      itemToString,
+      fuseOptions,
+      highlight,
+      renderHighlight,
+      onChange,
+    } = this.props
+
     return (
       <Downshift
         itemToString={itemToString}
         onChange={onChange}
         render={({
           getInputProps,
-          getItemProps,
+          getButtonProps,
           getRootProps,
           isOpen,
           inputValue,
-          highlightedIndex,
           openMenu,
+          ...downshiftProps
         }) => (
           <Container {...getRootProps({ refKey: 'innerRef' })}>
-            <SearchInput
-              keepEvent
-              {...getInputProps({ placeholder: 'Chess?' })}
-              isOpen={isOpen}
-              onClick={openMenu}
-            />
-            {isOpen && (
-              <Search
-                value={inputValue}
-                items={items}
-                fuseOptions={fuseOptions}
-                highlight={highlight}
-                renderHighlight={renderHighlight}
-                render={items =>
-                  items.length ? (
-                    <Dropdown>
-                      {items.map((item, i) => (
-                        <ItemWrapper key={item.key} {...getItemProps({ item })}>
-                          <Item highlighted={i === highlightedIndex}>
-                            <span>{item.name_highlight || item.name}</span>
-                          </Item>
-                        </ItemWrapper>
-                      ))}
-                    </Dropdown>
-                  ) : null
-                }
+            {searchable ? (
+              <Input
+                keepEvent
+                {...getInputProps({ placeholder: 'Chess?' })}
+                isOpen={isOpen}
+                onClick={openMenu}
               />
+            ) : (
+              <TriggerBtn isOpen={isOpen} {...getButtonProps()} tabIndex={0}>
+                lablala
+              </TriggerBtn>
             )}
+            {isOpen &&
+              (searchable ? (
+                <Search
+                  value={inputValue}
+                  items={items}
+                  fuseOptions={fuseOptions}
+                  highlight={highlight}
+                  renderHighlight={renderHighlight}
+                  render={items => this.renderItems(items, downshiftProps)}
+                />
+              ) : (
+                this.renderItems(items, downshiftProps)
+              ))}
           </Container>
         )}
       />
diff --git a/src/components/base/Select/stories.js b/src/components/base/Select/stories.js
index 8c35a4fe..e7fb9110 100644
--- a/src/components/base/Select/stories.js
+++ b/src/components/base/Select/stories.js
@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import { storiesOf } from '@storybook/react'
 
+import Box from 'components/base/Box'
 import Select from 'components/base/Select'
 import Text from 'components/base/Text'
 
 const stories = storiesOf('Select', module)
 
-const items = [
+const itemsChessPlayers = [
   { key: 'aleksandr-grichtchouk', name: 'Aleksandr Grichtchouk' },
   { key: 'fabiano-caruana', name: 'Fabiano Caruana' },
   { key: 'garry-kasparov', name: 'Garry Kasparov' },
@@ -20,9 +22,52 @@ const items = [
   { key: 'vladimir-kramnik', name: 'Vladimir Kramnik' },
 ]
 
+class Wrapper extends PureComponent {
+  static propTypes = {
+    children: PropTypes.func.isRequired,
+  }
+
+  state = {
+    item: null,
+  }
+
+  handleChange = item => this.setState({ item })
+
+  render() {
+    const { children } = this.props
+    const { item } = this.state
+    return (
+      <div>
+        {children(this.handleChange)}
+        {item && (
+          <Box mt={2}>
+            <pre>
+              {'You selected:'}
+              {JSON.stringify(item)}
+            </pre>
+          </Box>
+        )}
+      </div>
+    )
+  }
+}
+
 stories.add('basic', () => (
+  <Wrapper>
+    {onChange => (
+      <Select
+        items={itemsChessPlayers}
+        itemToString={item => (item ? item.name : '')}
+        onChange={onChange}
+      />
+    )}
+  </Wrapper>
+))
+
+stories.add('searchable', () => (
   <Select
-    items={items}
+    items={itemsChessPlayers}
+    searchable
     highlight
     fuseOptions={{ keys: ['name'] }}
     itemToString={item => (item ? item.name : '')}
@@ -33,3 +78,34 @@ stories.add('basic', () => (
     )}
   />
 ))
+
+const itemsColors = [
+  { key: 'absolute zero', name: 'Absolute Zero', color: '#0048BA' },
+  { key: 'acid green', name: 'Acid Green', color: '#B0BF1A' },
+  { key: 'aero', name: 'Aero', color: '#7CB9E8' },
+  { key: 'aero blue', name: 'Aero Blue', color: '#C9FFE5' },
+  { key: 'african violet', name: 'African Violet', color: '#B284BE' },
+  { key: 'air force blue (usaf)', name: 'Air Force Blue (USAF)', color: '#00308F' },
+  { key: 'air superiority blue', name: 'Air Superiority Blue', color: '#72A0C1' },
+]
+
+stories.add('custom render', () => (
+  <Select
+    items={itemsColors}
+    highlight
+    searchable
+    fuseOptions={{ keys: ['name', 'color'] }}
+    itemToString={item => (item ? item.name : '')}
+    renderHighlight={(text, key) => (
+      <Text key={key} fontWeight="bold">
+        {text}
+      </Text>
+    )}
+    renderItem={item => (
+      <Box horizontal flow={2}>
+        <Box bg={item.color} style={{ width: 20, height: 20 }} />
+        <span>{item.name_highlight || item.name}</span>
+      </Box>
+    )}
+  />
+))

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 2/4] 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}
       />
     )}

From cfcbdcdd78e9015be5c6911150ab75d8f6c83684 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 17 Jan 2018 17:56:31 +0100
Subject: [PATCH 3/4] Handle placeholder efficiently in both
 searchable/unsearchable Select

---
 src/components/base/Select/index.js   | 14 ++++++++++++--
 src/components/base/Select/stories.js |  5 +++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index 59479cd6..cfe22a14 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -8,6 +8,7 @@ import { space } from 'styled-system'
 import type { Element } from 'react'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 import Input from 'components/base/Input'
 import Search from 'components/base/Search'
 
@@ -20,7 +21,9 @@ type Props = {
   fuseOptions?: Object,
   highlight?: boolean,
   searchable?: boolean,
+  placeholder?: string,
   renderHighlight?: string => Element<*>,
+  renderSelected?: string => Element<*>,
   renderItem?: (*) => Element<*>,
 }
 
@@ -100,6 +103,7 @@ class Select extends PureComponent<Props> {
       highlight,
       renderHighlight,
       renderSelected,
+      placeholder,
       onChange,
     } = this.props
 
@@ -119,10 +123,16 @@ class Select extends PureComponent<Props> {
         }) => (
           <Container {...getRootProps({ refKey: 'innerRef' })}>
             {searchable ? (
-              <Input keepEvent {...getInputProps({ placeholder: 'Chess?' })} onClick={openMenu} />
+              <Input keepEvent {...getInputProps({ placeholder })} onClick={openMenu} />
             ) : (
               <TriggerBtn {...getButtonProps()} tabIndex={0} horizontal align="center" flow={2}>
-                <Box grow>{renderSelected(selectedItem)}</Box>
+                <Box grow>
+                  {selectedItem ? (
+                    renderSelected(selectedItem)
+                  ) : (
+                    <Text color="mouse">{placeholder}</Text>
+                  )}
+                </Box>
                 <Triangles />
               </TriggerBtn>
             )}
diff --git a/src/components/base/Select/stories.js b/src/components/base/Select/stories.js
index e73a0344..fbb49b55 100644
--- a/src/components/base/Select/stories.js
+++ b/src/components/base/Select/stories.js
@@ -56,9 +56,9 @@ stories.add('basic', () => (
   <Wrapper>
     {onChange => (
       <Select
+        placeholder="Choose a chess player..."
         items={itemsChessPlayers}
-        itemToString={item => (item ? item.name : '')}
-        renderSelected={item => (item ? item.name : 'Choose a chess player')}
+        renderSelected={item => item.name}
         onChange={onChange}
       />
     )}
@@ -67,6 +67,7 @@ stories.add('basic', () => (
 
 stories.add('searchable', () => (
   <Select
+    placeholder="Choose a chess player..."
     items={itemsChessPlayers}
     searchable
     highlight

From 9d34b95565d051db4ad59fcff236aa241888f6be Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 17 Jan 2018 18:06:21 +0100
Subject: [PATCH 4/4] Unified triangles positionning in searchable/unsearchable
 Selects

---
 src/components/base/Select/index.js   | 22 +++++++++++++++++++++-
 src/components/base/Select/stories.js |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index cfe22a14..5591e59b 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -71,6 +71,21 @@ const Dropdown = styled(Box).attrs({
   box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
 `
 
+const FloatingTriangles = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+  mr: 2,
+})`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  // to "simulate" border to make arrows appears at the exact same place as
+  // the no-input version
+  padding-right: 1px;
+`
+
 class Select extends PureComponent<Props> {
   renderItems = (items: Array<Object>, downshiftProps: Object) => {
     const { renderItem } = this.props
@@ -123,7 +138,12 @@ class Select extends PureComponent<Props> {
         }) => (
           <Container {...getRootProps({ refKey: 'innerRef' })}>
             {searchable ? (
-              <Input keepEvent {...getInputProps({ placeholder })} onClick={openMenu} />
+              <Box relative>
+                <Input keepEvent {...getInputProps({ placeholder })} onClick={openMenu} />
+                <FloatingTriangles>
+                  <Triangles />
+                </FloatingTriangles>
+              </Box>
             ) : (
               <TriggerBtn {...getButtonProps()} tabIndex={0} horizontal align="center" flow={2}>
                 <Box grow>
diff --git a/src/components/base/Select/stories.js b/src/components/base/Select/stories.js
index fbb49b55..ab2f826a 100644
--- a/src/components/base/Select/stories.js
+++ b/src/components/base/Select/stories.js
@@ -93,6 +93,7 @@ const itemsColors = [
 
 stories.add('custom render', () => (
   <Select
+    placeholder="Choose a color..."
     items={itemsColors}
     highlight
     searchable