add dropdown to SubscribeButton

This commit is contained in:
Collin M. Barrett 2019-08-06 07:00:34 -05:00
parent 0cca088b8d
commit 4e3dd51efb
2 changed files with 36 additions and 17 deletions

View file

@ -42,7 +42,7 @@ export class AllListsTable extends React.Component<{}, State> {
dataIndex={nameof<List>("viewUrl")}
width={100}
fixed="right"
render={(text: string, record: List, index: number) => <SubscribeButton key={index} viewUrl={text} name={record.name} />}
render={(text: string, record: List, index: number) => <SubscribeButton key={index} viewUrl={text} viewUrlMirrors={record.viewUrlMirrors} name={record.name} />}
/>
</Table>
);

View file

@ -1,50 +1,69 @@
import { Button } from 'antd';
import { Button, Dropdown, Icon, Menu } from 'antd';
import { ButtonProps, ButtonType } from "antd/lib/button";
import * as React from "react";
interface Props {
name: string;
viewUrl: string;
viewUrlMirrors: string[];
};
export const SubscribeButton = (props: Props): JSX.Element | null => props.viewUrl
? <Button {...buildButtonProps(props)}>Subscribe</Button>
: null;
export const SubscribeButton = (props: Props): JSX.Element | null =>
(props.viewUrlMirrors && props.viewUrlMirrors.length > 0)
? <SubscribeButtonDropdown {...props} />
: props.viewUrl
? <Button {...buildButtonProps(props.name, props.viewUrl)}>Subscribe</Button>
: null;
const buildButtonProps = (props: Props): ButtonProps => {
const SubscribeButtonDropdown = (props: Props): JSX.Element =>
<Dropdown overlay={
<Menu>
{props.viewUrlMirrors.map(
(viewUrlMirror: string, i: number) =>
<Menu.Item key={i}>
<Button {...buildButtonProps(props.name, viewUrlMirror)}>{`Mirror ${i}`}</Button>
</Menu.Item>)}
</Menu>
}>
<Button {...buildButtonProps(props.name, props.viewUrl)}>
Subscribe <Icon type="down" />
</Button>
</Dropdown>;
const buildButtonProps = (name: string, viewUrl: string): ButtonProps => {
let type: ButtonType = "primary";
const hrefLocation = `${encodeURIComponent(props.viewUrl)}`;
const hrefTitle = `${encodeURIComponent(props.name)}`;
const hrefLocation = `${encodeURIComponent(viewUrl)}`;
const hrefTitle = `${encodeURIComponent(name)}`;
let href = `abp:subscribe?location=${hrefLocation}&amp;title=${hrefTitle}`;
const defaultTitle = (prefix?: string) => `${prefix || ""}Subscribe to ${props.name} with a browser extension supporting the "abp:" protocol (e.g. uBlock Origin, Adblock Plus).`;
const defaultTitle = (prefix?: string) => `${prefix || ""}Subscribe to ${name} with a browser extension supporting the "abp:" protocol (e.g. uBlock Origin, Adblock Plus).`;
let title: string;
switch (true) {
// HTTP protocols
case props.viewUrl.includes(".onion/"):
case viewUrl.includes(".onion/"):
type = "dashed";
title = defaultTitle("Tor address - ");
break;
case props.viewUrl.includes("http://"):
case viewUrl.includes("http://"):
type = "danger";
title = defaultTitle("Not Secure - ");
break;
// Software protocols
case props.viewUrl.includes(".tpl"):
case viewUrl.includes(".tpl"):
href = `javascript:window.external.msAddTrackingProtectionList('${hrefLocation}', '${hrefTitle}')`;
title = `Subscribe to ${props.name} with Internet Explorer's Tracking Protection List feature.`;
title = `Subscribe to ${name} with Internet Explorer's Tracking Protection List feature.`;
break;
case props.viewUrl.includes(".lsrules"):
case viewUrl.includes(".lsrules"):
href = `x-littlesnitch:subscribe-rules?url=${hrefLocation}`;
title = `Subscribe to ${props.name} with Little Snitch's rule group subscription feature.`;
title = `Subscribe to ${name} with Little Snitch's rule group subscription feature.`;
break;
case props.viewUrl.includes("?hostformat=littlesnitch"):
case viewUrl.includes("?hostformat=littlesnitch"):
href = `x-littlesnitch:subscribe-rules?url=${hrefLocation}`;
title = `Subscribe to ${props.name} with Little Snitch's rule group subscription feature.`;
title = `Subscribe to ${name} with Little Snitch's rule group subscription feature.`;
break;
default:
title = defaultTitle();