Merge pull request #407 from smiclea/autocomplete-embedded

Embed Autocomplete component in migration image

src/components/atoms/AutocompleteInput/AutocompleteInput.jsx

@@ -17,7 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled, { css } from 'styled-components'
 
-import arrowImage from './images/arrow.js'
+import arrowImage from './images/arrow'
 
 import TextInput from '../TextInput'
 import Palette from '../../styleUtils/Palette'
@@ -35,28 +35,35 @@ const getWidth = props => {
   return StyleProps.inputSizes.regular.width - 2
 }
 
+const getBorder = props => {
+  if (props.embedded) {
+    return css`border: none;`
+  }
+  return css`border: 1px solid ${props.highlight ? Palette.alert : props.disabled ? Palette.grayscale[0] : Palette.grayscale[3]};`
+}
+
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
   position: relative;
-  width: ${props => getWidth(props)}px;
+  width: ${props => props.embedded ? 'calc(100% + 8px)' : `${getWidth(props)}px`};
   height: ${props => props.large ? StyleProps.inputSizes.large.height - 2
     : StyleProps.inputSizes.regular.height - 2}px;
-  border: 1px solid ${props => props.highlight ? Palette.alert : props.disabled ? Palette.grayscale[0] : Palette.grayscale[3]};
+  ${props => getBorder(props)}
   border-radius: ${StyleProps.borderRadius};
   cursor: ${props => props.disabled ? 'default' : 'pointer'};
   transition: all ${StyleProps.animations.swift};
   background: ${props => props.disabled ? Palette.grayscale[0] : 'white'};
 
-  #dropdown-arrow-image {stroke: ${props => props.disabled ? Palette.grayscale[0] : Palette.grayscale[4]};}
+  #dropdown-arrow-image {stroke: ${props => props.disabled ? Palette.grayscale[3] : Palette.black};}
   ${props => props.focus ? css`border-color: ${Palette.primary};` : ''}
 `
 const Arrow = styled.div`
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 30px;
-  height: 30px;
+  top: 8px;
+  right: 8px;
+  width: 16px;
+  height: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -72,6 +79,7 @@ type Props = {
   large?: boolean,
   onFocus?: () => void,
   highlight?: boolean,
+  embedded?: boolean,
 }
 type State = {
   textInputFocus: boolean,
@@ -89,6 +97,7 @@ class AutocompleteInput extends React.Component<Props, State> {
         focus={this.state.textInputFocus}
         highlight={this.props.highlight}
         disabled={this.props.disabled}
+        embedded={this.props.embedded}
         innerRef={e => {
           if (this.props.customRef) {
             this.props.customRef(e)
@@ -103,8 +112,11 @@ class AutocompleteInput extends React.Component<Props, State> {
           value={this.props.value}
           onChange={e => { this.props.onChange(e.target.value) }}
           embedded
-          width={this.props.width ? `${this.props.width - 40}px` : '180px'}
-          style={{ marginLeft: '16px' }}
+          width={this.props.embedded ? '100%' : this.props.width ? `${this.props.width - 40}px` : '180px'}
+          style={{
+            marginLeft: this.props.embedded ? 0 : '16px',
+            paddingRight: this.props.embedded ? '32px' : '8px',
+          }}
           height="29px"
           lineHeight="30px"
           placeholder="Type to search ..."

src/components/atoms/AutocompleteInput/images/arrow.js

@@ -13,22 +13,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 const arrow = `<?xml version="1.0" encoding="UTF-8"?>
-  <svg width="12px" height="7px" viewBox="0 0 12 6" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
+<svg width="14px" height="8px" viewBox="0 0 14 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
 
-      <desc>Created with Sketch.</desc>
-      <defs></defs>
-      <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
-      stroke-linecap="round" stroke-linejoin="round">
-          <g id="dropdown-arrow-image" transform="translate(-171.000000, -13.000000)">
-              <g id="Icon/Chevron/Grey" transform="translate(169.000000, 8.000000)">
-                  <polyline id="Rectangle-Copy" transform="translate(8.000000, 5.500000)
-                  rotate(-315.000000) translate(-8.000000, -5.500000) "
-                  points="11.8890873 1.6109127 11.8890873 9.3890873 4.1109127 9.3890873"></polyline>
-              </g>
-          </g>
-      </g>
-  </svg>`
+    <desc>Created with Sketch.</desc>
+    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="dropdown-arrow-image" transform="translate(-1161.000000, -300.000000)" stroke-width="1.5">
+            <g id="Elements/Item/Wizard/Network-Copy-2" transform="translate(256.000000, 272.000000)">
+                <g id="Dropdown-Stroke-Copy-2" transform="translate(704.000000, 16.000000)">
+                    <g id="Icon/Chevron/Black" transform="translate(200.000000, 8.000000)">
+                        <polyline id="Rectangle-Copy" transform="translate(8.000000, 5.500000) rotate(-315.000000) translate(-8.000000, -5.500000) " points="11.8890873 1.6109127 11.8890873 9.3890873 4.1109127 9.3890873"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`
 
 export default arrow

src/components/molecules/AutocompleteDropdown/AutocompleteDropdown.jsx

@@ -43,7 +43,7 @@ const getWidth = props => {
 }
 const Wrapper = styled.div`
   position: relative;
-  ${props => props.width ? css`width: ${props.width}px;` : ''}
+  ${props => props.embedded ? css`width: 100%;` : props.width ? css`width: ${props.width}px;` : ''}
 `
 const Required = styled.div`
   position: absolute;
@@ -119,6 +119,7 @@ type Props = {
   highlight?: boolean,
   'data-test-id'?: string,
   required?: boolean,
+  embedded?: boolean,
 }
 type State = {
   showDropdownList: boolean,
@@ -322,8 +323,9 @@ class AutocompleteDropdown extends React.Component<Props, State> {
       scrollOffset = -parseInt(document.body && document.body.style.top, 10)
     }
 
+    let widthDiff = this.listRef.offsetWidth - this.buttonRef.offsetWidth
     this.listRef.style.top = `${listTop + (window.pageYOffset || scrollOffset)}px`
-    this.listRef.style.left = `${this.buttonRect.left + window.pageXOffset}px`
+    this.listRef.style.left = `${(this.buttonRect.left + window.pageXOffset) - widthDiff}px`
 
     if (this.listItemsRef) {
       this.listItemsRef.style.maxHeight = `${listHeight}px`
@@ -427,6 +429,7 @@ class AutocompleteDropdown extends React.Component<Props, State> {
         onMouseDown={() => { this.itemMouseDown = true }}
         onMouseUp={() => { this.itemMouseDown = false }}
         width={this.props.width}
+        embedded={this.props.embedded}
       >
         <AutocompleteInput
           width={this.props.width}
@@ -439,6 +442,7 @@ class AutocompleteDropdown extends React.Component<Props, State> {
           onFocus={() => { this.handleSearchInputChange(this.state.searchValue, true) }}
           highlight={this.props.highlight}
           disabled={this.props.disabled}
+          embedded={this.props.embedded}
         />
         {this.props.required ? <Required /> : null}
         {this.renderList()}

src/components/molecules/PropertiesTable/PropertiesTable.jsx

@@ -25,6 +25,7 @@ import LabelDictionary from '../../../utils/LabelDictionary'
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
 import Dropdown from '../../molecules/Dropdown'
+import AutocompleteDropdown from '../../molecules/AutocompleteDropdown'
 import type { Field } from '../../../types/Field'
 
 const Wrapper = styled.div`
@@ -127,16 +128,28 @@ class PropertiesTable extends React.Component<Props> {
 
     let selectedItem = items.find(i => !i.separator && i.value === this.props.valueCallback(prop))
 
+    let commonProps = {
+      embedded: true,
+      width: 320,
+      selectedItem,
+      items,
+      onChange: item => this.props.onChange(prop, item.value),
+      required: typeof prop.required === 'boolean' && !this.props.hideRequiredSymbol ? prop.required : false,
+    }
+    if (items.length < 10) {
+      return (
+        <Dropdown
+          data-test-id={`${baseId}-dropdown-${prop.name}`}
+          noSelectionMessage="Choose a value"
+          dimFirstItem
+          {...commonProps}
+        />
+      )
+    }
     return (
-      <Dropdown
-        embedded
-        data-test-id={`${baseId}-dropdown-${prop.name}`}
-        width={320}
-        noSelectionMessage="Choose a value"
-        selectedItem={selectedItem}
-        items={items}
-        onChange={item => this.props.onChange(prop, item.value)}
-        required={typeof prop.required === 'boolean' && !this.props.hideRequiredSymbol ? prop.required : false}
+      <AutocompleteDropdown
+        dimNullValue
+        {...commonProps}
       />
     )
   }