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

179 lines
3.8 KiB
TypeScript
Raw Normal View History

import React from 'react';
2019-12-07 16:58:52 +05:30
import { MessageDescriptor } from 'react-intl';
2016-05-02 12:45:42 +05:30
import classNames from 'classnames';
import { uniqueId, omit } from 'app/functions';
import copy from 'app/services/copy';
import icons from 'app/components/ui/icons.scss';
import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';
2016-05-02 12:45:42 +05:30
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
2016-05-02 12:45:42 +05:30
2019-12-07 16:58:52 +05:30
let copiedStateTimeout: NodeJS.Timeout;
export default class Input extends FormInputComponent<
2019-12-07 16:58:52 +05:30
Omit<React.InputHTMLAttributes<HTMLInputElement>, 'placeholder'> & {
skin: Skin;
color: Color;
center: boolean;
disabled: boolean;
label?: string | MessageDescriptor;
placeholder?: string | MessageDescriptor;
error?: string | { type: string; payload: string };
icon?: string;
copy?: boolean;
},
{
2019-12-07 16:58:52 +05:30
wasCopied: boolean;
}
> {
static defaultProps = {
color: COLOR_GREEN,
skin: SKIN_DARK,
center: false,
disabled: false,
};
state = {
wasCopied: false,
};
elRef = React.createRef<HTMLInputElement>();
render() {
2019-12-07 16:58:52 +05:30
const {
color,
skin,
center,
icon: iconType,
copy: showCopyIcon,
placeholder: placeholderText,
} = this.props;
let { label: labelContent } = this.props;
const { wasCopied } = this.state;
2019-12-07 16:58:52 +05:30
let placeholder: string | undefined;
const props = omit(
{
type: 'text',
...this.props,
},
2019-12-07 16:58:52 +05:30
[
'label',
'placeholder',
'error',
'skin',
'color',
'center',
'icon',
'copy',
],
);
2019-12-07 16:58:52 +05:30
let label: React.ReactElement | null = null;
let copyIcon: React.ReactElement | null = null;
let icon: React.ReactElement | null = null;
if (labelContent) {
if (!props.id) {
props.id = uniqueId('input');
}
2019-12-07 16:58:52 +05:30
labelContent = this.formatMessage(labelContent);
label = (
<label className={styles.textFieldLabel} htmlFor={props.id}>
2019-12-07 16:58:52 +05:30
{labelContent}
</label>
);
2016-05-02 12:45:42 +05:30
}
2019-12-07 16:58:52 +05:30
if (placeholderText) {
placeholder = this.formatMessage(placeholderText);
}
let baseClass = styles.formRow;
2016-05-02 12:45:42 +05:30
2019-12-07 16:58:52 +05:30
if (iconType) {
baseClass = styles.formIconRow;
2019-12-07 16:58:52 +05:30
icon = (
<span className={classNames(styles.textFieldIcon, icons[iconType])} />
);
}
2018-05-05 14:31:25 +05:30
2019-12-07 16:58:52 +05:30
if (showCopyIcon) {
copyIcon = (
<div
className={classNames(styles.copyIcon, {
[icons.clipboard]: !wasCopied,
[icons.checkmark]: wasCopied,
[styles.copyCheckmark]: wasCopied,
})}
onClick={this.onCopy}
/>
);
}
2018-05-03 10:45:09 +05:30
return (
<div className={baseClass}>
{label}
<div className={styles.textFieldContainer}>
<input
ref={this.elRef}
className={classNames(
styles[`${skin}TextField`],
styles[`${color}TextField`],
{
[styles.textFieldCenter]: center,
},
)}
2019-12-07 16:58:52 +05:30
placeholder={placeholder}
{...props}
/>
{icon}
2019-12-07 16:58:52 +05:30
{copyIcon}
</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-02 12:45:42 +05:30
}
el.focus();
setTimeout(el.focus.bind(el), 10);
}
2018-05-05 14:31:25 +05:30
onCopy = async () => {
const value = this.getValue();
2018-05-05 12:35:57 +05:30
if (!value) {
return;
}
2019-11-09 18:37:03 +05:30
try {
clearTimeout(copiedStateTimeout);
copiedStateTimeout = setTimeout(
() => this.setState({ wasCopied: false }),
2000,
);
await copy(value);
this.setState({ wasCopied: true });
} catch (err) {
// it's okay
}
};
2016-05-02 12:45:42 +05:30
}