pixel-react-excel-sheet 1.0.1 → 1.1.9

package/src/components/ExcelFile/ExcelFile/Excel/RowIndicator.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Actions from "./actions";
-import * as Types from "./types";
-import useDispatch from "./use-dispatch";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Actions from './actions';
+import * as Types from './types';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
 
 const RowIndicator: Types.RowIndicatorComponent = ({
   row,
@@ -12,7 +12,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   onSelect,
 }) => {
   const [height, setHeight] = React.useState(0);
-  
+
   // Function to handle the start of the resize (mouse down)
   const onMouseDown = (e: React.MouseEvent) => {
     const startY = e.clientY;
@@ -22,25 +22,32 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       const newHeight = height + (moveEvent.clientY - startY);
       setHeight(newHeight);
       // Fetch the floating rectangle element from the DOM
-      // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
-      // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
+      const selectedAllRow = document.querySelector(
+        '.Spreadsheet__floating-rect--selected'
+      );
+      const selectedSingleRow = document.querySelector(
+        '.Spreadsheet__active-cell'
+      );
 
-      // // If the element exists, update its height
-      // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
-      //   selectedAllRow.style.height = `${newHeight}px`; // Set the height
-      //   selectedSingleRow.style.height = `${newHeight}px`; // Set the height
-      // }
+      // If the element exists, update its height
+      if (
+        selectedAllRow instanceof HTMLElement &&
+        selectedSingleRow instanceof HTMLElement
+      ) {
+        selectedAllRow.style.height = `${newHeight}px`;
+        selectedSingleRow.style.height = `${newHeight}px`;
+      }
     };
 
     // Function to stop the resizing (mouse up)
     const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
     };
 
     // Add event listeners for mouse move and mouse up
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
   };
 
   const handleClick = React.useCallback(
@@ -52,9 +59,9 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
   return (
     <th
-    style={{ height: `${height}px`,minWidth:'60px', position: "relative" }}
-      className={classNames("Spreadsheet__header", {
-        "Spreadsheet__header--selected": selected,
+      style={{ height: `${height}px`, minWidth: '60px', position: 'relative' }}
+      className={classNames('Spreadsheet__header', {
+        'Spreadsheet__header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}
@@ -63,13 +70,13 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       <div
         onMouseDown={onMouseDown}
         style={{
-          zIndex: "inherit",
-          height: "2px",
-          position: "absolute",
+          zIndex: 'inherit',
+          height: '2px',
+          position: 'absolute',
           right: 0,
           bottom: 0,
-          width: "100%",
-          cursor: "ns-resize",
+          width: '100%',
+          cursor: 'ns-resize',
         }}
       />
     </th>
@@ -80,7 +87,7 @@ export default RowIndicator;
 
 export const enhance = (
   RowIndicatorComponent: Types.RowIndicatorComponent
-): React.FC<Omit<Types.RowIndicatorProps, "selected" | "onSelect">> => {
+): React.FC<Omit<Types.RowIndicatorProps, 'selected' | 'onSelect'>> => {
   return function RowIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selected = useSelector((state) =>

package/src/components/ExcelFile/ExcelFile/Excel/Selected.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { getSelectedDimensions } from "./util";
-import FloatingRect from "./FloatingRect";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import { getSelectedDimensions } from './util';
+import FloatingRect from './FloatingRect';
+import useSelector from './use-selector';
 
 const Selected: React.FC = () => {
-  const selected = useSelector((state) => state.selected);  
+  const selected = useSelector((state) => state.selected);
   const dimensions = useSelector(
     (state) =>
       selected &&

package/src/components/ExcelFile/ExcelFile/Excel/Spreadsheet.scss

@@ -1,138 +1,130 @@
 @use '../../../../assets/Themes/BaseTheme.scss';
 
 .Spreadsheet {
-    --background-color: var(--drawer-footer-bg);
-    --text-color: var(--text-color);
-    --readonly-text-color: var(--toggle-strip-active);
-    --outline-color:var(--toggle-strip-active);
-    --outline-background-color: var(--overlay-bg);
-    --border-color: var(--toggle-strip-color);;
-    --header-background-color: var(--pop-up-background-blur);
-    --elevation: var(--brand-color);
-  
-    position: relative;
-    overflow: visible;
-    background: var(--background-color);
-    color: var(--text-color);
-    display: inline-block;
-  }
-  
-  .Spreadsheet__active-cell {
-    position: absolute;
-    border: 2px solid var(--outline-color);
-    box-sizing: border-box;
-  }
-  
-  .Spreadsheet__active-cell--edit {
-    background: var(--background-color);
-    box-shadow: var(--elevation);
-  }
-  
-  .Spreadsheet__table {
-    border-collapse: collapse;
-    table-layout: fixed;
-  }
-  
-  .Spreadsheet__cell,
-  .Spreadsheet__active-cell {
-    cursor: cell;
-  }
-  
-  .Spreadsheet__cell {
-    outline: none;
-    position: relative;
-  
-  }
-  
-  .Spreadsheet__active-cell .Selection_dot{
-    background-color:var(--elevation);
-    height:7px;
-    width:7px;
-    border-radius:50%;
-    position:absolute;
-    right:-3px;
-    z-index: 10;
-    bottom:-3px;
-    cursor: crosshair;
-  }
-  
-  .Spreadsheet__cell--readonly {
-    color: var(--readonly-text-color);
-  } 
-  
-  .Spreadsheet__cell,
-  .Spreadsheet__header {
-    border: 0.1px solid var(--border-color);
-    overflow: hidden;
-    word-break: keep-all;
-    white-space: nowrap;
-    text-align: left;
-    box-sizing: border-box;
-    user-select: none;
-    
-  }
-  
-  .Spreadsheet__header {
-    background: var(--header-background-color);
-    color: var(--readonly-text-color);
-    text-align: center;
-  }
-  
-  .Spreadsheet__header--selected {
-    background: var(--brand-color);
-    color: var(--tooltip-text-color);
-  }
-  
-  .Spreadsheet__header,
-  .Spreadsheet__data-viewer,
-  .Spreadsheet__data-editor input {
-    padding: 4px;
-    box-sizing: border-box;
-  }
-  
-  .Spreadsheet__data-viewer--preserve-breaks {
-    white-space: pre-wrap;
-  }
-  
-  .Spreadsheet__data-editor,
-  .Spreadsheet__data-editor input {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .Spreadsheet__data-editor input {
-    font: inherit;
-    color: inherit;
-    background: none;
-    border: none;
-    outline: none;
-    margin: 0;
-  }
-  
-  .Spreadsheet__data-viewer--boolean {
-    text-align: center;
-  }
-  
-  .Spreadsheet__floating-rect {
-    position: absolute;
-    pointer-events: none;
-    box-sizing: border-box;
-  }
-  
-  .Spreadsheet__floating-rect--hidden {
-    display: none;
-  }
-  
-  .Spreadsheet__floating-rect--selected {
-    background: var(--outline-background-color);
-    border: 2px var(--outline-color) solid;
-  }
-  
-  .Spreadsheet__floating-rect--dragging {
-    border: none;
-  }
-  
-  .Spreadsheet__floating-rect--copied {
-    border: 2px var(--outline-color) dashed;
-  }
-  
+  --background-color: var(--drawer-footer-bg);
+  --text-color: var(--text-color);
+  --readonly-text-color: var(--toggle-strip-active);
+  --outline-color: var(--toggle-strip-active);
+  --outline-background-color: var(--overlay-bg);
+  --border-color: var(--toggle-strip-color);
+  --header-background-color: var(--pop-up-background-blur);
+  --elevation: var(--brand-color);
+
+  position: relative;
+  overflow: visible;
+  background: var(--background-color);
+  color: var(--text-color);
+  display: inline-block;
+}
+
+.Spreadsheet__active-cell {
+  position: absolute;
+  border: 2px solid var(--outline-color);
+  box-sizing: border-box;
+}
+
+.Spreadsheet__active-cell--edit {
+  background: var(--background-color);
+  box-shadow: var(--elevation);
+}
+
+.Spreadsheet__table {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.Spreadsheet__cell {
+  outline: none;
+  position: relative;
+}
+
+.Spreadsheet__active-cell .Selection_dot {
+  background-color: var(--elevation);
+  height: 7px;
+  width: 7px;
+  border-radius: 50%;
+  position: absolute;
+  right: -3px;
+  z-index: 10;
+  bottom: -3px;
+  cursor: crosshair;
+}
+
+.Spreadsheet__cell--readonly {
+  color: var(--readonly-text-color);
+}
+
+.Spreadsheet__cell,
+.Spreadsheet__header {
+  border: 0.1px solid var(--border-color);
+  overflow: hidden;
+  word-break: keep-all;
+  white-space: nowrap;
+  text-align: left;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.Spreadsheet__header {
+  background: var(--header-background-color);
+  color: var(--readonly-text-color);
+  text-align: center;
+}
+
+.Spreadsheet__header--selected {
+  background: var(--brand-color);
+  color: var(--tooltip-text-color);
+}
+
+.Spreadsheet__header,
+.Spreadsheet__data-viewer,
+.Spreadsheet__data-editor input {
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.Spreadsheet__data-viewer--preserve-breaks {
+  white-space: pre-wrap;
+}
+
+.Spreadsheet__data-editor,
+.Spreadsheet__data-editor input {
+  width: 100%;
+  height: 100%;
+}
+
+.Spreadsheet__data-editor input {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  margin: 0;
+}
+
+.Spreadsheet__data-viewer--boolean {
+  text-align: center;
+}
+
+.Spreadsheet__floating-rect {
+  position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.Spreadsheet__floating-rect--hidden {
+  display: none;
+}
+
+.Spreadsheet__floating-rect--selected {
+  background: var(--outline-background-color);
+  border: 2px var(--outline-color) solid;
+}
+
+.Spreadsheet__floating-rect--dragging {
+  border: none;
+}
+
+.Spreadsheet__floating-rect--copied {
+  border: 2px var(--outline-color) dashed;
+}

package/src/components/ExcelFile/ExcelFile/Excel/Spreadsheet.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Types from "./types";
-import * as Actions from "./actions";
-import * as Matrix from "./matrix";
-import * as Point from "./point";
-import { Selection } from "./selection";
-import reducer, { INITIAL_STATE, hasKeyDownHandler } from "./reducer";
-import context from "./context";
-import { Model, createFormulaParser } from "./engine";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Types from './types';
+import * as Actions from './actions';
+import * as Matrix from './matrix';
+import * as Point from './point';
+import { Selection } from './selection';
+import reducer, { INITIAL_STATE, hasKeyDownHandler } from './reducer';
+import context from './context';
+import { Model, createFormulaParser } from './engine';
 import {
   range,
   readTextFromClipboard,
@@ -16,27 +16,28 @@ import {
   getCSV,
   shouldHandleClipboardEvent,
   isFocusedWithin,
-} from "./util";
+} from './util';
 
-import DefaultTable from "./Table";
-import DefaultRow from "./Row";
-import DefaultHeaderRow from "./HeaderRow";
+import DefaultTable from './Table';
+import DefaultRow from './Row';
+import DefaultHeaderRow from './HeaderRow';
 import DefaultCornerIndicator, {
   enhance as enhanceCornerIndicator,
-} from "./CornerIndicator";
+} from './CornerIndicator';
 import DefaultColumnIndicator, {
   enhance as enhanceColumnIndicator,
-} from "./ColumnIndicator";
+} from './ColumnIndicator';
 import DefaultRowIndicator, {
   enhance as enhanceRowIndicator,
-} from "./RowIndicator";
-import { Cell as DefaultCell, enhance as enhanceCell } from "./Cell";
-import DefaultDataViewer from "./DataViewer";
-import DefaultDataEditor from "./DataEditor";
-import ActiveCell from "./ActiveCell";
-import Selected from "./Selected";
-import Copied from "./Copied";
-import "./Spreadsheet.scss";
+} from './RowIndicator';
+import { Cell as DefaultCell, enhance as enhanceCell } from './Cell';
+import DefaultDataViewer from './DataViewer';
+import DefaultDataEditor from './DataEditor';
+import ActiveCell from './ActiveCell';
+import Selected from './Selected';
+import Copied from './Copied';
+import './Spreadsheet.scss';
+import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
 
 /** The Spreadsheet component props */
 export type Props<CellType extends Types.CellBase> = {
@@ -183,8 +184,13 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const setData = useAction(Actions.setData);
   const setCreateFormulaParser = useAction(Actions.setCreateFormulaParser);
   const setSelection = useAction(Actions.setSelection);
+  const onBold = useAction(Actions.bold);
+  const onItalic = useAction(Actions.italic);
+  const onUnderline = useAction(Actions.underline);
+  const setColor = useAction(Actions.color);
+  const setBackgroundColor = useAction(Actions.backgroundStyle);
+  const setFormatePainter = useAction(Actions.formatePainter);
 
-  // Track active
   const prevActiveRef = React.useRef<Point.Point | null>(state.active);
   React.useEffect(() => {
     if (state.active !== prevActiveRef.current) {
@@ -212,7 +218,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevEvaluatedDataRef.current = state.model.evaluatedData;
   }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
 
-  // Listen to selection changes
   const prevSelectedRef = React.useRef<Selection>(state.selected);
   React.useEffect(() => {
     if (!state.selected.equals(prevSelectedRef.current)) {
@@ -241,7 +246,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   }, [props.selected, setSelection]);
 
   // Update data when props.data changes
-  const prevDataPropRef = React.useRef<Matrix.Matrix<CellType> | undefined>(
+  let prevDataPropRef = React.useRef<Matrix.Matrix<CellType> | undefined>(
     props.data
   );
   React.useEffect(() => {
@@ -336,14 +341,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
 
   const handleMouseUp = React.useCallback(() => {
     onDragEnd();
-    document.removeEventListener("mouseup", handleMouseUp);
+    document.removeEventListener('mouseup', handleMouseUp);
   }, [onDragEnd]);
 
   const handleMouseMove = React.useCallback(
     (event: React.MouseEvent) => {
       if (!state.dragging && event.buttons === 1) {
         onDragStart();
-        document.addEventListener("mouseup", handleMouseUp);
+        document.addEventListener('mouseup', handleMouseUp);
       }
     },
     [state, onDragStart, handleMouseUp]
@@ -372,14 +377,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   );
 
   React.useEffect(() => {
-    document.addEventListener("cut", handleCut);
-    document.addEventListener("copy", handleCopy);
-    document.addEventListener("paste", handlePaste);
+    document.addEventListener('cut', handleCut);
+    document.addEventListener('copy', handleCopy);
+    document.addEventListener('paste', handlePaste);
 
     return () => {
-      document.removeEventListener("cut", handleCut);
-      document.removeEventListener("copy", handleCopy);
-      document.removeEventListener("paste", handlePaste);
+      document.removeEventListener('cut', handleCut);
+      document.removeEventListener('copy', handleCopy);
+      document.removeEventListener('paste', handlePaste);
     };
   }, [handleCut, handleCopy, handlePaste]);
 
@@ -388,35 +393,33 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       <Table columns={size.columns}>
         <HeaderRow>
           {<CornerIndicator />}
-          {
-            range(size.columns).map((columnNumber) =>
-              columnLabels ? (
-                <ColumnIndicator
-                  key={columnNumber}
-                  column={columnNumber}
-                  label={
-                    columnNumber in columnLabels
-                      ? columnLabels[columnNumber]
-                      : null
-                  }
-                />
-              ) : (
-                <ColumnIndicator key={columnNumber} column={columnNumber} />
-              )
-            )}
+          {range(size.columns).map((columnNumber) =>
+            columnLabels ? (
+              <ColumnIndicator
+                key={columnNumber}
+                column={columnNumber}
+                label={
+                  columnNumber in columnLabels
+                    ? columnLabels[columnNumber]
+                    : null
+                }
+              />
+            ) : (
+              <ColumnIndicator key={columnNumber} column={columnNumber} />
+            )
+          )}
         </HeaderRow>
         {range(size.rows).map((rowNumber) => (
           <Row key={rowNumber} row={rowNumber}>
-            {
-              (rowLabels ? (
-                <RowIndicator
-                  key={rowNumber}
-                  row={rowNumber}
-                  label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
-                />
-              ) : (
-                <RowIndicator key={rowNumber} row={rowNumber} />
-              ))}
+            {rowLabels ? (
+              <RowIndicator
+                key={rowNumber}
+                row={rowNumber}
+                label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
+              />
+            ) : (
+              <RowIndicator key={rowNumber} row={rowNumber} />
+            )}
             {range(size.columns).map((columnNumber) => (
               <Cell
                 key={columnNumber}
@@ -458,18 +461,29 @@ const Spreadsheet = <CellType extends Types.CellBase>(
 
   const rootNode = React.useMemo(
     () => (
-      <div
-        ref={rootRef}
-        className={classNames("Spreadsheet", className)}
-        onKeyPress={onKeyPress}
-        onKeyDown={handleKeyDown}
-        onMouseMove={handleMouseMove}
-      >
-        {tableNode}
-        {activeCellNode}
-        <Selected />
-        <Copied />
-      </div>
+      <>
+        <ExcelToolBar
+          data={props.data}
+          onBold={onBold}
+          onItalic={onItalic}
+          onUnderline={onUnderline}
+          setColor={setColor}
+          setBackgroundColor={setBackgroundColor}
+          setFormatePainter={setFormatePainter}
+        />
+        <div
+          ref={rootRef}
+          className={classNames('Spreadsheet', className)}
+          onKeyPress={onKeyPress}
+          onKeyDown={handleKeyDown}
+          onMouseMove={handleMouseMove}
+        >
+          {tableNode}
+          {activeCellNode}
+          <Selected />
+          <Copied />
+        </div>
+      </>
     ),
     [
       className,

package/src/components/ExcelFile/ExcelFile/Excel/Table.tsx

@@ -1,5 +1,5 @@
-import * as Types from "./types";
-import { range } from "./util";
+import * as Types from './types';
+import { range } from './util';
 
 const Table: Types.TableComponent = ({
   children,