{
@@ -192,7 +196,7 @@ class FilterBuilderModalContent extends Component {
- Save
+ {translate('Save')}
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRow.js b/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
index 01c24b460..0b00c0f03 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
import SelectInput from 'Components/Form/SelectInput';
import IconButton from 'Components/Link/IconButton';
import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
@@ -11,7 +12,9 @@ import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValu
import LanguageFilterBuilderRowValue from './LanguageFilterBuilderRowValue';
import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
-import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
+import QualityProfileFilterBuilderRowValue from './QualityProfileFilterBuilderRowValue';
+import QueueStatusFilterBuilderRowValue from './QueueStatusFilterBuilderRowValue';
+import SeasonsMonitoredStatusFilterBuilderRowValue from './SeasonsMonitoredStatusFilterBuilderRowValue';
import SeriesFilterBuilderRowValue from './SeriesFilterBuilderRowValue';
import SeriesStatusFilterBuilderRowValue from './SeriesStatusFilterBuilderRowValue';
import SeriesTypeFilterBuilderRowValue from './SeriesTypeFilterBuilderRowValue';
@@ -76,7 +79,13 @@ function getRowValueConnector(selectedFilterBuilderProp) {
return QualityFilterBuilderRowValueConnector;
case filterBuilderValueTypes.QUALITY_PROFILE:
- return QualityProfileFilterBuilderRowValueConnector;
+ return QualityProfileFilterBuilderRowValue;
+
+ case filterBuilderValueTypes.QUEUE_STATUS:
+ return QueueStatusFilterBuilderRowValue;
+
+ case filterBuilderValueTypes.SEASONS_MONITORED_STATUS:
+ return SeasonsMonitoredStatusFilterBuilderRowValue;
case filterBuilderValueTypes.SERIES:
return SeriesFilterBuilderRowValue;
@@ -224,7 +233,7 @@ class FilterBuilderRow extends Component {
key: name,
value: typeof label === 'function' ? label() : label
};
- }).sort((a, b) => a.value.localeCompare(b.value));
+ }).sort(sortByProp('value'));
const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
index 68fa5c557..217626c90 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import TagInput from 'Components/Form/TagInput';
+import TagInput from 'Components/Form/Tag/TagInput';
import { filterBuilderTypes, filterBuilderValueTypes, kinds } from 'Helpers/Props';
import tagShape from 'Helpers/Props/Shapes/tagShape';
import convertToBytes from 'Utilities/Number/convertToBytes';
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
index a7aed80b6..d1419327a 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { filterBuilderTypes } from 'Helpers/Props';
import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
import FilterBuilderRowValue from './FilterBuilderRowValue';
function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
}
return acc;
- }, []).sort(sortByName);
+ }, []).sort(sortByProp('name'));
}
return _.uniqBy(items, 'id');
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js
index 7b6d6313a..063a97346 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
-import TagInputTag from 'Components/Form/TagInputTag';
+import TagInputTag from 'Components/Form/Tag/TagInputTag';
import { kinds } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import styles from './FilterBuilderRowValueTag.css';
diff --git a/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValue.tsx b/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValue.tsx
new file mode 100644
index 000000000..50036cb90
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValue.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterBuilderRowValueProps from 'Components/Filter/Builder/FilterBuilderRowValueProps';
+import sortByProp from 'Utilities/Array/sortByProp';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+
+function createQualityProfilesSelector() {
+ return createSelector(
+ (state: AppState) => state.settings.qualityProfiles.items,
+ (qualityProfiles) => {
+ return qualityProfiles;
+ }
+ );
+}
+
+function QualityProfileFilterBuilderRowValue(
+ props: FilterBuilderRowValueProps
+) {
+ const qualityProfiles = useSelector(createQualityProfilesSelector());
+
+ const tagList = qualityProfiles
+ .map(({ id, name }) => ({ id, name }))
+ .sort(sortByProp('name'));
+
+ return
;
+}
+
+export default QualityProfileFilterBuilderRowValue;
diff --git a/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValueConnector.js b/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValueConnector.js
deleted file mode 100644
index 4a8b82283..000000000
--- a/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValueConnector.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import FilterBuilderRowValue from './FilterBuilderRowValue';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.settings.qualityProfiles,
- (qualityProfiles) => {
- const tagList = qualityProfiles.items.map((qualityProfile) => {
- const {
- id,
- name
- } = qualityProfile;
-
- return {
- id,
- name
- };
- });
-
- return {
- tagList
- };
- }
- );
-}
-
-export default connect(createMapStateToProps)(FilterBuilderRowValue);
diff --git a/frontend/src/Components/Filter/Builder/QueueStatusFilterBuilderRowValue.tsx b/frontend/src/Components/Filter/Builder/QueueStatusFilterBuilderRowValue.tsx
new file mode 100644
index 000000000..1127493a5
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/QueueStatusFilterBuilderRowValue.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import translate from 'Utilities/String/translate';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+const statusTagList = [
+ {
+ id: 'queued',
+ get name() {
+ return translate('Queued');
+ },
+ },
+ {
+ id: 'paused',
+ get name() {
+ return translate('Paused');
+ },
+ },
+ {
+ id: 'downloading',
+ get name() {
+ return translate('Downloading');
+ },
+ },
+ {
+ id: 'completed',
+ get name() {
+ return translate('Completed');
+ },
+ },
+ {
+ id: 'failed',
+ get name() {
+ return translate('Failed');
+ },
+ },
+ {
+ id: 'warning',
+ get name() {
+ return translate('Warning');
+ },
+ },
+ {
+ id: 'delay',
+ get name() {
+ return translate('Delay');
+ },
+ },
+ {
+ id: 'downloadClientUnavailable',
+ get name() {
+ return translate('DownloadClientUnavailable');
+ },
+ },
+ {
+ id: 'fallback',
+ get name() {
+ return translate('Fallback');
+ },
+ },
+];
+
+function QueueStatusFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
+ return
;
+}
+
+export default QueueStatusFilterBuilderRowValue;
diff --git a/frontend/src/Components/Filter/Builder/SeasonsMonitoredStatusFilterBuilderRowValue.js b/frontend/src/Components/Filter/Builder/SeasonsMonitoredStatusFilterBuilderRowValue.js
new file mode 100644
index 000000000..b84260e3c
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/SeasonsMonitoredStatusFilterBuilderRowValue.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import translate from 'Utilities/String/translate';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+
+const seasonsMonitoredStatusList = [
+ {
+ id: 'all',
+ get name() {
+ return translate('SeasonsMonitoredAll');
+ }
+ },
+ {
+ id: 'partial',
+ get name() {
+ return translate('SeasonsMonitoredPartial');
+ }
+ },
+ {
+ id: 'none',
+ get name() {
+ return translate('SeasonsMonitoredNone');
+ }
+ }
+];
+
+function SeasonsMonitoredStatusFilterBuilderRowValue(props) {
+ return (
+
+ );
+}
+
+export default SeasonsMonitoredStatusFilterBuilderRowValue;
diff --git a/frontend/src/Components/Filter/Builder/SeriesFilterBuilderRowValue.tsx b/frontend/src/Components/Filter/Builder/SeriesFilterBuilderRowValue.tsx
index 2eae79c80..88b34509a 100644
--- a/frontend/src/Components/Filter/Builder/SeriesFilterBuilderRowValue.tsx
+++ b/frontend/src/Components/Filter/Builder/SeriesFilterBuilderRowValue.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useSelector } from 'react-redux';
import Series from 'Series/Series';
import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
import FilterBuilderRowValue from './FilterBuilderRowValue';
import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
@@ -11,7 +11,7 @@ function SeriesFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
const tagList = allSeries
.map((series) => ({ id: series.id, name: series.title }))
- .sort(sortByName);
+ .sort(sortByProp('name'));
return
;
}
diff --git a/frontend/src/Components/Filter/Builder/SeriesStatusFilterBuilderRowValue.js b/frontend/src/Components/Filter/Builder/SeriesStatusFilterBuilderRowValue.js
index 3464300f1..e017f72e7 100644
--- a/frontend/src/Components/Filter/Builder/SeriesStatusFilterBuilderRowValue.js
+++ b/frontend/src/Components/Filter/Builder/SeriesStatusFilterBuilderRowValue.js
@@ -2,7 +2,7 @@ import React from 'react';
import translate from 'Utilities/String/translate';
import FilterBuilderRowValue from './FilterBuilderRowValue';
-const seriesStatusList = [
+const statusTagList = [
{
id: 'continuing',
get name() {
@@ -32,7 +32,7 @@ const seriesStatusList = [
function SeriesStatusFilterBuilderRowValue(props) {
return (
);
diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFilter.js b/frontend/src/Components/Filter/CustomFilters/CustomFilter.js
index 7407f729a..9f378d5a2 100644
--- a/frontend/src/Components/Filter/CustomFilters/CustomFilter.js
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFilter.js
@@ -37,8 +37,8 @@ class CustomFilter extends Component {
dispatchSetFilter
} = this.props;
- // Assume that delete and then unmounting means the delete was successful.
- // Moving this check to a ancestor would be more accurate, but would have
+ // Assume that delete and then unmounting means the deletion was successful.
+ // Moving this check to an ancestor would be more accurate, but would have
// more boilerplate.
if (this.state.isDeleting && id === selectedFilterKey) {
dispatchSetFilter({ selectedFilterKey: 'all' });
diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
index 28eb91599..99cb6ec5c 100644
--- a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
@@ -5,6 +5,7 @@ import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
+import sortByProp from 'Utilities/Array/sortByProp';
import translate from 'Utilities/String/translate';
import CustomFilter from './CustomFilter';
import styles from './CustomFiltersModalContent.css';
@@ -31,7 +32,7 @@ function CustomFiltersModalContent(props) {
{
customFilters
- .sort((a, b) => a.label.localeCompare(b.label))
+ .sort((a, b) => sortByProp(a, b, 'label'))
.map((customFilter) => {
return (
{
- this.props.onChange({
- name: this.props.name,
- value: newValue
- });
- };
-
- onInputBlur = () => {
- this.setState({ suggestions: [] });
- };
-
- onSuggestionsFetchRequested = ({ value }) => {
- const { values } = this.props;
- const lowerCaseValue = jdu.replace(value).toLowerCase();
-
- const filteredValues = values.filter((v) => {
- return jdu.replace(v).toLowerCase().contains(lowerCaseValue);
- });
-
- this.setState({ suggestions: filteredValues });
- };
-
- onSuggestionsClearRequested = () => {
- this.setState({ suggestions: [] });
- };
-
- //
- // Render
-
- render() {
- const {
- name,
- value,
- ...otherProps
- } = this.props;
-
- const { suggestions } = this.state;
-
- return (
-
- );
- }
-}
-
-AutoCompleteInput.propTypes = {
- name: PropTypes.string.isRequired,
- value: PropTypes.string,
- values: PropTypes.arrayOf(PropTypes.string).isRequired,
- onChange: PropTypes.func.isRequired
-};
-
-AutoCompleteInput.defaultProps = {
- value: ''
-};
-
-export default AutoCompleteInput;
diff --git a/frontend/src/Components/Form/AutoCompleteInput.tsx b/frontend/src/Components/Form/AutoCompleteInput.tsx
new file mode 100644
index 000000000..7ba114125
--- /dev/null
+++ b/frontend/src/Components/Form/AutoCompleteInput.tsx
@@ -0,0 +1,81 @@
+import jdu from 'jdu';
+import React, { SyntheticEvent, useCallback, useState } from 'react';
+import {
+ ChangeEvent,
+ SuggestionsFetchRequestedParams,
+} from 'react-autosuggest';
+import { InputChanged } from 'typings/inputs';
+import AutoSuggestInput from './AutoSuggestInput';
+
+interface AutoCompleteInputProps {
+ name: string;
+ value?: string;
+ values: string[];
+ onChange: (change: InputChanged) => unknown;
+}
+
+function AutoCompleteInput({
+ name,
+ value = '',
+ values,
+ onChange,
+ ...otherProps
+}: AutoCompleteInputProps) {
+ const [suggestions, setSuggestions] = useState([]);
+
+ const getSuggestionValue = useCallback((item: string) => {
+ return item;
+ }, []);
+
+ const renderSuggestion = useCallback((item: string) => {
+ return item;
+ }, []);
+
+ const handleInputChange = useCallback(
+ (_event: SyntheticEvent, { newValue }: ChangeEvent) => {
+ onChange({
+ name,
+ value: newValue,
+ });
+ },
+ [name, onChange]
+ );
+
+ const handleInputBlur = useCallback(() => {
+ setSuggestions([]);
+ }, [setSuggestions]);
+
+ const handleSuggestionsFetchRequested = useCallback(
+ ({ value: newValue }: SuggestionsFetchRequestedParams) => {
+ const lowerCaseValue = jdu.replace(newValue).toLowerCase();
+
+ const filteredValues = values.filter((v) => {
+ return jdu.replace(v).toLowerCase().includes(lowerCaseValue);
+ });
+
+ setSuggestions(filteredValues);
+ },
+ [values, setSuggestions]
+ );
+
+ const handleSuggestionsClearRequested = useCallback(() => {
+ setSuggestions([]);
+ }, [setSuggestions]);
+
+ return (
+
+ );
+}
+
+export default AutoCompleteInput;
diff --git a/frontend/src/Components/Form/AutoSuggestInput.js b/frontend/src/Components/Form/AutoSuggestInput.js
deleted file mode 100644
index 34ec7530b..000000000
--- a/frontend/src/Components/Form/AutoSuggestInput.js
+++ /dev/null
@@ -1,257 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Autosuggest from 'react-autosuggest';
-import { Manager, Popper, Reference } from 'react-popper';
-import Portal from 'Components/Portal';
-import styles from './AutoSuggestInput.css';
-
-class AutoSuggestInput extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this._scheduleUpdate = null;
- }
-
- componentDidUpdate(prevProps) {
- if (
- this._scheduleUpdate &&
- prevProps.suggestions !== this.props.suggestions
- ) {
- this._scheduleUpdate();
- }
- }
-
- //
- // Control
-
- renderInputComponent = (inputProps) => {
- const { renderInputComponent } = this.props;
-
- return (
-
- {({ ref }) => {
- if (renderInputComponent) {
- return renderInputComponent(inputProps, ref);
- }
-
- return (
-
-
-
- );
- }}
-
- );
- };
-
- renderSuggestionsContainer = ({ containerProps, children }) => {
- return (
-
-
- {({ ref: popperRef, style, scheduleUpdate }) => {
- this._scheduleUpdate = scheduleUpdate;
-
- return (
-
- );
- }}
-
-
- );
- };
-
- //
- // Listeners
-
- onComputeMaxHeight = (data) => {
- const {
- top,
- bottom,
- width
- } = data.offsets.reference;
-
- const windowHeight = window.innerHeight;
-
- if ((/^botton/).test(data.placement)) {
- data.styles.maxHeight = windowHeight - bottom;
- } else {
- data.styles.maxHeight = top;
- }
-
- data.styles.width = width;
-
- return data;
- };
-
- onInputChange = (event, { newValue }) => {
- this.props.onChange({
- name: this.props.name,
- value: newValue
- });
- };
-
- onInputKeyDown = (event) => {
- const {
- name,
- value,
- suggestions,
- onChange
- } = this.props;
-
- if (
- event.key === 'Tab' &&
- suggestions.length &&
- suggestions[0] !== this.props.value
- ) {
- event.preventDefault();
-
- if (value) {
- onChange({
- name,
- value: suggestions[0]
- });
- }
- }
- };
-
- //
- // Render
-
- render() {
- const {
- forwardedRef,
- className,
- inputContainerClassName,
- name,
- value,
- placeholder,
- suggestions,
- hasError,
- hasWarning,
- getSuggestionValue,
- renderSuggestion,
- onInputChange,
- onInputKeyDown,
- onInputFocus,
- onInputBlur,
- onSuggestionsFetchRequested,
- onSuggestionsClearRequested,
- onSuggestionSelected,
- ...otherProps
- } = this.props;
-
- const inputProps = {
- className: classNames(
- className,
- hasError && styles.hasError,
- hasWarning && styles.hasWarning
- ),
- name,
- value,
- placeholder,
- autoComplete: 'off',
- spellCheck: false,
- onChange: onInputChange || this.onInputChange,
- onKeyDown: onInputKeyDown || this.onInputKeyDown,
- onFocus: onInputFocus,
- onBlur: onInputBlur
- };
-
- const theme = {
- container: inputContainerClassName,
- containerOpen: styles.suggestionsContainerOpen,
- suggestionsContainer: styles.suggestionsContainer,
- suggestionsList: styles.suggestionsList,
- suggestion: styles.suggestion,
- suggestionHighlighted: styles.suggestionHighlighted
- };
-
- return (
-
-
-
- );
- }
-}
-
-AutoSuggestInput.propTypes = {
- forwardedRef: PropTypes.func,
- className: PropTypes.string.isRequired,
- inputContainerClassName: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
- placeholder: PropTypes.string,
- suggestions: PropTypes.array.isRequired,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- enforceMaxHeight: PropTypes.bool.isRequired,
- minHeight: PropTypes.number.isRequired,
- maxHeight: PropTypes.number.isRequired,
- getSuggestionValue: PropTypes.func.isRequired,
- renderInputComponent: PropTypes.elementType,
- renderSuggestion: PropTypes.func.isRequired,
- onInputChange: PropTypes.func,
- onInputKeyDown: PropTypes.func,
- onInputFocus: PropTypes.func,
- onInputBlur: PropTypes.func.isRequired,
- onSuggestionsFetchRequested: PropTypes.func.isRequired,
- onSuggestionsClearRequested: PropTypes.func.isRequired,
- onSuggestionSelected: PropTypes.func,
- onChange: PropTypes.func.isRequired
-};
-
-AutoSuggestInput.defaultProps = {
- className: styles.input,
- inputContainerClassName: styles.inputContainer,
- enforceMaxHeight: true,
- minHeight: 50,
- maxHeight: 200
-};
-
-export default AutoSuggestInput;
diff --git a/frontend/src/Components/Form/AutoSuggestInput.tsx b/frontend/src/Components/Form/AutoSuggestInput.tsx
new file mode 100644
index 000000000..b3a7c31b0
--- /dev/null
+++ b/frontend/src/Components/Form/AutoSuggestInput.tsx
@@ -0,0 +1,259 @@
+import classNames from 'classnames';
+import React, {
+ FocusEvent,
+ FormEvent,
+ KeyboardEvent,
+ KeyboardEventHandler,
+ MutableRefObject,
+ ReactNode,
+ Ref,
+ SyntheticEvent,
+ useCallback,
+ useEffect,
+ useRef,
+} from 'react';
+import Autosuggest, {
+ AutosuggestPropsBase,
+ BlurEvent,
+ ChangeEvent,
+ RenderInputComponentProps,
+ RenderSuggestionsContainerParams,
+} from 'react-autosuggest';
+import { Manager, Popper, Reference } from 'react-popper';
+import Portal from 'Components/Portal';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { InputChanged } from 'typings/inputs';
+import styles from './AutoSuggestInput.css';
+
+interface AutoSuggestInputProps
+ extends Omit, 'renderInputComponent' | 'inputProps'> {
+ forwardedRef?: MutableRefObject | null>;
+ className?: string;
+ inputContainerClassName?: string;
+ name: string;
+ value?: string;
+ placeholder?: string;
+ suggestions: T[];
+ hasError?: boolean;
+ hasWarning?: boolean;
+ enforceMaxHeight?: boolean;
+ minHeight?: number;
+ maxHeight?: number;
+ renderInputComponent?: (
+ inputProps: RenderInputComponentProps,
+ ref: Ref
+ ) => ReactNode;
+ onInputChange: (
+ event: FormEvent,
+ params: ChangeEvent
+ ) => unknown;
+ onInputKeyDown?: KeyboardEventHandler;
+ onInputFocus?: (event: SyntheticEvent) => unknown;
+ onInputBlur: (
+ event: FocusEvent,
+ params?: BlurEvent
+ ) => unknown;
+ onChange?: (change: InputChanged) => unknown;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function AutoSuggestInput(props: AutoSuggestInputProps) {
+ const {
+ // TODO: forwaredRef should be replaces with React.forwardRef
+ forwardedRef,
+ className = styles.input,
+ inputContainerClassName = styles.inputContainer,
+ name,
+ value = '',
+ placeholder,
+ suggestions,
+ enforceMaxHeight = true,
+ hasError,
+ hasWarning,
+ minHeight = 50,
+ maxHeight = 200,
+ getSuggestionValue,
+ renderSuggestion,
+ renderInputComponent,
+ onInputChange,
+ onInputKeyDown,
+ onInputFocus,
+ onInputBlur,
+ onSuggestionsFetchRequested,
+ onSuggestionsClearRequested,
+ onSuggestionSelected,
+ onChange,
+ ...otherProps
+ } = props;
+
+ const updater = useRef<(() => void) | null>(null);
+ const previousSuggestions = usePrevious(suggestions);
+
+ const handleComputeMaxHeight = useCallback(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (data: any) => {
+ const { top, bottom, width } = data.offsets.reference;
+
+ if (enforceMaxHeight) {
+ data.styles.maxHeight = maxHeight;
+ } else {
+ const windowHeight = window.innerHeight;
+
+ if (/^botton/.test(data.placement)) {
+ data.styles.maxHeight = windowHeight - bottom;
+ } else {
+ data.styles.maxHeight = top;
+ }
+ }
+
+ data.styles.width = width;
+
+ return data;
+ },
+ [enforceMaxHeight, maxHeight]
+ );
+
+ const createRenderInputComponent = useCallback(
+ (inputProps: RenderInputComponentProps) => {
+ return (
+
+ {({ ref }) => {
+ if (renderInputComponent) {
+ return renderInputComponent(inputProps, ref);
+ }
+
+ return (
+
+
+
+ );
+ }}
+
+ );
+ },
+ [renderInputComponent]
+ );
+
+ const renderSuggestionsContainer = useCallback(
+ ({ containerProps, children }: RenderSuggestionsContainerParams) => {
+ return (
+
+
+ {({ ref: popperRef, style, scheduleUpdate }) => {
+ updater.current = scheduleUpdate;
+
+ return (
+
+ );
+ }}
+
+
+ );
+ },
+ [minHeight, handleComputeMaxHeight]
+ );
+
+ const handleInputKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ if (
+ event.key === 'Tab' &&
+ suggestions.length &&
+ suggestions[0] !== value
+ ) {
+ event.preventDefault();
+
+ if (value) {
+ onSuggestionSelected?.(event, {
+ suggestion: suggestions[0],
+ suggestionValue: value,
+ suggestionIndex: 0,
+ sectionIndex: null,
+ method: 'enter',
+ });
+ }
+ }
+ },
+ [value, suggestions, onSuggestionSelected]
+ );
+
+ const inputProps = {
+ className: classNames(
+ className,
+ hasError && styles.hasError,
+ hasWarning && styles.hasWarning
+ ),
+ name,
+ value,
+ placeholder,
+ autoComplete: 'off',
+ spellCheck: false,
+ onChange: onInputChange,
+ onKeyDown: onInputKeyDown || handleInputKeyDown,
+ onFocus: onInputFocus,
+ onBlur: onInputBlur,
+ };
+
+ const theme = {
+ container: inputContainerClassName,
+ containerOpen: styles.suggestionsContainerOpen,
+ suggestionsContainer: styles.suggestionsContainer,
+ suggestionsList: styles.suggestionsList,
+ suggestion: styles.suggestion,
+ suggestionHighlighted: styles.suggestionHighlighted,
+ };
+
+ useEffect(() => {
+ if (updater.current && suggestions !== previousSuggestions) {
+ updater.current();
+ }
+ }, [suggestions, previousSuggestions]);
+
+ return (
+
+
+
+ );
+}
+
+export default AutoSuggestInput;
diff --git a/frontend/src/Components/Form/CaptchaInput.js b/frontend/src/Components/Form/CaptchaInput.js
deleted file mode 100644
index b422198b5..000000000
--- a/frontend/src/Components/Form/CaptchaInput.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-import Icon from 'Components/Icon';
-import { icons } from 'Helpers/Props';
-import FormInputButton from './FormInputButton';
-import TextInput from './TextInput';
-import styles from './CaptchaInput.css';
-
-function CaptchaInput(props) {
- const {
- className,
- name,
- value,
- hasError,
- hasWarning,
- refreshing,
- siteKey,
- secretToken,
- onChange,
- onRefreshPress,
- onCaptchaChange
- } = props;
-
- return (
-
-
-
-
-
-
-
-
-
- {
- !!siteKey && !!secretToken &&
-
-
-
- }
-
+
+
+
+
+
+
+
+
+ {siteKey && secretToken ? (
+
+
+
+ ) : null}
+
-
-
+
+
-
-
-
-
-
-
- );
- }
-}
-
-DeviceInput.propTypes = {
- className: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
- items: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
- selectedDevices: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- isFetching: PropTypes.bool.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- onRefreshPress: PropTypes.func.isRequired
-};
-
-DeviceInput.defaultProps = {
- className: styles.deviceInputWrapper,
- inputClassName: styles.input
-};
-
-export default DeviceInput;
diff --git a/frontend/src/Components/Form/DeviceInputConnector.js b/frontend/src/Components/Form/DeviceInputConnector.js
deleted file mode 100644
index 2af9a79f6..000000000
--- a/frontend/src/Components/Form/DeviceInputConnector.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { clearOptions, defaultState, fetchOptions } from 'Store/Actions/providerOptionActions';
-import DeviceInput from './DeviceInput';
-
-function createMapStateToProps() {
- return createSelector(
- (state, { value }) => value,
- (state) => state.providerOptions.devices || defaultState,
- (value, devices) => {
-
- return {
- ...devices,
- selectedDevices: value.map((valueDevice) => {
- // Disable equality ESLint rule so we don't need to worry about
- // a type mismatch between the value items and the device ID.
- // eslint-disable-next-line eqeqeq
- const device = devices.items.find((d) => d.id == valueDevice);
-
- if (device) {
- return {
- id: device.id,
- name: `${device.name} (${device.id})`
- };
- }
-
- return {
- id: valueDevice,
- name: `Unknown (${valueDevice})`
- };
- })
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- dispatchFetchOptions: fetchOptions,
- dispatchClearOptions: clearOptions
-};
-
-class DeviceInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidMount = () => {
- this._populate();
- };
-
- componentWillUnmount = () => {
- this.props.dispatchClearOptions({ section: 'devices' });
- };
-
- //
- // Control
-
- _populate() {
- const {
- provider,
- providerData,
- dispatchFetchOptions
- } = this.props;
-
- dispatchFetchOptions({
- section: 'devices',
- action: 'getDevices',
- provider,
- providerData
- });
- }
-
- //
- // Listeners
-
- onRefreshPress = () => {
- this._populate();
- };
-
- //
- // Render
-
- render() {
- return (
-
- );
- }
-}
-
-DeviceInputConnector.propTypes = {
- provider: PropTypes.string.isRequired,
- providerData: PropTypes.object.isRequired,
- name: PropTypes.string.isRequired,
- onChange: PropTypes.func.isRequired,
- dispatchFetchOptions: PropTypes.func.isRequired,
- dispatchClearOptions: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(DeviceInputConnector);
diff --git a/frontend/src/Components/Form/DownloadClientSelectInputConnector.js b/frontend/src/Components/Form/DownloadClientSelectInputConnector.js
deleted file mode 100644
index f0ebf534b..000000000
--- a/frontend/src/Components/Form/DownloadClientSelectInputConnector.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchDownloadClients } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
-import translate from 'Utilities/String/translate';
-import EnhancedSelectInput from './EnhancedSelectInput';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.settings.downloadClients,
- (state, { includeAny }) => includeAny,
- (state, { protocol }) => protocol,
- (downloadClients, includeAny, protocolFilter) => {
- const {
- isFetching,
- isPopulated,
- error,
- items
- } = downloadClients;
-
- const filteredItems = items.filter((item) => item.protocol === protocolFilter);
-
- const values = _.map(filteredItems.sort(sortByName), (downloadClient) => {
- return {
- key: downloadClient.id,
- value: downloadClient.name
- };
- });
-
- if (includeAny) {
- values.unshift({
- key: 0,
- value: `(${translate('Any')})`
- });
- }
-
- return {
- isFetching,
- isPopulated,
- error,
- values
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- dispatchFetchDownloadClients: fetchDownloadClients
-};
-
-class DownloadClientSelectInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidMount() {
- if (!this.props.isPopulated) {
- this.props.dispatchFetchDownloadClients();
- }
- }
-
- //
- // Listeners
-
- onChange = ({ name, value }) => {
- this.props.onChange({ name, value: parseInt(value) });
- };
-
- //
- // Render
-
- render() {
- return (
-
- );
- }
-}
-
-DownloadClientSelectInputConnector.propTypes = {
- isFetching: PropTypes.bool.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- includeAny: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- dispatchFetchDownloadClients: PropTypes.func.isRequired
-};
-
-DownloadClientSelectInputConnector.defaultProps = {
- includeAny: false,
- protocol: 'torrent'
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(DownloadClientSelectInputConnector);
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
deleted file mode 100644
index cc4215025..000000000
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ /dev/null
@@ -1,608 +0,0 @@
-import classNames from 'classnames';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-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';
-import Portal from 'Components/Portal';
-import Scroller from 'Components/Scroller/Scroller';
-import { icons, scrollDirections, sizes } from 'Helpers/Props';
-import { isMobile as isMobileUtil } from 'Utilities/browser';
-import * as keyCodes from 'Utilities/Constants/keyCodes';
-import getUniqueElememtId from 'Utilities/getUniqueElementId';
-import HintedSelectInputOption from './HintedSelectInputOption';
-import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
-import TextInput from './TextInput';
-import styles from './EnhancedSelectInput.css';
-
-function isArrowKey(keyCode) {
- return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
-}
-
-function getSelectedOption(selectedIndex, values) {
- return values[selectedIndex];
-}
-
-function findIndex(startingIndex, direction, values) {
- let indexToTest = startingIndex + direction;
-
- while (indexToTest !== startingIndex) {
- if (indexToTest < 0) {
- indexToTest = values.length - 1;
- } else if (indexToTest >= values.length) {
- indexToTest = 0;
- }
-
- if (getSelectedOption(indexToTest, values).isDisabled) {
- indexToTest = indexToTest + direction;
- } else {
- return indexToTest;
- }
- }
-}
-
-function previousIndex(selectedIndex, values) {
- return findIndex(selectedIndex, -1, values);
-}
-
-function nextIndex(selectedIndex, values) {
- return findIndex(selectedIndex, 1, values);
-}
-
-function getSelectedIndex(props) {
- const {
- value,
- values
- } = props;
-
- if (Array.isArray(value)) {
- return values.findIndex((v) => {
- return value.size && v.key === value[0];
- });
- }
-
- return values.findIndex((v) => {
- return v.key === value;
- });
-}
-
-function isSelectedItem(index, props) {
- const {
- value,
- values
- } = props;
-
- if (Array.isArray(value)) {
- return value.includes(values[index].key);
- }
-
- return values[index].key === value;
-}
-
-function getKey(selectedIndex, values) {
- return values[selectedIndex].key;
-}
-
-class EnhancedSelectInput extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this._scheduleUpdate = null;
- this._buttonId = getUniqueElememtId();
- this._optionsId = getUniqueElememtId();
-
- this.state = {
- isOpen: false,
- selectedIndex: getSelectedIndex(props),
- width: 0,
- isMobile: isMobileUtil()
- };
- }
-
- componentDidUpdate(prevProps) {
- if (this._scheduleUpdate) {
- this._scheduleUpdate();
- }
-
- if (!Array.isArray(this.props.value)) {
- if (prevProps.value !== this.props.value || prevProps.values !== this.props.values) {
- this.setState({
- selectedIndex: getSelectedIndex(this.props)
- });
- }
- }
- }
-
- //
- // Control
-
- _addListener() {
- window.addEventListener('click', this.onWindowClick);
- }
-
- _removeListener() {
- window.removeEventListener('click', this.onWindowClick);
- }
-
- //
- // Listeners
-
- onComputeMaxHeight = (data) => {
- const {
- top,
- bottom
- } = data.offsets.reference;
-
- const windowHeight = window.innerHeight;
-
- if ((/^botton/).test(data.placement)) {
- data.styles.maxHeight = windowHeight - bottom;
- } else {
- data.styles.maxHeight = top;
- }
-
- return data;
- };
-
- onWindowClick = (event) => {
- const button = document.getElementById(this._buttonId);
- const options = document.getElementById(this._optionsId);
-
- if (!button || !event.target.isConnected || this.state.isMobile) {
- return;
- }
-
- if (
- !button.contains(event.target) &&
- options &&
- !options.contains(event.target) &&
- this.state.isOpen
- ) {
- this.setState({ isOpen: false });
- this._removeListener();
- }
- };
-
- onFocus = () => {
- if (this.state.isOpen) {
- this._removeListener();
- this.setState({ isOpen: false });
- }
- };
-
- onBlur = () => {
- 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 });
- }
- }
- };
-
- onKeyDown = (event) => {
- const {
- values
- } = this.props;
-
- const {
- isOpen,
- selectedIndex
- } = this.state;
-
- const keyCode = event.keyCode;
- const newState = {};
-
- if (!isOpen) {
- if (isArrowKey(keyCode)) {
- event.preventDefault();
- newState.isOpen = true;
- }
-
- if (
- selectedIndex == null || selectedIndex === -1 ||
- getSelectedOption(selectedIndex, values).isDisabled
- ) {
- if (keyCode === keyCodes.UP_ARROW) {
- newState.selectedIndex = previousIndex(0, values);
- } else if (keyCode === keyCodes.DOWN_ARROW) {
- newState.selectedIndex = nextIndex(values.length - 1, values);
- }
- }
-
- this.setState(newState);
- return;
- }
-
- if (keyCode === keyCodes.UP_ARROW) {
- event.preventDefault();
- newState.selectedIndex = previousIndex(selectedIndex, values);
- }
-
- if (keyCode === keyCodes.DOWN_ARROW) {
- event.preventDefault();
- newState.selectedIndex = nextIndex(selectedIndex, values);
- }
-
- if (keyCode === keyCodes.ENTER) {
- event.preventDefault();
- newState.isOpen = false;
- this.onSelect(getKey(selectedIndex, values));
- }
-
- if (keyCode === keyCodes.TAB) {
- newState.isOpen = false;
- this.onSelect(getKey(selectedIndex, values));
- }
-
- if (keyCode === keyCodes.ESCAPE) {
- event.preventDefault();
- event.stopPropagation();
- newState.isOpen = false;
- newState.selectedIndex = getSelectedIndex(this.props);
- }
-
- if (!_.isEmpty(newState)) {
- this.setState(newState);
- }
- };
-
- onPress = () => {
- if (this.state.isOpen) {
- this._removeListener();
- } else {
- this._addListener();
- }
-
- if (!this.state.isOpen && this.props.onOpen) {
- this.props.onOpen();
- }
-
- this.setState({ isOpen: !this.state.isOpen });
- };
-
- onSelect = (value) => {
- if (Array.isArray(this.props.value)) {
- let newValue = null;
- const index = this.props.value.indexOf(value);
- if (index === -1) {
- newValue = this.props.values.map((v) => v.key).filter((v) => (v === value) || this.props.value.includes(v));
- } else {
- newValue = [...this.props.value];
- newValue.splice(index, 1);
- }
- this.props.onChange({
- name: this.props.name,
- value: newValue
- });
- } else {
- this.setState({ isOpen: false });
-
- this.props.onChange({
- name: this.props.name,
- value
- });
- }
- };
-
- onMeasure = ({ width }) => {
- this.setState({ width });
- };
-
- onOptionsModalClose = () => {
- this.setState({ isOpen: false });
- };
-
- //
- // Render
-
- render() {
- const {
- className,
- disabledClassName,
- name,
- value,
- values,
- isDisabled,
- isEditable,
- isFetching,
- hasError,
- hasWarning,
- valueOptions,
- selectedValueOptions,
- selectedValueComponent: SelectedValueComponent,
- optionComponent: OptionComponent,
- onChange
- } = this.props;
-
- const {
- selectedIndex,
- width,
- isOpen,
- isMobile
- } = this.state;
-
- const isMultiSelect = Array.isArray(value);
- const selectedOption = getSelectedOption(selectedIndex, values);
- let selectedValue = value;
-
- if (!values.length) {
- selectedValue = isMultiSelect ? [] : '';
- }
-
- return (
-
-
-
- {({ ref }) => (
-
- )}
-
-
-
- {({ ref, style, scheduleUpdate }) => {
- this._scheduleUpdate = scheduleUpdate;
-
- return (
-
- {
- isOpen && !isMobile ?
-
- {
- values.map((v, index) => {
- const hasParent = v.parentKey !== undefined;
- const depth = hasParent ? 1 : 0;
- const parentSelected = hasParent && value.includes(v.parentKey);
- return (
-
- {v.value}
-
- );
- })
- }
- :
- null
- }
-
- );
- }
- }
-
-
-
-
- {
- isMobile ?
-
-
-
-
-
-
-
-
-
- {
- values.map((v, index) => {
- const hasParent = v.parentKey !== undefined;
- const depth = hasParent ? 1 : 0;
- const parentSelected = hasParent && value.includes(v.parentKey);
- return (
-
- {v.value}
-
- );
- })
- }
-
-
- :
- null
- }
-
-
-
- }
-
- );
- }
-}
-
-EnhancedSelectInputOption.propTypes = {
- className: PropTypes.string.isRequired,
- id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- depth: PropTypes.number.isRequired,
- isSelected: PropTypes.bool.isRequired,
- isDisabled: PropTypes.bool.isRequired,
- isHidden: PropTypes.bool.isRequired,
- isMultiSelect: PropTypes.bool.isRequired,
- isMobile: PropTypes.bool.isRequired,
- children: PropTypes.node.isRequired,
- onSelect: PropTypes.func.isRequired
-};
-
-EnhancedSelectInputOption.defaultProps = {
- className: styles.option,
- depth: 0,
- isDisabled: false,
- isHidden: false,
- isMultiSelect: false
-};
-
-export default EnhancedSelectInputOption;
diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.js b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.js
deleted file mode 100644
index 21ddebb02..000000000
--- a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './EnhancedSelectInputSelectedValue.css';
-
-function EnhancedSelectInputSelectedValue(props) {
- const {
- className,
- children,
- isDisabled
- } = props;
-
- return (
-
- {children}
-
- );
-}
-
-EnhancedSelectInputSelectedValue.propTypes = {
- className: PropTypes.string.isRequired,
- children: PropTypes.node,
- isDisabled: PropTypes.bool.isRequired
-};
-
-EnhancedSelectInputSelectedValue.defaultProps = {
- className: styles.selectedValue,
- isDisabled: false
-};
-
-export default EnhancedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Form.js b/frontend/src/Components/Form/Form.js
deleted file mode 100644
index 79ad3fe8a..000000000
--- a/frontend/src/Components/Form/Form.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Alert from 'Components/Alert';
-import { kinds } from 'Helpers/Props';
-import styles from './Form.css';
-
-function Form(props) {
- const {
- children,
- validationErrors,
- validationWarnings,
- // eslint-disable-next-line no-unused-vars
- ...otherProps
- } = props;
-
- return (
-
- {
- validationErrors.length || validationWarnings.length ?
-
- {
- validationErrors.map((error, index) => {
- return (
-
- {error.errorMessage}
-
- );
- })
- }
-
- {
- validationWarnings.map((warning, index) => {
- return (
-
- {warning.errorMessage}
-
- );
- })
- }
-
:
- null
- }
-
- {children}
-
+ {validationErrors.length || validationWarnings.length ? (
+
+ {validationErrors.map((error, index) => {
+ return (
+
+ {error.errorMessage}
+
+ );
+ })}
+
+ {validationWarnings.map((warning, index) => {
+ return (
+
+ {warning.errorMessage}
+
+ );
+ })}
+
+ ) : null}
+
+ {children}
+
- {
- map(children, (child) => {
- return React.cloneElement(child, childProps);
- })
- }
-
- );
-}
-
-FormGroup.propTypes = {
- className: PropTypes.string.isRequired,
- children: PropTypes.node.isRequired,
- size: PropTypes.oneOf(sizes.all).isRequired,
- advancedSettings: PropTypes.bool.isRequired,
- isAdvanced: PropTypes.bool.isRequired
-};
-
-FormGroup.defaultProps = {
- className: styles.group,
- size: sizes.SMALL,
- advancedSettings: false,
- isAdvanced: false
-};
-
-export default FormGroup;
diff --git a/frontend/src/Components/Form/FormGroup.tsx b/frontend/src/Components/Form/FormGroup.tsx
new file mode 100644
index 000000000..1dd879897
--- /dev/null
+++ b/frontend/src/Components/Form/FormGroup.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import React, { Children, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FormGroup.css';
+
+interface FormGroupProps extends ComponentPropsWithoutRef<'div'> {
+ className?: string;
+ children: ReactNode;
+ size?: Extract;
+ advancedSettings?: boolean;
+ isAdvanced?: boolean;
+}
+
+function FormGroup(props: FormGroupProps) {
+ const {
+ className = styles.group,
+ children,
+ size = 'small',
+ advancedSettings = false,
+ isAdvanced = false,
+ ...otherProps
+ } = props;
+
+ if (!advancedSettings && isAdvanced) {
+ return null;
+ }
+
+ const childProps = isAdvanced ? { isAdvanced } : {};
+
+ return (
+
+ {Children.map(children, (child) => {
+ if (!React.isValidElement(child)) {
+ return child;
+ }
+
+ return React.cloneElement(child, childProps);
+ })}
+
+ );
+}
+
+export default FormGroup;
diff --git a/frontend/src/Components/Form/FormInputButton.js b/frontend/src/Components/Form/FormInputButton.js
deleted file mode 100644
index a7145363a..000000000
--- a/frontend/src/Components/Form/FormInputButton.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import { kinds } from 'Helpers/Props';
-import styles from './FormInputButton.css';
-
-function FormInputButton(props) {
- const {
- className,
- canSpin,
- isLastButton,
- ...otherProps
- } = props;
-
- if (canSpin) {
- return (
-
- );
- }
-
- return (
-
- );
-}
-
-FormInputButton.propTypes = {
- className: PropTypes.string.isRequired,
- isLastButton: PropTypes.bool.isRequired,
- canSpin: PropTypes.bool.isRequired
-};
-
-FormInputButton.defaultProps = {
- className: styles.button,
- isLastButton: true,
- canSpin: false
-};
-
-export default FormInputButton;
diff --git a/frontend/src/Components/Form/FormInputButton.tsx b/frontend/src/Components/Form/FormInputButton.tsx
new file mode 100644
index 000000000..e5149ab14
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputButton.tsx
@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import React from 'react';
+import Button, { ButtonProps } from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import { kinds } from 'Helpers/Props';
+import styles from './FormInputButton.css';
+
+export interface FormInputButtonProps extends ButtonProps {
+ canSpin?: boolean;
+ isLastButton?: boolean;
+}
+
+function FormInputButton({
+ className = styles.button,
+ canSpin = false,
+ isLastButton = true,
+ kind = kinds.PRIMARY,
+ ...otherProps
+}: FormInputButtonProps) {
+ if (canSpin) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+export default FormInputButton;
diff --git a/frontend/src/Components/Form/FormInputGroup.js b/frontend/src/Components/Form/FormInputGroup.js
deleted file mode 100644
index 49f08c90b..000000000
--- a/frontend/src/Components/Form/FormInputGroup.js
+++ /dev/null
@@ -1,297 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Link from 'Components/Link/Link';
-import { inputTypes, kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import AutoCompleteInput from './AutoCompleteInput';
-import CaptchaInputConnector from './CaptchaInputConnector';
-import CheckInput from './CheckInput';
-import DeviceInputConnector from './DeviceInputConnector';
-import DownloadClientSelectInputConnector from './DownloadClientSelectInputConnector';
-import EnhancedSelectInput from './EnhancedSelectInput';
-import EnhancedSelectInputConnector from './EnhancedSelectInputConnector';
-import FormInputHelpText from './FormInputHelpText';
-import IndexerSelectInputConnector from './IndexerSelectInputConnector';
-import KeyValueListInput from './KeyValueListInput';
-import MonitorEpisodesSelectInput from './MonitorEpisodesSelectInput';
-import MonitorNewItemsSelectInput from './MonitorNewItemsSelectInput';
-import NumberInput from './NumberInput';
-import OAuthInputConnector from './OAuthInputConnector';
-import PasswordInput from './PasswordInput';
-import PathInputConnector from './PathInputConnector';
-import QualityProfileSelectInputConnector from './QualityProfileSelectInputConnector';
-import RootFolderSelectInputConnector from './RootFolderSelectInputConnector';
-import SeriesTypeSelectInput from './SeriesTypeSelectInput';
-import TagInputConnector from './TagInputConnector';
-import TagSelectInputConnector from './TagSelectInputConnector';
-import TextArea from './TextArea';
-import TextInput from './TextInput';
-import TextTagInputConnector from './TextTagInputConnector';
-import UMaskInput from './UMaskInput';
-import styles from './FormInputGroup.css';
-
-function getComponent(type) {
- switch (type) {
- case inputTypes.AUTO_COMPLETE:
- return AutoCompleteInput;
-
- case inputTypes.CAPTCHA:
- return CaptchaInputConnector;
-
- case inputTypes.CHECK:
- return CheckInput;
-
- case inputTypes.DEVICE:
- return DeviceInputConnector;
-
- case inputTypes.KEY_VALUE_LIST:
- return KeyValueListInput;
-
- case inputTypes.MONITOR_EPISODES_SELECT:
- return MonitorEpisodesSelectInput;
-
- case inputTypes.MONITOR_NEW_ITEMS_SELECT:
- return MonitorNewItemsSelectInput;
-
- case inputTypes.NUMBER:
- return NumberInput;
-
- case inputTypes.OAUTH:
- return OAuthInputConnector;
-
- case inputTypes.PASSWORD:
- return PasswordInput;
-
- case inputTypes.PATH:
- return PathInputConnector;
-
- case inputTypes.QUALITY_PROFILE_SELECT:
- return QualityProfileSelectInputConnector;
-
- case inputTypes.INDEXER_SELECT:
- return IndexerSelectInputConnector;
-
- case inputTypes.DOWNLOAD_CLIENT_SELECT:
- return DownloadClientSelectInputConnector;
-
- case inputTypes.ROOT_FOLDER_SELECT:
- return RootFolderSelectInputConnector;
-
- case inputTypes.SELECT:
- return EnhancedSelectInput;
-
- case inputTypes.DYNAMIC_SELECT:
- return EnhancedSelectInputConnector;
-
- case inputTypes.SERIES_TYPE_SELECT:
- return SeriesTypeSelectInput;
-
- case inputTypes.TAG:
- return TagInputConnector;
-
- case inputTypes.TEXT_AREA:
- return TextArea;
-
- case inputTypes.TEXT_TAG:
- return TextTagInputConnector;
-
- case inputTypes.TAG_SELECT:
- return TagSelectInputConnector;
-
- case inputTypes.UMASK:
- return UMaskInput;
-
- default:
- return TextInput;
- }
-}
-
-function FormInputGroup(props) {
- const {
- className,
- containerClassName,
- inputClassName,
- type,
- unit,
- buttons,
- helpText,
- helpTexts,
- helpTextWarning,
- helpLink,
- pending,
- errors,
- warnings,
- ...otherProps
- } = props;
-
- const InputComponent = getComponent(type);
- const checkInput = type === inputTypes.CHECK;
- const hasError = !!errors.length;
- const hasWarning = !hasError && !!warnings.length;
- const buttonsArray = React.Children.toArray(buttons);
- const lastButtonIndex = buttonsArray.length - 1;
- const hasButton = !!buttonsArray.length;
-
- return (
-
-
-
-
-
- {
- unit &&
-
- {unit}
-
- }
-
-
- {
- buttonsArray.map((button, index) => {
- return React.cloneElement(
- button,
- {
- isLastButton: index === lastButtonIndex
- }
- );
- })
- }
-
- {/*
- {
- pending &&
-
- }
-
*/}
-
-
- {
- !checkInput && helpText &&
-
- }
-
- {
- !checkInput && helpTexts &&
-
- {
- helpTexts.map((text, index) => {
- return (
-
- );
- })
- }
-
- }
-
- {
- (!checkInput || helpText) && helpTextWarning &&
-
- }
-
- {
- helpLink &&
-
- {translate('MoreInfo')}
-
- }
-
- {
- errors.map((error, index) => {
- return (
-
- );
- })
- }
-
- {
- warnings.map((warning, index) => {
- return (
-
- );
- })
- }
-
+
+
+ {/* @ts-expect-error - need to pass through all the expected options */}
+
+
+ {unit && (
+
+ {unit}
+
+ )}
+
+
+ {buttonsArray.map((button, index) => {
+ if (!React.isValidElement
(button)) {
+ return button;
+ }
+
+ return React.cloneElement(button, {
+ isLastButton: index === lastButtonIndex,
+ });
+ })}
+
+ {/*
+ {
+ pending &&
+
+ }
+
*/}
+
+
+ {!checkInput && helpText ?
: null}
+
+ {!checkInput && helpTexts ? (
+
+ {helpTexts.map((text, index) => {
+ return (
+
+ );
+ })}
+
+ ) : null}
+
+ {(!checkInput || helpText) && helpTextWarning ? (
+
+ ) : null}
+
+ {helpLink ?
{translate('MoreInfo')} : null}
+
+ {errors.map((error, index) => {
+ return 'errorMessage' in error ? (
+
+ ) : (
+
+ );
+ })}
+
+ {warnings.map((warning, index) => {
+ return 'errorMessage' in warning ? (
+
+ ) : (
+
+ );
+ })}
+
- {text}
-
- {
- link ?
-
-
- :
- null
- }
-
- {
- !link && tooltip ?
- :
- null
- }
-
- );
-}
-
-FormInputHelpText.propTypes = {
- className: PropTypes.string.isRequired,
- text: PropTypes.string.isRequired,
- link: PropTypes.string,
- tooltip: PropTypes.string,
- isError: PropTypes.bool,
- isWarning: PropTypes.bool,
- isCheckInput: PropTypes.bool
-};
-
-FormInputHelpText.defaultProps = {
- className: styles.helpText,
- isError: false,
- isWarning: false,
- isCheckInput: false
-};
-
-export default FormInputHelpText;
diff --git a/frontend/src/Components/Form/FormInputHelpText.tsx b/frontend/src/Components/Form/FormInputHelpText.tsx
new file mode 100644
index 000000000..1531d9585
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputHelpText.tsx
@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import React from 'react';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
+import styles from './FormInputHelpText.css';
+
+interface FormInputHelpTextProps {
+ className?: string;
+ text: string;
+ link?: string;
+ tooltip?: string;
+ isError?: boolean;
+ isWarning?: boolean;
+ isCheckInput?: boolean;
+}
+
+function FormInputHelpText({
+ className = styles.helpText,
+ text,
+ link,
+ tooltip,
+ isError = false,
+ isWarning = false,
+ isCheckInput = false,
+}: FormInputHelpTextProps) {
+ return (
+
+ {text}
+
+ {link ? (
+
+
+
+ ) : null}
+
+ {!link && tooltip ? (
+
+ ) : null}
+
+ );
+}
+
+export default FormInputHelpText;
diff --git a/frontend/src/Components/Form/FormLabel.js b/frontend/src/Components/Form/FormLabel.js
deleted file mode 100644
index d4a4bcffc..000000000
--- a/frontend/src/Components/Form/FormLabel.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { sizes } from 'Helpers/Props';
-import styles from './FormLabel.css';
-
-function FormLabel(props) {
- const {
- children,
- className,
- errorClassName,
- size,
- name,
- hasError,
- isAdvanced,
- ...otherProps
- } = props;
-
- return (
-
- );
-}
-
-FormLabel.propTypes = {
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
- className: PropTypes.string,
- errorClassName: PropTypes.string,
- size: PropTypes.oneOf(sizes.all),
- name: PropTypes.string,
- hasError: PropTypes.bool,
- isAdvanced: PropTypes.bool
-};
-
-FormLabel.defaultProps = {
- className: styles.label,
- errorClassName: styles.hasError,
- isAdvanced: false,
- size: sizes.LARGE
-};
-
-export default FormLabel;
diff --git a/frontend/src/Components/Form/FormLabel.tsx b/frontend/src/Components/Form/FormLabel.tsx
new file mode 100644
index 000000000..4f29e6ac6
--- /dev/null
+++ b/frontend/src/Components/Form/FormLabel.tsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FormLabel.css';
+
+interface FormLabelProps {
+ children: ReactNode;
+ className?: string;
+ errorClassName?: string;
+ size?: Extract;
+ name?: string;
+ hasError?: boolean;
+ isAdvanced?: boolean;
+}
+
+function FormLabel(props: FormLabelProps) {
+ const {
+ children,
+ className = styles.label,
+ errorClassName = styles.hasError,
+ size = 'large',
+ name,
+ hasError,
+ isAdvanced = false,
+ } = props;
+
+ return (
+
+ );
+}
+
+export default FormLabel;
diff --git a/frontend/src/Components/Form/HintedSelectInputOption.js b/frontend/src/Components/Form/HintedSelectInputOption.js
deleted file mode 100644
index 4957ece2a..000000000
--- a/frontend/src/Components/Form/HintedSelectInputOption.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import EnhancedSelectInputOption from './EnhancedSelectInputOption';
-import styles from './HintedSelectInputOption.css';
-
-function HintedSelectInputOption(props) {
- const {
- id,
- value,
- hint,
- depth,
- isSelected,
- isDisabled,
- isMultiSelect,
- isMobile,
- ...otherProps
- } = props;
-
- return (
-
-
-
{value}
-
- {
- hint != null &&
-
- {hint}
-
- }
-
- {
- isMultiSelect ?
- value.map((key, index) => {
- const v = valuesMap[key];
- return (
-
- );
- }) :
- null
- }
-
- {
- isMultiSelect ? null : value
- }
-
-
- {
- hint != null && includeHint ?
-
- {hint}
-
:
- null
- }
-
- );
-}
-
-HintedSelectInputSelectedValue.propTypes = {
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]).isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- hint: PropTypes.string,
- isMultiSelect: PropTypes.bool.isRequired,
- includeHint: PropTypes.bool.isRequired
-};
-
-HintedSelectInputSelectedValue.defaultProps = {
- isMultiSelect: false,
- includeHint: true
-};
-
-export default HintedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/IndexerSelectInputConnector.js b/frontend/src/Components/Form/IndexerSelectInputConnector.js
deleted file mode 100644
index 91c31198f..000000000
--- a/frontend/src/Components/Form/IndexerSelectInputConnector.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchIndexers } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
-import translate from 'Utilities/String/translate';
-import EnhancedSelectInput from './EnhancedSelectInput';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.settings.indexers,
- (state, { includeAny }) => includeAny,
- (indexers, includeAny) => {
- const {
- isFetching,
- isPopulated,
- error,
- items
- } = indexers;
-
- const values = _.map(items.sort(sortByName), (indexer) => {
- return {
- key: indexer.id,
- value: indexer.name
- };
- });
-
- if (includeAny) {
- values.unshift({
- key: 0,
- value: `(${translate('Any')})`
- });
- }
-
- return {
- isFetching,
- isPopulated,
- error,
- values
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- dispatchFetchIndexers: fetchIndexers
-};
-
-class IndexerSelectInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidMount() {
- if (!this.props.isPopulated) {
- this.props.dispatchFetchIndexers();
- }
- }
-
- //
- // Listeners
-
- onChange = ({ name, value }) => {
- this.props.onChange({ name, value: parseInt(value) });
- };
-
- //
- // Render
-
- render() {
- return (
-
- );
- }
-}
-
-IndexerSelectInputConnector.propTypes = {
- isFetching: PropTypes.bool.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- includeAny: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- dispatchFetchIndexers: PropTypes.func.isRequired
-};
-
-IndexerSelectInputConnector.defaultProps = {
- includeAny: false
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(IndexerSelectInputConnector);
diff --git a/frontend/src/Components/Form/KeyValueListInput.js b/frontend/src/Components/Form/KeyValueListInput.js
deleted file mode 100644
index 3e73d74f3..000000000
--- a/frontend/src/Components/Form/KeyValueListInput.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import KeyValueListInputItem from './KeyValueListInputItem';
-import styles from './KeyValueListInput.css';
-
-class KeyValueListInput extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- isFocused: false
- };
- }
-
- //
- // Listeners
-
- onItemChange = (index, itemValue) => {
- const {
- name,
- value,
- onChange
- } = this.props;
-
- const newValue = [...value];
-
- if (index == null) {
- newValue.push(itemValue);
- } else {
- newValue.splice(index, 1, itemValue);
- }
-
- onChange({
- name,
- value: newValue
- });
- };
-
- onRemoveItem = (index) => {
- const {
- name,
- value,
- onChange
- } = this.props;
-
- const newValue = [...value];
- newValue.splice(index, 1);
-
- onChange({
- name,
- value: newValue
- });
- };
-
- onFocus = () => {
- this.setState({
- isFocused: true
- });
- };
-
- onBlur = () => {
- this.setState({
- isFocused: false
- });
-
- const {
- name,
- value,
- onChange
- } = this.props;
-
- const newValue = value.reduce((acc, v) => {
- if (v.key || v.value) {
- acc.push(v);
- }
-
- return acc;
- }, []);
-
- if (newValue.length !== value.length) {
- onChange({
- name,
- value: newValue
- });
- }
- };
-
- //
- // Render
-
- render() {
- const {
- className,
- value,
- keyPlaceholder,
- valuePlaceholder,
- hasError,
- hasWarning
- } = this.props;
-
- const { isFocused } = this.state;
-
- return (
-
- {
- [...value, { key: '', value: '' }].map((v, index) => {
- return (
-
- );
- })
- }
-
- );
- }
-}
-
-KeyValueListInput.propTypes = {
- className: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.arrayOf(PropTypes.object).isRequired,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- keyPlaceholder: PropTypes.string,
- valuePlaceholder: PropTypes.string,
- onChange: PropTypes.func.isRequired
-};
-
-KeyValueListInput.defaultProps = {
- className: styles.inputContainer,
- value: []
-};
-
-export default KeyValueListInput;
diff --git a/frontend/src/Components/Form/KeyValueListInput.tsx b/frontend/src/Components/Form/KeyValueListInput.tsx
new file mode 100644
index 000000000..f5c6ac19b
--- /dev/null
+++ b/frontend/src/Components/Form/KeyValueListInput.tsx
@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
+import { InputOnChange } from 'typings/inputs';
+import KeyValueListInputItem from './KeyValueListInputItem';
+import styles from './KeyValueListInput.css';
+
+interface KeyValue {
+ key: string;
+ value: string;
+}
+
+export interface KeyValueListInputProps {
+ className?: string;
+ name: string;
+ value: KeyValue[];
+ hasError?: boolean;
+ hasWarning?: boolean;
+ keyPlaceholder?: string;
+ valuePlaceholder?: string;
+ onChange: InputOnChange;
+}
+
+function KeyValueListInput({
+ className = styles.inputContainer,
+ name,
+ value = [],
+ hasError = false,
+ hasWarning = false,
+ keyPlaceholder,
+ valuePlaceholder,
+ onChange,
+}: KeyValueListInputProps): JSX.Element {
+ const [isFocused, setIsFocused] = useState(false);
+
+ const handleItemChange = useCallback(
+ (index: number | null, itemValue: KeyValue) => {
+ const newValue = [...value];
+
+ if (index === null) {
+ newValue.push(itemValue);
+ } else {
+ newValue.splice(index, 1, itemValue);
+ }
+
+ onChange({ name, value: newValue });
+ },
+ [value, name, onChange]
+ );
+
+ const handleRemoveItem = useCallback(
+ (index: number) => {
+ const newValue = [...value];
+ newValue.splice(index, 1);
+ onChange({ name, value: newValue });
+ },
+ [value, name, onChange]
+ );
+
+ const onFocus = useCallback(() => setIsFocused(true), []);
+
+ const onBlur = useCallback(() => {
+ setIsFocused(false);
+
+ const newValue = value.reduce((acc: KeyValue[], v) => {
+ if (v.key || v.value) {
+ acc.push(v);
+ }
+ return acc;
+ }, []);
+
+ if (newValue.length !== value.length) {
+ onChange({ name, value: newValue });
+ }
+ }, [value, name, onChange]);
+
+ return (
+
+ {[...value, { key: '', value: '' }].map((v, index) => (
+
+ ))}
+
+ );
+}
+
+export default KeyValueListInput;
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css
index 75d37b74f..ed82db459 100644
--- a/frontend/src/Components/Form/KeyValueListInputItem.css
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css
@@ -5,11 +5,12 @@
&:last-child {
margin-bottom: 0;
+ border-bottom: 0;
}
}
.keyInputWrapper {
- flex: 6 0 0;
+ flex: 1 0 0;
}
.valueInputWrapper {
@@ -25,4 +26,10 @@
.valueInput {
width: 100%;
border: none;
+ background-color: transparent;
+ color: var(--textColor);
+
+ &::placeholder {
+ color: var(--helpTextColor);
+ }
}
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.js b/frontend/src/Components/Form/KeyValueListInputItem.js
deleted file mode 100644
index 9f5abce2f..000000000
--- a/frontend/src/Components/Form/KeyValueListInputItem.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import IconButton from 'Components/Link/IconButton';
-import { icons } from 'Helpers/Props';
-import TextInput from './TextInput';
-import styles from './KeyValueListInputItem.css';
-
-class KeyValueListInputItem extends Component {
-
- //
- // Listeners
-
- onKeyChange = ({ value: keyValue }) => {
- const {
- index,
- value,
- onChange
- } = this.props;
-
- onChange(index, { key: keyValue, value });
- };
-
- onValueChange = ({ value }) => {
- // TODO: Validate here or validate at a lower level component
-
- const {
- index,
- keyValue,
- onChange
- } = this.props;
-
- onChange(index, { key: keyValue, value });
- };
-
- onRemovePress = () => {
- const {
- index,
- onRemove
- } = this.props;
-
- onRemove(index);
- };
-
- onFocus = () => {
- this.props.onFocus();
- };
-
- onBlur = () => {
- this.props.onBlur();
- };
-
- //
- // Render
-
- render() {
- const {
- keyValue,
- value,
- keyPlaceholder,
- valuePlaceholder,
- isNew
- } = this.props;
-
- return (
-
-
-
-
-
-
-
-
-
-
- {
- isNew ?
- null :
-
- }
-
-
+
+
+
+
+
+
+
+
+
+ {isNew ? null : (
+
+ )}
+
+
-
- {label}
-
-
- );
-}
-
-OAuthInput.propTypes = {
- label: PropTypes.string.isRequired,
- authorizing: PropTypes.bool.isRequired,
- error: PropTypes.object,
- onPress: PropTypes.func.isRequired
-};
-
-OAuthInput.defaultProps = {
- label: 'Start OAuth'
-};
-
-export default OAuthInput;
diff --git a/frontend/src/Components/Form/OAuthInput.tsx b/frontend/src/Components/Form/OAuthInput.tsx
new file mode 100644
index 000000000..04d2a0caf
--- /dev/null
+++ b/frontend/src/Components/Form/OAuthInput.tsx
@@ -0,0 +1,72 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import { kinds } from 'Helpers/Props';
+import { resetOAuth, startOAuth } from 'Store/Actions/oAuthActions';
+import { InputOnChange } from 'typings/inputs';
+
+interface OAuthInputProps {
+ label?: string;
+ name: string;
+ provider: string;
+ providerData: object;
+ section: string;
+ onChange: InputOnChange;
+}
+
+function OAuthInput({
+ label = 'Start OAuth',
+ name,
+ provider,
+ providerData,
+ section,
+ onChange,
+}: OAuthInputProps) {
+ const dispatch = useDispatch();
+ const { authorizing, error, result } = useSelector(
+ (state: AppState) => state.oAuth
+ );
+
+ const handlePress = useCallback(() => {
+ dispatch(
+ startOAuth({
+ name,
+ provider,
+ providerData,
+ section,
+ })
+ );
+ }, [name, provider, providerData, section, dispatch]);
+
+ useEffect(() => {
+ if (!result) {
+ return;
+ }
+
+ Object.keys(result).forEach((key) => {
+ onChange({ name: key, value: result[key] });
+ });
+ }, [result, onChange]);
+
+ useEffect(() => {
+ return () => {
+ dispatch(resetOAuth());
+ };
+ }, [dispatch]);
+
+ return (
+
+
+ {label}
+
+
+ );
+}
+
+export default OAuthInput;
diff --git a/frontend/src/Components/Form/OAuthInputConnector.js b/frontend/src/Components/Form/OAuthInputConnector.js
deleted file mode 100644
index 1567c7e6c..000000000
--- a/frontend/src/Components/Form/OAuthInputConnector.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { resetOAuth, startOAuth } from 'Store/Actions/oAuthActions';
-import OAuthInput from './OAuthInput';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.oAuth,
- (oAuth) => {
- return oAuth;
- }
- );
-}
-
-const mapDispatchToProps = {
- startOAuth,
- resetOAuth
-};
-
-class OAuthInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidUpdate(prevProps) {
- const {
- result,
- onChange
- } = this.props;
-
- if (!result || result === prevProps.result) {
- return;
- }
-
- Object.keys(result).forEach((key) => {
- onChange({ name: key, value: result[key] });
- });
- }
-
- componentWillUnmount = () => {
- this.props.resetOAuth();
- };
-
- //
- // Listeners
-
- onPress = () => {
- const {
- name,
- provider,
- providerData,
- section
- } = this.props;
-
- this.props.startOAuth({
- name,
- provider,
- providerData,
- section
- });
- };
-
- //
- // Render
-
- render() {
- return (
-
- );
- }
-}
-
-OAuthInputConnector.propTypes = {
- name: PropTypes.string.isRequired,
- result: PropTypes.object,
- provider: PropTypes.string.isRequired,
- providerData: PropTypes.object.isRequired,
- section: PropTypes.string.isRequired,
- onChange: PropTypes.func.isRequired,
- startOAuth: PropTypes.func.isRequired,
- resetOAuth: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(OAuthInputConnector);
diff --git a/frontend/src/Components/Form/PasswordInput.css b/frontend/src/Components/Form/PasswordInput.css
deleted file mode 100644
index 6cb162784..000000000
--- a/frontend/src/Components/Form/PasswordInput.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.input {
- composes: input from '~Components/Form/TextInput.css';
-
- font-family: $passwordFamily;
-}
diff --git a/frontend/src/Components/Form/PasswordInput.js b/frontend/src/Components/Form/PasswordInput.js
deleted file mode 100644
index fef54fd5a..000000000
--- a/frontend/src/Components/Form/PasswordInput.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import TextInput from './TextInput';
-import styles from './PasswordInput.css';
-
-// Prevent a user from copying (or cutting) the password from the input
-function onCopy(e) {
- e.preventDefault();
- e.nativeEvent.stopImmediatePropagation();
-}
-
-function PasswordInput(props) {
- return (
-
- );
-}
-
-PasswordInput.propTypes = {
- className: PropTypes.string.isRequired
-};
-
-PasswordInput.defaultProps = {
- className: styles.input
-};
-
-export default PasswordInput;
diff --git a/frontend/src/Components/Form/PasswordInput.tsx b/frontend/src/Components/Form/PasswordInput.tsx
new file mode 100644
index 000000000..776c2b913
--- /dev/null
+++ b/frontend/src/Components/Form/PasswordInput.tsx
@@ -0,0 +1,14 @@
+import React, { SyntheticEvent } from 'react';
+import TextInput, { TextInputProps } from './TextInput';
+
+// Prevent a user from copying (or cutting) the password from the input
+function onCopy(e: SyntheticEvent) {
+ e.preventDefault();
+ e.nativeEvent.stopImmediatePropagation();
+}
+
+function PasswordInput(props: TextInputProps) {
+ return ;
+}
+
+export default PasswordInput;
diff --git a/frontend/src/Components/Form/PathInput.css b/frontend/src/Components/Form/PathInput.css
index 3b32b16f0..327a85ef8 100644
--- a/frontend/src/Components/Form/PathInput.css
+++ b/frontend/src/Components/Form/PathInput.css
@@ -16,3 +16,7 @@
height: 35px;
}
+
+.fileBrowserMiddleButton {
+ composes: middleButton from '~./FormInputButton.css';
+}
diff --git a/frontend/src/Components/Form/PathInput.css.d.ts b/frontend/src/Components/Form/PathInput.css.d.ts
index d44c3dd56..82be3d1ff 100644
--- a/frontend/src/Components/Form/PathInput.css.d.ts
+++ b/frontend/src/Components/Form/PathInput.css.d.ts
@@ -2,6 +2,7 @@
// Please do not change this file!
interface CssExports {
'fileBrowserButton': string;
+ 'fileBrowserMiddleButton': string;
'hasFileBrowser': string;
'inputWrapper': string;
'pathMatch': string;
diff --git a/frontend/src/Components/Form/PathInput.js b/frontend/src/Components/Form/PathInput.js
deleted file mode 100644
index 972d8f99f..000000000
--- a/frontend/src/Components/Form/PathInput.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
-import Icon from 'Components/Icon';
-import { icons } from 'Helpers/Props';
-import AutoSuggestInput from './AutoSuggestInput';
-import FormInputButton from './FormInputButton';
-import styles from './PathInput.css';
-
-class PathInput extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this._node = document.getElementById('portal-root');
-
- this.state = {
- value: props.value,
- isFileBrowserModalOpen: false
- };
- }
-
- componentDidUpdate(prevProps) {
- const { value } = this.props;
-
- if (prevProps.value !== value) {
- this.setState({ value });
- }
- }
-
- //
- // Control
-
- getSuggestionValue({ path }) {
- return path;
- }
-
- renderSuggestion({ path }, { query }) {
- const lastSeparatorIndex = query.lastIndexOf('\\') || query.lastIndexOf('/');
-
- if (lastSeparatorIndex === -1) {
- return (
- {path}
- );
- }
-
- return (
-
-
- {path.substr(0, lastSeparatorIndex)}
-
- {path.substr(lastSeparatorIndex)}
-
- );
- }
-
- //
- // Listeners
-
- onInputChange = ({ value }) => {
- this.setState({ value });
- };
-
- onInputKeyDown = (event) => {
- if (event.key === 'Tab') {
- event.preventDefault();
- const path = this.props.paths[0];
-
- if (path) {
- this.props.onChange({
- name: this.props.name,
- value: path.path
- });
-
- if (path.type !== 'file') {
- this.props.onFetchPaths(path.path);
- }
- }
- }
- };
-
- onInputBlur = () => {
- this.props.onChange({
- name: this.props.name,
- value: this.state.value
- });
-
- this.props.onClearPaths();
- };
-
- onSuggestionsFetchRequested = ({ value }) => {
- this.props.onFetchPaths(value);
- };
-
- onSuggestionsClearRequested = () => {
- // Required because props aren't always rendered, but no-op
- // because we don't want to reset the paths after a path is selected.
- };
-
- onSuggestionSelected = (event, { suggestionValue }) => {
- this.props.onFetchPaths(suggestionValue);
- };
-
- onFileBrowserOpenPress = () => {
- this.setState({ isFileBrowserModalOpen: true });
- };
-
- onFileBrowserModalClose = () => {
- this.setState({ isFileBrowserModalOpen: false });
- };
-
- //
- // Render
-
- render() {
- const {
- className,
- name,
- paths,
- includeFiles,
- hasFileBrowser,
- onChange,
- ...otherProps
- } = this.props;
-
- const {
- value,
- isFileBrowserModalOpen
- } = this.state;
-
- return (
-
-
-
- {
- hasFileBrowser &&
-
-
-
-
-
-
-
- }
-
+
+
+ {hasFileBrowser ? (
+ <>
+
+
+
+
+
+
+ ) : null}
+
-
-
-
-
- );
- }
-}
-
-RootFolderSelectInput.propTypes = {
- name: PropTypes.string.isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- isSaving: PropTypes.bool.isRequired,
- saveError: PropTypes.object,
- includeNoChange: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- onNewRootFolderSelect: PropTypes.func.isRequired
-};
-
-RootFolderSelectInput.defaultProps = {
- includeNoChange: false
-};
-
-export default RootFolderSelectInput;
diff --git a/frontend/src/Components/Form/RootFolderSelectInputConnector.js b/frontend/src/Components/Form/RootFolderSelectInputConnector.js
deleted file mode 100644
index 43581835f..000000000
--- a/frontend/src/Components/Form/RootFolderSelectInputConnector.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { addRootFolder } from 'Store/Actions/rootFolderActions';
-import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
-import translate from 'Utilities/String/translate';
-import RootFolderSelectInput from './RootFolderSelectInput';
-
-const ADD_NEW_KEY = 'addNew';
-
-function createMapStateToProps() {
- return createSelector(
- createRootFoldersSelector(),
- (state, { value }) => value,
- (state, { includeMissingValue }) => includeMissingValue,
- (state, { includeNoChange }) => includeNoChange,
- (state, { includeNoChangeDisabled }) => includeNoChangeDisabled,
- (rootFolders, value, includeMissingValue, includeNoChange, includeNoChangeDisabled = true) => {
- const values = rootFolders.items.map((rootFolder) => {
- return {
- key: rootFolder.path,
- value: rootFolder.path,
- freeSpace: rootFolder.freeSpace,
- isMissing: false
- };
- });
-
- if (includeNoChange) {
- values.unshift({
- key: 'noChange',
- get value() {
- return translate('NoChange');
- },
- isDisabled: includeNoChangeDisabled,
- isMissing: false
- });
- }
-
- if (!values.length) {
- values.push({
- key: '',
- value: '',
- isDisabled: true,
- isHidden: true
- });
- }
-
- if (includeMissingValue && !values.find((v) => v.key === value)) {
- values.push({
- key: value,
- value,
- isMissing: true,
- isDisabled: true
- });
- }
-
- values.push({
- key: ADD_NEW_KEY,
- value: translate('AddANewPath')
- });
-
- return {
- values,
- isSaving: rootFolders.isSaving,
- saveError: rootFolders.saveError
- };
- }
- );
-}
-
-function createMapDispatchToProps(dispatch, props) {
- return {
- dispatchAddRootFolder(path) {
- dispatch(addRootFolder({ path }));
- }
- };
-}
-
-class RootFolderSelectInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentWillMount() {
- const {
- value,
- values,
- onChange
- } = this.props;
-
- if (value == null && values[0].key === '') {
- onChange({ name, value: '' });
- }
- }
-
- componentDidMount() {
- const {
- name,
- value,
- values,
- onChange
- } = this.props;
-
- if (!value || !values.some((v) => v.key === value) || value === ADD_NEW_KEY) {
- const defaultValue = values[0];
-
- if (defaultValue.key === ADD_NEW_KEY) {
- onChange({ name, value: '' });
- } else {
- onChange({ name, value: defaultValue.key });
- }
- }
- }
-
- componentDidUpdate(prevProps) {
- const {
- name,
- value,
- values,
- onChange
- } = this.props;
-
- if (prevProps.values === values) {
- return;
- }
-
- if (!value && values.length && values.some((v) => !!v.key && v.key !== ADD_NEW_KEY)) {
- const defaultValue = values[0];
-
- if (defaultValue.key !== ADD_NEW_KEY) {
- onChange({ name, value: defaultValue.key });
- }
- }
- }
-
- //
- // Listeners
-
- onNewRootFolderSelect = (path) => {
- this.props.dispatchAddRootFolder(path);
- };
-
- //
- // Render
-
- render() {
- const {
- dispatchAddRootFolder,
- ...otherProps
- } = this.props;
-
- return (
-
- );
- }
-}
-
-RootFolderSelectInputConnector.propTypes = {
- name: PropTypes.string.isRequired,
- value: PropTypes.string,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- includeNoChange: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- dispatchAddRootFolder: PropTypes.func.isRequired
-};
-
-RootFolderSelectInputConnector.defaultProps = {
- includeNoChange: false
-};
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(RootFolderSelectInputConnector);
diff --git a/frontend/src/Components/Form/RootFolderSelectInputOption.js b/frontend/src/Components/Form/RootFolderSelectInputOption.js
deleted file mode 100644
index daac82f34..000000000
--- a/frontend/src/Components/Form/RootFolderSelectInputOption.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import formatBytes from 'Utilities/Number/formatBytes';
-import translate from 'Utilities/String/translate';
-import EnhancedSelectInputOption from './EnhancedSelectInputOption';
-import styles from './RootFolderSelectInputOption.css';
-
-function RootFolderSelectInputOption(props) {
- const {
- id,
- value,
- freeSpace,
- isMissing,
- seriesFolder,
- isMobile,
- isWindows,
- ...otherProps
- } = props;
-
- const slashCharacter = isWindows ? '\\' : '/';
-
- return (
-
-
-
- {value}
-
- {
- seriesFolder && id !== 'addNew' ?
-
- {slashCharacter}
- {seriesFolder}
-
:
- null
- }
-
-
- {
- freeSpace == null ?
- null :
-
- {translate('RootFolderSelectFreeSpace', { freeSpace: formatBytes(freeSpace) })}
-
- }
-
- {
- isMissing ?
-
- {translate('Missing')}
-
:
- null
- }
-
-
- {value}
-
-
- {
- seriesFolder ?
-
- {slashCharacter}
- {seriesFolder}
-
:
- null
- }
-
- {translate('RootFolderSelectFreeSpace', { freeSpace: formatBytes(freeSpace) })}
-
- }
-
- );
-}
-
-RootFolderSelectInputSelectedValue.propTypes = {
- value: PropTypes.string,
- freeSpace: PropTypes.number,
- seriesFolder: PropTypes.string,
- isWindows: PropTypes.bool,
- includeFreeSpace: PropTypes.bool.isRequired
-};
-
-RootFolderSelectInputSelectedValue.defaultProps = {
- includeFreeSpace: true
-};
-
-export default RootFolderSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Select/DownloadClientSelectInput.tsx b/frontend/src/Components/Form/Select/DownloadClientSelectInput.tsx
new file mode 100644
index 000000000..4ed3e0952
--- /dev/null
+++ b/frontend/src/Components/Form/Select/DownloadClientSelectInput.tsx
@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { fetchDownloadClients } from 'Store/Actions/settingsActions';
+import { Protocol } from 'typings/DownloadClient';
+import { EnhancedSelectInputChanged } from 'typings/inputs';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+
+function createDownloadClientsSelector(
+ includeAny: boolean,
+ protocol: Protocol
+) {
+ return createSelector(
+ (state: AppState) => state.settings.downloadClients,
+ (downloadClients) => {
+ const { isFetching, isPopulated, error, items } = downloadClients;
+
+ const filteredItems = items.filter((item) => item.protocol === protocol);
+
+ const values = filteredItems
+ .sort(sortByProp('name'))
+ .map((downloadClient) => {
+ return {
+ key: downloadClient.id,
+ value: downloadClient.name,
+ hint: `(${downloadClient.id})`,
+ };
+ });
+
+ if (includeAny) {
+ values.unshift({
+ key: 0,
+ value: `(${translate('Any')})`,
+ hint: '',
+ });
+ }
+
+ return {
+ isFetching,
+ isPopulated,
+ error,
+ values,
+ };
+ }
+ );
+}
+
+interface DownloadClientSelectInputProps
+ extends EnhancedSelectInputProps, number> {
+ name: string;
+ value: number;
+ includeAny?: boolean;
+ protocol?: Protocol;
+ onChange: (change: EnhancedSelectInputChanged) => void;
+}
+
+function DownloadClientSelectInput({
+ includeAny = false,
+ protocol = 'torrent',
+ ...otherProps
+}: DownloadClientSelectInputProps) {
+ const dispatch = useDispatch();
+ const { isFetching, isPopulated, values } = useSelector(
+ createDownloadClientsSelector(includeAny, protocol)
+ );
+
+ useEffect(() => {
+ if (!isPopulated) {
+ dispatch(fetchDownloadClients());
+ }
+ }, [isPopulated, dispatch]);
+
+ return (
+
+ );
+}
+
+export default DownloadClientSelectInput;
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/Select/EnhancedSelectInput.css
similarity index 92%
rename from frontend/src/Components/Form/EnhancedSelectInput.css
rename to frontend/src/Components/Form/Select/EnhancedSelectInput.css
index 56f5564b9..735d63573 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInput.css
@@ -19,7 +19,7 @@
.isDisabled {
opacity: 0.7;
- cursor: not-allowed;
+ cursor: not-allowed !important;
}
.dropdownArrowContainer {
@@ -73,6 +73,12 @@
padding: 10px 0;
}
+.optionsInnerModalBody {
+ composes: innerModalBody from '~Components/Modal/ModalBody.css';
+
+ padding: 0;
+}
+
.optionsModalScroller {
composes: scroller from '~Components/Scroller/Scroller.css';
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css.d.ts b/frontend/src/Components/Form/Select/EnhancedSelectInput.css.d.ts
similarity index 94%
rename from frontend/src/Components/Form/EnhancedSelectInput.css.d.ts
rename to frontend/src/Components/Form/Select/EnhancedSelectInput.css.d.ts
index edcf0079b..98167a9b5 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.css.d.ts
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInput.css.d.ts
@@ -14,6 +14,7 @@ interface CssExports {
'mobileCloseButtonContainer': string;
'options': string;
'optionsContainer': string;
+ 'optionsInnerModalBody': string;
'optionsModal': string;
'optionsModalBody': string;
'optionsModalScroller': string;
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx b/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
new file mode 100644
index 000000000..5ae175357
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
@@ -0,0 +1,627 @@
+import classNames from 'classnames';
+import React, {
+ ElementType,
+ KeyboardEvent,
+ ReactNode,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} 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';
+import Portal from 'Components/Portal';
+import Scroller from 'Components/Scroller/Scroller';
+import { icons, scrollDirections, sizes } from 'Helpers/Props';
+import ArrayElement from 'typings/Helpers/ArrayElement';
+import { EnhancedSelectInputChanged, InputChanged } from 'typings/inputs';
+import { isMobile as isMobileUtil } from 'Utilities/browser';
+import * as keyCodes from 'Utilities/Constants/keyCodes';
+import getUniqueElementId from 'Utilities/getUniqueElementId';
+import TextInput from '../TextInput';
+import HintedSelectInputOption from './HintedSelectInputOption';
+import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
+import styles from './EnhancedSelectInput.css';
+
+const MINIMUM_DISTANCE_FROM_EDGE = 10;
+
+function isArrowKey(keyCode: number) {
+ return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
+}
+
+function getSelectedOption, V>(
+ selectedIndex: number,
+ values: T[]
+) {
+ return values[selectedIndex];
+}
+
+function findIndex, V>(
+ startingIndex: number,
+ direction: 1 | -1,
+ values: T[]
+) {
+ let indexToTest = startingIndex + direction;
+
+ while (indexToTest !== startingIndex) {
+ if (indexToTest < 0) {
+ indexToTest = values.length - 1;
+ } else if (indexToTest >= values.length) {
+ indexToTest = 0;
+ }
+
+ if (getSelectedOption(indexToTest, values).isDisabled) {
+ indexToTest = indexToTest + direction;
+ } else {
+ return indexToTest;
+ }
+ }
+
+ return null;
+}
+
+function previousIndex, V>(
+ selectedIndex: number,
+ values: T[]
+) {
+ return findIndex(selectedIndex, -1, values);
+}
+
+function nextIndex, V>(
+ selectedIndex: number,
+ values: T[]
+) {
+ return findIndex(selectedIndex, 1, values);
+}
+
+function getSelectedIndex, V>(
+ value: V,
+ values: T[]
+) {
+ if (Array.isArray(value)) {
+ return values.findIndex((v) => {
+ return v.key === value[0];
+ });
+ }
+
+ return values.findIndex((v) => {
+ return v.key === value;
+ });
+}
+
+function isSelectedItem, V>(
+ index: number,
+ value: V,
+ values: T[]
+) {
+ if (Array.isArray(value)) {
+ return value.includes(values[index].key);
+ }
+
+ return values[index].key === value;
+}
+
+export interface EnhancedSelectInputValue {
+ key: ArrayElement;
+ value: string;
+ hint?: ReactNode;
+ isDisabled?: boolean;
+ isHidden?: boolean;
+ parentKey?: V;
+ additionalProperties?: object;
+}
+
+export interface EnhancedSelectInputProps<
+ T extends EnhancedSelectInputValue,
+ V
+> {
+ className?: string;
+ disabledClassName?: string;
+ name: string;
+ value: V;
+ values: T[];
+ isDisabled?: boolean;
+ isFetching?: boolean;
+ isEditable?: boolean;
+ hasError?: boolean;
+ hasWarning?: boolean;
+ valueOptions?: object;
+ selectedValueOptions?: object;
+ selectedValueComponent?: string | ElementType;
+ optionComponent?: ElementType;
+ onOpen?: () => void;
+ onChange: (change: EnhancedSelectInputChanged) => void;
+}
+
+function EnhancedSelectInput, V>(
+ props: EnhancedSelectInputProps
+) {
+ const {
+ className = styles.enhancedSelect,
+ disabledClassName = styles.isDisabled,
+ name,
+ value,
+ values,
+ isDisabled = false,
+ isEditable,
+ isFetching,
+ hasError,
+ hasWarning,
+ valueOptions,
+ selectedValueOptions,
+ selectedValueComponent:
+ SelectedValueComponent = HintedSelectInputSelectedValue,
+ optionComponent: OptionComponent = HintedSelectInputOption,
+ onChange,
+ onOpen,
+ } = props;
+
+ const updater = useRef<(() => void) | null>(null);
+ const buttonId = useMemo(() => getUniqueElementId(), []);
+ const optionsId = useMemo(() => getUniqueElementId(), []);
+ const [selectedIndex, setSelectedIndex] = useState(
+ getSelectedIndex(value, values)
+ );
+ const [width, setWidth] = useState(0);
+ const [isOpen, setIsOpen] = useState(false);
+ const isMobile = useMemo(() => isMobileUtil(), []);
+
+ const isMultiSelect = Array.isArray(value);
+ const selectedOption = getSelectedOption(selectedIndex, values);
+
+ const selectedValue = useMemo(() => {
+ if (values.length) {
+ return value;
+ }
+
+ if (isMultiSelect) {
+ return [];
+ } else if (typeof value === 'number') {
+ return 0;
+ }
+
+ return '';
+ }, [value, values, isMultiSelect]);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const handleComputeMaxHeight = useCallback((data: any) => {
+ const windowHeight = window.innerHeight;
+
+ data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
+
+ return data;
+ }, []);
+
+ const handleWindowClick = useCallback(
+ (event: MouseEvent) => {
+ const button = document.getElementById(buttonId);
+ const options = document.getElementById(optionsId);
+ const eventTarget = event.target as HTMLElement;
+
+ if (!button || !eventTarget.isConnected || isMobile) {
+ return;
+ }
+
+ if (
+ !button.contains(eventTarget) &&
+ options &&
+ !options.contains(eventTarget) &&
+ isOpen
+ ) {
+ setIsOpen(false);
+ window.removeEventListener('click', handleWindowClick);
+ }
+ },
+ [isMobile, isOpen, buttonId, optionsId, setIsOpen]
+ );
+
+ const addListener = useCallback(() => {
+ window.addEventListener('click', handleWindowClick);
+ }, [handleWindowClick]);
+
+ const removeListener = useCallback(() => {
+ window.removeEventListener('click', handleWindowClick);
+ }, [handleWindowClick]);
+
+ const handlePress = useCallback(() => {
+ if (!isOpen && onOpen) {
+ onOpen();
+ }
+
+ setIsOpen(!isOpen);
+ }, [isOpen, setIsOpen, onOpen]);
+
+ const handleSelect = useCallback(
+ (newValue: ArrayElement) => {
+ const additionalProperties = values.find(
+ (v) => v.key === newValue
+ )?.additionalProperties;
+
+ if (Array.isArray(value)) {
+ const index = value.indexOf(newValue);
+
+ if (index === -1) {
+ const arrayValue = values
+ .map((v) => v.key)
+ .filter((v) => v === newValue || value.includes(v));
+
+ onChange({
+ name,
+ value: arrayValue as V,
+ additionalProperties,
+ });
+ } else {
+ const arrayValue = [...value];
+ arrayValue.splice(index, 1);
+
+ onChange({
+ name,
+ value: arrayValue as V,
+ additionalProperties,
+ });
+ }
+ } else {
+ setIsOpen(false);
+
+ onChange({
+ name,
+ value: newValue as V,
+ additionalProperties,
+ });
+ }
+ },
+ [name, value, values, onChange, setIsOpen]
+ );
+
+ const handleBlur = useCallback(() => {
+ if (!isEditable) {
+ // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
+ const origIndex = getSelectedIndex(value, values);
+
+ if (origIndex !== selectedIndex) {
+ setSelectedIndex(origIndex);
+ }
+ }
+ }, [value, values, isEditable, selectedIndex, setSelectedIndex]);
+
+ const handleFocus = useCallback(() => {
+ if (isOpen) {
+ removeListener();
+ setIsOpen(false);
+ }
+ }, [isOpen, setIsOpen, removeListener]);
+
+ const handleKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ const keyCode = event.keyCode;
+ let nextIsOpen: boolean | null = null;
+ let nextSelectedIndex: number | null = null;
+
+ if (!isOpen) {
+ if (isArrowKey(keyCode)) {
+ event.preventDefault();
+ nextIsOpen = true;
+ }
+
+ if (
+ selectedIndex == null ||
+ selectedIndex === -1 ||
+ getSelectedOption(selectedIndex, values).isDisabled
+ ) {
+ if (keyCode === keyCodes.UP_ARROW) {
+ nextSelectedIndex = previousIndex(0, values);
+ } else if (keyCode === keyCodes.DOWN_ARROW) {
+ nextSelectedIndex = nextIndex(values.length - 1, values);
+ }
+ }
+
+ if (nextIsOpen !== null) {
+ setIsOpen(nextIsOpen);
+ }
+
+ if (nextSelectedIndex !== null) {
+ setSelectedIndex(nextSelectedIndex);
+ }
+ return;
+ }
+
+ if (keyCode === keyCodes.UP_ARROW) {
+ event.preventDefault();
+ nextSelectedIndex = previousIndex(selectedIndex, values);
+ }
+
+ if (keyCode === keyCodes.DOWN_ARROW) {
+ event.preventDefault();
+ nextSelectedIndex = nextIndex(selectedIndex, values);
+ }
+
+ if (keyCode === keyCodes.ENTER) {
+ event.preventDefault();
+ nextIsOpen = false;
+ handleSelect(values[selectedIndex].key);
+ }
+
+ if (keyCode === keyCodes.TAB) {
+ nextIsOpen = false;
+ handleSelect(values[selectedIndex].key);
+ }
+
+ if (keyCode === keyCodes.ESCAPE) {
+ event.preventDefault();
+ event.stopPropagation();
+ nextIsOpen = false;
+ nextSelectedIndex = getSelectedIndex(value, values);
+ }
+
+ if (nextIsOpen !== null) {
+ setIsOpen(nextIsOpen);
+ }
+
+ if (nextSelectedIndex !== null) {
+ setSelectedIndex(nextSelectedIndex);
+ }
+ },
+ [
+ value,
+ isOpen,
+ selectedIndex,
+ values,
+ setIsOpen,
+ setSelectedIndex,
+ handleSelect,
+ ]
+ );
+
+ const handleMeasure = useCallback(
+ ({ width: newWidth }: { width: number }) => {
+ setWidth(newWidth);
+ },
+ [setWidth]
+ );
+
+ const handleOptionsModalClose = useCallback(() => {
+ setIsOpen(false);
+ }, [setIsOpen]);
+
+ const handleEditChange = useCallback(
+ (change: InputChanged) => {
+ onChange(change as EnhancedSelectInputChanged);
+ },
+ [onChange]
+ );
+
+ useEffect(() => {
+ if (updater.current) {
+ updater.current();
+ }
+ });
+
+ useEffect(() => {
+ if (isOpen) {
+ addListener();
+ } else {
+ removeListener();
+ }
+
+ return removeListener;
+ }, [isOpen, addListener, removeListener]);
+
+ return (
+
+
+
+ {({ ref }) => (
+
+ )}
+
+
+
+ {({ ref, style, scheduleUpdate }) => {
+ updater.current = scheduleUpdate;
+
+ return (
+
+ {isOpen && !isMobile ? (
+
+ {values.map((v, index) => {
+ const hasParent = v.parentKey !== undefined;
+ const depth = hasParent ? 1 : 0;
+ const parentSelected =
+ v.parentKey !== undefined &&
+ Array.isArray(value) &&
+ value.includes(v.parentKey);
+
+ const { key, ...other } = v;
+
+ return (
+
+ {v.value}
+
+ );
+ })}
+
+ ) : null}
+
+ );
+ }}
+
+
+
+
+ {isMobile ? (
+
+
+
+
+
+
+
+
+
+ {values.map((v, index) => {
+ const hasParent = v.parentKey !== undefined;
+ const depth = hasParent ? 1 : 0;
+ const parentSelected =
+ v.parentKey !== undefined &&
+ isMultiSelect &&
+ value.includes(v.parentKey);
+
+ const { key, ...other } = v;
+
+ return (
+
+ {v.value}
+
+ );
+ })}
+
+
+
+ ) : null}
+
+
+
+ )}
+
+ );
+}
+
+export default EnhancedSelectInputOption;
diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css
similarity index 100%
rename from frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
rename to frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css
diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css.d.ts b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css.d.ts
rename to frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx
new file mode 100644
index 000000000..88afdb18a
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx
@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import styles from './EnhancedSelectInputSelectedValue.css';
+
+interface EnhancedSelectInputSelectedValueProps {
+ className?: string;
+ children: ReactNode;
+ isDisabled?: boolean;
+}
+
+function EnhancedSelectInputSelectedValue({
+ className = styles.selectedValue,
+ children,
+ isDisabled = false,
+}: EnhancedSelectInputSelectedValueProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default EnhancedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/HintedSelectInputOption.css b/frontend/src/Components/Form/Select/HintedSelectInputOption.css
similarity index 100%
rename from frontend/src/Components/Form/HintedSelectInputOption.css
rename to frontend/src/Components/Form/Select/HintedSelectInputOption.css
diff --git a/frontend/src/Components/Form/HintedSelectInputOption.css.d.ts b/frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/HintedSelectInputOption.css.d.ts
rename to frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx b/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx
new file mode 100644
index 000000000..faa9081c5
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React from 'react';
+import EnhancedSelectInputOption, {
+ EnhancedSelectInputOptionProps,
+} from './EnhancedSelectInputOption';
+import styles from './HintedSelectInputOption.css';
+
+interface HintedSelectInputOptionProps extends EnhancedSelectInputOptionProps {
+ value: string;
+ hint?: React.ReactNode;
+}
+
+function HintedSelectInputOption(props: HintedSelectInputOptionProps) {
+ const {
+ id,
+ value,
+ hint,
+ depth,
+ isSelected = false,
+ isDisabled,
+ isMobile,
+ ...otherProps
+ } = props;
+
+ return (
+
+
+
{value}
+
+ {hint != null &&
{hint}
}
+
+ {isMultiSelect && Array.isArray(selectedValue)
+ ? selectedValue.map((key) => {
+ const v = valuesMap.get(key);
+
+ return ;
+ })
+ : valuesMap.get(selectedValue as ArrayElement)}
+
+
+ {hint != null && includeHint ? (
+ {hint}
+ ) : null}
+
+ );
+}
+
+export default HintedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Select/IndexerFlagsSelectInput.tsx b/frontend/src/Components/Form/Select/IndexerFlagsSelectInput.tsx
new file mode 100644
index 000000000..a43044156
--- /dev/null
+++ b/frontend/src/Components/Form/Select/IndexerFlagsSelectInput.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { EnhancedSelectInputChanged } from 'typings/inputs';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+const selectIndexerFlagsValues = (selectedFlags: number) =>
+ createSelector(
+ (state: AppState) => state.settings.indexerFlags,
+ (indexerFlags) => {
+ const value = indexerFlags.items.reduce((acc: number[], { id }) => {
+ // eslint-disable-next-line no-bitwise
+ if ((selectedFlags & id) === id) {
+ acc.push(id);
+ }
+
+ return acc;
+ }, []);
+
+ const values = indexerFlags.items.map(({ id, name }) => ({
+ key: id,
+ value: name,
+ }));
+
+ return {
+ value,
+ values,
+ };
+ }
+ );
+
+interface IndexerFlagsSelectInputProps {
+ name: string;
+ indexerFlags: number;
+ onChange(payload: EnhancedSelectInputChanged): void;
+}
+
+function IndexerFlagsSelectInput({
+ name,
+ indexerFlags,
+ onChange,
+ ...otherProps
+}: IndexerFlagsSelectInputProps) {
+ const { value, values } = useSelector(selectIndexerFlagsValues(indexerFlags));
+
+ const handleChange = useCallback(
+ (change: EnhancedSelectInputChanged) => {
+ const indexerFlags = change.value.reduce(
+ (acc, flagId) => acc + flagId,
+ 0
+ );
+
+ onChange({ name, value: indexerFlags });
+ },
+ [name, onChange]
+ );
+
+ return (
+
+ );
+}
+
+export default IndexerFlagsSelectInput;
diff --git a/frontend/src/Components/Form/Select/IndexerSelectInput.tsx b/frontend/src/Components/Form/Select/IndexerSelectInput.tsx
new file mode 100644
index 000000000..4bb4ff787
--- /dev/null
+++ b/frontend/src/Components/Form/Select/IndexerSelectInput.tsx
@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { fetchIndexers } from 'Store/Actions/settingsActions';
+import { EnhancedSelectInputChanged } from 'typings/inputs';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+function createIndexersSelector(includeAny: boolean) {
+ return createSelector(
+ (state: AppState) => state.settings.indexers,
+ (indexers) => {
+ const { isFetching, isPopulated, error, items } = indexers;
+
+ const values = items.sort(sortByProp('name')).map((indexer) => {
+ return {
+ key: indexer.id,
+ value: indexer.name,
+ };
+ });
+
+ if (includeAny) {
+ values.unshift({
+ key: 0,
+ value: `(${translate('Any')})`,
+ });
+ }
+
+ return {
+ isFetching,
+ isPopulated,
+ error,
+ values,
+ };
+ }
+ );
+}
+
+interface IndexerSelectInputConnectorProps {
+ name: string;
+ value: number;
+ includeAny?: boolean;
+ values: object[];
+ onChange: (change: EnhancedSelectInputChanged) => void;
+}
+
+function IndexerSelectInput({
+ name,
+ value,
+ includeAny = false,
+ onChange,
+}: IndexerSelectInputConnectorProps) {
+ const dispatch = useDispatch();
+ const { isFetching, isPopulated, values } = useSelector(
+ createIndexersSelector(includeAny)
+ );
+
+ useEffect(() => {
+ if (!isPopulated) {
+ dispatch(fetchIndexers());
+ }
+ }, [isPopulated, dispatch]);
+
+ return (
+
+ );
+}
+
+IndexerSelectInput.defaultProps = {
+ includeAny: false,
+};
+
+export default IndexerSelectInput;
diff --git a/frontend/src/Components/Form/Select/LanguageSelectInput.tsx b/frontend/src/Components/Form/Select/LanguageSelectInput.tsx
new file mode 100644
index 000000000..3c9bbc150
--- /dev/null
+++ b/frontend/src/Components/Form/Select/LanguageSelectInput.tsx
@@ -0,0 +1,95 @@
+import React, { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import Language from 'Language/Language';
+import createFilteredLanguagesSelector from 'Store/Selectors/createFilteredLanguagesSelector';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput, {
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+
+interface LanguageSelectInputOnChangeProps {
+ name: string;
+ value: number | string | Language;
+}
+
+interface LanguageSelectInputProps {
+ name: string;
+ value: number | string | Language;
+ includeNoChange: boolean;
+ includeNoChangeDisabled?: boolean;
+ includeMixed: boolean;
+ onChange: (payload: LanguageSelectInputOnChangeProps) => void;
+}
+
+export default function LanguageSelectInput({
+ value,
+ includeNoChange,
+ includeNoChangeDisabled,
+ includeMixed,
+ onChange,
+ ...otherProps
+}: LanguageSelectInputProps) {
+ const { items } = useSelector(createFilteredLanguagesSelector(true));
+
+ const values = useMemo(() => {
+ const result: EnhancedSelectInputValue[] = items.map(
+ (item) => {
+ return {
+ key: item.id,
+ value: item.name,
+ };
+ }
+ );
+
+ if (includeNoChange) {
+ result.unshift({
+ key: 'noChange',
+ value: translate('NoChange'),
+ isDisabled: includeNoChangeDisabled,
+ });
+ }
+
+ if (includeMixed) {
+ result.unshift({
+ key: 'mixed',
+ value: `(${translate('Mixed')})`,
+ isDisabled: true,
+ });
+ }
+
+ return result;
+ }, [includeNoChange, includeNoChangeDisabled, includeMixed, items]);
+
+ const selectValue =
+ typeof value === 'number' || typeof value === 'string' ? value : value.id;
+
+ const handleChange = useCallback(
+ (payload: LanguageSelectInputOnChangeProps) => {
+ if (typeof value === 'number') {
+ onChange(payload);
+ } else {
+ const language = items.find((i) => i.id === payload.value);
+
+ onChange({
+ ...payload,
+ value: language
+ ? {
+ id: language.id,
+ name: language.name,
+ }
+ : ({ id: payload.value } as Language),
+ });
+ }
+ },
+ [value, items, onChange]
+ );
+
+ return (
+
+ );
+}
diff --git a/frontend/src/Components/Form/Select/MonitorEpisodesSelectInput.tsx b/frontend/src/Components/Form/Select/MonitorEpisodesSelectInput.tsx
new file mode 100644
index 000000000..59fd08513
--- /dev/null
+++ b/frontend/src/Components/Form/Select/MonitorEpisodesSelectInput.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import monitorOptions from 'Utilities/Series/monitorOptions';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+
+interface MonitorEpisodesSelectInputProps
+ extends Omit<
+ EnhancedSelectInputProps, string>,
+ 'values'
+ > {
+ includeNoChange: boolean;
+ includeMixed: boolean;
+}
+
+function MonitorEpisodesSelectInput(props: MonitorEpisodesSelectInputProps) {
+ const {
+ includeNoChange = false,
+ includeMixed = false,
+ ...otherProps
+ } = props;
+
+ const values: EnhancedSelectInputValue[] = [...monitorOptions];
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ get value() {
+ return translate('NoChange');
+ },
+ isDisabled: true,
+ });
+ }
+
+ if (includeMixed) {
+ values.unshift({
+ key: 'mixed',
+ get value() {
+ return `(${translate('Mixed')})`;
+ },
+ isDisabled: true,
+ });
+ }
+
+ return ;
+}
+
+export default MonitorEpisodesSelectInput;
diff --git a/frontend/src/Components/Form/Select/MonitorNewItemsSelectInput.tsx b/frontend/src/Components/Form/Select/MonitorNewItemsSelectInput.tsx
new file mode 100644
index 000000000..ac11f1fca
--- /dev/null
+++ b/frontend/src/Components/Form/Select/MonitorNewItemsSelectInput.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import monitorNewItemsOptions from 'Utilities/Series/monitorNewItemsOptions';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+
+interface MonitorNewItemsSelectInputProps
+ extends Omit<
+ EnhancedSelectInputProps, string>,
+ 'values'
+ > {
+ includeNoChange?: boolean;
+ includeMixed?: boolean;
+ onChange: (...args: unknown[]) => unknown;
+}
+
+function MonitorNewItemsSelectInput(props: MonitorNewItemsSelectInputProps) {
+ const {
+ includeNoChange = false,
+ includeMixed = false,
+ ...otherProps
+ } = props;
+
+ const values: EnhancedSelectInputValue[] = [
+ ...monitorNewItemsOptions,
+ ];
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ value: 'No Change',
+ isDisabled: true,
+ });
+ }
+
+ if (includeMixed) {
+ values.unshift({
+ key: 'mixed',
+ value: '(Mixed)',
+ isDisabled: true,
+ });
+ }
+
+ return ;
+}
+
+export default MonitorNewItemsSelectInput;
diff --git a/frontend/src/Components/Form/Select/ProviderOptionSelectInput.tsx b/frontend/src/Components/Form/Select/ProviderOptionSelectInput.tsx
new file mode 100644
index 000000000..e4a8003eb
--- /dev/null
+++ b/frontend/src/Components/Form/Select/ProviderOptionSelectInput.tsx
@@ -0,0 +1,164 @@
+import { isEqual } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import ProviderOptionsAppState, {
+ ProviderOptions,
+} from 'App/State/ProviderOptionsAppState';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import {
+ clearOptions,
+ fetchOptions,
+} from 'Store/Actions/providerOptionActions';
+import { FieldSelectOption } from 'typings/Field';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+
+const importantFieldNames = ['baseUrl', 'apiPath', 'apiKey', 'authToken'];
+
+function getProviderDataKey(providerData: ProviderOptions) {
+ if (!providerData || !providerData.fields) {
+ return null;
+ }
+
+ const fields = providerData.fields
+ .filter((f) => importantFieldNames.includes(f.name))
+ .map((f) => f.value);
+
+ return fields;
+}
+
+function getSelectOptions(items: FieldSelectOption[]) {
+ if (!items) {
+ return [];
+ }
+
+ return items.map((option) => {
+ return {
+ key: option.value,
+ value: option.name,
+ hint: option.hint,
+ parentKey: option.parentValue,
+ isDisabled: option.isDisabled,
+ additionalProperties: option.additionalProperties,
+ };
+ });
+}
+
+function createProviderOptionsSelector(
+ selectOptionsProviderAction: keyof Omit
+) {
+ return createSelector(
+ (state: AppState) => state.providerOptions[selectOptionsProviderAction],
+ (options) => {
+ if (!options) {
+ return {
+ isFetching: false,
+ values: [],
+ };
+ }
+
+ return {
+ isFetching: options.isFetching,
+ values: getSelectOptions(options.items),
+ };
+ }
+ );
+}
+
+interface ProviderOptionSelectInputProps
+ extends Omit<
+ EnhancedSelectInputProps, unknown>,
+ 'values'
+ > {
+ provider: string;
+ providerData: ProviderOptions;
+ name: string;
+ value: unknown;
+ selectOptionsProviderAction: keyof Omit;
+}
+
+function ProviderOptionSelectInput({
+ provider,
+ providerData,
+ selectOptionsProviderAction,
+ ...otherProps
+}: ProviderOptionSelectInputProps) {
+ const dispatch = useDispatch();
+ const [isRefetchRequired, setIsRefetchRequired] = useState(false);
+ const previousProviderData = usePrevious(providerData);
+ const { isFetching, values } = useSelector(
+ createProviderOptionsSelector(selectOptionsProviderAction)
+ );
+
+ const handleOpen = useCallback(() => {
+ if (isRefetchRequired && selectOptionsProviderAction) {
+ setIsRefetchRequired(false);
+
+ dispatch(
+ fetchOptions({
+ section: selectOptionsProviderAction,
+ action: selectOptionsProviderAction,
+ provider,
+ providerData,
+ })
+ );
+ }
+ }, [
+ isRefetchRequired,
+ provider,
+ providerData,
+ selectOptionsProviderAction,
+ dispatch,
+ ]);
+
+ useEffect(() => {
+ if (selectOptionsProviderAction) {
+ dispatch(
+ fetchOptions({
+ section: selectOptionsProviderAction,
+ action: selectOptionsProviderAction,
+ provider,
+ providerData,
+ })
+ );
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectOptionsProviderAction, dispatch]);
+
+ useEffect(() => {
+ if (!previousProviderData) {
+ return;
+ }
+
+ const prevKey = getProviderDataKey(previousProviderData);
+ const nextKey = getProviderDataKey(providerData);
+
+ if (!isEqual(prevKey, nextKey)) {
+ setIsRefetchRequired(true);
+ }
+ }, [providerData, previousProviderData, setIsRefetchRequired]);
+
+ useEffect(() => {
+ return () => {
+ if (selectOptionsProviderAction) {
+ dispatch(clearOptions({ section: selectOptionsProviderAction }));
+ }
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+ );
+}
+
+export default ProviderOptionSelectInput;
diff --git a/frontend/src/Components/Form/Select/QualityProfileSelectInput.tsx b/frontend/src/Components/Form/Select/QualityProfileSelectInput.tsx
new file mode 100644
index 000000000..036f0f82c
--- /dev/null
+++ b/frontend/src/Components/Form/Select/QualityProfileSelectInput.tsx
@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { QualityProfilesAppState } from 'App/State/SettingsAppState';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import { EnhancedSelectInputChanged } from 'typings/inputs';
+import QualityProfile from 'typings/QualityProfile';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+
+function createQualityProfilesSelector(
+ includeNoChange: boolean,
+ includeNoChangeDisabled: boolean,
+ includeMixed: boolean
+) {
+ return createSelector(
+ createSortedSectionSelector(
+ 'settings.qualityProfiles',
+ sortByProp('name')
+ ),
+ (qualityProfiles: QualityProfilesAppState) => {
+ const values: EnhancedSelectInputValue[] =
+ qualityProfiles.items.map((qualityProfile) => {
+ return {
+ key: qualityProfile.id,
+ value: qualityProfile.name,
+ };
+ });
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ get value() {
+ return translate('NoChange');
+ },
+ isDisabled: includeNoChangeDisabled,
+ });
+ }
+
+ if (includeMixed) {
+ values.unshift({
+ key: 'mixed',
+ get value() {
+ return `(${translate('Mixed')})`;
+ },
+ isDisabled: true,
+ });
+ }
+
+ return values;
+ }
+ );
+}
+
+interface QualityProfileSelectInputConnectorProps
+ extends Omit<
+ EnhancedSelectInputProps<
+ EnhancedSelectInputValue,
+ number | string
+ >,
+ 'values'
+ > {
+ name: string;
+ includeNoChange?: boolean;
+ includeNoChangeDisabled?: boolean;
+ includeMixed?: boolean;
+}
+
+function QualityProfileSelectInput({
+ name,
+ value,
+ includeNoChange = false,
+ includeNoChangeDisabled = true,
+ includeMixed = false,
+ onChange,
+ ...otherProps
+}: QualityProfileSelectInputConnectorProps) {
+ const values = useSelector(
+ createQualityProfilesSelector(
+ includeNoChange,
+ includeNoChangeDisabled,
+ includeMixed
+ )
+ );
+
+ const handleChange = useCallback(
+ ({ value: newValue }: EnhancedSelectInputChanged) => {
+ onChange({
+ name,
+ value: newValue === 'noChange' ? value : newValue,
+ });
+ },
+ [name, value, onChange]
+ );
+
+ useEffect(() => {
+ if (
+ !value ||
+ !values.some((option) => option.key === value || option.key === value)
+ ) {
+ const firstValue = values.find(
+ (option) => typeof option.key === 'number'
+ );
+
+ if (firstValue) {
+ onChange({ name, value: firstValue.key });
+ }
+ }
+ }, [name, value, values, onChange]);
+
+ return (
+
+ );
+}
+
+export default QualityProfileSelectInput;
diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInput.tsx b/frontend/src/Components/Form/Select/RootFolderSelectInput.tsx
new file mode 100644
index 000000000..8b278ded7
--- /dev/null
+++ b/frontend/src/Components/Form/Select/RootFolderSelectInput.tsx
@@ -0,0 +1,222 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import {
+ addRootFolder,
+ fetchRootFolders,
+} from 'Store/Actions/rootFolderActions';
+import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
+import { EnhancedSelectInputChanged, InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+import RootFolderSelectInputOption from './RootFolderSelectInputOption';
+import RootFolderSelectInputSelectedValue from './RootFolderSelectInputSelectedValue';
+
+const ADD_NEW_KEY = 'addNew';
+
+export interface RootFolderSelectInputValue
+ extends EnhancedSelectInputValue {
+ isMissing?: boolean;
+}
+
+interface RootFolderSelectInputProps
+ extends Omit<
+ EnhancedSelectInputProps, string>,
+ 'value' | 'values'
+ > {
+ name: string;
+ value?: string;
+ isSaving: boolean;
+ saveError?: object;
+ includeNoChange: boolean;
+}
+
+function createRootFolderOptionsSelector(
+ value: string | undefined,
+ includeMissingValue: boolean,
+ includeNoChange: boolean,
+ includeNoChangeDisabled: boolean
+) {
+ return createSelector(
+ createRootFoldersSelector(),
+
+ (rootFolders) => {
+ const values: RootFolderSelectInputValue[] = rootFolders.items.map(
+ (rootFolder) => {
+ return {
+ key: rootFolder.path,
+ value: rootFolder.path,
+ freeSpace: rootFolder.freeSpace,
+ isMissing: false,
+ };
+ }
+ );
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ get value() {
+ return translate('NoChange');
+ },
+ isDisabled: includeNoChangeDisabled,
+ isMissing: false,
+ });
+ }
+
+ if (!values.length) {
+ values.push({
+ key: '',
+ value: '',
+ isDisabled: true,
+ isHidden: true,
+ });
+ }
+
+ if (
+ includeMissingValue &&
+ value &&
+ !values.find((v) => v.key === value)
+ ) {
+ values.push({
+ key: value,
+ value,
+ isMissing: true,
+ isDisabled: true,
+ });
+ }
+
+ values.push({
+ key: ADD_NEW_KEY,
+ value: translate('AddANewPath'),
+ });
+
+ return {
+ values,
+ isSaving: rootFolders.isSaving,
+ saveError: rootFolders.saveError,
+ };
+ }
+ );
+}
+
+function RootFolderSelectInput({
+ name,
+ value,
+ includeNoChange = false,
+ onChange,
+ ...otherProps
+}: RootFolderSelectInputProps) {
+ const dispatch = useDispatch();
+ const { values, isSaving, saveError } = useSelector(
+ createRootFolderOptionsSelector(value, true, includeNoChange, false)
+ );
+ const [isAddNewRootFolderModalOpen, setIsAddNewRootFolderModalOpen] =
+ useState(false);
+ const [newRootFolderPath, setNewRootFolderPath] = useState('');
+ const previousIsSaving = usePrevious(isSaving);
+
+ const handleChange = useCallback(
+ ({ value: newValue }: EnhancedSelectInputChanged) => {
+ if (newValue === 'addNew') {
+ setIsAddNewRootFolderModalOpen(true);
+ } else {
+ onChange({ name, value: newValue });
+ }
+ },
+ [name, setIsAddNewRootFolderModalOpen, onChange]
+ );
+
+ const handleNewRootFolderSelect = useCallback(
+ ({ value: newValue }: InputChanged) => {
+ setNewRootFolderPath(newValue);
+ dispatch(addRootFolder({ path: newValue }));
+ },
+ [setNewRootFolderPath, dispatch]
+ );
+
+ const handleAddRootFolderModalClose = useCallback(() => {
+ setIsAddNewRootFolderModalOpen(false);
+ }, [setIsAddNewRootFolderModalOpen]);
+
+ useEffect(() => {
+ if (
+ !value &&
+ values.length &&
+ values.some((v) => !!v.key && v.key !== ADD_NEW_KEY)
+ ) {
+ const defaultValue = values[0];
+
+ if (defaultValue.key !== ADD_NEW_KEY) {
+ onChange({ name, value: defaultValue.key });
+ }
+ }
+
+ if (previousIsSaving && !isSaving && !saveError && newRootFolderPath) {
+ onChange({ name, value: newRootFolderPath });
+ setNewRootFolderPath('');
+ }
+ }, [
+ name,
+ value,
+ values,
+ isSaving,
+ saveError,
+ previousIsSaving,
+ newRootFolderPath,
+ onChange,
+ ]);
+
+ useEffect(() => {
+ if (value == null && values[0].key === '') {
+ onChange({ name, value: '' });
+ } else if (
+ !value ||
+ !values.some((v) => v.key === value) ||
+ value === ADD_NEW_KEY
+ ) {
+ const defaultValue = values[0];
+
+ if (defaultValue.key === ADD_NEW_KEY) {
+ onChange({ name, value: '' });
+ } else {
+ onChange({ name, value: defaultValue.key });
+ }
+ }
+
+ // Only run on mount
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ dispatch(fetchRootFolders());
+ }, [dispatch]);
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default RootFolderSelectInput;
diff --git a/frontend/src/Components/Form/RootFolderSelectInputOption.css b/frontend/src/Components/Form/Select/RootFolderSelectInputOption.css
similarity index 100%
rename from frontend/src/Components/Form/RootFolderSelectInputOption.css
rename to frontend/src/Components/Form/Select/RootFolderSelectInputOption.css
diff --git a/frontend/src/Components/Form/RootFolderSelectInputOption.css.d.ts b/frontend/src/Components/Form/Select/RootFolderSelectInputOption.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/RootFolderSelectInputOption.css.d.ts
rename to frontend/src/Components/Form/Select/RootFolderSelectInputOption.css.d.ts
diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx b/frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx
new file mode 100644
index 000000000..d71f0d638
--- /dev/null
+++ b/frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx
@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import React from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInputOption, {
+ EnhancedSelectInputOptionProps,
+} from './EnhancedSelectInputOption';
+import styles from './RootFolderSelectInputOption.css';
+
+interface RootFolderSelectInputOptionProps
+ extends EnhancedSelectInputOptionProps {
+ id: string;
+ value: string;
+ freeSpace?: number;
+ isMissing?: boolean;
+ seriesFolder?: string;
+ isMobile: boolean;
+ isWindows?: boolean;
+}
+
+function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) {
+ const {
+ id,
+ value,
+ freeSpace,
+ isMissing,
+ seriesFolder,
+ isMobile,
+ isWindows,
+ ...otherProps
+ } = props;
+
+ const slashCharacter = isWindows ? '\\' : '/';
+
+ return (
+
+
+
+ {value}
+
+ {seriesFolder && id !== 'addNew' ? (
+
+ {slashCharacter}
+ {seriesFolder}
+
+ ) : null}
+
+
+ {freeSpace == null ? null : (
+
+ {translate('RootFolderSelectFreeSpace', {
+ freeSpace: formatBytes(freeSpace),
+ })}
+
+ )}
+
+ {isMissing ? (
+
{translate('Missing')}
+ ) : null}
+
+
{value}
+
+ {seriesFolder ? (
+
+ {slashCharacter}
+ {seriesFolder}
+
+ ) : null}
+
+ {translate('RootFolderSelectFreeSpace', {
+ freeSpace: formatBytes(freeSpace),
+ })}
+
+ ) : null}
+
+ );
+}
+
+export default RootFolderSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/SeriesTypeSelectInput.tsx b/frontend/src/Components/Form/Select/SeriesTypeSelectInput.tsx
similarity index 60%
rename from frontend/src/Components/Form/SeriesTypeSelectInput.tsx
rename to frontend/src/Components/Form/Select/SeriesTypeSelectInput.tsx
index 471d6592b..6a3bba650 100644
--- a/frontend/src/Components/Form/SeriesTypeSelectInput.tsx
+++ b/frontend/src/Components/Form/Select/SeriesTypeSelectInput.tsx
@@ -1,21 +1,25 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import * as seriesTypes from 'Utilities/Series/seriesTypes';
import translate from 'Utilities/String/translate';
-import EnhancedSelectInput from './EnhancedSelectInput';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
import SeriesTypeSelectInputOption from './SeriesTypeSelectInputOption';
import SeriesTypeSelectInputSelectedValue from './SeriesTypeSelectInputSelectedValue';
-interface SeriesTypeSelectInputProps {
+interface SeriesTypeSelectInputProps
+ extends EnhancedSelectInputProps, string> {
includeNoChange: boolean;
includeNoChangeDisabled?: boolean;
includeMixed: boolean;
}
-interface ISeriesTypeOption {
+export interface ISeriesTypeOption {
key: string;
value: string;
format?: string;
- disabled?: boolean;
+ isDisabled?: boolean;
}
const seriesTypeOptions: ISeriesTypeOption[] = [
@@ -43,29 +47,33 @@ const seriesTypeOptions: ISeriesTypeOption[] = [
];
function SeriesTypeSelectInput(props: SeriesTypeSelectInputProps) {
- const values = [...seriesTypeOptions];
-
const {
- includeNoChange,
+ includeNoChange = false,
includeNoChangeDisabled = true,
- includeMixed,
+ includeMixed = false,
} = props;
- if (includeNoChange) {
- values.unshift({
- key: 'noChange',
- value: translate('NoChange'),
- disabled: includeNoChangeDisabled,
- });
- }
+ const values = useMemo(() => {
+ const result = [...seriesTypeOptions];
- if (includeMixed) {
- values.unshift({
- key: 'mixed',
- value: `(${translate('Mixed')})`,
- disabled: true,
- });
- }
+ if (includeNoChange) {
+ result.unshift({
+ key: 'noChange',
+ value: translate('NoChange'),
+ isDisabled: includeNoChangeDisabled,
+ });
+ }
+
+ if (includeMixed) {
+ result.unshift({
+ key: 'mixed',
+ value: `(${translate('Mixed')})`,
+ isDisabled: true,
+ });
+ }
+
+ return result;
+ }, [includeNoChange, includeNoChangeDisabled, includeMixed]);
return (
+
diff --git a/frontend/src/Components/Form/Select/SeriesTypeSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/SeriesTypeSelectInputSelectedValue.tsx
new file mode 100644
index 000000000..b6470f1a4
--- /dev/null
+++ b/frontend/src/Components/Form/Select/SeriesTypeSelectInputSelectedValue.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
+import { ISeriesTypeOption } from './SeriesTypeSelectInput';
+
+interface SeriesTypeSelectInputOptionProps {
+ selectedValue: string;
+ values: ISeriesTypeOption[];
+ format: string;
+}
+function SeriesTypeSelectInputSelectedValue(
+ props: SeriesTypeSelectInputOptionProps
+) {
+ const { selectedValue, values, ...otherProps } = props;
+ const format = values.find((v) => v.key === selectedValue)?.format;
+
+ return (
+
+ );
+}
+
+export default SeriesTypeSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/UMaskInput.css b/frontend/src/Components/Form/Select/UMaskInput.css
similarity index 93%
rename from frontend/src/Components/Form/UMaskInput.css
rename to frontend/src/Components/Form/Select/UMaskInput.css
index 91486687e..a777aaeef 100644
--- a/frontend/src/Components/Form/UMaskInput.css
+++ b/frontend/src/Components/Form/Select/UMaskInput.css
@@ -1,53 +1,53 @@
-.inputWrapper {
- display: flex;
-}
-
-.inputFolder {
- composes: input from '~Components/Form/Input.css';
-
- max-width: 100px;
-}
-
-.inputUnitWrapper {
- position: relative;
- width: 100%;
-}
-
-.inputUnit {
- composes: inputUnit from '~Components/Form/FormInputGroup.css';
-
- right: 40px;
- font-family: $monoSpaceFontFamily;
-}
-
-.unit {
- font-family: $monoSpaceFontFamily;
-}
-
-.details {
- margin-top: 5px;
- margin-left: 17px;
- line-height: 20px;
-
- > div {
- display: flex;
-
- label {
- flex: 0 0 50px;
- }
-
- .value {
- width: 50px;
- text-align: right;
- }
-
- .unit {
- width: 90px;
- text-align: right;
- }
- }
-}
-
-.readOnly {
- background-color: var(--inputReadOnlyBackgroundColor);
-}
+.inputWrapper {
+ display: flex;
+}
+
+.inputFolder {
+ composes: input from '~Components/Form/Input.css';
+
+ max-width: 100px;
+}
+
+.inputUnitWrapper {
+ position: relative;
+ width: 100%;
+}
+
+.inputUnit {
+ composes: inputUnit from '~Components/Form/FormInputGroup.css';
+
+ right: 40px;
+ font-family: $monoSpaceFontFamily;
+}
+
+.unit {
+ font-family: $monoSpaceFontFamily;
+}
+
+.details {
+ margin-top: 5px;
+ margin-left: 17px;
+ line-height: 20px;
+
+ > div {
+ display: flex;
+
+ label {
+ flex: 0 0 50px;
+ }
+
+ .value {
+ width: 50px;
+ text-align: right;
+ }
+
+ .unit {
+ width: 90px;
+ text-align: right;
+ }
+ }
+}
+
+.readOnly {
+ background-color: var(--inputReadOnlyBackgroundColor);
+}
diff --git a/frontend/src/Components/Form/UMaskInput.css.d.ts b/frontend/src/Components/Form/Select/UMaskInput.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/UMaskInput.css.d.ts
rename to frontend/src/Components/Form/Select/UMaskInput.css.d.ts
diff --git a/frontend/src/Components/Form/Select/UMaskInput.tsx b/frontend/src/Components/Form/Select/UMaskInput.tsx
new file mode 100644
index 000000000..1f537f968
--- /dev/null
+++ b/frontend/src/Components/Form/Select/UMaskInput.tsx
@@ -0,0 +1,142 @@
+/* eslint-disable no-bitwise */
+import PropTypes from 'prop-types';
+import React, { SyntheticEvent } from 'react';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput from './EnhancedSelectInput';
+import styles from './UMaskInput.css';
+
+const umaskOptions = [
+ {
+ key: '755',
+ get value() {
+ return translate('Umask755Description', { octal: '755' });
+ },
+ hint: 'drwxr-xr-x',
+ },
+ {
+ key: '775',
+ get value() {
+ return translate('Umask775Description', { octal: '775' });
+ },
+ hint: 'drwxrwxr-x',
+ },
+ {
+ key: '770',
+ get value() {
+ return translate('Umask770Description', { octal: '770' });
+ },
+ hint: 'drwxrwx---',
+ },
+ {
+ key: '750',
+ get value() {
+ return translate('Umask750Description', { octal: '750' });
+ },
+ hint: 'drwxr-x---',
+ },
+ {
+ key: '777',
+ get value() {
+ return translate('Umask777Description', { octal: '777' });
+ },
+ hint: 'drwxrwxrwx',
+ },
+];
+
+function formatPermissions(permissions: number) {
+ const hasSticky = permissions & 0o1000;
+ const hasSetGID = permissions & 0o2000;
+ const hasSetUID = permissions & 0o4000;
+
+ let result = '';
+
+ for (let i = 0; i < 9; i++) {
+ const bit = (permissions & (1 << i)) !== 0;
+ let digit = bit ? 'xwr'[i % 3] : '-';
+ if (i === 6 && hasSetUID) {
+ digit = bit ? 's' : 'S';
+ } else if (i === 3 && hasSetGID) {
+ digit = bit ? 's' : 'S';
+ } else if (i === 0 && hasSticky) {
+ digit = bit ? 't' : 'T';
+ }
+ result = digit + result;
+ }
+
+ return result;
+}
+
+interface UMaskInputProps {
+ name: string;
+ value: string;
+ hasError?: boolean;
+ hasWarning?: boolean;
+ onChange: (change: InputChanged) => void;
+ onFocus?: (event: SyntheticEvent) => void;
+ onBlur?: (event: SyntheticEvent) => void;
+}
+
+function UMaskInput({ name, value, onChange }: UMaskInputProps) {
+ const valueNum = parseInt(value, 8);
+ const umaskNum = 0o777 & ~valueNum;
+ const umask = umaskNum.toString(8).padStart(4, '0');
+ const folderNum = 0o777 & ~umaskNum;
+ const folder = folderNum.toString(8).padStart(3, '0');
+ const fileNum = 0o666 & ~umaskNum;
+ const file = fileNum.toString(8).padStart(3, '0');
+ const unit = formatPermissions(folderNum);
+
+ const values = umaskOptions.map((v) => {
+ return { ...v, hint:
{v.hint} };
+ });
+
+ return (
+
+
+
+
+
+
+
{umask}
+
+
+
+
+
{folder}
+
d{formatPermissions(folderNum)}
+
+
+
+
+
{file}
+
{formatPermissions(fileNum)}
+
+
+
+ );
+}
+
+UMaskInput.propTypes = {
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ hasError: PropTypes.bool,
+ hasWarning: PropTypes.bool,
+ onChange: PropTypes.func.isRequired,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+};
+
+export default UMaskInput;
diff --git a/frontend/src/Components/Form/SelectInput.js b/frontend/src/Components/Form/SelectInput.js
deleted file mode 100644
index 553501afc..000000000
--- a/frontend/src/Components/Form/SelectInput.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import styles from './SelectInput.css';
-
-class SelectInput extends Component {
-
- //
- // Listeners
-
- onChange = (event) => {
- this.props.onChange({
- name: this.props.name,
- value: event.target.value
- });
- };
-
- //
- // Render
-
- render() {
- const {
- className,
- disabledClassName,
- name,
- value,
- values,
- isDisabled,
- hasError,
- hasWarning,
- autoFocus,
- onBlur
- } = this.props;
-
- return (
-
- );
- }
-}
-
-SelectInput.propTypes = {
- className: PropTypes.string,
- disabledClassName: PropTypes.string,
- name: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- isDisabled: PropTypes.bool,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- autoFocus: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- onBlur: PropTypes.func
-};
-
-SelectInput.defaultProps = {
- className: styles.select,
- disabledClassName: styles.isDisabled,
- isDisabled: false,
- autoFocus: false
-};
-
-export default SelectInput;
diff --git a/frontend/src/Components/Form/SelectInput.tsx b/frontend/src/Components/Form/SelectInput.tsx
new file mode 100644
index 000000000..4716c2dfd
--- /dev/null
+++ b/frontend/src/Components/Form/SelectInput.tsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import React, { ChangeEvent, SyntheticEvent, useCallback } from 'react';
+import { InputChanged } from 'typings/inputs';
+import styles from './SelectInput.css';
+
+interface SelectInputOption {
+ key: string;
+ value: string | number | (() => string | number);
+}
+
+interface SelectInputProps
{
+ className?: string;
+ disabledClassName?: string;
+ name: string;
+ value: string | number;
+ values: SelectInputOption[];
+ isDisabled?: boolean;
+ hasError?: boolean;
+ hasWarning?: boolean;
+ autoFocus?: boolean;
+ onChange: (change: InputChanged) => void;
+ onBlur?: (event: SyntheticEvent) => void;
+}
+
+function SelectInput({
+ className = styles.select,
+ disabledClassName = styles.isDisabled,
+ name,
+ value,
+ values,
+ isDisabled = false,
+ hasError,
+ hasWarning,
+ autoFocus = false,
+ onBlur,
+ onChange,
+}: SelectInputProps) {
+ const handleChange = useCallback(
+ (event: ChangeEvent) => {
+ onChange({
+ name,
+ value: event.target.value as T,
+ });
+ },
+ [name, onChange]
+ );
+
+ return (
+
+ );
+}
+
+export default SelectInput;
diff --git a/frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.css b/frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.css
deleted file mode 100644
index c76b0a263..000000000
--- a/frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.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;
-}
diff --git a/frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.tsx b/frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.tsx
deleted file mode 100644
index 94d2b7157..000000000
--- a/frontend/src/Components/Form/SeriesTypeSelectInputSelectedValue.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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 (
-
- {value}
-
- {format == null ? null : {format}
}
-
- );
-}
-
-export default SeriesTypeSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/DeviceInput.css b/frontend/src/Components/Form/Tag/DeviceInput.css
similarity index 64%
rename from frontend/src/Components/Form/DeviceInput.css
rename to frontend/src/Components/Form/Tag/DeviceInput.css
index 7abe83db5..189cafc6b 100644
--- a/frontend/src/Components/Form/DeviceInput.css
+++ b/frontend/src/Components/Form/Tag/DeviceInput.css
@@ -3,6 +3,6 @@
}
.input {
- composes: input from '~./TagInput.css';
+ composes: input from '~Components/Form/Tag/TagInput.css';
composes: hasButton from '~Components/Form/Input.css';
}
diff --git a/frontend/src/Components/Form/DeviceInput.css.d.ts b/frontend/src/Components/Form/Tag/DeviceInput.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/DeviceInput.css.d.ts
rename to frontend/src/Components/Form/Tag/DeviceInput.css.d.ts
diff --git a/frontend/src/Components/Form/Tag/DeviceInput.tsx b/frontend/src/Components/Form/Tag/DeviceInput.tsx
new file mode 100644
index 000000000..3c483d1f2
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/DeviceInput.tsx
@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FormInputButton from 'Components/Form/FormInputButton';
+import Icon from 'Components/Icon';
+import { icons } from 'Helpers/Props';
+import {
+ clearOptions,
+ defaultState,
+ fetchOptions,
+} from 'Store/Actions/providerOptionActions';
+import { InputChanged } from 'typings/inputs';
+import TagInput, { TagInputProps } from './TagInput';
+import styles from './DeviceInput.css';
+
+interface DeviceTag {
+ id: string;
+ name: string;
+}
+
+interface DeviceInputProps extends TagInputProps {
+ className?: string;
+ name: string;
+ value: string[];
+ hasError?: boolean;
+ hasWarning?: boolean;
+ provider: string;
+ providerData: object;
+ onChange: (change: InputChanged) => unknown;
+}
+
+function createDeviceTagsSelector(value: string[]) {
+ return createSelector(
+ (state: AppState) => state.providerOptions.devices || defaultState,
+ (devices) => {
+ return {
+ ...devices,
+ selectedDevices: value.map((valueDevice) => {
+ const device = devices.items.find((d) => d.id === valueDevice);
+
+ if (device) {
+ return {
+ id: device.id,
+ name: `${device.name} (${device.id})`,
+ };
+ }
+
+ return {
+ id: valueDevice,
+ name: `Unknown (${valueDevice})`,
+ };
+ }),
+ };
+ }
+ );
+}
+
+function DeviceInput({
+ className = styles.deviceInputWrapper,
+ name,
+ value,
+ hasError,
+ hasWarning,
+ provider,
+ providerData,
+ onChange,
+}: DeviceInputProps) {
+ const dispatch = useDispatch();
+ const { items, selectedDevices, isFetching } = useSelector(
+ createDeviceTagsSelector(value)
+ );
+
+ const handleRefreshPress = useCallback(() => {
+ dispatch(
+ fetchOptions({
+ section: 'devices',
+ action: 'getDevices',
+ provider,
+ providerData,
+ })
+ );
+ }, [provider, providerData, dispatch]);
+
+ const handleTagAdd = useCallback(
+ (device: DeviceTag) => {
+ // New tags won't have an ID, only a name.
+ const deviceId = device.id || device.name;
+
+ onChange({
+ name,
+ value: [...value, deviceId],
+ });
+ },
+ [name, value, onChange]
+ );
+
+ const handleTagDelete = useCallback(
+ ({ index }: { index: number }) => {
+ const newValue = value.slice();
+ newValue.splice(index, 1);
+
+ onChange({
+ name,
+ value: newValue,
+ });
+ },
+ [name, value, onChange]
+ );
+
+ useEffect(() => {
+ dispatch(
+ fetchOptions({
+ section: 'devices',
+ action: 'getDevices',
+ provider,
+ providerData,
+ })
+ );
+
+ return () => {
+ dispatch(clearOptions({ section: 'devices' }));
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [dispatch]);
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default DeviceInput;
diff --git a/frontend/src/Components/Form/Tag/SeriesTagInput.tsx b/frontend/src/Components/Form/Tag/SeriesTagInput.tsx
new file mode 100644
index 000000000..f72248cf5
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/SeriesTagInput.tsx
@@ -0,0 +1,145 @@
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { addTag } from 'Store/Actions/tagActions';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import { InputChanged } from 'typings/inputs';
+import sortByProp from 'Utilities/Array/sortByProp';
+import TagInput, { TagBase } from './TagInput';
+
+interface SeriesTag extends TagBase {
+ id: number;
+ name: string;
+}
+
+interface SeriesTagInputProps {
+ name: string;
+ value: number | number[];
+ onChange: (change: InputChanged) => void;
+}
+
+const VALID_TAG_REGEX = new RegExp('[^-_a-z0-9]', 'i');
+
+function isValidTag(tagName: string) {
+ try {
+ return !VALID_TAG_REGEX.test(tagName);
+ } catch {
+ return false;
+ }
+}
+
+function createSeriesTagsSelector(tags: number[]) {
+ return createSelector(createTagsSelector(), (tagList) => {
+ const sortedTags = tagList.sort(sortByProp('label'));
+ const filteredTagList = sortedTags.filter((tag) => !tags.includes(tag.id));
+
+ return {
+ tags: tags.reduce((acc: SeriesTag[], tag) => {
+ const matchingTag = tagList.find((t) => t.id === tag);
+
+ if (matchingTag) {
+ acc.push({
+ id: tag,
+ name: matchingTag.label,
+ });
+ }
+
+ return acc;
+ }, []),
+
+ tagList: filteredTagList.map(({ id, label: name }) => {
+ return {
+ id,
+ name,
+ };
+ }),
+
+ allTags: sortedTags,
+ };
+ });
+}
+
+export default function SeriesTagInput({
+ name,
+ value,
+ onChange,
+}: SeriesTagInputProps) {
+ const dispatch = useDispatch();
+ const isArray = Array.isArray(value);
+
+ const arrayValue = useMemo(() => {
+ if (isArray) {
+ return value;
+ }
+
+ return value === 0 ? [] : [value];
+ }, [isArray, value]);
+
+ const { tags, tagList, allTags } = useSelector(
+ createSeriesTagsSelector(arrayValue)
+ );
+
+ const handleTagCreated = useCallback(
+ (tag: SeriesTag) => {
+ if (isArray) {
+ onChange({ name, value: [...value, tag.id] });
+ } else {
+ onChange({
+ name,
+ value: tag.id,
+ });
+ }
+ },
+ [name, value, isArray, onChange]
+ );
+
+ const handleTagAdd = useCallback(
+ (newTag: SeriesTag) => {
+ if (newTag.id) {
+ if (isArray) {
+ onChange({ name, value: [...value, newTag.id] });
+ } else {
+ onChange({ name, value: newTag.id });
+ }
+
+ return;
+ }
+
+ const existingTag = allTags.some((t) => t.label === newTag.name);
+
+ if (isValidTag(newTag.name) && !existingTag) {
+ dispatch(
+ addTag({
+ tag: { label: newTag.name },
+ onTagCreated: handleTagCreated,
+ })
+ );
+ }
+ },
+ [name, value, isArray, allTags, handleTagCreated, onChange, dispatch]
+ );
+
+ const handleTagDelete = useCallback(
+ ({ index }: { index: number }) => {
+ if (isArray) {
+ const newValue = value.slice();
+ newValue.splice(index, 1);
+
+ onChange({ name, value: newValue });
+ } else {
+ onChange({ name, value: 0 });
+ }
+ },
+ [name, value, isArray, onChange]
+ );
+
+ return (
+
+ );
+}
diff --git a/frontend/src/Components/Form/TagInput.css b/frontend/src/Components/Form/Tag/TagInput.css
similarity index 74%
rename from frontend/src/Components/Form/TagInput.css
rename to frontend/src/Components/Form/Tag/TagInput.css
index eeddab5b4..2ca02825e 100644
--- a/frontend/src/Components/Form/TagInput.css
+++ b/frontend/src/Components/Form/Tag/TagInput.css
@@ -1,5 +1,5 @@
.input {
- composes: input from '~./AutoSuggestInput.css';
+ composes: input from '~Components/Form/AutoSuggestInput.css';
padding: 0;
min-height: 35px;
@@ -8,7 +8,8 @@
&.isFocused {
outline: 0;
border-color: var(--inputFocusBorderColor);
- box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
+ box-shadow: inset 0 1px 1px var(--inputBoxShadowColor),
+ 0 0 8px var(--inputFocusBoxShadowColor);
}
}
diff --git a/frontend/src/Components/Form/TagInput.css.d.ts b/frontend/src/Components/Form/Tag/TagInput.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/TagInput.css.d.ts
rename to frontend/src/Components/Form/Tag/TagInput.css.d.ts
diff --git a/frontend/src/Components/Form/Tag/TagInput.tsx b/frontend/src/Components/Form/Tag/TagInput.tsx
new file mode 100644
index 000000000..bde24f369
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInput.tsx
@@ -0,0 +1,371 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, {
+ KeyboardEvent,
+ Ref,
+ SyntheticEvent,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import {
+ ChangeEvent,
+ RenderInputComponentProps,
+ RenderSuggestion,
+ SuggestionsFetchRequestedParams,
+} from 'react-autosuggest';
+import useDebouncedCallback from 'Helpers/Hooks/useDebouncedCallback';
+import { kinds } from 'Helpers/Props';
+import { Kind } from 'Helpers/Props/kinds';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
+import { InputChanged } from 'typings/inputs';
+import AutoSuggestInput from '../AutoSuggestInput';
+import TagInputInput from './TagInputInput';
+import TagInputTag, { EditedTag, TagInputTagProps } from './TagInputTag';
+import styles from './TagInput.css';
+
+export interface TagBase {
+ id: boolean | number | string | null;
+ name: string | number;
+}
+
+function getTag(
+ value: string,
+ selectedIndex: number,
+ suggestions: T[],
+ allowNew: boolean
+) {
+ if (selectedIndex == null && value) {
+ const existingTag = suggestions.find(
+ (suggestion) => suggestion.name === value
+ );
+
+ if (existingTag) {
+ return existingTag;
+ } else if (allowNew) {
+ return { name: value } as T;
+ }
+ } else if (selectedIndex != null) {
+ return suggestions[selectedIndex];
+ }
+
+ return null;
+}
+
+function handleSuggestionsClearRequested() {
+ // Required because props aren't always rendered, but no-op
+ // because we don't want to reset the paths after a path is selected.
+}
+
+export interface ReplacementTag {
+ index: number;
+ id: T['id'];
+}
+
+export interface TagInputProps {
+ className?: string;
+ inputContainerClassName?: string;
+ name: string;
+ tags: T[];
+ tagList: T[];
+ allowNew?: boolean;
+ kind?: Kind;
+ placeholder?: string;
+ delimiters?: string[];
+ minQueryLength?: number;
+ canEdit?: boolean;
+ hasError?: boolean;
+ hasWarning?: boolean;
+ tagComponent?: React.ElementType;
+ onChange?: (change: InputChanged) => void;
+ onTagAdd: (newTag: T) => void;
+ onTagDelete: TagInputTagProps['onDelete'];
+ onTagReplace?: (
+ tagToReplace: ReplacementTag,
+ newTagName: T['name']
+ ) => void;
+}
+
+function TagInput({
+ className = styles.internalInput,
+ inputContainerClassName = styles.input,
+ name,
+ tags,
+ tagList,
+ allowNew = true,
+ kind = 'info',
+ placeholder = '',
+ delimiters = ['Tab', 'Enter', ' ', ','],
+ minQueryLength = 1,
+ canEdit = false,
+ tagComponent = TagInputTag,
+ hasError,
+ hasWarning,
+ onChange,
+ onTagAdd,
+ onTagDelete,
+ onTagReplace,
+ ...otherProps
+}: TagInputProps) {
+ const [value, setValue] = useState('');
+ const [suggestions, setSuggestions] = useState([]);
+ const [isFocused, setIsFocused] = useState(false);
+ const autoSuggestRef = useRef(null);
+
+ const addTag = useDebouncedCallback(
+ (tag: T | null) => {
+ if (!tag) {
+ return;
+ }
+
+ onTagAdd(tag);
+
+ setValue('');
+ setSuggestions([]);
+ },
+ 250,
+ {
+ leading: true,
+ trailing: false,
+ }
+ );
+
+ const handleEditTag = useCallback(
+ ({ value: newValue, ...otherProps }: EditedTag) => {
+ if (value && onTagReplace) {
+ onTagReplace(otherProps, value);
+ } else {
+ onTagDelete(otherProps);
+ }
+
+ setValue(String(newValue));
+ },
+ [value, setValue, onTagDelete, onTagReplace]
+ );
+
+ const handleInputContainerPress = useCallback(() => {
+ // @ts-expect-error Ref isn't typed yet
+ autoSuggestRef?.current?.input.focus();
+ }, []);
+
+ const handleInputChange = useCallback(
+ (_event: SyntheticEvent, { newValue, method }: ChangeEvent) => {
+ const finalValue =
+ // @ts-expect-error newValue may be an object?
+ typeof newValue === 'object' ? newValue.name : newValue;
+
+ if (method === 'type') {
+ setValue(finalValue);
+ }
+ },
+ [setValue]
+ );
+
+ const handleSuggestionsFetchRequested = useCallback(
+ ({ value: newValue }: SuggestionsFetchRequestedParams) => {
+ const lowerCaseValue = newValue.toLowerCase();
+
+ const suggestions = tagList.filter((tag) => {
+ return (
+ String(tag.name).toLowerCase().includes(lowerCaseValue) &&
+ !tags.some((t) => t.id === tag.id)
+ );
+ });
+
+ setSuggestions(suggestions);
+ },
+ [tags, tagList, setSuggestions]
+ );
+
+ const handleInputKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ const key = event.key;
+
+ if (!autoSuggestRef.current) {
+ return;
+ }
+
+ if (key === 'Backspace' && !value.length) {
+ const index = tags.length - 1;
+
+ if (index >= 0) {
+ onTagDelete({ index, id: tags[index].id });
+ }
+
+ setTimeout(() => {
+ handleSuggestionsFetchRequested({
+ value: '',
+ reason: 'input-changed',
+ });
+ });
+
+ event.preventDefault();
+ }
+
+ if (delimiters.includes(key)) {
+ // @ts-expect-error Ref isn't typed yet
+ const selectedIndex = autoSuggestRef.current.highlightedSuggestionIndex;
+ const tag = getTag(value, selectedIndex, suggestions, allowNew);
+
+ if (tag) {
+ addTag(tag);
+ event.preventDefault();
+ }
+ }
+ },
+ [
+ tags,
+ allowNew,
+ delimiters,
+ onTagDelete,
+ value,
+ suggestions,
+ addTag,
+ handleSuggestionsFetchRequested,
+ ]
+ );
+
+ const handleInputFocus = useCallback(() => {
+ setIsFocused(true);
+ }, [setIsFocused]);
+
+ const handleInputBlur = useCallback(() => {
+ setIsFocused(false);
+
+ if (!autoSuggestRef.current) {
+ return;
+ }
+
+ // @ts-expect-error Ref isn't typed yet
+ const selectedIndex = autoSuggestRef.current.highlightedSuggestionIndex;
+ const tag = getTag(value, selectedIndex, suggestions, allowNew);
+
+ if (tag) {
+ addTag(tag);
+ }
+ }, [allowNew, value, suggestions, autoSuggestRef, addTag, setIsFocused]);
+
+ const handleSuggestionSelected = useCallback(
+ (_event: SyntheticEvent, { suggestion }: { suggestion: T }) => {
+ addTag(suggestion);
+ },
+ [addTag]
+ );
+
+ const getSuggestionValue = useCallback(({ name }: T): string => {
+ return String(name);
+ }, []);
+
+ const shouldRenderSuggestions = useCallback(
+ (v: string) => {
+ return v.length >= minQueryLength;
+ },
+ [minQueryLength]
+ );
+
+ const renderSuggestion: RenderSuggestion = useCallback(({ name }: T) => {
+ return name;
+ }, []);
+
+ const renderInputComponent = useCallback(
+ (
+ inputProps: RenderInputComponentProps,
+ forwardedRef: Ref
+ ) => {
+ return (
+
+ );
+ },
+ [
+ tags,
+ kind,
+ canEdit,
+ isFocused,
+ tagComponent,
+ handleInputContainerPress,
+ handleEditTag,
+ onTagDelete,
+ ]
+ );
+
+ useEffect(() => {
+ return () => {
+ addTag.cancel();
+ };
+ }, [addTag]);
+
+ return (
+
+ );
+}
+
+TagInput.propTypes = {
+ className: PropTypes.string,
+ inputContainerClassName: PropTypes.string,
+ tags: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
+ tagList: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
+ allowNew: PropTypes.bool,
+ kind: PropTypes.oneOf(kinds.all),
+ placeholder: PropTypes.string,
+ delimiters: PropTypes.arrayOf(PropTypes.string),
+ minQueryLength: PropTypes.number,
+ canEdit: PropTypes.bool,
+ hasError: PropTypes.bool,
+ hasWarning: PropTypes.bool,
+ tagComponent: PropTypes.elementType,
+ onTagAdd: PropTypes.func.isRequired,
+ onTagDelete: PropTypes.func.isRequired,
+ onTagReplace: PropTypes.func,
+};
+
+TagInput.defaultProps = {
+ className: styles.internalInput,
+ inputContainerClassName: styles.input,
+ allowNew: true,
+ kind: kinds.INFO,
+ placeholder: '',
+ delimiters: ['Tab', 'Enter', ' ', ','],
+ minQueryLength: 1,
+ canEdit: false,
+ tagComponent: TagInputTag,
+};
+
+export default TagInput;
diff --git a/frontend/src/Components/Form/TagInputInput.css b/frontend/src/Components/Form/Tag/TagInputInput.css
similarity index 100%
rename from frontend/src/Components/Form/TagInputInput.css
rename to frontend/src/Components/Form/Tag/TagInputInput.css
diff --git a/frontend/src/Components/Form/TagInputInput.css.d.ts b/frontend/src/Components/Form/Tag/TagInputInput.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/TagInputInput.css.d.ts
rename to frontend/src/Components/Form/Tag/TagInputInput.css.d.ts
diff --git a/frontend/src/Components/Form/Tag/TagInputInput.tsx b/frontend/src/Components/Form/Tag/TagInputInput.tsx
new file mode 100644
index 000000000..d181136b8
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInputInput.tsx
@@ -0,0 +1,71 @@
+import React, { MouseEvent, Ref, useCallback } from 'react';
+import { Kind } from 'Helpers/Props/kinds';
+import { TagBase } from './TagInput';
+import { TagInputTagProps } from './TagInputTag';
+import styles from './TagInputInput.css';
+
+interface TagInputInputProps {
+ forwardedRef?: Ref;
+ className?: string;
+ tags: TagBase[];
+ inputProps: object;
+ kind: Kind;
+ isFocused: boolean;
+ canEdit: boolean;
+ tagComponent: React.ElementType;
+ onTagDelete: TagInputTagProps['onDelete'];
+ onTagEdit: TagInputTagProps['onEdit'];
+ onInputContainerPress: () => void;
+}
+
+function TagInputInput(props: TagInputInputProps) {
+ const {
+ forwardedRef,
+ className = styles.inputContainer,
+ tags,
+ inputProps,
+ kind,
+ isFocused,
+ canEdit,
+ tagComponent: TagComponent,
+ onTagDelete,
+ onTagEdit,
+ onInputContainerPress,
+ } = props;
+
+ const handleMouseDown = useCallback(
+ (event: MouseEvent) => {
+ event.preventDefault();
+
+ if (isFocused) {
+ return;
+ }
+
+ onInputContainerPress();
+ },
+ [isFocused, onInputContainerPress]
+ );
+
+ return (
+
+ {tags.map((tag, index) => {
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
+
+export default TagInputInput;
diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/Tag/TagInputTag.css
similarity index 96%
rename from frontend/src/Components/Form/TagInputTag.css
rename to frontend/src/Components/Form/Tag/TagInputTag.css
index 7e66a4d12..1a8ff45d6 100644
--- a/frontend/src/Components/Form/TagInputTag.css
+++ b/frontend/src/Components/Form/Tag/TagInputTag.css
@@ -30,5 +30,6 @@
.label {
composes: label from '~Components/Label.css';
+ display: flex;
max-width: 100%;
}
diff --git a/frontend/src/Components/Form/TagInputTag.css.d.ts b/frontend/src/Components/Form/Tag/TagInputTag.css.d.ts
similarity index 100%
rename from frontend/src/Components/Form/TagInputTag.css.d.ts
rename to frontend/src/Components/Form/Tag/TagInputTag.css.d.ts
diff --git a/frontend/src/Components/Form/Tag/TagInputTag.tsx b/frontend/src/Components/Form/Tag/TagInputTag.tsx
new file mode 100644
index 000000000..7b549767c
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInputTag.tsx
@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import Label, { LabelProps } from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import MiddleTruncate from 'Components/MiddleTruncate';
+import { icons } from 'Helpers/Props';
+import { TagBase } from './TagInput';
+import styles from './TagInputTag.css';
+
+export interface DeletedTag {
+ index: number;
+ id: T['id'];
+}
+
+export interface EditedTag {
+ index: number;
+ id: T['id'];
+ value: T['name'];
+}
+
+export interface TagInputTagProps {
+ index: number;
+ tag: T;
+ kind: LabelProps['kind'];
+ canEdit: boolean;
+ onDelete: (deletedTag: DeletedTag) => void;
+ onEdit: (editedTag: EditedTag) => void;
+}
+
+function TagInputTag({
+ tag,
+ kind,
+ index,
+ canEdit,
+ onDelete,
+ onEdit,
+}: TagInputTagProps) {
+ const handleDelete = useCallback(() => {
+ onDelete({
+ index,
+ id: tag.id,
+ });
+ }, [index, tag, onDelete]);
+
+ const handleEdit = useCallback(() => {
+ onEdit({
+ index,
+ id: tag.id,
+ value: tag.name,
+ });
+ }, [index, tag, onEdit]);
+
+ return (
+
+
+
- {
- tags.map((tag, index) => {
- return (
-
- );
- })
- }
-
-
-
- );
- }
-}
-
-TagInputInput.propTypes = {
- forwardedRef: PropTypes.func,
- className: PropTypes.string.isRequired,
- tags: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
- inputProps: PropTypes.object.isRequired,
- kind: PropTypes.oneOf(kinds.all).isRequired,
- isFocused: PropTypes.bool.isRequired,
- canEdit: PropTypes.bool.isRequired,
- tagComponent: PropTypes.elementType.isRequired,
- onTagDelete: PropTypes.func.isRequired,
- onTagEdit: PropTypes.func.isRequired,
- onInputContainerPress: PropTypes.func.isRequired
-};
-
-TagInputInput.defaultProps = {
- className: styles.inputContainer
-};
-
-export default TagInputInput;
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
deleted file mode 100644
index 05a780442..000000000
--- a/frontend/src/Components/Form/TagInputTag.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import MiddleTruncate from 'react-middle-truncate';
-import Label from 'Components/Label';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import { icons, kinds } from 'Helpers/Props';
-import tagShape from 'Helpers/Props/Shapes/tagShape';
-import styles from './TagInputTag.css';
-
-class TagInputTag extends Component {
-
- //
- // Listeners
-
- onDelete = () => {
- const {
- index,
- tag,
- onDelete
- } = this.props;
-
- onDelete({
- index,
- id: tag.id
- });
- };
-
- onEdit = () => {
- const {
- index,
- tag,
- onEdit
- } = this.props;
-
- onEdit({
- index,
- id: tag.id,
- value: tag.name
- });
- };
-
- //
- // Render
-
- render() {
- const {
- tag,
- kind,
- canEdit
- } = this.props;
-
- return (
-
-
-
-
-
-
-
-
{umask}
-
-
-
-
{folder}
-
d{formatPermissions(folderNum)}
-
-
-
-
{file}
-
{formatPermissions(fileNum)}
-
-
-
Sonarr
+# 
JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools
+Thank you to [
](http://www.jetbrains.com/) for providing us with free licenses to their great tools
-* [
TeamCity](http://www.jetbrains.com/teamcity/)
-* [
ReSharper](http://www.jetbrains.com/resharper/)
-* [
dotTrace](http://www.jetbrains.com/dottrace/)
+[
](http://www.jetbrains.com/teamcity/)
+
+[
](http://www.jetbrains.com/resharper/)
+
+[
](http://www.jetbrains.com/dottrace/)
+
+[
](http://www.jetbrains.com/rider/)
### Licenses
-- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-- Copyright 2010-2023
+- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
+- Copyright 2010-2024
diff --git a/distribution/debian/install.sh b/distribution/debian/install.sh
index 87a0b0914..803d7cf51 100644
--- a/distribution/debian/install.sh
+++ b/distribution/debian/install.sh
@@ -59,7 +59,7 @@ app_guid=$(echo "$app_guid" | tr -d ' ')
app_guid=${app_guid:-media}
echo "This will install [${app^}] to [$bindir] and use [$datadir] for the AppData Directory"
-echo "${app^} will run as the user [$app_uid] and group [$app_guid]. By continuing, you've confirmed that that user and group will have READ and WRITE access to your Media Library and Download Client Completed Download directories"
+echo "${app^} will run as the user [$app_uid] and group [$app_guid]. By continuing, you've confirmed that the selected user and group will have READ and WRITE access to your Media Library and Download Client Completed Download directories"
read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
# Create User / Group as needed
@@ -114,7 +114,7 @@ case "$ARCH" in
esac
echo ""
echo "Removing previous tarballs"
-# -f to Force so we fail if it doesnt exist
+# -f to Force so we fail if it doesn't exist
rm -f "${app^}".*.tar.gz
echo ""
echo "Downloading..."
diff --git a/docs.sh b/docs.sh
index a0f21c41a..386f5df68 100755
--- a/docs.sh
+++ b/docs.sh
@@ -25,17 +25,23 @@ slnFile=src/Sonarr.sln
platform=Posix
+if [ "$PLATFORM" = "Windows" ]; then
+ application=Sonarr.Console.dll
+else
+ application=Sonarr.dll
+fi
+
dotnet clean $slnFile -c Debug
dotnet clean $slnFile -c Release
dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
dotnet new tool-manifest
-dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
-dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/Sonarr.dll" v3 &
+dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v3 &
-sleep 30
+sleep 45
kill %1
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index cc26a2633..e14b9125d 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -210,7 +210,6 @@ module.exports = {
'no-undef-init': 'off',
'no-undefined': 'off',
'no-unused-vars': ['error', { args: 'none', ignoreRestSiblings: true }],
- 'no-use-before-define': 'error',
// Node.js and CommonJS
@@ -359,11 +358,20 @@ module.exports = {
],
rules: Object.assign(typescriptEslintRecommended.rules, {
- 'no-shadow': 'off',
- // These should be enabled after cleaning things up
- '@typescript-eslint/no-unused-vars': 'warn',
+ '@typescript-eslint/no-unused-vars': [
+ 'error',
+ {
+ args: 'after-used',
+ argsIgnorePattern: '^_',
+ caughtErrorsIgnorePattern: '^_',
+ destructuredArrayIgnorePattern: '^_',
+ varsIgnorePattern: '^_',
+ ignoreRestSiblings: true
+
+ }
+ ],
'@typescript-eslint/explicit-function-return-type': 'off',
- 'react/prop-types': 'off',
+ 'no-shadow': 'off',
'prettier/prettier': 'error',
'simple-import-sort/imports': [
'error',
@@ -376,7 +384,41 @@ module.exports = {
['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
]
}
- ]
+ ],
+
+ // React Hooks
+ 'react-hooks/rules-of-hooks': 'error',
+ 'react-hooks/exhaustive-deps': 'error',
+
+ // React
+ 'react/function-component-definition': 'error',
+ 'react/hook-use-state': 'error',
+ 'react/jsx-boolean-value': ['error', 'always'],
+ 'react/jsx-curly-brace-presence': [
+ 'error',
+ { props: 'never', children: 'never' }
+ ],
+ 'react/jsx-fragments': 'error',
+ 'react/jsx-handler-names': [
+ 'error',
+ {
+ eventHandlerPrefix: 'on',
+ eventHandlerPropPrefix: 'on'
+ }
+ ],
+ 'react/jsx-no-bind': ['error', { ignoreRefs: true }],
+ 'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
+ 'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
+ 'react/jsx-sort-props': [
+ 'error',
+ {
+ callbacksLast: true,
+ noSortAlphabetically: true,
+ reservedFirst: true
+ }
+ ],
+ 'react/prop-types': 'off',
+ 'react/self-closing-comp': 'error'
})
},
{
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index edb88e0e7..8da95337f 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -9,7 +9,7 @@
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
- "source.fixAll": true
+ "source.fixAll": "explicit"
},
"typescript.preferences.quoteStyle": "single",
diff --git a/frontend/build/webpack.config.js b/frontend/build/webpack.config.js
index e0ec27c27..0d0364950 100644
--- a/frontend/build/webpack.config.js
+++ b/frontend/build/webpack.config.js
@@ -26,6 +26,7 @@ module.exports = (env) => {
const config = {
mode: isProduction ? 'production' : 'development',
devtool: isProduction ? 'source-map' : 'eval-source-map',
+ target: 'web',
stats: {
children: false
@@ -51,8 +52,7 @@ module.exports = (env) => {
'node_modules'
],
alias: {
- jquery: 'jquery/dist/jquery.min',
- 'react-middle-truncate': 'react-middle-truncate/lib/react-middle-truncate'
+ jquery: 'jquery/dist/jquery.min'
},
fallback: {
buffer: false,
@@ -67,7 +67,7 @@ module.exports = (env) => {
output: {
path: distFolder,
publicPath: '/',
- filename: '[name]-[contenthash].js',
+ filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
sourceMapFilename: '[file].map'
},
@@ -92,7 +92,7 @@ module.exports = (env) => {
new MiniCssExtractPlugin({
filename: 'Content/styles.css',
- chunkFilename: 'Content/[id]-[chunkhash].css'
+ chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
}),
new HtmlWebpackPlugin({
@@ -134,6 +134,12 @@ module.exports = (env) => {
{
source: 'frontend/src/Content/robots.txt',
destination: path.join(distFolder, 'Content/robots.txt')
+ },
+
+ // manifest.json and browserconfig.xml
+ {
+ source: 'frontend/src/Content/*.(json|xml)',
+ destination: path.join(distFolder, 'Content')
}
]
}
@@ -181,7 +187,7 @@ module.exports = (env) => {
loose: true,
debug: false,
useBuiltIns: 'entry',
- corejs: 3
+ corejs: '3.39'
}
]
]
@@ -202,7 +208,7 @@ module.exports = (env) => {
options: {
importLoaders: 1,
modules: {
- localIdentName: '[name]/[local]/[hash:base64:5]'
+ localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
}
}
},
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index f657adf28..89db00f8c 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -16,6 +16,7 @@ const mixinsFiles = [
module.exports = {
plugins: [
+ 'autoprefixer',
['postcss-mixins', {
mixinsFiles
}],
diff --git a/frontend/src/Activity/Blocklist/Blocklist.js b/frontend/src/Activity/Blocklist/Blocklist.js
deleted file mode 100644
index 797aa5175..000000000
--- a/frontend/src/Activity/Blocklist/Blocklist.js
+++ /dev/null
@@ -1,261 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import TablePager from 'Components/Table/TablePager';
-import { align, icons, kinds } from 'Helpers/Props';
-import getRemovedItems from 'Utilities/Object/getRemovedItems';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
-import translate from 'Utilities/String/translate';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
-import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
-import selectAll from 'Utilities/Table/selectAll';
-import toggleSelected from 'Utilities/Table/toggleSelected';
-import BlocklistRowConnector from './BlocklistRowConnector';
-
-class Blocklist extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- allSelected: false,
- allUnselected: false,
- lastToggled: null,
- selectedState: {},
- isConfirmRemoveModalOpen: false,
- isConfirmClearModalOpen: false,
- items: props.items
- };
- }
-
- componentDidUpdate(prevProps) {
- const {
- items
- } = this.props;
-
- if (hasDifferentItems(prevProps.items, items)) {
- this.setState((state) => {
- return {
- ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
- items
- };
- });
-
- return;
- }
- }
-
- //
- // Control
-
- getSelectedIds = () => {
- return getSelectedIds(this.state.selectedState);
- };
-
- //
- // Listeners
-
- onSelectAllChange = ({ value }) => {
- this.setState(selectAll(this.state.selectedState, value));
- };
-
- onSelectedChange = ({ id, value, shiftKey = false }) => {
- this.setState((state) => {
- return toggleSelected(state, this.props.items, id, value, shiftKey);
- });
- };
-
- onRemoveSelectedPress = () => {
- this.setState({ isConfirmRemoveModalOpen: true });
- };
-
- onRemoveSelectedConfirmed = () => {
- this.props.onRemoveSelected(this.getSelectedIds());
- this.setState({ isConfirmRemoveModalOpen: false });
- };
-
- onConfirmRemoveModalClose = () => {
- this.setState({ isConfirmRemoveModalOpen: false });
- };
-
- onClearBlocklistPress = () => {
- this.setState({ isConfirmClearModalOpen: true });
- };
-
- onClearBlocklistConfirmed = () => {
- this.props.onClearBlocklistPress();
- this.setState({ isConfirmClearModalOpen: false });
- };
-
- onConfirmClearModalClose = () => {
- this.setState({ isConfirmClearModalOpen: false });
- };
-
- //
- // Render
-
- render() {
- const {
- isFetching,
- isPopulated,
- error,
- items,
- columns,
- totalRecords,
- isRemoving,
- isClearingBlocklistExecuting,
- ...otherProps
- } = this.props;
-
- const {
- allSelected,
- allUnselected,
- selectedState,
- isConfirmRemoveModalOpen,
- isConfirmClearModalOpen
- } = this.state;
-
- const selectedIds = this.getSelectedIds();
-
- return (
-