Focus the submit button (#3253)

Focus the submit button when confirmation modal is opened.

Also, changed cancellation link to button.
This makes the meaning clearer.
This commit is contained in:
Yamagishi Kazutoshi 2017-05-23 20:10:41 +09:00 committed by Eugen Rochko
parent 7eb4abe20a
commit 860ffc0560
5 changed files with 36 additions and 14 deletions

View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
class Button extends React.PureComponent {
@ -10,6 +11,7 @@ class Button extends React.PureComponent {
block: PropTypes.bool,
secondary: PropTypes.bool,
size: PropTypes.number,
className: PropTypes.string,
style: PropTypes.object,
children: PropTypes.node,
};
@ -24,6 +26,14 @@ class Button extends React.PureComponent {
}
}
setRef = (c) => {
this.node = c;
}
focus() {
this.node.focus();
}
render () {
const style = {
padding: `0 ${this.props.size / 2.25}px`,
@ -32,11 +42,17 @@ class Button extends React.PureComponent {
...this.props.style,
};
const className = classNames('button', this.props.className, {
'button-secondary': this.props.secondary,
'button--block': this.props.block,
});
return (
<button
className={`button ${this.props.secondary ? 'button-secondary' : ''} ${this.props.block ? 'button--block' : ''}`}
className={className}
disabled={this.props.disabled}
onClick={this.handleClick}
ref={this.setRef}
style={style}
>
{this.props.text || this.props.children}

View File

@ -13,18 +13,25 @@ class ConfirmationModal extends React.PureComponent {
intl: PropTypes.object.isRequired,
};
componentDidMount() {
this.button.focus();
}
handleClick = () => {
this.props.onClose();
this.props.onConfirm();
}
handleCancel = (e) => {
e.preventDefault();
handleCancel = () => {
this.props.onClose();
}
setRef = (c) => {
this.button = c;
}
render () {
const { intl, message, confirm, onConfirm, onClose } = this.props;
const { message, confirm } = this.props;
return (
<div className='modal-root__modal confirmation-modal'>
@ -33,8 +40,10 @@ class ConfirmationModal extends React.PureComponent {
</div>
<div className='confirmation-modal__action-bar'>
<div><a href='#' onClick={this.handleCancel}><FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /></a></div>
<Button text={confirm} onClick={this.handleClick} />
<Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
</Button>
<Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
</div>
</div>
);

View File

@ -3145,6 +3145,7 @@ button.icon-button.active i.fa-retweet {
.boost-modal__action-bar,
.confirmation-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
padding: 10px;
line-height: 36px;
@ -3179,14 +3180,9 @@ button.icon-button.active i.fa-retweet {
}
.confirmation-modal__action-bar {
& > div {
text-align: left;
padding: 0 16px;
}
a {
.confirmation-modal__cancel-button {
background-color: transparent;
color: darken($ui-secondary-color, 34%);
text-decoration: none;
font-size: 14px;
font-weight: 500;

View File

@ -37,6 +37,7 @@
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.11.1",
"classnames": "^2.2.5",
"coffee-loader": "^0.7.3",
"coffee-script": "^1.12.5",
"compression-webpack-plugin": "^0.4.0",

View File

@ -1542,7 +1542,7 @@ clap@^1.0.9:
dependencies:
chalk "^1.1.3"
classnames@^2.1.2, classnames@^2.2.3, classnames@~2.2:
classnames@^2.1.2, classnames@^2.2.3, classnames@^2.2.5, classnames@~2.2:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"