pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/Search/Search.tsx

@@ -7,22 +7,29 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import Typography from '../Typography';
 import Tooltip from '../Tooltip';
 
-
 const Search = ({
   placeholder = 'Search',
   onSearch,
   disabled = false,
   width = 150,
+  value = '',
+  isExpand = false,
+  onClose,
+  onExpand,
 }: SearchProps) => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (isExpanded && inputRef.current) {
+    if (isExpand && inputRef.current) {
       inputRef.current.focus();
     }
-  }, [isExpanded]);
+    setSearchValue('');
+  }, [isExpand]);
+
+  useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !checkEmpty(searchValue)) {
@@ -31,72 +38,67 @@ const Search = ({
       handleSearchClearAndClose('Close');
     }
   };
-  const onChange = (value: string) => {
-    setSearchValue(value);
-    if (value === '') {
-      onSearch('');
-    }
-  };
-  const handleIconClick = () => {
-    setIsExpanded(!disabled);
-  };
+
   const handleSearchClearAndClose = (label: string) => {
     setSearchValue('');
     onSearch('');
     if (label === 'Close') {
-      setIsExpanded(false);
+      onClose?.();
     }
-    if (label === 'Clear' && isExpanded && inputRef.current) {
+    if (label === 'Clear' && isExpand && inputRef.current) {
       inputRef.current.focus();
     }
   };
 
+  const handleIconClick = () => {
+    if (!disabled) {
+      onExpand?.(!isExpand);
+    }
+  };
+
   return (
     <div
       className={classNames('ff-search-container', {
-        expanded: isExpanded,
+        expanded: isExpand,
         disabled: disabled,
       })}
     >
       <div
-        className={classNames('ff-search-icon', { expanded: isExpanded })}
+        className={classNames('ff-search-icon', { expanded: isExpand })}
         onClick={handleIconClick}
       >
         <Tooltip title="Search">
           <Icon
             name="search"
-            height={isExpanded ? 14 : 16}
-            width={isExpanded ? 14 : 16}
+            height={isExpand ? 14 : 16}
+            width={isExpand ? 14 : 16}
           />
         </Tooltip>
       </div>
       <div
         className={classNames('ff-vertical-line', {
-          expanded: isExpanded,
+          expanded: isExpand,
         })}
       ></div>
       <input
         className="ff-search-input"
         name="input"
-        style={{ width: isExpanded ? `${width}px` : '0px' }}
+        style={{ width: isExpand ? `${width}px` : '0px' }}
         placeholder={placeholder}
         type="text"
         value={searchValue}
         disabled={disabled}
         ref={inputRef}
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
+        autoComplete="off"
+        onChange={(e) => setSearchValue(e.target.value)}
         onKeyDown={handleKeyDown}
       />
 
-      {isExpanded && (
+      {isExpand && (
         <>
           <div
             className="ff-search-clear-button"
-            onClick={() => {
-              handleSearchClearAndClose('Clear');
-            }}
+            onClick={() => handleSearchClearAndClose('Clear')}
           >
             {searchValue !== '' && (
               <Typography
@@ -124,4 +126,5 @@ const Search = ({
     </div>
   );
 };
+
 export default Search;

package/src/components/Search/types.ts

@@ -12,4 +12,8 @@ export interface SearchProps {
    */
   disabled?: boolean;
   width?: number;
+  value: string;
+  isExpand: boolean;
+  onClose: () => void;
+  onExpand: (isExpand: boolean) => void;
 }

package/src/components/Select/Select.scss

@@ -51,6 +51,10 @@
       }
     }
 
+    .ff-select-input-icon {
+      margin-left: 6px;
+    }
+
     .ff-select-inputField {
       @extend .fontSm;
       width: calc(100% - 8px);
@@ -66,6 +70,15 @@
         cursor: not-allowed;
         color: var(--ff-select-border-color);
       }
+
+      &__readonly {
+        cursor: pointer;
+      }
+
+      &__icon {
+        width: calc(100% - 36px);
+        padding: 4;
+      }
     }
 
     .ff-select-arrows-wrapper {
@@ -95,12 +108,17 @@
       transition: 0.18s ease all;
       border-radius: 4px;
 
+      &__icon {
+        left: 24px;
+      }
+
       &__active {
         transform: translateY(-16px);
         transition: 0.18s ease all;
         background-color: var(--ff-select-background-color);
         padding: 0 2px;
         z-index: 100000;
+        left: 8px;
       }
     }
 
@@ -120,6 +138,7 @@
         padding: 0 2px;
         line-height: 18px;
         z-index: 100000;
+        left: 8px;
       }
 
       .ff-select-arrows-wrapper {
@@ -174,6 +193,7 @@
         background-color: var(--ff-select-background-color);
         padding: 0 2px;
         line-height: 18px;
+        left: 8px;
       }
     }
 

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
+import React, { useState } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import Select from './Select';
-import { useState } from 'react';
 import { Option } from './types';
 import RadioGroup from '../RadioGroup';
 
@@ -303,4 +304,52 @@ export const updateOptionFromOutside: Story = {
   },
 };
 
+export const IconOptionSelection: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+        iconName: 'local',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+        iconName: 'chrome_icon',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+        iconName: 'mac_icon',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+        iconName: 'web_icon',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'fire-flink-LIC3179',
+      value: 'fire-flink-LIC3179',
+      iconName: 'local',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        showIcon={true}
+        width={200}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/Select/Select.tsx

@@ -30,11 +30,16 @@ const Select: FC<SelectProps> = ({
   width = '100%',
   onBlur = () => {},
   disableInput = false,
+  showIcon = false,
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
   const [showDropdownOptions, setShowDropdownOptions] = useState(false);
-  const [searchedOption, setSearchedOption] = useState<any>('');
+  const [searchedOption, setSearchedOption] = useState<any>({
+    searchedText: '',
+    searchedIcon: '',
+  });
+  const { searchedText, searchedIcon } = searchedOption;
   const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
   const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
     positionX: 0,
@@ -52,7 +57,10 @@ const Select: FC<SelectProps> = ({
 
   const handleIconClick = () => {
     setShowDropdownOptions(!showDropdownOptions);
-    setSearchedOption(getValue(selectedOption, valueAccessor));
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: getValue(selectedOption, valueAccessor),
+    });
     setSelectOptionList(optionsList);
     if (!showDropdownOptions && inputRef.current) {
       inputRef.current.focus();
@@ -71,7 +79,10 @@ const Select: FC<SelectProps> = ({
     });
 
     setSelectOptionList(filteredOptions);
-    setSearchedOption(value);
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: value,
+    });
   };
 
   const onSelectUpdatePosition = () => {
@@ -105,7 +116,10 @@ const Select: FC<SelectProps> = ({
       fromBottom: 0,
       width: 0,
     });
-    setSearchedOption(getValue(selectedOption, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
     setSelectOptionList(optionsList);
     onBlur();
   };
@@ -113,7 +127,10 @@ const Select: FC<SelectProps> = ({
   const onSelectOptionSelector = (option: Option): void => {
     if (disabled) return;
     onSelectBlur();
-    setSearchedOption(getValue(option, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
     if (onChange) {
       onChange(option);
     }
@@ -142,7 +159,10 @@ const Select: FC<SelectProps> = ({
   }, [showDropdownOptions]);
 
   useEffect(() => {
-    setSearchedOption(getValue(selectedOption, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
   }, [selectedOption]);
 
   useEffect(() => {
@@ -165,15 +185,20 @@ const Select: FC<SelectProps> = ({
           'ff-select__no_border': !showBorder,
         })}
       >
+        {showIcon && (
+          <Icon name={searchedIcon} className="ff-select-input-icon" />
+        )}
         <input
           type="text"
           ref={inputRef}
           id="select-input-element"
           className={classNames('ff-select-inputField', {
             'ff-select-inputField__disabled': disabled,
+            'ff-select-inputField__readonly': disableInput,
+            'ff-select-inputField__icon': showIcon,
           })}
           onFocus={handleFocus}
-          value={searchedOption}
+          value={searchedText}
           autoCorrect="off"
           autoComplete="off"
           spellCheck="false"
@@ -202,6 +227,7 @@ const Select: FC<SelectProps> = ({
           <Typography
             as="span"
             className={classNames('ff-select-labels', {
+              'ff-select-labels__icon': showIcon,
               'ff-select-labels__active': searchedOption,
             })}
             fontSize={searchedOption || showDropdownOptions ? 8 : 12}
@@ -239,6 +265,7 @@ const Select: FC<SelectProps> = ({
                 onSelectOptionSelector={onSelectOptionSelector}
                 heightFromTop={height}
                 selectedOption={searchedOption}
+                showIcon={showIcon}
               />,
               document.body
             )}

package/src/components/Select/components/Dropdown.scss

@@ -35,6 +35,15 @@
     text-overflow: ellipsis;
     overflow: hidden;
 
+    .ff-select-dropdown-icon-container {
+      display: flex;
+      align-items: center;
+
+      &__icon {
+        margin-right: 4px;
+      }
+    }
+
     &__selected,
     &:hover {
       background-color: var(--ff-select-option-hover-color);

package/src/components/Select/components/Dropdown.tsx

@@ -11,6 +11,7 @@ import {
   getValue,
 } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
+import Icon from '../../Icon';
 
 const Dropdown: FC<DropdownProps> = ({
   options = [],
@@ -24,6 +25,7 @@ const Dropdown: FC<DropdownProps> = ({
   heightFromTop,
   selectedOption,
   valueAccessor,
+  showIcon = false,
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -51,21 +53,21 @@ const Dropdown: FC<DropdownProps> = ({
       return {
         left: positionX,
         top: positionY + heightFromTop,
-        width: width + 30,
+        width: showIcon ? width + 56 : width + 30,
         zIndex: optionZIndex,
-        marginLeft: '-2px',
+        marginLeft: showIcon ? '-29px' : '-2px',
       };
     }
     return {
       zIndex: optionZIndex,
       left: positionX,
-      width: width + 30,
+      width: showIcon ? width + 56 : width + 30,
       top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
-      marginLeft: '-2px',
+      marginLeft: showIcon ? '-29px' : '-2px',
     };
   };
 
-  const getOptionLabel = (label: any) => {
+  const getOptionLabel = (label: any, icon: string) => {
     if (React.isValidElement(label)) {
       return label;
     }
@@ -74,7 +76,16 @@ const Dropdown: FC<DropdownProps> = ({
         as="div"
         lineHeight="30px"
         color="var(--ff-select-text-color)"
+        className={classNames({
+          'ff-select-dropdown-icon-container': showIcon,
+        })}
       >
+        {showIcon && (
+          <Icon
+            name={icon}
+            className="ff-select-dropdown-icon-container__icon"
+          />
+        )}
         {label}
       </Typography>
     );
@@ -104,7 +115,10 @@ const Dropdown: FC<DropdownProps> = ({
                 onSelectOptionSelector(option);
               }}
             >
-              {getOptionLabel(getLabel(option, labelAccessor))}
+              {getOptionLabel(
+                getLabel(option, labelAccessor),
+                'iconName' in option && option['iconName']
+              )}
             </div>
           ))
         ) : (

package/src/components/Select/components/types.ts

@@ -13,6 +13,7 @@ export interface DropdownProps {
   selectArrowRef?: RefObject<HTMLDivElement>;
   heightFromTop: number;
   selectedOption?: Option;
+  showIcon?: boolean;
 }
 
 export const dropdownDefaultCSSData = {

package/src/components/Select/types.ts

@@ -95,9 +95,19 @@ export interface SelectProps {
   onBlur?: () => void;
 
   /*
-  * Disable the select component input  
-  */
+   * Disable the select component input
+   */
   disableInput?: boolean;
+
+  /*
+   *  Provide the icon for the select
+   */
+  showIcon?: boolean;
+
+  /*
+   *  Provide the icon name for the select
+   */
+  iconName?: string;
 }
 
 export interface DrowdownPosition {

package/src/components/Table/Table.scss

@@ -1,5 +1,3 @@
-
-
 .ff-fixed-header-table {
   overflow-y: auto;
 }
@@ -24,8 +22,8 @@
       th {
         border-bottom: 1px solid var(--slider-table-color);
       }
-      th{
-        .ff-label-checkbox-container{
+      th {
+        .ff-label-checkbox-container {
           display: flex;
           align-items: center;
           .ff-table-checkbox {
@@ -64,7 +62,7 @@
           cursor: pointer;
         }
       }
-      td{
+      td {
         .ff-data-checkbox-container {
           display: flex;
           align-items: center;
@@ -81,6 +79,9 @@
   .secondary-bg {
     background-color: var(--slider-table-color);
   }
+  .tertiary-bg {
+    background-color: var(--custom-table-header-bg-color);
+  }
   .default-bg {
     background-color: transparent;
   }

package/src/components/Table/Types.ts

@@ -48,7 +48,7 @@ export interface TableProps {
   /**
    * Header type to have different background color
    */
-  headerType: 'default' | 'primary' | 'secondary';
+  headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
   /**
    * withFixedHeader prop to have non-scrollable fixed table header
    */

package/src/components/TableTree/Components/TableBody.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TableBodyProps } from '../types';
+import TableRow from './TableRow';
+
+const TableBody = React.memo(
+  ({
+    flattenedTreeData,
+    columnsData,
+    selected,
+    select,
+    onRowClick,
+    onToggleExpand,
+    onCheckBoxChange,
+  }: TableBodyProps) => (
+    <tbody>
+      {flattenedTreeData.map(({ node, level }) => {
+        return (
+          <TableRow
+            key={node.id}
+            node={node}
+            level={level}
+            columnsData={columnsData}
+            selected={selected}
+            select={select}
+            onRowClick={onRowClick}
+            onToggleExpand={onToggleExpand}
+            onCheckBoxChange={onCheckBoxChange}
+          />
+        );
+      })}
+    </tbody>
+  )
+);
+
+export default TableBody;

package/src/components/TableTree/Components/TableCell.tsx

@@ -0,0 +1,59 @@
+import { prepareData } from '../../../utils/TableCell/TableCell';
+import Checkbox from '../../Checkbox';
+import RadioButton from '../../RadioButton';
+import { TableCellProps } from '../types';
+import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
+import React from 'react';
+
+const renderSpaces = (level: number) =>
+  Array.from({ length: level }).map((_, i) => (
+    <span key={i} className="tree-table-space-block" />
+  ));
+
+const TableCell = React.memo(
+  ({
+    col,
+    node,
+    level,
+    selected,
+    select,
+    onCheckBoxChange,
+    onToggleExpand,
+  }: TableCellProps) => (
+    <td>
+      {col.isTree && renderSpaces(level + 1)}
+      {col.isTree && (
+        <span
+          className={`tree-table-space-block last-block  ${
+            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+          } ${node.folder ? '' : 'no-folder'}`}
+          onClick={() => onToggleExpand(node)}
+        >
+          {node.folder && <Arrow />}
+        </span>
+      )}
+      <span className="tree-table-td-content">
+        {col.isTree && select === 'checkbox' && (
+          <Checkbox
+            checked={selected.includes(node.id)}
+            onChange={() => onCheckBoxChange('checkbox', node)}
+          />
+        )}
+        {col.isTree && select === 'radio' && (
+          <RadioButton
+            name={node.title}
+            checked={selected.includes(node.id)}
+            value={node.id}
+            onChange={() => onCheckBoxChange('radio', node)}
+          />
+        )}
+        {prepareData(node, col)}
+      </span>
+      {col.actions && (
+        <div className="table-tree-row-action">{col.actions(node)}</div>
+      )}
+    </td>
+  )
+);
+
+export default TableCell;

package/src/components/TableTree/Components/TableHead.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { TableHeadProps } from '../types';
+
+const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
+  const hasDefaultValues = useMemo(
+    () => columnsData.some(({ defaultValue }) => !!defaultValue),
+    [columnsData]
+  );
+
+  return (
+    <thead>
+      <tr>
+        {columnsData.map(({ name }) => (
+          <th key={name}>{name}</th>
+        ))}
+      </tr>
+      {hasDefaultValues && (
+        <tr>
+          {columnsData.map(({ defaultValue, defaultActions }, index) => (
+            <td key={index}>
+              {defaultValue && (
+                <span className="">
+                  {defaultValue}
+                  {defaultActions && (
+                    <div className="table-tree-row-action">
+                      {defaultActions()}
+                    </div>
+                  )}
+                </span>
+              )}
+            </td>
+          ))}
+        </tr>
+      )}
+    </thead>
+  );
+});
+
+export default TableHead;