import PropTypes from 'prop-types'; import React from 'react'; import { inputTypes } from 'Helpers/Props'; import Link from 'Components/Link/Link'; import AutoCompleteInput from './AutoCompleteInput'; import CaptchaInputConnector from './CaptchaInputConnector'; import CheckInput from './CheckInput'; import DeviceInputConnector from './DeviceInputConnector'; import KeyValueListInput from './KeyValueListInput'; import MonitorAlbumsSelectInput from './MonitorAlbumsSelectInput'; import NumberInput from './NumberInput'; import OAuthInputConnector from './OAuthInputConnector'; import PasswordInput from './PasswordInput'; import PathInputConnector from './PathInputConnector'; import QualityProfileSelectInputConnector from './QualityProfileSelectInputConnector'; import LanguageProfileSelectInputConnector from './LanguageProfileSelectInputConnector'; import MetadataProfileSelectInputConnector from './MetadataProfileSelectInputConnector'; import AlbumReleaseSelectInputConnector from './AlbumReleaseSelectInputConnector'; import RootFolderSelectInputConnector from './RootFolderSelectInputConnector'; import SeriesTypeSelectInput from './SeriesTypeSelectInput'; import SelectInput from './SelectInput'; import TagInputConnector from './TagInputConnector'; import TextTagInputConnector from './TextTagInputConnector'; import TextInput from './TextInput'; import FormInputHelpText from './FormInputHelpText'; 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_ALBUMS_SELECT: return MonitorAlbumsSelectInput; 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.LANGUAGE_PROFILE_SELECT: return LanguageProfileSelectInputConnector; case inputTypes.METADATA_PROFILE_SELECT: return MetadataProfileSelectInputConnector; case inputTypes.ALBUM_RELEASE_SELECT: return AlbumReleaseSelectInputConnector; case inputTypes.ROOT_FOLDER_SELECT: return RootFolderSelectInputConnector; case inputTypes.SELECT: return SelectInput; case inputTypes.SERIES_TYPE_SELECT: return SeriesTypeSelectInput; case inputTypes.TAG: return TagInputConnector; case inputTypes.TEXT_TAG: return TextTagInputConnector; 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 (