pixel-react 1.1.8 → 1.2.0

package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import Tabs from '../../Tabs';
+import { Col, Container, Row } from '../../GridLayout/GridLayout';
+
+interface ExcelSheetBarProps {
+  fileDetails: {
+    sheetNames: string[]; // List of sheet names
+  };
+  handleSheetChange: (name: string, index: number) => void;
+  contextMenu: (e: React.MouseEvent, name: string, index: number) => void;
+  addSheet: () => void;
+  selectedSheet: { name: string };
+  contextSelect: (e: React.MouseEvent) => void;
+}
+
+const ExcelSheetBar: React.FC<ExcelSheetBarProps> = ({
+  fileDetails,
+  handleSheetChange,
+  contextMenu,
+  addSheet,
+  selectedSheet,
+  contextSelect,
+}) => {
+  const [activeTabId, setActiveTabId] = useState<string>('0');
+
+  const tabsData = fileDetails.sheetNames.map((name, index) => ({
+    label: name,
+    components: (
+      <div
+        key={name}
+        className={`tab-request ${
+          name === selectedSheet.name ? 'active font-bold' : ''
+        }`}
+        onClick={() => handleSheetChange(name, index)}
+        onContextMenu={(e) => {
+          contextMenu(e, name, index);
+          contextSelect(e);
+        }}
+      >
+        {name}
+      </div>
+    ),
+    id: index.toString(),
+  }));
+
+  return (
+    <>
+      <Container fluid>
+        <Row>
+          <Col size={0}>
+            <Tooltip title="Add Sheet" placement="top">
+              <Icon
+                className="cursor-pointer ml-1"
+                hoverEffect={true}
+                name="plus_icon"
+                height={20}
+                width={20}
+                onClick={addSheet}
+              />
+            </Tooltip>
+          </Col>
+          <Col size={11}>
+            <Tabs
+              tabsData={tabsData}
+              activeTabId={activeTabId}
+              onTabClick={(tabId) => {
+                setActiveTabId(tabId);
+              }}
+            />
+          </Col>
+        </Row>
+      </Container>
+    </>
+  );
+};
+
+export default ExcelSheetBar;

package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss

@@ -0,0 +1,22 @@
+@import '../../../assets/styles/colors';
+@import '../../../assets/styles/fonts';
+
+.excel-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding: 5px 0;
+  width: 100%;
+
+  .menu-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+}
+
+.excel-toolbar-hide {
+  display: none;
+}

package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useState } from 'react';
+import './ExcelToolBar.scss';
+import ColorBarSelector from '../ColorBarselector/ColorBarSelector';
+import MenuOption from '../../MenuOption';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import classNames from 'classnames';
+import Select from '../../Select';
+
+let colors={grey_dark:"#000000"}
+
+const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
+  toolbar = 'show',
+  applyStyle,
+  formatePaint,
+}) => {
+  const [borderType, setBorderType] = useState<string>('All Border');
+  const [textAlign, setTextAlign] = useState<string>('Text Left');
+  const [colorContainer, setColorPicker] = useState<ColorContainer>({
+    color: colors.grey_dark.replace('#', ''),
+    backgroundColor: colors.grey_dark.replace('#', ''),
+    borderColor: colors.grey_dark.replace('#', ''),
+  });
+  const [formatePainter, setFormatePainter] = useState<boolean>(false);
+
+  const borderTypeIcon = () =>{
+
+    return [
+      { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
+      { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
+      { value: 'border-left', label: 'Border Left', icon: 'border_left' },
+      { value: 'border-right', label: 'Border Right', icon: 'border_right' },
+      { value: 'border-top', label: 'Border Top', icon: 'border_top' },
+      { value: 'border-none', label: 'No Border', icon: 'no_border' },
+    ]
+  }
+    const TextAlignIcon = () => {
+      return [
+        { label: 'Text Left', value: 'text-align-left', icon: 'text_align_left' },
+        { label: 'Text Center', value: 'text-align-center', icon: 'text_align_center' },
+        { label: 'Text Right', value: 'text-align-right', icon: 'text_align_right' },
+      ];
+    };
+
+  const getTextColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, color }));
+  };
+
+  const getBackgroundColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, backgroundColor: color }));
+  };
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      applyStyle('color', colorContainer.color);
+    }, 800);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.color]);
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      applyStyle('backgroundColor', colorContainer.backgroundColor);
+    }, 800);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.backgroundColor]);
+
+  return (
+    <div
+      className={classNames('excel-toolbar', {
+        'excel-toolbar-hide': toolbar === 'hide',
+      })}
+    >
+      <Tooltip placement="top" title={'Bold'}>
+        <Icon
+          disabled={toolbar === 'disable'}
+          onClick={() => {
+            applyStyle('bold', true);
+          }}
+          name="bold"
+        />
+      </Tooltip>
+      <Tooltip placement="top" title={'Italic'}>
+        <Icon
+          disabled={toolbar === 'disable'}
+          onClick={() => {
+            applyStyle('italic', true);
+          }}
+          name="italic"
+        />
+      </Tooltip>
+
+      <Select
+      className='textType'
+  label="Text type"
+  onChange={()=>{}}
+  optionsList={[
+    {
+      label: 'Option 1',
+      value: '1'
+    },
+    {
+      label: 'Option 2',
+      value: '2'
+    },
+    {
+      label: 'Option 3',
+      value: '3'
+    }
+  ]}
+  selectedOption={{
+    label: 'Option 2',
+    value: 'Arial'
+  }}
+/>
+      <Select
+  label="Text Size"
+  onChange={()=>{}}
+  optionsList={[
+    {
+      label: 'Option 1',
+      value: '1'
+    },
+    {
+      label: 'Option 2',
+      value: '2'
+    },
+    {
+      label: 'Option 3',
+      value: '3'
+    }
+  ]}
+  selectedOption={{
+    label: 'Option 2',
+    value: '11'
+  }}
+/>
+<div style={{display:"flex",alignItems:'center'}}>
+<Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="all_borders"
+          />
+        </div>
+      </Tooltip>
+      <MenuOption
+        iconName="more"
+        options={borderTypeIcon()}
+        tooltipTitle="Border Type"
+        tooltipPlacement="top"
+        onOptionClick={(e) => {          
+          setBorderType(borderType);
+          applyStyle('border', e.label);
+        }}
+      />
+      </div>
+      <div style={{display:"flex",alignItems:'center'}}>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="text_align_left"
+          />
+        </div>
+      </Tooltip>
+      <MenuOption
+        iconName="more"
+        options={TextAlignIcon()}
+        tooltipTitle="Text Align"
+        tooltipPlacement="top"
+        onOptionClick={(e) => {
+          setTextAlign(textAlign);
+          applyStyle('alignment', e.label);
+        }}
+      />
+      </div>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="formate_painter"
+          />
+        </div>
+      </Tooltip>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="strike_through"
+          />
+        </div>
+      </Tooltip>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="underline"
+          />
+        </div>
+      </Tooltip>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="double_underline"
+          />
+        </div>
+      </Tooltip>
+      <div className="menu-option">
+        <Tooltip placement="top" title={'Text Color'}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              applyStyle('color', colorContainer.color);
+            }}
+            name="text_color"
+          />
+          <ColorBarSelector
+            disabled={toolbar === 'disable'}
+            getColorValue={getTextColor}
+          />
+        </Tooltip>
+      </div>
+      <div className="menu-option">
+        <Tooltip placement="top" title={'Background Color'}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              applyStyle('backgroundColor', colorContainer.backgroundColor);
+            }}
+            name="fill_color"
+          />
+        </Tooltip>
+        <ColorBarSelector
+          disabled={toolbar === 'disable'}
+          getColorValue={getBackgroundColor}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ExcelToolBar;

package/src/components/ExcelFile/ImportExcelStyles.tsx

@@ -0,0 +1,86 @@
+interface CellStyle {
+  color?: string;
+  backgroundColor?: string;
+  bold?: boolean;
+  italic?: boolean;
+  name?: string;
+  border: {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+  };
+  alignment: {
+    horizontal?: string;
+    vertical?: string;
+    wrapText?: boolean;
+  };
+}
+
+interface CellData {
+  style?: CellStyle;
+}
+
+type ImportExcelStylesData = Array<Array<CellData>>;
+
+export default function ImportExcelStyles(data: ImportExcelStylesData | null) {
+  const getTable = document.querySelector(
+    '.Spreadsheet__table'
+  ) as HTMLTableElement | null;
+
+  if (!getTable) {
+    return;
+  }
+
+  const tableRows = getTable.querySelectorAll('tr');
+  const tableHeader = getTable.querySelectorAll('th');
+
+  tableHeader.forEach((cell) => {
+    const cellText = cell.innerText.trim();
+    const isNumber = !isNaN(Number(cellText));
+    cell.style.width = isNumber ? '50px' : '150px';
+  });
+
+  if (data) {
+    data.forEach((row, rowIndex) => {
+      const rowData = tableRows[rowIndex + 1] as
+        | HTMLTableRowElement
+        | undefined;
+
+      if (!rowData) return;
+
+      const colData = rowData.querySelectorAll('.Spreadsheet__cell');
+
+      row.forEach((column, columnIndex) => {
+        if (colData[columnIndex] && column.style) {
+          const {
+            color,
+            backgroundColor,
+            bold,
+            italic,
+            name,
+            border,
+            alignment,
+          } = column.style;
+          const cell = colData[columnIndex] as HTMLElement;
+          cell.style.color = color ? `#${color}` : '';
+          cell.style.backgroundColor = backgroundColor
+            ? `#${backgroundColor}`
+            : 'white';
+          cell.style.fontWeight = bold ? 'bolder' : 'normal';
+          cell.style.fontStyle = italic ? 'italic' : 'normal';
+          cell.style.fontFamily = name || '';
+          cell.style.borderLeft =
+            border.left === 'NONE' ? '' : `2px solid ${'black'}`;
+          cell.style.borderRight =
+            border.right === 'NONE' ? '' : `2px solid ${'black'}`;
+          cell.style.borderBottom =
+            border.bottom === 'NONE' ? '' : `2px solid ${'black'}`;
+          cell.style.borderTop =
+            border.top === 'NONE' ? '' : `2px solid ${'black'}`;
+          cell.style.textAlign = alignment?.horizontal || 'left';
+        }
+      });
+    });
+  }
+}

package/src/components/ExcelFile/Types.ts

@@ -0,0 +1,241 @@
+interface ExcelFileProps {
+  /** The Excel data containing sheets and their content */
+  excelData: {
+    sheets: WorkSheet[];
+  };
+
+  /** Optional: Provide context menu options for actions like right-click */
+  contextOption?: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Controls whether the toolbar is shown, disabled, or hidden */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** Callback function to save the Excel data */
+  onSave?: (excelData?: any) => void;
+}
+
+interface WorkSheet {
+  /** The name of the worksheet */
+  sheetName: string;
+
+  /** 2D array of worksheet data (cells) */
+  data: WorkData[][];
+}
+
+interface WorkData {
+  /** Value of the cell */
+  value: string;
+
+  /** Styling options for the cell */
+  style: CellStyle;
+  type?:boolean;
+}
+
+interface CellStyle {
+  /** Font name for the cell text */
+  name?: string;
+
+  /** Font size of the cell text */
+  size?: number;
+
+  position?:string;
+
+  /** Whether the text is bold */
+  bold?: boolean;
+
+  fontSize?: string,
+  fontFamily?: string,
+
+
+  /** Whether the text is italicized */
+  italic?: boolean;
+
+  /** Text color in the cell (hex code) */
+  color?: string;
+
+  /** Background color of the cell (hex code) */
+  backgroundColor?: string;
+
+  /** Border color of the cell (hex code) */
+  borderColor?: string;
+
+  /** Border styles for each side of the cell */
+  border?: {
+    /** Border style for the top side of the cell */
+    top: string;
+
+    /** Border style for the bottom side of the cell */
+    bottom: string;
+
+    /** Border style for the left side of the cell */
+    left: string;
+
+    /** Border style for the right side of the cell */
+    right: string;
+  };
+
+  /** Text alignment and wrapping properties */
+  alignment?: {
+    /** Horizontal text alignment ('left', 'center', or 'right') */
+    horizontal: string;
+
+    /** Vertical text alignment ('top', 'middle', or 'bottom') */
+    vertical: string;
+
+    /** Whether the text is wrapped within the cell */
+    wrapText: boolean;
+  };
+}
+
+/** A generic type to represent a 2D matrix of any type (or undefined values) */
+type Matrix<T> = (T | undefined)[][];
+
+interface ContextAction {
+  /** Name of the right-click option */
+  name: string;
+
+  /** Display title of the right-click menu option */
+  title: React.ReactNode;
+
+  /** The action that occurs when the right-click menu option is selected */
+  action: () => void;
+}
+
+interface ContextOption {
+  /** Type of the context option ('cell', 'row', 'column') */
+  name: string;
+
+  /** Array of context menu actions for right-click options */
+  value: ContextAction[];
+}
+
+interface ContextMenuState {
+  /** Whether the context menu is visible */
+  visible: boolean;
+
+  /** X-coordinate position for the context menu */
+  x: number;
+
+  /** Y-coordinate position for the context menu */
+  y: number;
+
+  /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
+  type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
+}
+
+interface SelectedCell {
+  /** The row index of the selected cell */
+  row: number;
+
+  /** The column index of the selected cell */
+  column: number;
+}
+
+interface ColorContainer {
+  /** The color used for the text (hex code) */
+  color: string;
+
+  /** The background color used for the cell (hex code) */
+  backgroundColor: string;
+
+  /** The border color used for the cell (hex code) */
+  borderColor: string;
+}
+
+interface SelectedValue {
+  /** The value inside the selected cell */
+  value: string;
+
+  /** The row index of the selected cell */
+  row: number;
+
+  /** The column index of the selected cell */
+  column: number;
+
+  /** The column represented as an alphabetical string ('A', 'B') */
+  alphaCol: string;
+
+  /** The style applied to the selected cell */
+  style: CellStyle;
+
+  /** The sheet name where the cell is located */
+  sheet: string;
+}
+interface ExcelToolBarProps {
+  /** use this to hide/show/disable the toolbar */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** function to apply styles */
+  applyStyle: (styleType: string, value: any) => void;
+
+  /** function to trigger format painter */
+  formatePaint: () => void;
+}
+
+interface ExcelSheetBarProps {
+  /** Object containing details about the file, including sheet names */
+  fileDetails: {
+    sheetNames: string[];
+  };
+
+  /** Function to handle sheet change events */
+  handleSheetChange: (name: string, index: number) => void;
+
+  /** Function to open the context menu on a sheet */
+  contextMenu: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    name: string,
+    index: number
+  ) => void;
+
+  /** Function to add a new sheet */
+  addSheet: () => void;
+
+  /** Object representing the currently selected sheet */
+  selectedSheet: {
+    name: string;
+    index: number;
+  };
+  /** Function to update the context Type */
+  contextSelect: (event: React.MouseEvent) => void;
+}
+
+interface ContextMenuProps {
+  /** Custom context menu options */
+  customContext: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Object that holds different context actions based on the type (cell, row, column, sheet_options) */
+  contextAction: {
+    /** Function to add a row */
+    addRow: () => void;
+
+    /** Function to delete a row */
+    deleteRow: () => void;
+
+    /** Function to add a column */
+    addColumn: () => void;
+
+    /** Function to delete a column */
+    deleteColumn: () => void;
+
+    /** Function to add a new sheet */
+    addSheet: () => void;
+
+    /** Function to delete a sheet */
+    deleteSheet: () => void;
+  };
+
+  /** The state of the context menu, controlling its visibility and position */
+  contextData: ContextMenuState;
+
+  /** Function to update the context menu state */
+  setContextData: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+}

package/src/components/ExcelFile/index.ts

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