24 lines
1.0 KiB
React
24 lines
1.0 KiB
React
import React from 'react';
|
||
import './ImagePreview.css';
|
||
|
||
export default function ImagePreview({ images = [], visible = false, index = 0, onClose, onChange }) {
|
||
if (!visible) return null;
|
||
const len = images.length || 1;
|
||
const go = dir => onChange && onChange((index + dir + len) % len);
|
||
return (
|
||
<div className="aa-imgprev-mask" onClick={e => { if (e.target === e.currentTarget) onClose && onClose(); }}>
|
||
<button className="aa-imgprev-close" onClick={onClose}>✕</button>
|
||
<button className="aa-imgprev-arrow prev" onClick={() => go(-1)}>‹</button>
|
||
<img className="aa-imgprev-img" src={images[index]} alt={index} />
|
||
<button className="aa-imgprev-arrow next" onClick={() => go(1)}>›</button>
|
||
<div className="aa-imgprev-count">{index + 1} / {len}</div>
|
||
<div className="aa-imgprev-thumbs">
|
||
{images.map((u, i) => (
|
||
<img key={i} className={'aa-imgprev-thumb' + (i === index ? ' is-active' : '')}
|
||
src={u} onClick={() => onChange && onChange(i)} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|