pixel-react 1.2.1 → 1.2.3

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.css → Spreadsheet.scss}

@@ -1,12 +1,12 @@
 .Spreadsheet {
-  --background-color: white;
-  --text-color: black;
-  --readonly-text-color: rgba(0, 0, 0, 0.4);
-  --outline-color: #4285f4;
-  --outline-background-color: rgba(160, 195, 255, 0.2);
-  --border-color: hsl(2deg, 0%, 91%);
-  --header-background-color: rgba(0, 0, 0, 0.04);
-  --elevation: 0 2px 5px rgba(0, 0, 0, 0.4);
+  --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;
@@ -15,14 +15,6 @@
   display: inline-block;
 }
 
-.Spreadsheet--dark-mode {
-  --background-color: black;
-  --text-color: white;
-  --readonly-text-color: rgba(255, 255, 255, 0.4);
-  --header-background-color: rgba(255, 255, 255, 0.04);
-  --border-color: hsl(2deg, 0%, 19%);
-}
-
 .Spreadsheet__active-cell {
   position: absolute;
   border: 2px solid var(--outline-color);
@@ -39,32 +31,26 @@
   table-layout: fixed;
 }
 
-.Spreadsheet__cell,
-.Spreadsheet__active-cell {
-  cursor: cell;
-}
-
 .Spreadsheet__cell {
   outline: none;
   position: relative;
-
 }
 
-/* .Spreadsheet__active-cell .Selection_dot{
-  background-color:red;
-  height:7px;
-  width:7px;
-  border-radius:50%;
-  position:absolute;
-  right:-3px;
+.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;
+  bottom: -3px;
   cursor: crosshair;
-} */
+}
 
-/* .Spreadsheet__cell--readonly {
+.Spreadsheet__cell--readonly {
   color: var(--readonly-text-color);
-} */
+}
 
 .Spreadsheet__cell,
 .Spreadsheet__header {
@@ -75,19 +61,17 @@
   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;
-  font: inherit;
 }
 
 .Spreadsheet__header--selected {
-  background: #5f6268;
-  color: #fff;
+  background: var(--brand-color);
+  color: var(--tooltip-text-color);
 }
 
 .Spreadsheet__header,

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.css";
+} 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> = {
@@ -48,7 +49,6 @@ export type Props<CellType extends Types.CellBase> = {
    * Use dark colors that complement dark mode
    * @defaultValue `false`
    */
-  darkMode?: boolean;
   /**
    * Function used to create the formula parser (instance of
    * "fast-formula-parser") used by the Spreadsheet by getting the spreadsheet's
@@ -119,7 +119,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
 ): React.ReactElement => {
   const {
     className,
-    darkMode,
     columnLabels,
     rowLabels,
     // hideColumnIndicators,
@@ -185,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) {
@@ -214,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)) {
@@ -243,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(() => {
@@ -338,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]
@@ -374,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]);
 
@@ -390,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}
@@ -460,24 +461,32 @@ const Spreadsheet = <CellType extends Types.CellBase>(
 
   const rootNode = React.useMemo(
     () => (
-      <div
-        ref={rootRef}
-        className={classNames("Spreadsheet", className, {
-          "Spreadsheet--dark-mode": darkMode,
-        })}
-        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,
-      darkMode,
       onKeyPress,
       handleKeyDown,
       handleMouseMove,

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,