refactor SubscribeButton dropdown

This commit is contained in:
Collin M. Barrett 2019-08-06 08:34:18 -05:00
parent 4e3dd51efb
commit 7d67c231d4
2 changed files with 21 additions and 15 deletions

View file

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

View file

@ -1,7 +1,11 @@
import { Button, Dropdown, Icon, Menu } from 'antd';
import { Button, Dropdown, Menu } from 'antd';
import { ButtonProps, ButtonType } from "antd/lib/button";
import * as React from "react";
//TODO: import DropdownButtonType from antd rather than redefining if they export the type
//import { DropdownButtonType } from "antd/lib/dropdown";
declare type DropdownButtonType = 'primary' | 'ghost' | 'dashed';
interface Props {
name: string;
viewUrl: string;
@ -12,23 +16,26 @@ 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>
? <Button size="small" {...buildButtonProps(props.name, props.viewUrl)}>Subscribe</Button>
: null;
const SubscribeButtonDropdown = (props: Props): JSX.Element =>
<Dropdown overlay={
<Menu>
{props.viewUrlMirrors.map(
(viewUrlMirror: string, i: number) =>
const SubscribeButtonDropdown = (props: Props): JSX.Element => {
var buttonProps = buildButtonProps(props.name, props.viewUrl);
//TODO: pass title (ref https://github.com/ant-design/ant-design/issues/18122)
return <Dropdown.Button size="small"
type={buttonProps.type as DropdownButtonType}
href={buttonProps.href}
overlay={
<Menu>
{props.viewUrlMirrors.map((viewUrlMirror: string, i: number) =>
<Menu.Item key={i}>
<Button {...buildButtonProps(props.name, viewUrlMirror)}>{`Mirror ${i}`}</Button>
<Button size="small" {...buildButtonProps(props.name, viewUrlMirror)}>{`Mirror ${i + 1}`}</Button>
</Menu.Item>)}
</Menu>
}>
<Button {...buildButtonProps(props.name, props.viewUrl)}>
Subscribe <Icon type="down" />
</Button>
</Dropdown>;
</Menu>
}>
Subscribe
</Dropdown.Button>;
};
const buildButtonProps = (name: string, viewUrl: string): ButtonProps => {
let type: ButtonType = "primary";