feat(Select): add tooltips to remove elements

8base · Oct 9, 2019 · 4059f05 · 4059f05
1 parent 260776e
commit 4059f05
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 16 deletions.
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -3,10 +3,12 @@
 import React from 'react';
 import ReactSelect, { components } from 'react-select';
 import { withTheme } from 'emotion-theming';
+import { css } from '@emotion/core';
 import { type SerializedStyles } from '@emotion/utils';
 
 import { SelectTag } from './Select.theme';
 import { type Theme, COLORS, Z_INDEX } from '../../theme';
+import { Tooltip } from '../Tooltip';
 
 type SelectProps = {|
   options: Array<{ label: mixed, value: string, options?: Array<Object> }>,
@@ -72,6 +74,7 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN, COLORS }) => ({
     border: '1px solid #d0d7dd',
     backgroundColor: '#fff',
     height: 26,
+    alignItems: 'center',
   }),
   multiValueLabel: (style) => ({
     ...style,
@@ -101,6 +104,23 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN, COLORS }) => ({
   }),
 });
 
+const MultiValueRemove = props => {
+  return (
+    <Tooltip message="Remove" css={ css`display: flex; align-items: center; height: 14px;` }>
+      <components.MultiValueRemove { ...props } />
+    </Tooltip>
+  );
+};
+
+const ClearIndicator = props => {
+  return (
+    <Tooltip message="Remove All" css={ css`display: flex; align-items: center;` }>
+      <components.ClearIndicator { ...props } />
+    </Tooltip>
+  );
+};
+
+
 const findOptionByValue = (value, options) => {
   if (Array.isArray(value)) {
     return value.map((valueItem) => findOptionByValue(valueItem, options));
@@ -183,7 +203,7 @@ class Select extends React.Component<SelectProps & SelectPropsFromHOCs> {
           styles={ customStyles({ ...rest, COLORS: theme.COLORS || COLORS }) }
           value={ selectValue }
           autoFocus={ autoFocus }
-          components={ components }
+          components={{ MultiValueRemove, ClearIndicator, ...components }}
           formatOptionLabel={ formatOptionLabel }
           inputValue={ inputValue }
           onInputChange={ onInputChange }

diff --git a/src/components/Select/Select.test.js b/src/components/Select/Select.test.js
@@ -36,22 +36,49 @@ describe('<Select />', () => {
     );
 
     const { children, ...passedStyledProps } = wrapper.find(SelectTag).props();
-    const { styles, menuPortalTarget, onChange, valueComponent, ...passedSelectProps } = wrapper.find(ReactSelect).props();
+    const {
+      styles,
+      menuPortalTarget,
+      onChange,
+      valueComponent,
+      ...passedSelectProps
+    } = wrapper.find(ReactSelect).props();
 
-    expect(passedSelectProps).toEqual({
-      isClearable: clearable,
-      isMulti: multiple,
-      isDisabled: disabled,
-      placeholder,
-      options,
-      value: options[0],
-      defaultInputValue: '',
-      defaultMenuIsOpen: false,
-      defaultValue: null,
-      menuPlacement: 'auto',
-      isLoading: loading,
-      components,
-    });
+    expect(passedSelectProps).toMatchInlineSnapshot(`
+Object {
+  "autoFocus": undefined,
+  "components": Object {
+    "ClearIndicator": [Function],
+    "MultiValueRemove": [Function],
+  },
+  "defaultInputValue": "",
+  "defaultMenuIsOpen": false,
+  "defaultValue": null,
+  "filterOption": undefined,
+  "formatOptionLabel": undefined,
+  "getOptionLabel": undefined,
+  "getOptionValue": undefined,
+  "inputValue": undefined,
+  "isClearable": true,
+  "isDisabled": true,
+  "isLoading": false,
+  "isMulti": true,
+  "menuIsOpen": undefined,
+  "menuPlacement": "auto",
+  "onInputChange": undefined,
+  "options": Array [
+    Object {
+      "label": "ovenlike",
+      "value": "ovenlike",
+    },
+  ],
+  "placeholder": "Select an option",
+  "value": Object {
+    "label": "ovenlike",
+    "value": "ovenlike",
+  },
+}
+`);
 
     expect(passedStyledProps).toEqual({
       hasError,