import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import { compose } from 'react-apollo';
import { Link } from 'react-router-dom';
import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux';
import { set } from 'react-redux-values';
import { reset } from 'redux-form';
import { destroy } from 'redux-form';
import get from 'lodash.get';
import remcalc from 'remcalc';
import styled from 'styled-components';
import Step, {
Header as StepHeader,
Description as StepDescription,
Preview as StepPreview,
Outlet as StepOutlet
} from 'joyent-ui-resource-step';
import {
H3,
Button,
TagsIcon,
TagList as BaseTagList,
TagItem,
KeyValue
} from 'joyent-ui-toolkit';
import { addTag as validateTag } from '../validators';
import { Forms, Values } from '../constants';
const { IC_TAG_F_ADD, IC_TAG_F_EDIT } = Forms;
const { IC_TAG_V_ADD_OPEN, IC_TAG_V_TAGS } = Values;
const TagList = styled(BaseTagList)`
margin-bottom: ${remcalc(-6)};
`;
const TagCount = ({ total = 0 }) => (
{total} Tag{total === 1 ? '' : 's'}
);
const Tag = ({ name, value, onRemoveClick }) => (
{name ? `${name}: ${value}` : value}
);
const TagsContainer = ({
handleValidate,
handleGetValue,
preview = [],
tags = [],
addOpen = true,
shouldAsyncValidate,
handleAddTag,
handleAsyncValidate,
handleChangeAddOpen,
handleRemoveTag,
handleCancelEdit,
...props
}) => (
}>Tags
Tags can be used to identify your instances, group multiple instances
together, define firewall and affinity rules, and more.
{preview.map(({ name, value }, index) => (
))}
{({ next }) => (
{tags.length ? (
{tags.map(({ name, value }, index) => (
handleRemoveTag(index)}
/>
))}
) : null}
{addOpen ? (
{props => (
handleChangeAddOpen(false)}
/>
)}
) : (
)}
)}
);
export default compose(
connect(({ values }, ownProps) => {
const addOpen = get(values, IC_TAG_V_ADD_OPEN, false);
const tags = get(values, IC_TAG_V_TAGS, []);
return {
handleGetValue: () => tags,
addOpen,
tags
};
}),
connect(null, (dispatch, { tags = [], history }) => ({
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
handleValidate: validateTag,
handleAddTag: value => {
const toggleToClosed = set({ name: IC_TAG_V_ADD_OPEN, value: false });
const appendTag = set({
name: IC_TAG_V_TAGS,
value: tags.concat([{ ...value, expanded: false }])
});
return dispatch([destroy(IC_TAG_F_ADD), toggleToClosed, appendTag]);
},
handleChangeAddOpen: value => {
return dispatch([
reset(IC_TAG_F_ADD),
set({ name: IC_TAG_V_ADD_OPEN, value })
]);
},
handleCancelEdit: index => {
tags[index] = {
...tags[index],
expanded: false
};
return dispatch([
reset(IC_TAG_F_EDIT(index)),
set({ name: IC_TAG_V_TAGS, value: tags.slice() })
]);
},
handleRemoveTag: index => {
tags.splice(index, 1);
return dispatch([
destroy(IC_TAG_F_EDIT(index)),
set({ name: IC_TAG_V_TAGS, value: tags.slice() })
]);
}
}))
)(TagsContainer);