New: Dynamic Select and UMask Fields

Fixes #5380
Fixes #5348
Fixes #5167
Fixes #5166

Co-Authored-By: Taloth <Taloth@users.noreply.github.com>

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Measure from 'Components/Measure';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -16,6 +17,7 @@ import getUniqueElememtId from 'Utilities/getUniqueElementId';
 import { isMobile as isMobileUtil } from 'Utilities/mobile';
 import HintedSelectInputOption from './HintedSelectInputOption';
 import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
+import TextInput from './TextInput';
 import styles from './EnhancedSelectInput.css';
 
 function isArrowKey(keyCode) {
@@ -168,11 +170,21 @@ class EnhancedSelectInput extends Component {
     }
   }
 
+  onFocus = () => {
+    if (this.state.isOpen) {
+      this._removeListener();
+      this.setState({ isOpen: false });
+    }
+  }
+
   onBlur = () => {
-    // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
-    const origIndex = getSelectedIndex(this.props);
-    if (origIndex !== this.state.selectedIndex) {
-      this.setState({ selectedIndex: origIndex });
+    if (!this.props.isEditable) {
+      // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
+      const origIndex = getSelectedIndex(this.props);
+
+      if (origIndex !== this.state.selectedIndex) {
+        this.setState({ selectedIndex: origIndex });
+      }
     }
   }
 
@@ -250,6 +262,10 @@ class EnhancedSelectInput extends Component {
       this._addListener();
     }
 
+    if (!this.state.isOpen && this.props.onOpen) {
+      this.props.onOpen();
+    }
+
     this.setState({ isOpen: !this.state.isOpen });
   }
 
@@ -292,15 +308,19 @@ class EnhancedSelectInput extends Component {
     const {
       className,
       disabledClassName,
+      name,
       value,
       values,
       isDisabled,
+      isEditable,
+      isFetching,
       hasError,
       hasWarning,
       valueOptions,
       selectedValueOptions,
       selectedValueComponent: SelectedValueComponent,
-      optionComponent: OptionComponent
+      optionComponent: OptionComponent,
+      onChange
     } = this.props;
 
     const {
@@ -326,40 +346,94 @@ class EnhancedSelectInput extends Component {
                   whitelist={['width']}
                   onMeasure={this.onMeasure}
                 >
-                  <Link
-                    className={classNames(
-                      className,
-                      hasError && styles.hasError,
-                      hasWarning && styles.hasWarning,
-                      isDisabled && disabledClassName
-                    )}
-                    isDisabled={isDisabled}
-                    onBlur={this.onBlur}
-                    onKeyDown={this.onKeyDown}
-                    onPress={this.onPress}
-                  >
-                    <SelectedValueComponent
-                      value={value}
-                      values={values}
-                      {...selectedValueOptions}
-                      {...selectedOption}
-                      isDisabled={isDisabled}
-                      isMultiSelect={isMultiSelect}
-                    >
-                      {selectedOption ? selectedOption.value : null}
-                    </SelectedValueComponent>
+                  {
+                    isEditable ?
+                      <div
+                        className={styles.editableContainer}
+                      >
+                        <TextInput
+                          className={className}
+                          name={name}
+                          value={value}
+                          readOnly={isDisabled}
+                          hasError={hasError}
+                          hasWarning={hasWarning}
+                          onFocus={this.onFocus}
+                          onBlur={this.onBlur}
+                          onChange={onChange}
+                        />
+                        <Link
+                          className={classNames(
+                            styles.dropdownArrowContainerEditable,
+                            isDisabled ?
+                              styles.dropdownArrowContainerDisabled :
+                              styles.dropdownArrowContainer)
+                          }
+                          onPress={this.onPress}
+                        >
+                          {
+                            isFetching &&
+                              <LoadingIndicator
+                                className={styles.loading}
+                                size={20}
+                              />
+                          }
 
-                    <div
-                      className={isDisabled ?
-                        styles.dropdownArrowContainerDisabled :
-                        styles.dropdownArrowContainer
-                      }
-                    >
-                      <Icon
-                        name={icons.CARET_DOWN}
-                      />
-                    </div>
-                  </Link>
+                          {
+                            !isFetching &&
+                              <Icon
+                                name={icons.CARET_DOWN}
+                              />
+                          }
+                        </Link>
+                      </div> :
+                      <Link
+                        className={classNames(
+                          className,
+                          hasError && styles.hasError,
+                          hasWarning && styles.hasWarning,
+                          isDisabled && disabledClassName
+                        )}
+                        isDisabled={isDisabled}
+                        onBlur={this.onBlur}
+                        onKeyDown={this.onKeyDown}
+                        onPress={this.onPress}
+                      >
+                        <SelectedValueComponent
+                          value={value}
+                          values={values}
+                          {...selectedValueOptions}
+                          {...selectedOption}
+                          isDisabled={isDisabled}
+                          isMultiSelect={isMultiSelect}
+                        >
+                          {selectedOption ? selectedOption.value : null}
+                        </SelectedValueComponent>
+
+                        <div
+                          className={isDisabled ?
+                            styles.dropdownArrowContainerDisabled :
+                            styles.dropdownArrowContainer
+                          }
+                        >
+
+                          {
+                            isFetching &&
+                              <LoadingIndicator
+                                className={styles.loading}
+                                size={20}
+                              />
+                          }
+
+                          {
+                            !isFetching &&
+                              <Icon
+                                name={icons.CARET_DOWN}
+                              />
+                          }
+                        </div>
+                      </Link>
+                  }
                 </Measure>
               </div>
             )}
@@ -483,12 +557,15 @@ EnhancedSelectInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isEditable: PropTypes.bool.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   valueOptions: PropTypes.object.isRequired,
   selectedValueOptions: PropTypes.object.isRequired,
   selectedValueComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   optionComponent: PropTypes.elementType,
+  onOpen: PropTypes.func,
   onChange: PropTypes.func.isRequired
 };
 
@@ -496,6 +573,8 @@ EnhancedSelectInput.defaultProps = {
   className: styles.enhancedSelect,
   disabledClassName: styles.isDisabled,
   isDisabled: false,
+  isFetching: false,
+  isEditable: false,
   valueOptions: {},
   selectedValueOptions: {},
   selectedValueComponent: HintedSelectInputSelectedValue,