parent
c15d7ae020
commit
772b097458
@ -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
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
|
123
packages/my-joyent/src/components/filters/sliders.js
Normal file
123
packages/my-joyent/src/components/filters/sliders.js
Normal 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;
|
@ -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;
|
||||
|
@ -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;
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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';
|
||||
|
Loading…
Reference in New Issue
Block a user