import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withTheme } from 'styled-components';
import { Row, Col } from 'react-styled-flexboxgrid';
import Value from 'react-redux-values';
import { Field } from 'redux-form';
import styled from 'styled-components';
import remcalc from 'remcalc';
import titleCase from 'title-case';
import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
import {
Message,
MessageDescription,
H4,
MessageTitle,
Card,
CardHeader,
CardHeaderMeta,
CardHeaderBox,
CardOutlet,
ChevronIcon,
FormGroup,
FormLabel,
Input,
FormMeta,
Button,
Textarea,
Editor,
Divider,
DeleteIcon
} from 'joyent-ui-toolkit';
const CollapsedKeyValue = styled.span`
word-break: break-all;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
`;
class ValueTextareaField extends PureComponent {
render() {
const { input, submitting } = this.props;
return input.value === 'user-script' ? (