fix(pf4): added clearbale prop to downshift

Author: Hyperkid123

packages/pf4-component-mapper/demo/demo-schemas/select-schema.js

@@ -37,6 +37,13 @@ const selectSchema = {
       label: 'Disabled-select',
       options,
       isDisabled: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'clearable-select',
+      label: 'Clearable-select',
+      options,
+      isClearable: true
     }
   ]
 };

packages/pf4-component-mapper/src/common/select/clear-indicator.js

@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, ButtonVariant } from '@patternfly/react-core';
-
 import { TimesCircleIcon } from '@patternfly/react-icons';
+import './clear-indicator.scss';
 
-const ClearIndicator = ({ clearValue, innerProps: { ref, ...restInnerProps } }) => (
-  <Button {...restInnerProps} onClick={clearValue} variant={ButtonVariant.plain}>
+const ClearIndicator = ({ clearSelection }) => (
+  <span
+    onClick={(event) => {
+      clearSelection();
+      event.stopPropagation();
+    }}
+    className="ddorg__pf4-component-mapper__select-clear-indicator pf-u-pr-md pf-u-pl-md"
+  >
     <TimesCircleIcon />
-  </Button>
+  </span>
 );
 
 ClearIndicator.propTypes = {
-  innerProps: PropTypes.object.isRequired,
-  clearValue: PropTypes.func
-};
-
-ClearIndicator.defaultProps = {
-  clearValue: () => undefined
+  clearSelection: PropTypes.func.isRequired
 };
 
 export default ClearIndicator;

packages/pf4-component-mapper/src/common/select/clear-indicator.scss

@@ -0,0 +1,17 @@
+.ddorg__pf4-component-mapper__select-clear-indicator {
+  position: relative;
+  display: inline-block;
+  > svg {
+    fill: var(--pf-global--palette--black-600)
+  }
+  &:hover > svg {
+    fill: inherit
+  }
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}

packages/pf4-component-mapper/src/common/select/select.js

@@ -10,8 +10,9 @@ import '@patternfly/react-styles/css/components/Select/select.css';
 import './select-styles.scss';
 import Input from './input';
 import Menu from './menu';
+import ClearIndicator from './clear-indicator';
 
-const InternalSelect = ({ onChange, options, value, simpleValue, placeholder, isSearchable, isDisabled, ...props }) => {
+const InternalSelect = ({ onChange, options, value, simpleValue, placeholder, isSearchable, isDisabled, isClearable, ...props }) => {
   // console.log(props);
   const inputRef = useRef();
   const parsedValue = parseInternalValue(value);
@@ -23,7 +24,7 @@ const InternalSelect = ({ onChange, options, value, simpleValue, placeholder, is
       }}
       selectedItem={value}
     >
-      {({ isOpen, getLabelProps, getInputProps, getToggleButtonProps, getItemProps, highlightedIndex, selectedItem }) => {
+      {({ isOpen, clearSelection, getInputProps, getToggleButtonProps, getItemProps, highlightedIndex }) => {
         const toggleButtonProps = { ...getToggleButtonProps() };
         const enhancedToggleButtonProps = {
           ...toggleButtonProps,
@@ -51,6 +52,7 @@ const InternalSelect = ({ onChange, options, value, simpleValue, placeholder, is
                 />
               </div>
               <span className="pf-c-select__toggle-arrow">
+                {isClearable && parsedValue && <ClearIndicator clearSelection={clearSelection} />}
                 <CaretDownIcon />
               </span>
             </button>
@@ -76,7 +78,8 @@ InternalSelect.propTypes = {
   isSearchable: PropTypes.bool,
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool
+  isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool
 };
 
 const Select = ({ selectVariant, menuIsPortal, ...props }) => {