admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feature/IO-3431-Job-Image-Gallery (pull request #2776)

Browse Source 
IO-3431 Job Image Gallery

Approved-by: Dave Richer
This commit is contained in:
Allan Carr
2026-01-05 22:30:15 +00:00
committed by Dave Richer
parent 0dd29580d0 021bf714d6
commit decb75a579
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx
View File

@@ -1,3 +1,4 @@
import { Checkbox } from "antd";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
/** /**
@@ -7,18 +8,19 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
* - images: Array<{ src, fullsize, filename?, isSelected? }> * - images: Array<{ src, fullsize, filename?, isSelected? }>
* - onToggle(index) * - onToggle(index)
* - onClick(index) optional for viewing * - onClick(index) optional for viewing
* - thumbSize: automatically set to 125 for chat, 250 for default
*/ */
export function LocalMediaGrid({ export function LocalMediaGrid({
images, images,
onToggle, onToggle,
onClick, onClick,
thumbSize = 100,
gap = 8, gap = 8,
minColumns = 3, minColumns = 3,
maxColumns = 12, maxColumns = 12,
context = "default", context = "default",
expandHeight = false expandHeight = false
}) { }) {
const thumbSize = context === "chat" ? 100 : 180;
const containerRef = useRef(null); const containerRef = useRef(null);
const [cols, setCols] = useState(() => { const [cols, setCols] = useState(() => {
// Pre-calc initial columns to stabilize layout before images render // Pre-calc initial columns to stabilize layout before images render
@@ -133,7 +135,7 @@ export function LocalMediaGrid({
role="listitem" role="listitem"
tabIndex={0} tabIndex={0}
aria-label={img.filename || `image ${idx + 1}`} aria-label={img.filename || `image ${idx + 1}`}
onClick={() => onClick ? onClick(idx) : onToggle(idx)} onClick={() => (onClick ? onClick(idx) : onToggle(idx))}
onKeyDown={(e) => handleKeyDown(e, idx)} onKeyDown={(e) => handleKeyDown(e, idx)}
style={{ style={{
position: "relative", position: "relative",
@@ -200,8 +202,7 @@ export function LocalMediaGrid({
/> />
)} )}
{onClick && ( {onClick && (
<input <Checkbox
type="checkbox"
checked={img.isSelected} checked={img.isSelected}
onChange={(e) => { onChange={(e) => {
e.stopPropagation(); e.stopPropagation();
@@ -209,10 +210,12 @@ export function LocalMediaGrid({
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
position: 'absolute', position: "absolute",
top: 5, top: 5,
right: 5, left: 5,
zIndex: 2 zIndex: 2,
opacity: img.isSelected ? 1 : 0.4,
transition: "opacity 0.3s"
}} }}
/> />
)} )}