bump dev dependencies; code refactoring; optimize validateSetValueParam() utility function by replacing filter + map with reduce and then use [...new Set(arr)] to make unique

Author: based-ghost

package-lock.json

@@ -82,12 +82,12 @@
     "prepend-file": "^1.3.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "^3.3.1",
+    "react-scripts": "^3.4.0",
     "react-syntax-highlighter": "^12.2.1",
     "react-toastify": "^5.5.0",
     "react-window": "^1.8.5",
     "rimraf": "^3.0.2",
-    "rollup": "^1.31.0",
+    "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",

package.json

@@ -132,7 +132,7 @@ const ControlWrapper = styled.div<ControlWrapperProps>`
   align-items: center;
   box-sizing: border-box;
   justify-content: space-between;
-  ${({ isDisabled, isFocused, isInvalid, theme: { control, color }}) => (`
+  ${({ isDisabled, isFocused, isInvalid, theme: { control, color }}) => `
     min-height: ${control.minHeight};
     transition: ${control.transition};
     border-style: ${control.borderStyle};
@@ -144,22 +144,22 @@ const ControlWrapper = styled.div<ControlWrapperProps>`
     ${(control.backgroundColor || isDisabled) ? `background-color: ${isDisabled ? color.disabled : control.backgroundColor};` : ''}
     ${isFocused ? `box-shadow: ${control.boxShadow} ${isInvalid ? color.dangerLight : control.boxShadowColor};` : ''}
     ${control.css || ''}
-  `)}
+  `}
 `;
 
 const MenuWrapper = styled.div<MenuWrapperProps>`
   z-index: 999;
   cursor: default;
   position: absolute;
-  ${({ hideMenu, theme: { menu }}) => (`
+  ${({ hideMenu, theme: { menu }}) => `
     width: ${menu.width};
     margin: ${menu.margin};
     padding: ${menu.padding};
     box-shadow: ${menu.boxShadow};
     border-radius: ${menu.borderRadius};
     background-color: ${menu.backgroundColor};
     ${hideMenu ? 'display: none;' : ''}
-  `)}
+  `}
 
   animation: ${({ theme }) => css`${theme.menu.animation}`};
   ${({ theme }) => theme.menu.css}
@@ -171,7 +171,7 @@ const MenuWrapper = styled.div<MenuWrapperProps>`
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-tap-highlight-color: transparent;
-    ${({ theme: { menu: { option } } }) => (`
+    ${({ theme: { menu: { option } } }) => `
       padding: ${option.padding};
       text-align: ${option.textAlign};
 
@@ -188,7 +188,7 @@ const MenuWrapper = styled.div<MenuWrapperProps>`
       &.${OPTION_DISABLED_CLS} {
         opacity: 0.35;
       }
-    `)}
+    `}
   }
 `;
 

src/Select.tsx

@@ -15,41 +15,41 @@ const IndicatorIconsWrapper = styled.div`
 const IndicatorIcon = styled.div`
   display: flex;
   box-sizing: border-box;
-  ${({ theme: { icon }}) => (`
+  ${({ theme: { icon }}) => `
     color: ${icon.color};
     padding: ${icon.padding};
     :hover {
       color: ${icon.hoverColor};
     }
-  `)}
+  `}
   ${({ theme }) => theme.icon.css}
 `;
 
 const Clear = styled.div`
   overflow: hidden;
   animation: ${({ theme }) => css`${theme.icon.clear.animation}`};
-  ${({ theme: { icon: { clear }}}) => (`
+  ${({ theme: { icon: { clear }}}) => `
     font-size: ${clear.fontSize};
     transition: ${clear.transition};
     font-weight: ${clear.fontWeight};
     font-family: ${clear.fontFamily};
-  `)}
+  `}
 `;
 
 const Caret = styled.div<CaretProps>`
-  ${({ theme: { icon: { caret }}}) => (`
+  ${({ theme: { icon: { caret }}}) => `
     transition: ${caret.transition};
     border-top: ${caret.size} dashed;
     border-left: ${caret.size} solid transparent;
     border-right: ${caret.size} solid transparent;
-  `)}
+  `}
 
   ${({ menuOpen, isInvalid, theme: { color }}) =>
     menuOpen
-    && (`
+    && `
       transform: rotate(180deg);
       color: ${(isInvalid ? color.danger : (color.caretActive || color.primary))};
-    `)}
+    `}
 `;
 
 const Separator = styled.div`

src/components/IndicatorIcons.tsx

@@ -14,11 +14,11 @@ const StyledLoadingDots = styled.div`
     border-radius: 100%;
     display: inline-block;
     animation: ${({ theme }) => css`${theme.loader.animation}`};
-    ${({ theme: { loader }}) => (`
+    ${({ theme: { loader }}) => `
       width: ${loader.size};
       height: ${loader.size};
       background-color: ${loader.color};
-    `)}
+    `}
 
     :nth-of-type(1) {
       animation-delay: -0.272s;

src/components/LoadingDots.tsx

@@ -7,13 +7,13 @@ import { MenuProps, ItemData } from '../types';
 
 const NoOptionsMsg = styled.div`
   text-align: center;
-  ${({ theme: { noOptions }}) => (`
+  ${({ theme: { noOptions }}) => `
     color: ${noOptions.color};
     margin: ${noOptions.margin};
     padding: ${noOptions.padding};
     font-size: ${noOptions.fontSize};
     ${noOptions.css || ''}
-  `)}
+  `}
 `;
 
 const Menu = React.forwardRef<FixedSizeList, MenuProps>((

src/components/Menu.tsx

@@ -7,28 +7,28 @@ const MultiValueWrapper = styled.div`
   min-width: 0;
   display: flex;
   animation: ${({ theme }) => css`${theme.multiValue.animation}`};
-  ${({ theme: { multiValue }}) => (`
+  ${({ theme: { multiValue }}) => `
     margin: ${multiValue.margin};
     border-radius: ${multiValue.borderRadius};
     background-color: ${multiValue.backgroundColor};
     ${multiValue.css || ''}
-  `)}
+  `}
 `;
 
 const Label = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  ${({ theme: { multiValue: { label }}}) => (`
+  ${({ theme: { multiValue: { label }}}) => `
     padding: ${label.padding};
     font-size: ${label.fontSize};
     border-radius: ${label.borderRadius};
-  `)}
+  `}
 `;
 
 const Clear = styled.div<{ isFocused: boolean }>`
   display: flex;
-  ${({ isFocused, theme: { color, multiValue: { clear }}}) => (`
+  ${({ isFocused, theme: { color, multiValue: { clear }}}) => `
     padding: ${clear.padding};
     font-size: ${clear.fontSize};
     transition: ${clear.transition};
@@ -40,7 +40,7 @@ const Clear = styled.div<{ isFocused: boolean }>`
       color: ${color.danger};
       background-color: ${color.dangerLight};
     }
-  `)}
+  `}
 `;
 
 const MultiValue: React.FC<MultiValueProps> = ({

src/components/MultiValue.tsx

@@ -209,21 +209,25 @@ export function validateSetValueParam(
     return SELECTED_OPTION_DEFAULT;
   }
 
-  // Get unique array of MenuOption values (ReactText[]) and use to check against menuOptions
-  const validValuesArr = normalizeValue(values)
-    .filter((x) => isPlainObject(x))
-    .map((x) => getOptionValueCB(x))
-    .filter((item, index, self) => self.indexOf(item) === index);
-
-  if (!isArrayWithLength(validValuesArr)) {
+  // Get array of valid MenuOption values (ReactText[]) and use to check against menuOptions
+  const validValues = normalizeValue(values)
+    .reduce((acc: ReactText[], x: SelectedOption) => {
+      isPlainObject(x) && acc.push(getOptionValueCB(x));
+      return acc;
+    }, []);
+
+  if (!isArrayWithLength(validValues)) {
     return SELECTED_OPTION_DEFAULT;
   }
 
+  // Get uniq validValues and verify against menuOptions provided
   const results = [];
+  const validValuesUniq = [...new Set(validValues)];
+
   for (const option of menuOptions) {
-    if (validValuesArr.includes(getOptionValueCB(option))) {
+    if (validValuesUniq.includes(getOptionValueCB(option))) {
       results.push(option);
-      if (validValuesArr.length === results.length) {
+      if (validValuesUniq.length === results.length) {
         break;
       }
     }