New: HintedSelectInput Component

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

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
 import isMobileUtil from 'Utilities/isMobile';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
-import { icons, scrollDirections } from 'Helpers/Props';
+import { icons, sizes, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import Portal from 'Components/Portal';
 import Link from 'Components/Link/Link';
@@ -14,8 +14,8 @@ import Measure from 'Components/Measure';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
 import Scroller from 'Components/Scroller/Scroller';
-import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
-import EnhancedSelectInputOption from './EnhancedSelectInputOption';
+import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
+import HintedSelectInputOption from './HintedSelectInputOption';
 import styles from './EnhancedSelectInput.css';
 
 function isArrowKey(keyCode) {
@@ -150,9 +150,11 @@ class EnhancedSelectInput extends Component {
   }
 
   onBlur = () => {
-    this.setState({
-      selectedIndex: getSelectedIndex(this.props)
-    });
+    // 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 });
+    }
   }
 
   onKeyDown = (event) => {
@@ -385,6 +387,7 @@ class EnhancedSelectInput extends Component {
           isMobile &&
             <Modal
               className={styles.optionsModal}
+              size={sizes.EXTRA_SMALL}
               isOpen={isOpen}
               onModalClose={this.onOptionsModalClose}
             >
@@ -439,8 +442,8 @@ EnhancedSelectInput.defaultProps = {
   disabledClassName: styles.isDisabled,
   isDisabled: false,
   selectedValueOptions: {},
-  selectedValueComponent: EnhancedSelectInputSelectedValue,
-  optionComponent: EnhancedSelectInputOption
+  selectedValueComponent: HintedSelectInputSelectedValue,
+  optionComponent: HintedSelectInputOption
 };
 
 export default EnhancedSelectInput;

frontend/src/Components/Form/EnhancedSelectInputOption.css

@@ -7,13 +7,17 @@
   cursor: default;
 
   &:hover {
-    background-color: #f9f9f9;
+    background-color: #f8f8f8;
   }
 }
 
 .isSelected {
   background-color: #e2e2e2;
 
+  &:hover {
+    background-color: #e2e2e2;
+  }
+
   &.isMobile {
     background-color: inherit;
 

frontend/src/Components/Form/FormInputGroup.css

@@ -1,5 +1,6 @@
 .inputGroupContainer {
   flex: 1 1 auto;
+  min-width: 0;
 }
 
 .inputGroup {
@@ -11,6 +12,7 @@
 .inputContainer {
   position: relative;
   flex: 1 1 auto;
+  min-width: 0;
 }
 
 .inputUnit {

frontend/src/Components/Form/FormInputGroup.js

@@ -18,7 +18,7 @@ import MetadataProfileSelectInputConnector from './MetadataProfileSelectInputCon
 import AlbumReleaseSelectInputConnector from './AlbumReleaseSelectInputConnector';
 import RootFolderSelectInputConnector from './RootFolderSelectInputConnector';
 import SeriesTypeSelectInput from './SeriesTypeSelectInput';
-import SelectInput from './SelectInput';
+import EnhancedSelectInput from './EnhancedSelectInput';
 import TagInputConnector from './TagInputConnector';
 import TextTagInputConnector from './TextTagInputConnector';
 import TextInput from './TextInput';
@@ -73,7 +73,7 @@ function getComponent(type) {
       return RootFolderSelectInputConnector;
 
     case inputTypes.SELECT:
-      return SelectInput;
+      return EnhancedSelectInput;
 
     case inputTypes.SERIES_TYPE_SELECT:
       return SeriesTypeSelectInput;

frontend/src/Components/Form/HintedSelectInputOption.css

@@ -0,0 +1,23 @@
+.optionText {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 0 0;
+  min-width: 0;
+
+  &.isMobile {
+    display: block;
+
+    .hintText {
+      margin-left: 0;
+    }
+  }
+}
+
+.hintText {
+  @add-mixin truncate;
+
+  margin-left: 15px;
+  color: $darkGray;
+  font-size: $smallFontSize;
+}

frontend/src/Components/Form/HintedSelectInputOption.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import EnhancedSelectInputOption from './EnhancedSelectInputOption';
+import styles from './HintedSelectInputOption.css';
+
+function HintedSelectInputOption(props) {
+  const {
+    value,
+    hint,
+    isMobile,
+    ...otherProps
+  } = props;
+
+  return (
+    <EnhancedSelectInputOption
+      isMobile={isMobile}
+      {...otherProps}
+    >
+      <div className={classNames(
+        styles.optionText,
+        isMobile && styles.isMobile
+      )}
+      >
+        <div>{value}</div>
+
+        {
+          hint != null &&
+            <div className={styles.hintText}>
+              {hint}
+            </div>
+        }
+      </div>
+    </EnhancedSelectInputOption>
+  );
+}
+
+HintedSelectInputOption.propTypes = {
+  value: PropTypes.string.isRequired,
+  hint: PropTypes.node,
+  isMobile: PropTypes.bool.isRequired
+};
+
+export default HintedSelectInputOption;

frontend/src/Components/Form/HintedSelectInputSelectedValue.css

@@ -0,0 +1,24 @@
+.selectedValue {
+  composes: selectedValue from '~./EnhancedSelectInputSelectedValue.css';
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.valueText {
+  @add-mixin truncate;
+
+  flex: 0 0 auto;
+}
+
+.hintText {
+  @add-mixin truncate;
+
+  flex: 1 10 0;
+  margin-left: 15px;
+  color: $gray;
+  text-align: right;
+  font-size: $smallFontSize;
+}

frontend/src/Components/Form/HintedSelectInputSelectedValue.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
+import styles from './HintedSelectInputSelectedValue.css';
+
+function HintedSelectInputSelectedValue(props) {
+  const {
+    value,
+    hint,
+    includeHint,
+    ...otherProps
+  } = props;
+
+  return (
+    <EnhancedSelectInputSelectedValue
+      className={styles.selectedValue}
+      {...otherProps}
+    >
+      <div className={styles.valueText}>
+        {value}
+      </div>
+
+      {
+        hint != null && includeHint &&
+          <div className={styles.hintText}>
+            {hint}
+          </div>
+      }
+    </EnhancedSelectInputSelectedValue>
+  );
+}
+
+HintedSelectInputSelectedValue.propTypes = {
+  value: PropTypes.string,
+  hint: PropTypes.string,
+  includeHint: PropTypes.bool.isRequired
+};
+
+HintedSelectInputSelectedValue.defaultProps = {
+  includeHint: true
+};
+
+export default HintedSelectInputSelectedValue;

frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js

@@ -61,7 +61,7 @@ function EditRemotePathMappingModalContent(props) {
                 <FormLabel>Host</FormLabel>
 
                 <FormInputGroup
-                  type={inputTypes.AUTO_COMPLETE}
+                  type={inputTypes.SELECT}
                   name="host"
                   helpText="The same host you specified for the remote Download Client"
                   {...host}
@@ -140,7 +140,7 @@ EditRemotePathMappingModalContent.propTypes = {
   isSaving: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
   item: PropTypes.shape(remotePathMappingShape).isRequired,
-  downloadClientHosts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  downloadClientHosts: PropTypes.arrayOf(PropTypes.object).isRequired,
   onInputChange: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,

frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContentConnector.js

@@ -16,17 +16,27 @@ const newRemotePathMapping = {
 const selectDownloadClientHosts = createSelector(
   (state) => state.settings.downloadClients.items,
   (downloadClients) => {
-    return downloadClients.reduce((acc, downloadClient) => {
+    const hosts = downloadClients.reduce((acc, downloadClient) => {
+      const name = downloadClient.name;
       const host = downloadClient.fields.find((field) => {
         return field.name === 'host';
       });
 
-      if (host && !acc.includes(host.value)) {
-        acc.push(host.value);
+      if (host) {
+        const group = acc[host.value] = acc[host.value] || [];
+        group.push(name);
       }
 
       return acc;
-    }, []);
+    }, {});
+
+    return Object.keys(hosts).map((host) => {
+      return {
+        key: host,
+        value: host,
+        hint: `${hosts[host].join(', ')}`
+      };
+    });
   }
 );