e19eb60d1f
* Dynamically render forward text in Navigation component * Render either "Skip for now" or "Continue" on the FollowTags, ProfileForm, and FollowUsers components. * Refactor the ProfileForm component to dynamically change the button text based on the form's state. * Render specific button text for last onboarding slide * Fix back arrow styles for accessibility Also set an explicit width on the containing button around the svg. * Use min-width to specify back-button size
125 lines
3.4 KiB
JavaScript
125 lines
3.4 KiB
JavaScript
import { h, Component } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
class Navigation extends Component {
|
|
/**
|
|
* A function to render the progress stepper within the `Navigation` component.
|
|
* By default, it does not show the stepper for the first slide (the `IntroSlide` component).
|
|
* It builds a list of `<span>` elements correseponding to the slides, and adds an "active"
|
|
* class to any slide that has already been seen or is currently being seen.
|
|
*
|
|
* @returns {String} The HTML markup for the stepper.
|
|
*/
|
|
createStepper() {
|
|
const { currentSlideIndex, slidesCount } = this.props;
|
|
if (currentSlideIndex === 0) {
|
|
return '';
|
|
}
|
|
|
|
const stepsList = [];
|
|
|
|
// We do not show the stepper on the IntroSlide so we start with `i = 1`.
|
|
for (let i = 1; i < slidesCount; i += 1) {
|
|
const active = i <= currentSlideIndex;
|
|
|
|
stepsList.push(<span className={`dot ${active ? 'active' : ''}`} />);
|
|
}
|
|
return <div className="stepper">{stepsList}</div>;
|
|
}
|
|
|
|
/**
|
|
* A function to render the text for the "next-button" within the `Navigation` component.
|
|
* By default, it renders "Continue" for every slide.
|
|
* If the slide can be skipped, it renders "Skip for now".
|
|
* On the final slide, it renders "Finish".
|
|
*
|
|
* @returns {String} The HTML markup for the stepper.
|
|
*/
|
|
buttonText() {
|
|
const { canSkip, currentSlideIndex, slidesCount } = this.props;
|
|
if (slidesCount - 1 === currentSlideIndex) {
|
|
return 'Finish';
|
|
}
|
|
if (canSkip) {
|
|
return 'Skip for now';
|
|
}
|
|
|
|
return 'Continue';
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
next,
|
|
prev,
|
|
hideNext,
|
|
hidePrev,
|
|
disabled,
|
|
canSkip,
|
|
className,
|
|
} = this.props;
|
|
return (
|
|
<nav
|
|
className={`onboarding-navigation${
|
|
className && className.length > 0 ? ` ${className}` : ''
|
|
}`}
|
|
>
|
|
<div
|
|
className={`navigation-content${
|
|
className && className.length > 0 ? ` ${className}` : ''
|
|
}`}
|
|
>
|
|
{!hidePrev && (
|
|
<div className="back-button-container">
|
|
<button onClick={prev} className="back-button" type="button">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
className="crayons-icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{this.createStepper()}
|
|
|
|
{!hideNext && (
|
|
<button
|
|
disabled={disabled}
|
|
onClick={next}
|
|
className={`next-button${canSkip ? ' skip-for-now' : ''}`}
|
|
type="button"
|
|
>
|
|
{this.buttonText()}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
}
|
|
|
|
Navigation.propTypes = {
|
|
disabled: PropTypes.bool,
|
|
canSkip: PropTypes.bool,
|
|
className: PropTypes.string,
|
|
prev: PropTypes.func.isRequired,
|
|
next: PropTypes.string.isRequired,
|
|
hideNext: PropTypes.bool,
|
|
hidePrev: PropTypes.bool,
|
|
slidesCount: PropTypes.number.isRequired,
|
|
currentSlideIndex: PropTypes.number.isRequired,
|
|
};
|
|
|
|
Navigation.defaultProps = {
|
|
disabled: false,
|
|
canSkip: false,
|
|
hideNext: false,
|
|
hidePrev: false,
|
|
className: '',
|
|
};
|
|
|
|
export default Navigation;
|