Mark McDowall
2 months ago
parent
24173139f0
commit
ac7ac34cc2
@ -1,155 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import FormGroup from 'Components/Form/FormGroup';
|
||||
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||
import FormLabel from 'Components/Form/FormLabel';
|
||||
import { inputTypes } from 'Helpers/Props';
|
||||
|
||||
function getType({ type, selectOptionsProviderAction }) {
|
||||
switch (type) {
|
||||
case 'captcha':
|
||||
return inputTypes.CAPTCHA;
|
||||
case 'checkbox':
|
||||
return inputTypes.CHECK;
|
||||
case 'device':
|
||||
return inputTypes.DEVICE;
|
||||
case 'keyValueList':
|
||||
return inputTypes.KEY_VALUE_LIST;
|
||||
case 'password':
|
||||
return inputTypes.PASSWORD;
|
||||
case 'number':
|
||||
return inputTypes.NUMBER;
|
||||
case 'path':
|
||||
return inputTypes.PATH;
|
||||
case 'filePath':
|
||||
return inputTypes.PATH;
|
||||
case 'select':
|
||||
if (selectOptionsProviderAction) {
|
||||
return inputTypes.DYNAMIC_SELECT;
|
||||
}
|
||||
return inputTypes.SELECT;
|
||||
case 'seriesTag':
|
||||
return inputTypes.SERIES_TAG;
|
||||
case 'tag':
|
||||
return inputTypes.TEXT_TAG;
|
||||
case 'tagSelect':
|
||||
return inputTypes.TAG_SELECT;
|
||||
case 'textbox':
|
||||
return inputTypes.TEXT;
|
||||
case 'oAuth':
|
||||
return inputTypes.OAUTH;
|
||||
case 'rootFolder':
|
||||
return inputTypes.ROOT_FOLDER_SELECT;
|
||||
case 'qualityProfile':
|
||||
return inputTypes.QUALITY_PROFILE_SELECT;
|
||||
default:
|
||||
return inputTypes.TEXT;
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectValues(selectOptions) {
|
||||
if (!selectOptions) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _.reduce(selectOptions, (result, option) => {
|
||||
result.push({
|
||||
key: option.value,
|
||||
value: option.name,
|
||||
hint: option.hint
|
||||
});
|
||||
|
||||
return result;
|
||||
}, []);
|
||||
}
|
||||
|
||||
function ProviderFieldFormGroup(props) {
|
||||
const {
|
||||
advancedSettings,
|
||||
name,
|
||||
label,
|
||||
helpText,
|
||||
helpTextWarning,
|
||||
helpLink,
|
||||
placeholder,
|
||||
value,
|
||||
type,
|
||||
advanced,
|
||||
hidden,
|
||||
pending,
|
||||
errors,
|
||||
warnings,
|
||||
selectOptions,
|
||||
onChange,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
if (
|
||||
hidden === 'hidden' ||
|
||||
(hidden === 'hiddenIfNotSet' && !value)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<FormGroup
|
||||
advancedSettings={advancedSettings}
|
||||
isAdvanced={advanced}
|
||||
>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={getType(props)}
|
||||
name={name}
|
||||
label={label}
|
||||
helpText={helpText}
|
||||
helpTextWarning={helpTextWarning}
|
||||
helpLink={helpLink}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
values={getSelectValues(selectOptions)}
|
||||
errors={errors}
|
||||
warnings={warnings}
|
||||
pending={pending}
|
||||
includeFiles={type === 'filePath' ? true : undefined}
|
||||
onChange={onChange}
|
||||
{...otherProps}
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
}
|
||||
|
||||
const selectOptionsShape = {
|
||||
name: PropTypes.string.isRequired,
|
||||
value: PropTypes.number.isRequired,
|
||||
hint: PropTypes.string
|
||||
};
|
||||
|
||||
ProviderFieldFormGroup.propTypes = {
|
||||
advancedSettings: PropTypes.bool.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
helpText: PropTypes.string,
|
||||
helpTextWarning: PropTypes.string,
|
||||
helpLink: PropTypes.string,
|
||||
placeholder: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
type: PropTypes.string.isRequired,
|
||||
advanced: PropTypes.bool.isRequired,
|
||||
hidden: PropTypes.string,
|
||||
isDisabled: PropTypes.bool,
|
||||
provider: PropTypes.string,
|
||||
pending: PropTypes.bool.isRequired,
|
||||
errors: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
warnings: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
selectOptions: PropTypes.arrayOf(PropTypes.shape(selectOptionsShape)),
|
||||
selectOptionsProviderAction: PropTypes.string,
|
||||
onChange: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
ProviderFieldFormGroup.defaultProps = {
|
||||
advancedSettings: false
|
||||
};
|
||||
|
||||
export default ProviderFieldFormGroup;
|
||||
@ -0,0 +1,136 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import FormGroup from 'Components/Form/FormGroup';
|
||||
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||
import FormLabel from 'Components/Form/FormLabel';
|
||||
import { FieldSelectOption } from 'typings/Field';
|
||||
import { InputChanged } from 'typings/inputs';
|
||||
import { Failure } from 'typings/pending';
|
||||
|
||||
interface ProviderFieldFormGroupProps<T> {
|
||||
advancedSettings: boolean;
|
||||
name: string;
|
||||
label: string;
|
||||
helpText?: string;
|
||||
helpTextWarning?: string;
|
||||
helpLink?: string;
|
||||
placeholder?: string;
|
||||
value?: T;
|
||||
type: string;
|
||||
advanced: boolean;
|
||||
hidden?: string;
|
||||
isDisabled?: boolean;
|
||||
provider?: string;
|
||||
pending: boolean;
|
||||
errors: Failure[];
|
||||
warnings: Failure[];
|
||||
selectOptions?: FieldSelectOption<T>[];
|
||||
selectOptionsProviderAction?: string;
|
||||
onChange: (change: InputChanged<T>) => void;
|
||||
}
|
||||
|
||||
function ProviderFieldFormGroup<T>({
|
||||
advancedSettings = false,
|
||||
name,
|
||||
label,
|
||||
helpText,
|
||||
helpTextWarning,
|
||||
helpLink,
|
||||
placeholder,
|
||||
value,
|
||||
type: providerType,
|
||||
advanced,
|
||||
hidden,
|
||||
pending,
|
||||
errors,
|
||||
warnings,
|
||||
selectOptions,
|
||||
selectOptionsProviderAction,
|
||||
onChange,
|
||||
...otherProps
|
||||
}: ProviderFieldFormGroupProps<T>) {
|
||||
const type = useMemo(() => {
|
||||
switch (providerType) {
|
||||
case 'captcha':
|
||||
return 'captcha';
|
||||
case 'checkbox':
|
||||
return 'check';
|
||||
case 'device':
|
||||
return 'device';
|
||||
case 'keyValueList':
|
||||
return 'keyValueList';
|
||||
case 'password':
|
||||
return 'password';
|
||||
case 'number':
|
||||
return 'number';
|
||||
case 'path':
|
||||
return 'path';
|
||||
case 'filePath':
|
||||
return 'path';
|
||||
case 'select':
|
||||
if (selectOptionsProviderAction) {
|
||||
return 'dynamicSelect';
|
||||
}
|
||||
return 'select';
|
||||
case 'seriesTag':
|
||||
return 'seriesTag';
|
||||
case 'tag':
|
||||
return 'textTag';
|
||||
case 'tagSelect':
|
||||
return 'tagSelect';
|
||||
case 'textbox':
|
||||
return 'text';
|
||||
case 'oAuth':
|
||||
return 'oauth';
|
||||
case 'rootFolder':
|
||||
return 'rootFolderSelect';
|
||||
case 'qualityProfile':
|
||||
return 'qualityProfileSelect';
|
||||
default:
|
||||
return 'text';
|
||||
}
|
||||
}, [providerType, selectOptionsProviderAction]);
|
||||
|
||||
const selectValues = useMemo(() => {
|
||||
if (!selectOptions) {
|
||||
return;
|
||||
}
|
||||
|
||||
return selectOptions.map((option) => {
|
||||
return {
|
||||
key: option.value,
|
||||
value: option.name,
|
||||
hint: option.hint,
|
||||
};
|
||||
});
|
||||
}, [selectOptions]);
|
||||
|
||||
if (hidden === 'hidden' || (hidden === 'hiddenIfNotSet' && !value)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<FormGroup advancedSettings={advancedSettings} isAdvanced={advanced}>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
|
||||
<FormInputGroup
|
||||
type={type}
|
||||
name={name}
|
||||
helpText={helpText}
|
||||
helpTextWarning={helpTextWarning}
|
||||
helpLink={helpLink}
|
||||
placeholder={placeholder}
|
||||
selectOptionsProviderAction={selectOptionsProviderAction}
|
||||
value={value}
|
||||
values={selectValues}
|
||||
errors={errors}
|
||||
warnings={warnings}
|
||||
pending={pending}
|
||||
includeFiles={providerType === 'filePath' ? true : undefined}
|
||||
onChange={onChange}
|
||||
{...otherProps}
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProviderFieldFormGroup;
|
||||
Loading…
Reference in new issue