Skip to content

Commit 3f8d43c

Browse files
idusparaiduspara
committed
fix: Bug in the Editor toolbar z-index
1 parent bdaa327 commit 3f8d43c

4 files changed

Lines changed: 82 additions & 67 deletions

File tree

‎src/components/form-builder/canvas/sortable-row.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { useFormBuilderStore } from "@/stores/form-builder-store";
1414
import { closestCenter, DndContext } from "@dnd-kit/core";
1515
import { FormRow, Viewports } from "@/types/form-builder.types";
1616
import { FormComponentModel } from "@/models/FormComponent";
17-
import { memo, useCallback, useMemo } from 'react';
17+
import { memo, useCallback, useEffect, useMemo } from 'react';
1818

1919
interface SortableRowProps {
2020
row: FormRow;
@@ -84,7 +84,8 @@ const RowColumn = memo(({
8484

8585
const selectedComponent = useFormBuilderStore(state => state.selectedComponent);
8686
const selectComponent = useFormBuilderStore(state => state.selectComponent);
87-
87+
const selectRow = useFormBuilderStore(state => state.selectRow);
88+
8889
const columnStyle = useMemo(() => ({
8990
transform: columnTransform
9091
? `translate3d(${columnTransform.x}px, 0, 0)`
@@ -108,10 +109,10 @@ const RowColumn = memo(({
108109

109110

110111
const handleClick = useCallback((e: React.MouseEvent) => {
111-
console.log("clicked");
112112
e.stopPropagation();
113-
selectedComponent?.id !== component.id && selectComponent(component);
114-
}, [component, selectedComponent, selectComponent]);
113+
selectRow(row);
114+
selectComponent(component);
115+
}, [component, selectComponent, selectRow, row]);
115116

116117
return (
117118
<div
@@ -160,12 +161,13 @@ export const SortableRow = memo(({
160161
const selectedRow = useFormBuilderStore(state => state.selectedRow);
161162
const viewport = useFormBuilderStore(state => state.viewport);
162163
const selectedComponent = useFormBuilderStore(state => state.selectedComponent);
164+
163165
const style = useMemo(() => ({
164166
transform: transform ? `translate3d(0, ${transform.y}px, 0)` : undefined,
165167
transition,
166-
zIndex: isDragging ? 100 : 0,
168+
zIndex: isDragging ? 100 : selectedRow?.id === row.id ? 100 : 0,
167169
...(isDragging ? { zIndex: 20 } : undefined),
168-
}), [transform, transition, isDragging]);
170+
}), [transform, transition, isDragging, selectedRow?.id, row.id]);
169171

170172
const handleColumnDragEnd = useCallback((event: any) => {
171173
const { active, over } = event;
@@ -194,7 +196,6 @@ export const SortableRow = memo(({
194196
<div
195197
className={cn(
196198
"form-row flex-1 grid grid-cols-12 gap-4",
197-
selectedRow?.id === row.id && "bg-slate-100"
198199
)}
199200
>
200201
<DndContext

‎src/components/form-builder/dialogs/generate-code-dialog.tsx‎

Lines changed: 70 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ export function GenerateCodeDialog({
4242
}: GenerateCodeDialogProps) {
4343
const [formattedCode, setFormattedCode] = useState(generatedCode.code);
4444
const [copied, setCopied] = useState(false);
45-
const formTitle = useFormBuilderStore.getState().formTitle.replace(/\s+/g, "");
45+
const formTitle = useFormBuilderStore
46+
.getState()
47+
.formTitle.replace(/\s+/g, "");
4648

4749
useEffect(() => {
4850
prettier
@@ -79,67 +81,78 @@ export function GenerateCodeDialog({
7981

8082
return (
8183
<Dialog open={open} onOpenChange={onOpenChange}>
82-
<DialogContent className="md:max-w-4xl h-[80vh]">
84+
<DialogContent className="md:max-w-4xl h-[95vh] xl:h-[80vh] max-h-[1024px]">
8385
<DialogHeader>
8486
<DialogTitle>Generated Form Code</DialogTitle>
8587
</DialogHeader>
86-
<div>
87-
<h2 className="text-lg font-semibold mb-0">
88-
1. Required shadcn/ui components:
89-
</h2>
90-
<h3 className="text-sm text-muted-foreground">
91-
Run the following commands to add the required components:
92-
</h3>
93-
</div>
94-
<div className="relative overflow-x-auto rounded-md">
95-
<Pre language="bash" code={installationInstructions} />
96-
<Button
97-
variant="ghost"
98-
size="sm"
99-
className="absolute top-2 right-2 text-muted-foreground"
100-
onClick={() => handleCopy(installationInstructions)}
101-
>
102-
{copied ? (
103-
<Check className="h-4 w-4" />
104-
) : (
105-
<Copy className="h-4 w-4" />
106-
)}
107-
</Button>
108-
</div>
109-
<div>
110-
<h2 className="text-lg font-semibold mb-0">2. React Code</h2>
111-
<h3 className="text-sm text-muted-foreground">
112-
Copy and paste the following code into your project or <a href="#" onClick={handleDownload} className="underline font-bold">download the file</a>.
113-
</h3>
114-
</div>
115-
<div className="relative overflow-auto rounded-md">
116-
<Pre language="typescript" code={formattedCode} />
117-
<Button
118-
variant="ghost"
119-
size="sm"
120-
className="absolute top-2 right-2 text-muted-foreground"
121-
onClick={() => handleCopy(formattedCode)}
122-
>
123-
{copied ? (
124-
<Check className="h-4 w-4" />
125-
) : (
126-
<Copy className="h-4 w-4" />
127-
)}
128-
</Button>
129-
</div>
130-
<div>
131-
<h2 className="text-lg font-semibold mb-0">3. Usage</h2>
132-
<h3 className="text-sm text-muted-foreground">
133-
Import the form component and use it in your project.
134-
</h3>
135-
</div>
136-
<div className="relative overflow-auto rounded-md">
137-
<Pre
138-
language="typescript"
139-
code={`import ${formTitle} from "./${formTitle}";
88+
<div className="min-h-[500px] w-full overflow-y-auto flex flex-col gap-4">
89+
<div>
90+
<h2 className="text-lg font-semibold mb-0">
91+
1. Required shadcn/ui components:
92+
</h2>
93+
<h3 className="text-sm text-muted-foreground">
94+
Run the following commands to add the required components:
95+
</h3>
96+
</div>
97+
<div className="relative overflow-x-auto rounded-md min-h-20">
98+
<Pre language="bash" code={installationInstructions} />
99+
<Button
100+
variant="ghost"
101+
size="sm"
102+
className="absolute top-2 right-2 text-muted-foreground"
103+
onClick={() => handleCopy(installationInstructions)}
104+
>
105+
{copied ? (
106+
<Check className="h-4 w-4" />
107+
) : (
108+
<Copy className="h-4 w-4" />
109+
)}
110+
</Button>
111+
</div>
112+
<div>
113+
<h2 className="text-lg font-semibold mb-0">2. React Code</h2>
114+
<h3 className="text-sm text-muted-foreground">
115+
Copy and paste the following code into your project or{" "}
116+
<a
117+
href="#"
118+
onClick={handleDownload}
119+
className="underline font-bold"
120+
>
121+
download the file
122+
</a>
123+
.
124+
</h3>
125+
</div>
126+
<div className="relative overflow-auto rounded-md min-h-20">
127+
<Pre language="typescript" code={formattedCode} />
128+
<Button
129+
variant="ghost"
130+
size="sm"
131+
className="absolute top-2 right-2 text-muted-foreground"
132+
onClick={() => handleCopy(formattedCode)}
133+
>
134+
{copied ? (
135+
<Check className="h-4 w-4" />
136+
) : (
137+
<Copy className="h-4 w-4" />
138+
)}
139+
</Button>
140+
</div>
141+
<div>
142+
<h2 className="text-lg font-semibold mb-0">3. Usage</h2>
143+
<h3 className="text-sm text-muted-foreground">
144+
Import the form component and use it in your project.
145+
</h3>
146+
</div>
147+
<div className="relative overflow-auto rounded-md min-h-20">
148+
<Pre
149+
language="typescript"
150+
code={`import ${formTitle} from "./${formTitle}";
140151
<${formTitle} />`}
141-
/>
152+
/>
153+
</div>
142154
</div>
155+
143156
<DialogFooter>
144157
<Button variant="outline" onClick={() => onOpenChange(false)}>
145158
Close

‎src/components/form-builder/mainCanvas.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function MainCanvas() {
4848
const selectedComponent = useFormBuilderStore(
4949
(state) => state.selectedComponent
5050
);
51-
51+
const selectRow = useFormBuilderStore((state) => state.selectRow);
5252
const selectComponent = useFormBuilderStore((state) => state.selectComponent);
5353
const previewIframeRef = useRef<HTMLIFrameElement>(null);
5454
const editorIframeRef = useRef<HTMLIFrameElement>(null);
@@ -86,6 +86,7 @@ export function MainCanvas() {
8686
onClick={() => {
8787
if (selectedComponent) {
8888
selectComponent(null);
89+
selectRow(null);
8990
}
9091
}}
9192
>

‎src/stores/form-builder-store.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export const useFormBuilderStore = create<FormBuilderStore>()(
187187
};
188188
});
189189
},
190-
selectComponent: (component: FormComponentModel | null) => set(() => ({ selectedComponent: component ? new FormComponentModel(component) : null, selectedRow: null })),
190+
selectComponent: (component: FormComponentModel | null) => set(() => ({ selectedComponent: component ? new FormComponentModel(component) : null })),
191191
getComponentFieldValue: (component: FormComponentModel, field: string) => {
192192
const state = get();
193193

0 commit comments

Comments
 (0)