Implemented first draft of issue modal

client/src/shared/components/Select/index.jsx

@@ -7,11 +7,9 @@ import Icon from 'shared/components/Icon';
 import Dropdown from './Dropdown';
 import {
   StyledSelect,
-  StyledIcon,
   ValueContainer,
   ChevronIcon,
   Placeholder,
-  ValueSingle,
   ValueMulti,
   ValueMultiItem,
   AddMore,
@@ -19,8 +17,7 @@ import {
 
 const propTypes = {
   className: PropTypes.string,
-  icon: PropTypes.string,
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
   defaultValue: PropTypes.any,
   placeholder: PropTypes.string,
   invalid: PropTypes.bool,
@@ -28,22 +25,24 @@ const propTypes = {
   onChange: PropTypes.func.isRequired,
   onCreate: PropTypes.func,
   isMulti: PropTypes.bool,
+  renderValue: PropTypes.func,
+  renderOption: PropTypes.func,
 };
 
 const defaultProps = {
   className: undefined,
-  icon: undefined,
   value: undefined,
   defaultValue: undefined,
   placeholder: '',
   invalid: false,
   onCreate: undefined,
   isMulti: false,
+  renderValue: undefined,
+  renderOption: undefined,
 };
 
 const Select = ({
   className,
-  icon,
   value: propsValue,
   defaultValue,
   placeholder,
@@ -52,6 +51,8 @@ const Select = ({
   onChange,
   onCreate,
   isMulti,
+  renderValue: propsRenderValue,
+  renderOption: propsRenderOption,
 }) => {
   const [stateValue, setStateValue] = useState(defaultValue || (isMulti ? [] : null));
   const [isDropdownOpen, setDropdownOpen] = useState(false);
@@ -79,11 +80,18 @@ const Select = ({
 
   useOnOutsideClick($selectRef, isDropdownOpen, deactivateDropdown);
 
+  const ensureValueType = newValue => {
+    if (typeof value === 'number') {
+      return isMulti ? newValue.map(parseInt) : parseInt(newValue);
+    }
+    return newValue;
+  };
+
   const handleChange = newValue => {
     if (!isControlled) {
-      setStateValue(newValue);
+      setStateValue(ensureValueType(newValue));
     }
-    onChange(newValue);
+    onChange(ensureValueType(newValue));
   };
 
   const removeOptionValue = optionValue => {
@@ -106,16 +114,21 @@ const Select = ({
 
   const isValueEmpty = isMulti ? !value.length : !getOption(value);
 
-  const renderSingleValue = () => <ValueSingle>{getOptionLabel(value)}</ValueSingle>;
+  const renderSingleValue = () =>
+    propsRenderValue ? propsRenderValue({ value }) : getOptionLabel(value);
 
   const renderMultiValue = () => (
     <ValueMulti>
-      {value.map(optionValue => (
-        <ValueMultiItem key={optionValue} onClick={() => removeOptionValue(optionValue)}>
-          {getOptionLabel(optionValue)}
-          <Icon type="close" />
-        </ValueMultiItem>
-      ))}
+      {value.map(optionValue =>
+        propsRenderValue ? (
+          propsRenderValue({ value: optionValue, removeOptionValue })
+        ) : (
+          <ValueMultiItem key={optionValue} onClick={() => removeOptionValue(optionValue)}>
+            {getOptionLabel(optionValue)}
+            <Icon type="close" />
+          </ValueMultiItem>
+        ),
+      )}
       <AddMore>
         <Icon type="plus" />
         Add more
@@ -128,16 +141,14 @@ const Select = ({
       className={className}
       ref={$selectRef}
       tabIndex="0"
-      hasIcon={!!icon}
       onKeyDown={handleFocusedSelectKeydown}
       invalid={invalid}
     >
       <ValueContainer onClick={activateDropdown}>
-        {icon && <StyledIcon type={icon} />}
-        {(!isMulti || isValueEmpty) && <ChevronIcon type="chevron-down" />}
         {isValueEmpty && <Placeholder>{placeholder}</Placeholder>}
         {!isValueEmpty && !isMulti && renderSingleValue()}
         {!isValueEmpty && isMulti && renderMultiValue()}
+        {(!isMulti || isValueEmpty) && <ChevronIcon type="chevron-down" top={1} />}
       </ValueContainer>
       {isDropdownOpen && (
         <Dropdown
@@ -152,6 +163,7 @@ const Select = ({
           onChange={handleChange}
           onCreate={onCreate}
           isMulti={isMulti}
+          propsRenderOption={propsRenderOption}
         />
       )}
     </StyledSelect>