2017-11-16 12:47:32 +02:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import remcalc from 'remcalc';
|
|
|
|
|
|
|
|
import Package from '@components/package';
|
|
|
|
import Empty from '@components/empty';
|
|
|
|
import sortBy from 'lodash.sortby';
|
|
|
|
import isEqual from 'lodash.isequal';
|
|
|
|
import is from 'styled-is';
|
|
|
|
import {
|
|
|
|
Table,
|
|
|
|
TableThead,
|
|
|
|
TableTbody,
|
2017-11-20 13:33:50 +02:00
|
|
|
TableThFooter,
|
2017-11-16 12:47:32 +02:00
|
|
|
TableTr,
|
|
|
|
TableTh,
|
|
|
|
ArrowIcon
|
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
const ArrowIconStyled = styled(ArrowIcon)`
|
2017-11-22 14:13:33 +02:00
|
|
|
margin-left: ${remcalc(4)};
|
2017-11-16 12:47:32 +02:00
|
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
2017-11-20 13:33:50 +02:00
|
|
|
top: ${remcalc(-3)};
|
2017-11-16 12:47:32 +02:00
|
|
|
transition: transform 200ms ease;
|
|
|
|
|
|
|
|
path {
|
2017-11-20 13:33:50 +02:00
|
|
|
fill: ${props => props.theme.text};
|
2017-11-16 12:47:32 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
${is('selected', 'down')`
|
|
|
|
transform: rotate(180deg);
|
|
|
|
`};
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Span = styled.span`
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
|
|
`;
|
|
|
|
|
|
|
|
class Packages extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
2017-11-20 13:33:50 +02:00
|
|
|
packages: props.packages.sort((a, b) => (a.price > b.price ? 1 : -1)),
|
|
|
|
selected: null,
|
|
|
|
price: true,
|
|
|
|
ordered: 'price'
|
2017-11-16 12:47:32 +02:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
handleClick = id => {
|
|
|
|
this.setState({
|
|
|
|
selected: id !== this.state.selected ? id : null
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
componentWillReceiveProps = nextProps => {
|
|
|
|
this.setState({
|
|
|
|
packages: nextProps.packages
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
order = column => {
|
|
|
|
const { packages } = this.state;
|
|
|
|
const desc = sortBy(packages, [column]).reverse();
|
|
|
|
const asc = sortBy(packages, [column]);
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
packages: isEqual(packages, asc) ? desc : asc,
|
|
|
|
ordered: column,
|
|
|
|
[column]: !isEqual(packages, asc)
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
_cards = () => {
|
|
|
|
const { selected, packages, ordered } = this.state;
|
|
|
|
|
|
|
|
return packages.length > 0 ? (
|
|
|
|
<Row>
|
|
|
|
<Col xs={12}>
|
|
|
|
<Table>
|
|
|
|
<TableThead>
|
|
|
|
<TableTr>
|
|
|
|
<TableTh selected={ordered === 'name'}>
|
2017-11-22 14:13:33 +02:00
|
|
|
<div>
|
|
|
|
<Span role="button" onClick={() => this.order('name')}>
|
|
|
|
Name{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'name' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.name}
|
|
|
|
onClick={() => this.order('name')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2017-11-16 12:47:32 +02:00
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'memory'}>
|
2017-11-22 14:13:33 +02:00
|
|
|
<div>
|
|
|
|
<Span role="button" onClick={() => this.order('memory')}>
|
|
|
|
RAM{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'memory' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.memory}
|
|
|
|
onClick={() => this.order('memory')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2017-11-16 12:47:32 +02:00
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'disk'}>
|
2017-11-22 14:13:33 +02:00
|
|
|
<div>
|
|
|
|
<Span role="button" onClick={() => this.order('disk')}>
|
|
|
|
Disk{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'disk' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.disk}
|
|
|
|
onClick={() => this.order('disk')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2017-11-16 12:47:32 +02:00
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'vcpus'}>
|
2017-11-22 14:13:33 +02:00
|
|
|
<div>
|
|
|
|
<Span role="button" onClick={() => this.order('vcpus')}>
|
|
|
|
vCPU{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'vcpus' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.vcpus}
|
|
|
|
onClick={() => this.order('vcpus')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2017-11-16 12:47:32 +02:00
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'price'}>
|
2017-11-22 14:13:33 +02:00
|
|
|
<div>
|
|
|
|
<Span role="button" onClick={() => this.order('price')}>
|
|
|
|
$/hour{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'price' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected={ordered === 'price'}
|
|
|
|
down={this.state.price}
|
|
|
|
onClick={() => this.order('price')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2017-11-16 12:47:32 +02:00
|
|
|
</TableTh>
|
|
|
|
</TableTr>
|
|
|
|
</TableThead>
|
|
|
|
<TableTbody>
|
|
|
|
{packages.map(pack => (
|
|
|
|
<Package
|
|
|
|
pack={pack}
|
|
|
|
onClick={() => this.handleClick(pack.id)}
|
|
|
|
selected={selected === pack.id}
|
|
|
|
key={pack.id}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</TableTbody>
|
2017-11-20 13:33:50 +02:00
|
|
|
<TableThFooter>
|
|
|
|
<TableTr>
|
|
|
|
<TableTh selected={ordered === 'name'}>
|
|
|
|
<Span role="button" onClick={() => this.order('name')}>
|
|
|
|
Name{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'name' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.name}
|
|
|
|
onClick={() => this.order('name')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'memory'}>
|
|
|
|
<Span role="button" onClick={() => this.order('memory')}>
|
|
|
|
RAM{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'memory' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.memory}
|
|
|
|
onClick={() => this.order('memory')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'disk'}>
|
|
|
|
<Span role="button" onClick={() => this.order('disk')}>
|
|
|
|
Disk{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'disk' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.disk}
|
|
|
|
onClick={() => this.order('disk')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'vcpus'}>
|
|
|
|
<Span role="button" onClick={() => this.order('vcpus')}>
|
|
|
|
vCPU{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'vcpus' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected
|
|
|
|
down={this.state.vcpus}
|
|
|
|
onClick={() => this.order('vcpus')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</TableTh>
|
|
|
|
<TableTh right xs="100" selected={ordered === 'price'}>
|
|
|
|
<Span role="button" onClick={() => this.order('price')}>
|
|
|
|
$/hour{' '}
|
|
|
|
</Span>
|
|
|
|
{ordered === 'price' && (
|
|
|
|
<ArrowIconStyled
|
|
|
|
selected={ordered === 'price'}
|
|
|
|
down={this.state.price}
|
|
|
|
onClick={() => this.order('price')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</TableTh>
|
|
|
|
</TableTr>
|
|
|
|
</TableThFooter>
|
2017-11-16 12:47:32 +02:00
|
|
|
</Table>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
) : (
|
|
|
|
<Row>
|
2017-11-20 13:33:50 +02:00
|
|
|
<Col xs={12}>
|
2017-11-16 12:47:32 +02:00
|
|
|
<Empty />
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
render = () => this._cards();
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Packages;
|