pixel-react 1.2.0 → 1.2.2

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,

package/src/components/ExcelFile/ExcelFile/Excel/actions.ts

@@ -1,40 +1,125 @@
-import { Matrix } from "./matrix";
-import { Point } from "./point";
+import { Matrix } from './matrix';
+import { Point } from './point';
 import {
   CellBase,
   Dimensions,
   CommitChanges,
   CreateFormulaParser,
-} from "./types";
-import { Selection } from "./selection";
-
-export const SET_DATA = "SET_DATA";
-export const SET_CREATE_FORMULA_PARSER = "SET_CREATE_FORMULA_PARSER";
-export const SELECT_ENTIRE_ROW = "SELECT_ENTIRE_ROW";
-export const SELECT_ENTIRE_COLUMN = "SELECT_ENTIRE_COLUMN";
-export const SELECT_ENTIRE_WORKSHEET = "SELECT_ENTIRE_WORKSHEET";
-export const SET_SELECTION = "SET_SELECTION";
-export const SELECT = "SELECT";
-export const ACTIVATE = "ACTIVATE";
-export const SET_CELL_DATA = "SET_CELL_DATA";
-export const SET_CELL_DIMENSIONS = "SET_CELL_DIMENSIONS";
-export const COPY = "COPY";
-export const CUT = "CUT";
-export const PASTE = "PASTE";
-export const EDIT = "EDIT";
-export const VIEW = "VIEW";
-export const CLEAR = "CLEAR";
-export const BLUR = "BLUR";
-export const KEY_PRESS = "KEY_PRESS";
-export const KEY_DOWN = "KEY_DOWN";
-export const DRAG_START = "DRAG_START";
-export const DRAG_END = "DRAG_END";
-export const COMMIT = "COMMIT";
+} from './types';
+import { Selection } from './selection';
+
+export const SET_DATA = 'SET_DATA';
+export const SET_CREATE_FORMULA_PARSER = 'SET_CREATE_FORMULA_PARSER';
+export const SELECT_ENTIRE_ROW = 'SELECT_ENTIRE_ROW';
+export const SELECT_ENTIRE_COLUMN = 'SELECT_ENTIRE_COLUMN';
+export const SELECT_ENTIRE_WORKSHEET = 'SELECT_ENTIRE_WORKSHEET';
+export const SET_SELECTION = 'SET_SELECTION';
+export const SELECT = 'SELECT';
+export const ACTIVATE = 'ACTIVATE';
+export const SET_CELL_DATA = 'SET_CELL_DATA';
+export const SET_CELL_DIMENSIONS = 'SET_CELL_DIMENSIONS';
+export const COPY = 'COPY';
+export const CUT = 'CUT';
+export const PASTE = 'PASTE';
+export const EDIT = 'EDIT';
+export const VIEW = 'VIEW';
+export const CLEAR = 'CLEAR';
+export const BLUR = 'BLUR';
+export const KEY_PRESS = 'KEY_PRESS';
+export const KEY_DOWN = 'KEY_DOWN';
+export const DRAG_START = 'DRAG_START';
+export const DRAG_END = 'DRAG_END';
+export const COMMIT = 'COMMIT';
+export const BOLD = 'BOLD';
+export const ITALIC = 'ITALIC';
+export const UNDERLINE = 'UNDERLINE';
+export const COLOR = 'COLOR';
+export const BACKGROUND_COLOR = 'BACKGROUND_COLOR';
+export const FORMATE_PAINTER = 'FORMATE_PAINTER';
 
 export type BaseAction<T extends string> = {
   type: T;
 };
 
+export type BoldStyle = BaseAction<typeof BOLD> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function bold(data: Matrix<CellBase>): BoldStyle {
+  return {
+    type: BOLD,
+    payload: { data },
+  };
+}
+export type ItalicStyle = BaseAction<typeof ITALIC> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function italic(data: Matrix<CellBase>): ItalicStyle {
+  return {
+    type: ITALIC,
+    payload: { data },
+  };
+}
+export type UnderlineStyle = BaseAction<typeof UNDERLINE> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function underline(data: Matrix<CellBase>): UnderlineStyle {
+  return {
+    type: UNDERLINE,
+    payload: { data },
+  };
+}
+export type ColorStyle = BaseAction<typeof COLOR> & {
+  payload: {
+    data: Matrix<CellBase>;
+    value: string;
+  };
+};
+
+export function color(data: Matrix<CellBase>, value: string): ColorStyle {
+  return {
+    type: COLOR,
+    payload: { data, value },
+  };
+}
+export type BackgroundStyle = BaseAction<typeof BACKGROUND_COLOR> & {
+  payload: {
+    data: Matrix<CellBase>;
+    value: string;
+  };
+};
+
+export function backgroundStyle(
+  data: Matrix<CellBase>,
+  value: string
+): BackgroundStyle {
+  return {
+    type: BACKGROUND_COLOR,
+    payload: { data, value },
+  };
+}
+
+export type FormatePainterStyle = BaseAction<typeof FORMATE_PAINTER> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function formatePainter(data: Matrix<CellBase>): FormatePainterStyle {
+  return {
+    type: FORMATE_PAINTER,
+    payload: { data },
+  };
+}
+
 export type SetDataAction = BaseAction<typeof SET_DATA> & {
   payload: {
     data: Matrix<CellBase>;
@@ -109,13 +194,13 @@ export function selectEntireWorksheet(): SelectEntireWorksheetAction {
   return { type: SELECT_ENTIRE_WORKSHEET };
 }
 
-export type SetSelectionAction = BaseAction<typeof SET_SELECTION> & {  
+export type SetSelectionAction = BaseAction<typeof SET_SELECTION> & {
   payload: {
     selection: Selection;
   };
 };
 
-export function setSelection(selection: Selection): SetSelectionAction {  
+export function setSelection(selection: Selection): SetSelectionAction {
   return { type: SET_SELECTION, payload: { selection } };
 }
 
@@ -133,7 +218,6 @@ export function select(point: Point): SelectAction {
 }
 
 export type ActivateAction = BaseAction<typeof ACTIVATE> & {
-  
   payload: {
     point: Point;
   };
@@ -177,7 +261,7 @@ export function setCellDimensions(
   };
 }
 
-export type PasteAction = BaseAction<typeof PASTE> & {  
+export type PasteAction = BaseAction<typeof PASTE> & {
   payload: {
     data: string;
   };
@@ -299,4 +383,10 @@ export type Action =
   | EditAction
   | ViewAction
   | ClearAction
+  | UnderlineStyle
+  | ItalicStyle
+  | BoldStyle
+  | ColorStyle
+  | BackgroundStyle
+  | FormatePainterStyle
   | BlurAction;

package/src/components/ExcelFile/ExcelFile/Excel/areModelsEqual.ts

@@ -1,4 +1,4 @@
-import { Model } from "./engine";
+import { Model } from './engine';
 
 function areModelsEqual(a: unknown, b: unknown): boolean | undefined {
   const isAModule = a instanceof Model;

package/src/components/ExcelFile/ExcelFile/Excel/context.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { createContext } from "use-context-selector";
-import reducer, { INITIAL_STATE } from "./reducer";
-import { Action } from "./actions";
+import * as React from 'react';
+import { createContext } from 'use-context-selector';
+import reducer, { INITIAL_STATE } from './reducer';
+import { Action } from './actions';
 
 export type ReducerState = React.ReducerState<typeof reducer>;
 export type Dispatch = React.Dispatch<Action>;

package/src/components/ExcelFile/ExcelFile/Excel/engine/engine.ts

@@ -1,10 +1,10 @@
-import FormulaParser, { FormulaError, Value } from "fast-formula-parser";
-import * as Matrix from "../matrix";
-import { Point } from "../point";
-import { CellBase, CreateFormulaParser } from "../types";
-import * as Formula from "./formula";
-import { PointGraph } from "./point-graph";
-import { PointSet } from "./point-set";
+import FormulaParser, { FormulaError, Value } from 'fast-formula-parser';
+import * as Matrix from '../matrix';
+import { Point } from '../point';
+import { CellBase, CreateFormulaParser } from '../types';
+import * as Formula from './formula';
+import { PointGraph } from './point-graph';
+import { PointSet } from './point-set';
 
 export class Model<Cell extends CellBase> {
   readonly data!: Matrix.Matrix<Cell>;

package/src/components/ExcelFile/ExcelFile/Excel/engine/formula.ts

@@ -4,19 +4,19 @@ import FormulaParser, {
   FormulaError,
   FormulaParserConfig,
   Value,
-} from "fast-formula-parser";
-import { PointRange } from "../point-range";
-import { Point } from "../point";
-import * as Matrix from "../matrix";
-import { CellBase } from "../types";
-import { PointSet } from "./point-set";
+} from 'fast-formula-parser';
+import { PointRange } from '../point-range';
+import { Point } from '../point';
+import * as Matrix from '../matrix';
+import { CellBase } from '../types';
+import { PointSet } from './point-set';
 
-export const FORMULA_VALUE_PREFIX = "=";
+export const FORMULA_VALUE_PREFIX = '=';
 
 /** Returns whether given value is a formula */
 export function isFormulaValue(value: unknown): value is string {
   return (
-    typeof value === "string" &&
+    typeof value === 'string' &&
     value.startsWith(FORMULA_VALUE_PREFIX) &&
     value.length > 1
   );
@@ -29,7 +29,7 @@ export function extractFormula(value: string): string {
 
 export function createFormulaParser(
   data: Matrix.Matrix<CellBase>,
-  config?: Omit<FormulaParserConfig, "onCell" | "onRange">
+  config?: Omit<FormulaParserConfig, 'onCell' | 'onRange'>
 ): FormulaParser {
   return new FormulaParser({
     ...config,
@@ -78,7 +78,7 @@ export function getReferences(
 
     const references = PointSet.from(
       dependencies.flatMap((reference) => {
-        const isRange = "from" in reference;
+        const isRange = 'from' in reference;
         if (isRange) {
           const { from, to } = reference;
 
@@ -132,6 +132,6 @@ function convertPointToCellRef(point: Point): CellRef {
     row: point.row + 1,
     col: point.column + 1,
     // TODO: fill once we support multiple sheets
-    sheet: "Sheet1",
+    sheet: 'Sheet1',
   };
 }

package/src/components/ExcelFile/ExcelFile/Excel/engine/index.ts

@@ -1,2 +1,2 @@
-export { Model, updateCellValue } from "./engine";
-export { createFormulaParser } from "./formula";
+export { Model, updateCellValue } from './engine';
+export { createFormulaParser } from './formula';