fix(pf4): use the typeahead select skin.

Hyperkid123 · Hyperkid123 · commit 37bb475e0ebb · 2020-07-16T15:36:36.000+02:00
diff --git a/packages/pf4-component-mapper/demo/index.js b/packages/pf4-component-mapper/demo/index.js
@@ -24,7 +24,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {schema: wizardSchema, additionalOptions: {}} 
+        this.state = {schema: selectSchema, additionalOptions: {}} 
     }
 
     render() {
diff --git a/packages/pf4-component-mapper/src/common/select/input.js b/packages/pf4-component-mapper/src/common/select/input.js
@@ -1,30 +1,22 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Divider } from '@patternfly/react-core';
 
 import './input.scss';
 
 const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, value, ...props }) => {
   const inputProps = getInputProps({ disabled: isDisabled });
   return (
-    <Fragment>
-      <div className="pf-c-select__menu-search">
-        <input
-          autoFocus
-          value=""
-          {...props}
-          {...(!isSearchable && { tabIndex: '-1' })}
-          className="pf-c-form-control pf-m-search"
-          ref={inputRef}
-          {...{
-            ...inputProps,
-            value: inputProps.value || '',
-            onChange: inputProps.onChange || Function
-          }}
-        />
-      </div>
-      <Divider />
-    </Fragment>
+    <input
+      value=""
+      {...props}
+      className="pf-c-form-control pf-c-select__toggle-typeahead"
+      ref={inputRef}
+      {...{
+        ...inputProps,
+        value: inputProps.value || '',
+        onChange: inputProps.onChange || Function
+      }}
+    />
   );
 };
 
diff --git a/packages/pf4-component-mapper/src/common/select/menu.js b/packages/pf4-component-mapper/src/common/select/menu.js
@@ -1,7 +1,6 @@
-import React, { useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import Option from './option';
-import Input from './input';
 import EmptyOption from './empty-options';
 
 const getScrollParent = (element) => {
@@ -36,7 +35,7 @@ const getMenuPosition = (selectBase) => {
   return selectBase.getBoundingClientRect();
 };
 
-const MenuPortal = ({ selectToggleRef, menuPortalTarget, children, isSearchable }) => {
+const MenuPortal = ({ selectToggleRef, menuPortalTarget, children }) => {
   const [position, setPosition] = useState(getMenuPosition(selectToggleRef.current));
   useEffect(() => {
     const scrollParentElement = getScrollParent(selectToggleRef.current);
@@ -52,12 +51,10 @@ const MenuPortal = ({ selectToggleRef, menuPortalTarget, children, isSearchable
     };
   }, [selectToggleRef]);
 
-  const top = isSearchable ? position.top + position.height + 64 : position.top + position.height;
+  const top = position.top + position.height;
   const portalDiv = (
     <div
-      className={`pf-c-select ddorg_pf4-component-mapper__select-portal-menu${
-        isSearchable ? ' ddorg_pf4-component-mapper__select-portal-menu-searchable' : ''
-      }`}
+      className="pf-c-select ddorg_pf4-component-mapper__select-portal-menu"
       style={{ borderTop: '4px solid white', zIndex: 401, position: 'absolute', top, left: position.left, width: position.width }}
     >
       {children}
@@ -71,7 +68,6 @@ const Menu = ({
   noResultsMessage,
   noOptionsMessage,
   filterOptions,
-  inputRef,
   isSearchable,
   filterValue,
   options,
@@ -88,7 +84,6 @@ const Menu = ({
   const filteredOptions = isSearchable ? filterOptions(options, filterValue) : options;
   const menuItems = (
     <ul className="pf-c-select__menu">
-      {!menuIsPortal && isSearchable && <Input inputRef={inputRef} getInputProps={getInputProps} />}
       {filteredOptions.length === 0 && (
         <EmptyOption
           isSearchable={isSearchable}
@@ -112,16 +107,9 @@ const Menu = ({
   );
   if (menuIsPortal) {
     return (
-      <Fragment>
-        {isSearchable && (
-          <ul className="pf-c-select__menu">
-            <Input inputRef={inputRef} getInputProps={getInputProps} />
-          </ul>
-        )}
-        <MenuPortal isSearchable={isSearchable} menuPortalTarget={menuPortalTarget} selectToggleRef={selectToggleRef}>
-          {menuItems}
-        </MenuPortal>
-      </Fragment>
+      <MenuPortal menuPortalTarget={menuPortalTarget} selectToggleRef={selectToggleRef}>
+        {menuItems}
+      </MenuPortal>
     );
   }
 
diff --git a/packages/pf4-component-mapper/src/common/select/select-styles.scss b/packages/pf4-component-mapper/src/common/select/select-styles.scss
@@ -12,18 +12,11 @@
   animation: spin 2s linear infinite;
 }
 
-.ddorg_pf4-component-mapper__select-portal-menu.ddorg_pf4-component-mapper__select-portal-menu-searchable {
-  &::before {
-    position: absolute;
-    bottom: -4px;
-    height: 4px;
-    left: 0;
-    right: 0;
-    background: white;
-    border-bottom-width: var(--pf-global--BorderWidth--sm);
-    border-bottom-color: var(--pf-global--BorderColor--dark-100);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    content: "";
-  }
+.pf-c-select_toggle-wrapper.ddorg__pf4-component-mapper__select-toggle-wrapper {
+  flex: 1;
+  display: flex;
+}
+
+.ddorg__pf4-component-mapper__select-toggle.pf-m-typeahead {
+  padding-left: 0;
 }
diff --git a/packages/pf4-component-mapper/src/common/select/select.js b/packages/pf4-component-mapper/src/common/select/select.js
@@ -24,7 +24,7 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
     if (isMulti) {
       const visibleOptions = showMore ? value : value.slice(0, 3);
       return (
-        <div className="pf-c-chip-group" onClick={(event) => event.stopPropagation()}>
+        <div className="pf-c-chip-group pf-u-ml-sm" onClick={(event) => event.stopPropagation()}>
           <ul className="pf-c-chip-group__list" aria-label="Chip group category">
             {visibleOptions.map((item, index) => {
               const label = typeof item === 'object' ? item.label : item;
@@ -74,17 +74,35 @@ const getValue = (isMulti, option, value) => {
   return isSelected ? value.filter(({ value }) => value !== option.value) : [...value, option];
 };
 
-const stateReducer = (state, changes, keepMenuOpen) => {
+const stateReducer = (state, changes, isMulti) => {
   switch (changes.type) {
     case Downshift.stateChangeTypes.keyDownEnter:
     case Downshift.stateChangeTypes.clickItem:
       return {
         ...changes,
-        isOpen: keepMenuOpen ? state.isOpen : !state.isOpen,
+        isOpen: isMulti ? state.isOpen : !state.isOpen,
         highlightedIndex: state.highlightedIndex,
-        inputValue: state.inputValue // prevent filter value change after option click
+        inputValue: isMulti ? state.inputValue : changes.inputValue // prevent filter value change after option click
       };
     case Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem:
+      return {
+        ...changes,
+        inputValue: state.inputValue
+      };
+    case Downshift.stateChangeTypes.mouseUp:
+      if (typeof changes.inputValue === 'string') {
+        return {
+          ...changes
+        };
+      }
+
+      if (Array.isArray(changes.inputValue) && typeof changes.inputValue[0] === 'string') {
+        return {
+          ...changes,
+          inputValue: changes.inputValue[0]
+        };
+      }
+
       return {
         ...changes,
         inputValue: state.inputValue
@@ -139,11 +157,20 @@ const InternalSelect = ({
             <div
               ref={selectToggleRef}
               disabled={isDisabled}
-              className={`pf-c-select__toggle${isDisabled ? ' pf-m-disabled' : ''}`}
+              className={`pf-c-select__toggle${isDisabled ? ' pf-m-disabled' : ''}${
+                isSearchable ? ' pf-m-typeahead' : ''
+              } ddorg__pf4-component-mapper__select-toggle`}
               {...toggleButtonProps}
             >
               <div className="pf-c-select_toggle-wrapper ddorg__pf4-component-mapper__select-toggle-wrapper">
-                <ValueContainer placeholder={placeholder} value={itemToString(selectedItem, isMulti, showMore, handleShowMore, handleChange)} />
+                <ValueContainer
+                  isMulti={isMulti}
+                  isSearchable={isSearchable}
+                  placeholder={placeholder}
+                  inputRef={inputRef}
+                  getInputProps={getInputProps}
+                  value={itemToString(selectedItem, isMulti, showMore, handleShowMore, handleChange)}
+                />
               </div>
               {isClearable && parsedValue && <ClearIndicator clearSelection={clearSelection} />}
               <span className="pf-c-select__toggle-arrow">
@@ -155,9 +182,7 @@ const InternalSelect = ({
                 noResultsMessage={noResultsMessage}
                 noOptionsMessage={noOptionsMessage}
                 isFetching={isFetching}
-                inputRef={inputRef}
                 isDisabled={isDisabled}
-                placeholder={placeholder}
                 isSearchable={isSearchable}
                 getInputProps={getInputProps}
                 filterOptions={filterOptions}
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,13 +1,31 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import Input from './input';
+
+const ValueContainer = ({ value, isMulti, placeholder, getInputProps, isSearchable, inputRef }) => {
+  if (isMulti && isSearchable) {
+    return (
+      <Fragment>
+        {value}
+        <Input placeholder={placeholder} inputRef={inputRef} getInputProps={getInputProps} />
+      </Fragment>
+    );
+  }
+
+  if (!isMulti && isSearchable) {
+    return <Input placeholder={placeholder} inputRef={inputRef} getInputProps={getInputProps} />;
+  }
 
-const ValueContainer = ({ value, placeholder }) => {
   return <span className="pf-c-select__toggle-text">{value || placeholder}</span>;
 };
 
 ValueContainer.propTypes = {
   value: PropTypes.node,
-  placeholder: PropTypes.node
+  placeholder: PropTypes.node,
+  isMulti: PropTypes.bool,
+  getInputProps: PropTypes.func.isRequired,
+  isSearchable: PropTypes.bool,
+  inputRef: PropTypes.object
 };
 
 export default ValueContainer;

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {`
`24`	`24`	`class App extends React.Component {`
`25`	`25`	`constructor(props) {`
`26`	`26`	`super(props);`
`27`		`- this.state = {schema: wizardSchema, additionalOptions: {}}`
	`27`	`+ this.state = {schema: selectSchema, additionalOptions: {}}`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`render() {`