Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(instances): create instance - networks responsive next button

This commit is contained in:
Fábio Moreira 2018-05-30 14:11:48 +01:00 committed by Sérgio Ramos
parent 6698a8eacb
commit c268d88a4d
1 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/instance-steps/src/networks/index.js
View File

@ -1,5 +1,5 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing'; import { Margin, Padding } from 'styled-components-spacing';
import { compose, graphql } from 'react-apollo'; import { compose, graphql } from 'react-apollo';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
@ -9,7 +9,7 @@ import get from 'lodash.get';
import forceArray from 'force-array'; import forceArray from 'force-array';
import includes from 'lodash.includes'; import includes from 'lodash.includes';
import find from 'lodash.find'; import find from 'lodash.find';
import styled from 'styled-components'; import styled, { withTheme } from 'styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import Step, { import Step, {
@ -28,10 +28,6 @@ import { Forms, Values } from '../constants';
const { IR_NW_F } = Forms; const { IR_NW_F } = Forms;
const { IR_NW_V_INFO_EXPANDED, IR_NW_V_MACHINES_EXPANDED } = Values; const { IR_NW_V_INFO_EXPANDED, IR_NW_V_MACHINES_EXPANDED } = Values;
const Form = styled.form`
padding-top: ${remcalc(1)};
`;
const Networks = ({ const Networks = ({
preview = [], preview = [],
initialValues, initialValues,
@ -41,6 +37,7 @@ const Networks = ({
setMachinesExpanded, setMachinesExpanded,
networks = [], networks = [],
loading, loading,
theme = {},
...props ...props
}) => ( }) => (
<Step name="networks" getValue={handleGetValue} {...props}> <Step name="networks" getValue={handleGetValue} {...props}>
@ -84,40 +81,45 @@ const Networks = ({
<StatusLoader /> <StatusLoader />
) : ( ) : (
<Fragment> <Fragment>
<Form> <Padding top={1}>
{networks.map( <form>
( {networks.map(
{ (
id, {
selected, id,
infoExpanded, selected,
machinesExpanded, infoExpanded,
...network machinesExpanded,
}, ...network
index },
) => ( index
<NetworkWidget ) => (
noMargin={index === networks.length - 1} <NetworkWidget
key={id} noMargin={index === networks.length - 1}
id={id} key={id}
selected={selected} id={id}
infoExpanded={infoExpanded} selected={selected}
machinesExpanded={machinesExpanded} infoExpanded={infoExpanded}
onInfoClick={() => setInfoExpanded(id, !infoExpanded)} machinesExpanded={machinesExpanded}
onMachinesClick={() => onInfoClick={() =>
setMachinesExpanded(id, !machinesExpanded) setInfoExpanded(id, !infoExpanded)
} }
{...network} onMachinesClick={() =>
/> setMachinesExpanded(id, !machinesExpanded)
) }
)} {...network}
</Form> />
)
)}
</form>
</Padding>
<Margin top="5"> <Margin top="5">
<Button <Button
id="next-button-networks" id="next-button-networks"
type="button" type="button"
component={Link} component={Link}
to={next} to={next}
fluid={theme.screen === 'mobile'}
> >
Next Next
</Button> </Button>
@ -198,4 +200,4 @@ export default compose(
} }
}) })
) )
)(Networks); )(withTheme(({ ...rest }) => <Networks {...rest} />));