Convert emby-button and emby-scroller to react

src/elements/emby-button/LinkButton.tsx

@@ -0,0 +1,65 @@
+import React, { AnchorHTMLAttributes, DetailedHTMLProps, MouseEvent } from 'react';
+import classNames from 'classnames';
+import layoutManager from '../../components/layoutManager';
+import shell from '../../scripts/shell';
+import { appRouter } from '../../components/appRouter';
+import { appHost } from '../../components/apphost';
+import './emby-button.scss';
+
+interface LinkButtonProps extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {
+  className?: string;
+  isAutoHideEnabled?: boolean;
+  href?: string;
+  target?: string;
+}
+
+const LinkButton: React.FC<LinkButtonProps> = ({
+    className,
+    isAutoHideEnabled,
+    href,
+    target,
+    children,
+    ...rest
+}) => {
+    const onAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        const url = href || '';
+        if (url !== '#') {
+            if (target) {
+                if (!appHost.supports('targetblank')) {
+                    e.preventDefault();
+                    shell.openUrl(url);
+                }
+            } else {
+                e.preventDefault();
+                appRouter.show(url);
+            }
+        } else {
+            e.preventDefault();
+        }
+    };
+
+    if (isAutoHideEnabled === true && !appHost.supports('externallinks')) {
+        return null;
+    }
+    let cssClass = classNames('emby-button', className);
+
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
+    }
+
+    return (
+        <a
+            className={cssClass}
+            href={href}
+            target={target}
+            onClick={onAnchorClick}
+            {...rest}
+        >
+            {children}
+        </a>
+    );
+};
+
+export default LinkButton;