Added searchable variant for PF3 select

Author: Hyperkid123

packages/common/src/select/index.js

@@ -5,11 +5,10 @@ import clsx from 'clsx';
 
 class Select extends Component {
   render() {
-    console.log(this.props.invalid)
     return (
       <ReactSelect className={ clsx(this.props.classNamePrefix, {
         'has-error': this.props.invalid,
-      }) } { ...this.props } />
+      }) } { ...this.props } {...this.props.input} />
     );
   }
 }

packages/pf3-component-mapper/demo/index.js

@@ -12,15 +12,38 @@ import Switch from "../src/form-fields/switch-field";
 
 const selectSchema = {
   fields: [{
+    component: 'select-field',
+    name: 'select-search',
+    label: 'Select search',
+    isRequired: true,
+    validateOnMount: true,
+    isClearable: true,
+    multi: true,
+    isSearchable: true,
+    placeholder: 'Placeholder',
+    validate: [{
+      type: 'required-validator'
+    }],
+    options: [{
+      label: 'foo',
+      value: 123
+    }, {
+      label: 'bar',
+      value: 231
+    }, {
+      label: 'Super long option label, Super long option label, Super long option label, Super long option label, Super long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option label',
+      value: 'x'
+    }]
+  }, {
     component: 'select-field',
     name: 'select',
     label: 'Select',
     isRequired: true,
     validateOnMount: true,
-    menuIsOpen: true,
     isClearable: true,
     multi: false,
-    placeholder: 'Super long option label, Super long option label, Super long option label, Super long option label, Super long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option labelSuper long option label, Super long option label',
+    isSearchable: true,
+    placeholder: 'Placeholder',
     validate: [{
       type: 'required-validator'
     }],

packages/pf3-component-mapper/src/form-fields/form-fields.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, HelpBlock, Checkbox, FormGroup, ControlLabel, FieldLevelHelp } from 'patternfly-react';
+import { FormControl, HelpBlock, Checkbox, FormGroup, ControlLabel, FieldLevelHelp, DropdownButton } from 'patternfly-react';
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import { validationError } from './helpers';
 import MultipleChoiceList from './multiple-choice-list';
@@ -10,12 +10,7 @@ import { DateTimePicker } from './date-time-picker/date-time-picker';
 
 import RagioGroup from './radio';
 import PlainText from './plain-text';
-
-import Select from '@data-driven-forms/common/src/select';
-import './select/react-select.scss';
-import Option from './select/option';
-import DropdownIndicator from './select/dropdown-indicator';
-import ClearIndicator from './select/clear-indicator';
+import { P3Select } from './select';
 
 const selectComponent = ({
   componentType,
@@ -56,12 +51,7 @@ const selectComponent = ({
     />
   ),
   [componentTypes.SELECT_COMPONENT]: () => <div>
-    <Select
-      components={{
-        ClearIndicator,
-        Option,
-        DropdownIndicator,
-      }}
+    <P3Select
       classNamePrefix="ddorg__pf3-component-mapper__select"
       loadOptions={ loadOptions }
       options={ options }

packages/pf3-component-mapper/src/form-fields/select/index.js

@@ -1,10 +1,22 @@
-import React, { Component } from 'react';
+import React, { Component, createRef, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactSelect, { components } from 'react-select';
 import customStyles from './select-styles';
 import isEqual from 'lodash/isEqual';
 import './react-select.scss';
 
+/**
+ * New implementation of select of PF4
+ */
+
+import NewSelect from '@data-driven-forms/common/src/select';
+import './react-select.scss';
+import Option from './option';
+import DropdownIndicator from './dropdown-indicator';
+import ClearIndicator from './clear-indicator';
+import { DropdownButton, FormControl } from 'patternfly-react';
+import clsx from 'clsx';
+
 const fnToString = (fn = '') => fn.toString().replace(/\s+/g, ' ');
 
 const ValueContainer = ({ children, ...props }) => {
@@ -174,3 +186,161 @@ Select.defaultProps = {
 };
 
 export default Select;
+
+const getDropdownText = (value, placeholder) => {
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return [ placeholder, true ];
+    }
+
+    if (typeof value[0] === 'object') {
+      return [ value.map(({ label }) => label).join(', '), false ];
+    }
+
+    return [ value.join(', '), false ];
+  }
+
+  if (typeof value === 'object') {
+    return [ value.label, false ];
+  }
+
+  if (!value) {
+    return [ placeholder, true ];
+  }
+
+  return [ value, false ];
+};
+
+class SearchInput extends Component {
+  inputRef = createRef(null);
+  componentDidMount() {
+    this.inputRef.current.focus();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    console.log(prevProps, this.props);
+  }
+
+  shouldComponentUpdate(nextProps) {
+
+    return nextProps.value !== this.props.value;
+  }
+
+  componentWillUnmount() {
+    this.inputRef.current.blur();
+  }
+
+  render() {
+    return <input ref={ this.inputRef } type="text" { ...this.props } className="form-control" />;
+  }
+
+}
+
+const SelectTitle = ({ title, classNamePrefix, isClearable, value, onClear }) => (
+  <Fragment>
+    <span key="searchable-select-value-label" className={ `${classNamePrefix}-value` }>{ title }</span>
+    { isClearable && value && (
+      <div
+        className={ `${classNamePrefix}-searchebale-clear` }
+        onClick={ (event) => {
+          event.stopPropagation();
+          return onClear(undefined);
+        } } >
+        <i className="fa fa-times"/>
+      </div>
+    ) }
+  </Fragment>
+);
+
+export class P3Select extends Component {
+  state = {
+    isOpen: false,
+  }
+  handleToggleOpen = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }))
+
+  componentDidUpdate(prevProps, prevState) {
+    //console.log('root update', prevState, this.state);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (nextState.isOpen !== this.state.isOpen) {
+      return true;
+    }
+
+    if (JSON.stringify(nextProps) !== JSON.stringify(this.props)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  render () {
+    const { input, ...props } = this.props;
+    const { isOpen } = this.state;
+    const [ title, isPlaceholder ] = getDropdownText(input.value, props.placeholder);
+    if (props.isSearchable) {
+      const searchableInput = {
+        ...input,
+        onChange: props.isMulti || props.multi
+          ? input.onChange
+          : (...args) => {
+            this.handleToggleOpen();
+            return input.onChange(...args);
+          },
+      };
+      return (
+        <div className={ `${props.classNamePrefix}-button` }>
+          <DropdownButton
+            onToggle={ () => this.handleToggleOpen() }
+            open={ isOpen }
+            id={ props.id || props.input.name }
+            title={ <SelectTitle
+              classNamePrefix={ this.props.classNamePrefix }
+              value={ input.value }
+              isClearable={ props.isClearable }
+              title={ title }
+              onClear={ input.onChange }
+            /> }
+            className={ clsx(`${props.classNamePrefix}-dropdown`, {
+              'is-empty': isPlaceholder,
+            }) }>
+            { isOpen &&
+            <NewSelect
+              input={ searchableInput }
+              { ...props }
+              className={ clsx(props.classNamePrefix, {
+                sercheable: props.isSearchable,
+              }) }
+              controlShouldRenderValue={ false }
+              hideSelectedOptions={ false }
+              isClearable={ false }
+              tabSelectsValue={ false }
+              menuIsOpen
+              backspaceRemovesValue={ false }
+              isMulti={ props.isMulti || props.multi }
+              placeholder="Search..."
+              components={{
+                ClearIndicator,
+                Option,
+                DropdownIndicator: null,
+                IndicatorSeparator: null,
+                Placeholder: () => null,
+                Input: ({ selectProps, cx, isHidden, isDisabled, innerRef, getStyles, ...props }) => <SearchInput id={ this.props.input.name } { ...props } />,
+              }} /> }
+          </DropdownButton>
+        </div>
+      );
+    }
+
+    return (
+      <NewSelect { ...props }
+        className={ props.classNamePrefix }
+        components={{
+          ClearIndicator,
+          Option,
+          DropdownIndicator,
+        }} />
+    );
+
+  }
+}

packages/pf3-component-mapper/src/form-fields/select/option.js

@@ -3,7 +3,7 @@ import { components } from 'react-select';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-const Option = (props) => {
+const Option = props => {
   return (
     <div className={ clsx('ddorg__pf3-component-mapper__select__option', {
       'ddorg__pf3-component-mapper__select__option--is-focused': props.isFocused,

packages/pf3-component-mapper/src/form-fields/select/react-select.scss

@@ -152,6 +152,90 @@ div.field-group {
     position: relative;
   }
   .ddorg__pf3-component-mapper__select__placeholder {
+    padding: 0;
     position: relative;
   }
+  &.sercheable {
+    border: none;
+    .ddorg__pf3-component-mapper__select__control {
+      box-shadow: none;
+      background: unset;
+      background-color: transparent;
+    }
+    .ddorg__pf3-component-mapper__select__input {
+      border: 1px solid red;
+      width: 100%;
+    }
+    .ddorg__pf3-component-mapper__select__value-container {
+      display: flex;
+      margin-right: 0;
+      width: calc(100% - 2px);
+      background-color: transparent;
+      height: unset;
+      >* {
+        flex: 1
+      }
+    }
+    .ddorg__pf3-component-mapper__select__indicators {
+      display: none;
+    }
+    .ddorg__pf3-component-mapper__select__menu {
+      margin: 0;
+      border: 1px solid #ddd;
+      border-top: none;
+      box-shadow: none;
+    }
+    .ddorg__pf3-component-mapper__select__menu {
+      left: -1px;
+      box-sizing: content-box;
+    }
+    input {
+      border: 1px solid #bbb;
+      &:focus {
+        border-color: #0088ce;
+        outline: 0;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 206, 0.6);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 206, 0.6);
+      }
+    }
+  }
+}
+.ddorg__pf3-component-mapper__select-dropdown {
+  &.is-empty {
+    color: rgb(153, 153, 153)
+  };
+  min-width: 250px;
+  max-width: calc(100% - 2px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ddorg__pf3-component-mapper__select-button {
+  .ddorg__pf3-component-mapper__select-searchebale-clear {
+    margin-right: 4px;
+  }
+  .ddorg__pf3-component-mapper__select {
+    max-width: unset;
+    width: 100%;
+    min-width: 248px;
+  }
+  .dropdown {
+    max-width: 100%;
+    >button {
+      max-width: 100%;
+      display: flex;
+      .ddorg__pf3-component-mapper__select-value {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 4px;
+        text-align: initial;
+      }
+    }
+  }
+  .dropdown-menu {
+    width: 100%;
+    border-bottom: none;
+    border-color: #ddd;
+  }
 }