2017-09-20 12:30:53 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
2017-09-27 17:24:40 +03:00
|
|
|
import { Field } from 'redux-form';
|
2017-09-20 12:30:53 +03:00
|
|
|
|
|
|
|
import {
|
|
|
|
FormGroup,
|
|
|
|
Input,
|
|
|
|
Button,
|
|
|
|
BinIcon,
|
|
|
|
QueryBreakpoints,
|
2017-09-27 17:24:40 +03:00
|
|
|
Divider,
|
|
|
|
Editor
|
2017-09-20 12:30:53 +03:00
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
const { SmallOnly, Small } = QueryBreakpoints;
|
|
|
|
|
2017-09-27 17:24:40 +03:00
|
|
|
const TextareaKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
<Row>
|
|
|
|
<Col xs={12} sm={10}>
|
|
|
|
<FormGroup name={formName} reduxForm>
|
|
|
|
<Input fluid mono marginless />
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs={6} sm={1}>
|
|
|
|
<Button type="button" onClick={() => onRemove(name)} secondary small icon fluid>
|
|
|
|
<BinIcon />
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<Col xs={6} sm={1}>
|
|
|
|
<Button type="submit" secondary small icon fluid>
|
|
|
|
S
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<Col xs={12} sm={12}>
|
|
|
|
<FormGroup name={formValue} reduxForm>
|
|
|
|
<Field name={formValue} component={Editor} mode='sh' />
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<SmallOnly>
|
|
|
|
<Divider height="4" width="100%" transparent />
|
|
|
|
</SmallOnly>
|
|
|
|
<Small>
|
|
|
|
<Divider height="2" width="100%" transparent />
|
|
|
|
</Small>
|
|
|
|
</Row>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
|
|
|
|
const InputKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
|
2017-09-20 12:30:53 +03:00
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
<Row>
|
|
|
|
<Col xs={12} sm={5}>
|
|
|
|
<FormGroup name={formName} reduxForm>
|
|
|
|
<Input fluid mono marginless />
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs={12} sm={5}>
|
|
|
|
<FormGroup name={formValue} reduxForm>
|
|
|
|
<Input fluid mono marginless />
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs={6} sm={1}>
|
|
|
|
<Button type="button" onClick={() => onRemove(name)} secondary small icon fluid>
|
|
|
|
<BinIcon />
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<Col xs={6} sm={1}>
|
|
|
|
<Button type="submit" secondary small icon fluid>
|
|
|
|
S
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<SmallOnly>
|
|
|
|
<Divider height="4" width="100%" transparent />
|
|
|
|
</SmallOnly>
|
|
|
|
</Row>
|
|
|
|
</form>
|
|
|
|
);
|
2017-09-27 17:24:40 +03:00
|
|
|
|
|
|
|
export default ({ textarea, ...rest }) => textarea
|
|
|
|
? <TextareaKeyValue {...rest} />
|
|
|
|
: <InputKeyValue {...rest} />;
|