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

fixes #766
2017-10-17 11:00:21 +01:00 · 2017-10-17 11:00:21 +01:00 · 772b097458
parent c15d7ae020
commit 772b097458
12 changed files with 870 additions and 744 deletions
--- a/packages/my-joyent/src/components/diskTypeForm/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/components/diskTypeForm/tests/snapshots/index.spec.js.snap
@ -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
--- a/packages/my-joyent/src/components/empty/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/components/empty/tests/snapshots/index.spec.js.snap
@ -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;
--- a/packages/my-joyent/src/components/filters/tests/snapshots/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/tests/snapshots/filters.spec.js.snap
@ -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
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@ -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>
    );
--- a/packages/my-joyent/src/components/filters/sliders.js
+++ b/packages/my-joyent/src/components/filters/sliders.js
@ -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;
--- a/packages/my-joyent/src/components/package/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/tests/snapshots/index.spec.js.snap
@ -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;
--- a/packages/my-joyent/src/components/packages/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/tests/snapshots/list.spec.js.snap
@ -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;
--- a/packages/my-joyent/src/containers/home/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/home/tests/snapshots/index.spec.js.snap
--- a/packages/my-joyent/src/containers/packages/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/packages/tests/snapshots/index.spec.js.snap
@ -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;
--- a/packages/ui-toolkit/etc/style.css
+++ b/packages/ui-toolkit/etc/style.css
@ -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;
 }

--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@ -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",
--- a/packages/ui-toolkit/src/breadcrumb/index.js
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@ -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';