| 1 | /* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-noninteractive-tabindex, react/jsx-props-no-spreading */
|
| 2 |
|
| 3 | const React = require('react');
|
| 4 |
|
| 5 | /**
|
| 6 | * A very simple, CSS-driven lightbox.
|
| 7 | * @todo currently, a new <Lightbox> instance is rendered for
|
| 8 | * each individual image! We should refactor to this to
|
| 9 | * use a single React portal component with public APIs.
|
| 10 | */
|
| 11 | // eslint-disable-next-line react/prop-types
|
| 12 | const Lightbox = ({ alt, onScroll, opened, ...attr }, ref) => {
|
| 13 | return (
|
| 14 | <span
|
| 15 | ref={ref}
|
| 16 | autoFocus={true}
|
| 17 | className="lightbox"
|
| 18 | onScrollCapture={onScroll}
|
| 19 | open={opened}
|
| 20 | role="dialog"
|
| 21 | tabIndex={0}
|
| 22 | >
|
| 23 | <span className="lightbox-inner">
|
| 24 | <img {...attr} alt={alt} className="lightbox-img" loading="lazy" title="Click to close..." />
|
| 25 | </span>
|
| 26 | </span>
|
| 27 | );
|
| 28 | };
|
| 29 |
|
| 30 | // forwardRef render functions throws a warning with propTypes/defaultProps
|
| 31 | /* Lightbox.propTypes = {
|
| 32 | alt: PropTypes.string,
|
| 33 | close: PropTypes.func,
|
| 34 | opened: PropTypes.bool,
|
| 35 | src: PropTypes.string,
|
| 36 | }; */
|
| 37 |
|
| 38 | module.exports = React.forwardRef(Lightbox);
|