import React, { PureComponent } from 'react';
import { Margin } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import { compose, graphql } 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 { withRouter } from 'react-router';
import { Field, reset } from 'redux-form';
import styled from 'styled-components';
import remcalc from 'remcalc';
import get from 'lodash.get';
import Step, {
Header as StepHeader,
Description as StepDescription,
Preview as StepPreview,
Outlet as StepOutlet
} from 'joyent-ui-resource-step';
import {
H2,
FormGroup,
FormLabel,
Input,
FormMeta,
Button,
RandomizeIcon as BaseRandomizeIcon,
NameIcon
} from 'joyent-ui-toolkit';
import GetRandomName from '../graphql/get-random-name.gql';
import { Forms, Values } from '../constants';
import { instanceName as validateName } from '../validators';
import { QueryBreakpoints } from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const { IR_NAME_F } = Forms;
const { IR_NAME_V_USE_RANDOM } = Values;
const RandomizeIcon = styled(BaseRandomizeIcon)`
height: ${remcalc(16)};
width: ${remcalc(16)};
`;
const NameContainer = ({
history,
randomizable = false,
initialValues,
handleValidate,
randomizing,
handleRandomize,
handleGetValue,
preview = {},
children,
...props
}) => (
{children}
{preview.name}
{({ next }) => (
{({ invalid }) => (
)}
)}
);
const TemplateName = props => (
}>Name this template
Please give your Template a name and define what prefix will be attached
to all instances created from this template.
);
const InstanceName = props => (
} randomizable>
Name this instance
Your instance name will be used to identify this specific instance.
);
const Name = ({ type = 'instance', ...props }) =>
type === 'instance' ? (
) : (
);
const Container = compose(
withRouter,
graphql(GetRandomName, {
options: () => ({
ssr: false
}),
props: ({ data = {} }) => data
}),
connect(
(store, ownProps) => {
const { values = {}, form } = store;
const { loading, rndName } = ownProps;
const formState = get(form, `${IR_NAME_F}.values`, {});
const useRandomName = get(values, IR_NAME_V_USE_RANDOM, false);
const name = (useRandomName && rndName) || '';
return {
randomizing: loading && useRandomName,
handleGetValue: () => formState,
initialValues: {
name
}
};
},
dispatch => ({
handleValidate: validateName,
handleRandomize: () => {
return dispatch([
reset(IR_NAME_F, 'name', ''),
set({ name: IR_NAME_V_USE_RANDOM, value: true })
]);
}
})
)
)(Name);
export default class extends PureComponent {
isValid(values) {
const msgs = validateName(values);
return !msgs || !Object.values(msgs).length;
}
render() {
const { children, ...props } = this.props;
return {children};
}
}