Fixed tests for PF3 common select implementation

Author: Hyperkid123

packages/pf3-component-mapper/package.json

@@ -90,7 +90,7 @@
   "dependencies": {
     "clsx": "^1.0.4",
     "react-day-picker": "^7.3.2",
-    "react-select": "^2.1.2"
+    "react-select": "^3.0.8"
   },
   "resolutions": {
     "terser": "3.14.1"

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, DropdownButton } from 'patternfly-react';
+import { FormControl, HelpBlock, Checkbox, FormGroup, ControlLabel, FieldLevelHelp } from 'patternfly-react';
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import { validationError } from './helpers';
 import MultipleChoiceList from './multiple-choice-list';
@@ -10,7 +10,7 @@ import { DateTimePicker } from './date-time-picker/date-time-picker';
 
 import RagioGroup from './radio';
 import PlainText from './plain-text';
-import { P3Select } from './select';
+import Select from './select';
 
 const selectComponent = ({
   componentType,
@@ -51,7 +51,7 @@ const selectComponent = ({
     />
   ),
   [componentTypes.SELECT_COMPONENT]: () => <div>
-    <P3Select
+    <Select
       classNamePrefix="ddorg__pf3-component-mapper__select"
       loadOptions={ loadOptions }
       options={ options }

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

@@ -1,14 +1,7 @@
 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 PF3
- */
-
 import NewSelect from '@data-driven-forms/common/src/select';
 import { DropdownButton } from 'patternfly-react';
 import fnToString from '@data-driven-forms/common/src/utils/fn-to-string';
@@ -18,174 +11,6 @@ import DropdownIndicator from './dropdown-indicator';
 import ClearIndicator from './clear-indicator';
 import './react-select.scss';
 
-const ValueContainer = ({ children, ...props }) => {
-  if (props.isMulti) {
-    return (
-      <components.ValueContainer { ...props }>
-        <div className="pf3-select_multi-values-wrapper">
-          { children[0] }
-        </div>
-        { children.slice(1) }
-      </components.ValueContainer>
-    );
-  }
-
-  return (
-    <components.ValueContainer { ...props }>
-      { children }
-    </components.ValueContainer>
-  );
-};
-
-class Select extends Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      isLoading: false,
-      options: props.options || [],
-    };
-  }
-
-  updateOptions = () => {
-    const { loadOptions } = this.props;
-
-    this.setState({ isLoading: true });
-
-    return loadOptions()
-    .then((data) => {
-      if (!data.map(({ value }) => value).includes(this.props.input.value)) {
-        this.props.input.onChange(undefined);
-      }
-
-      return this.setState({
-        options: data,
-        isLoading: false,
-      });
-    });
-  }
-
-  componentDidMount(){
-    const { loadOptions } = this.props;
-
-    if (loadOptions) {
-      return this.updateOptions();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!isEqual(this.props.options, prevProps.options)) {
-      if (!this.props.options.map(({ value }) => value).includes(this.props.input.value)) {
-        this.props.input.onChange(undefined);
-      }
-
-      this.setState({ options: this.props.options });
-    }
-
-    if (this.props.loadOptions && fnToString(this.props.loadOptions) !== fnToString(prevProps.loadOptions)){
-      return this.updateOptions();
-    }
-  }
-
-  render() {
-    const {
-      invalid,
-      input,
-      placeholder,
-      isSearchable,
-      isDisabled,
-      isReadOnly,
-      loadingMessage,
-      simpleValue,
-      options: _options, // catch options from props, if they are undefined (bcs they would overwrite the state)
-      pluckSingleValue,
-      ...rest
-    } = this.props;
-
-    const { options, isLoading } = this.state;
-    const { value, ...inputRest } = input;
-
-    if (isLoading) {
-      return <ReactSelect
-        className={ `final-form-select ${invalid ? 'has-error' : ''}` }
-        styles={ customStyles }
-        placeholder={ loadingMessage }
-        isDisabled={ true }
-      />;
-    }
-
-    const selectValue = pluckSingleValue ? rest.multi ? value : Array.isArray(value) && value[0] ? value[0] : value : value;
-
-    return <ReactSelect
-      className={ `final-form-select ${invalid ? 'has-error' : ''}` }
-      styles={ customStyles }
-      { ...inputRest }
-      options={ options }
-      placeholder={ placeholder || 'Please choose' }
-      isMulti={ rest.multi }
-      isSearchable={ !!isSearchable }
-      isClearable={ false }
-      hideSelectedOptions={ false }
-      closeMenuOnSelect={ !rest.multi }
-      noOptionsMessage={ () => 'No option found' }
-      isDisabled={ isDisabled || isReadOnly }
-      components={{
-        ValueContainer,
-      }}
-      onChange={ option => simpleValue
-        ? input.onChange(rest.multi
-          ? option.map(item => item.value)
-          : option ? option.value : undefined)
-        : input.onChange(option) }
-      value={ simpleValue ? options.filter(({ value }) => rest.multi ? input.value.includes(value) : isEqual(value, selectValue)) : selectValue }
-      { ...rest }
-    />;
-  }
-}
-
-Select.propTypes = {
-  simpleValue: PropTypes.bool,
-  loadOptions: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.array,
-    ]),
-  })),
-  invalid: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
-  input: PropTypes.shape({
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.array,
-      PropTypes.any,
-    ]),
-  }),
-  initialValue: PropTypes.any,
-  placeholder: PropTypes.string,
-  rest: PropTypes.any,
-  isSearchable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-  pluckSingleValue: PropTypes.bool,
-};
-
-Select.defaultProps = {
-  input: {
-    value: [],
-  },
-  loadingMessage: 'Loading...',
-  simpleValue: true,
-  pluckSingleValue: true,
-};
-
-export default Select;
-
 const getDropdownText = (value, placeholder, options) => {
   if (Array.isArray(value)) {
     if (value.length === 0) {
@@ -252,7 +77,7 @@ const SelectTitle = ({ title, classNamePrefix, isClearable, value, onClear, isFe
   </Fragment>
 );
 
-export class P3Select extends Component {  constructor(props){
+class Select extends Component {  constructor(props){
   super(props);
   this.state = {
     isFetching: false,
@@ -310,7 +135,7 @@ export class P3Select extends Component {  constructor(props){
       return true;
     }
 
-    if (isEqual(this.state.options, nextState.options)) {
+    if (!isEqual(this.state.options, nextState.options)) {
       return true;
     }
 
@@ -408,6 +233,8 @@ export class P3Select extends Component {  constructor(props){
   }
 }
 
-P3Select.defaultProps = {
+Select.defaultProps = {
   placeholder: 'Search...',
 };
+
+export default Select;