From c4106d929cebb7ffc4650ee9233a1e3bda3001b4 Mon Sep 17 00:00:00 2001
From: Robert Douglas <rob@anucreative.com>
Date: Tue, 23 Jul 2019 16:28:08 +0200
Subject: [PATCH] feat: add `renderItem` prop to allow formatting of options
 (#222)

---
 src/components/ConnectedField/doc.mdx |  71 +++++++++++----
 src/components/Icon/index.js          |  11 ++-
 src/components/Select/doc.mdx         |  96 +++++++++++++++++++--
 src/components/Select/index.js        | 119 +++++++++++++++-----------
 src/components/Select/styles.js       |  13 ++-
 5 files changed, 230 insertions(+), 80 deletions(-)

diff --git a/src/components/ConnectedField/doc.mdx b/src/components/ConnectedField/doc.mdx
index 8596731c30..0bfbec6801 100644
--- a/src/components/ConnectedField/doc.mdx
+++ b/src/components/ConnectedField/doc.mdx
@@ -9,6 +9,7 @@ import { Props } from 'docz'
 import { Playground } from '../../../docz/'
 import { DoczCodeBlock } from '../../../docz/CodeBlock'
 
+import { Box } from '../Box'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
 import { ConnectedField } from '../ConnectedField'
@@ -36,21 +37,40 @@ You can find additional props for each field component in [Fields](/fields/file-
 <Playground>
   {() => {
     // Data
-    const toTitleCase = str => str.charAt(0).toUpperCase() + str.slice(1)
     const months = [
-      'january',
-      'february',
-      'march',
-      'april',
-      'may',
-      'june',
-      'july',
-      'august',
-      'september',
-      'october',
-      'november',
-      'december'
-    ].map(month => ({ label: toTitleCase(month), value: month }))
+      { value: 'january', label: 'January' },
+      { value: 'february', label: 'February' },
+      { value: 'march', label: 'March' },
+      { value: 'april', label: 'April' },
+      { value: 'may', label: 'May' },
+      { value: 'june', label: 'June' },
+      { value: 'july', label: 'July' },
+      { value: 'august', label: 'August' },
+      { value: 'september', label: 'September' },
+      { value: 'october', label: 'October' },
+      { value: 'november', label: 'November' },
+      { value: 'december', label: 'December' }
+    ]
+    const colors = [
+      { value: 'red', label: 'Red' },
+      { value: 'orange', label: 'Orange' },
+      { value: 'green', label: 'Green' },
+      { value: 'blue', label: 'Blue' },
+      { value: 'pink', label: 'Pink' },
+      { value: 'yellow', label: 'Yellow' }
+    ]
+    const networks = [
+      { value: 'behance', label: 'Behance' },
+      { value: 'dribbble', label: 'Dribbble' },
+      { value: 'facebook', label: 'Facebook' },
+      { value: 'github', label: 'Github' },
+      { value: 'instagram', label: 'Instagram' },
+      { value: 'linkedin', label: 'Linkedin' },
+      { value: 'stackoverflow', label: 'Stack Overflow' },
+      { value: 'twitter', label: 'Twitter' },
+      { value: 'xing', label: 'Xing' },
+      { value: 'youtube', label: 'Youtube' }
+    ]
     // State
     const initialValues = {
       firstName: 'Fish',
@@ -59,8 +79,8 @@ You can find additional props for each field component in [Fields](/fields/file-
       dogs: true,
       hungry: true,
       weekday: 'monday',
-      month: months[1],
-      tags: [months[3], months[2]],
+      month: { label: 'February', value: 'february' },
+      tags: [],
       partyDate: Date.now()
     }
     // Render
@@ -149,21 +169,34 @@ You can find additional props for each field component in [Fields](/fields/file-
                 <ConnectedField name="dogs" component={InputCheckbox} label="Dogs" />
                 <ConnectedField name="cats" component={InputCheckbox} label="Cats" />
               </FieldGroup>
+              <ConnectedField
+                name="network"
+                component={Select}
+                options={networks}
+                label="Social network"
+                placeholder="Choose network"
+                renderItem={option => (
+                  <Box display="flex" alignItems="center">
+                    <Icon name={option.value} size="sm" mr="xs" /> <span>{option.label}</span>
+                  </Box>
+                )}
+              />
               <ConnectedField
                 name="month"
                 component={Select}
                 options={months}
                 label="Favourite month"
                 placeholder="Choose month"
+                required
               />
               <ConnectedField
-                name="tags"
+                name="colors"
                 component={Select}
-                options={months}
+                options={colors}
                 isMultiple
                 isSearchable
                 isCreatable
-                label="Tag months"
+                label="Colors"
               />
               <ConnectedField
                 name="summary"
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
index a9e81c3ff0..89badc3a06 100644
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@@ -5,8 +5,11 @@ import * as S from './styles'
 import { icons } from './icons'
 
 export const Icon = forwardRef(({ name, ...props }, ref) => {
-  const iconName = name.toLowerCase()
-  const iconConfig = icons[iconName]
+  if (!name) {
+    return null
+  }
+
+  const iconConfig = icons[name]
 
   if (!iconConfig) {
     return null
@@ -15,11 +18,11 @@ export const Icon = forwardRef(({ name, ...props }, ref) => {
   return (
     <S.Icon
       dangerouslySetInnerHTML={{ __html: iconConfig.block }}
-      data-testid={`icon-${iconName}`}
+      data-testid={`icon-${name}`}
       ref={ref}
       role="img"
       stroked={iconConfig.stroked}
-      title={iconName}
+      title={name}
       viewBox={iconConfig.viewBox || '0 0 100 100'}
       {...props}
     />
diff --git a/src/components/Select/doc.mdx b/src/components/Select/doc.mdx
index f009fc865d..068cca544b 100644
--- a/src/components/Select/doc.mdx
+++ b/src/components/Select/doc.mdx
@@ -9,6 +9,7 @@ import { Props } from 'docz'
 import { Playground } from '../../../docz/'
 
 import { Select } from './index'
+import { Icon } from '../Icon'
 
 # Select
 
@@ -26,7 +27,16 @@ import { Select } from './index'
     ]
     const [value, setValue] = useState(ITEMS[2])
     const handleChange = e => setValue(e.target.value)
-    return <Select options={ITEMS} name="default" onChange={handleChange} value={value} />
+    return (
+      <Select
+        options={ITEMS}
+        name="default"
+        onChange={handleChange}
+        value={value}
+        mt={20}
+        borderRadius={15}
+      />
+    )
   }}
 </Playground>
 
@@ -82,7 +92,7 @@ To be able to filter (i.e. search) the results, add the `isSearchable` prop.
 
 ## Required
 
-You can normally clear the selected value of a `Select` but if it's has a `required` prop we'll prevent the ability to remove a chosen option.
+You can normally clear the selected value of a `Select` but if it has a `required` prop we'll prevent the ability to remove a chosen option.
 
 <Playground>
   {() => {
@@ -96,11 +106,47 @@ You can normally clear the selected value of a `Select` but if it's has a `requi
     ]
     const [value, setValue] = useState(ITEMS[2])
     const handleChange = e => {
-      console.debug('e', e.target)
+      setValue(e.target.value)
+    }
+    return <Select required options={ITEMS} name="required" onChange={handleChange} value={value} />
+  }}
+</Playground>
+
+## Formatting options
+
+Passing a `renderItem` function allows you to format the options in the list (and the selected option).
+
+<Playground>
+  {() => {
+    const ITEMS = [
+      { value: 'behance', label: 'Behance' },
+      { value: 'dribbble', label: 'Dribbble' },
+      { value: 'facebook', label: 'Facebook' },
+      { value: 'github', label: 'Github' },
+      { value: 'instagram', label: 'Instagram' },
+      { value: 'linkedin', label: 'Linkedin' },
+      { value: 'stackoverflow', label: 'Stack Overflow' },
+      { value: 'twitter', label: 'Twitter' },
+      { value: 'xing', label: 'Xing' },
+      { value: 'youtube', label: 'Youtube' }
+    ]
+    const [value, setValue] = useState(ITEMS[2])
+    const handleChange = e => {
       setValue(e.target.value)
     }
     return (
-      <Select required options={ITEMS} name="has_default" onChange={handleChange} value={value} />
+      <Select
+        required
+        options={ITEMS}
+        name="rich"
+        onChange={handleChange}
+        value={value}
+        renderItem={option => (
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Icon name={option.value} size="sm" mr="xs" /> <span>{option.label}</span>
+          </div>
+        )}
+      />
     )
   }}
 </Playground>
@@ -129,6 +175,44 @@ If your field is searchable (i.e. has the `isSearchable` prop, you can _add_ ite
   }}
 </Playground>
 
+## Combining props
+
+You can pass any combination of the props above. For example below, we have a `Select` that allows you to search the options, choose multiple options, and create new options.
+
+<Playground>
+  {() => {
+    const ITEMS = [
+      { value: 'behance', label: 'Behance' },
+      { value: 'dribbble', label: 'Dribbble' },
+      { value: 'facebook', label: 'Facebook' },
+      { value: 'github', label: 'Github' },
+      { value: 'instagram', label: 'Instagram' },
+      { value: 'linkedin', label: 'Linkedin' },
+      { value: 'stackoverflow', label: 'Stack Overflow' },
+      { value: 'twitter', label: 'Twitter' },
+      { value: 'xing', label: 'Xing' },
+      { value: 'youtube', label: 'Youtube' }
+    ]
+    const [value, setValue] = useState(ITEMS[2])
+    const handleChange = e => setValue(e.target.value)
+    return (
+      <Select
+        isCreatable
+        isMultiple
+        isSearchable
+        options={ITEMS}
+        name="creatable"
+        onChange={handleChange}
+        renderItem={option => (
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Icon name={option.value} size="sm" mr="xs" /> <span>{option.label}</span>
+          </div>
+        )}
+      />
+    )
+  }}
+</Playground>
+
 ## Sizes
 
 Use size property with `sm` `md` or `lg`(default).
@@ -187,7 +271,9 @@ Use size property with `sm` `md` or `lg`(default).
     ]
     const [value, setValue] = useState(ITEMS[2])
     const handleChange = e => setValue(e.target.value)
-    return <Select disabled options={ITEMS} name="disabled" onChange={handleChange} />
+    return (
+      <Select disabled options={ITEMS} name="disabled" onChange={handleChange} value={ITEMS[3]} />
+    )
   }}
 </Playground>
 
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index 464ad312b8..e0296038a6 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -1,5 +1,5 @@
 import React, { forwardRef, useEffect, useState } from 'react'
-import { arrayOf, bool, func, shape, string } from 'prop-types'
+import { arrayOf, bool, func, oneOfType, shape, string } from 'prop-types'
 import Downshift from 'downshift'
 import matchSorter from 'match-sorter'
 import kebabCase from 'lodash.kebabcase'
@@ -14,10 +14,12 @@ import { createEvent } from '../../utils/'
 import * as S from './styles'
 
 // Helpers
+const EMPTY = ''
 const itemToString = item => (item ? item.label : '')
 const ensureArray = value => (Array.isArray(value) ? value : value ? [value] : [])
 const getUniqueValue = (item, values) => uniqBy([...values, item], item => item.value)
 const isValueExisting = (value, values) => values.find(item => item.value === kebabCase(value))
+const defaultRenderOption = option => (option ? option.label : EMPTY)
 
 export const Select = forwardRef(
   (
@@ -33,15 +35,17 @@ export const Select = forwardRef(
       onChange,
       onFocus,
       placeholder = 'Choose from…',
+      renderItem = defaultRenderOption,
       required,
       size = 'lg',
       value: defaultValue,
-      variant
+      variant,
+      ...rest
     },
     ref
   ) => {
     const selectedItem = (!isMultiple && defaultValue) || null
-    const defaultInputValue = selectedItem ? defaultValue.label : ''
+    const defaultInputValue = selectedItem ? defaultValue.label : EMPTY
     // Values will always be an array internally
     const [values, setValues] = useState(ensureArray(defaultValue))
     const [inputValue, setInputValue] = useState(defaultInputValue)
@@ -54,11 +58,19 @@ export const Select = forwardRef(
     }, [defaultValue, defaultInputValue])
 
     // Update results if searchable
-    const handleInputChange = value => {
+    const handleInputChange = (value, openMenu) => {
       if (isSearchable) {
+        // Update
         const results = matchSorter(options, value, { keys: ['label'] })
         setInputValue(value)
         setResults(results)
+        openMenu()
+
+        // We have to manage the cursor position when searching on field that isMultiple
+        const selection = window.getSelection()
+        const node = selection.focusNode
+        const offset = selection.focusOffset
+        setImmediate(() => selection.setPosition(node, offset))
       }
     }
 
@@ -107,7 +119,6 @@ export const Select = forwardRef(
     return (
       <Downshift
         itemToString={itemToString}
-        onInputValueChange={handleInputChange}
         onOuterClick={handleOuterClick}
         onSelect={handleSelect}
         selectedItem={selectedItem}
@@ -121,31 +132,45 @@ export const Select = forwardRef(
           getToggleButtonProps,
           highlightedIndex,
           isOpen,
+          openMenu,
           toggleMenu
         }) => {
           const isShowCreate = isCreatable && inputValue && !isValueExisting(inputValue, values)
           const isShowMenu = isOpen && (results.length || isShowCreate)
           const isShowDeleteIcon = inputValue && !isOpen && !required
+          const inputProps = getInputProps({
+            autoComplete: 'off',
+            autoFocus,
+            contentEditable: isSearchable,
+            disabled,
+            name,
+            onBlur,
+            onClick: toggleMenu,
+            onFocus,
+            placeholder,
+            readOnly: !isSearchable,
+            ref: ref,
+            size,
+            value: inputValue || EMPTY,
+            variant: isOpen ? 'focused' : variant
+          })
+
+          let content = EMPTY
+          if (isMultiple) {
+            content = inputValue
+          } else if (values.length) {
+            content = renderItem(values[0])
+          }
 
           return (
-            <S.Wrapper {...getRootProps()}>
+            <S.Wrapper {...getRootProps()} {...rest}>
               <S.Input
-                {...getInputProps({
-                  autoComplete: 'off',
-                  autoFocus,
-                  disabled,
-                  name,
-                  onBlur,
-                  onClick: toggleMenu,
-                  onFocus,
-                  placeholder,
-                  readOnly: !isSearchable,
-                  ref: ref,
-                  size,
-                  value: inputValue,
-                  variant: isOpen ? 'focused' : variant
-                })}
-              />
+                {...inputProps}
+                onInput={e => handleInputChange(e.target.innerText, openMenu)}
+                suppressContentEditableWarning
+              >
+                {content}
+              </S.Input>
               <S.Indicators size={size}>
                 {isShowDeleteIcon ? (
                   <S.DropDownIndicator
@@ -171,22 +196,20 @@ export const Select = forwardRef(
               </S.Indicators>
               {isShowMenu ? (
                 <S.Menu {...getMenuProps()}>
-                  {results.map((item, index) => {
-                    return (
-                      <S.Item
-                        key={item.value}
-                        {...getItemProps({
-                          index,
-                          isExisting: isMultiple && isValueExisting(item.value, values),
-                          isHighlighted: highlightedIndex === index,
-                          isSelected: !isMultiple && isEqual(selectedItem, item),
-                          item
-                        })}
-                      >
-                        {item.label}
-                      </S.Item>
-                    )
-                  })}
+                  {results.map((item, index) => (
+                    <S.Item
+                      key={item.value}
+                      {...getItemProps({
+                        index,
+                        isExisting: isMultiple && isValueExisting(item.value, values),
+                        isHighlighted: highlightedIndex === index,
+                        isSelected: !isMultiple && isEqual(selectedItem, item),
+                        item
+                      })}
+                    >
+                      {renderItem(item)}
+                    </S.Item>
+                  ))}
                   {isShowCreate && (
                     <S.Item
                       key="add"
@@ -221,6 +244,11 @@ export const Select = forwardRef(
   }
 )
 
+const OPTION_TYPE = shape({
+  label: string,
+  value: string
+})
+
 Select.propTypes = {
   autoFocus: bool,
   disabled: bool,
@@ -232,21 +260,12 @@ Select.propTypes = {
   onChange: func,
   onFocus: func,
   onKeyDown: func,
-  options: arrayOf(
-    shape({
-      label: string,
-      value: string
-    })
-  ),
+  options: arrayOf(OPTION_TYPE),
   placeholder: string.isRequired,
+  renderItem: func,
   required: bool,
   searchable: bool,
   size: SIZES_TYPE,
-  value: arrayOf(
-    shape({
-      label: string,
-      value: string
-    })
-  ),
+  value: oneOfType([OPTION_TYPE, arrayOf(OPTION_TYPE)]),
   variant: VARIANTS_TYPE
 }
diff --git a/src/components/Select/styles.js b/src/components/Select/styles.js
index a23f634a66..3f388a1949 100644
--- a/src/components/Select/styles.js
+++ b/src/components/Select/styles.js
@@ -9,19 +9,28 @@ import { Tag } from '../Tag/styles'
 
 export const Wrapper = styled.div`
   position: relative;
+  ${system}
 `
 
-export const Input = styled.input(
+export const Input = styled.div(
   ({ size }) => css`
     ${fieldStyles};
     ${overflowEllipsis};
     padding-right: ${th(`fields.sizes.${size}.height`)};
     cursor: default;
+
+    br {
+      display: none;
+    }
+
+    &:empty::before {
+      content: attr(placeholder);
+      opacity: 0.5;
+    }
   `
 )
 
 export const Menu = styled.ul`
-  ${system};
   ${th('fields.select.default')};
   position: absolute;
   z-index: 2;