mirror of https://github.com/lukechilds/polar.git
jamaljsr
5 years ago
8 changed files with 201 additions and 83 deletions
@ -0,0 +1,55 @@ |
|||
import React, { ReactNode } from 'react'; |
|||
import { ILink } from '@mrblenny/react-flow-chart'; |
|||
import { Dropdown, Menu } from 'antd'; |
|||
import { useStoreState } from 'store'; |
|||
import { LinkProperties } from 'utils/chart'; |
|||
import ChangeBackendButton from '../link/ChangeBackendButton'; |
|||
import CloseChannelButton from '../link/CloseChannelButton'; |
|||
|
|||
interface Props { |
|||
link: ILink; |
|||
} |
|||
|
|||
const LinkContextMenu: React.FC<Props> = ({ link, children }) => { |
|||
const { activeId } = useStoreState(s => s.designer); |
|||
const network = useStoreState(s => s.network.networkById(activeId)); |
|||
const { type, channelPoint } = (link.properties as LinkProperties) || {}; |
|||
|
|||
let menuItem: ReactNode; |
|||
if (type === 'open-channel') { |
|||
// find the lightning node by name
|
|||
const node = network.nodes.lightning.find(n => n.name === link.from.nodeId); |
|||
// don't add a context menu if the node is not valid
|
|||
if (node) { |
|||
menuItem = ( |
|||
<CloseChannelButton type="menu" node={node} channelPoint={channelPoint} /> |
|||
); |
|||
} |
|||
} else if (type === 'backend') { |
|||
menuItem = ( |
|||
<ChangeBackendButton |
|||
type="menu" |
|||
lnName={link.from.nodeId} |
|||
backendName={link.to.nodeId as string} |
|||
/> |
|||
); |
|||
} |
|||
|
|||
// don't add a context menu if there is no menu item
|
|||
if (!menuItem) return <>{children}</>; |
|||
|
|||
return ( |
|||
<Dropdown |
|||
overlay={ |
|||
<Menu style={{ width: 200 }}> |
|||
<Menu.Item>{menuItem}</Menu.Item> |
|||
</Menu> |
|||
} |
|||
trigger={['contextMenu']} |
|||
> |
|||
{children} |
|||
</Dropdown> |
|||
); |
|||
}; |
|||
|
|||
export default LinkContextMenu; |
@ -0,0 +1,39 @@ |
|||
import React from 'react'; |
|||
import { ApiOutlined } from '@ant-design/icons'; |
|||
import { Button } from 'antd'; |
|||
import { usePrefixedTranslation } from 'hooks'; |
|||
import { useStoreActions } from 'store'; |
|||
|
|||
interface Props { |
|||
lnName: string; |
|||
backendName: string; |
|||
type?: 'button' | 'menu'; |
|||
} |
|||
|
|||
const ChangeBackendButton: React.FC<Props> = ({ lnName, backendName, type }) => { |
|||
const { l } = usePrefixedTranslation('cmps.designer.link.ChangeBackendButton'); |
|||
|
|||
const { showChangeBackend } = useStoreActions(s => s.modals); |
|||
const handleChangeClick = () => { |
|||
showChangeBackend({ lnName, backendName }); |
|||
}; |
|||
|
|||
// render a menu item inside of the NodeContextMenu
|
|||
if (type === 'menu') { |
|||
return ( |
|||
<span onClick={handleChangeClick}> |
|||
<ApiOutlined /> |
|||
<span>{l('btnText')}</span> |
|||
</span> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<Button block onClick={handleChangeClick}> |
|||
<ApiOutlined /> |
|||
{l('btnText')} |
|||
</Button> |
|||
); |
|||
}; |
|||
|
|||
export default ChangeBackendButton; |
@ -0,0 +1,54 @@ |
|||
import React from 'react'; |
|||
import { CloseOutlined } from '@ant-design/icons'; |
|||
import { Button, Modal } from 'antd'; |
|||
import { usePrefixedTranslation } from 'hooks'; |
|||
import { LightningNode } from 'shared/types'; |
|||
import { useStoreActions } from 'store'; |
|||
|
|||
interface Props { |
|||
node: LightningNode; |
|||
channelPoint: string; |
|||
type?: 'button' | 'menu'; |
|||
} |
|||
|
|||
const CloseChannelButton: React.FC<Props> = ({ node, channelPoint, type }) => { |
|||
const { l } = usePrefixedTranslation('cmps.designer.link.CloseChannelButton'); |
|||
const { notify } = useStoreActions(s => s.app); |
|||
const { closeChannel } = useStoreActions(s => s.lightning); |
|||
|
|||
const showCloseChanModal = () => { |
|||
Modal.confirm({ |
|||
title: l('title'), |
|||
okText: l('confirmBtn'), |
|||
okType: 'danger', |
|||
cancelText: l('cancelBtn'), |
|||
onOk: async () => { |
|||
try { |
|||
await closeChannel({ node, channelPoint }); |
|||
notify({ message: l('success') }); |
|||
} catch (error) { |
|||
notify({ message: l('error'), error }); |
|||
throw error; |
|||
} |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
// render a menu item inside of the NodeContextMenu
|
|||
if (type === 'menu') { |
|||
return ( |
|||
<span onClick={showCloseChanModal}> |
|||
<CloseOutlined /> |
|||
<span>{l('btnText')}</span> |
|||
</span> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<Button type="danger" block ghost onClick={showCloseChanModal}> |
|||
{l('btnText')} |
|||
</Button> |
|||
); |
|||
}; |
|||
|
|||
export default CloseChannelButton; |
Loading…
Reference in new issue