splitting SuggestionsView component

src/elements/ItemsContainerElement.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react';
 
-const createButtonElement = ({ id, className }: IProps) => ({
+const createElement = ({ id, className }: IProps) => ({
     __html: `<div
         is="emby-itemscontainer"
-        id="${id}"
+        ${id}
         class="${className}"
     >
     </div>`
@@ -17,8 +17,8 @@ type IProps = {
 const ItemsContainerElement: FunctionComponent<IProps> = ({ id, className }: IProps) => {
     return (
         <div
-            dangerouslySetInnerHTML={createButtonElement({
-                id: id,
+            dangerouslySetInnerHTML={createElement({
+                id: id ? `id='${id}'` : '',
                 className: className
             })}
         />

src/elements/ItemsScrollerContainerElement.tsx

@@ -0,0 +1,43 @@
+import React, { FunctionComponent } from 'react';
+
+const createScroller = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, id, className }: IProps) => ({
+    __html: `<div is="emby-scroller"
+    class="${scrollerclassName}"
+    ${dataHorizontal}
+    ${dataMousewheel}
+    ${dataCenterfocus}
+    >
+    <div
+        is="emby-itemscontainer"
+        ${id}
+        class="${className}"
+    >
+    </div>
+    </div>`
+});
+
+type IProps = {
+    scrollerclassName?: string;
+    dataHorizontal?: string;
+    dataMousewheel?: string;
+    dataCenterfocus?: string;
+    id?: string;
+    className?: string;
+}
+
+const ItemsScrollerContainerElement: FunctionComponent<IProps> = ({ scrollerclassName, dataHorizontal, dataMousewheel, dataCenterfocus, id, className }: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createScroller({
+                scrollerclassName: scrollerclassName,
+                dataHorizontal: dataHorizontal ? `data-horizontal="${dataHorizontal}"` : '',
+                dataMousewheel: dataMousewheel ? `data-mousewheel="${dataMousewheel}"` : '',
+                dataCenterfocus: dataCenterfocus ? `data-centerfocus="${dataCenterfocus}"` : '',
+                id: id ? `id='${id}'` : '',
+                className: className
+            })}
+        />
+    );
+};
+
+export default ItemsScrollerContainerElement;