react-select new version changes

Author: SleepyZenitsu

src/components/ChallengeEditor/BillingAccount-Field/index.js

@@ -13,14 +13,12 @@ const BillingAccountField = ({ accounts, onUpdateSelect, challenge }) => {
       <div className={cn(styles.field, styles.col2)}>
         <Select
           name='billingAccount'
-          options={accounts}
-          value={challenge.billingAccount}
+          options={accounts.map(account => ({ label: account.name, value: account.name, name: account.name }))}
+          value={{ label: challenge.billingAccount, value: challenge.billingAccount }}
           placeholder='Select an existing account'
-          labelKey='name'
-          valueKey='name'
-          clearable={false}
+          isClearable={false}
           onChange={(e) => onUpdateSelect(e)}
-          disabled={false}
+          isDisabled={false}
         />
       </div>
     </div>

src/components/ChallengeEditor/ChallengeSchedule-Field/index.js

@@ -331,12 +331,10 @@ class ChallengeScheduleField extends Component {
               ) : (
                 <Select
                   name='template'
-                  options={templates}
+                  options={templates.map(template => ({ label: template.name, value: template.name, name: template.name }))}
                   placeholder='Select'
-                  labelKey='name'
-                  valueKey='name'
-                  clearable={false}
-                  value={currentTemplate}
+                  isClearable={false}
+                  value={currentTemplate && { label: currentTemplate.name, value: currentTemplate.name }}
                   onChange={(e) => resetPhase(e)}
                 />
               )}

src/components/ChallengeEditor/Groups-Field/index.js

@@ -10,8 +10,6 @@ import { AUTOCOMPLETE_MIN_LENGTH, AUTOCOMPLETE_DEBOUNCE_TIME_MS, GROUPS_API_URL
 const GroupsField = ({ onUpdateMultiSelect, challenge }) => {
   async function fetchGroups (name) {
     if (!name) return []
-    console.log('url')
-    console.log(GROUPS_API_URL)
     const url = `${GROUPS_API_URL}?name=${name}`
     return axiosInstance.get(url)
   }
@@ -38,12 +36,12 @@ const GroupsField = ({ onUpdateMultiSelect, challenge }) => {
       <div className={cn(styles.field, styles.col2)}>
         <AsyncSelect
           name='group'
-          multi
+          isMulti
           loadOptions={(inputValue, callback) => {
             onInputChange(inputValue, callback)
           }}
           simpleValue
-          value={challenge.groups.join(',')}
+          multivalue={challenge.groups}
           placeholder='Select groups'
           onChange={(e) => onUpdateMultiSelect(e, 'groups')}
         />

src/components/ChallengeEditor/ReviewType-Field/index.js

@@ -77,14 +77,12 @@ const ReviewTypeField = ({ reviewers, challenge, onUpdateOthers, onUpdateSelect
                 isInternal && (
                   <Select
                     name='reviewer'
-                    options={reviewers}
+                    options={reviewers.map(({ handle }) => ({ label: handle, value: handle }))}
                     placeholder='Select Reviewer'
-                    labelKey='handle'
-                    valueKey='handle'
-                    clearable={false}
-                    value={challenge.reviewer}
-                    onChange={(e) => onUpdateSelect(e.handle, false, 'reviewer')}
-                    disabled={false}
+                    value={{ label: challenge.reviewer, value: challenge.reviewer }}
+                    isClearable={false}
+                    onChange={(e) => onUpdateSelect(e.value, false, 'reviewer')}
+                    isDisabled={false}
                   />
                 )
               }

src/components/ChallengeEditor/TagsField/index.js

@@ -19,10 +19,10 @@ const TagsField = ({ challengeTags, challenge, onUpdateMultiSelect, readOnly })
             <span>{existingTags}</span>
           ) : (<Select
             id='track-select'
-            multi
+            isMulti
             options={challengeTags.map(mapOps)}
             simpleValue
-            value={existingTags}
+            multivalue={challenge.tags && challenge.tags.map(tag => ({ label: tag, value: tag }))}
             onChange={(value) => onUpdateMultiSelect(value, 'tags')}
           />)}
         </div>

src/components/ChallengeEditor/Terms-Field/index.js

@@ -15,10 +15,10 @@ const TermsField = ({ terms, challenge, onUpdateMultiSelect }) => {
         <input type='hidden' />
         <Select
           id='track-select'
-          multi
+          isMulti
           options={terms.map(mapOps)}
           simpleValue
-          value={challenge.terms}
+          multivalue={challenge.terms}
           onChange={(value) => onUpdateMultiSelect(value, 'terms')}
         />
       </div>

src/components/ChallengeEditor/Type-Field/index.js

@@ -15,14 +15,11 @@ const TypeField = ({ types, onUpdateSelect, challenge, disabled }) => {
         <div className={cn(styles.field, styles.col2, { [styles.disabled]: disabled })}>
           <Select
             name='track'
-            options={_.filter(types, t => t.isActive)}
-            value={challenge.typeId}
+            options={_.filter(types, t => t.isActive).map(type => ({ label: type.name, value: type.id }))}
             placeholder='Work Format'
-            labelKey='name'
-            valueKey='id'
-            clearable={false}
-            onChange={(e) => onUpdateSelect(e.id, false, 'typeId')}
-            disabled={disabled}
+            isClearable={false}
+            onChange={(e) => onUpdateSelect(e.value, false, 'typeId')}
+            isDisabled={disabled}
           />
         </div>
       </div>

src/components/ChallengeEditor/index.js

@@ -708,7 +708,7 @@ class ChallengeEditor extends Component {
   onUpdateMultiSelect (options, field) {
     const { challenge } = this.state
     let newChallenge = { ...challenge }
-    newChallenge[field] = options ? options.split(',') : []
+    newChallenge[field] = options ? options.map(option => option.value) : []
 
     this.setState({ challenge: newChallenge }, () => {
       this.validateChallenge()

src/components/PhaseInput/index.js

@@ -77,11 +77,9 @@ class PhaseInput extends Component {
                 <div className={styles.scorecards}>
                   <Select
                     name='scorecard'
-                    options={phase.scorecards}
+                    options={phase.scorecards.map(({ name }) => ({ label: name, value: name, name }))}
                     placeholder='Select Scorecard'
-                    labelKey='name'
-                    valueKey='name'
-                    clearable={false}
+                    isClearable={false}
                     value={phase.scorecard}
                     onChange={(e) => onUpdateSelect(e, true, 'phases')}
                   />

src/components/Select/AsyncSelect.js

@@ -2,62 +2,16 @@ import React from 'react'
 import _ from 'lodash'
 import ReactSelect from 'react-select/async'
 import PT from 'prop-types'
+import styles from './styles'
 
 export default function Select (props) {
   const { selectRef } = props
-  const customStyles = {
-    container: (provided) => ({
-      ...provided,
-      width: '100%',
-      minWidth: '150px',
-      background: 'red'
-    }),
-    control: (provided) => ({
-      ...provided,
-      borderRadius: '2px !important',
-      ':focus': {
-        border: '1px solid #2C95D7',
-        boxShadow: 'none'
-      }
-    }),
-    menu: (provided) => ({
-      ...provided,
-      boxSizing: 'border-box',
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-      fontSize: '15px',
-      fontWeight: 300,
-      lineHeight: '18px',
-      color: '#2a2a2a',
-      border: '1px solid #2C95D7',
-      zIndex: 4
-    }),
-    option: (provided) => ({
-      ...provided,
-      paddingLeft: '20px'
-    }),
-    placeholder: (provided) => ({
-      ...provided,
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-      fontSize: '15px',
-      fontWeight: 300,
-      paddingLeft: '20px',
-      color: '#2a2a2a'
-    }),
-    input: (provided) => ({
-      ...provided,
-      backgroundColor: 'transparent',
-      marginLeft: 0,
-      paddingRight: '6px',
-      paddingLeft: '10px',
-      border: 'none'
-    })
-  }
   return (
     <ReactSelect
       ref={selectRef}
       {...props}
       autosize={false}
-      styles={customStyles}
+      styles={styles}
     />
   )
 }

src/components/Select/index.js

@@ -2,62 +2,16 @@ import React from 'react'
 import _ from 'lodash'
 import ReactSelect from 'react-select'
 import PT from 'prop-types'
+import styles from './styles'
 
 export default function Select (props) {
   const { selectRef } = props
-  const customStyles = {
-    container: (provided) => ({
-      ...provided,
-      width: '100%',
-      minWidth: '150px',
-      background: 'red'
-    }),
-    control: (provided) => ({
-      ...provided,
-      borderRadius: '2px !important',
-      ':focus': {
-        border: '1px solid #2C95D7',
-        boxShadow: 'none'
-      }
-    }),
-    menu: (provided) => ({
-      ...provided,
-      boxSizing: 'border-box',
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-      fontSize: '15px',
-      fontWeight: 300,
-      lineHeight: '18px',
-      color: '#2a2a2a',
-      border: '1px solid #2C95D7',
-      zIndex: 4
-    }),
-    option: (provided) => ({
-      ...provided,
-      paddingLeft: '20px'
-    }),
-    placeholder: (provided) => ({
-      ...provided,
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-      fontSize: '15px',
-      fontWeight: 300,
-      paddingLeft: '20px',
-      color: '#2a2a2a'
-    }),
-    input: (provided) => ({
-      ...provided,
-      backgroundColor: 'transparent',
-      marginLeft: 0,
-      paddingRight: '6px',
-      paddingLeft: '10px',
-      border: 'none'
-    })
-  }
   return (
     <ReactSelect
       ref={selectRef}
       {...props}
       autosize={false}
-      styles={customStyles}
+      styles={styles}
     />
   )
 }

src/components/Select/styles.js

@@ -0,0 +1,82 @@
+export default {
+  container: (provided) => ({
+    ...provided,
+    width: '100%'
+  }),
+  control: (provided, state) => {
+    console.log('state')
+    console.log(state)
+    let styles = {
+      ...provided,
+      borderRadius: '2px !important'
+    }
+    if (state.isFocused) {
+      styles = {
+        ...styles,
+        border: '1px solid #2C95D7',
+        boxShadow: 'none'
+      }
+    }
+    return styles
+  },
+  menu: (provided) => ({
+    ...provided,
+    boxSizing: 'border-box',
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+    fontSize: '15px',
+    fontWeight: 300,
+    lineHeight: '18px',
+    color: '#2a2a2a',
+    border: '1px solid #2C95D7',
+    borderRadius: 0,
+    zIndex: 4,
+    margin: 0,
+    padding: 0
+  }),
+  menuList: (provided) => ({
+    ...provided,
+    padding: 0
+  }),
+  option: (provided) => ({
+    ...provided,
+    paddingLeft: '20px'
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+    fontSize: '15px',
+    fontWeight: 300,
+    paddingLeft: '20px',
+    color: '#2a2a2a'
+  }),
+  input: (provided) => ({
+    ...provided,
+    backgroundColor: 'transparent',
+    marginLeft: 0,
+    paddingRight: '6px',
+    paddingLeft: '10px',
+    border: 'none',
+    input: {
+      width: 'auto !important',
+      height: 'auto !important',
+      lineHeight: 'normal !important'
+    }
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    backgroundColor: '#2c95d7'
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: 'white'
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    margin: '4px 4px',
+    height: '16px',
+    width: '16px',
+    backgroundColor: '#c6def1',
+    color: '#2C95D7',
+    borderRadius: '50%'
+  })
+}