Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)

4 files changed, 119 insertions, 257 deletions

diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
index 7e3965331..da1fffb71 100644
--- a/src/components/ui/ColorPickerInput.tsx
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -1,15 +1,25 @@
-import { ChangeEvent, Component, createRef, RefObject } from 'react';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  Component,
+  createRef,
+  RefObject,
+} from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { SliderPicker } from 'react-color';
+import { noop } from 'lodash';
 import { Field } from '../../@types/mobx-form.types';
 
 interface IProps {
   field: Field;
   className?: string;
   focus?: boolean;
+  onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
+// TODO - [TS DEBT] check if field can be spread instead of having it single field attribute in interface
+@observer
 class ColorPickerInput extends Component<IProps> {
   private inputElement: RefObject<HTMLInputElement> =
     createRef<HTMLInputElement>();
@@ -22,7 +32,9 @@ class ColorPickerInput extends Component<IProps> {
   }
 
   onChange(e: ChangeEvent<HTMLInputElement>) {
-    const { field } = this.props;
+    const { field, onChange = noop } = this.props;
+
+    onChange(e);
     if (field.onChange) {
       field.onChange(e);
     }
@@ -87,4 +99,4 @@ class ColorPickerInput extends Component<IProps> {
   }
 }
 
-export default observer(ColorPickerInput);
+export default ColorPickerInput;
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
deleted file mode 100644
index c22dc5838..000000000
--- a/src/components/ui/Input.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  Component,
-  createRef,
-  ReactElement,
-  RefObject,
-} from 'react';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { mdiEye, mdiEyeOff } from '@mdi/js';
-import { noop } from 'lodash';
-import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
-import Icon from './icon';
-import { Field } from '../../@types/mobx-form.types';
-
-const messages = defineMessages({
-  passwordToggle: {
-    id: 'settings.app.form.passwordToggle',
-    defaultMessage: 'Password toggle',
-  },
-});
-
-interface IProps extends WrappedComponentProps {
-  field: Field;
-  className?: string;
-  focus?: boolean;
-  showPasswordToggle?: boolean;
-  showLabel?: boolean;
-  scorePassword?: boolean;
-  prefix?: string;
-  suffix?: string;
-  placeholder?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-}
-
-interface IState {
-  showPassword: boolean;
-  passwordScore: number;
-}
-
-// Can this file be merged into the './input/index.tsx' file?
-@observer
-class Input extends Component<IProps, IState> {
-  private inputElement: RefObject<HTMLInputElement> =
-    createRef<HTMLInputElement>();
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      showPassword: false,
-      passwordScore: 0,
-    };
-  }
-
-  componentDidMount(): void {
-    const { focus = false } = this.props;
-    if (focus) {
-      this.focus();
-    }
-  }
-
-  onChange(e: ChangeEvent<HTMLInputElement>): void {
-    const { field, scorePassword, onChange = noop } = this.props;
-
-    if (field.onChange) {
-      onChange(e);
-      field.onChange(e);
-    }
-
-    if (scorePassword) {
-      this.setState({
-        passwordScore: scorePasswordFunc(field.value as string),
-      });
-    }
-  }
-
-  focus() {
-    if (this.inputElement && this.inputElement.current) {
-      this.inputElement.current!.focus();
-    }
-  }
-
-  render(): ReactElement {
-    const {
-      field,
-      className = null,
-      showPasswordToggle = false,
-      showLabel = true,
-      scorePassword = false,
-      prefix = '',
-      suffix = '',
-      intl,
-    } = this.props;
-
-    const { passwordScore } = this.state;
-
-    let { type } = field;
-    if (type === 'password' && this.state.showPassword) {
-      type = 'text';
-    }
-
-    return (
-      <div
-        className={classnames({
-          'franz-form__field': true,
-          'has-error': field.error,
-          [`${className}`]: className,
-        })}
-      >
-        <div className="franz-form__input-wrapper">
-          {prefix && <span className="franz-form__input-prefix">{prefix}</span>}
-          <input
-            id={field.id}
-            type={type}
-            className="franz-form__input"
-            name={field.name}
-            value={field.value}
-            placeholder={field.placeholder}
-            onChange={e => this.onChange(e)}
-            onBlur={field.onBlur}
-            onFocus={field.onFocus}
-            ref={this.inputElement}
-            disabled={field.disabled}
-          />
-          {suffix && <span className="franz-form__input-suffix">{suffix}</span>}
-          {showPasswordToggle && (
-            <button
-              type="button"
-              className={classnames({
-                'franz-form__input-modifier': true,
-              })}
-              onClick={() =>
-                this.setState(prevState => ({
-                  showPassword: !prevState.showPassword,
-                }))
-              }
-              tabIndex={-1}
-              aria-label={intl.formatMessage(messages.passwordToggle)}
-            >
-              <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} />
-            </button>
-          )}
-          {scorePassword && (
-            <div className="franz-form__password-score">
-              {/* <progress value={this.state.passwordScore} max="100" /> */}
-              <meter
-                value={passwordScore < 5 ? 5 : passwordScore}
-                low={30}
-                high={75}
-                optimum={100}
-                max={100}
-              />
-            </div>
-          )}
-        </div>
-        {field.label && showLabel && (
-          <label className="franz-form__label" htmlFor={field.name}>
-            {field.label}
-          </label>
-        )}
-        {field.error && <div className="franz-form__error">{field.error}</div>}
-      </div>
-    );
-  }
-}
-
-export default injectIntl(Input);
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index 2a36d7aa9..cb26c0ea4 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -1,5 +1,4 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
-import Icon from '@mdi/react';
 import classnames from 'classnames';
 import {
   Component,
@@ -7,9 +6,13 @@ import {
   InputHTMLAttributes,
   ReactElement,
   RefObject,
+  KeyboardEvent,
 } from 'react';
-import injectSheet, { WithStylesProps } from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import Icon from '../icon';
 import { IFormField } from '../typings/generic';
 import Error from '../error';
 import Label from '../label';
@@ -17,6 +20,12 @@ import Wrapper from '../wrapper';
 import { scorePasswordFunc } from './scorePassword';
 import styles from './styles';
 
+const messages = defineMessages({
+  passwordToggle: {
+    id: 'settings.app.form.passwordToggle',
+    defaultMessage: 'Password toggle',
+  },
+});
 interface IData {
   [index: string]: string;
 }
@@ -24,7 +33,8 @@ interface IData {
 interface IProps
   extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
-    WithStylesProps<typeof styles> {
+    WithStylesProps<typeof styles>,
+    WrappedComponentProps {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -40,8 +50,10 @@ interface IState {
   passwordScore: number;
 }
 
-class InputComponent extends Component<IProps, IState> {
-  private inputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>();
+@observer
+class Input extends Component<IProps, IState> {
+  private inputElement: RefObject<HTMLInputElement> =
+    createRef<HTMLInputElement>();
 
   constructor(props: IProps) {
     super(props);
@@ -53,36 +65,40 @@ class InputComponent extends Component<IProps, IState> {
   }
 
   componentDidMount(): void {
-    const { focus, data = {} } = this.props;
+    const { focus = false, data = {} } = this.props;
 
-    if (this.inputRef && this.inputRef.current) {
+    if (this.inputElement && this.inputElement.current) {
       if (focus) {
-        this.inputRef.current.focus();
+        this.inputElement.current.focus();
       }
 
-      for (const key of Object.keys(data))
-        this.inputRef.current!.dataset[key] = data[key];
+      for (const key of Object.keys(data)) {
+        this.inputElement.current.dataset[key] = data[key];
+      }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    const { scorePassword, onChange } = this.props;
+    const { scorePassword, onChange = noop } = this.props;
 
-    if (onChange) {
-      onChange(e);
-    }
+    onChange(e);
 
-    if (this.inputRef && this.inputRef.current && scorePassword) {
+    if (scorePassword) {
+      console.log(
+        '--->',
+        e.target.value,
+        scorePasswordFunc(e.target.value as string),
+      );
       this.setState({
-        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+        passwordScore: scorePasswordFunc(e.target.value),
       });
     }
   }
 
-  onInputKeyPress(e: React.KeyboardEvent): void {
+  onInputKeyPress(e: KeyboardEvent<HTMLInputElement>): void {
     if (e.key === 'Enter') {
-      const { onEnterKey } = this.props;
-      onEnterKey && onEnterKey();
+      const { onEnterKey = noop } = this.props;
+      onEnterKey();
     }
   }
 
@@ -113,10 +129,9 @@ class InputComponent extends Component<IProps, IState> {
       type = 'text',
       disabled = false,
       readOnly,
+      intl,
     } = this.props;
-
     const { showPassword, passwordScore } = this.state;
-
     const inputType = type === 'password' && showPassword ? 'text' : type;
 
     return (
@@ -125,79 +140,85 @@ class InputComponent extends Component<IProps, IState> {
         identifier="franz-input"
         noMargin={noMargin}
       >
-        <Label
-          title={label}
-          showLabel={showLabel}
-          htmlFor={id}
-          className={classes.label}
-          isRequired={required}
+        {label && showLabel && (
+          <Label
+            title={label}
+            showLabel={showLabel}
+            htmlFor={id}
+            className={classes.label}
+            isRequired={required}
+          />
+        )}
+        <div
+          className={classnames({
+            [`${inputClassName}`]: inputClassName,
+            // [`${classes.hasPasswordScore}`]: scorePassword,
+            [`${classes.wrapper}`]: true,
+            [`${classes.disabled}`]: disabled,
+            [`${classes.hasError}`]: error,
+          })}
         >
+          {prefix && <span className={classes.prefix}>{prefix}</span>}
+          <input
+            id={id}
+            type={inputType}
+            name={name}
+            value={value as string}
+            placeholder={placeholder}
+            spellCheck={spellCheck}
+            className={classes.input}
+            ref={this.inputElement}
+            onChange={this.onChange.bind(this)}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            disabled={disabled}
+            onKeyPress={this.onInputKeyPress.bind(this)}
+            min={min}
+            max={max}
+            step={step}
+            readOnly={readOnly}
+          />
+
+          {suffix && <span className={classes.suffix}>{suffix}</span>}
+
+          {showPasswordToggle && (
+            <button
+              type="button"
+              className={classnames({
+                'franz-form__input-modifier': true,
+              })}
+              onClick={() =>
+                this.setState(prevState => ({
+                  showPassword: !prevState.showPassword,
+                }))
+              }
+              tabIndex={-1}
+              aria-label={intl.formatMessage(messages.passwordToggle)}
+            >
+              <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} />
+            </button>
+          )}
+        </div>
+        {scorePassword && (
           <div
             className={classnames({
-              [`${inputClassName}`]: inputClassName,
-              [`${classes.hasPasswordScore}`]: scorePassword,
-              [`${classes.wrapper}`]: true,
-              [`${classes.disabled}`]: disabled,
+              [`${classes.passwordScore}`]: true,
               [`${classes.hasError}`]: error,
             })}
           >
-            {prefix && <span className={classes.prefix}>{prefix}</span>}
-            <input
-              id={id}
-              type={inputType}
-              name={name}
-              value={value as string}
-              placeholder={placeholder}
-              spellCheck={spellCheck}
-              className={classes.input}
-              ref={this.inputRef}
-              onChange={this.onChange.bind(this)}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              disabled={disabled}
-              onKeyPress={this.onInputKeyPress.bind(this)}
-              min={min}
-              max={max}
-              step={step}
-              readOnly={readOnly}
+            <meter
+              value={passwordScore < 5 ? 5 : passwordScore}
+              low={30}
+              high={75}
+              optimum={100}
+              max={100}
             />
-            {suffix && <span className={classes.suffix}>{suffix}</span>}
-            {showPasswordToggle && (
-              <button
-                type="button"
-                className={classes.formModifier}
-                onClick={() =>
-                  this.setState(prevState => ({
-                    showPassword: !prevState.showPassword,
-                  }))
-                }
-                tabIndex={-1}
-              >
-                <Icon path={!showPassword ? mdiEye : mdiEyeOff} />
-              </button>
-            )}
           </div>
-          {scorePassword && (
-            <div
-              className={classnames({
-                [`${classes.passwordScore}`]: true,
-                [`${classes.hasError}`]: error,
-              })}
-            >
-              <meter
-                value={passwordScore < 5 ? 5 : passwordScore}
-                low={30}
-                high={75}
-                optimum={100}
-                max={100}
-              />
-            </div>
-          )}
-        </Label>
+        )}
         {error && <Error message={error} />}
       </Wrapper>
     );
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(InputComponent);
+export default injectIntl(withStyles(styles, { injectTheme: true })(Input));
diff --git a/src/components/ui/input/styles.ts b/src/components/ui/input/styles.ts
index 04c1b3991..ebae0e40d 100644
--- a/src/components/ui/input/styles.ts
+++ b/src/components/ui/input/styles.ts
@@ -49,7 +49,6 @@ export default (theme: Theme) => ({
   },
   passwordScore: {
     background: theme.inputScorePasswordBackground,
-    border: theme.inputBorder,
     borderTopWidth: 0,
     borderBottomLeftRadius: theme.borderRadiusSmall,
     borderBottomRightRadius: theme.borderRadiusSmall,