pixel-react-excel-sheet 1.0.10 → 1.0.12

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/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;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TableRowProps } from '../types';
+import TableCell from './TableCell';
+
+const TableRow = React.memo(
+  ({
+    node,
+    level,
+    columnsData,
+    selected,
+    select,
+    onRowClick,
+    onToggleExpand,
+    onCheckBoxChange,
+  }: TableRowProps) => (
+    <tr
+      data-level={level}
+      className="show"
+      onClick={(e) => onRowClick(e, node)}
+    >
+      {columnsData.map((col) => (
+        <TableCell
+          key={col.name}
+          col={col}
+          node={node}
+          level={level}
+          selected={selected}
+          select={select}
+          onCheckBoxChange={onCheckBoxChange}
+          onToggleExpand={onToggleExpand}
+        />
+      ))}
+    </tr>
+  )
+);
+
+export default TableRow;

package/src/components/TableTree/TableTree.scss

@@ -1,8 +1,3 @@
-html,
-* {
-  font-family: 'Open Sans';
-}
-
 .tree-table-space-block {
   display: inline-block;
   width: 20px;
@@ -39,6 +34,14 @@ html,
 .tree-table-wrap {
   width: 100%;
 }
+thead{
+  position: sticky;
+  top: 12px;
+}
+
+tbody{
+  overflow: scroll;
+}
 
 .tree-table {
   border: 1px solid #f1f1f1;

package/src/components/TableTree/TableTree.tsx

@@ -4,7 +4,13 @@ import { prepareData } from '../../utils/TableCell/TableCell';
 import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
 import Checkbox from '../Checkbox';
 import RadioButton from '../RadioButton';
-import { TreeTableProps } from './types';
+import {
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRowProps,
+  TreeTableProps,
+} from './types';
 
 // Helper to render spaces for levels
 const renderSpaces = (level: number) =>
@@ -32,27 +38,17 @@ const TableCell = React.memo(
     col,
     node,
     level,
-    isExpanded,
     selected,
     select,
     onCheckBoxChange,
     onToggleExpand,
-  }: {
-    col: any;
-    node: any;
-    level: number;
-    isExpanded: boolean;
-    selected: string[];
-    select: string | null;
-    onCheckBoxChange: (type: string, node: any) => void;
-    onToggleExpand: (node: any) => void;
-  }) => (
+  }: TableCellProps) => (
     <td>
       {col.isTree && renderSpaces(level + 1)}
       {col.isTree && (
         <span
           className={`tree-table-space-block last-block  ${
-            isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
           } ${node.folder ? '' : 'no-folder'}`}
           onClick={() => onToggleExpand(node)}
         >
@@ -89,23 +85,12 @@ const TableRow = React.memo(
     node,
     level,
     columnsData,
-    isExpanded,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-  }: {
-    node: any;
-    level: number;
-    columnsData: any[];
-    isExpanded: boolean;
-    selected: string[];
-    select: string | null;
-    onRowClick: (e: any, node: any) => void;
-    onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (type: string, node: any) => void;
-  }) => (
+  }: TableRowProps) => (
     <tr
       data-level={level}
       className="show"
@@ -117,7 +102,6 @@ const TableRow = React.memo(
           col={col}
           node={node}
           level={level}
-          isExpanded={isExpanded}
           selected={selected}
           select={select}
           onCheckBoxChange={onCheckBoxChange}
@@ -129,7 +113,7 @@ const TableRow = React.memo(
 );
 
 // Component: TableHead
-const TableHead = React.memo(({ columnsData }: { columnsData: any[] }) => {
+const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
   const hasDefaultValues = useMemo(
     () => columnsData.some(({ defaultValue }) => !!defaultValue),
     [columnsData]
@@ -169,32 +153,20 @@ const TableBody = React.memo(
   ({
     flattenedTreeData,
     columnsData,
-    expandedNodes,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-  }: {
-    flattenedTreeData: any[];
-    columnsData: any[];
-    expandedNodes: string[];
-    selected: string[];
-    select: string | null;
-    onRowClick: (e: any, node: any) => void;
-    onToggleExpand: (node: any) => void;
-    onCheckBoxChange: (type: string, node: any) => void;
-  }) => (
+  }: TableBodyProps) => (
     <tbody>
       {flattenedTreeData.map(({ node, level }) => {
-        const isExpanded = expandedNodes.includes(node?.id);
         return (
           <TableRow
             key={node.id}
             node={node}
             level={level}
             columnsData={columnsData}
-            isExpanded={isExpanded}
             selected={selected}
             select={select}
             onRowClick={onRowClick}
@@ -215,12 +187,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
   select = null,
   onChange,
   onClick,
-  expandedNodes = [],
   onExpand,
 }) => {
   const handleToggleExpand = useCallback(
-    (node: any) => onExpand?.(!expandedNodes.includes(node?.id), node?.id),
-    [expandedNodes, onExpand]
+    (node: any) => onExpand?.(true, node?.id),
+    [onExpand]
   );
 
   const handleCheckBoxChange = useCallback(
@@ -228,7 +199,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
       const nodeId = node.id;
 
       if (type === 'radio') {
-        onChange?.([nodeId]);
+        onChange?.('true', [nodeId]);
       } else {
         let updatedSelected = [...selected];
 
@@ -242,7 +213,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
           );
         }
 
-        onChange?.(updatedSelected);
+        onChange?.('true', updatedSelected);
       }
     },
     [selected, treeData, onChange]
@@ -260,7 +231,6 @@ const TreeTable: React.FC<TreeTableProps> = ({
         <TableBody
           flattenedTreeData={treeData}
           columnsData={columnsData}
-          expandedNodes={expandedNodes}
           selected={selected}
           select={select}
           onRowClick={handleRowClick}

package/src/components/TableTree/Utils/getAllChildIds.ts

@@ -0,0 +1,12 @@
+const getAllChildIds = (nodeId: string, data: any[]): string[] => {
+  let result = [nodeId];
+
+  // Traverse the tree and find children based on parentId
+  data.forEach(({ node }) => {
+    if (node.parentId === nodeId) {
+      result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
+    }
+  });
+
+  return result;
+};

package/src/components/TableTree/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface TreeNode {
   key: string;
   [key: string]: any;
@@ -5,16 +7,53 @@ export interface TreeNode {
   expanded?: boolean;
 }
 
+declare type JSX = ReactNode | JSX.Element[] | string | null;
+
+export interface TableCellProps {
+  col: any;
+  node: any;
+  level: number;
+  selected: string[];
+  select: string | null;
+  onCheckBoxChange: (type: string, node: any) => void;
+  onToggleExpand: (node: any) => void;
+}
+
+export interface TableHeadProps {
+  columnsData: any[];
+}
+
+export interface TableBodyProps {
+  flattenedTreeData: any[];
+  columnsData: any[];
+  selected: string[];
+  select: string | null;
+  onRowClick: (e: any, node: any) => void;
+  onToggleExpand: (node: any) => void;
+  onCheckBoxChange: (type: string, node: any) => void;
+}
+
+export interface TableRowProps {
+  node: any;
+  level: number;
+  columnsData: any[];
+  selected: string[];
+  select: string | null;
+  onRowClick: (e: any, node: any) => void;
+  onToggleExpand: (node: any) => void;
+  onCheckBoxChange: (type: string, node: any) => void;
+}
+
 export interface Column {
   name: string;
   accessor: string;
   width: string;
   isClickable?: boolean;
-  cell?: (row: any) => JSX.Element | string | null;
-  actions?: (row: any) => JSX.Element[];
+  cell?: (row: any) => JSX
+  actions?: (row: any) => JSX
   isTree?: boolean;
   defaultValue?: string;
-  defaultActions?: () => JSX.Element[];
+  defaultActions?: () => JSX
 }
 
 export interface TreeTableProps {
@@ -22,9 +61,8 @@ export interface TreeTableProps {
   columnsData: Column[];
   selected?: string[];
   select?: 'radio' | 'checkbox' | 'none';
-  onChange?: (nodes: string[]) => void;
+  onChange?: (e: any, node: string[]) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
-  expandedNodes: string[];
   onExpand?: (_isExpanded: boolean, node: string) => void;
   onPagination?: (_direction: string) => void;
 }