45 lines
1.0 KiB
JavaScript
45 lines
1.0 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { Field } from 'redux-form';
|
|
import { Margin } from 'styled-components-spacing';
|
|
|
|
import {
|
|
H3,
|
|
P,
|
|
FormGroup,
|
|
FormLabel,
|
|
Input,
|
|
FormMeta,
|
|
Button
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
|
|
<form onSubmit={handleSubmit}>
|
|
{expanded ? (
|
|
<Fragment>
|
|
<Margin bottom={3}>
|
|
<P>
|
|
Your instance name will be used to identify this specific instance.
|
|
</P>
|
|
</Margin>
|
|
<FormGroup name="name" fluid field={Field}>
|
|
<FormLabel>Name</FormLabel>
|
|
<Input />
|
|
<FormMeta />
|
|
</FormGroup>
|
|
<Button type="submit" disabled={pristine}>
|
|
Next
|
|
</Button>
|
|
</Fragment>
|
|
) : (
|
|
<Fragment>
|
|
<Margin bottom={2} top={3}>
|
|
<H3>{name}</H3>
|
|
</Margin>
|
|
<Button type="button" secondary onClick={onCancel}>
|
|
Edit
|
|
</Button>
|
|
</Fragment>
|
|
)}
|
|
</form>
|
|
);
|