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 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 | 17x 1518x 24x 24x 1518x 1518x 1518x 759x 759x 3x 759x 759x 759x 3x 759x 1518x 24x 1518x 1518x 3x 1515x 3x 1512x 1518x 17x 17x 759x 759x | import React from 'react';
import classnames from 'classnames';
import { arrowsDefaultProps as defaultProps, arrowsPropTypes as propTypes } from './types';
const Arrow = ({
arrowsScroll,
// currentSlide,
clickHandler,
// slideCount,
type,
prevArrow,
nextArrow,
arrowsBlock,
}) => {
const ClickHandler = (options, e) => {
e.preventDefault();
clickHandler(options, e);
};
const classes = {
'carousel-arrow': true,
block: arrowsBlock,
};
const arrowOptions = {
arrowsScroll
};
if (type === 'prev') {
Object.assign(classes, {
'carousel-prev': true
});
if (prevArrow) {
Object.assign(classes, {
custom: true
});
}
Object.assign(arrowOptions, { message: 'previous' });
} else {
Object.assign(classes, {
'carousel-next': true
});
if (nextArrow) {
Object.assign(classes, {
custom: true
});
}
Object.assign(arrowOptions, { message: 'next' });
}
const arrowProps = {
key: type === 'prev' ? '0' : '1',
'data-role': 'none',
className: classnames(classes),
// style: { display: 'block' },
onClick: (e) => ClickHandler(arrowOptions, e)
};
// const customProps = {
// currentSlide,
// slideCount,
// };
let customArrow = null;
if (prevArrow && type === 'prev') {
customArrow = React.cloneElement(prevArrow, {
...arrowProps
// ...customProps,
});
} else if (nextArrow && type === 'next') {
customArrow = React.cloneElement(nextArrow, {
...arrowProps
// ...customProps,
});
} else {
customArrow = (
<button {...arrowProps} key={type === 'prev' ? '0' : '1'} type="button">
{' '}
{type === 'prev' ? 'Previous' : 'Next'}
</button>
);
}
return customArrow;
};
Arrow.propTypes = propTypes;
Arrow.defaultProps = defaultProps;
const PrevArrow = (props) => <Arrow type="prev" {...props} />;
const NextArrow = (props) => <Arrow type="next" {...props} />;
export { PrevArrow, NextArrow };
|