File size: 2,015 Bytes
4304c6d |
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 |
'use client'
import type { FC } from 'react'
import React, { useState } from 'react'
import cn from 'classnames'
import s from './style.module.css'
import ImagePreview from '@/app/components/base/image-uploader/image-preview'
type Props = {
srcs: string[]
}
const getWidthStyle = (imgNum: number) => {
if (imgNum === 1) {
return {
maxWidth: '100%',
}
}
if (imgNum === 2 || imgNum === 4) {
return {
width: 'calc(50% - 4px)',
}
}
return {
width: 'calc(33.3333% - 5.3333px)',
}
}
const ImageGallery: FC<Props> = ({
srcs,
}) => {
const [imagePreviewUrl, setImagePreviewUrl] = useState('')
const imgNum = srcs.length
const imgStyle = getWidthStyle(imgNum)
return (
<div className={cn(s[`img-${imgNum}`], 'flex flex-wrap')}>
{/* TODO: support preview */}
{srcs.map((src, index) => (
// eslint-disable-next-line @next/next/no-img-element
<img
key={index}
className={s.item}
style={imgStyle}
src={src}
alt=''
onClick={() => setImagePreviewUrl(src)}
/>
))}
{
imagePreviewUrl && (
<ImagePreview
url={imagePreviewUrl}
onCancel={() => setImagePreviewUrl('')}
/>
)
}
</div>
)
}
export default React.memo(ImageGallery)
export const ImageGalleryTest = () => {
const imgGallerySrcs = (() => {
const srcs = []
for (let i = 0; i < 6; i++)
// srcs.push('https://placekitten.com/640/360')
// srcs.push('https://placekitten.com/360/640')
srcs.push('https://placekitten.com/360/360')
return srcs
})()
return (
<div className='space-y-2'>
{imgGallerySrcs.map((_, index) => (
<div key={index} className='p-4 pb-2 rounded-lg bg-[#D1E9FF80]'>
<ImageGallery srcs={imgGallerySrcs.slice(0, index + 1)} />
</div>
))}
</div>
)
}
|