pseudo fix multi-url Subscribe and View drop-left buttons, still needs CSS cleanup

ref #884

src/FilterLists.Web/package.json

@@ -14,6 +14,7 @@
     "es6-promise": "^4.2.8",
     "moment": "^2.24.0",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.10",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",

src/FilterLists.Web/src/modules/home/components/linkButtons/SubscribeButtonGroup.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { DropdownButton, Dropdown } from "react-bootstrap";
 import { SubscribeButton } from "./SubscribeButton";
 
 interface IProps {
@@ -30,23 +31,14 @@ const SubscribeButtonGroupDropdown = (props: ISubscribeButtonGroupDropdownProps)
         mirrorIndex++;
     }
 
-    return <div className="btn-group-vertical dropleft fl-btn-link" role="group">
-        <BtnGroupDropSubscribe />
-        <div className="dropdown-menu" aria-labelledby="btnGroupDropSubscribe">
+    return <DropdownButton id="subscribe-dropdown" drop="left" variant="primary" title="Subscribe" className="fl-btn-link">
+        <Dropdown.Item >
             <SubscribeButton {...props} text={firstButtonText} />
-            {props.urlMirrors.map(
-                (m: string, i: number) =>
-                    <SubscribeButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} key={i} />)}
-        </div>
-    </div>;
+        </Dropdown.Item>
+        {props.urlMirrors.map(
+            (m: string, i: number) =>
+                <Dropdown.Item key={i}>
+                    <SubscribeButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} />
+                </Dropdown.Item>)}
+    </DropdownButton>;
 };
-
-const BtnGroupDropSubscribe = () =>
-    <button id="btnGroupDropSubscribe"
-        type="button"
-        className="btn btn-primary dropdown-toggle"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false">
-        Subscribe
-    </button>;

src/FilterLists.Web/src/modules/home/components/linkButtons/ViewButtonGroup.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { DropdownButton, Dropdown } from "react-bootstrap";
 import { ViewButton } from "./ViewButton";
 
 interface IProps {
@@ -29,23 +30,14 @@ const ViewButtonGroupDropdown = (props: IViewButtonGroupDropdownProps) => {
         mirrorIndex++;
     }
 
-    return <div className="btn-group-vertical dropleft fl-btn-link" role="group">
-        <BtnGroupDropView />
-        <div className="dropdown-menu" aria-labelledby="btnGroupDropView">
+    return <DropdownButton id="view-dropdown" drop="left" variant="primary" title="View" className="fl-btn-link">
+        <Dropdown.Item >
             <ViewButton {...props} text={firstButtonText} />
-            {props.urlMirrors.map(
-                (m: string, i: number) =>
-                    <ViewButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} key={i} />)}
-        </div>
-    </div>;
-};
-
-const BtnGroupDropView = () =>
-    <button id="btnGroupDropView"
-        type="button"
-        className="btn btn-primary dropdown-toggle"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false">
-        View
-    </button>;
+        </Dropdown.Item>
+        {props.urlMirrors.map(
+            (m: string, i: number) =>
+                <Dropdown.Item key={i}>
+                    <ViewButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} />
+                </Dropdown.Item>)}
+    </DropdownButton>;
+};

src/FilterLists.Web/src/modules/home/components/linkButtons/button.css

@@ -4,7 +4,7 @@
     width: 100px;
 }
 
-.dropdown-menu {
+.dropdown-item {
     border: 0;
     min-width: 0;
     padding: 0;