pixel-react 1.6.2 → 1.6.5

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,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Select from './Select';
-import { useState } from 'react';
+import React,{ useState } from 'react';
 import { Option } from './types';
 import RadioGroup from '../RadioGroup';
+import React from 'react';
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',
@@ -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/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;