Initial Commit Rework

frontend/src/Components/Form/FormInputGroup.js

@@ -0,0 +1,235 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, inputTypes } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import CaptchaInputConnector from './CaptchaInputConnector';
+import CheckInput from './CheckInput';
+import MonitorEpisodesSelectInput from './MonitorEpisodesSelectInput';
+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 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.CAPTCHA:
+      return CaptchaInputConnector;
+
+    case inputTypes.CHECK:
+      return CheckInput;
+
+    case inputTypes.MONITOR_EPISODES_SELECT:
+      return MonitorEpisodesSelectInput;
+
+    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.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,
+    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 (
+    <div className={containerClassName}>
+      <div className={className}>
+        <div className={styles.inputContainer}>
+          <InputComponent
+            className={inputClassName}
+            helpText={helpText}
+            helpTextWarning={helpTextWarning}
+            hasError={hasError}
+            hasWarning={hasWarning}
+            hasButton={hasButton}
+            {...otherProps}
+          />
+        </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}
+          title="Change has not been saved yet"
+          />
+          }
+        </div> */}
+      </div>
+
+      {
+        !checkInput && helpText &&
+          <FormInputHelpText
+            text={helpText}
+          />
+      }
+
+      {
+        !checkInput && helpTexts &&
+          <div>
+            {
+              helpTexts.map((text, index) => {
+                return (
+                  <FormInputHelpText
+                    key={index}
+                    text={text}
+                    isCheckInput={checkInput}
+                  />
+                );
+              })
+            }
+          </div>
+      }
+
+      {
+        !checkInput && helpTextWarning &&
+          <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}
+              linkTooltip={error.detailedMessage}
+              isError={true}
+              isCheckInput={checkInput}
+            />
+          );
+        })
+      }
+
+      {
+        warnings.map((warning, index) => {
+          return (
+            <FormInputHelpText
+              key={index}
+              text={warning.message}
+              link={warning.link}
+              linkTooltip={warning.detailedMessage}
+              isWarning={true}
+              isCheckInput={checkInput}
+            />
+          );
+        })
+      }
+    </div>
+  );
+}
+
+FormInputGroup.propTypes = {
+  className: PropTypes.string.isRequired,
+  containerClassName: PropTypes.string.isRequired,
+  inputClassName: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  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;