import React, { Component } from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled, { withTheme } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import remcalc from 'remcalc';
import is from 'styled-is';
import titleCase from 'title-case';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import copy from 'clipboard-copy';
import {
Card,
CardOutlet,
Divider,
ResetIcon,
Button,
FormLabel,
Input,
H2,
Label,
QueryBreakpoints,
DotIcon,
DeleteIcon,
StartIcon,
StopIcon,
TooltipContainer,
TooltipTarget,
Tooltip,
ClipboardIcon
} from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const stateColor = {
PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
DELETED: 'secondaryActive',
FAILED: 'red'
};
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
`;
const Flex = styled.div`
align-items: center;
display: flex;
justify-content: flex-start;
@media (max-width: ${remcalc(767)}) {
display: block;
}
`;
const InputIconWrapper = styled.div`
display: flex;
margin-bottom: ${remcalc(10)};
align-items: center;
${is('noMargin')`
margin-bottom: ${remcalc(0)};
`};
input {
padding-right: ${remcalc(30)};
}
div {
position: relative;
left: ${remcalc(-26)};
}
`;
const VerticalDivider = styled.div`
width: ${remcalc(1)};
background: ${props => props.theme.grey};
height: ${remcalc(24)};
display: flex;
align-self: flex-end;
margin: 0 ${remcalc(18)};
@media (max-width: ${remcalc(767)}) {
display: none;
}
`;
const ClipboardIconActionable = styled(ClipboardIcon)`
cursor: pointer;
`;
export class CopyToClipboardTooltip extends Component {
constructor() {
super();
this.state = {
copied: false
};
}
handleClick = () => {
const { children: text } = this.props;
copy(text);
this.setState(
{
copied: true
},
() => {
setTimeout(() => {
this.setState({
copied: false
});
}, 4000);
}
);
};
render = () => (
{this.state.copied ? 'Copied To Clipboard' : 'Copy To Clipboard'}
);
}
export const CopiableField = ({ label, text, ...rest }) => (
{label}
{text}
);
export const Meta = ({
created,
updated,
state,
brand,
image,
...instance
}) => [
{(instance.package || {}).name}
,
{titleCase(state)}
Created:
Updated:
];
export default withTheme(
({
instance = {},
starting = false,
stopping = false,
rebooting = false,
removing = false,
onAction,
theme = {}
}) => (
{instance.image &&
instance.image.id && (
)}
{(instance.ips || []).map((ip, i) => (
))}
)
);