Merge branch 'master' into trickplay-new

src/elements/emby-input/Input.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import React, { type DetailedHTMLProps, type InputHTMLAttributes, type FC, useState, useCallback } from 'react';
+
+import './emby-input.scss';
+
+interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    id: string,
+    label?: string
+}
+
+const Input: FC<InputProps> = ({
+    id,
+    label,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+}) => {
+    const [ isFocused, setIsFocused ] = useState(false);
+
+    const onBlurInternal = useCallback(e => {
+        setIsFocused(false);
+        onBlur?.(e);
+    }, [ onBlur ]);
+
+    const onFocusInternal = useCallback(e => {
+        setIsFocused(true);
+        onFocus?.(e);
+    }, [ onFocus ]);
+
+    return (
+        <>
+            <label
+                htmlFor={id}
+                className={classNames(
+                    'inputLabel',
+                    {
+                        inputLabelUnfocused: !isFocused,
+                        inputLabelFocused: isFocused
+                    }
+                )}
+            >
+                {label}
+            </label>
+            <input
+                id={id}
+                className={classNames(
+                    'emby-input',
+                    className
+                )}
+                onBlur={onBlurInternal}
+                onFocus={onFocusInternal}
+                {...props}
+            />
+        </>
+    );
+};
+
+export default Input;