/
navigation.js
93 lines (89 loc) · 2.23 KB
/
navigation.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { Button, IconButton } from '@wordpress/components';
/**
* Inner Block Slider Navigation component.
*
* @param {object} props Props
* @param {number} props.totalPages Total pages.
* @param {number} props.currentPage Current pages.
* @param {Function} props.setCurrentPage Set current page.
* @param {boolean} props.prevEnabled Is previous page enabled.
* @param {boolean} props.nextEnabled Is Next button enabled.
* @param {Function} props.addSlide Add slide callback.
* @param {boolean} props.addSlideEnabled Is add slide button enabled.
* @returns {React.ReactNode} Component.
*/
function Navigation( {
totalPages,
currentPage,
setCurrentPage,
prevEnabled,
nextEnabled,
addSlide = () => {},
addSlideEnabled = false,
} ) {
return (
<div className="inner-block-slider__navigation">
<IconButton
disabled={ ! prevEnabled }
icon="arrow-left-alt2"
isSecondary
isSmall
onClick={ () => {
if ( prevEnabled ) {
setCurrentPage( currentPage - 1 );
}
} }
/>
{ [ ...Array( totalPages ).keys() ].map( ( i ) => (
<Button
key={ i + 1 }
aria-label={ `Slide ${ i + 1 }` }
className={ classNames(
'components-button',
'is-not-small',
{
'is-primary': currentPage === i + 1,
'is-secondary': currentPage !== i + 1,
}
) }
type="button"
onClick={ () => {
setCurrentPage( i + 1 );
} }
>
{ i + 1 }
</Button>
) ) }
<IconButton
disabled={ ! nextEnabled }
icon="arrow-right-alt2"
isSecondary
isSmall
onClick={ () => {
if ( nextEnabled ) {
setCurrentPage( currentPage + 1 );
}
} }
/>
<IconButton
disabled={ ! addSlideEnabled }
icon="plus-alt2"
isSecondary
isSmall
onClick={ () => addSlide() }
/>
</div>
);
}
Navigation.propTypes = {
totalPages: PropTypes.number.isRequired,
currentPage: PropTypes.number.isRequired,
setCurrentPage: PropTypes.func.isRequired,
prevEnabled: PropTypes.bool.isRequired,
nextEnabled: PropTypes.bool.isRequired,
addSlide: PropTypes.func,
addSlideEnabled: PropTypes.bool,
};
export default Navigation;