mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Update to React 18
This commit is contained in:
parent
b5d6e37fb3
commit
be891c3a98
36 changed files with 339 additions and 311 deletions
|
@ -1,8 +1,27 @@
|
|||
import escapeHTML from 'escape-html';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React, { type FC } from 'react';
|
||||
import globalize from '../scripts/globalize';
|
||||
|
||||
const createCheckBoxElement = ({ labelClassName, className, id, dataFilter, dataItemType, dataId, checkedAttribute, renderContent }: { labelClassName?: string, type?: string, className?: string, id?: string, dataFilter?: string, dataItemType?: string, dataId?: string, checkedAttribute?: string, renderContent?: string }) => ({
|
||||
const createCheckBoxElement = ({
|
||||
labelClassName,
|
||||
className,
|
||||
id,
|
||||
dataFilter,
|
||||
dataItemType,
|
||||
dataId,
|
||||
checkedAttribute,
|
||||
renderContent
|
||||
}: {
|
||||
labelClassName?: string;
|
||||
type?: string;
|
||||
className?: string;
|
||||
id?: string;
|
||||
dataFilter?: string;
|
||||
dataItemType?: string;
|
||||
dataId?: string;
|
||||
checkedAttribute?: string;
|
||||
renderContent?: string;
|
||||
}) => ({
|
||||
__html: `<label ${labelClassName}>
|
||||
<input
|
||||
is="emby-checkbox"
|
||||
|
@ -18,20 +37,31 @@ const createCheckBoxElement = ({ labelClassName, className, id, dataFilter, data
|
|||
</label>`
|
||||
});
|
||||
|
||||
type IProps = {
|
||||
interface CheckBoxElementProps {
|
||||
labelClassName?: string;
|
||||
className?: string;
|
||||
elementId?: string;
|
||||
dataFilter?: string;
|
||||
itemType?: string;
|
||||
itemId?: string;
|
||||
itemAppName?: string;
|
||||
itemId?: string | null;
|
||||
itemAppName?: string | null;
|
||||
itemCheckedAttribute?: string;
|
||||
itemName?: string
|
||||
title?: string
|
||||
};
|
||||
itemName?: string | null;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const CheckBoxElement: FunctionComponent<IProps> = ({ labelClassName, className, elementId, dataFilter, itemType, itemId, itemAppName, itemCheckedAttribute, itemName, title }: IProps) => {
|
||||
const CheckBoxElement: FC<CheckBoxElementProps> = ({
|
||||
labelClassName,
|
||||
className,
|
||||
elementId,
|
||||
dataFilter,
|
||||
itemType,
|
||||
itemId,
|
||||
itemAppName,
|
||||
itemCheckedAttribute,
|
||||
itemName,
|
||||
title
|
||||
}) => {
|
||||
const appName = itemAppName ? `- ${itemAppName}` : '';
|
||||
const renderContent = itemName ?
|
||||
`<span>${escapeHTML(itemName || '')} ${appName}</span>` :
|
||||
|
@ -41,13 +71,17 @@ const CheckBoxElement: FunctionComponent<IProps> = ({ labelClassName, className,
|
|||
<div
|
||||
className='sectioncheckbox'
|
||||
dangerouslySetInnerHTML={createCheckBoxElement({
|
||||
labelClassName: labelClassName ? `class='${labelClassName}'` : '',
|
||||
labelClassName: labelClassName ?
|
||||
`class='${labelClassName}'` :
|
||||
'',
|
||||
className: className,
|
||||
id: elementId ? `id='${elementId}'` : '',
|
||||
dataFilter: dataFilter ? `data-filter='${dataFilter}'` : '',
|
||||
dataItemType: itemType ? `data-itemtype='${itemType}'` : '',
|
||||
dataId: itemId ? `data-id='${itemId}'` : '',
|
||||
checkedAttribute: itemCheckedAttribute ? itemCheckedAttribute : '',
|
||||
checkedAttribute: itemCheckedAttribute ?
|
||||
itemCheckedAttribute :
|
||||
'',
|
||||
renderContent: renderContent
|
||||
})}
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue