You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.9 KiB
75 lines
1.9 KiB
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Button from '../../../ui/button/button.component';
|
|
|
|
export default class AddToAddressBookModal extends Component {
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
};
|
|
|
|
static propTypes = {
|
|
hideModal: PropTypes.func.isRequired,
|
|
addToAddressBook: PropTypes.func.isRequired,
|
|
recipient: PropTypes.string.isRequired,
|
|
};
|
|
|
|
state = {
|
|
alias: '',
|
|
};
|
|
|
|
onSave = async () => {
|
|
const { recipient, addToAddressBook, hideModal } = this.props;
|
|
await addToAddressBook(recipient, this.state.alias);
|
|
hideModal();
|
|
};
|
|
|
|
onChange = (e) => {
|
|
this.setState({
|
|
alias: e.target.value,
|
|
});
|
|
};
|
|
|
|
onKeyPress = async (e) => {
|
|
if (e.key === 'Enter' && this.state.alias) {
|
|
this.onSave();
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const { t } = this.context;
|
|
|
|
return (
|
|
<div className="add-to-address-book-modal">
|
|
<div className="add-to-address-book-modal__content">
|
|
<div className="add-to-address-book-modal__content__header">
|
|
{t('addToAddressBook')}
|
|
</div>
|
|
<div className="add-to-address-book-modal__input-label">
|
|
{t('enterAnAlias')}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
className="add-to-address-book-modal__input"
|
|
placeholder={t('addToAddressBookModalPlaceholder')}
|
|
onChange={this.onChange}
|
|
onKeyPress={this.onKeyPress}
|
|
value={this.state.alias}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="add-to-address-book-modal__footer">
|
|
<Button type="secondary" onClick={this.props.hideModal}>
|
|
{t('cancel')}
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
onClick={this.onSave}
|
|
disabled={!this.state.alias}
|
|
>
|
|
{t('save')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|