mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-22 10:08:42 -06:00
Code Issues Packages Projects Releases 132 Wiki Activity

feat: improved UI for select & multi-select logic jumps (#1773)

Browse Source 
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Karishma Shukla
2023-12-13 19:35:59 +05:30
committed by GitHub
parent 2e5ed00414
commit b11a7cc3ec
2 changed files with 14 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx
View File

@@ -267,16 +267,18 @@ export default function LogicEditor({
</Select>
{logic.condition && logicConditions[logic.condition].values != null && (
<div className="flex-1 basis-1/5">
<div className="flex-1 basis-1/4">
{!logicConditions[logic.condition].multiSelect ? (
<Select value={logic.value} onValueChange={(e) => updateLogic(logicIdx, { value: e })}>
<SelectTrigger className="overflow-hidden">
<SelectTrigger className="w-full overflow-hidden">
<SelectValue placeholder="Select match type" />
</SelectTrigger>
<SelectContent>
<SelectContent className="w-full bg-slate-50 text-slate-700 2xl:w-96">
{logicConditions[logic.condition].values?.map((value) => (
<SelectItem key={value} value={value} title={value}>
{value}
<div className="w-full">
<p className="line-clamp-1 w-40 text-left 2xl:w-80">{value}</p>
</div>
</SelectItem>
))}
</SelectContent>
@@ -284,17 +286,17 @@ export default function LogicEditor({
) : (
<DropdownMenu>
<DropdownMenuTrigger className="z-10 cursor-pointer" asChild>
<div className="flex h-10 w-40 items-center justify-between rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ">
<div className="flex h-10 w-full items-center justify-between overflow-hidden rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
{logic.value?.length === 0 ? (
<p className="truncate text-slate-400" title="Select match type">
<p className="line-clamp-1 text-slate-400" title="Select match type">
Select match type
</p>
) : (
<p className="truncate" title={logic.value.join(", ")}>
<p className="line-clamp-1" title={logic.value.join(", ")}>
{logic.value.join(", ")}
</p>
)}
<ChevronDown className="h-4 w-4 opacity-50" />
<ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent
@@ -330,10 +332,8 @@ export default function LogicEditor({
(question, idx) =>
idx !== questionIdx && (
<SelectItem key={question.id} value={question.id} title={question.headline}>
<div className="w-40">
<p className="truncate">
{idx + 1} - {question.headline}
</p>
<div className="w-32">
<p className="truncate text-left">{question.headline}</p>
</div>
</SelectItem>
)
@@ -343,7 +343,7 @@ export default function LogicEditor({
</Select>
<TrashIcon
className="ml-2 h-4 w-4 cursor-pointer text-slate-400"
className="h-4 w-4 cursor-pointer text-slate-400"
onClick={() => deleteLogic(logicIdx)}
/>
</div>

8
packages/ui/Select/index.tsx
View File

@@ -2,7 +2,7 @@
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { /* Check, */ ChevronDown } from "lucide-react";
import { ChevronDown } from "lucide-react";
import { cn } from "@formbricks/lib/cn";
@@ -70,12 +70,6 @@ const SelectItem: React.ComponentType<SelectPrimitive.SelectItemProps> = React.f
className
)}
{...props}>
{/* <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span> */}
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
));