refactor: DecoratedInput and add DecoratedPasswordInput (#953)

app/assets/javascripts/components/DecoratedInput.tsx

@@ -1,70 +1,98 @@
-import { FunctionalComponent, ComponentChild } from 'preact';
-import { HtmlInputTypes } from '@/enums';
+import { FunctionalComponent, ComponentChild, Ref } from 'preact';
+import { forwardRef } from 'preact/compat';
 
-interface Props {
-  type?: HtmlInputTypes;
+export type DecoratedInputProps = {
+  type?: 'text' | 'email' | 'password';
   className?: string;
   disabled?: boolean;
   left?: ComponentChild[];
   right?: ComponentChild[];
-  text?: string;
+  value?: string;
   placeholder?: string;
   onChange?: (text: string) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onKeyDown?: (event: KeyboardEvent) => void;
   autocomplete?: boolean;
-}
+};
+
+const getClassNames = (
+  hasLeftDecorations: boolean,
+  hasRightDecorations: boolean
+) => {
+  return {
+    container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
+      !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
+    }`,
+    input: `w-full border-0 focus:shadow-none ${
+      !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
+    } ${hasRightDecorations ? 'pr-2' : ''}`,
+    disabled: 'bg-grey-5 cursor-not-allowed',
+  };
+};
 
 /**
  * Input that can be decorated on the left and right side
  */
-export const DecoratedInput: FunctionalComponent<Props> = ({
-  type = 'text',
-  className = '',
-  disabled = false,
-  left,
-  right,
-  text,
-  placeholder = '',
-  onChange,
-  autocomplete = false,
-}) => {
-  const baseClasses =
-    'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast';
-  const stateClasses = disabled
-    ? 'no-border'
-    : 'border-solid border-1 border-main';
-  const classes = `${baseClasses} ${stateClasses} ${className}`;
+export const DecoratedInput: FunctionalComponent<DecoratedInputProps> =
+  forwardRef(
+    (
+      {
+        type = 'text',
+        className = '',
+        disabled = false,
+        left,
+        right,
+        value,
+        placeholder = '',
+        onChange,
+        onFocus,
+        onKeyDown,
+        autocomplete = false,
+      }: DecoratedInputProps,
+      ref: Ref<HTMLInputElement>
+    ) => {
+      const hasLeftDecorations = Boolean(left?.length);
+      const hasRightDecorations = Boolean(right?.length);
+      const classNames = getClassNames(hasLeftDecorations, hasRightDecorations);
 
-  const inputBaseClasses =
-    'w-full no-border color-text focus:shadow-none bg-contrast';
-  const inputStateClasses = disabled ? 'overflow-ellipsis' : '';
-  return (
-    <div className={`${classes} focus-within:ring-info`}>
-      {left?.map((leftChild) => (
-        <>
-          {leftChild}
-          <div className="min-w-2 min-h-1" />
-        </>
-      ))}
-      <div className="flex-grow">
-        <input
-          type={type}
-          className={`${inputBaseClasses} ${inputStateClasses}`}
-          disabled={disabled}
-          value={text}
-          placeholder={placeholder}
-          onChange={(e) =>
-            onChange && onChange((e.target as HTMLInputElement).value)
-          }
-          data-lpignore={type !== 'password' ? true : false}
-          autocomplete={autocomplete ? 'on' : 'off'}
-        />
-      </div>
-      {right?.map((rightChild) => (
-        <>
-          <div className="min-w-3 min-h-1" />
-          {rightChild}
-        </>
-      ))}
-    </div>
+      return (
+        <div
+          className={`${classNames.container} ${
+            disabled ? classNames.disabled : ''
+          } ${className}`}
+        >
+          {left && (
+            <div className="flex items-center px-2 py-1.5">
+              {left.map((leftChild) => (
+                <>{leftChild}</>
+              ))}
+            </div>
+          )}
+          <input
+            type={type}
+            className={`${classNames.input} ${
+              disabled ? classNames.disabled : ''
+            }`}
+            disabled={disabled}
+            value={value}
+            placeholder={placeholder}
+            onChange={(e) =>
+              onChange && onChange((e.target as HTMLInputElement).value)
+            }
+            onFocus={onFocus}
+            onKeyDown={onKeyDown}
+            data-lpignore={type !== 'password' ? true : false}
+            autocomplete={autocomplete ? 'on' : 'off'}
+            ref={ref}
+          />
+          {right && (
+            <div className="flex items-center px-2 py-1.5">
+              {right.map((rightChild, index) => (
+                <div className={index > 0 ? 'ml-3' : ''}>{rightChild}</div>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    }
   );
-};