pixel-react 1.10.15 → 1.10.16

package/src/components/Table/Types.ts

@@ -1,135 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface ColumnsProps {
-  /**
-   * column name
-   */
-  header: string;
-  /**
-   * data key for particular column
-   */
-  accessor: string;
-  /**
-   * className for a column
-   */
-  className?: string;
-  /**
-   * width of a column
-   */
-  width?: number;
-  /**
-   * data for the column
-   */
-  cell?: (e: any) => JSX.Element | string | ReactNode;
-
-  onClick?: (colum: string, row: DataProps) => void;
-}
-export interface DataProps {
-  /**
-   * data for each row
-   */
-  [key: string]: any;
-}
-export interface SelectedItemProps {
-  /**
-   * selected row object | All selected flag
-   */
-  [key: string]: string | number | boolean;
-}
-export interface TableProps {
-  /**
-   * Data for table
-   */
-  data: Array<number | string | DataProps>;
-  /**
-   * Column details for table
-   */
-  columns: Array<any>;
-  /**
-   * Header type to have different background color
-   */
-  headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
-  /**
-   * withFixedHeader prop to have non-scrollable fixed table header
-   */
-  withFixedHeader?: boolean;
-  /**
-   * borderWithRadius prop to have table with border 1px and borderRadius 5px
-   */
-  borderWithRadius?: boolean;
-  /**
-   * Check box feature to select the row
-   */
-  withCheckbox?: boolean;
-  /**
-   * Event for checkbox onClick
-   */
-  onSelect?: (e: object, arg: SelectedItemProps) => void;
-  /**
-   * Check box feature to select the row
-   */
-  allSelected?: boolean;
-  /**
-   * send true to show partial checkbox in the header
-   */
-  partialSelected?: boolean;
-  /**
-   * send true to disable the checkbox in the header
-   */
-  headerCheckboxDisabled?: boolean;
-  /**
-   * The content that to be displayed if no data not found
-   */
-  noDataContent: string | ReactNode;
-  /**
-   * Image that to be displayed if you don't have data
-   */
-  noDataImage?: string;
-  /**
-   * Size of the image that to be displayed if you don't have data
-   */
-  noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
-  /**
-   *  Height of the table in string
-   */
-  height?: string;
-  /**
-   *  classNames for the table container
-   */
-  className?: string;
-  /**
-   *  classNames for the table Header container
-   */
-  tableHeadClass?: string;
-  /**
-   *  classNames for the table Row container
-   */
-  tableBodyRowClass?: string;
-  /**
-   * custom color for the column text
-   */
-  headerTextColor?: 'default' | 'primary';
-  /**
-   * custom color for the row text
-   */
-  tableDataTextColor?: string;
-  /**
-   * icon for the table header, for expand or other purposes
-   */
-  headerIconName?: string;
-  /**
-   * 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,
-
-  loadMore?: (_direction?: string) => void;
-
-}

package/src/components/Table/index.ts

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

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

@@ -1,73 +0,0 @@
-import { useState } from 'react';
-import Icon from '../../../Icon';
-import './AddModule.scss';
-import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
-import classNames from 'classnames';
-
-export const AddModule = ({
-  onConfirm,
-  onCancel,
-  error,
-  value = '',
-  label = 'Add Script',
-}: {
-  onConfirm?: (_text: string) => void;
-  onCancel?: () => void;
-  error?: string;
-  value?: string;
-  label?: string;
-}) => {
-  const [text, setText] = useState(value);
-
-  const isValueFilled = !checkEmpty(text);
-  return (
-    <>
-      <div className={classNames('add-module-container')}>
-        <div
-          className={classNames('ff-add-module-input-container', {
-            'ff-add-module-input-container--float': isValueFilled,
-          })}
-        >
-          <label
-            className="ff-add-module-label-container"
-            htmlFor="add-module-input"
-          >
-            <span
-              className={classNames('ff-add-module-label', {
-                'ff-input-label--no-hover': !!text,
-              })}
-            >
-              {label}
-            </span>
-          </label>
-          <input
-            name="add-module-input"
-            type="text"
-            className="add-module-input"
-            onChange={(e) => setText(e.target.value)}
-            value={text}
-          />
-        </div>
-        <div className="ff-module-icon-container">
-          <Icon
-            className="icons"
-            name="update_icon"
-            onClick={() => onConfirm && onConfirm(text)}
-            color="var(--label-edit-confirm-icon)"
-            height={18}
-            width={18}
-          />
-          <Icon
-            className="icons"
-            name="close"
-            onClick={onCancel}
-            color="var(--label-edit-cancel-icon)"
-            height={14}
-            width={14}
-          />
-        </div>
-      </div>
-      <small>{error}</small>
-    </>
-  );
-};

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

@@ -1,47 +0,0 @@
-import { TableBodyProps } from '../types';
-import TableRow from './TableRow';
-import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
-import { addNewRow } from '../Utils/addNewRow';
-
-const TableBody = ({
-  flattenedTreeData,
-  columnsData,
-  selected,
-  select,
-  onRowClick,
-  onToggleExpand,
-  onCheckBoxChange,
-  newNode = {},
-  onAddConfirm,
-  onAddCancel,
-  expanding,
-}: TableBodyProps) => {
-  if (checkEmpty(flattenedTreeData)) {
-    return null;
-  }
-
-  return (
-    <tbody className="ff-table-tree-body">
-      <tr id="ff-table-tree-first-node" />
-
-      {addNewRow(flattenedTreeData, newNode)?.map((node, index) => (
-        <TableRow
-          key={node.key}
-          node={node}
-          columnsData={columnsData}
-          selected={selected}
-          select={select}
-          onRowClick={onRowClick}
-          onToggleExpand={(node) => onToggleExpand(node, index)}
-          onCheckBoxChange={onCheckBoxChange}
-          onAddConfirm={onAddConfirm}
-          onAddCancel={onAddCancel}
-          isExpanding={node.key === expanding}
-        />
-      ))}
-      <tr id="ff-table-tree-last-node" />
-    </tbody>
-  );
-};
-
-export default TableBody;

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

@@ -1,182 +0,0 @@
-import React, { useEffect } from 'react';
-import { prepareData } from '../../../utils/TableCell/TableCell';
-import Checkbox from '../../Checkbox';
-import RadioButton from '../../RadioButton';
-import { TableCellProps } from '../types';
-import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
-import { AddModule } from './AddModule/AddModule';
-import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
-import Spinner from '../../../assets/icons/spinner.svg?react';
-
-const renderSpaces = (
-  level: number,
-  parentSiblings: boolean[] = [],
-  isLast?: boolean | undefined,
-  isContainer?: boolean | undefined
-) => {
-  let siblingsArray = parentSiblings;
-  let isLastNode = isLast;
-  if (checkEmpty(parentSiblings)) {
-    isLastNode = false;
-
-    if (!isNaN(level)) {
-      siblingsArray = Array(level).fill(true);
-    }
-  }
-
-  return (
-    <div className="tree-table-space-container">
-      {siblingsArray?.reverse()?.map((line, i) => (
-        <span
-          key={i}
-          className={`tree-table-space-block tree-table-space-block-${i} ${
-            !line ? 'no-lines' : ''
-          } ${isLastNode && i === level - 1 ? 'last-node' : ''} ${
-            isContainer ? 'folder' : ''
-          }`}
-        />
-      ))}
-    </div>
-  );
-};
-
-const TableCell = React.memo(
-  ({
-    treeRowRef,
-    col,
-    node,
-    selected,
-    select,
-    onCheckBoxChange,
-    onToggleExpand,
-    onAddConfirm,
-    onAddCancel,
-    isExpanding,
-  }: TableCellProps) => {
-    useEffect(() => {
-      const handleHover = (event: MouseEvent, isHovering: boolean) => {
-        const target = event.target as HTMLElement;
-        const levelClass = Array.from(target.classList).find((cls) =>
-          cls.startsWith('tree-table-space-block-')
-        );
-
-        if (levelClass) {
-          const level = levelClass.split('-').pop();
-
-          // Check if level is valid before selecting elements
-          if (level) {
-            const sameLevelBlocks = document.querySelectorAll(
-              `.tree-table-space-block-${level}`
-            ) as NodeListOf<HTMLElement>;
-
-            sameLevelBlocks.forEach((block) => {
-              if (isHovering) {
-                block.classList.add('tree-table-hovered');
-              } else {
-                block.classList.remove('tree-table-hovered');
-              }
-            });
-          }
-        }
-      };
-
-      const spaceBlocks = document.querySelectorAll(
-        '.tree-table-space-block'
-      ) as NodeListOf<HTMLElement>;
-
-      spaceBlocks.forEach((block) => {
-        block.addEventListener('mouseenter', (e) => handleHover(e, true));
-        block.addEventListener('mouseleave', (e) => handleHover(e, false));
-      });
-
-      return () => {
-        spaceBlocks.forEach((block) => {
-          block.removeEventListener('mouseenter', (e) => handleHover(e, true));
-          block.removeEventListener('mouseleave', (e) => handleHover(e, false));
-        });
-      };
-    }, []);
-    return (
-      <td
-        className={`ff-table-tree-td ${
-          col.isTree && node.container ? 'folder' : ''
-        }`}
-      >
-        {col.isTree &&
-          renderSpaces(
-            node.hierarchy + 1,
-            node.parentSiblings,
-            node.lastResource,
-            node.container
-          )}
-        <div className="tree-title-container">
-          {col.isTree && (
-            <span
-              className={`tree-table-space-block tree-table-space-block-${
-                node.hierarchy
-              } last-block  ${
-                node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-              } ${node.container ? '' : 'no-folder'}`}
-            >
-              {node.container &&
-                (node?.resourceCount + node?.subContainerCount > 0 ||
-                  node.expandable) && (
-                  <span onClick={() => onToggleExpand(node)}>
-                    {' '}
-                    {isExpanding ? <Spinner /> : <Arrow />}
-                  </span>
-                )}
-            </span>
-          )}
-          <span
-            className={`tree-table-td-content ${
-              col.isTree && node.container ? 'folder' : ''
-            }`}
-          >
-            {!node?.isNewNode && (
-              <>
-                {col.isTree && select === 'checkbox' && (
-                  <Checkbox
-                    checked={node?.checked || false}
-                    partial={node?.checked === 'partial'}
-                    onChange={(e) => onCheckBoxChange(e, node)}
-                  />
-                )}
-                {col.isTree && select === 'radio' && (
-                  <RadioButton
-                    name={node.key}
-                    checked={selected.includes(node.key)}
-                    value={node.key}
-                    onChange={(e) => onCheckBoxChange(e, node)}
-                  />
-                )}
-              </>
-            )}
-            {node.isNewNode && col.isTree ? (
-              <AddModule
-                onCancel={onAddCancel}
-                onConfirm={onAddConfirm}
-                error={node?.error || ''}
-                value={node.value}
-                label={node?.label || ''}
-              />
-            ) : (
-              <span className="tree-table-td-content-text">
-                {prepareData(node, col)}
-              </span>
-            )}
-          </span>
-        </div>
-        {col.actions && !node?.isNewNode && (
-          <div className={`table-tree-row-action`}>
-            {(() => {
-              return col.actions(node, treeRowRef);
-            })()}
-          </div>
-        )}
-      </td>
-    );
-  }
-);
-
-export default TableCell;

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

@@ -1,41 +0,0 @@
-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 className="ff-table-tree-head">
-      <tr className="ff-table-tree-row">
-        {columnsData.map(({ name, width }) => (
-          <th className="ff-table-tree-th" key={name} style={{ width: width }}>
-            {name}
-          </th>
-        ))}
-      </tr>
-      {hasDefaultValues && (
-        <tr className="ff-table-tree-row">
-          {columnsData.map(({ defaultValue, defaultActions }, index) => (
-            <td className="ff-table-tree-td" key={index}>
-              {defaultValue && (
-                <span className="tree-table-default-content">
-                  {defaultValue}
-                  {defaultActions && (
-                    <div className="table-tree-row-action">
-                      {defaultActions()}
-                    </div>
-                  )}
-                </span>
-              )}
-            </td>
-          ))}
-        </tr>
-      )}
-    </thead>
-  );
-});
-
-export default TableHead;

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

@@ -1,46 +0,0 @@
-import React, { useRef } from 'react';
-import { TableRowProps } from '../types';
-import TableCell from './TableCell';
-
-const TableRow = React.memo(
-  ({
-    node,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-    onAddConfirm,
-    onAddCancel,
-    isExpanding,
-  }: TableRowProps) => {
-    const treeRowRef = useRef<HTMLTableRowElement | null>(null);
-    return (
-      <tr
-        data-level={node.hierarchy}
-        ref={treeRowRef}
-        className="ff-table-tree-row show"
-        onClick={(e) => onRowClick(e, node)}
-      >
-        {columnsData.map((col) => (
-          <TableCell
-            treeRowRef={treeRowRef}
-            key={col.name}
-            col={col}
-            node={node}
-            selected={selected}
-            select={select}
-            onCheckBoxChange={onCheckBoxChange}
-            onToggleExpand={onToggleExpand}
-            onAddConfirm={onAddConfirm}
-            onAddCancel={onAddCancel}
-            isExpanding={isExpanding}
-          />
-        ))}
-      </tr>
-    );
-  }
-);
-
-export default TableRow;