Import source: src/components/CenterPanel/QRPreview
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,162 @@
|
|||||||
|
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||||
|
import QRCodeStyling from 'qr-code-styling';
|
||||||
|
import { useQR } from '../../context/QRContext';
|
||||||
|
import { useTheme } from '../../context/ThemeContext';
|
||||||
|
import { encodeQR } from '../../utils/encodeQR';
|
||||||
|
import { THEME_CARD_BG } from '../../config/styleOptions';
|
||||||
|
import type { Pattern, CornerSquareStyle, CornerDotStyle } from '../../types';
|
||||||
|
|
||||||
|
const DOT_MAP: Record<Pattern, string> = {
|
||||||
|
square: 'square', dots: 'dots', rounded: 'rounded',
|
||||||
|
classy: 'classy', 'classy-rounded': 'classy-rounded',
|
||||||
|
};
|
||||||
|
const CS_MAP: Record<CornerSquareStyle, string> = {
|
||||||
|
square: 'square', dot: 'dot', 'extra-rounded': 'extra-rounded',
|
||||||
|
};
|
||||||
|
const CD_MAP: Record<CornerDotStyle, string> = { square: 'square', dot: 'dot' };
|
||||||
|
const SIZE_MAP = { social: 512, card: 1024, print: 2048 };
|
||||||
|
|
||||||
|
const DARK_BG: Record<string, string> = {
|
||||||
|
paper: '#1C1A14', midnight: '#0D0E1A', pastel: '#1A0D12',
|
||||||
|
};
|
||||||
|
|
||||||
|
let qrInstance: QRCodeStyling | null = null;
|
||||||
|
|
||||||
|
function buildOptions(state: ReturnType<typeof useQR>['state'], isDark: boolean, size = 340) {
|
||||||
|
const cardBg = isDark ? DARK_BG[state.theme] : THEME_CARD_BG[state.theme];
|
||||||
|
const bgColor = state.bgColor ?? cardBg;
|
||||||
|
const dotColor = state.qrColor === 'rainbow' ? '#7C3AED' : state.qrColor;
|
||||||
|
|
||||||
|
const dotsOptions: Record<string, unknown> = state.gradientEnabled
|
||||||
|
? { type: DOT_MAP[state.pattern], gradient: { type: 'linear', rotation: 45, colorStops: [{ offset: 0, color: dotColor }, { offset: 1, color: state.gradientColor2 }] } }
|
||||||
|
: { type: DOT_MAP[state.pattern], color: dotColor };
|
||||||
|
|
||||||
|
const cornersSquareOptions: Record<string, unknown> = state.gradientEnabled
|
||||||
|
? { type: CS_MAP[state.cornerSquareStyle], gradient: { type: 'linear', rotation: 45, colorStops: [{ offset: 0, color: dotColor }, { offset: 1, color: state.gradientColor2 }] } }
|
||||||
|
: { type: CS_MAP[state.cornerSquareStyle], color: dotColor };
|
||||||
|
|
||||||
|
const cornersDotOptions: Record<string, unknown> = { type: CD_MAP[state.cornerDotStyle], color: dotColor };
|
||||||
|
|
||||||
|
return {
|
||||||
|
width: size, height: size,
|
||||||
|
data: encodeQR(state) || 'https://craftqr.app',
|
||||||
|
dotsOptions, cornersSquareOptions, cornersDotOptions,
|
||||||
|
backgroundOptions: { color: bgColor },
|
||||||
|
...(state.logoDataUrl ? { image: state.logoDataUrl, imageOptions: { margin: 6, imageSize: 0.28, crossOrigin: 'anonymous' } } : {}),
|
||||||
|
qrOptions: { errorCorrectionLevel: state.logoDataUrl ? 'H' : 'M' } as const,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QRPreview() {
|
||||||
|
const { state } = useQR();
|
||||||
|
const { isDark } = useTheme();
|
||||||
|
const cardRef = useRef<HTMLDivElement>(null);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||||
|
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const [qrSize, setQrSize] = useState(340);
|
||||||
|
const [, setAnimKey] = useState(0);
|
||||||
|
|
||||||
|
const qrData = encodeQR(state);
|
||||||
|
const cardBg = isDark ? DARK_BG[state.theme] : THEME_CARD_BG[state.theme];
|
||||||
|
|
||||||
|
// Adaptive QR size — tracks card width via ResizeObserver
|
||||||
|
useEffect(() => {
|
||||||
|
if (!cardRef.current) return;
|
||||||
|
const ro = new ResizeObserver(entries => {
|
||||||
|
const w = entries[0].contentRect.width;
|
||||||
|
const newSize = Math.min(Math.max(200, Math.floor(w - 48)), 600);
|
||||||
|
setQrSize(prev => {
|
||||||
|
if (Math.abs(prev - newSize) > 10) return newSize;
|
||||||
|
return prev;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ro.observe(cardRef.current);
|
||||||
|
return () => ro.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const initQR = useCallback((size: number) => {
|
||||||
|
if (!containerRef.current) return;
|
||||||
|
containerRef.current.replaceChildren();
|
||||||
|
qrInstance = new QRCodeStyling(buildOptions(state, isDark, size) as never);
|
||||||
|
qrInstance.append(containerRef.current);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => { initQR(qrSize); return () => { qrInstance = null; }; }, [qrSize]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||||
|
debounceRef.current = setTimeout(() => {
|
||||||
|
if (!qrInstance) return;
|
||||||
|
qrInstance.update(buildOptions(state, isDark, qrSize) as never);
|
||||||
|
if (wrapperRef.current) {
|
||||||
|
wrapperRef.current.classList.remove('qr-appear');
|
||||||
|
void wrapperRef.current.offsetHeight;
|
||||||
|
wrapperRef.current.classList.add('qr-appear');
|
||||||
|
}
|
||||||
|
setAnimKey(k => k + 1);
|
||||||
|
}, 280);
|
||||||
|
return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
|
||||||
|
}, [qrData, state.qrColor, state.bgColor, state.pattern, state.logoDataUrl,
|
||||||
|
state.cornerSquareStyle, state.cornerDotStyle, state.gradientEnabled,
|
||||||
|
state.gradientColor2, state.theme, isDark, qrSize]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={cardRef} className="rounded-[18px] p-4 sm:p-6 flex flex-col items-center gap-3 transition-all duration-300"
|
||||||
|
style={{ background: cardBg, boxShadow: 'var(--preview-shadow)' }}>
|
||||||
|
<div ref={wrapperRef} className="qr-appear rounded-xl overflow-hidden relative">
|
||||||
|
<div ref={containerRef} />
|
||||||
|
{!qrData && (
|
||||||
|
<div className="absolute inset-0 flex flex-col items-center justify-center rounded-xl"
|
||||||
|
style={{ background: `${cardBg}CC`, backdropFilter: 'blur(2px)' }}>
|
||||||
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" style={{ opacity: 0.3 }}>
|
||||||
|
<rect x="2" y="2" width="13" height="13" rx="2" stroke="currentColor" strokeWidth="2"/>
|
||||||
|
<rect x="21" y="2" width="13" height="13" rx="2" stroke="currentColor" strokeWidth="2"/>
|
||||||
|
<rect x="2" y="21" width="13" height="13" rx="2" stroke="currentColor" strokeWidth="2"/>
|
||||||
|
<rect x="5.5" y="5.5" width="6" height="6" rx="1" fill="currentColor" style={{ opacity: 0.5 }}/>
|
||||||
|
<rect x="24.5" y="5.5" width="6" height="6" rx="1" fill="currentColor" style={{ opacity: 0.5 }}/>
|
||||||
|
<rect x="5.5" y="24.5" width="6" height="6" rx="1" fill="currentColor" style={{ opacity: 0.5 }}/>
|
||||||
|
<circle cx="26" cy="26" r="6" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.4 }}/>
|
||||||
|
<path d="M23 26h6M26 23v6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ opacity: 0.4 }}/>
|
||||||
|
</svg>
|
||||||
|
<p className="text-[13px] font-medium mt-2" style={{ color: 'var(--text-secondary)', opacity: 0.7 }}>
|
||||||
|
Enter content to generate
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{state.frameLabel && (
|
||||||
|
<p className="text-[13px] sm:text-[14px] font-semibold tracking-widest uppercase text-center px-4"
|
||||||
|
style={{ color: isDark ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.55)', letterSpacing: '0.2em' }}>
|
||||||
|
{state.frameLabel}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function downloadQR(state: ReturnType<typeof useQR>['state'], isDark: boolean, format: 'png' | 'svg' = 'png') {
|
||||||
|
const size = SIZE_MAP[state.downloadSize];
|
||||||
|
const dl = new QRCodeStyling(buildOptions(state, isDark, size) as never);
|
||||||
|
dl.download({ name: 'qrcode', extension: format });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function copyQR(
|
||||||
|
state: ReturnType<typeof useQR>['state'],
|
||||||
|
isDark: boolean,
|
||||||
|
): Promise<void> {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.style.cssText = 'position:fixed;left:-9999px;top:-9999px;pointer-events:none;';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
const temp = new QRCodeStyling(buildOptions(state, isDark, 512) as never);
|
||||||
|
temp.append(container);
|
||||||
|
await new Promise(r => setTimeout(r, 220));
|
||||||
|
try {
|
||||||
|
const svgEl = container.querySelector('svg');
|
||||||
|
if (!svgEl) throw new Error('SVG not found');
|
||||||
|
const blob = new Blob([new XMLSerializer().serializeToString(svgEl)], { type: 'image/svg+xml' });
|
||||||
|
await navigator.clipboard.write([new ClipboardItem({ 'image/svg+xml': blob })]);
|
||||||
|
} finally {
|
||||||
|
document.body.removeChild(container);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user