move to src elements

src/elements/CheckBoxElement.tsx

@@ -0,0 +1,57 @@
+import escapeHTML from 'escape-html';
+import React, { FunctionComponent } 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 }) => ({
+    __html: `<label ${labelClassName}>
+        <input
+            is="emby-checkbox"
+            type="checkbox"
+            class="${className}"
+            ${id}
+            ${dataFilter}
+            ${dataItemType}
+            ${dataId}
+            ${checkedAttribute}
+        />
+        ${renderContent}
+    </label>`
+});
+
+type IProps = {
+    labelClassName?: string;
+    className?: string;
+    elementId?: string;
+    dataFilter?: string;
+    itemType?: string;
+    itemId?: string;
+    itemAppName?: string;
+    itemCheckedAttribute?: string;
+    itemName?: string
+    title?: string
+}
+
+const CheckBoxElement: FunctionComponent<IProps> = ({ labelClassName, className, elementId, dataFilter, itemType, itemId, itemAppName, itemCheckedAttribute, itemName, title }: IProps) => {
+    const appName = itemAppName ? `- ${itemAppName}` : '';
+    const renderContent = itemName ?
+        `<span>${escapeHTML(itemName || '')} ${appName}</span>` :
+        `<span>${globalize.translate(title)}</span>`;
+
+    return (
+        <div
+            className='sectioncheckbox'
+            dangerouslySetInnerHTML={createCheckBoxElement({
+                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 : '',
+                renderContent: renderContent
+            })}
+        />
+    );
+};
+
+export default CheckBoxElement;