2017-09-04 02:20:56 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
|
|
|
import Link from 'Components/Link/Link';
|
2020-09-07 01:33:10 +00:00
|
|
|
import { inputTypes } from 'Helpers/Props';
|
|
|
|
import AlbumReleaseSelectInputConnector from './AlbumReleaseSelectInputConnector';
|
2019-02-23 22:39:11 +00:00
|
|
|
import AutoCompleteInput from './AutoCompleteInput';
|
2017-09-04 02:20:56 +00:00
|
|
|
import CaptchaInputConnector from './CaptchaInputConnector';
|
|
|
|
import CheckInput from './CheckInput';
|
2018-09-05 02:41:22 +00:00
|
|
|
import DeviceInputConnector from './DeviceInputConnector';
|
2020-09-07 01:33:10 +00:00
|
|
|
import EnhancedSelectInput from './EnhancedSelectInput';
|
2020-10-08 21:33:13 +00:00
|
|
|
import EnhancedSelectInputConnector from './EnhancedSelectInputConnector';
|
2020-09-07 01:33:10 +00:00
|
|
|
import FormInputHelpText from './FormInputHelpText';
|
2019-06-06 01:54:59 +00:00
|
|
|
import IndexerSelectInputConnector from './IndexerSelectInputConnector';
|
2019-02-23 22:39:11 +00:00
|
|
|
import KeyValueListInput from './KeyValueListInput';
|
2020-09-07 01:33:10 +00:00
|
|
|
import MetadataProfileSelectInputConnector from './MetadataProfileSelectInputConnector';
|
2017-09-08 03:09:52 +00:00
|
|
|
import MonitorAlbumsSelectInput from './MonitorAlbumsSelectInput';
|
2017-09-04 02:20:56 +00:00
|
|
|
import NumberInput from './NumberInput';
|
|
|
|
import OAuthInputConnector from './OAuthInputConnector';
|
|
|
|
import PasswordInput from './PasswordInput';
|
|
|
|
import PathInputConnector from './PathInputConnector';
|
2020-09-07 01:33:10 +00:00
|
|
|
import PlaylistInputConnector from './PlaylistInputConnector';
|
2017-09-04 02:20:56 +00:00
|
|
|
import QualityProfileSelectInputConnector from './QualityProfileSelectInputConnector';
|
|
|
|
import RootFolderSelectInputConnector from './RootFolderSelectInputConnector';
|
|
|
|
import SeriesTypeSelectInput from './SeriesTypeSelectInput';
|
|
|
|
import TagInputConnector from './TagInputConnector';
|
2020-01-07 04:31:33 +00:00
|
|
|
import TagSelectInputConnector from './TagSelectInputConnector';
|
2017-09-04 02:20:56 +00:00
|
|
|
import TextInput from './TextInput';
|
2020-09-07 01:33:10 +00:00
|
|
|
import TextTagInputConnector from './TextTagInputConnector';
|
2020-10-05 23:00:47 +00:00
|
|
|
import UMaskInput from './UMaskInput';
|
2017-09-04 02:20:56 +00:00
|
|
|
import styles from './FormInputGroup.css';
|
|
|
|
|
|
|
|
function getComponent(type) {
|
|
|
|
switch (type) {
|
2019-02-23 22:39:11 +00:00
|
|
|
case inputTypes.AUTO_COMPLETE:
|
|
|
|
return AutoCompleteInput;
|
|
|
|
|
2017-09-04 02:20:56 +00:00
|
|
|
case inputTypes.CAPTCHA:
|
|
|
|
return CaptchaInputConnector;
|
|
|
|
|
|
|
|
case inputTypes.CHECK:
|
|
|
|
return CheckInput;
|
|
|
|
|
2018-09-05 02:41:22 +00:00
|
|
|
case inputTypes.DEVICE:
|
|
|
|
return DeviceInputConnector;
|
|
|
|
|
2019-07-24 20:40:30 +00:00
|
|
|
case inputTypes.PLAYLIST:
|
|
|
|
return PlaylistInputConnector;
|
|
|
|
|
2019-02-23 22:39:11 +00:00
|
|
|
case inputTypes.KEY_VALUE_LIST:
|
|
|
|
return KeyValueListInput;
|
|
|
|
|
2017-09-08 03:09:52 +00:00
|
|
|
case inputTypes.MONITOR_ALBUMS_SELECT:
|
|
|
|
return MonitorAlbumsSelectInput;
|
2017-09-04 02:20:56 +00:00
|
|
|
|
|
|
|
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;
|
|
|
|
|
2017-11-26 03:51:37 +00:00
|
|
|
case inputTypes.METADATA_PROFILE_SELECT:
|
|
|
|
return MetadataProfileSelectInputConnector;
|
|
|
|
|
2018-01-18 02:28:47 +00:00
|
|
|
case inputTypes.ALBUM_RELEASE_SELECT:
|
|
|
|
return AlbumReleaseSelectInputConnector;
|
|
|
|
|
2019-06-06 01:54:59 +00:00
|
|
|
case inputTypes.INDEXER_SELECT:
|
|
|
|
return IndexerSelectInputConnector;
|
|
|
|
|
2017-09-04 02:20:56 +00:00
|
|
|
case inputTypes.ROOT_FOLDER_SELECT:
|
|
|
|
return RootFolderSelectInputConnector;
|
|
|
|
|
|
|
|
case inputTypes.SELECT:
|
2019-08-05 02:05:13 +00:00
|
|
|
return EnhancedSelectInput;
|
2017-09-04 02:20:56 +00:00
|
|
|
|
2020-10-08 21:33:13 +00:00
|
|
|
case inputTypes.DYNAMIC_SELECT:
|
|
|
|
return EnhancedSelectInputConnector;
|
|
|
|
|
2017-09-04 02:20:56 +00:00
|
|
|
case inputTypes.SERIES_TYPE_SELECT:
|
|
|
|
return SeriesTypeSelectInput;
|
|
|
|
|
|
|
|
case inputTypes.TAG:
|
|
|
|
return TagInputConnector;
|
|
|
|
|
|
|
|
case inputTypes.TEXT_TAG:
|
|
|
|
return TextTagInputConnector;
|
|
|
|
|
2020-10-05 23:00:47 +00:00
|
|
|
case inputTypes.UMASK:
|
|
|
|
return UMaskInput;
|
|
|
|
|
2020-01-07 04:31:33 +00:00
|
|
|
case inputTypes.TAG_SELECT:
|
|
|
|
return TagSelectInputConnector;
|
|
|
|
|
2017-09-04 02:20:56 +00:00
|
|
|
default:
|
|
|
|
return TextInput;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function FormInputGroup(props) {
|
|
|
|
const {
|
|
|
|
className,
|
|
|
|
containerClassName,
|
|
|
|
inputClassName,
|
|
|
|
type,
|
2018-08-08 00:57:15 +00:00
|
|
|
unit,
|
2017-09-04 02:20:56 +00:00
|
|
|
buttons,
|
|
|
|
helpText,
|
|
|
|
helpTexts,
|
|
|
|
helpTextWarning,
|
|
|
|
helpLink,
|
|
|
|
pending,
|
|
|
|
errors,
|
|
|
|
warnings,
|
|
|
|
...otherProps
|
2017-10-07 06:21:06 +00:00
|
|
|
} = props;
|
2017-09-04 02:20:56 +00:00
|
|
|
|
|
|
|
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 (
|
|
|
|
<div className={containerClassName}>
|
|
|
|
<div className={className}>
|
|
|
|
<div className={styles.inputContainer}>
|
|
|
|
<InputComponent
|
|
|
|
className={inputClassName}
|
|
|
|
helpText={helpText}
|
|
|
|
helpTextWarning={helpTextWarning}
|
|
|
|
hasError={hasError}
|
|
|
|
hasWarning={hasWarning}
|
|
|
|
hasButton={hasButton}
|
|
|
|
{...otherProps}
|
|
|
|
/>
|
2018-08-08 00:57:15 +00:00
|
|
|
|
|
|
|
{
|
|
|
|
unit &&
|
|
|
|
<div
|
|
|
|
className={
|
|
|
|
type === inputTypes.NUMBER ?
|
|
|
|
styles.inputUnitNumber :
|
|
|
|
styles.inputUnit
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{unit}
|
|
|
|
</div>
|
|
|
|
}
|
2017-09-04 02:20:56 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
{
|
|
|
|
buttonsArray.map((button, index) => {
|
|
|
|
return React.cloneElement(
|
|
|
|
button,
|
|
|
|
{
|
|
|
|
isLastButton: index === lastButtonIndex
|
|
|
|
}
|
|
|
|
);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
{/* <div className={styles.pendingChangesContainer}>
|
|
|
|
{
|
|
|
|
pending &&
|
|
|
|
<Icon
|
|
|
|
name={icons.UNSAVED_SETTING}
|
|
|
|
className={styles.pendingChangesIcon}
|
2021-10-03 15:01:09 +00:00
|
|
|
title={translate('ChangeHasNotBeenSavedYet')}
|
2017-09-04 02:20:56 +00:00
|
|
|
/>
|
|
|
|
}
|
|
|
|
</div> */}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{
|
|
|
|
!checkInput && helpText &&
|
|
|
|
<FormInputHelpText
|
|
|
|
text={helpText}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
!checkInput && helpTexts &&
|
|
|
|
<div>
|
|
|
|
{
|
|
|
|
helpTexts.map((text, index) => {
|
|
|
|
return (
|
|
|
|
<FormInputHelpText
|
|
|
|
key={index}
|
|
|
|
text={text}
|
|
|
|
isCheckInput={checkInput}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
2020-10-05 23:00:47 +00:00
|
|
|
(!checkInput || helpText) && helpTextWarning &&
|
2017-09-04 02:20:56 +00:00
|
|
|
<FormInputHelpText
|
|
|
|
text={helpTextWarning}
|
|
|
|
isWarning={true}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
helpLink &&
|
|
|
|
<Link
|
|
|
|
to={helpLink}
|
|
|
|
>
|
|
|
|
More Info
|
|
|
|
</Link>
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
errors.map((error, index) => {
|
|
|
|
return (
|
|
|
|
<FormInputHelpText
|
|
|
|
key={index}
|
|
|
|
text={error.message}
|
|
|
|
link={error.link}
|
2020-07-26 17:49:15 +00:00
|
|
|
tooltip={error.detailedMessage}
|
2017-09-04 02:20:56 +00:00
|
|
|
isError={true}
|
|
|
|
isCheckInput={checkInput}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
warnings.map((warning, index) => {
|
|
|
|
return (
|
|
|
|
<FormInputHelpText
|
|
|
|
key={index}
|
|
|
|
text={warning.message}
|
|
|
|
link={warning.link}
|
2020-07-26 17:49:15 +00:00
|
|
|
tooltip={warning.detailedMessage}
|
2017-09-04 02:20:56 +00:00
|
|
|
isWarning={true}
|
|
|
|
isCheckInput={checkInput}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
FormInputGroup.propTypes = {
|
|
|
|
className: PropTypes.string.isRequired,
|
|
|
|
containerClassName: PropTypes.string.isRequired,
|
|
|
|
inputClassName: PropTypes.string,
|
|
|
|
type: PropTypes.string.isRequired,
|
2018-08-08 00:57:15 +00:00
|
|
|
unit: PropTypes.string,
|
2017-09-04 02:20:56 +00:00
|
|
|
buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
|
|
|
helpText: PropTypes.string,
|
|
|
|
helpTexts: PropTypes.arrayOf(PropTypes.string),
|
|
|
|
helpTextWarning: PropTypes.string,
|
|
|
|
helpLink: PropTypes.string,
|
|
|
|
pending: PropTypes.bool,
|
|
|
|
errors: PropTypes.arrayOf(PropTypes.object),
|
|
|
|
warnings: PropTypes.arrayOf(PropTypes.object)
|
|
|
|
};
|
|
|
|
|
|
|
|
FormInputGroup.defaultProps = {
|
|
|
|
className: styles.inputGroup,
|
|
|
|
containerClassName: styles.inputGroupContainer,
|
|
|
|
type: inputTypes.TEXT,
|
|
|
|
buttons: [],
|
|
|
|
helpTexts: [],
|
|
|
|
errors: [],
|
|
|
|
warnings: []
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FormInputGroup;
|