pixel-react 1.10.15 → 1.10.16

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -1,467 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import './ExcelToolBar.scss';
-import MenuOption from '../../MenuOption';
-import Tooltip from '../../Tooltip';
-import Icon from '../../Icon';
-import Select from '../../Select';
-import { CellBase } from '../ExcelFile/ExcelFileComponents';
-import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
-import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
-import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
-import { convertStyleToBackend } from '../dataConversion';
-
-interface ExcelToolBarProps {
-  toolbar?: 'show' | 'disable' | 'hide';
-  onBold: (data: Matrix.Matrix<CellBase>) => void;
-  onItalic: (data: Matrix.Matrix<CellBase>) => void;
-  setUnderlineType: (
-    data: Matrix.Matrix<CellBase>,
-    value: string,
-    active: boolean
-  ) => void;
-  setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
-  setTextAlign: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setFontSize: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setFontFamily: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setBorderType: (
-    data: Matrix.Matrix<CellBase>,
-    value: string,
-    color: string
-  ) => void;
-}
-
-const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
-  toolbar = 'show',
-  onBold,
-  onItalic,
-  setUnderlineType,
-  setColor,
-  setFontSize,
-  setFontFamily,
-  setTextAlign,
-  setBackgroundColor,
-  setBorderType,
-  setFormatePainter,
-}) => {
-  const cell = useSelector((state) =>
-    state.active ? Matrix.get(state.active, state.model.data) : null
-  );
-  const data = useSelector((state) => state.model.data);
-  const formattedStyle = useSelector((state) => state.formattedStyle.open);
-
-  // Default style to Excel
-  const basicStyle: React.CSSProperties = {
-    color: '#e42525', // Needed hexacode for backend
-    backgroundColor: '#e42525', // Needed hexacode for backend
-    borderColor: '#c9c9c9', // Needed hexacode for backend
-    textDecoration: 'none solid',
-    borderRight: `1px solid var(--excel-header-border)`,
-    borderLeft: `1px solid var(--excel-header-border)`,
-    borderTop: `1px solid var(--excel-header-border)`,
-    borderBottom: `1px solid var(--excel-header-border)`,
-    fontSize: '15px',
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    fontFamily: 'Times New Roman',
-    textAlign: 'left',
-  };
-
-  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
-  const underLineMenuRef = useRef<HTMLSpanElement>(null);
-  const borderMenuRef = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    setCellStyle(cell?.style || basicStyle);
-  }, [cell]);
-
-  useEffect(() => {
-    if (
-      cell?.style &&
-      JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
-    ) {
-      setCellStyle(cell.style);
-    }
-  }, [cell]);
-
-  const styleBackend = convertStyleToBackend(cellStyle);
-  const [border, setBorder] = useState<string>('border-none');
-  const [underLine, setUnderLine] = useState<string>('underline');
-  const [selectedFontFamily, setSelectedFontFamily] = useState<{
-    label: string;
-    value: string;
-  }>({
-    label: 'Times New Roman',
-    value: 'Times New Roman',
-  });
-  const [selectedFontSize, setSelectedFontSize] = useState<{
-    label: string;
-    value: string;
-  }>({
-    label: '11',
-    value: '11',
-  });
-  const [colorContainer, setColorPicker] = useState<ColorContainer>({
-    color: '#e42525', // Needed hexacode for backend
-    backgroundColor: '#e42525', // Needed hexacode for backend
-    borderColor: '#c9c9c9', // Needed hexacode for backend
-  });
-
-  const borderTypeIcon = [
-    { 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 underlineTypeIcon = [
-    { value: 'underline', label: 'Underline', icon: 'underline' },
-    {
-      value: 'double_border',
-      label: 'Double Underline',
-      icon: 'double_underline',
-    },
-  ];
-
-  const fontFamily = [
-    {
-      label: 'Times New Roman',
-      value: '"Times New Roman"',
-    },
-    {
-      label: 'Arial',
-      value: 'Arial',
-    },
-    {
-      label: 'fantasy',
-      value: 'fantasy',
-    },
-    {
-      label: 'cursive',
-      value: 'cursive',
-    },
-    {
-      label: 'Poppins',
-      value: 'Poppins',
-    },
-    {
-      label: 'Courier New',
-      value: '"Courier New"',
-    },
-    {
-      label: 'Verdana',
-      value: 'Verdana',
-    },
-    {
-      label: 'Tahoma',
-      value: 'Tahoma',
-    },
-    {
-      label: 'Trebuchet MS',
-      value: '"Trebuchet MS"',
-    },
-    {
-      label: 'Comic Sans MS',
-      value: '"Comic Sans MS"',
-    },
-    {
-      label: 'Impact',
-      value: 'Impact',
-    },
-    {
-      label: 'Arial Black',
-      value: '"Arial Black"',
-    },
-    {
-      label: 'Lucida Console',
-      value: '"Lucida Console"',
-    },
-    {
-      label: 'Lucida Sans Unicode',
-      value: '"Lucida Sans Unicode"',
-    },
-    {
-      label: 'Courier',
-      value: 'Courier',
-    },
-    {
-      label: 'Arial Rounded MT Bold',
-      value: '"Arial Rounded MT Bold"',
-    },
-    {
-      label: 'Georgia',
-      value: 'Georgia',
-    },
-    {
-      label: 'sans-serif',
-      value: 'sans-serif',
-    },
-    {
-      label: 'serif',
-      value: 'serif',
-    },
-    {
-      label: 'monospace',
-      value: 'monospace',
-    },
-  ];
-
-  const fontSizeList = [
-    5, 6, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 48, 56, 72,
-  ];
-
-  const fontSize = fontSizeList.map((fontSize) => ({
-    label: fontSize,
-    value: fontSize,
-  }));
-
-  const getTextColor = (color: string) => {
-    setColorPicker((prev) => ({ ...prev, color: color }));
-  };
-
-  const getBackgroundColor = (color: string) => {
-    setColorPicker((prev) => ({ ...prev, backgroundColor: color }));
-  };
-
-  useEffect(() => {
-    let timeGap = setTimeout(() => {
-      setColor(data, colorContainer.color);
-    }, 0);
-    return () => {
-      clearTimeout(timeGap);
-    };
-  }, [colorContainer.color]);
-
-  useEffect(() => {
-    let timeGap = setTimeout(() => {
-      setBackgroundColor(data, colorContainer.backgroundColor);
-    }, 0);
-    return () => {
-      clearTimeout(timeGap);
-    };
-  }, [colorContainer.backgroundColor]);
-
-  let getUnderlineIcon = () => {
-    const selectedIcon = underlineTypeIcon.find((e) => e.value === underLine);
-    return selectedIcon ? selectedIcon.icon : '';
-  };
-
-  let getBorderIcon = () => {
-    const selectedIcon = borderTypeIcon.find((e) => e.value === border);
-    return selectedIcon ? selectedIcon.icon : '';
-  };
-
-  return (
-    <div className="ff-excel-toolbar">
-      <div className="ff-excel-toolbar-font ">
-        <Tooltip placement="top" title={'Font Family'}>
-          <div className="ff-excel-toolbar-font-family">
-            <Select
-              showLabel={false}
-              optionZIndex={1000}
-              onChange={(e) => {
-                setSelectedFontFamily({ label: e.label, value: e.label });
-                setFontFamily(data, e.value);
-              }}
-              required={false}
-              optionsList={fontFamily}
-              selectedOption={selectedFontFamily}
-            />
-          </div>
-        </Tooltip>
-        <Tooltip placement="top" title={'Font Size'}>
-          <div className="ff-excel-toolbar-font-size">
-            <Select
-              showLabel={false}
-              optionZIndex={1000}
-              required={false}
-              onChange={(e) => {
-                setSelectedFontSize({ label: e.label, value: e.value });
-                setFontSize(data, e.value);
-              }}
-              optionsList={fontSize}
-              selectedOption={selectedFontSize}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-icon">
-        <Tooltip placement="top" title={'Text Left'}>
-          <Icon
-            variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
-            hoverEffect={cellStyle.textAlign === 'left' ? false : true}
-            disabled={toolbar === 'disable'}
-            onClick={() => setTextAlign(data, 'left')}
-            name="text_align_left"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Text Center'}>
-          <Icon
-            variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
-            hoverEffect={cellStyle.textAlign === 'center' ? false : true}
-            disabled={toolbar === 'disable'}
-            onClick={() => setTextAlign(data, 'center')}
-            name="text_align_center"
-          />
-        </Tooltip>
-
-        <Tooltip placement="top" title={'Text Right'}>
-          <Icon
-            variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
-            hoverEffect={cellStyle.textAlign === 'right' ? false : true}
-            disabled={toolbar === 'disable'}
-            onClick={() => setTextAlign(data, 'right')}
-            name="text_align_right"
-          />
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-text">
-        <Tooltip placement="top" title={'Bold'}>
-          <Icon
-            variant={styleBackend.bold ? 'dark' : 'light'}
-            hoverEffect={styleBackend.bold ? false : true}
-            disabled={toolbar === 'disable'}
-            onClick={() => onBold(data)}
-            name="bold"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Italic'}>
-          <Icon
-            variant={styleBackend.italic ? 'dark' : 'light'}
-            hoverEffect={styleBackend.italic ? false : true}
-            disabled={toolbar === 'disable'}
-            onClick={() => onItalic(data)}
-            name="italic"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Underline Type'}>
-          <div className="ff-excel-toolbar-icon-underline">
-            <Icon
-              variant={
-                cellStyle.textDecoration === underLine ? 'dark' : 'light'
-              }
-              hoverEffect={
-                cellStyle.textDecoration === underLine ? false : true
-              }
-              disabled={toolbar === 'disable'}
-              onClick={() => setUnderlineType(data, underLine, true)}
-              name={getUnderlineIcon()}
-            />
-            <span ref={underLineMenuRef}>
-              <MenuOption
-                targetRef={underLineMenuRef}
-                iconName="arrow_down"
-                zIndex={1000}
-                iconSize={12}
-                options={underlineTypeIcon}
-                tooltipPlacement="top"
-                onOptionClick={(e) => {
-                  let selectedValue = e.value as string;
-                  setUnderlineType(data, selectedValue, true);
-                  setUnderLine(selectedValue);
-                }}
-              />
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-icon">
-        <Tooltip placement="top" title={'Format Painter'}>
-          <Icon
-            variant={formattedStyle ? 'dark' : 'light'}
-            hoverEffect={formattedStyle ? false : true}
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setFormatePainter(data);
-            }}
-            name="formate_painter"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Text Color'}>
-          <div className="ff-excel-toolbar-icon-color">
-            <Icon
-              hoverEffect
-              width={12}
-              height={12}
-              disabled={toolbar === 'disable'}
-              onClick={() => {
-                setColor(data, colorContainer.color);
-              }}
-              name="text_color"
-            />
-            <ColorBarSelector
-              disabled={toolbar === 'disable'}
-              getColorValue={getTextColor}
-            />
-          </div>
-        </Tooltip>
-        <Tooltip placement="top" title={'Background Color'}>
-          <div className="ff-excel-toolbar-icon-color">
-            <Icon
-              hoverEffect
-              width={12}
-              height={12}
-              disabled={toolbar === 'disable'}
-              onClick={() =>
-                setBackgroundColor(data, colorContainer.backgroundColor)
-              }
-              name="fill_color"
-            />
-            <ColorBarSelector
-              disabled={toolbar === 'disable'}
-              getColorValue={getBackgroundColor}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-menu">
-        <Tooltip placement="top" title={'Border Type'}>
-          <div className="ff-excel-toolbar-menu-option">
-            <Icon
-              hoverEffect
-              disabled={toolbar === 'disable'}
-              onClick={() => setBorderType(data, border, 'black')}
-              name={getBorderIcon()}
-            />
-            <span ref={borderMenuRef}>
-              <MenuOption
-                iconName="arrow_down"
-                targetRef={borderMenuRef}
-                iconSize={12}
-                zIndex={1000}
-                options={borderTypeIcon}
-                tooltipPlacement="top"
-                onOptionClick={(e) => {
-                  let selectedValue = e.value as string;
-                  setBorderType(data, selectedValue, 'black');
-                  setBorder(selectedValue);
-                }}
-              />
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-
-      {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
-      {/* <div className="ff-excel-toolbar-menu"> 
-        <Tooltip placement="top" title={'Formula'}>
-          <Icon
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => setBorderType(data, border, 'black')}
-            name="formula_icon"
-          />
-        </Tooltip>
-      </div>  TODO */}
-    </div>
-  );
-};
-
-export default ExcelToolBar;

package/src/components/Excel/Types.ts

@@ -1,199 +0,0 @@
-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 */
-  styles: BackendStyle; //TODO remove 's' for Style
-  type?: boolean;
-  isDisable?: boolean;
-}
-
-type BackendStyle = {
-  name: string;
-  size: number;
-  bold: boolean;
-  italic: boolean;
-  color: string;
-  backgroundColor: string;
-  borderColor: string;
-  underline: string;
-  border: {
-    top: string;
-    bottom: string;
-    left: string;
-    right: string;
-  };
-  alignment: {
-    horizontal: string;
-    vertical: string;
-    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 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 ContextMenuState {
-  open: boolean;
-  position: {
-    x: number;
-    y: number;
-  };
-  options: optionsType[];
-}
-
-interface optionsType {
-  label: string;
-  value: string;
-  iconName: string;
-  action: () => void;
-}
-
-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: React.CSSProperties;
-
-  /** The sheet name where the cell is located */
-  sheet: string;
-}
-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>>;
-}