pixel-react 1.2.6 → 1.2.8

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.tsx

@@ -5,7 +5,7 @@ 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 reducer, { INITIAL_STATE } from './reducer';
 import context from './context';
 import { Model, createFormulaParser } from './engine';
 import {
@@ -15,7 +15,6 @@ import {
   calculateSpreadsheetSize,
   getCSV,
   shouldHandleClipboardEvent,
-  isFocusedWithin,
 } from './util';
 
 import DefaultTable from './Table';
@@ -38,6 +37,7 @@ import Selected from './Selected';
 import Copied from './Copied';
 import './Spreadsheet.scss';
 import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
+import { hasKeyDownHandler } from './reducerFunctions';
 
 /** The Spreadsheet component props */
 export type Props<CellType extends Types.CellBase> = {
@@ -121,20 +121,12 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     className,
     columnLabels,
     rowLabels,
-    // hideColumnIndicators,
-    // hideRowIndicators,
     onKeyDown,
     Table = DefaultTable,
     Row = DefaultRow,
     HeaderRow = DefaultHeaderRow,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
-    // onChange = () => {},
-    // onModeChange = () => {},
-    onSelect = () => {},
-    onActivate = () => {},
-    // onBlur = () => {},
-    // onCellCommit = () => {},
     onEvaluatedDataChange = () => {},
   } = props;
   type State = Types.StoreState<CellType>;
@@ -178,7 +170,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const copy = useAction(Actions.copy);
   const paste = useAction(Actions.paste);
   const onKeyDownAction = useAction(Actions.keyDown);
-  const onKeyPress = useAction(Actions.keyPress);
   const onDragStart = useAction(Actions.dragStart);
   const onDragEnd = useAction(Actions.dragEnd);
   const setData = useAction(Actions.setData);
@@ -186,27 +177,15 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const setSelection = useAction(Actions.setSelection);
   const onBold = useAction(Actions.bold);
   const onItalic = useAction(Actions.italic);
-  const onUnderline = useAction(Actions.underline);
+  const setUnderlineType = useAction(Actions.underlineType);
+  const setTextAlign = useAction(Actions.textAlign);
+  const setFontSize = useAction(Actions.fontSize);
+  const setFontFamily = useAction(Actions.fontFamily);
+  const setBorderType = useAction(Actions.borderType);
   const setColor = useAction(Actions.color);
   const setBackgroundColor = useAction(Actions.backgroundStyle);
   const setFormatePainter = useAction(Actions.formatePainter);
 
-  const prevActiveRef = React.useRef<Point.Point | null>(state.active);
-  React.useEffect(() => {
-    if (state.active !== prevActiveRef.current) {
-      if (state.active) {
-        onActivate(state.active);
-      } else {
-        const root = rootRef.current;
-        if (root && isFocusedWithin(root) && document.activeElement) {
-          (document.activeElement as HTMLElement).blur();
-        }
-      }
-    }
-
-    prevActiveRef.current = state.active;
-  }, [onActivate, state.active]);
-
   const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
     state.model.evaluatedData
   );
@@ -218,18 +197,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevEvaluatedDataRef.current = state.model.evaluatedData;
   }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
 
-  const prevSelectedRef = React.useRef<Selection>(state.selected);
-  React.useEffect(() => {
-    if (!state.selected.equals(prevSelectedRef.current)) {
-      // Call on select only if the selection change internal
-      if (!props.selected || !state.selected.equals(props.selected)) {
-        onSelect(state.selected);
-      }
-    }
-
-    prevSelectedRef.current = state.selected;
-  }, [state.selected, onSelect, props.selected]);
-
   // Update selection when props.selected changes
   const prevSelectedPropRef = React.useRef<Selection | undefined>(
     props.selected
@@ -256,7 +223,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevDataPropRef.current = props.data;
   }, [props.data, setData]);
 
-  // Update createFormulaParser when props.createFormulaParser changes
   const prevCreateFormulaParserPropRef = React.useRef<
     Types.CreateFormulaParser | undefined
   >(props.createFormulaParser);
@@ -466,15 +432,18 @@ const Spreadsheet = <CellType extends Types.CellBase>(
           data={props.data}
           onBold={onBold}
           onItalic={onItalic}
-          onUnderline={onUnderline}
+          setUnderlineType={setUnderlineType}
           setColor={setColor}
+          setBorderType={setBorderType}
+          setFontSize={setFontSize}
+          setFontFamily={setFontFamily}
+          setTextAlign={setTextAlign}
           setBackgroundColor={setBackgroundColor}
           setFormatePainter={setFormatePainter}
         />
         <div
           ref={rootRef}
-          className={classNames('Spreadsheet', className)}
-          onKeyPress={onKeyPress}
+          className={classNames('ff-spreadsheet', className)}
           onKeyDown={handleKeyDown}
           onMouseMove={handleMouseMove}
         >
@@ -487,7 +456,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     ),
     [
       className,
-      onKeyPress,
       handleKeyDown,
       handleMouseMove,
       tableNode,

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Table.tsx

@@ -9,7 +9,7 @@ const Table: Types.TableComponent = ({
   const columnCount = columns + (hideColumnIndicators ? 0 : 1);
   const columnNodes = range(columnCount).map((i) => <col key={i} />);
   return (
-    <table className="Spreadsheet__table">
+    <table className="ff-spreadsheet-table">
       <colgroup>{columnNodes}</colgroup>
       <tbody>{children}</tbody>
     </table>

package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/actions.ts

@@ -32,7 +32,11 @@ export const DRAG_END = 'DRAG_END';
 export const COMMIT = 'COMMIT';
 export const BOLD = 'BOLD';
 export const ITALIC = 'ITALIC';
-export const UNDERLINE = 'UNDERLINE';
+export const UNDERLINE_TYPE = 'UNDERLINE_TYPE';
+export const FONT_FAMILY = 'FONT_FAMILY';
+export const FONT_SIZE = 'FONT_SIZE';
+export const TEXT_ALIGN = 'TEXT_ALIGN';
+export const BORDER_TYPE = 'BORDER_TYPE';
 export const COLOR = 'COLOR';
 export const BACKGROUND_COLOR = 'BACKGROUND_COLOR';
 export const FORMATE_PAINTER = 'FORMATE_PAINTER';
@@ -53,6 +57,7 @@ export function bold(data: Matrix<CellBase>): BoldStyle {
     payload: { data },
   };
 }
+
 export type ItalicStyle = BaseAction<typeof ITALIC> & {
   payload: {
     data: Matrix<CellBase>;
@@ -65,18 +70,90 @@ export function italic(data: Matrix<CellBase>): ItalicStyle {
     payload: { data },
   };
 }
-export type UnderlineStyle = BaseAction<typeof UNDERLINE> & {
+
+export type BorderType = BaseAction<typeof BORDER_TYPE> & {
   payload: {
     data: Matrix<CellBase>;
+    value: string;
+    color: string;
   };
 };
 
-export function underline(data: Matrix<CellBase>): UnderlineStyle {
+export function borderType(
+  data: Matrix<CellBase>,
+  value: string,
+  color: string
+): BorderType {
   return {
-    type: UNDERLINE,
-    payload: { data },
+    type: BORDER_TYPE,
+    payload: { data, value, color },
+  };
+}
+
+export type UnderlineTypeStyle = BaseAction<typeof UNDERLINE_TYPE> & {
+  payload: {
+    data: Matrix<CellBase>;
+    value: string;
+    active: boolean;
+  };
+};
+
+export function underlineType(
+  data: Matrix<CellBase>,
+  value: string,
+  active: boolean
+): UnderlineTypeStyle {
+  return {
+    type: UNDERLINE_TYPE,
+    payload: { data, value, active },
   };
 }
+
+export type FontSize = BaseAction<typeof FONT_SIZE> & {
+  payload: {
+    data: Matrix<CellBase>;
+    value: string;
+  };
+};
+
+export function fontSize(data: Matrix<CellBase>, value: string): FontSize {
+  return {
+    type: FONT_SIZE,
+    payload: { data, value },
+  };
+}
+
+export type FontFamily = BaseAction<typeof FONT_FAMILY> & {
+  payload: {
+    data: Matrix<CellBase>;
+    value: string;
+  };
+};
+
+export function fontFamily(data: Matrix<CellBase>, value: string): FontFamily {
+  return {
+    type: FONT_FAMILY,
+    payload: { data, value },
+  };
+}
+
+export type TextAlignType = BaseAction<typeof TEXT_ALIGN> & {
+  payload: {
+    data: Matrix<CellBase>;
+    value: string;
+  };
+};
+
+export function textAlign(
+  data: Matrix<CellBase>,
+  value: string
+): TextAlignType {
+  return {
+    type: TEXT_ALIGN,
+    payload: { data, value },
+  };
+}
+
 export type ColorStyle = BaseAction<typeof COLOR> & {
   payload: {
     data: Matrix<CellBase>;
@@ -90,6 +167,7 @@ export function color(data: Matrix<CellBase>, value: string): ColorStyle {
     payload: { data, value },
   };
 }
+
 export type BackgroundStyle = BaseAction<typeof BACKGROUND_COLOR> & {
   payload: {
     data: Matrix<CellBase>;
@@ -274,19 +352,6 @@ export function paste(data: string): PasteAction {
   };
 }
 
-export type KeyPressAction = BaseAction<typeof KEY_PRESS> & {
-  payload: {
-    event: React.KeyboardEvent;
-  };
-};
-
-export function keyPress(event: React.KeyboardEvent): KeyPressAction {
-  return {
-    type: KEY_PRESS,
-    payload: { event },
-  };
-}
-
 export type KeyDownAction = BaseAction<typeof KEY_DOWN> & {
   payload: {
     event: React.KeyboardEvent;
@@ -373,7 +438,6 @@ export type Action =
   | SetCellDataAction
   | SetCellDimensionsAction
   | PasteAction
-  | KeyPressAction
   | KeyDownAction
   | DragStartAction
   | DragEndAction
@@ -383,7 +447,11 @@ export type Action =
   | EditAction
   | ViewAction
   | ClearAction
-  | UnderlineStyle
+  | UnderlineTypeStyle
+  | FontSize
+  | FontFamily
+  | TextAlignType
+  | BorderType
   | ItalicStyle
   | BoldStyle
   | ColorStyle