feat: improved pages search experince

chaibuilder · Nov 7, 2024 · 2399fcb · 2399fcb
1 parent 2619c1d
commit 2399fcb
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "1.2.113",
+  "version": "1.2.114",
   "type": "module",
   "repository": {
     "type": "git",

diff --git a/src/core/rjsf-widgets/link.tsx b/src/core/rjsf-widgets/link.tsx
@@ -2,7 +2,7 @@ import { FieldProps } from "@rjsf/utils";
 import { map, split, get, isEmpty, debounce } from "lodash-es";
 import { useEffect, useState, useCallback, useRef } from "react";
 import { useBuilderProp, useTranslation } from "../hooks";
-import { SearchIcon, X } from "lucide-react";
+import { X } from "lucide-react";
 import { CollectionItem } from "../types/chaiBuilderEditorProps";
 
 const CollectionField = ({
@@ -15,6 +15,7 @@ const CollectionField = ({
   onChange: FieldProps["onChange"];
 }) => {
   const { t } = useTranslation();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const searchCollectionItems = useBuilderProp("searchCollectionItems", (_: string, __: any) => []);
 
   const [loading, setLoading] = useState("");
@@ -43,7 +44,7 @@ const CollectionField = ({
       }
       setLoading("");
     })();
-  }, [formData.href]);
+  }, [formData?.href, searchCollectionItems]);
 
   const getCollectionItems = useCallback(
     debounce(async (query: string) => {
@@ -103,6 +104,7 @@ const CollectionField = ({
     setCollectionsItems([]);
     setSelectedIndex(-1);
     setIsSearching(false);
+    onChange({ ...formData, href: "" });
   };
 
   const handleSearch = (query: string) => {
@@ -132,10 +134,10 @@ const CollectionField = ({
             disabled={loading === "FETCHING_INIT_VALUE"}
             className="w-full rounded-md border border-gray-300 p-2 pr-16"
           />
-          <div className="absolute right-2 bottom-2 flex items-center gap-1.5">
+          <div className="absolute bottom-2 right-2 top-3 flex items-center gap-1.5">
             {searchQuery && (
               <button onClick={clearSearch} className="text-gray-400 hover:text-gray-600" title={t("Clear search")}>
-                <X className="size-4" />
+                <X className="h-4 w-4" />
               </button>
             )}
           </div>
@@ -145,7 +147,7 @@ const CollectionField = ({
       {(loading === "FETCHING_COLLECTION_ITEMS" ||
         !isEmpty(collectionItems) ||
         (isSearching && isEmpty(collectionItems))) && (
-        <div className="mt-2 max-h-40 overflow-y-auto rounded-md border border-gray-300">
+        <div className="absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg">
           {loading === "FETCHING_COLLECTION_ITEMS" ? (
             <div className="space-y-1 p-2">
               <div className="h-6 w-full animate-pulse rounded bg-gray-200" />
@@ -181,7 +183,7 @@ const CollectionField = ({
 
 const LinkField = ({ schema, formData, onChange }: FieldProps) => {
   const { t } = useTranslation();
-  const { type = "page", href = "#", target = "self" } = formData;
+  const { type = "collection", href = "#", target = "self" } = formData;
   const collections = useBuilderProp("collections", []);
 
   return (

diff --git a/src/web-blocks/link.tsx b/src/web-blocks/link.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { isEmpty } from "lodash-es";
 import { Link1Icon } from "@radix-ui/react-icons";
 import { Link, SingleLineText, Styles } from "@chaibuilder/runtime/controls";
-import EmptySlot from "./empty-slot.tsx";
 import { ChaiBlock } from "../core/types/ChaiBlock.ts";
 
 const LinkBlock = (
@@ -16,23 +15,29 @@ const LinkBlock = (
 ) => {
   const { blockProps, link, children, styles, inBuilder, content } = props;
 
-  if (!children && isEmpty(styles?.className) && isEmpty(content)) {
-    return <EmptySlot inBuilder={inBuilder} />;
+  let emptyStyles = {};
+  if (!children && isEmpty(content)) {
+    emptyStyles = { minHeight: "50px", display: "flex", alignItems: "center", justifyContent: "center" };
   }
 
   if (inBuilder) {
     if (children) {
       return (
-        <span {...blockProps} {...styles}>
+        <span {...blockProps} style={emptyStyles} {...styles}>
           {children}
         </span>
       );
     } else {
-      return React.createElement("span", {
-        ...blockProps,
-        ...styles,
-        dangerouslySetInnerHTML: { __html: content },
-      });
+      return React.createElement(
+        "span",
+        {
+          ...blockProps,
+          ...styles,
+          style: emptyStyles,
+          "data-ai-key": "content",
+        },
+        content,
+      );
     }
   }
 
@@ -44,14 +49,17 @@ const LinkBlock = (
     );
   }
 
-  return React.createElement("a", {
-    ...blockProps,
-    ...styles,
-    "data-ai-key": "content",
-    href: link?.href || "#",
-    target: link?.target || "_self",
-    dangerouslySetInnerHTML: { __html: content },
-  });
+  return React.createElement(
+    "a",
+    {
+      ...blockProps,
+      ...styles,
+      "data-ai-key": "content",
+      href: link?.href || "#",
+      target: link?.target || "_self",
+    },
+    content,
+  );
 };
 
 const Config = {