mirror of https://github.com/lukechilds/polar.git
jamaljsr
5 years ago
11 changed files with 199 additions and 20 deletions
@ -0,0 +1,45 @@ |
|||
import React from 'react'; |
|||
import styled from '@emotion/styled'; |
|||
import { IPortDefaultProps } from '@mrblenny/react-flow-chart'; |
|||
|
|||
const Outer = styled.div` |
|||
width: 18px; |
|||
height: 18px; |
|||
border-radius: 50%; |
|||
background: white; |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
&:hover > div { |
|||
width: 10px; |
|||
height: 10px; |
|||
} |
|||
`;
|
|||
|
|||
const Inner = styled.div<{ color: string; active: boolean }>` |
|||
width: ${props => (props.active ? '10px' : '7px')}; |
|||
height: ${props => (props.active ? '10px' : '7px')}; |
|||
border-radius: 50%; |
|||
background: ${props => props.color}; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
`;
|
|||
|
|||
const CustomPort: React.FC<IPortDefaultProps> = ({ |
|||
port, |
|||
isLinkSelected, |
|||
isLinkHovered, |
|||
}) => { |
|||
let color = 'grey'; |
|||
if (port.properties) { |
|||
color = port.properties.initiator ? '#52c41a' : '#6495ED'; |
|||
} |
|||
return ( |
|||
<Outer> |
|||
<Inner color={color} active={isLinkSelected || isLinkHovered} /> |
|||
</Outer> |
|||
); |
|||
}; |
|||
|
|||
export default CustomPort; |
@ -0,0 +1,24 @@ |
|||
import React from 'react'; |
|||
import { IPortsDefaultProps } from '@mrblenny/react-flow-chart'; |
|||
import PortsGroup from './PortsGroup'; |
|||
|
|||
const Ports: React.FC<IPortsDefaultProps> = ({ children, config }) => { |
|||
return ( |
|||
<div> |
|||
<PortsGroup config={config} side="top"> |
|||
{children.filter(child => ['input', 'top'].includes(child.props.port.type))} |
|||
</PortsGroup> |
|||
<PortsGroup config={config} side="bottom"> |
|||
{children.filter(child => ['output', 'bottom'].includes(child.props.port.type))} |
|||
</PortsGroup> |
|||
<PortsGroup config={config} side="right"> |
|||
{children.filter(child => ['right'].includes(child.props.port.type))} |
|||
</PortsGroup> |
|||
<PortsGroup config={config} side="left"> |
|||
{children.filter(child => ['left'].includes(child.props.port.type))} |
|||
</PortsGroup> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default Ports; |
@ -0,0 +1,54 @@ |
|||
import css from '@emotion/css'; |
|||
import styled from '@emotion/styled'; |
|||
import { IPortsGroupDefaultProps } from '@mrblenny/react-flow-chart'; |
|||
|
|||
const PortsGroup = styled.div<IPortsGroupDefaultProps>` |
|||
position: absolute; |
|||
display: flex; |
|||
justify-content: center; |
|||
${props => { |
|||
if (props.side === 'top') { |
|||
return css` |
|||
width: 100%; |
|||
left: 0; |
|||
top: -9px; |
|||
flex-direction: row; |
|||
> div { |
|||
margin: 0 3px; |
|||
} |
|||
`;
|
|||
} else if (props.side === 'bottom') { |
|||
return css` |
|||
width: 100%; |
|||
left: 0; |
|||
bottom: -9px; |
|||
flex-direction: row; |
|||
> div { |
|||
margin: 0 3px; |
|||
} |
|||
`;
|
|||
} else if (props.side === 'left') { |
|||
return css` |
|||
height: 100%; |
|||
top: 0; |
|||
left: -9px; |
|||
flex-direction: column; |
|||
> div { |
|||
margin: 3px 0; |
|||
} |
|||
`;
|
|||
} else { |
|||
return css` |
|||
height: 100%; |
|||
top: 0; |
|||
right: -9px; |
|||
flex-direction: column; |
|||
> div { |
|||
margin: 3px 0; |
|||
} |
|||
`;
|
|||
} |
|||
}} |
|||
`;
|
|||
|
|||
export default PortsGroup; |
@ -1,2 +1,4 @@ |
|||
export { default as CustomLink } from './CustomLink'; |
|||
export { default as CustomNodeInner } from './CustomNodeInner'; |
|||
export { default as Link } from './Link'; |
|||
export { default as NodeInner } from './NodeInner'; |
|||
export { default as Port } from './Port'; |
|||
export { default as Ports } from './Ports'; |
|||
|
Loading…
Reference in new issue