2017-08-23 00:19:50 +05:30
|
|
|
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';
|
2019-12-08 00:32:00 +05:30
|
|
|
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';
|
2016-05-02 14:50:50 +05:30
|
|
|
import FormInputComponent from './FormInputComponent';
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
let copiedStateTimeout: NodeJS.Timeout;
|
2018-03-26 00:46:45 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
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
|
|
|
}
|
2019-06-30 19:02:50 +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;
|
2019-11-27 14:33:32 +05:30
|
|
|
}
|
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
|
|
|
}
|
2018-03-26 00:46:45 +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
|
|
|
}
|