151 lines
3.2 KiB
JavaScript
151 lines
3.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import isEqual from 'lodash.isequal';
|
|
import { reduxForm } from 'redux-form';
|
|
import { Margin } from 'styled-components-spacing';
|
|
import { Col, Row } from 'react-styled-flexboxgrid';
|
|
import { reset } from 'redux-form';
|
|
import remcalc from 'remcalc';
|
|
import styled from 'styled-components';
|
|
import { default as defaultState } from '@state/state';
|
|
|
|
import Inputs from './inputs';
|
|
import { returnIcon } from '../icons';
|
|
|
|
import {
|
|
FormGroup,
|
|
Checkbox,
|
|
Label,
|
|
H6,
|
|
Divider,
|
|
H4,
|
|
P,
|
|
PackageIcon
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
const Flex = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: ${remcalc(8)};
|
|
|
|
svg {
|
|
margin-right: ${remcalc(6)};
|
|
}
|
|
`;
|
|
|
|
const FullWidth = styled(Margin)`
|
|
width: 100%;
|
|
,`;
|
|
|
|
const RowMargin = styled(Row)`
|
|
margin-top: ${remcalc(-24)};
|
|
`;
|
|
|
|
class Filters extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
const { filters: { cpu, cost, ram, disk } } = this.props;
|
|
|
|
this.state = {
|
|
ram,
|
|
cpu,
|
|
disk,
|
|
cost,
|
|
reset: 0
|
|
};
|
|
}
|
|
|
|
handleResetClick = () => {
|
|
const {
|
|
dispatch,
|
|
filterReset,
|
|
filters: { cpu, cost, ram, disk }
|
|
} = this.props;
|
|
|
|
filterReset();
|
|
dispatch(reset('type'));
|
|
|
|
this.setState({
|
|
ram,
|
|
cpu,
|
|
disk,
|
|
cost,
|
|
reset: this.state.reset + 1
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
filters,
|
|
ramChange,
|
|
cpuChange,
|
|
diskChange,
|
|
costChange
|
|
} = this.props;
|
|
|
|
return [
|
|
<Row>
|
|
<Col xs={12}>
|
|
<Margin bottom={6}>
|
|
<Flex>
|
|
<PackageIcon />
|
|
<H6>Package</H6>
|
|
</Flex>
|
|
<Divider height="1px" />
|
|
</Margin>
|
|
</Col>
|
|
</Row>,
|
|
<RowMargin>
|
|
<Col xs={8}>
|
|
<P>
|
|
A package defines the specs of your instance. On Triton, packages
|
|
can only increase in size.{' '}
|
|
<a href="https://docs.joyent.com/public-cloud/instances/packages/sizing">
|
|
Read the docs
|
|
</a>
|
|
</P>
|
|
</Col>
|
|
</RowMargin>,
|
|
<Row>
|
|
<Col>
|
|
<Margin vertical={2}>
|
|
<H4>Filters</H4>
|
|
</Margin>
|
|
</Col>
|
|
</Row>,
|
|
<Row>
|
|
{filters.groups
|
|
.sort((a, b) => (a.name < b.name ? -1 : 1))
|
|
.map((group, i) => (
|
|
<Col>
|
|
<FormGroup
|
|
name={group.name}
|
|
key={group.name}
|
|
type="checkbox"
|
|
reduxForm
|
|
>
|
|
<Checkbox>
|
|
{returnIcon(group.name)}
|
|
<Label>{group.name}</Label>
|
|
</Checkbox>
|
|
</FormGroup>
|
|
</Col>
|
|
))}
|
|
</Row>,
|
|
<FullWidth top={2}>
|
|
<Inputs
|
|
ramChange={value => ramChange(value)}
|
|
cpuChange={value => cpuChange(value)}
|
|
diskChange={value => diskChange(value)}
|
|
costChange={value => costChange(value)}
|
|
filters={filters}
|
|
disabled={isEqual(filters, defaultState.filters)}
|
|
onResetClick={this.handleResetClick}
|
|
reset={this.state.reset}
|
|
/>
|
|
</FullWidth>
|
|
];
|
|
}
|
|
}
|
|
|
|
export default reduxForm({ form: 'type' })(Filters);
|