accounts-frontend/src/components/ui/form/TextArea.js

90 lines
2.3 KiB
JavaScript
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
2016-05-22 22:55:38 +05:30
import classNames from 'classnames';
import { uniqueId, omit } from 'functions';
2016-05-30 10:10:59 +05:30
import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
2016-05-22 22:55:38 +05:30
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
export default class TextArea extends FormInputComponent {
static displayName = 'TextArea';
static propTypes = {
placeholder: PropTypes.oneOfType([
PropTypes.shape({
id: PropTypes.string
}),
PropTypes.string
]),
label: PropTypes.oneOfType([
PropTypes.shape({
id: PropTypes.string
}),
PropTypes.string
]),
error: PropTypes.string,
2016-05-30 10:10:59 +05:30
skin: PropTypes.oneOf(skins),
color: PropTypes.oneOf(colors)
};
static defaultProps = {
color: COLOR_GREEN,
skin: SKIN_DARK
2016-05-22 22:55:38 +05:30
};
render() {
2016-05-30 10:10:59 +05:30
const { color, skin } = this.props;
let { label } = this.props;
2016-05-22 22:55:38 +05:30
const props = omit({
2016-05-22 22:55:38 +05:30
type: 'text',
...this.props
}, Object.keys(TextArea.propTypes).filter((prop) => prop !== 'placeholder'));
2016-05-22 22:55:38 +05:30
if (label) {
if (!props.id) {
props.id = uniqueId('textarea');
}
label = this.formatMessage(label);
label = (
<label className={styles.textFieldLabel} htmlFor={props.id}>
{label}
</label>
);
}
props.placeholder = this.formatMessage(props.placeholder);
return (
<div className={styles.formRow}>
{label}
<div className={styles.textAreaContainer}>
<textarea ref={this.setEl}
className={classNames(
styles.textArea,
styles[`${skin}TextField`],
styles[`${color}TextField`]
)}
{...props}
/>
</div>
{this.renderError()}
</div>
);
}
getValue() {
return this.el.value;
}
focus() {
this.el.focus();
setTimeout(this.el.focus.bind(this.el), 10);
}
}