mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-23 15:42:34 +01:00
Change anchor to button element (#3321)
Fix warning for ESLint (jsx-a11y/href-no-hash).
This commit is contained in:
parent
2531c5953b
commit
4b11675bdc
4 changed files with 43 additions and 22 deletions
|
@ -22,7 +22,7 @@ class Button extends React.PureComponent {
|
||||||
|
|
||||||
handleClick = (e) => {
|
handleClick = (e) => {
|
||||||
if (!this.props.disabled) {
|
if (!this.props.disabled) {
|
||||||
this.props.onClick();
|
this.props.onClick(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,9 @@ import { FormattedMessage } from 'react-intl';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
const LoadMore = ({ onClick }) => (
|
const LoadMore = ({ onClick }) => (
|
||||||
<a href="#" className='load-more' role='button' onClick={onClick}>
|
<button className='load-more' onClick={onClick}>
|
||||||
<FormattedMessage id='status.load_more' defaultMessage='Load more' />
|
<FormattedMessage id='status.load_more' defaultMessage='Load more' />
|
||||||
</a>
|
</button>
|
||||||
);
|
);
|
||||||
|
|
||||||
LoadMore.propTypes = {
|
LoadMore.propTypes = {
|
||||||
|
|
|
@ -191,15 +191,14 @@ class OnboardingModal extends React.PureComponent {
|
||||||
this.setState({ currentIndex: i });
|
this.setState({ currentIndex: i });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleNext = (e) => {
|
handleNext = () => {
|
||||||
const maxNum = Number(e.currentTarget.getAttribute('data-length'));
|
this.setState(({ currentIndex }) => ({
|
||||||
e.preventDefault();
|
currentIndex: currentIndex + 1,
|
||||||
|
}));
|
||||||
if (this.state.currentIndex < maxNum - 1) {
|
|
||||||
this.setState({ currentIndex: this.state.currentIndex + 1 });
|
|
||||||
} else {
|
|
||||||
this.props.onClose();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleClose = () => {
|
||||||
|
this.props.onClose();
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
@ -216,13 +215,21 @@ class OnboardingModal extends React.PureComponent {
|
||||||
const { currentIndex } = this.state;
|
const { currentIndex } = this.state;
|
||||||
const hasMore = currentIndex < pages.length - 1;
|
const hasMore = currentIndex < pages.length - 1;
|
||||||
|
|
||||||
let nextOrDoneBtn;
|
const nextOrDoneBtn = hasMore ? (
|
||||||
|
<button
|
||||||
if(hasMore) {
|
onClick={this.handleNext}
|
||||||
nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next'><FormattedMessage id='onboarding.next' defaultMessage='Next' /></a>;
|
className='onboarding-modal__nav onboarding-modal__next'
|
||||||
} else {
|
>
|
||||||
nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__done'><FormattedMessage id='onboarding.done' defaultMessage='Done' /></a>;
|
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
|
||||||
}
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={this.handleClose}
|
||||||
|
className='onboarding-modal__nav onboarding-modal__done'
|
||||||
|
>
|
||||||
|
<FormattedMessage id='onboarding.done' defaultMessage='Done' />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
const styles = pages.map((page, i) => ({
|
const styles = pages.map((page, i) => ({
|
||||||
key: `page-${i}`,
|
key: `page-${i}`,
|
||||||
|
@ -243,7 +250,12 @@ class OnboardingModal extends React.PureComponent {
|
||||||
|
|
||||||
<div className='onboarding-modal__paginator'>
|
<div className='onboarding-modal__paginator'>
|
||||||
<div>
|
<div>
|
||||||
<a href='#' className='onboarding-modal__skip' onClick={this.handleSkip}><FormattedMessage id='onboarding.skip' defaultMessage='Skip' /></a>
|
<button
|
||||||
|
onClick={this.handleSkip}
|
||||||
|
className='onboarding-modal__nav onboarding-modal__skip'
|
||||||
|
>
|
||||||
|
<FormattedMessage id='onboarding.skip' defaultMessage='Skip' />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='onboarding-modal__dots'>
|
<div className='onboarding-modal__dots'>
|
||||||
|
|
|
@ -1965,9 +1965,14 @@ button.icon-button.active i.fa-retweet {
|
||||||
.load-more {
|
.load-more {
|
||||||
display: block;
|
display: block;
|
||||||
color: lighten($ui-base-color, 26%);
|
color: lighten($ui-base-color, 26%);
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
font-size: inherit;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
text-decoration: none;
|
width: 100%;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -2916,11 +2921,15 @@ button.icon-button.active i.fa-retweet {
|
||||||
min-width: 33px;
|
min-width: 33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.onboarding-modal__nav {
|
||||||
color: darken($ui-secondary-color, 34%);
|
color: darken($ui-secondary-color, 34%);
|
||||||
text-decoration: none;
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
padding: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
Loading…
Reference in a new issue