feat(instances): wip networks, tags
This commit is contained in:
johnytiago
parent
f007889283
commit
1317894f27
@ -9,6 +9,8 @@ import get from 'lodash.get';
|
||||
import forceArray from 'force-array';
|
||||
import includes from 'lodash.includes';
|
||||
import find from 'lodash.find';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Step, {
|
||||
Header as StepHeader,
|
||||
@ -26,6 +28,10 @@ import { Forms, Values } from '../constants';
|
||||
const { IC_NW_F } = Forms;
|
||||
const { IC_NW_V_INFO_EXPANDED, IC_NW_V_MACHINES_EXPANDED } = Values;
|
||||
|
||||
const Form = styled.form`
|
||||
padding-top: ${remcalc(1)};
|
||||
`;
|
||||
|
||||
const Network = ({
|
||||
preview = [],
|
||||
initialValues,
|
||||
@ -78,7 +84,7 @@ const Network = ({
|
||||
<StatusLoader />
|
||||
) : (
|
||||
<Fragment>
|
||||
<form>
|
||||
<Form>
|
||||
{networks.map(
|
||||
(
|
||||
{
|
||||
@ -105,7 +111,7 @@ const Network = ({
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</form>
|
||||
</Form>
|
||||
<Margin top="5">
|
||||
<Button type="button" component={Link} to={next}>
|
||||
Save
|
||||
|
||||
@ -39,7 +39,7 @@ const TagList = styled(BaseTagList)`
|
||||
|
||||
const Tag = ({ name, value, onRemoveClick }) => (
|
||||
<Margin right={1} bottom={1} key={`${name}-${value}`}>
|
||||
<TagItem onRemoveClick={onRemoveClick}>
|
||||
<TagItem fill="grey" onRemoveClick={onRemoveClick}>
|
||||
{name ? `${name}: ${value}` : value}
|
||||
</TagItem>
|
||||
</Margin>
|
||||
@ -96,28 +96,30 @@ const TagsContainer = ({
|
||||
) : null}
|
||||
{addOpen ? (
|
||||
<Fragment>
|
||||
<ReduxForm
|
||||
form={IC_TAG_F_ADD}
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
shouldAsyncValidate={shouldAsyncValidate}
|
||||
asyncValidate={handleValidate}
|
||||
onSubmit={handleAddTag}
|
||||
>
|
||||
{props => (
|
||||
<Fragment>
|
||||
<KeyValue
|
||||
{...props}
|
||||
method="add"
|
||||
input="input"
|
||||
type="tag"
|
||||
expanded
|
||||
borderless
|
||||
onCancel={() => handleChangeAddOpen(false)}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</ReduxForm>
|
||||
<Margin top={2}>
|
||||
<ReduxForm
|
||||
form={IC_TAG_F_ADD}
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
shouldAsyncValidate={shouldAsyncValidate}
|
||||
asyncValidate={handleValidate}
|
||||
onSubmit={handleAddTag}
|
||||
>
|
||||
{props => (
|
||||
<Fragment>
|
||||
<KeyValue
|
||||
{...props}
|
||||
method="add"
|
||||
input="input"
|
||||
type="tag"
|
||||
expanded
|
||||
borderless
|
||||
onCancel={() => handleChangeAddOpen(false)}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</ReduxForm>
|
||||
</Margin>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Margin top={5}>
|
||||
|
||||
@ -6,6 +6,7 @@ import { Margin, Padding } from 'styled-components-spacing';
|
||||
import styled from 'styled-components';
|
||||
import Flex, { FlexItem } from 'styled-flex-component';
|
||||
import remcalc from 'remcalc';
|
||||
import { isNot } from 'styled-is';
|
||||
|
||||
import {
|
||||
H4,
|
||||
@ -13,7 +14,7 @@ import {
|
||||
Small,
|
||||
DotIcon,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardHeader as BaseCardHeader,
|
||||
CardHeaderMeta,
|
||||
CardHeaderBox,
|
||||
CardOutlet,
|
||||
@ -38,6 +39,12 @@ const Box = styled.div`
|
||||
min-width: ${remcalc(300)};
|
||||
`;
|
||||
|
||||
const CardHeader = styled(BaseCardHeader)`
|
||||
${isNot('secondary')`
|
||||
background-color: #f7f7f7;
|
||||
`};
|
||||
`;
|
||||
|
||||
export const Collapsed = ({ name, fabric, ...network }) => (
|
||||
<Margin inline right={3} top={3}>
|
||||
<Box>
|
||||
@ -186,7 +193,7 @@ export const Expanded = ({
|
||||
<Fragment>
|
||||
<Margin top={3}>
|
||||
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
|
||||
<CardHeader
|
||||
<BaseCardHeader
|
||||
secondary={false}
|
||||
transparent={false}
|
||||
onClick={onInfoClick}
|
||||
@ -199,7 +206,7 @@ export const Expanded = ({
|
||||
<CardHeaderBox>
|
||||
<ArrowIcon direction={infoExpanded ? 'up' : 'down'} />
|
||||
</CardHeaderBox>
|
||||
</CardHeader>
|
||||
</BaseCardHeader>
|
||||
{infoExpanded ? (
|
||||
<CardOutlet>
|
||||
<Padding all={3}>
|
||||
@ -277,7 +284,7 @@ export const Expanded = ({
|
||||
collapsed={!machinesExpanded}
|
||||
actionable={!machinesExpanded}
|
||||
>
|
||||
<CardHeader
|
||||
<BaseCardHeader
|
||||
secondary={false}
|
||||
transparent={false}
|
||||
onClick={onMachinesClick}
|
||||
@ -292,7 +299,7 @@ export const Expanded = ({
|
||||
direction={machinesExpanded ? 'up' : 'down'}
|
||||
/>
|
||||
</CardHeaderBox>
|
||||
</CardHeader>
|
||||
</BaseCardHeader>
|
||||
{machinesExpanded ? (
|
||||
<CardOutlet>
|
||||
<Padding top={2} bottom={2} left={3} right={3}>
|
||||
|
||||
@ -210,7 +210,7 @@ export const KeyValue = ({
|
||||
onClick={handleHeaderClick}
|
||||
>
|
||||
<PaddingMaxWidth left={borderless ? 0 : 3} right={borderless ? 0 : 3}>
|
||||
<Flex alignCenter justifyBetween full>
|
||||
<Flex alignCenter justifyBetween>
|
||||
<Meta>
|
||||
{method === 'add' || method === 'create' ? (
|
||||
<H4>{`${titleCase(method)} ${type}`}</H4>
|
||||
|
||||
@ -46,13 +46,13 @@ const Tag = styled.li`
|
||||
`;
|
||||
|
||||
export default withTheme(
|
||||
({ theme, children, active, onRemoveClick, ...rest }) => (
|
||||
({ theme, children, active, onRemoveClick, fill = null, ...rest }) => (
|
||||
<Container>
|
||||
<Tag active={active} {...rest}>
|
||||
{children}
|
||||
{onRemoveClick ? (
|
||||
<CloseIcon
|
||||
fill={active ? theme.primaryActive : theme.text}
|
||||
fill={fill ? fill : active ? theme.primaryActive : theme.text}
|
||||
disabled
|
||||
onClick={onRemoveClick}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user