feat(Select): add ability to customize subcomponents

8base · Dec 21, 2018 · 2f1483d · 2f1483d
1 parent 795c9dc
commit 2f1483d
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 20 deletions.
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import ReactSelect from 'react-select';
+import ReactSelect, { components } from 'react-select';
 
 import { SelectTag } from './Select.theme';
 import { PALETTE, Z_INDEX } from '../../theme';
@@ -18,6 +18,7 @@ type SelectProps = {|
   hasError?: boolean,
   zIndex?: string | number,
   valueComponent?: React$Node,
+  components?: Object,
 |};
 
 const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
@@ -68,24 +69,41 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
   }),
 });
 
-const Select = ({ value, loading, clearable, disabled, multiple, options, onChange, placeholder, valueComponent, ...props }: SelectProps) => (
-  <SelectTag { ...props }>
-    <ReactSelect
-      isClearable={ clearable }
-      isDisabled={ disabled }
-      isLoading={ loading }
-      isMulti={ multiple }
-      menuPlacement="auto"
-      menuPortalTarget={ document.body }
-      onChange={ onChange }
-      options={ options }
-      placeholder={ placeholder }
-      valueComponent={ valueComponent }
-      styles={ customStyles(props) }
-      value={ value }
-    />
-  </SelectTag>
-);
+const Select = ({
+  value,
+  loading,
+  clearable,
+  disabled,
+  multiple,
+  options,
+  onChange,
+  placeholder,
+  valueComponent,
+  components,
+  ...props
+  }: SelectProps) => {
+  return (
+    <SelectTag { ...props }>
+      <ReactSelect
+        isClearable={ clearable }
+        isDisabled={ disabled }
+        isLoading={ loading }
+        isMulti={ multiple }
+        menuPlacement="auto"
+        menuPortalTarget={ document.body }
+        onChange={ onChange }
+        options={ options }
+        placeholder={ placeholder }
+        valueComponent={ valueComponent }
+        styles={ customStyles(props) }
+        value={ value }
+        components={ components }
+      />
+    </SelectTag>
+  );
+};
+
+Select.components = components;
 
 export { Select };
 
diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
@@ -12,7 +12,7 @@ const OPTIONS = [{
 }];
 
 export default (asStory) => {
-  asStory('Components/Select', module, (story, { Select, StateContainer, Column }) => {
+  asStory('Components/Select', module, (story, { Select, StateContainer, Column, Icon, Row }) => {
     story
       .add('common', () => (
         <Column>
@@ -25,6 +25,24 @@ export default (asStory) => {
           <StateContainer value={ [OPTIONS[1], OPTIONS[2]] }>
             <Select name="name" placeholder="Select an option" options={ OPTIONS } multiple />
           </StateContainer>
+          <StateContainer value={ [OPTIONS[1], OPTIONS[2]] }>
+            <Select
+              name="name"
+              placeholder="Select an option"
+              options={ OPTIONS }
+              components={{
+                MultiValueLabel: ({ children, ...props }) => (
+                  <Select.components.MultiValueLabel { ...props }>
+                    <Row>
+                      <Icon name="Table" size="sm" />
+                      <span>{ children }</span>
+                    </Row>
+                  </Select.components.MultiValueLabel>
+                ),
+              }}
+              multiple
+            />
+          </StateContainer>
         </Column>
       ));
   });