fix(pf4): added searchable prop to downshift

Hyperkid123 · Hyperkid123 · commit ed4086152641 · 2020-06-25T12:47:37.000+02:00
diff --git a/packages/pf4-component-mapper/demo/demo-schemas/select-schema.js b/packages/pf4-component-mapper/demo/demo-schemas/select-schema.js
@@ -44,6 +44,13 @@ const selectSchema = {
       label: 'Clearable-select',
       options,
       isClearable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'searchable-select',
+      label: 'Clearable-select',
+      options,
+      isSearchable: true
     }
   ]
 };
diff --git a/packages/pf4-component-mapper/src/common/select/empty-options.js b/packages/pf4-component-mapper/src/common/select/empty-options.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const EmptyOptions = ({ noOptionsMessage, noResultsMessage, getInputProps, isSearchable }) => {
+  const { value } = getInputProps();
+  const message = isSearchable && value ? noResultsMessage : noOptionsMessage();
+  return <div className="pf-c-select__menu-item pf-m-disabled">{message}</div>;
+};
+
+EmptyOptions.propTypes = {
+  noOptionsMessage: PropTypes.func.isRequired,
+  noResultsMessage: PropTypes.node.isRequired,
+  getInputProps: PropTypes.func.isRequired,
+  isSearchable: PropTypes.bool
+};
+
+export default EmptyOptions;
diff --git a/packages/pf4-component-mapper/src/common/select/input.js b/packages/pf4-component-mapper/src/common/select/input.js
@@ -1,34 +1,26 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Divider } from '@patternfly/react-core';
 
 import './input.scss';
 
-const getInputLabel = (value) => {
-  if (!value) {
-    return '';
-  }
-
-  if (Array.isArray(value)) {
-    return value.map((item) => (typeof item === 'object' ? item.label : item)).join(',');
-  }
-
-  if (typeof value === 'object') {
-    return value.label;
-  }
-
-  return value;
-};
-
-const Input = ({ value, inputRef, isSearchable, ...props }) => {
+const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, ...props }) => {
   return (
-    <input
-      {...props}
-      {...(!isSearchable && { tabIndex: '-1' })}
-      className="ddorg__pf4-component-mapper__select-input"
-      value={getInputLabel(value)}
-      onClick={console.log}
-      ref={inputRef}
-    />
+    <Fragment>
+      <div className="pf-c-select__menu-search">
+        <input
+          autoFocus
+          {...props}
+          {...(!isSearchable && { tabIndex: '-1' })}
+          className="pf-c-form-control pf-m-search"
+          ref={inputRef}
+          {...getInputProps({
+            disabled: isDisabled
+          })}
+        />
+      </div>
+      <Divider />
+    </Fragment>
   );
 };
 
diff --git a/packages/pf4-component-mapper/src/common/select/menu.js b/packages/pf4-component-mapper/src/common/select/menu.js
@@ -1,10 +1,35 @@
 import React from 'react';
 import Option from './option';
+import Input from './input';
+import EmptyOption from './empty-options';
+
+const Menu = ({
+  noResultsMessage,
+  noOptionsMessage,
+  filterOptions,
+  inputRef,
+  isSearchable,
+  filterValue,
+  options,
+  getItemProps,
+  getInputProps,
+  highlightedIndex,
+  selectedItem
+}) => {
+  const filteredOptions = isSearchable ? filterOptions(options, filterValue) : options;
 
-const Menu = ({ options, getItemProps, highlightedIndex, selectedItem }) => {
   return (
     <ul className="pf-c-select__menu">
-      {options.map((item, index) => {
+      {isSearchable && <Input inputRef={inputRef} getInputProps={getInputProps} />}
+      {filteredOptions.length === 0 && (
+        <EmptyOption
+          isSearchable={isSearchable}
+          noOptionsMessage={noOptionsMessage}
+          noResultsMessage={noResultsMessage}
+          getInputProps={getInputProps}
+        />
+      )}
+      {filteredOptions.map((item, index) => {
         const itemProps = getItemProps({
           item,
           index,
diff --git a/packages/pf4-component-mapper/src/common/select/select.js b/packages/pf4-component-mapper/src/common/select/select.js
@@ -8,11 +8,41 @@ import { CaretDownIcon } from '@patternfly/react-icons';
 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';
+import ValueContainer from './value-container';
 
-const InternalSelect = ({ onChange, options, value, simpleValue, placeholder, isSearchable, isDisabled, isClearable, ...props }) => {
+const itemToString = (value) => {
+  if (!value) {
+    return '';
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => (typeof item === 'object' ? item.label : item)).join(',');
+  }
+
+  if (typeof value === 'object') {
+    return value.label;
+  }
+
+  return value;
+};
+
+const filterOptions = (options, filterValue = '') => options.filter(({ label }) => label.toLowerCase().includes(filterValue.toLowerCase()));
+
+const InternalSelect = ({
+  noResultsMessage,
+  noOptionsMessage,
+  onChange,
+  options,
+  value,
+  simpleValue,
+  placeholder,
+  isSearchable,
+  isDisabled,
+  isClearable,
+  ...props
+}) => {
   // console.log(props);
   const inputRef = useRef();
   const parsedValue = parseInternalValue(value);
@@ -22,41 +52,39 @@ const InternalSelect = ({ onChange, options, value, simpleValue, placeholder, is
       onChange={(value) => {
         return onChange(value);
       }}
+      itemToString={itemToString}
       selectedItem={value}
     >
-      {({ isOpen, clearSelection, getInputProps, getToggleButtonProps, getItemProps, highlightedIndex }) => {
-        const toggleButtonProps = { ...getToggleButtonProps() };
-        const enhancedToggleButtonProps = {
-          ...toggleButtonProps,
-          onClick: (...args) => {
-            if (isSearchable) {
-              inputRef.current.focus();
-            }
-
-            return toggleButtonProps.onClick(...args);
-          }
-        };
+      {({ isOpen, inputValue, itemToString, selectedItem, clearSelection, getInputProps, getToggleButtonProps, getItemProps, highlightedIndex }) => {
+        const toggleButtonProps = getToggleButtonProps();
         return (
           <div className="pf-c-select">
-            <button disabled={isDisabled} className={`pf-c-select__toggle${isDisabled ? ' pf-m-disabled' : ''}`} {...enhancedToggleButtonProps}>
+            <button disabled={isDisabled} className={`pf-c-select__toggle${isDisabled ? ' pf-m-disabled' : ''}`} {...toggleButtonProps}>
               <div className="pf-c-select_toggle-wrapper ddorg__pf4-component-mapper__select-toggle-wrapper">
-                <Input
-                  inputRef={inputRef}
-                  isSearchable={isSearchable}
-                  placeholder={placeholder}
-                  className="pf-c-select_toggle-text"
-                  {...getInputProps({
-                    disabled: isDisabled
-                  })}
-                  value={value}
-                />
+                <ValueContainer placeholder={placeholder} value={itemToString(selectedItem)} />
               </div>
               <span className="pf-c-select__toggle-arrow">
                 {isClearable && parsedValue && <ClearIndicator clearSelection={clearSelection} />}
                 <CaretDownIcon />
               </span>
             </button>
-            {isOpen && <Menu options={options} getItemProps={getItemProps} highlightedIndex={highlightedIndex} selectedItem={parsedValue} />}
+            {isOpen && (
+              <Menu
+                noResultsMessage={noResultsMessage}
+                noOptionsMessage={noOptionsMessage}
+                inputRef={inputRef}
+                isDisabled={isDisabled}
+                placeholder={placeholder}
+                isSearchable={isSearchable}
+                getInputProps={getInputProps}
+                filterOptions={filterOptions}
+                filterValue={inputValue}
+                options={options}
+                getItemProps={getItemProps}
+                highlightedIndex={highlightedIndex}
+                selectedItem={parsedValue}
+              />
+            )}
           </div>
         );
       }}
@@ -79,7 +107,9 @@ InternalSelect.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
   isDisabled: PropTypes.bool,
-  isClearable: PropTypes.bool
+  isClearable: PropTypes.bool,
+  noResultsMessage: PropTypes.node,
+  noOptionsMessage: PropTypes.func
 };
 
 const Select = ({ selectVariant, menuIsPortal, ...props }) => {
@@ -108,9 +138,10 @@ Select.propTypes = {
   loadOptions: PropTypes.func,
   loadingMessage: PropTypes.node,
   updatingMessage: PropTypes.node,
-  noOptionsMessage: PropTypes.func,
   menuIsPortal: PropTypes.bool,
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  noResultsMessage: PropTypes.node,
+  noOptionsMessage: PropTypes.node
 };
 
 Select.defaultProps = {
@@ -123,7 +154,9 @@ Select.defaultProps = {
   menuIsPortal: false,
   placeholder: 'Choose...',
   isSearchable: false,
-  isClearable: false
+  isClearable: false,
+  noResultsMessage: 'No results found',
+  noOptionsMessage: 'No options'
 };
 
 export default Select;
diff --git a/packages/pf4-component-mapper/src/common/select/value-container.js b/packages/pf4-component-mapper/src/common/select/value-container.js
@@ -1,53 +1,6 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-import { Button } from '@patternfly/react-core';
+const ValueContainer = ({ value, placeholder }) => <span className="pf-c-select__toggle-text">{value || placeholder}</span>;
 
-class ValueContainer extends Component {
-  state = {
-    showAll: false
-  };
-  render() {
-    const { isMulti, ...props } = this.props;
-    const { showAll } = this.state;
-    if (isMulti && props.children) {
-      return (
-        <div className="ddorg__pf4-component-mapper__select__value--container">
-          {showAll ? props.children[0] : props.children[0] && props.children[0][0] ? props.children[0][0] : props.children[0]}
-          {props.children[0] && props.children[0].length > 1 && (
-            <Button
-              className="ddorg__pf4-component-mapper__select__value--container-chipgroup"
-              onClick={() => this.setState(({ showAll }) => ({ showAll: !showAll }))}
-              variant="plain"
-            >
-              <span>{showAll ? props.selectProps.showLessLabel : `${props.children[0].length - 1} ${props.selectProps.showMoreLabel}`}</span>
-            </Button>
-          )}
-          {Array.isArray(props.children) ? props.children[1] && props.children[1] : props.children}
-        </div>
-      );
-    }
-
-    return props.children;
-  }
-}
-
-ValueContainer.propTypes = {
-  isMulti: PropTypes.bool,
-  getStyles: PropTypes.func.isRequired,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
-  selectProps: PropTypes.shape({
-    showLessLabel: PropTypes.node,
-    showMoreLabel: PropTypes.node
-  })
-};
-
-ValueContainer.defaultProps = {
-  isMulti: false,
-  selectProps: {
-    showLessLabel: 'Show less',
-    showMoreLabel: 'more'
-  }
-};
 
 export default ValueContainer;

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,13 @@ const selectSchema = {`
`44`	`44`	`label: 'Clearable-select',`
`45`	`45`	`options,`
`46`	`46`	`isClearable: true`
	`47`	`+ },`
	`48`	`+ {`
	`49`	`+ component: componentTypes.SELECT,`
	`50`	`+ name: 'searchable-select',`
	`51`	`+ label: 'Clearable-select',`
	`52`	`+ options,`
	`53`	`+ isSearchable: true`
`47`	`54`	`}`
`48`	`55`	`]`
`49`	`56`	`};`