chore: disable emoji picker search

makeplane · Oct 18, 2024 · 64b8cfb · 64b8cfb
1 parent add87b4
commit 64b8cfb
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 30 deletions.
diff --git a/packages/editor/src/core/extensions/callout/logo-selector.tsx b/packages/editor/src/core/extensions/callout/logo-selector.tsx
@@ -90,6 +90,7 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
         defaultIconColor={logoValue?.in_use && logoValue.in_use === "icon" ? logoValue?.icon?.color : undefined}
         defaultOpen={logoValue.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON}
         disabled={disabled}
+        searchDisabled
       />
     </div>
   );

diff --git a/packages/ui/src/emoji/emoji-icon-helper.tsx b/packages/ui/src/emoji/emoji-icon-helper.tsx
@@ -43,6 +43,7 @@ export type TCustomEmojiPicker = {
   label: React.ReactNode;
   onChange: (value: TChangeHandlerProps) => void;
   placement?: Placement;
+  searchDisabled?: boolean;
   searchPlaceholder?: string;
   theme?: Theme;
   iconType?: "material" | "lucide";
@@ -53,6 +54,7 @@ export const DEFAULT_COLORS = ["#95999f", "#6d7b8a", "#5e6ad2", "#02b5ed", "#02b
 export type TIconsListProps = {
   defaultColor: string;
   onChange: (val: { name: string; color: string }) => void;
+  searchDisabled?: boolean;
 };
 
 /**

diff --git a/packages/ui/src/emoji/emoji-icon-picker-new.tsx b/packages/ui/src/emoji/emoji-icon-picker-new.tsx
@@ -25,6 +25,7 @@ export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
     label,
     onChange,
     placement = "bottom-start",
+    searchDisabled = false,
     searchPlaceholder = "Search",
     theme,
   } = props;
@@ -107,6 +108,7 @@ export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                       height="20rem"
                       width="100%"
                       theme={theme}
+                      searchDisabled={searchDisabled}
                       searchPlaceholder={searchPlaceholder}
                       previewConfig={{
                         showPreview: false,
@@ -124,6 +126,7 @@ export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                         });
                         if (closeOnSelect) handleToggle(false);
                       }}
+                      searchDisabled={searchDisabled}
                     />
                   </Tab.Panel>
                 </Tab.Panels>

diff --git a/packages/ui/src/emoji/emoji-icon-picker.tsx b/packages/ui/src/emoji/emoji-icon-picker.tsx
@@ -25,6 +25,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
     label,
     onChange,
     placement = "bottom-start",
+    searchDisabled = false,
     searchPlaceholder = "Search",
     theme,
   } = props;
@@ -107,6 +108,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                       height="20rem"
                       width="100%"
                       theme={theme}
+                      searchDisabled={searchDisabled}
                       searchPlaceholder={searchPlaceholder}
                       previewConfig={{
                         showPreview: false,
@@ -123,6 +125,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                         });
                         if (closeOnSelect) handleToggle(false);
                       }}
+                      searchDisabled={searchDisabled}
                     />
                   </Tab.Panel>
                 </Tab.Panels>

diff --git a/packages/ui/src/emoji/icons-list.tsx b/packages/ui/src/emoji/icons-list.tsx
@@ -12,7 +12,7 @@ import { cn } from "../../helpers";
 import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper";
 
 export const IconsList: React.FC<TIconsListProps> = (props) => {
-  const { defaultColor, onChange } = props;
+  const { defaultColor, onChange, searchDisabled = false } = props;
   // states
   const [activeColor, setActiveColor] = useState(defaultColor);
   const [showHexInput, setShowHexInput] = useState(false);
@@ -42,21 +42,23 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
   return (
     <>
       <div className="flex flex-col sticky top-0 bg-custom-background-100">
-        <div className="flex items-center px-2 py-[15px] w-full ">
-          <div
-            className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
-            onFocus={() => setIsInputFocused(true)}
-            onBlur={() => setIsInputFocused(false)}
-          >
-            <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
-            <Input
-              placeholder="Search"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              className="text-[1rem] border-none p-0 h-full w-full "
-            />
+        {!searchDisabled && (
+          <div className="flex items-center px-2 py-[15px] w-full ">
+            <div
+              className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            >
+              <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
+              <Input
+                placeholder="Search"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="text-[1rem] border-none p-0 h-full w-full "
+              />
+            </div>
           </div>
-        </div>
+        )}
         <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
           {showHexInput ? (
             <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">

diff --git a/packages/ui/src/emoji/lucide-icons-list.tsx b/packages/ui/src/emoji/lucide-icons-list.tsx
@@ -11,7 +11,7 @@ import { LUCIDE_ICONS_LIST } from "./icons";
 import { Search } from "lucide-react";
 
 export const LucideIconsList: React.FC<TIconsListProps> = (props) => {
-  const { defaultColor, onChange } = props;
+  const { defaultColor, onChange, searchDisabled = false } = props;
   // states
   const [activeColor, setActiveColor] = useState(defaultColor);
   const [showHexInput, setShowHexInput] = useState(false);
@@ -32,21 +32,23 @@ export const LucideIconsList: React.FC<TIconsListProps> = (props) => {
   return (
     <>
       <div className="flex flex-col sticky top-0 bg-custom-background-100">
-        <div className="flex items-center px-2 py-[15px] w-full ">
-          <div
-            className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
-            onFocus={() => setIsInputFocused(true)}
-            onBlur={() => setIsInputFocused(false)}
-          >
-            <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
-            <Input
-              placeholder="Search"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              className="text-[1rem] border-none p-0 h-full w-full "
-            />
+        {!searchDisabled && (
+          <div className="flex items-center px-2 py-[15px] w-full ">
+            <div
+              className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            >
+              <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
+              <Input
+                placeholder="Search"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="text-[1rem] border-none p-0 h-full w-full "
+              />
+            </div>
           </div>
-        </div>
+        )}
         <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
           {showHexInput ? (
             <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">