[3739] Use custom DownChevron and CrossIcon when supplied

JedWatson · Mar 3, 2020 · 75f335c · 75f335c
1 parent d787303
commit 75f335c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/react-select/src/components/MultiValue.js b/packages/react-select/src/components/MultiValue.js
@@ -1,9 +1,9 @@
 // @flow
 /** @jsx jsx */
-import { type Node } from 'react';
+import { useMemo, type Node } from 'react';
 import { jsx, ClassNames } from '@emotion/core';
-import { CrossIcon } from './indicators';
 import type { CommonProps } from '../types';
+import { defaultComponents } from './index';
 
 export type MultiValueProps = CommonProps & {
   children: Node,
@@ -88,7 +88,9 @@ export type MultiValueRemoveProps = {
 export function MultiValueRemove({
   children,
   innerProps,
+  selectProps: { components = {} },
 }: MultiValueRemoveProps) {
+  const CrossIcon = useMemo(() => defaultComponents({ components }).CrossIcon, [components]);
   return <div {...innerProps}>{children || <CrossIcon size={14} />}</div>;
 }
 

diff --git a/packages/react-select/src/components/indicators.js b/packages/react-select/src/components/indicators.js
@@ -1,9 +1,10 @@
 // @flow
 /** @jsx jsx */
-import { type Node } from 'react';
+import { useMemo, type Node } from 'react';
 import { jsx, keyframes } from '@emotion/core';
 
 import type { CommonProps, Theme } from '../types';
+import { defaultComponents } from './index';
 
 // ==============================
 // Dropdown & Clear Icons
@@ -73,7 +74,8 @@ const baseCSS = ({
 
 export const dropdownIndicatorCSS = baseCSS;
 export const DropdownIndicator = (props: IndicatorProps) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, className, cx, getStyles, innerProps, selectProps: { components = {} } } = props;
+  const DownChevronComponent = useMemo(() => defaultComponents({ components }).DownChevron, [components]);
   return (
     <div
       {...innerProps}
@@ -86,14 +88,15 @@ export const DropdownIndicator = (props: IndicatorProps) => {
         className
       )}
     >
-      {children || <DownChevron />}
+      {children || <DownChevronComponent />}
     </div>
   );
 };
 
 export const clearIndicatorCSS = baseCSS;
 export const ClearIndicator = (props: IndicatorProps) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, className, cx, getStyles, innerProps, selectProps: { components = {} } } = props;
+  const CrossIconComponent = useMemo(() => defaultComponents({ components }).CrossIcon, [components]);
   return (
     <div
       {...innerProps}
@@ -106,7 +109,7 @@ export const ClearIndicator = (props: IndicatorProps) => {
         className
       )}
     >
-      {children || <CrossIcon />}
+      {children || <CrossIconComponent />}
     </div>
   );
 };