Merge pull request #2870 from gautam1168/reactselectversionupdate

fix issue #2870

Author: maxceem

package-lock.json

@@ -130,7 +130,7 @@
     "react-s-alert": "^1.1.4",
     "react-scroll": "^1.7.6",
     "react-scroll-lock-component": "^1.1.2",
-    "react-select": "^0.9.1",
+    "react-select": "^2.4.0",
     "react-stickynode": "^1.2.1",
     "react-text-truncate": "^0.8.3",
     "react-transition-group": "^2.5.0",

package.json

@@ -113,10 +113,10 @@ export default class FileListItem extends React.Component {
         { (errors && errors.title) && <div className="error-message">{ errors.title }</div> }
         <textarea defaultValue={description} ref="desc" maxLength={250} className="tc-textarea" />
         { (errors && errors.desc) && <div className="error-message">{ errors.desc }</div> }
-        <UserAutoComplete onUpdate={this.onUserIdChange} 
+        <UserAutoComplete onUpdate={this.onUserIdChange}
           projectMembers={projectMembers}
           loggedInUser={loggedInUser}
-          selectedUsers={this.userIdsToHandles(allowedUsers).join(',')}  
+          selectedUsers={this.userIdsToHandles(allowedUsers).join(',')}
         />
       </div>
     )

src/components/FileList/FileListItem.jsx

@@ -56,7 +56,7 @@ export class EditFileAttachment extends React.Component {
           <UserAutoComplete onUpdate={this.onUserIdChange}
             projectMembers={projectMembers}
             loggedInUser={loggedInUser}
-            selectedUsers={this.userIdsToHandles(allowedUsers).join(',')}
+            selectedUsers={this.userIdsToHandles(allowedUsers).map(user => ({value: user, label: user}))}
           />
           {showVisibleToAllProjectMembersText && <div className="project-members-visible">
             There are no specified file viewers. File will be visible to all project members.

src/components/LinksMenu/EditFileAttachment.jsx

@@ -8,13 +8,36 @@
  */
 import React from 'react'
 import ReactSelect from 'react-select'
-import 'react-select/dist/react-select.css'
+import CreatableSelect from 'react-select/lib/Creatable'
 import './Select.scss'
 
 const Select = (props) => {
-  return (
-    <ReactSelect {...props} />
-  )
+  let containerclass = 'react-select-hiddendropdown-container'
+  if (props.showDropdownIndicator) {
+    containerclass = 'react-select-container'
+  }
+
+  if (props.createOption) {
+    return (
+      <CreatableSelect
+        {...props}
+        createOptionPosition="first"
+        className={containerclass}
+        classNamePrefix="react-select"
+        noOptionsMessage={() => ('Type to search')}
+      />
+    )
+  } else {
+    return (
+      <ReactSelect
+        {...props}
+        createOptionPosition="first"
+        className={containerclass}
+        classNamePrefix="react-select"
+        noOptionsMessage={() => ('Type to search')}
+      />
+    )
+  }
 }
 
 export default Select

src/components/Select/Select.jsx

@@ -1,90 +1,79 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
-  .Select {
-    line-height: normal;
-    text-align: left;
-  }
-  
-  /* to override input styles use same params like in tc-includes */
-  .Select-input {
-    height: 28px;
-  }
-  
-  .Select-input > input:not([type="checkbox"]) {
-    border: 0 none;
-    height: 28px;
-    line-height: 17px;
-    padding: 0;
-    transition: none;
-  
-    &:focus:not(.error),
-    &:active {
-      box-shadow: none;
-    }
-  }
-  
-  .Select-placeholder {
-    @include roboto;
-    color: $tc-gray-50;
-    font-size: 13px;
-    line-height: 28px;
-  }
-  
-  .Select-control {
-    height: 30px;
-  }
-  
-  .Select-item {
-    background-color: $tc-gray-10;
-    border: 0;
-    height: 21px;
-    margin-left: 4px;
-    margin-top: 4px;
-    padding: 0 10px 0 4px;
-  }
-  
-  .Select-item-label {
-    @include roboto-medium;
-    display: inline;
-    color: $tc-black;
-    font-size: 13px;
-    line-height: 20px;
-    padding: 0 0 0 4px;
-  }
-  
-  .Select-item-icon {
-    color:$tc-gray-40;
-    border-right-color: $tc-gray-10;
-    padding: 0 5px 1px;
-    
-    &:active,
-    &:focus,
-    &:hover {
-        background-color: transparent;
-        color: $tc-red-110;
-    }
-  }
-  
-  .Select-option {
-    @include roboto-medium;
-    color: $tc-black;
-    font-size: 13px;
-    padding-top: 5px;
-    padding-bottom: 6px;
-  
-    &:hover,
-    &.is-focused {
-      background-color: $tc-gray-neutral-dark;
-    }
-  }
-  
-  .Select-noresults,
-  .Select-search-prompt,
-  .Select-searching {
-    @include roboto-medium;
-    color: $tc-gray-50;
-    font-size: 13px;
-  }
+	$reactselectheight : 40px;
+	$reactselectcontentheight: 20px;
+	@mixin reactselectstyles {
+
+		& .react-select__control:hover {
+			border-color: $tc-gray-50;
+		}
+
+		& .react-select__control--is-focused {
+			border-color: #0681ff !important;
+			box-shadow: 0 0 2px 0 rgba(6, 129, 255, 0.7) !important;
+		}
+
+		& .react-select__control {
+			height: $reactselectheight;
+			border-color: $tc-gray-30;
+			box-shadow: none;//0 0 2px 0 rgba(6, 129, 255, 0.7) !important;
+
+			& > div {
+				height: $reactselectheight - 2px;
+			}
+
+			& > div:nth-child(1) > div:nth-last-child(1) {
+				height: $reactselectcontentheight + 4px;
+			}
+
+			& input {
+				height: $reactselectcontentheight;
+				line-height: $reactselectcontentheight;
+				transition: none !important;
+				box-shadow: none !important;
+				-webkit-box-shadow: none !important;
+			}
+
+		}
+
+		& .react-select__value-container {
+			& > div:nth-last-child(1) {
+				height: $reactselectcontentheight + 4px;
+			}
+		}
+
+		& .react-select__option {
+			@include roboto-medium;
+			font-size: 13px;
+		}
+
+		& .react-select__multi-value {
+			background-color: $tc-gray-20 !important;
+			font-weight: bold;
+		}
+
+		& .react-select__menu-notice--no-options {
+			text-align : left !important;
+			font-size : 15px;
+			color: $tc-gray-50;
+		}
+	}
+	.react-select-hiddendropdown-container {
+		@include reactselectstyles;
+		/*hide dropdown indicator*/
+		& .react-select__control {
+			& > div:nth-child(2) {
+				display: none;
+			}
+			& .react-select__dropdown-indicator {
+				display: none;
+			}
+		}
+	}
+
+	.react-select-container {
+		@include reactselectstyles;
+	}
+
 }
-  

src/components/Select/Select.scss

@@ -1,10 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {findIndex} from 'lodash'
 import Select from '../Select/Select'
 import './AutocompleteInput.scss'
-import {loadMemberSuggestions} from '../../api/projectMembers'
-import {AUTOCOMPLETE_TRIGGER_LENGTH} from '../../config/constants'
 
 /**
  * Render a searchable dropdown for selecting users that can be invited
@@ -13,78 +10,27 @@ class AutocompleteInput extends React.Component {
   constructor(props) {
     super(props)
 
-    this.onChange = this.onChange.bind(this)
-    this.asyncOptions = this.asyncOptions.bind(this)
-
-    this.debounceTimer = null
-  }
-
-  // cannot use debounce method from lodash, because we have to return Promise
-  loadMemberSuggestionsDebounced(value) {
-    return new Promise((resolve) => {
-      if (this.debounceTimer) {
-        clearTimeout(this.debounceTimer)
-      }
-
-      this.debounceTimer = setTimeout(() => {
-        resolve(loadMemberSuggestions(value))
-      }, 500)
-    })
-  }
-
-  onChange(inputValue, selectedOptions = []) {
-    const { onUpdate } = this.props
-
-    if (onUpdate) {
-      onUpdate(selectedOptions)
-    }
-  }
-
-  asyncOptions(input) {
-    const { allMembers } = this.props
-
-    const value =  typeof input === 'string' ? input : ''
-    const createOption = {
-      handle: value,
-      // Decide if it's email
-      isEmail: (/(.+)@(.+){2,}\.(.+){2,}/).test(value),
-    }
-    if (value.length >= AUTOCOMPLETE_TRIGGER_LENGTH) {
-      return this.loadMemberSuggestionsDebounced(value).then(r => {
-        // Remove current members from suggestions
-        const suggestions = r.filter(suggestion => (
-          findIndex(allMembers, (member) => member.handle === suggestion.handle) === -1 &&
-          // Remove current value from list to add it manually on top
-          suggestion.handle !== value
-        ))
-        // Only allow creation if it is not already exists in members
-        const shouldIncludeCreateOption = findIndex(allMembers, (member) => member.handle === value) === -1
-
-        return Promise.resolve({options: shouldIncludeCreateOption?[createOption, ...suggestions]: suggestions})
-      }).catch( () => {
-        return Promise.resolve({options: [createOption] })
-      })
-    }
-    return Promise.resolve({options: value.length > 0 ? [createOption] : []})
   }
 
   render() {
     const {
       placeholder,
       selectedMembers,
-      disabled,
+      disabled
     } = this.props
 
     return (
       <div className="autocomplete-wrapper">
         <Select
-          multi
+          isMulti
+          closeMenuOnSelect
+          showDropdownIndicator={false}
+          createOption
           placeholder={placeholder}
           value={selectedMembers}
-          onChange={this.onChange}
-          asyncOptions={this.asyncOptions}
-          valueKey="handle"
-          labelKey="handle"
+          onInputChange={this.props.onInputChange}
+          onChange={this.props.onUpdate}
+          options={this.props.suggestedMembers}
           disabled={disabled}
         />
       </div>
@@ -132,5 +78,4 @@ AutocompleteInput.propTypes = {
   allMembers: PropTypes.arrayOf(PropTypes.object)
 }
 
-
 export default AutocompleteInput