accounts-frontend/packages/app/components/ui/form/TextArea.tsx

106 lines
2.4 KiB
TypeScript
Raw Normal View History

import React from 'react';
2019-12-07 16:58:52 +05:30
import { MessageDescriptor } from 'react-intl';
import TextareaAutosize from 'react-textarea-autosize';
2019-12-08 01:13:08 +05:30
import clsx from 'clsx';
import { uniqueId, omit } from 'app/functions';
import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';
2016-05-22 22:55:38 +05:30
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
type TextareaAutosizeProps = {
2019-12-07 16:58:52 +05:30
onHeightChange?: (number, TextareaAutosizeProps) => void;
useCacheForDOMMeasurements?: boolean;
minRows?: number;
maxRows?: number;
inputRef?: (el?: HTMLTextAreaElement) => void;
};
export default class TextArea extends FormInputComponent<
{
2019-12-07 16:58:52 +05:30
placeholder?: string | MessageDescriptor;
label?: string | MessageDescriptor;
skin: Skin;
color: Color;
} & TextareaAutosizeProps &
React.TextareaHTMLAttributes<HTMLTextAreaElement>
> {
static defaultProps = {
color: COLOR_GREEN,
skin: SKIN_DARK,
};
elRef = React.createRef<HTMLTextAreaElement>();
render() {
2019-12-07 16:58:52 +05:30
const {
color,
skin,
label: labelText,
placeholder: placeholderText,
} = this.props;
let label: React.ReactElement | undefined;
let placeholder: string | undefined;
const props = omit(
{
type: 'text',
...this.props,
},
2019-12-07 16:58:52 +05:30
['label', 'placeholder', 'error', 'skin', 'color'],
);
2019-12-07 16:58:52 +05:30
if (labelText) {
if (!props.id) {
props.id = uniqueId('textarea');
}
label = (
<label className={styles.textFieldLabel} htmlFor={props.id}>
2019-12-07 16:58:52 +05:30
{this.formatMessage(labelText)}
</label>
);
2016-05-22 22:55:38 +05:30
}
2019-12-07 16:58:52 +05:30
if (placeholderText) {
placeholder = this.formatMessage(placeholderText);
}
return (
<div className={styles.formRow}>
{label}
<div className={styles.textAreaContainer}>
<TextareaAutosize
inputRef={this.elRef}
2019-12-08 01:13:08 +05:30
className={clsx(
styles.textArea,
styles[`${skin}TextField`],
styles[`${color}TextField`],
)}
2019-12-07 16:58:52 +05:30
placeholder={placeholder}
{...props}
/>
</div>
{this.renderError()}
</div>
);
}
getValue() {
const { current: el } = this.elRef;
return el && el.value;
}
focus() {
const { current: el } = this.elRef;
if (!el) {
return;
2016-05-22 22:55:38 +05:30
}
el.focus();
setTimeout(el.focus.bind(el), 10);
}
2016-05-22 22:55:38 +05:30
}