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';
|
|
|
|
|
2017-10-13 23:02:11 +03:00
|
|
|
const { SmallOnly } = QueryBreakpoints;
|
2017-09-20 12:30:53 +03:00
|
|
|
|
2017-09-27 17:44:57 +03:00
|
|
|
const TextareaKeyValue = ({
|
|
|
|
name,
|
|
|
|
formName,
|
|
|
|
formValue,
|
|
|
|
handleSubmit,
|
|
|
|
onRemove,
|
|
|
|
textarea
|
|
|
|
}) => (
|
2017-09-27 17:24:40 +03:00
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
<Row>
|
2017-10-13 23:02:11 +03:00
|
|
|
<Col xs={8} sm={10}>
|
2017-09-27 17:24:40 +03:00
|
|
|
<FormGroup name={formName} reduxForm>
|
|
|
|
<Input fluid mono marginless />
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
2017-10-13 23:02:11 +03:00
|
|
|
<Col xs={2} sm={1}>
|
2017-09-27 17:44:57 +03:00
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
onClick={() => onRemove(name)}
|
|
|
|
secondary
|
|
|
|
small
|
|
|
|
icon
|
|
|
|
fluid
|
2017-10-13 23:02:11 +03:00
|
|
|
marginless
|
2017-09-27 17:44:57 +03:00
|
|
|
>
|
2017-09-27 17:24:40 +03:00
|
|
|
<BinIcon />
|
|
|
|
</Button>
|
|
|
|
</Col>
|
2017-10-13 23:02:11 +03:00
|
|
|
<Col xs={2} sm={1}>
|
|
|
|
<Button type="submit" secondary small icon fluid marginless>
|
2017-09-27 17:24:40 +03:00
|
|
|
S
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<Col xs={12} sm={12}>
|
|
|
|
<FormGroup name={formValue} reduxForm>
|
2017-09-27 17:44:57 +03:00
|
|
|
<Field name={formValue} component={Editor} mode="sh" />
|
2017-09-27 17:24:40 +03:00
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
2017-10-13 23:02:11 +03:00
|
|
|
<Divider height="4" width="100%" transparent />
|
2017-09-27 17:24:40 +03:00
|
|
|
</Row>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
|
2017-09-27 17:44:57 +03:00
|
|
|
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}>
|
2017-09-27 17:44:57 +03:00
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
onClick={() => onRemove(name)}
|
|
|
|
secondary
|
|
|
|
small
|
|
|
|
icon
|
|
|
|
fluid
|
2017-10-13 23:02:11 +03:00
|
|
|
marginless
|
2017-09-27 17:44:57 +03:00
|
|
|
>
|
2017-09-20 12:30:53 +03:00
|
|
|
<BinIcon />
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<Col xs={6} sm={1}>
|
2017-10-13 23:02:11 +03:00
|
|
|
<Button type="submit" secondary small icon fluid marginless>
|
2017-09-20 12:30:53 +03:00
|
|
|
S
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<SmallOnly>
|
|
|
|
<Divider height="4" width="100%" transparent />
|
|
|
|
</SmallOnly>
|
|
|
|
</Row>
|
|
|
|
</form>
|
|
|
|
);
|
2017-09-27 17:24:40 +03:00
|
|
|
|
2017-09-27 17:44:57 +03:00
|
|
|
export default ({ textarea, ...rest }) =>
|
|
|
|
textarea ? <TextareaKeyValue {...rest} /> : <InputKeyValue {...rest} />;
|