Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 27x 27x | import { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { IconButton } from '@folio/stripes/components';
import css from '../../../styles/CycleButton.css';
const CycleButton = ({
buttons,
startIndex = 0
}) => {
const [index, setIndex] = useState(startIndex);
const { className, onClick, ...buttonProps } = buttons[index];
return (
<IconButton
{...buttonProps}
className={classnames(
className,
css.buttonStyle,
)}
onClick={(e) => {
if (onClick) {
onClick(e);
}
setIndex(index !== (buttons?.length - 1) ? index + 1 : 0);
}}
/>
);
};
CycleButton.propTypes = {
buttons: PropTypes.arrayOf(PropTypes.shape({
className: PropTypes.object,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
})),
startIndex: PropTypes.number
};
export default CycleButton;
|