fix(my-joyent): fix reset filters on prototype

fixes #766
This commit is contained in:
Sara Vieira 2017-10-17 11:00:21 +01:00 committed by Sérgio Ramos
parent c15d7ae020
commit 772b097458
12 changed files with 870 additions and 744 deletions

View File

@ -104,6 +104,18 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
.c5 {
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 400;
}
.c5 label {
font-weight: 400;
}
@ -197,7 +209,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
<input
checked={false}
className="c7"
id="cjYpBB"
id="XXuv"
name="magnetic"
onBlur={[Function]}
onChange={[Function]}
@ -209,7 +221,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
/>
<label
className="c8"
htmlFor="cjYpBB"
htmlFor="XXuv"
/>
</div>
Magnetic
@ -239,7 +251,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
<input
checked={false}
className="c7"
id="cBnwtF"
id="bgdmOt"
name="ssd"
onBlur={[Function]}
onChange={[Function]}
@ -251,7 +263,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
/>
<label
className="c8"
htmlFor="cBnwtF"
htmlFor="bgdmOt"
/>
</div>
SSD

View File

@ -12,13 +12,13 @@ exports[`renders <Package /> without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-grow: 4;
-ms-flex-grow: 4;
flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;

View File

@ -180,6 +180,7 @@ exports[`renders <Filters /> without throwing 1`] = `
font-style: normal;
font-stretch: normal;
display: block;
text-align: left;
}
.c13 {
@ -253,6 +254,7 @@ exports[`renders <Filters /> without throwing 1`] = `
font-style: normal;
font-stretch: normal;
display: block;
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
}
@ -365,6 +367,18 @@ exports[`renders <Filters /> without throwing 1`] = `
.c21 {
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 400;
}
.c21 label {
font-weight: 400;
}
@ -924,7 +938,7 @@ exports[`renders <Filters /> without throwing 1`] = `
<input
checked={false}
className="c23"
id="ctHMev"
id="bMjLGQ"
name="magnetic"
onBlur={[Function]}
onChange={[Function]}
@ -936,7 +950,7 @@ exports[`renders <Filters /> without throwing 1`] = `
/>
<label
className="c24"
htmlFor="ctHMev"
htmlFor="bMjLGQ"
/>
</div>
Magnetic
@ -966,7 +980,7 @@ exports[`renders <Filters /> without throwing 1`] = `
<input
checked={false}
className="c23"
id="buhnul"
id="xnVlC"
name="ssd"
onBlur={[Function]}
onChange={[Function]}
@ -978,7 +992,7 @@ exports[`renders <Filters /> without throwing 1`] = `
/>
<label
className="c24"
htmlFor="buhnul"
htmlFor="xnVlC"
/>
</div>
SSD

View File

@ -2,13 +2,10 @@ import React, { Component } from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import isEqual from 'lodash.isequal';
import {
Button,
Label,
Slider
} from 'joyent-ui-toolkit';
import { Button, Label } from 'joyent-ui-toolkit';
import { default as defaultState } from '@state/state';
import { default as DiskTypeFrom } from '@components/diskTypeForm';
import Sliders from './sliders';
const FilterWrapper = styled.section`
display: flex;
@ -45,19 +42,6 @@ const Subtitle = styled(Label)`
margin-bottom: ${remcalc(8)};
`;
const getFirstAndLast = (arr, key) => {
const sorted = arr.sort(
(a, b) => (a[key] === b[key] ? 0 : a[key] < b[key] ? -1 : 1)
);
if (sorted.length > 0) {
return {
min: parseFloat(sorted[0][key]),
max: parseFloat(sorted[sorted.length - 1][key])
};
}
};
class Filters extends Component {
constructor(props) {
super(props);
@ -72,48 +56,18 @@ class Filters extends Component {
groupClick: 0,
defaults: this.props.filters
};
this.groupChange = this.groupChange.bind(this);
this.handleResetClick = this.handleResetClick.bind(this);
}
componentWillReceiveProps(nextProps) {
const { packages } = nextProps;
packages.length > 1 &&
this.setState({
ram: getFirstAndLast(packages, 'memory'),
cpu: getFirstAndLast(packages, 'vcpus'),
disk: getFirstAndLast(packages, 'disk'),
cost: getFirstAndLast(packages, 'price')
});
}
groupChange(group) {
this.props.groupChange(group);
groupChange = group => {
const { groupChange } = this.props;
groupChange(group);
this.setState({
groupClick: this.state.groupClick + 1
});
}
};
shouldComponentUpdate(nextProps, nextState) {
const { groupClick, reset } = this.state;
const { filters } = this.props;
const filtersMap = filter => ({
ram: filter.ram,
cost: filter.cost,
cpu: filter.cpu,
disk: filter.disk
});
return (
(nextState.groupClick !== groupClick &&
isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
nextState.reset !== reset ||
!isEqual(nextProps.filters.diskType, filters.diskType)
);
}
handleResetClick() {
handleResetClick = () => {
const { filterReset, filters: { cpu, cost, ram, disk } } = this.props;
const { reset } = this.state;
filterReset();
@ -125,7 +79,19 @@ class Filters extends Component {
disk,
cost
});
};
handleDiskChange = val => {
this.props.diskTypeChange(val);
// if the object is empty or all values are false we want to reset
if (
Object.keys(val).length === 0 ||
Object.keys(val).every(i => !val[i])
) {
this.handleResetClick()
}
};
render() {
const {
@ -134,11 +100,10 @@ class Filters extends Component {
cpuSliderChange,
diskSliderChange,
costSliderChange,
packages,
diskTypeChange
packages
} = this.props;
const { reset, cpu, cost, ram, disk, defaults } = this.state;
const { reset, defaults, groupClick } = this.state;
return (
<Wrapper>
@ -171,54 +136,19 @@ class Filters extends Component {
</GroupWrapper>
<Label>Filter by package feature</Label>
<FilterWrapper key={reset}>
<Slider
greyed={packages.length === 0}
minValue={defaults.ram.min}
maxValue={defaults.ram.max}
step={0.256}
value={ram}
key={`${ram.min}-${ram.max}`}
onChangeComplete={value => ramSliderChange(value)}
>
GB RAM
</Slider>
<Slider
greyed={packages.length === 0}
minValue={defaults.cpu.min}
maxValue={defaults.cpu.max}
step={0.25}
value={cpu}
key={`${cpu.min}-${cpu.max}`}
onChangeComplete={value => cpuSliderChange(value)}
>
vCPUs
</Slider>
<Slider
greyed={packages.length === 0}
minValue={defaults.disk.min}
maxValue={defaults.disk.max}
step={0.01}
value={disk}
key={`${disk.min}-${disk.max}`}
onChangeComplete={value => diskSliderChange(value)}
>
TB Disk
</Slider>
<Slider
greyed={packages.length === 0}
minValue={defaults.cost.min}
maxValue={defaults.cost.max}
step={0.016}
value={cost}
key={`${cost.min}-${cost.max}`}
onChangeComplete={value => costSliderChange(value)}
>
$/hr
</Slider>
<DiskTypeFrom
onChange={params => diskTypeChange(params)}
onSubmit={e => {}}
<Sliders
packages={packages}
ramSliderChange={value => ramSliderChange(value)}
cpuSliderChange={value => cpuSliderChange(value)}
diskSliderChange={value => diskSliderChange(value)}
costSliderChange={value => costSliderChange(value)}
defaults={defaults}
filters={filters}
reset={reset}
groupClick={groupClick}
/>
<DiskTypeFrom onChange={params => this.handleDiskChange(params)} />
</FilterWrapper>
</Wrapper>
);

View File

@ -0,0 +1,123 @@
import React, { Component } from 'react';
import { Slider } from 'joyent-ui-toolkit';
import isEqual from 'lodash.isequal';
const getFirstAndLast = (arr, key) => {
const sorted = arr.sort(
(a, b) => (a[key] === b[key] ? 0 : a[key] < b[key] ? -1 : 1)
);
if (sorted.length > 0) {
return {
min: parseFloat(sorted[0][key]),
max: parseFloat(sorted[sorted.length - 1][key])
};
}
};
class Sliders extends Component {
constructor(props) {
super(props);
const { filters: { cpu, cost, ram, disk }, reset, groupClick } = this.props;
this.state = {
reset,
ram,
cpu,
disk,
cost,
groupClick
};
}
componentWillReceiveProps(nextProps) {
const { packages, groupClick, reset } = nextProps;
packages.length > 1 &&
this.setState({
ram: getFirstAndLast(packages, 'memory'),
cpu: getFirstAndLast(packages, 'vcpus'),
disk: getFirstAndLast(packages, 'disk'),
cost: getFirstAndLast(packages, 'price'),
groupClick,
reset
});
}
shouldComponentUpdate(nextProps, nextState) {
const { groupClick, reset } = this.state;
const { filters } = this.props;
const filtersMap = filter => ({
ram: filter.ram,
cost: filter.cost,
cpu: filter.cpu,
disk: filter.disk
});
return (
(nextState.groupClick !== groupClick &&
isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
nextState.reset !== reset ||
!isEqual(nextProps.filters.diskType, filters.diskType)
);
}
render() {
const {
ramSliderChange,
cpuSliderChange,
diskSliderChange,
costSliderChange,
packages,
defaults
} = this.props;
const { cpu, cost, ram, disk } = this.state;
return [
<Slider
greyed={packages.length === 0}
minValue={defaults.ram.min}
maxValue={defaults.ram.max}
step={0.256}
value={ram}
key={`${ram.min}-${ram.max}`}
onChangeComplete={value => ramSliderChange(value)}
>
GB RAM
</Slider>,
<Slider
greyed={packages.length === 0}
minValue={defaults.cpu.min}
maxValue={defaults.cpu.max}
step={0.25}
value={cpu}
key={`${cpu.min}-${cpu.max}`}
onChangeComplete={value => cpuSliderChange(value)}
>
vCPUs
</Slider>,
<Slider
greyed={packages.length === 0}
minValue={defaults.disk.min}
maxValue={defaults.disk.max}
step={0.01}
value={disk}
key={`${disk.min}-${disk.max}`}
onChangeComplete={value => diskSliderChange(value)}
>
TB Disk
</Slider>,
<Slider
greyed={packages.length === 0}
minValue={defaults.cost.min}
maxValue={defaults.cost.max}
step={0.016}
value={cost}
key={`${cost.min}-${cost.max}`}
onChangeComplete={value => costSliderChange(value)}
>
$/hr
</Slider>
];
}
}
export default Sliders;

View File

@ -21,13 +21,13 @@ exports[`renders <Package /> without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-grow: 4;
-ms-flex-grow: 4;
flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;

View File

@ -30,13 +30,13 @@ exports[`renders <Packages /> without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-grow: 4;
-ms-flex-grow: 4;
flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;

View File

@ -30,13 +30,13 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-grow: 2;
-ms-flex-grow: 2;
flex-grow: 2;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-grow: 4;
-ms-flex-grow: 4;
flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;

View File

@ -29,12 +29,12 @@ p.rsg--p-32 {
padding-bottom: 36px;
}
.rsg--sidebar-4 a.rsg--link-72 {
.rsg--sidebar-4 a.rsg--link-73 {
color: #fff;
font-size: 15px;
}
.rsg--sidebar-4 a.rsg--heading-71 {
.rsg--sidebar-4 a.rsg--heading-72 {
font-size: 17px;
margin-bottom: 12px;
display: block;
@ -45,15 +45,15 @@ p.rsg--p-32 {
padding: 0;
}
.rsg--sidebar-4 .rsg--search-66 {
.rsg--sidebar-4 .rsg--search-67 {
padding: 30px 0;
}
.rsg--sidebar-4 .rsg--isChild-70 {
.rsg--sidebar-4 .rsg--isChild-71 {
padding-left: 16px;
}
.rsg--sidebar-4 .rsg--input-67 {
.rsg--sidebar-4 .rsg--input-68 {
background: #FFFFFF;
border: 1px solid #D8D8D8;
box-sizing: border-box;
@ -66,7 +66,7 @@ p.rsg--p-32 {
height: 48px;
}
.rsg--sidebar-4 .rsg--list-68 {
.rsg--sidebar-4 .rsg--list-69 {
padding: 0;
}

View File

@ -38,7 +38,7 @@
"babel-loader": "^7.1.2",
"babel-plugin-inline-react-svg": "^0.4.0",
"babel-plugin-styled-components": "^1.2.1",
"babel-preset-joyent-portal": "^3.1.0",
"babel-preset-joyent-portal": "^3.2.0",
"babel-template": "^6.26.0",
"camel-case": "^3.0.0",
"cross-env": "^5.0.5",
@ -53,17 +53,17 @@
"lodash.isequal": "^4.5.0",
"lodash.isequalwith": "^4.4.0",
"lodash.isstring": "^4.0.1",
"moment": "^2.19.0",
"moment": "^2.19.1",
"normalized-styled-components": "^1.0.17",
"pascal-case": "^2.0.1",
"polished": "^1.8.0",
"polished": "^1.8.1",
"prop-types": "^15.6.0",
"react-bundle": "^1.0.4",
"react-input-range": "^1.2.1",
"react-responsive": "^2.0.0",
"react-styled-flexboxgrid": "^2.0.3",
"react-styled-flexboxgrid": "^2.1.0",
"redrun": "^5.9.18",
"reduce-css-calc": "^2.1.0",
"reduce-css-calc": "^2.1.1",
"remcalc": "^1.0.9",
"rnd-id": "^1.1.1",
"styled-components": "^2.2.1",
@ -80,8 +80,8 @@
"babel-preset-stage-0": "^6.24.1",
"chart.js": "^2.7.0",
"css-loader": "^0.28.7",
"csso": "^3.2.0",
"eslint": "^4.8.0",
"csso": "^3.3.0",
"eslint": "^4.9.0",
"eslint-config-joyent-portal": "3.1.0",
"file-loader": "^1.1.5",
"http-server": "^0.10.0",
@ -95,13 +95,13 @@
"navalia": "^1.2.0",
"npm-run-all": "^4.1.1",
"react": "^16.0.0",
"react-docgen": "^2.18.0",
"react-docgen": "^2.19.0",
"react-docgen-displayname-handler": "^1.0.1",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.14",
"react-styleguidist": "^6.0.29",
"react-styleguidist": "^6.0.31",
"react-test-renderer": "^16.0.0",
"redux": "^3.7.2",
"redux-form": "^7.1.1",
@ -115,7 +115,7 @@
"tinycolor2": "^1.4.1",
"title-case": "^2.1.1",
"url-loader": "^0.6.2",
"webpack": "^3.6.0"
"webpack": "^3.7.1"
},
"peerDependencies": {
"chart.js": "^2.7.0",

View File

@ -5,18 +5,14 @@ import remcalc from 'remcalc';
import View from '../layout/view-container';
const Border = styled.div`
border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
`;
export default ({ children, ...rest }) => (
<Border {...rest}>
<div {...rest}>
<View>
<Row name="breadcrum">
<Col xs={12}>{children}</Col>
</Row>
</View>
</Border>
</div>
);
export { default as Item } from './item';