Merge pull request #653 from data-driven-forms/use-pf4-select-component

Use pf4 select component

Author: rvsia

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

@@ -164,5 +164,6 @@ const selectSchema = {
 };
 
 export default {
-  ...selectSchema
+  ...selectSchema,
+  fields: [selectSchema.fields[0]]
 };

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() {

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
+      }}
+    />
   );
 };
 

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

@@ -1,9 +1,10 @@
-import React, { useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import Option from './option';
-import Input from './input';
 import EmptyOption from './empty-options';
 
+import './menu.scss';
+
 const getScrollParent = (element) => {
   let style = getComputedStyle(element);
   const excludeStaticParent = style.position === 'absolute';
@@ -36,31 +37,63 @@ const getMenuPosition = (selectBase) => {
   return selectBase.getBoundingClientRect();
 };
 
-const MenuPortal = ({ selectToggleRef, menuPortalTarget, children, isSearchable }) => {
+const checkScrollVisibility = (scrollableParent, selectRoot, menuRoot) => {
+  const parentProportions = scrollableParent.getBoundingClientRect();
+  const rootProportions = selectRoot.getBoundingClientRect();
+  const menuProportions = menuRoot.getBoundingClientRect();
+  return {
+    rootPosition: parentProportions.y,
+    cropSize: rootProportions.y + rootProportions.height - parentProportions.y,
+    maxHeight: window.innerHeight - menuProportions.top + 1
+  };
+};
+
+const MenuPortal = ({ selectToggleRef, menuPortalTarget, children }) => {
   const [position, setPosition] = useState(getMenuPosition(selectToggleRef.current));
+  const [{ cropSize, rootPosition, maxHeight }, setCropSize] = useState({});
+  const menuRef = useRef();
   useEffect(() => {
+    setCropSize({ maxHeight: window.innerHeight - menuRef.current.getBoundingClientRect().top - 4 });
     const scrollParentElement = getScrollParent(selectToggleRef.current);
-    const scrollListener = scrollParentElement.addEventListener('scroll', () => {
+    const scrollHandler = function() {
+      setCropSize(checkScrollVisibility(scrollParentElement, selectToggleRef.current, menuRef.current));
       setPosition(getMenuPosition(selectToggleRef.current));
-    });
-    const resizeListener = window.addEventListener('resize', () => {
+    };
+
+    const resizeHandler = function() {
+      setCropSize((prevSize) => ({ ...prevSize, maxHeight: window.innerHeight - menuRef.current.getBoundingClientRect().top - 4 }));
       setPosition(getMenuPosition(selectToggleRef.current));
-    });
+    };
+
+    scrollParentElement.addEventListener('scroll', scrollHandler, true);
+    window.addEventListener('resize', resizeHandler, true);
     return () => {
-      window.removeEventListener('resize', resizeListener);
-      scrollParentElement.removeEventListener('scroll', scrollListener);
+      window.removeEventListener('resize', resizeHandler, true);
+      scrollParentElement.removeEventListener('scroll', scrollHandler, true);
     };
   }, [selectToggleRef]);
 
-  const top = isSearchable ? position.top + position.height + 64 : position.top + position.height;
+  const top = position.top + position.height;
+  const sizedMenu = React.cloneElement(children, {
+    style: {
+      maxHeight: cropSize < 0 ? maxHeight + cropSize : maxHeight,
+      overflow: 'auto'
+    }
+  });
   const portalDiv = (
     <div
-      className={`pf-c-select ddorg_pf4-component-mapper__select-portal-menu${
-        isSearchable ? ' ddorg_pf4-component-mapper__select-portal-menu-searchable' : ''
-      }`}
-      style={{ borderTop: '4px solid white', zIndex: 401, position: 'absolute', top, left: position.left, width: position.width }}
+      ref={menuRef}
+      className="pf-c-select ddorg_pf4-component-mapper__select-portal-menu"
+      style={{
+        zIndex: 401,
+        position: 'absolute',
+        top: cropSize < 0 ? rootPosition : top,
+        left: position.left,
+        width: position.width,
+        overflow: 'hidden'
+      }}
     >
-      {children}
+      {cropSize < 0 ? <div style={{ position: 'relative', top: cropSize, width: position.width }}>{sizedMenu}</div> : sizedMenu}
     </div>
   );
 
@@ -71,7 +104,6 @@ const Menu = ({
   noResultsMessage,
   noOptionsMessage,
   filterOptions,
-  inputRef,
   isSearchable,
   filterValue,
   options,
@@ -87,8 +119,7 @@ const Menu = ({
 }) => {
   const filteredOptions = isSearchable ? filterOptions(options, filterValue) : options;
   const menuItems = (
-    <ul className="pf-c-select__menu">
-      {!menuIsPortal && isSearchable && <Input inputRef={inputRef} getInputProps={getInputProps} />}
+    <ul className={`pf-c-select__menu${menuIsPortal ? ' ddorg__pf4-component-mapper__select-menu-portal' : ''}`}>
       {filteredOptions.length === 0 && (
         <EmptyOption
           isSearchable={isSearchable}
@@ -112,16 +143,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>
     );
   }
 

packages/pf4-component-mapper/src/common/select/menu.scss

@@ -0,0 +1,8 @@
+.pf-c-select__menu.ddorg__pf4-component-mapper__select-menu-portal {
+  margin-top: 2px;
+  position: relative;
+  width: calc(100% - 2px);
+  min-width: calc(100% - 2px);
+  left: 1px;
+  border-bottom: 1px solid #ddd;
+}

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;
 }

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}

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;