danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix design links
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-13 10:34:09 +03:30
parent 879bc0ae49
commit 121852ab20
1 changed files with 105 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/sidebar/instructions/LinkInput.tsx
+105 -152
View File
@@ -1,177 +1,130 @@
import { useState, useMemo, type ComponentType } from "react";
import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
import Input from "@/components/Input";
import Button from "@/components/Button"; import Button from "@/components/Button";
import Input from "@/components/Input";
import Select from "@/components/Select"; import Select from "@/components/Select";
import {
Link,
ArrowCircleRight,
ArrowCircleLeft,
DocumentText,
ArrowLeft,
ArrowRight,
Add,
} from "iconsax-react";
import { clx } from "@/helpers/utils"; import { clx } from "@/helpers/utils";
import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
import { Add, ArrowCircleLeft, ArrowCircleRight, ArrowLeft, ArrowRight, DocumentText, Link } from "iconsax-react";
import { useMemo, useState, type ComponentType } from "react";
type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev"; type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev";
const linkTypesConfig: Record< const linkTypesConfig: Record<LinkType, { icon: ComponentType<{ size?: number; color?: string }>; label: string }> = {
LinkType, link: { icon: Link, label: "لینک" },
{ icon: ComponentType<{ size?: number; color?: string }>; label: string } nextPage: { icon: ArrowCircleRight, label: "صفحه بعدی" },
> = { prevPage: { icon: ArrowCircleLeft, label: "صفحه قبلی" },
link: { icon: Link, label: "لینک" }, page: { icon: DocumentText, label: "صفحه" },
nextPage: { icon: ArrowCircleRight, label: "صفحه بعدی" }, firstPage: { icon: ArrowLeft, label: "اولین صفحه" },
prevPage: { icon: ArrowCircleLeft, label: "صفحه قبلی" }, lastPrev: { icon: ArrowRight, label: "آخرین صفحه" },
page: { icon: DocumentText, label: "صفحه" },
firstPage: { icon: ArrowLeft, label: "اولین صفحه" },
lastPrev: { icon: ArrowRight, label: "آخرین صفحه" },
}; };
const internalLinkUrls: Partial<Record<LinkType, string>> = { const internalLinkUrls: Partial<Record<LinkType, string>> = {
nextPage: "page://next", nextPage: "page://next",
prevPage: "page://prev", prevPage: "page://prev",
firstPage: "page://first", firstPage: "page://first",
lastPrev: "page://last", lastPrev: "page://last",
}; };
const LinkInput = () => { const LinkInput = () => {
const [selectedLinkType, setSelectedLinkType] = useState<LinkType>("link"); const [selectedLinkType, setSelectedLinkType] = useState<LinkType>("link");
const [linkUrl, setLinkUrl] = useState(""); const [linkUrl, setLinkUrl] = useState("");
const [linkTitle, setLinkTitle] = useState(""); const [linkTitle, setLinkTitle] = useState("");
const [targetPageNumber, setTargetPageNumber] = useState(""); const [targetPageNumber, setTargetPageNumber] = useState("");
const pages = useEditorStore((state) => state.pages); const pages = useEditorStore((state) => state.pages);
const linkTypes = useMemo( const linkTypes = useMemo(
() => () =>
(Object.entries(linkTypesConfig) as [LinkType, typeof linkTypesConfig[LinkType]][]) (Object.entries(linkTypesConfig) as [LinkType, (typeof linkTypesConfig)[LinkType]][]).map(([type, config]) => ({
.map(([type, config]) => ({ type,
type, ...config,
...config, })),
})), [],
[] );
);
const pageOptions = useMemo( const pageOptions = useMemo(
() => () =>
pages.map((page, index) => ({ pages.map((page, index) => ({
value: String(index + 1), value: String(index + 1),
label: page.name || `صفحه ${index + 1}`, label: page.name || `صفحه ${index + 1}`,
})), })),
[pages] [pages],
); );
const selectedLinkConfig = linkTypesConfig[selectedLinkType]; const selectedLinkConfig = linkTypesConfig[selectedLinkType];
const selectedPage = targetPageNumber const selectedPage = targetPageNumber ? pageOptions.find((page) => page.value === targetPageNumber) : undefined;
? pageOptions.find((page) => page.value === targetPageNumber) const resolvedLinkUrl = selectedLinkType === "link" ? linkUrl.trim() : (internalLinkUrls[selectedLinkType] ?? (targetPageNumber ? `page://${targetPageNumber}` : ""));
: undefined; const defaultLinkText = selectedLinkType === "link" ? resolvedLinkUrl : selectedLinkType === "page" ? selectedPage?.label || selectedLinkConfig.label : selectedLinkConfig.label;
const resolvedLinkUrl = const isAddDisabled = selectedLinkType === "link" ? !linkUrl.trim() : selectedLinkType === "page" && !targetPageNumber;
selectedLinkType === "link"
? linkUrl.trim()
: internalLinkUrls[selectedLinkType] ?? (targetPageNumber ? `page://${targetPageNumber}` : "");
const defaultLinkText =
selectedLinkType === "link"
? resolvedLinkUrl
: selectedLinkType === "page"
? selectedPage?.label || selectedLinkConfig.label
: selectedLinkConfig.label;
const isAddDisabled =
selectedLinkType === "link"
? !linkUrl.trim()
: selectedLinkType === "page" && !targetPageNumber;
const handleAddLink = () => { const handleAddLink = () => {
if (!resolvedLinkUrl) return; if (!resolvedLinkUrl) return;
const newLink = { const newLink = {
id: `link-${Date.now()}`, id: `link-${Date.now()}`,
type: "link" as ToolType, type: "link" as ToolType,
x: 100, x: 100,
y: 100, y: 100,
text: linkTitle.trim() || defaultLinkText, text: linkTitle.trim() || defaultLinkText,
linkUrl: resolvedLinkUrl, linkUrl: resolvedLinkUrl,
fontSize: 24, fontSize: 24,
fill: "#0000ff", fill: "#0000ff",
fontWeight: "normal", fontWeight: "normal",
};
const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
addObject(newLink);
setSelectedObjectId(newLink.id);
setTool("select");
setLinkUrl("");
setLinkTitle("");
setTargetPageNumber("");
}; };
const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
addObject(newLink);
setSelectedObjectId(newLink.id);
setTool("select");
setLinkUrl("");
setLinkTitle("");
setTargetPageNumber("");
};
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<h2 className="text-lg font-semibold text-right">لینک ها</h2> <h2 className="text-lg font-semibold text-right">لینک ها</h2>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
{linkTypes.map((item) => { {linkTypes.map((item) => {
const isSelected = selectedLinkType === item.type; const isSelected = selectedLinkType === item.type;
const Icon = item.icon; const Icon = item.icon;
return ( return (
<button <button
key={item.type} key={item.type}
onClick={() => setSelectedLinkType(item.type)} onClick={() => setSelectedLinkType(item.type)}
className={clx( className={clx(
"flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-gray-50 border transition-colors shadow-sm", "flex border-transparent flex-col items-center justify-center gap-2 p-4 rounded-xl bg-gray-50 border transition-colors shadow-sm",
isSelected isSelected ? "border-black" : "border-gray-200 hover:border-gray-300",
? "border-black border-2" )}
: "border-gray-200 hover:border-gray-300" >
)} <Icon size={20} color="black" />
> <span className="text-xs text-black">{item.label}</span>
<Icon size={20} color="black" /> </button>
<span className="text-xs text-black">{item.label}</span> );
</button> })}
); </div>
})}
</div>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<h3 className="text-sm font-medium text-right">عنوان لینک</h3> <h3 className="text-sm font-medium text-right">عنوان لینک</h3>
<Input <Input value={linkTitle} onChange={(e) => setLinkTitle(e.target.value)} placeholder="عنوان لینک" />
value={linkTitle}
onChange={(e) => setLinkTitle(e.target.value)}
placeholder="عنوان لینک"
/>
</div>
{selectedLinkType === "link" ? (
<div className="space-y-2">
<h3 className="text-sm font-medium text-right">لینک</h3>
<Input
value={linkUrl}
onChange={(e) => setLinkUrl(e.target.value)}
placeholder="https://example.com"
onEnter={handleAddLink}
/>
</div>
) : null}
{selectedLinkType === "page" ? (
<div className="space-y-2">
<h3 className="text-sm font-medium text-right">انتخاب صفحه</h3>
<Select
value={targetPageNumber}
onChange={(e) => setTargetPageNumber(e.target.value)}
placeholder="صفحه مقصد را انتخاب کنید"
items={pageOptions}
/>
</div>
) : null}
<Button
onClick={handleAddLink}
disabled={isAddDisabled}
className="w-full"
leftIcon={<Add size={20} color="white" />}
>
افزودن
</Button>
</div>
</div> </div>
); {selectedLinkType === "link" ? (
<div className="space-y-2">
<h3 className="text-sm font-medium text-right">لینک</h3>
<Input value={linkUrl} onChange={(e) => setLinkUrl(e.target.value)} placeholder="https://example.com" onEnter={handleAddLink} />
</div>
) : null}
{selectedLinkType === "page" ? (
<div className="space-y-2">
<h3 className="text-sm font-medium text-right">انتخاب صفحه</h3>
<Select value={targetPageNumber} onChange={(e) => setTargetPageNumber(e.target.value)} placeholder="صفحه مقصد را انتخاب کنید" items={pageOptions} />
</div>
) : null}
<Button onClick={handleAddLink} disabled={isAddDisabled} className="w-full" leftIcon={<Add size={20} color="white" />}>
افزودن
</Button>
</div>
</div>
);
}; };
export default LinkInput; export default LinkInput;