pixel-react 1.8.6 → 1.8.8

package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx

@@ -14,6 +14,11 @@ const meta: Meta<typeof AllProjectsDropdown> = {
 
 type Story = StoryObj<typeof AllProjectsDropdown>;
 const options = [
+  {
+    label: 'All Projects',
+    value: 'All Projects',
+    iconName: 'all_projects',
+  },
   {
     label:
       'Pantaloon Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { AllProjectsDropdownProps, optionsType } from './types';
 import Tooltip from '../Tooltip';
 import useClickOutside from '../../hooks/useClickOutside';
+import Search from '../Search';
 
 const AllProjectsDropdown = ({
   onClick = () => {},
@@ -21,8 +22,8 @@ const AllProjectsDropdown = ({
 }: AllProjectsDropdownProps) => {
   const [showOptions, setShowOptions] = useState(false);
   const [selectedOptions, setSelectedOptions] = useState(selectedOption);
-  const [search, setSearch] = useState(true);
   const optionsRef = useRef<HTMLDivElement>(null);
+  const [optionsList, setOptionSList] = useState<optionsType[]>(options);
 
   const handleShowOption = () => {
     setShowOptions(!showOptions);
@@ -34,17 +35,22 @@ const AllProjectsDropdown = ({
     setSelectedOptions(option);
     closeOptions();
     onClick(option);
+    setSearchValue('');
+    setOptionSList(options);
   };
 
-  const handleInput = () => {
-    setSearch(false);
-  };
-
-  const handleSearchEnter = () => {
-    setSearch(false);
-  };
-  const handleSearchLeave = () => {
-    setSearch(true);
+  const [searchValue, setSearchValue] = useState('');
+  const handleSearch = (query: string) => {
+    setSearchValue(query);
+    if (query !== '') {
+      let filterData = options.filter((option) =>
+        option.label.toLowerCase().includes(query.toLowerCase())
+      );
+      setOptionSList(filterData);
+    } else {
+      setSearchValue('');
+      setOptionSList(options);
+    }
   };
   useClickOutside(optionsRef, closeOptions);
   return (
@@ -82,66 +88,72 @@ const AllProjectsDropdown = ({
       </div>
       {showOptions && (
         <div className={classNames('ff-projects-dropdown')} ref={optionsRef}>
-          <div
-            className={classNames('ff-projects-search')}
-            onMouseEnter={() => handleSearchEnter()}
-            onMouseLeave={() => handleSearchLeave()}
-          >
-            {search && <Icon name="search" height={8} width={8} />}
-            <input
-              type="text"
-              placeholder={`${search ? 'Search Project' : ''}`}
-              onClick={() => handleInput()}
-            />
-          </div>
-          <div
-            onClick={() =>
-              handleSelectOption({
-                label: 'All Projects',
-                value: 'All Projects',
-                iconName: 'all_projects',
-              })
-            }
-            className={classNames('ff-all-projects-options', {
-              ['ff-selected-option']: selectedOption.label === 'All Projects',
-            })}
-          >
-            <div className={classNames('ff-projects-icons')}>
-              <Icon name={'all_projects'} height={12} width={12} />
-            </div>
-            <Typography
-              as={'div'}
-              lineHeight={'30px'}
-              children={'All Projects'}
-            />
+          <Search
+            onSearch={handleSearch}
+            value={searchValue}
+            isExpand={true}
+            onClose={() => {}}
+            onExpand={() => {}}
+            showClose={false}
+          />
+          <div className={classNames('option-card')}>
+            {optionsList.map(
+              (option, index) =>
+                index === 0 && (
+                  <div
+                    key={index}
+                    onClick={() => handleSelectOption(option)}
+                    className={classNames('ff-projects-options', {
+                      ['ff-selected-option']:
+                        selectedOption.label === option.label,
+                    })}
+                  >
+                    <div className={classNames('ff-projects-icons')}>
+                      <Icon name={option.iconName} height={12} width={12} />
+                    </div>
+                    <Typography
+                      key={index}
+                      as={'div'}
+                      lineHeight={'30px'}
+                      className="ff-projects-label"
+                    >
+                      <Tooltip title={option.label}>{option.label}</Tooltip>
+                    </Typography>
+                  </div>
+                )
+            )}
           </div>
           <div
             className={classNames(
               'option-card',
-              `${options.length > 4 ? 'scroll' : ''}`
+              `${optionsList.length > 4 ? 'scroll' : ''}`
             )}
           >
-            {options.map((option, index) => (
-              <div
-                key={index}
-                onClick={() => handleSelectOption(option)}
-                className={classNames('ff-projects-options', {
-                  ['ff-selected-option']: selectedOption.label === option.label,
-                })}
-              >
-                <div className={classNames('ff-projects-icons')}>
-                  <Icon name={option.iconName} height={12} width={12} />
-                </div>
-                <Typography
-                  key={index}
-                  as={'div'}
-                  lineHeight={'30px'}
-                  className="ff-projects-label"
-                >
-                  <Tooltip title={option.label}>{option.label}</Tooltip>
-                </Typography>
-              </div>
-            ))}
+            {optionsList.map(
+              (option, index) =>
+                index > 0 && (
+                  <div
+                    key={index}
+                    onClick={() => handleSelectOption(option)}
+                    className={classNames('ff-projects-options', {
+                      ['ff-selected-option']:
+                        selectedOption.label === option.label,
+                    })}
+                  >
+                    <div className={classNames('ff-projects-icons')}>
+                      <Icon name={option.iconName} height={12} width={12} />
+                    </div>
+                    <Typography
+                      key={index}
+                      as={'div'}
+                      lineHeight={'30px'}
+                      className="ff-projects-label"
+                    >
+                      <Tooltip title={option.label}>{option.label}</Tooltip>
+                    </Typography>
+                  </div>
+                )
+            )}
           </div>
         </div>
       )}

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo } from 'react';
+import { forwardRef } from 'react';
 import './Button.scss';
 import '../../assets/styles/_colors.scss';
 import Icon from '../Icon';
@@ -6,8 +6,7 @@ import { ButtonProps } from './types';
 import classNames from 'classnames';
 import Typography from '../Typography';
 
-const areEqual = (prevProps: ButtonProps, nextProps: ButtonProps) =>
-  prevProps.selectedFile?.name === nextProps.selectedFile?.name;
+
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -88,4 +87,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
   }
 );
-export default memo(Button, areEqual);
+export default Button;

package/src/components/ChooseFile/ChooseFile.tsx

@@ -1,9 +1,8 @@
-import { memo, type FC } from 'react'
+import {  type FC } from 'react'
 import { ChooseFileProps } from './types'
 import Button from '../Button'
 
-const areEqual = (prevProps: ChooseFileProps, nextProps: ChooseFileProps) =>
-    prevProps.selectedFile?.name === nextProps.selectedFile?.name;
+
 
 const ChooseFile:FC<ChooseFileProps> = ({
     variant = 'primary',
@@ -43,4 +42,4 @@ const ChooseFile:FC<ChooseFileProps> = ({
   )
 }
 
-export default memo(ChooseFile, areEqual);
+export default ChooseFile;

package/src/components/Search/Search.scss

@@ -86,12 +86,20 @@
       cursor: pointer;
       width: 22px;
       padding-top: 1px;
+
+      &.showClose {
+        display: none
+      }
     }
 
     .ff-search-close-icon {
       margin: 4px;
       cursor: pointer;
 
+      &.showClose {
+        display: none
+      }
+
       .ff-icon-container {
         svg {
           path {

package/src/components/Search/Search.tsx

@@ -16,12 +16,13 @@ const Search = ({
   isExpand = false,
   onClose,
   onExpand,
+  showClose = true,
 }: SearchProps) => {
   const [searchValue, setSearchValue] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (isExpand && inputRef.current) {
+    if (isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
     setSearchValue('');
@@ -45,7 +46,7 @@ const Search = ({
     if (label === 'Close') {
       onClose?.();
     }
-    if (label === 'Clear' && isExpand && inputRef.current) {
+    if (label === 'Clear' && isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
   };
@@ -57,8 +58,12 @@ const Search = ({
   };
   const handleChange = (data: string) => {
     setSearchValue(data);
-    if (data === '') {
-      onSearch('');
+    if (showClose) {
+      if (data === '') {
+        onSearch('');
+      }
+    } else {
+      onSearch(data);
     }
   };
 
@@ -105,7 +110,9 @@ const Search = ({
       {isExpand && (
         <>
           <div
-            className="ff-search-clear-button"
+            className={classNames('ff-search-clear-button', {
+              showClose: !showClose,
+            })}
             onClick={() => handleSearchClearAndClose('Clear')}
           >
             {searchValue !== '' && (
@@ -117,7 +124,11 @@ const Search = ({
             )}
           </div>
           <Tooltip title="Close">
-            <div className="ff-search-close-icon">
+            <div
+              className={classNames('ff-search-close-icon', {
+                showClose: !showClose,
+              })}
+            >
               <Icon
                 height={6}
                 width={6}

package/src/components/Search/types.ts

@@ -16,4 +16,5 @@ export interface SearchProps {
   isExpand: boolean;
   onClose: () => void;
   onExpand: (isExpand: boolean) => void;
+  showClose?:boolean
 }