pixel-react 1.9.1 → 1.9.3

package/src/components/Table/Table.tsx

@@ -11,14 +11,93 @@ import { prepareData } from '../../utils/TableCell/TableCell';
 import Checkbox from '../Checkbox';
 import Typography from '../Typography';
 import Icon from '../Icon';
+import { closestCorners, DndContext, DragEndEvent } from '@dnd-kit/core';
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+const SortableRow = ({
+  row,
+  columns,
+  tableBodyRowClass,
+  handleOnclick,
+  tableDataTextColor,
+  withCheckbox,
+  onSelectClick,
+  draggable,
+}: any) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: row.id,
+      disabled: row.disabled,
+    });
 
-// import NoData from '../NoData/NoData';
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+  return (
+    <tr
+      ref={setNodeRef}
+      style={style}
+      key={row.id}
+      className={classNames(tableBodyRowClass, {
+        'disabled-row': row.disabled,
+      })}
+    >
+      {columns.map((column: any, index: number) => {
+        return (
+          <td
+            key={column.accessor + index}
+            onClick={() => handleOnclick(column, row)}
+            className={classNames(column.className, {
+              'clickable-cell': column.onClick,
+            })}
+          >
+            <Typography
+              as="div"
+              color={tableDataTextColor}
+              className="ff-data-checkbox-container"
+            >
+              {index === 0 && withCheckbox && (
+                <span className="ff-table-checkbox">
+                  <Checkbox
+                    onChange={(e) => {
+                      onSelectClick(e, row);
+                    }}
+                    checked={row.checked}
+                    disabled={!!row.disabled}
+                  />
+                </span>
+              )}
+              {index === 0 && draggable && (
+                <span
+                  className={
+                    row.disabled ? 'ff-table-drag' : 'ff-table-drag-icon'
+                  }
+                  {...listeners}
+                  {...attributes}
+                >
+                  <Icon name="drag" />
+                </span>
+              )}
+              {prepareData(row, column)}
+            </Typography>
+          </td>
+        );
+      })}
+    </tr>
+  );
+};
 
 const Table = ({
   data = [],
   columns = [],
   headerType,
-  withCheckbox,
+  withCheckbox = false,
   onSelect,
   allSelected,
   partialSelected = false,
@@ -26,8 +105,6 @@ const Table = ({
   borderWithRadius = false,
   headerCheckboxDisabled = false,
   noDataContent,
-  // noDataImage,
-  // noDataImageSize,
   height = '100%',
   className = '',
   tableHeadClass = '',
@@ -36,143 +113,133 @@ const Table = ({
   tableDataTextColor,
   headerIconName = '',
   headerIconOnClick = () => {},
+  draggable = false,
+  onDragEnd,
 }: TableProps) => {
-  const hanleOnclick = (column: ColumnsProps, row: DataProps) => {
+  const handleOnclick = (column: ColumnsProps, row: DataProps) => {
     let { onClick, accessor } = column;
     if (onClick && isFunction(onClick)) {
       onClick(accessor, row);
     }
   };
+
   const onSelectClick = (e: object, item: SelectedItemProps) => {
     if (onSelect) {
       onSelect(e, item);
     }
   };
 
-  return (
-    <div
-      style={{ height: height, position: 'relative' }}
-      className={classNames(className, {
-        'ff-fixed-header-table': withFixedHeader,
-        'border-borderRadius': borderWithRadius,
-      })}
-    >
-      {/* {iconContainer ? iconContainer : ''} */}
-      <div className="ff-table-icon">
-        <Icon
-          height={14}
-          width={14}
-          name={headerIconName}
-          onClick={headerIconOnClick}
-        ></Icon>
-      </div>
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
 
-      <table className={classNames(`ff-table`)} cellSpacing={0}>
-        <thead
-          className={classNames(
-            {
-              'ff-fixed-header': withFixedHeader,
-            },
-            tableHeadClass
-          )}
+    const oldIndex = data.findIndex((item: any) => item.id === active.id);
+    const newIndex = data.findIndex((item: any) => item.id === over.id);
+
+    if (oldIndex === -1 || newIndex === -1) return;
+    if (onDragEnd) onDragEnd(oldIndex, newIndex);
+  };
+
+  return (
+    <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
+      <SortableContext
+        disabled={!draggable}
+        items={data?.map((row: any) => row.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        <div
+          style={{ height: height, position: 'relative' }}
+          className={classNames(className, {
+            'ff-fixed-header-table': withFixedHeader,
+            'border-borderRadius': borderWithRadius,
+          })}
         >
-          <tr>
-            {/* columns.map((column, index) */}
-            {columns.map((column, index) => (
-              <th
-                className={classNames(
-                  `${headerType && `${headerType}-bg`}`,
-                  `${headerTextColor && `${headerTextColor}-color`}`
-                )}
-                key={column.header}
-                style={{ width: column?.width }}
-              >
-                <Typography
-                  as="div"
-                  fontSize={12}
-                  fontWeight="semi-bold"
-                  className="ff-label-checkbox-container"
-                >
-                  {index === 0 && withCheckbox && (
-                    <span className="ff-table-checkbox">
-                      <Checkbox
-                        onChange={(e) => {
-                          onSelectClick(e, { allSelected: e.target.checked });
-                        }}
-                        checked={
-                          allSelected !== undefined ? allSelected : false
-                        }
-                        partial={!!partialSelected}
-                        disabled={headerCheckboxDisabled}
-                      />
-                    </span>
-                  )}
+          <div className="ff-table-icon">
+            <Icon
+              height={14}
+              width={14}
+              name={headerIconName}
+              onClick={headerIconOnClick}
+            />
+          </div>
 
-                  {column.header}
-                </Typography>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {data.length > 0 &&
-            data.map((row: any, index: number) => (
-              <tr
-                key={row.id || index}
-                className={classNames(tableBodyRowClass, {
-                  'disabled-row': row.disabled,
-                })}
-              >
-                {columns.map((column, i) => {
-                  return (
-                    <td
-                      key={column.accessor + i}
-                      onClick={() => hanleOnclick(column, row)}
-                      className={classNames(column.className, {
-                        'clickable-cell': column.onClick,
-                      })}
+          <table className={classNames(`ff-table`)} cellSpacing={0}>
+            <thead
+              className={classNames(
+                {
+                  'ff-fixed-header': withFixedHeader,
+                },
+                tableHeadClass
+              )}
+            >
+              <tr>
+                {/* columns.map((column, index) */}
+                {columns.map((column, index) => (
+                  <th
+                    className={classNames(
+                      `${headerType && `${headerType}-bg`}`,
+                      `${headerTextColor && `${headerTextColor}-color`}`
+                    )}
+                    key={column.header}
+                    style={{ width: column?.width }}
+                  >
+                    <Typography
+                      as="div"
+                      fontWeight="semi-bold"
+                      className="ff-label-checkbox-container"
                     >
-                      <Typography
-                        as="div"
-                        color={tableDataTextColor}
-                        className="ff-data-checkbox-container"
-                      >
-                        {i === 0 && withCheckbox && (
-                          <span className="ff-table-checkbox">
-                            <Checkbox
-                              onChange={(e) => {
-                                onSelectClick(e, row);
-                              }}
-                              checked={row.checked}
-                              disabled={!!row.disabled}
-                            />
-                          </span>
-                        )}
-                        {prepareData(row, column)}
-                      </Typography>
-                    </td>
-                  );
-                })}
+                      {index === 0 && withCheckbox && (
+                        <span className="ff-table-checkbox">
+                          <Checkbox
+                            onChange={(e) => {
+                              onSelectClick(e, {
+                                allSelected: e.target.checked,
+                              });
+                            }}
+                            checked={
+                              allSelected !== undefined ? allSelected : false
+                            }
+                            partial={!!partialSelected}
+                            disabled={headerCheckboxDisabled}
+                          />
+                        </span>
+                      )}
+
+                      {column.header}
+                    </Typography>
+                  </th>
+                ))}
               </tr>
-            ))}
-        </tbody>
-      </table>
-      {data.length <= 0 && (
-        <div
-          className="no-data-content"
-          style={{ height: `calc(${height} - 50px)` }}
-        >
-          {/* commented for future requirement for adding image when the data will not be present*/}
-          {/* <NoData
-            image={noDataImage ? noDataImage : 'no_data_found'}
-            content={noDataContent}
-            size={noDataImageSize}
-          /> */}
-          {noDataContent}
+            </thead>
+            <tbody className="ff-fixed-header-table">
+              {data?.length > 0 &&
+                data?.map((row: any) => (
+                  <SortableRow
+                    key={row?.id}
+                    row={row}
+                    columns={columns}
+                    tableBodyRowClass={tableBodyRowClass}
+                    handleOnclick={handleOnclick}
+                    tableDataTextColor={tableDataTextColor}
+                    withCheckbox={withCheckbox}
+                    onSelectClick={onSelectClick}
+                    draggable={draggable}
+                  />
+                ))}
+            </tbody>
+          </table>
+          {data?.length <= 0 && (
+            <div
+              className="no-data-content"
+              style={{ height: `calc(${height} - 50px)` }}
+            >
+              {noDataContent}
+            </div>
+          )}
         </div>
-      )}
-    </div>
+      </SortableContext>
+    </DndContext>
   );
 };
 
-export default Table;
+export default Table;

package/src/components/Table/Types.ts

@@ -121,4 +121,12 @@ export interface TableProps {
    * handle function for the table header icon
    */
   headerIconOnClick?: () => void;
+  /**
+  * Drag and Drop pass true to enable
+  */
+  draggable?: boolean,
+  /**
+  * Drag and Drop indexes
+  */
+  onDragEnd?: (startIndex: number, endIndex: number) => void | undefined
 }

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

@@ -12,27 +12,25 @@ const TableBody = React.memo(
     onToggleExpand,
     onCheckBoxChange,
   }: TableBodyProps) => (
-    <tbody className='ff-table-tree-body'>
+    <tbody className="ff-table-tree-body">
       <tr id="ff-table-tree-first-node" />
-      {flattenedTreeData?.map(
-        ({ node, level, parentSiblings = [], isLast = false }) => {
-          return (
-            <TableRow
-              key={node.id}
-              node={node}
-              level={level}
-              columnsData={columnsData}
-              selected={selected}
-              select={select}
-              onRowClick={onRowClick}
-              onToggleExpand={onToggleExpand}
-              onCheckBoxChange={onCheckBoxChange}
-              parentSiblings={parentSiblings}
-              isLast={isLast}
-            />
-          );
-        }
-      )}
+      {flattenedTreeData?.map((node) => {
+        return (
+          <TableRow
+            key={node.searchKey}
+            node={node}
+            // level={level}
+            columnsData={columnsData}
+            selected={selected}
+            select={select}
+            onRowClick={onRowClick}
+            onToggleExpand={onToggleExpand}
+            onCheckBoxChange={onCheckBoxChange}
+            // parentSiblings={parentSiblings}
+            // isLast={isLast}
+          />
+        );
+      })}
       <tr id="ff-table-tree-last-node" />
     </tbody>
   )

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

@@ -4,38 +4,50 @@ import RadioButton from '../../RadioButton';
 import { TableCellProps } from '../types';
 import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
 import React from 'react';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 const renderSpaces = (
   level: number,
   parentSiblings: boolean[],
   isLast?: boolean | undefined
-) => (
-  <div className="tree-table-space-container">
-    {parentSiblings.reverse().map((line, i) => (
-      <span
-        key={i}
-        className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
-          isLast && i === level - 1 ? 'last-node' : ''
-        }`}
-      />
-    ))}
-  </div>
-);
+) => {
+  let siblingsArray = parentSiblings;
+  let isLastNode = isLast;
+  if (checkEmpty(parentSiblings)) {
+    isLastNode = false;
+
+    if (!isNaN(level)) {
+      siblingsArray = Array(level).fill(true);
+    }
+  }
+
+  parentSiblings;
+  return (
+    <div className="tree-table-space-container">
+      {siblingsArray.reverse().map((line, i) => (
+        <span
+          key={i}
+          className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
+            isLastNode && i === level - 1 ? 'last-node' : ''
+          }`}
+        />
+      ))}
+    </div>
+  );
+};
 
 const TableCell = React.memo(
   ({
     col,
     node,
-    level,
     selected,
     select,
     onCheckBoxChange,
     onToggleExpand,
-    parentSiblings,
-    isLast,
   }: TableCellProps) => (
     <td>
-      {col.isTree && renderSpaces(level + 1, parentSiblings, isLast)}
+      {col.isTree &&
+        renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
       <div className="tree-title-container">
         {col.isTree && (
           <span

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

@@ -5,18 +5,18 @@ import TableCell from './TableCell';
 const TableRow = React.memo(
   ({
     node,
-    level,
+    // level,
     columnsData,
     selected,
     select,
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-    parentSiblings,
-    isLast,
+    // parentSiblings,
+    // isLast,
   }: TableRowProps) => (
     <tr
-      data-level={level}
+      data-level={node.hierarchy}
       className="show"
       onClick={(e) => onRowClick(e, node)}
     >
@@ -25,13 +25,10 @@ const TableRow = React.memo(
           key={col.name}
           col={col}
           node={node}
-          level={level}
           selected={selected}
           select={select}
           onCheckBoxChange={onCheckBoxChange}
           onToggleExpand={onToggleExpand}
-          parentSiblings={parentSiblings}
-          isLast={isLast}
         />
       ))}
     </tr>

package/src/components/TableTree/TableTree.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof TableTree>;
 const colData = [
   {
     name: 'Script Name',
-    accessor: 'title',
+    accessor: 'name',
     width: '400px',
     isClickable: true,
     actions: (row) => {
@@ -36,56 +36,56 @@ const colData = [
 
   {
     name: 'Module Path',
-    accessor: 'id',
+    accessor: 'createdBy',
     width: '200px',
     isClickable: true,
   },
 
   {
     name: 'Module Path',
-    accessor: 'path',
+    accessor: 'createdBy',
     width: '200px',
     isClickable: true,
   },
   {
     name: 'Module Path',
-    accessor: 'path',
+    accessor: 'createdBy',
     width: '200px',
     isClickable: true,
   },
   {
     name: 'Module Path',
-    accessor: 'path',
+    accessor: 'createdBy',
     width: '200px',
     isClickable: true,
   },
   {
     name: 'Module Path',
-    accessor: 'path',
+    accessor: 'createdBy',
     width: '200px',
     isClickable: true,
   },
   {
     name: 'Module Path',
-    accessor: 'path',
+    accessor: 'createdBy',
     width: '200px',
     isClickable: true,
   },
   {
     name: 'Module Path',
-    accessor: 'path',
+    accessor: 'createdBy',
     width: '200px',
     isClickable: true,
   },
   { name: 'Created By', accessor: 'createdByUname', width: '200px' },
   {
     name: 'Script Count',
-    accessor: 'moduleLevelScriptCount',
+    accessor: 'createdBy',
     width: '200px',
   },
   {
     name: 'state',
-    accessor: 'state',
+    accessor: 'createdBy',
     width: '100px',
     cell: ({ value }) => {
       return (

package/src/components/TableTree/TableTree.tsx

@@ -16,26 +16,29 @@ const TreeTable: React.FC<TreeTableProps> = ({
   onExpand,
   loadMore = () => {},
 }) => {
-  useIntersectionObserver(['ff-table-tree-last-node'], {
-    root: null,
-    rootMargin: '0px',
-    threshold: 0.1,
-    onIntersect: (entry) => {
-      if (entry.isIntersecting) {
-        if (functionCheck(loadMore)) {
-          let direction = 'up';
-          if (entry.target.id === 'ff-table-tree-last-node') {
-            direction = 'down';
+  useIntersectionObserver(
+    ['ff-table-tree-last-node', 'ff-table-tree-first-node'],
+    {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1,
+      onIntersect: (entry) => {
+        if (entry.isIntersecting) {
+          if (functionCheck(loadMore)) {
+            let direction = 'up';
+            if (entry.target.id === 'ff-table-tree-last-node') {
+              direction = 'down';
+            }
+            loadMore(direction);
           }
-          loadMore(direction);
+          console.log('Element in view:', entry.target.id);
         }
-        console.log('Element in view:', entry.target.id);
-      }
-    },
-  });
+      },
+    }
+  );
 
   const handleToggleExpand = useCallback(
-    (node: any) => onExpand?.(true, node?.id),
+    (node: any) => onExpand?.(true, node?.key),
     [onExpand]
   );