- memoize Value.tsx component

based-ghost · based-ghost · commit 2434849e4321 · 2021-04-10T00:23:50.000-05:00
- Fix issue with special scenario: when openMenuOnClick = false and the device is touch-capable, the touch event triggered by the caret icon does not open the menu
- Add new group "placeholder" to theme object that has "animation" key with a fade-in default
- Related to new theme addition above, only apply that animation on renders after the first render/component mount
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
-    "main.js": "./main.70591e57.iframe.bundle.js",
+    "main.js": "./main.4df3933d.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.f398e60b.iframe.bundle.js",
-    "vendors~main.js": "./vendors~main.0c4c3500.iframe.bundle.js",
-    "vendors~main.js.map": "./vendors~main.0c4c3500.iframe.bundle.js.map",
+    "vendors~main.js": "./vendors~main.96fe7a9f.iframe.bundle.js",
+    "vendors~main.js.map": "./vendors~main.96fe7a9f.iframe.bundle.js.map",
     "iframe.html": "./iframe.html",
-    "vendors~main.0c4c3500.iframe.bundle.js.LICENSE.txt": "./vendors~main.0c4c3500.iframe.bundle.js.LICENSE.txt"
+    "vendors~main.96fe7a9f.iframe.bundle.js.LICENSE.txt": "./vendors~main.96fe7a9f.iframe.bundle.js.LICENSE.txt"
   },
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
-    "vendors~main.0c4c3500.iframe.bundle.js",
-    "main.70591e57.iframe.bundle.js"
+    "vendors~main.96fe7a9f.iframe.bundle.js",
+    "main.4df3933d.iframe.bundle.js"
   ]
 }
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -130,4 +130,4 @@
             
         
             
-              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.0c4c3500.iframe.bundle.js"></script><script src="main.70591e57.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.96fe7a9f.iframe.bundle.js"></script><script src="main.4df3933d.iframe.bundle.js"></script></body></html>
diff --git a/docs/main.4df3933d.iframe.bundle.js b/docs/main.4df3933d.iframe.bundle.js
diff --git a/docs/main.70591e57.iframe.bundle.js b/docs/main.70591e57.iframe.bundle.js
diff --git a/docs/vendors~main.0c4c3500.iframe.bundle.js.map b/docs/vendors~main.0c4c3500.iframe.bundle.js.map
diff --git a/docs/vendors~main.96fe7a9f.iframe.bundle.js b/docs/vendors~main.96fe7a9f.iframe.bundle.js
diff --git a/docs/vendors~main.96fe7a9f.iframe.bundle.js.LICENSE.txt b/docs/vendors~main.96fe7a9f.iframe.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.96fe7a9f.iframe.bundle.js.map b/docs/vendors~main.96fe7a9f.iframe.bundle.js.map
diff --git a/src/Select.tsx b/src/Select.tsx
@@ -695,15 +695,15 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [onInputChange]);
 
   const handleOnClearMouseDown = useCallback((e: MouseOrTouchEvent<HTMLDivElement>): void => {
-    suppressMouseOrTouchEvent(e);
     setSelectedOption(EMPTY_ARRAY);
+    suppressMouseOrTouchEvent(e);
     focusInput();
   }, []);
 
   const handleOnCaretMouseDown = useCallback((e: MouseOrTouchEvent<HTMLDivElement>): void => {
-    suppressMouseOrTouchEvent(e, e.type === 'mousedown');
     focusInput();
     menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
+    suppressMouseOrTouchEvent(e);
   }, [openMenuAndFocusOption]);
 
   const renderMenu = !lazyLoadMenu || (lazyLoadMenu && menuOpen);
diff --git a/src/components/value/Value.tsx b/src/components/value/Value.tsx
@@ -1,11 +1,16 @@
-import React, { Fragment } from 'react';
+import React, { memo, Fragment } from 'react';
 import MultiValue from './MultiValue';
 import { isArrayWithLength } from '../../utils';
 import styled, { css } from 'styled-components';
+import { useFirstRenderState } from '../../hooks';
 
 import type { MultiParams } from '../../Select';
+import type { ReactNode, ReactText } from 'react';
 import type { OptionData, SelectedOption } from '../../types';
-import type { ReactNode, ReactText, FunctionComponent } from 'react';
+
+type PlaceholderProps = Readonly<{
+  isFirstRender: boolean;
+}>;
 
 export type ValueProps = Readonly<{
   isMulti?: boolean;
@@ -33,13 +38,13 @@ const SingleValue = styled.div`
   max-width: calc(100% - 0.5rem);
 `;
 
-const Placeholder = styled.div<Pick<ValueProps, 'isMulti'>>`
+const Placeholder = styled.div<PlaceholderProps>`
   ${_singleValueBaseStyle}
   color: ${({ theme }) => theme.color.placeholder};
-  ${({ theme, isMulti }) => isMulti && css`animation: ${theme.multiValue.animation};`}
+  ${({ theme, isFirstRender }) => !isFirstRender && css`animation: ${theme.placeholder.animation};`}
 `;
 
-const Value: FunctionComponent<ValueProps> = ({
+const Value = memo<ValueProps>(({
   isMulti,
   inputValue,
   placeholder,
@@ -49,6 +54,9 @@ const Value: FunctionComponent<ValueProps> = ({
   renderMultiOptions,
   removeSelectedOption
 }) => {
+  // Do not apply Placeholder animation on initial render/mount of component
+  const isFirstRender = useFirstRenderState();
+
   if (
     inputValue &&
     (!isMulti || (isMulti && (!isArrayWithLength(selectedOption) || renderMultiOptions)))
@@ -58,7 +66,7 @@ const Value: FunctionComponent<ValueProps> = ({
 
   if (!isArrayWithLength(selectedOption)) {
     return (
-      <Placeholder isMulti={isMulti}>
+      <Placeholder isFirstRender={isFirstRender}>
         {placeholder}
       </Placeholder>
     );
@@ -88,6 +96,8 @@ const Value: FunctionComponent<ValueProps> = ({
           ))}
     </Fragment>
   );
-};
+});
+
+Value.displayName = 'Value';
 
 export default Value;
diff --git a/src/constants/styled.ts b/src/constants/styled.ts
@@ -16,5 +16,5 @@ const _fadeInKeyframes = keyframes`
   }
 `;
 
-export const FADE_IN_ANIMATION_CSS = css`${_fadeInKeyframes} 0.2s ease-out both`;
+export const FADE_IN_ANIMATION_CSS = css`${_fadeInKeyframes} 0.25s ease-in-out both`;
 export const BOUNCE_ANIMATION_CSS = css`${_bounceKeyframes} 1.19s ease-in-out infinite`;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,5 +1,6 @@
-export { useDebounce } from './useDebounce';
-export { useMountEffect } from './useMountEffect';
-export { useMenuOptions } from './useMenuOptions';
-export { useUpdateEffect } from './useUpdateEffect';
-export { useMenuPositioner } from './useMenuPositioner';
+export { default as useDebounce } from './useDebounce';
+export { default as useMountEffect } from './useMountEffect';
+export { default as useMenuOptions } from './useMenuOptions';
+export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useMenuPositioner } from './useMenuPositioner';
+export { default as useFirstRenderState } from './useFirstRenderState';
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
  * Debouncer hook (hacky fix to prevent unecessary state mutations if no delay is passed).
  * If a number is passed for the delay parameter, use to debounce/set the value.
  */
-export const useDebounce = <T>(value: T, delay: number = 0): T => {
+const useDebounce = <T>(value: T, delay: number = 0): T => {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {
@@ -20,4 +20,6 @@ export const useDebounce = <T>(value: T, delay: number = 0): T => {
   }, [value, delay]);
 
   return delay <= 0 ? value : debouncedValue;
-};
+};
+
+export default useDebounce;
diff --git a/src/hooks/useFirstRenderState.ts b/src/hooks/useFirstRenderState.ts
@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+
+/**
+ * Returns "true" if component is just mounted (first render), else "false".
+ */
+const useFirstRenderState = (): boolean => {
+  const isFirst = useRef(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+
+  return isFirst.current;
+};
+
+export default useFirstRenderState;
diff --git a/src/hooks/useMenuOptions.ts b/src/hooks/useMenuOptions.ts
@@ -10,7 +10,7 @@ import type { OptionData, SelectedOption } from '../types';
  * Parse options to array of MenuOptions and perform filtering (if applicable).
  * Set menuOptions state (ensure array returned).
  */
-export const useMenuOptions = (
+const useMenuOptions = (
   options: OptionData[],
   debouncedInputValue: string,
   filterMatchFrom: FilterMatchEnum,
@@ -86,4 +86,6 @@ export const useMenuOptions = (
   }, [options, selectedOption, searchValue, hideSelectedOptionsOrDefault, filterMatchFrom, filterIgnoreCase, filterIgnoreAccents, getOptionValue, getOptionLabel]);
 
   return menuOptions;
-};
+};
+
+export default useMenuOptions;
diff --git a/src/hooks/useMenuPositioner.ts b/src/hooks/useMenuPositioner.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { MenuPositionEnum } from '../constants';
-import { useUpdateEffect } from './useUpdateEffect';
+import useUpdateEffect from './useUpdateEffect';
 import { calculateMenuTop, menuFitsBelowControl, scrollMenuIntoViewOnOpen } from '../utils';
 
 import type { RefObject } from 'react';
@@ -13,7 +13,7 @@ import type { CallbackFunction } from '../types';
  * Use ref to track if the menuHeight was resized, and if so, set the menu height back to default (avoids uncessary renders) with call to setMenuHeight.
  * Handle determining where to place the menu in relation to control - when menuPosition = 'top' or menuPosition = 'bottom' and there is not sufficient space below control, place on top.
  */
-export const useMenuPositioner = (
+const useMenuPositioner = (
   menuRef: RefObject<HTMLElement | null>,
   controlRef: RefObject<HTMLElement | null>,
   menuOpen: boolean,
@@ -87,4 +87,6 @@ export const useMenuPositioner = (
     : undefined;
 
   return [menuStyleTop, menuHeightCalc];
-};
+};
+
+export default useMenuPositioner;
diff --git a/src/hooks/useMountEffect.ts b/src/hooks/useMountEffect.ts
@@ -5,6 +5,8 @@ import type { EffectCallback } from 'react';
  * Run an effect only once (on initial mount).
  * Pass an empty array for the dependency list to ensure effect is only fired once.
  */
-export const useMountEffect = (effect: EffectCallback): void => {
+const useMountEffect = (effect: EffectCallback): void => {
   useEffect(effect, []);
-};
+};
+
+export default useMountEffect;
diff --git a/src/hooks/useUpdateEffect.ts b/src/hooks/useUpdateEffect.ts
@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
  * Run an effect only on updates.
  * Skip the first effect execution that occurrs after initial mount.
  */
-export const useUpdateEffect: typeof useEffect = (effect, deps): void => {
+const useUpdateEffect: typeof useEffect = (effect, deps): void => {
   const isFirstRender = useRef<boolean>(true);
 
   useEffect(() => {
@@ -15,4 +15,6 @@ export const useUpdateEffect: typeof useEffect = (effect, deps): void => {
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
-};
+};
+
+export default useUpdateEffect;
diff --git a/src/types/styled.d.ts b/src/types/styled.d.ts
@@ -81,6 +81,9 @@ declare module 'styled-components' {
       fontSize: string;
       css?: string | FlattenSimpleInterpolation;
     };
+    placeholder: {
+      animation: string | FlattenSimpleInterpolation;
+    },
     multiValue: {
       margin: string;
       borderRadius: string;
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -72,6 +72,9 @@ export const DEFAULT_THEME: DefaultTheme = {
     color: 'hsl(0, 0%, 60%)',
     padding: '0.375rem 0.75rem'
   },
+  placeholder: {
+    animation: FADE_IN_ANIMATION_CSS
+  },
   multiValue: {
     margin: '1px 2px',
     borderRadius: '3px',

Original file line number	Diff line number	Diff line change
`@@ -130,4 +130,4 @@`
`130`	`130`
`131`	`131`
`132`	`132`
`133`		`- window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.0c4c3500.iframe.bundle.js"></script><script src="main.70591e57.iframe.bundle.js"></script></body></html>`
	`133`	`+ window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.96fe7a9f.iframe.bundle.js"></script><script src="main.4df3933d.iframe.bundle.js"></script></body></html>`