mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Fix issues with search url param
This commit is contained in:
parent
d6b8ce0f49
commit
bdecaa9930
8 changed files with 256 additions and 189 deletions
59
src/elements/emby-input/Input.tsx
Normal file
59
src/elements/emby-input/Input.tsx
Normal file
|
@ -0,0 +1,59 @@
|
|||
import React, { type DetailedHTMLProps, type InputHTMLAttributes, type FC, useState, useCallback } from 'react';
|
||||
|
||||
import './emby-input.scss';
|
||||
import classNames from 'classnames';
|
||||
|
||||
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;
|
Loading…
Add table
Add a link
Reference in a new issue