149 lines
3.9 KiB
TypeScript
149 lines
3.9 KiB
TypeScript
import React from "react";
|
||
import { Text as SvgText, type SvgProps } from "react-native-svg";
|
||
import QrTemplate1 from "./QrTemplateLumiere";
|
||
import QrTemplate2 from "./QrTemplate2";
|
||
import QrTemplate3 from "./QrTemplate3";
|
||
import QrTemplate4 from "./QrTemplate4";
|
||
import QrTemplate5 from "./QrTemplate5";
|
||
import QrTemplate6 from "./QrTemplate6";
|
||
import QrTemplate8 from "./QrTemplate8";
|
||
import QrTemplate9 from "./QrTemplate9";
|
||
|
||
export interface TextItemConfig {
|
||
text: string;
|
||
fontSize?: number;
|
||
fontId?: string;
|
||
offsetY?: number; // Dikey konum kaydırma (yukarı / aşağı)
|
||
visible?: boolean;
|
||
}
|
||
|
||
export interface QrCustomFields {
|
||
restaurantName: TextItemConfig;
|
||
subtitle: TextItemConfig;
|
||
tableNo: TextItemConfig;
|
||
ctaText: TextItemConfig;
|
||
wifiText: TextItemConfig;
|
||
socialText: TextItemConfig;
|
||
}
|
||
|
||
export interface QrTemplateProps extends SvgProps {
|
||
qrBase64?: string;
|
||
fields?: Partial<QrCustomFields>;
|
||
}
|
||
|
||
// Türkçe karakterleri (İ, ı, Ş, ş, Ğ, ğ, Ü, ü, Ö, ö, Ç, ç) eksiksiz destekleyen sistem fontları
|
||
export const FONT_OPTIONS = [
|
||
{
|
||
id: "sans",
|
||
label: "Modern Sans",
|
||
fontFamily: "System, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif",
|
||
},
|
||
{
|
||
id: "serif",
|
||
label: "Zarif Serif",
|
||
fontFamily: "Georgia, 'Times New Roman', serif",
|
||
},
|
||
{
|
||
id: "times",
|
||
label: "Klasik (Times)",
|
||
fontFamily: "'Times New Roman', Times, Georgia, serif",
|
||
},
|
||
{
|
||
id: "palatino",
|
||
label: "Lüks Palatino",
|
||
fontFamily: "Palatino, 'Palatino Linotype', Georgia, serif",
|
||
},
|
||
{
|
||
id: "trebuchet",
|
||
label: "Dinamik",
|
||
fontFamily: "'Trebuchet MS', 'Segoe UI', Arial, sans-serif",
|
||
},
|
||
];
|
||
|
||
export function getFontFamily(fontId?: string, defaultFamily = "Georgia, serif"): string {
|
||
if (!fontId) return defaultFamily;
|
||
const found = FONT_OPTIONS.find((f) => f.id === fontId);
|
||
return found ? found.fontFamily : defaultFamily;
|
||
}
|
||
|
||
// Çok satırlı (Enter / \n) ve dikey kaydırmalı (offsetY) SVG metin render fonksiyonu
|
||
export function renderSvgLines({
|
||
text,
|
||
x,
|
||
y,
|
||
offsetY = 0,
|
||
lineHeight,
|
||
fill,
|
||
fontFamily,
|
||
fontSize,
|
||
fontWeight = "normal",
|
||
letterSpacing,
|
||
textAnchor = "middle",
|
||
}: {
|
||
text?: string;
|
||
x: number;
|
||
y: number;
|
||
offsetY?: number;
|
||
lineHeight?: number;
|
||
fill?: string;
|
||
fontFamily?: string;
|
||
fontSize?: number;
|
||
fontWeight?: string | number;
|
||
letterSpacing?: number;
|
||
textAnchor?: "middle" | "start" | "end";
|
||
}) {
|
||
if (!text) return null;
|
||
const lines = text.split("\n");
|
||
const computedLineHeight = lineHeight || (fontSize ? fontSize * 1.25 : 18);
|
||
const startY = y + (offsetY || 0);
|
||
|
||
return (
|
||
<>
|
||
{lines.map((line, idx) => (
|
||
<SvgText
|
||
key={idx}
|
||
x={x}
|
||
y={startY + idx * computedLineHeight}
|
||
fill={fill}
|
||
fontFamily={fontFamily}
|
||
fontSize={fontSize}
|
||
fontWeight={fontWeight}
|
||
letterSpacing={letterSpacing}
|
||
textAnchor={textAnchor}
|
||
>
|
||
{line}
|
||
</SvgText>
|
||
))}
|
||
</>
|
||
);
|
||
}
|
||
|
||
// Yeni component eklemek için buraya import edip COMPONENT_TEMPLATES'e kaydet
|
||
export const COMPONENT_TEMPLATES: Record<
|
||
string,
|
||
React.FC<QrTemplateProps>
|
||
> = {
|
||
"qr-1": QrTemplate1,
|
||
"qr-2": QrTemplate2,
|
||
"qr-3": QrTemplate3,
|
||
"qr-4": QrTemplate4,
|
||
"qr-5": QrTemplate5,
|
||
"qr-6": QrTemplate6,
|
||
"qr-8": QrTemplate8,
|
||
"qr-9": QrTemplate9,
|
||
};
|
||
|
||
// Her template'in aspect ratio'su (width/height)
|
||
export const TEMPLATE_ASPECT_RATIOS: Record<string, number> = {
|
||
"qr-1": 1, // 600x600 = 1:1
|
||
"qr-2": 400 / 650, // 400x650 = standart kart
|
||
"qr-3": 400 / 650, // 400x650 = standart kart
|
||
"qr-4": 400 / 580, // 400x580 = zarif altın çerçeve
|
||
"qr-5": 380 / 500, // 380x500 = PNG arka planlı modern kart
|
||
"qr-6": 400 / 580, // 400x580 = taş & ızgara vintage stant
|
||
"qr-8": 1, // 1024x1024 = 1:1 Emerald Gold Özel Tasarım
|
||
"qr-9": 1, // 1024x1024 = 1:1 Vintage Table Menu Özel Tasarım
|
||
};
|
||
|
||
|