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

View File

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

View File

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

View File

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

View File

@ -1542,7 +1542,7 @@ clap@^1.0.9:
dependencies: dependencies:
chalk "^1.1.3" 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" version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"