New: Better series type select input

Closes #4796

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.js

@@ -17,6 +17,7 @@ import Popover from 'Components/Tooltip/Popover';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import SeriesPoster from 'Series/SeriesPoster';
 import * as seriesTypes from 'Utilities/Series/seriesTypes';
+import translate from 'Utilities/String/translate';
 import styles from './AddNewSeriesModalContent.css';
 
 class AddNewSeriesModalContent extends Component {
@@ -197,6 +198,9 @@ class AddNewSeriesModalContent extends Component {
                     onChange={onInputChange}
                     {...seriesType}
                     value={this.state.seriesType}
+                    helpText={translate(
+                      'Series type is used for renaming, parsing and searching'
+                    )}
                   />
                 </FormGroup>
 

frontend/src/Components/Form/SeriesTypeSelectInput.js

@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import * as seriesTypes from 'Utilities/Series/seriesTypes';
-import EnhancedSelectInput from './EnhancedSelectInput';
-
-const seriesTypeOptions = [
-  { key: seriesTypes.STANDARD, value: 'Standard' },
-  { key: seriesTypes.DAILY, value: 'Daily' },
-  { key: seriesTypes.ANIME, value: 'Anime' }
-];
-
-function SeriesTypeSelectInput(props) {
-  const values = [...seriesTypeOptions];
-
-  const {
-    includeNoChange,
-    includeNoChangeDisabled = true,
-    includeMixed
-  } = props;
-
-  if (includeNoChange) {
-    values.unshift({
-      key: 'noChange',
-      value: 'No Change',
-      disabled: includeNoChangeDisabled
-    });
-  }
-
-  if (includeMixed) {
-    values.unshift({
-      key: 'mixed',
-      value: '(Mixed)',
-      disabled: true
-    });
-  }
-
-  return (
-    <EnhancedSelectInput
-      {...props}
-      values={values}
-    />
-  );
-}
-
-SeriesTypeSelectInput.propTypes = {
-  includeNoChange: PropTypes.bool.isRequired,
-  includeNoChangeDisabled: PropTypes.bool,
-  includeMixed: PropTypes.bool.isRequired
-};
-
-SeriesTypeSelectInput.defaultProps = {
-  includeNoChange: false,
-  includeMixed: false
-};
-
-export default SeriesTypeSelectInput;

frontend/src/Components/Form/SeriesTypeSelectInput.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import * as seriesTypes from 'Utilities/Series/seriesTypes';
+import EnhancedSelectInput from './EnhancedSelectInput';
+import SeriesTypeSelectInputOption from './SeriesTypeSelectInputOption';
+import SeriesTypeSelectInputSelectedValue from './SeriesTypeSelectInputSelectedValue';
+
+interface SeriesTypeSelectInputProps {
+  includeNoChange: boolean;
+  includeNoChangeDisabled?: boolean;
+  includeMixed: boolean;
+}
+
+interface ISeriesTypeOption {
+  key: string;
+  value: string;
+  format?: string;
+  disabled?: boolean;
+}
+
+const seriesTypeOptions: ISeriesTypeOption[] = [
+  {
+    key: seriesTypes.STANDARD,
+    value: 'Standard',
+    format: 'Season and episode numbers (S01E05)',
+  },
+  {
+    key: seriesTypes.DAILY,
+    value: 'Daily / Date',
+    format: 'Date (2020-05-25)',
+  },
+  {
+    key: seriesTypes.ANIME,
+    value: 'Anime / Absolute',
+    format: 'Absolute episode Number (005)',
+  },
+];
+
+function SeriesTypeSelectInput(props: SeriesTypeSelectInputProps) {
+  const values = [...seriesTypeOptions];
+
+  const {
+    includeNoChange,
+    includeNoChangeDisabled = true,
+    includeMixed,
+  } = props;
+
+  if (includeNoChange) {
+    values.unshift({
+      key: 'noChange',
+      value: 'No Change',
+      disabled: includeNoChangeDisabled,
+    });
+  }
+
+  if (includeMixed) {
+    values.unshift({
+      key: 'mixed',
+      value: '(Mixed)',
+      disabled: true,
+    });
+  }
+
+  return (
+    <EnhancedSelectInput
+      {...props}
+      values={values}
+      optionComponent={SeriesTypeSelectInputOption}
+      selectedValueComponent={SeriesTypeSelectInputSelectedValue}
+    />
+  );
+}
+
+SeriesTypeSelectInput.defaultProps = {
+  includeNoChange: false,
+  includeMixed: false,
+};
+
+export default SeriesTypeSelectInput;

frontend/src/Components/Form/SeriesTypeSelectInputOption.css

@@ -0,0 +1,24 @@
+.optionText {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 0 0;
+
+  &.isMobile {
+    display: block;
+
+    .format {
+      margin-left: 0;
+    }
+  }
+}
+
+.value {
+  display: flex;
+}
+
+.format {
+  margin-left: 15px;
+  color: var(--darkGray);
+  font-size: $smallFontSize;
+}

frontend/src/Components/Form/SeriesTypeSelectInputOption.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'format': string;
+  'isMobile': string;
+  'optionText': string;
+  'value': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Form/SeriesTypeSelectInputOption.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import React from 'react';
+import EnhancedSelectInputOption from './EnhancedSelectInputOption';
+import styles from './SeriesTypeSelectInputOption.css';
+
+interface SeriesTypeSelectInputOptionProps {
+  key: string;
+  value: string;
+  format: string;
+  isMobile: boolean;
+}
+
+function SeriesTypeSelectInputOption(props: SeriesTypeSelectInputOptionProps) {
+  const { key, value, format, isMobile, ...otherProps } = props;
+
+  return (
+    <EnhancedSelectInputOption id={key} isMobile={isMobile} {...otherProps}>
+      <div
+        className={classNames(styles.optionText, isMobile && styles.isMobile)}
+      >
+        <div className={styles.value}>{value}</div>
+
+        {format == null ? null : <div className={styles.format}>{format}</div>}
+      </div>
+    </EnhancedSelectInputOption>
+  );
+}
+
+export default SeriesTypeSelectInputOption;

frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.css

@@ -0,0 +1,20 @@
+.selectedValue {
+  composes: selectedValue from '~./EnhancedSelectInputSelectedValue.css';
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.value {
+  display: flex;
+}
+
+.format {
+  flex: 0 0 auto;
+  margin-left: 15px;
+  color: var(--gray);
+  text-align: right;
+  font-size: $smallFontSize;
+}

frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'format': string;
+  'selectedValue': string;
+  'value': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
+import styles from './SeriesTypeSelectInputSelectedValue.css';
+
+interface SeriesTypeSelectInputOptionProps {
+  key: string;
+  value: string;
+  format: string;
+}
+function SeriesTypeSelectInputSelectedValue(
+  props: SeriesTypeSelectInputOptionProps
+) {
+  const { value, format, ...otherProps } = props;
+
+  return (
+    <EnhancedSelectInputSelectedValue
+      className={styles.selectedValue}
+      {...otherProps}
+    >
+      <div className={styles.value}>{value}</div>
+
+      {format == null ? null : <div className={styles.format}>{format}</div>}
+    </EnhancedSelectInputSelectedValue>
+  );
+}
+
+export default SeriesTypeSelectInputSelectedValue;

frontend/src/Series/Edit/EditSeriesModalContent.js

@@ -12,6 +12,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
 import MoveSeriesModal from 'Series/MoveSeries/MoveSeriesModal';
+import translate from 'Utilities/String/translate';
 import styles from './EditSeriesModalContent.css';
 
 class EditSeriesModalContent extends Component {
@@ -129,6 +130,9 @@ class EditSeriesModalContent extends Component {
                 type={inputTypes.SERIES_TYPE_SELECT}
                 name="seriesType"
                 {...seriesType}
+                helpText={translate(
+                  'Series type is used for renaming, parsing and searching'
+                )}
                 onChange={onInputChange}
               />
             </FormGroup>

frontend/src/Series/Index/Select/Edit/EditSeriesModalContent.tsx

@@ -189,6 +189,9 @@ function EditSeriesModalContent(props: EditSeriesModalContentProps) {
             value={seriesType}
             includeNoChange={true}
             includeNoChangeDisabled={false}
+            helpText={translate(
+              'Series type is used for renaming, parsing and searching'
+            )}
             onChange={onInputChange}
           />
         </FormGroup>