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

153 lines
4.1 KiB
TypeScript
Raw Normal View History

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