daily pastebin goal
25%
SHARE
TWEET

Untitled

a guest Feb 24th, 2018 223 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. invoice = { client: { email: 'someguy@somewhere.com' } }
  2.    
  3. import React, { PropTypes } from 'react';
  4. import Select from 'react-select';
  5. import 'react-select/dist/react-select.css';
  6.  
  7. RFReactSelect.defaultProps = {
  8.   multi: false,
  9.   className: ""
  10. };
  11.  
  12. RFReactSelect.propTypes = {
  13.   input: PropTypes.shape({
  14.     name: PropTypes.string.isRequired,
  15.  
  16.     onBlur: PropTypes.func.isRequired,
  17.     onChange: PropTypes.func.isRequired,
  18.     onFocus: PropTypes.func.isRequired,
  19.   }).isRequired,
  20.   options: PropTypes.array.isRequired,
  21.   multi: PropTypes.bool,
  22.   className: PropTypes.string,
  23.   onNewOptionClick: PropTypes.func,
  24. };
  25.  
  26. export default function RFReactSelect(props) {
  27.   const { input , options, multi, className,
  28.     newOptionCreator, promptTextCreator, isValidNewOption } = props
  29.   const { name, value, onBlur, onChange, onFocus } = input;
  30.   const transformedValue = transformValue(value, options, multi);
  31.  
  32.   return (
  33.     <Select.Creatable
  34.       className={className}
  35.       isValidNewOption={isValidNewOption}
  36.       name={name}
  37.       multi={multi}
  38.       newOptionCreator={newOptionCreator}
  39.       onSelectResetsInput={false}
  40.       onBlurResetsInput={false}
  41.       options={options}
  42.       onChange={multi
  43.         ? multiChangeHandler(onChange)
  44.         : singleChangeHandler(onChange)
  45.       }
  46.       onBlur={() => onBlur(value)}
  47.       onFocus={onFocus}
  48.       promptTextCreator={promptTextCreator}
  49.       value={transformedValue}
  50.       valueKey='value'
  51.     />
  52.   );
  53. }
  54.  
  55. /**
  56.  * onChange from Redux Form Field has to be called explicity.
  57.  */
  58. function singleChangeHandler(func) {
  59.   return function handleSingleChange(value) {
  60.     func(value ? value.value : '');
  61.   };
  62. }
  63.  
  64. /**
  65.  * onBlur from Redux Form Field has to be called explicity.
  66.  */
  67. function multiChangeHandler(func) {
  68.   return function handleMultiHandler(values) {
  69.     func(values.map(value => value.value));
  70.   };
  71. }
  72.  
  73. /**
  74.  * For single select, Redux Form keeps the value as a string, while React Select
  75.  * wants the value in the form { value: "grape", label: "Grape" }
  76.  *
  77.  * * For multi select, Redux Form keeps the value as array of strings, while React Select
  78.  * wants the array of values in the form [{ value: "grape", label: "Grape" }]
  79.  */
  80. function transformValue(value, options, multi) {
  81.   if (multi && typeof value === 'string') return [];
  82.  
  83.   const filteredOptions = options.filter(option => {
  84.     return multi
  85.       ? value.indexOf(option.value) !== -1
  86.       : option.value === value;
  87.   });
  88.  
  89.   return multi ? filteredOptions : filteredOptions[0];
  90. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top