wjones/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use emby-input/Input instead of InputElement

Browse Source
This commit is contained in:
David Stensland
2024-02-25 15:45:18 -08:00
committed by Bill Thornton
parent 1c296630c7
commit cbb3658331
5 changed files with 51 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/dashboard/routes/users/add.tsx
+6 -6
View File
@@ -6,7 +6,7 @@ import globalize from '../../../../lib/globalize';
import loading from '../../../../components/loading/loading';
import toast from '../../../../components/toast/toast';
import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
import InputElement from '../../../../elements/InputElement';
import Input from '../../../../elements/emby-input/Input';
import ButtonElement from '../../../../elements/ButtonElement';
import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
import CheckBoxElement from '../../../../elements/CheckBoxElement';
@@ -194,18 +194,18 @@ const UserNew = () => {
<form className='newUserProfileForm'>
<div className='inputContainer'>
<InputElement
<Input
type='text'
id='txtUsername'
label='LabelName'
options={'required'}
label={globalize.translate('LabelName')}
required
/>
</div>
<div className='inputContainer'>
<InputElement
<Input
type='password'
id='txtPassword'
label='LabelPassword'
label={globalize.translate('LabelPassword')}
/>
</div>
<AccessContainer
src/apps/dashboard/routes/users/profile.tsx
+16 -13
View File
@@ -7,8 +7,8 @@ import Dashboard from '../../../../utils/dashboard';
import globalize from '../../../../lib/globalize';
import ButtonElement from '../../../../elements/ButtonElement';
import CheckBoxElement from '../../../../elements/CheckBoxElement';
import InputElement from '../../../../elements/InputElement';
import LinkButton from '../../../../elements/emby-button/LinkButton';
import Input from '../../../../elements/emby-input/Input';
import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
import loading from '../../../../components/loading/loading';
@@ -314,11 +314,11 @@ const UserEdit = () => {
</div>
</div>
<div id='fldUserName' className='inputContainer'>
<InputElement
<Input
type='text'
id='txtUserName'
label='LabelName'
options={'required'}
label={globalize.translate('LabelName')}
required
/>
</div>
<div className='selectContainer fldSelectLoginProvider hide'>
@@ -416,11 +416,14 @@ const UserEdit = () => {
<br />
<div className='verticalSection'>
<div className='inputContainer'>
<InputElement
<Input
type='number'
id='txtRemoteClientBitrateLimit'
label='LabelRemoteClientBitrateLimit'
options={'inputMode="decimal" pattern="[0-9]*(.[0-9]+)?" min="{0}" step=".25"'}
label={globalize.translate('LabelRemoteClientBitrateLimit')}
inputMode='decimal'
pattern='[0-9]*(.[0-9]+)?'
min='0'
step='.25'
/>
<div className='fieldDescription'>
{globalize.translate('LabelRemoteClientBitrateLimitHelp')}
@@ -517,11 +520,11 @@ const UserEdit = () => {
<br />
<div className='verticalSection'>
<div className='inputContainer' id='fldLoginAttemptsBeforeLockout'>
<InputElement
<Input
type='number'
id='txtLoginAttemptsBeforeLockout'
label='LabelUserLoginAttemptsBeforeLockout'
options={'min={-1} step={1}'}
label={globalize.translate('LabelUserLoginAttemptsBeforeLockout')}
min={-1} step={1}
/>
<div className='fieldDescription'>
{globalize.translate('OptionLoginAttemptsBeforeLockout')}
@@ -534,11 +537,11 @@ const UserEdit = () => {
<br />
<div className='verticalSection'>
<div className='inputContainer' id='fldMaxActiveSessions'>
<InputElement
<Input
type='number'
id='txtMaxActiveSessions'
label='LabelUserMaxActiveSessions'
options={'min={0} step={1}'}
label={globalize.translate('LabelUserMaxActiveSessions')}
min={0} step={1}
/>
<div className='fieldDescription'>
{globalize.translate('OptionMaxActiveSessions')}
src/apps/stable/routes/quickConnect/index.tsx
+19 -16
View File
@@ -1,10 +1,10 @@
import { getQuickConnectApi } from '@jellyfin/sdk/lib/utils/api/quick-connect-api';
import React, { FC, FormEvent, useCallback, useMemo, useState } from 'react';
import React, { FC, FormEvent, useCallback, useState } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import Page from 'components/Page';
import globalize from 'lib/globalize';
import InputElement from 'elements/InputElement';
import Input from 'elements/emby-input/Input';
import ButtonElement from 'elements/ButtonElement';
import { useApi } from 'hooks/useApi';
@@ -13,14 +13,12 @@ import './quickConnect.scss';
const QuickConnectPage: FC = () => {
const { api, user } = useApi();
const [ searchParams ] = useSearchParams();
// eslint-disable-next-line react-hooks/exhaustive-deps
const initialValue = useMemo(() => searchParams.get('code') ?? '', []);
const [ code, setCode ] = useState(initialValue);
const [ code, setCode ] = useState(searchParams.get('code') ?? '');
const [ error, setError ] = useState<string>();
const [ success, setSuccess ] = useState(false);
const onCodeChange = useCallback((value: string) => {
setCode(value);
const onCodeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setCode(event.currentTarget.value);
}, []);
const onSubmitCode = useCallback((e: FormEvent<HTMLFormElement>) => {
@@ -90,15 +88,20 @@ const QuickConnectPage: FC = () => {
</div>
) : (
<>
<InputElement
containerClassName='inputContainer'
initialValue={initialValue}
onChange={onCodeChange}
id='txtQuickConnectCode'
label='LabelQuickConnectCode'
type='text'
options="inputmode='numeric' pattern='[0-9\s]*' minlength='6' required autocomplete='off'"
/>
<div className='inputContainer'>
<Input
value={code}
onChange={onCodeChange}
id='txtQuickConnectCode'
label={globalize.translate('LabelQuickConnectCode')}
type='text'
inputMode='numeric'
pattern='[0-9\s]*'
minLength={6}
required
autoComplete='off'
/>
</div>
<ButtonElement
type='submit'
className='raised button-submit block'
src/components/dashboard/users/UserPasswordForm.tsx
+10 -10
View File
@@ -6,7 +6,7 @@ import confirm from '../../confirm/confirm';
import loading from '../../loading/loading';
import toast from '../../toast/toast';
import ButtonElement from '../../../elements/ButtonElement';
import InputElement from '../../../elements/InputElement';
import Input from '../../../elements/emby-input/Input';
type IProps = {
userId: string | null;
@@ -158,27 +158,27 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
>
<div className='detailSection'>
<div id='fldCurrentPassword' className='inputContainer hide'>
<InputElement
<Input
type='password'
id='txtCurrentPassword'
label='LabelCurrentPassword'
options={'autoComplete="off"'}
label={globalize.translate('LabelCurrentPassword')}
autoComplete='off'
/>
</div>
<div className='inputContainer'>
<InputElement
<Input
type='password'
id='txtNewPassword'
label='LabelNewPassword'
options={'autoComplete="off"'}
label={globalize.translate('LabelNewPassword')}
autoComplete='off'
/>
</div>
<div className='inputContainer'>
<InputElement
<Input
type='password'
id='txtNewPasswordConfirm'
label='LabelNewPasswordConfirm'
options={'autoComplete="off"'}
label={globalize.translate('LabelNewPasswordConfirm')}
autoComplete='off'
/>
</div>
<br />
src/elements/InputElement.tsx
-74
View File
@@ -1,74 +0,0 @@
import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';
import globalize from 'lib/globalize';
interface CreateInputElementParams {
type?: string
id?: string
label?: string
initialValue?: string
options?: string
}
const createInputElement = ({ type, id, label, initialValue, options }: CreateInputElementParams) => ({
__html: `<input
is="emby-input"
type="${type}"
id="${id}"
label="${label}"
value="${initialValue}"
${options}
/>`
});
type InputElementProps = {
containerClassName?: string
onChange?: (value: string) => void
} & CreateInputElementParams;
const InputElement: FC<InputElementProps> = ({
containerClassName,
initialValue,
onChange = () => { /* no-op */ },
type,
id,
label,
options = ''
}) => {
const container = useRef<HTMLDivElement>(null);
// NOTE: We need to memoize the input html because any re-render will break the webcomponent
const inputHtml = useMemo(() => (
createInputElement({
type,
id,
label: globalize.translate(label),
initialValue,
options
})
// eslint-disable-next-line react-hooks/exhaustive-deps
), []);
const onInput = useCallback((e: Event) => {
onChange((e.target as HTMLInputElement).value);
}, [ onChange ]);
useEffect(() => {
const inputElement = container?.current?.querySelector<HTMLInputElement>('input');
inputElement?.addEventListener('input', onInput);
return () => {
inputElement?.removeEventListener('input', onInput);
};
}, [ container, onInput ]);
return (
<div
ref={container}
className={containerClassName}
dangerouslySetInnerHTML={inputHtml}
/>
);
};
export default InputElement;