pixel-react 1.10.15 → 1.10.16

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -1,164 +0,0 @@
-import { useRef, useState } from 'react';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import { truncateText } from '../../utils/truncateText/truncateText';
-import './AllProjectsDropdown.scss';
-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 = () => {},
-  onMenuClick = () => {},
-  options,
-  selectedOption = {
-    label: 'All Projects',
-    value: 'All Projects',
-    iconName: 'all_projects',
-  },
-  selected = false,
-}: AllProjectsDropdownProps) => {
-  const [showOptions, setShowOptions] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState(selectedOption);
-  const optionsRef = useRef<HTMLDivElement>(null);
-  const [optionsList, setOptionSList] = useState<optionsType[]>(options);
-
-  const handleShowOption = () => {
-    setShowOptions(!showOptions);
-  };
-  const closeOptions = () => {
-    setShowOptions(false);
-  };
-  const handleSelectOption = (option: optionsType) => {
-    setSelectedOptions(option);
-    closeOptions();
-    onClick(option);
-    setSearchValue('');
-    setOptionSList(options);
-  };
-
-  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 (
-    <div className={classNames('ff-all-project')}>
-      <div
-        className={classNames('ff-all-project-dropdown', {
-          ['ff-all-project-dropdown--selected']: selected,
-        })}
-      >
-        <div className={classNames('ff-all-project-container')}>
-          <Typography
-            as={'div'}
-            lineHeight={'18px'}
-            fontSize={12}
-            fontWeight={selected ? 'semi-bold':'regular'}
-            className={classNames('projects-label')}
-            onClick={onMenuClick}
-          >
-            <Tooltip title={selectedOptions?.label}>
-              {selectedOptions.label.length <= 12
-                ? selectedOptions.label
-                : truncateText(selectedOptions?.label, 8)}
-            </Tooltip>
-          </Typography>
-          <div className={classNames('label-icon')} onClick={handleShowOption}>
-            <Icon
-              name="arrows_down_icon"
-              color="var(--primary-icon-color)"
-              height={8}
-              width={8}
-              hoverEffect={false}
-            />
-          </div>
-        </div>
-      </div>
-      {showOptions && (
-        <div className={classNames('ff-projects-dropdown')} ref={optionsRef}>
-          <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',
-              `${optionsList.length > 4 ? 'scroll' : ''}`
-            )}
-          >
-            {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>
-      )}
-    </div>
-  );
-};
-
-export default AllProjectsDropdown;

package/src/components/AllProjectsDropdown/index.ts

@@ -1 +0,0 @@
-export { default } from './AllProjectsDropdown';

package/src/components/AllProjectsDropdown/types.ts

@@ -1,14 +0,0 @@
-export interface optionsType {
-  label: string;
-  value: string;
-  iconName: string;
-  platform?: string;
-  appType?: string;
-}
-export interface AllProjectsDropdownProps {
-  options: optionsType[];
-  onMenuClick?: () => void;
-  onClick: (option: optionsType) => void;
-  selectedOption: optionsType;
-  selected?: boolean;
-}