pixel-react 1.2.6 → 1.2.8

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

@@ -1,24 +0,0 @@
-.excel-page {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .excel-book {
-    position: relative;
-    width: 100%;
-    .excel-sheet {
-      overflow: scroll;
-      &::-webkit-scrollbar {
-        height: 8px;
-      }
-    }
-  }
-}
-.menu-list {
-  display: flex;
-  align-items: center;
-  .menu-title {
-    padding-left: 5px;
-  }
-}

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

@@ -1,162 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import ExcelSheetBar from '../ExcelSheetBar/ExcelSheetBar';
-import Spreadsheet, { CellBase } from './Excel/index';
-import * as Matrix from './Excel/matrix';
-
-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;
-}
-
-const ExcelFile: React.FC<ExcelFileProps> = ({
-  excelData,
-  onSave = () => {},
-}) => {
-  const [fileDetails, setFileDetails] = useState<{
-    sheetNames: string[];
-  }>({ sheetNames: [] });
-  const EmptyRow: CellBase = {
-    value: '',
-    style: {
-      color: 'var(--text-color)',
-      backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-    },
-  };
-  const [selectedSheet, setSelectedSheet] = useState<{
-    name: string;
-    index: number;
-  }>({ name: 'defaultSheet', index: 0 });
-
-  const [worksheetsData, setWorksheetsData] = useState<{
-    [key: string]: Matrix.Matrix<CellBase>;
-  }>({ defaultSheet: [[EmptyRow]] });
-
-  const [selectedSheetData, setSelectedSheetData] = useState<
-    Matrix.Matrix<CellBase>
-  >([[EmptyRow]]);
-
-  const sheetRef = useRef<HTMLDivElement | null>(null);
-  const excelDataCopy = useRef<{ [key: string]: Matrix.Matrix<CellBase> }>({
-    defaultSheet: [[]],
-  });
-
-  let checkVal = (val: any) => {
-    if (val === undefined || val === null) {
-      return null;
-    }
-    return val;
-  };
-  useEffect(() => {
-    const payload = excelData;
-    const sheetNames = payload.sheets.map((e) => e.sheetName);
-    setFileDetails({ sheetNames });
-    if (sheetNames.length > 0) {
-      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
-    }
-    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-    payload.sheets.forEach((sheet) => {
-      const sheetName = sheet.sheetName;
-      const json = sheet.data;
-      const maxRows = Math.max(26, json.length + 2);
-      const maxCols = Math.max(
-        26,
-        Math.max(...json.map((row) => row.length)) + 2
-      );
-
-      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
-        { length: maxRows },
-        () => Array.from({ length: maxCols }, () => EmptyRow)
-      );
-      json.forEach((row, rowIndex) => {
-        row.forEach((cell, colIndex) => {
-          if (rowIndex < maxRows && colIndex < maxCols) {
-            if (!spreadsheetData[rowIndex]) {
-              spreadsheetData[rowIndex] = [];
-            }
-            spreadsheetData[rowIndex][colIndex] = {
-              value: checkVal(cell.value),
-              style: cell.style,
-              type: true,
-            };
-          }
-        });
-      });
-
-      newWorksheetsData[sheetName] = spreadsheetData;
-    });
-    excelDataCopy.current = newWorksheetsData;
-    setWorksheetsData(newWorksheetsData);
-    const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-      setSelectedSheetData(newWorksheetsData[firstSheetName]);
-    }
-  }, []);
-
-  const handleSaveData = () => {
-    const dataToSave = {
-      sheets: fileDetails.sheetNames.map((sheetName) => ({
-        sheetName: sheetName,
-        data: (worksheetsData[sheetName] ?? []).map((row) =>
-          row.map((cell) => ({
-            value: cell?.value,
-            style: cell?.style,
-          }))
-        ),
-      })),
-    };
-    onSave(dataToSave);
-  };
-
-  let handleSave = (e: KeyboardEvent) => {
-    if (e.ctrlKey && e.key === 's') {
-      e.preventDefault();
-      handleSaveData();
-    }
-  };
-  useEffect(() => {
-    document.addEventListener('keydown', handleSave);
-    return () => {
-      document.removeEventListener('keydown', handleSave);
-    };
-  }, [worksheetsData]);
-
-  const handleSheetChange = (name: string, index: number) => {
-    setSelectedSheet({ index, name });
-  };
-
-  return (
-    <div className="excel-page">
-      {fileDetails.sheetNames.length > 0 && (
-        <div className="excel-book">
-          <div ref={sheetRef} className="excel-sheet">
-            <Spreadsheet data={selectedSheetData} />
-          </div>
-
-          <ExcelSheetBar
-            selectedSheet={selectedSheet}
-            fileDetails={fileDetails}
-            handleSheetChange={handleSheetChange}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ExcelFile;

package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.scss

@@ -1,16 +0,0 @@
-@import '../../../assets/styles/colors';
-@import '../../../assets/styles/fonts';
-
-.sheet-bar {
-  background: $white_1;
-  // display: flex;
-  padding: 4px;
-  height: 40px;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  align-items: center;
-
-  &::-webkit-scrollbar {
-    height: 8px;
-  }
-}

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

@@ -1,68 +0,0 @@
-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[];
-  };
-  handleSheetChange: (name: string, index: number) => void;
-  selectedSheet: { name: string };
-}
-
-const ExcelSheetBar: React.FC<ExcelSheetBarProps> = ({
-  fileDetails,
-  handleSheetChange,
-  selectedSheet,
-}) => {
-  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)}
-      >
-        {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}
-              />
-            </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

@@ -1,19 +0,0 @@
-.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

@@ -1,291 +0,0 @@
-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';
-import { CellBase } from '../ExcelFile/Excel';
-import * as Matrix from '../ExcelFile/Excel/matrix';
-
-interface ExcelToolBarProps {
-  toolbar?: 'show' | 'disable' | 'hide';
-  data: Matrix.Matrix<CellBase>;
-  onBold: (data: Matrix.Matrix<CellBase>) => void;
-  onItalic: (data: Matrix.Matrix<CellBase>) => void;
-  onUnderline: (data: Matrix.Matrix<CellBase>) => void;
-  setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
-}
-
-const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
-  toolbar = 'show',
-  data,
-  onBold,
-  onItalic,
-  onUnderline,
-  setColor,
-  setBackgroundColor,
-  setFormatePainter,
-}) => {
-  const [borderType, setBorderType] = useState<string>('All Border');
-  const [textAlign, setTextAlign] = useState<string>('Text Left');
-  const [colorContainer, setColorPicker] = useState<ColorContainer>({
-    color: 'var(--error-light)',
-    backgroundColor: 'var(--error-light)',
-    borderColor: 'var(--text-color)',
-  });
-  const [formatePainterState, setFormatePainterState] =
-    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: color }));
-  };
-
-  const getBackgroundColor = (color: string) => {
-    setColorPicker((prev) => ({ ...prev, backgroundColor: color }));
-  };
-
-  useEffect(() => {
-    let timeGap = setTimeout(() => {
-      console.log(colorContainer.color);
-      
-      setColor(data, colorContainer.color);
-    }, 0);
-    return () => {
-      clearTimeout(timeGap);
-    };
-  }, [colorContainer.color]);
-
-  useEffect(() => {
-    let timeGap = setTimeout(() => {
-      setBackgroundColor(data, colorContainer.backgroundColor);
-    }, 0);
-    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={() => {
-            onBold(data);
-          }}
-          name="bold"
-        />
-      </Tooltip>
-      <Tooltip placement="top" title={'Italic'}>
-        <Icon
-          disabled={toolbar === 'disable'}
-          onClick={() => {
-            onItalic(data);
-          }}
-          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={formatePainterState ? 'formate-painter-active' : ''}>
-            <Icon
-              disabled={toolbar === 'disable'}
-              onClick={() => {
-                setFormatePainterState((prev) => !prev);
-              }}
-              name="all_borders"
-            />
-          </div>
-        </Tooltip>
-        <MenuOption
-          iconName="more"
-          options={borderTypeIcon()}
-          tooltipTitle="Border Type"
-          tooltipPlacement="top"
-          onOptionClick={() => {
-            setBorderType(borderType);
-          }}
-        />
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <Tooltip placement="top" title={'Formate Painter'}>
-          <div className={formatePainterState ? 'formate-painter-active' : ''}>
-            <Icon
-              disabled={toolbar === 'disable'}
-              onClick={() => {
-                setFormatePainter(data);
-                setFormatePainterState((prev) => !prev);
-              }}
-              name="text_align_left"
-            />
-          </div>
-        </Tooltip>
-        <MenuOption
-          iconName="more"
-          options={TextAlignIcon()}
-          tooltipTitle="Text Align"
-          tooltipPlacement="top"
-          onOptionClick={() => {
-            setTextAlign(textAlign);
-          }}
-        />
-      </div>
-      <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainterState ? 'formate-painter-active' : ''}>
-          <Icon
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setFormatePainterState((prev) => !prev);
-            }}
-            name="formate_painter"
-          />
-        </div>
-      </Tooltip>
-      <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainterState ? 'formate-painter-active' : ''}>
-          <Icon
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setFormatePainterState((prev) => !prev);
-              // formatePaint();
-            }}
-            name="strike_through"
-          />
-        </div>
-      </Tooltip>
-      <Tooltip placement="top" title={'Underline'}>
-        <div>
-          <Icon
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              onUnderline(data);
-            }}
-            name="underline"
-          />
-        </div>
-      </Tooltip>
-      <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainterState ? 'formate-painter-active' : ''}>
-          <Icon
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setFormatePainterState((prev) => !prev);
-            }}
-            name="double_underline"
-          />
-        </div>
-      </Tooltip>
-      <div className="menu-option">
-        <Tooltip placement="top" title={'Text Color'}>
-          <Icon
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setColor(data, 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={() => {
-              setBackgroundColor(data, colorContainer.backgroundColor);
-            }}
-            name="fill_color"
-          />
-        </Tooltip>
-        <ColorBarSelector
-          disabled={toolbar === 'disable'}
-          getColorValue={getBackgroundColor}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ExcelToolBar;