Add onEvaluatedDataChange

Co-authored-by: Iddan Aaronsohn <mail@aniddan.com>

src/Spreadsheet.test.tsx

@@ -97,6 +97,7 @@ const EXAMPLE_DATA = createEmptyMatrix<CellType>(ROWS, COLUMNS);
 const EXAMPLE_PROPS: Props<CellType> = {
   data: EXAMPLE_DATA,
   onChange: jest.fn(),
+  onEvaluatedDataChange: jest.fn(),
 };
 const EXAMPLE_VALUE: Value = "EXAMPLE_VALUE";
 const EXAMPLE_CELL: CellType = { value: EXAMPLE_VALUE };

src/Spreadsheet.tsx

@@ -119,6 +119,8 @@ export type Props<CellType extends Types.CellBase> = {
     nextCell: null | CellType,
     coords: null | Point.Point
   ) => void;
+  /** Callback called when the Spreadsheet's evaluated data changes. */
+  onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
 };
 
 /**
@@ -146,6 +148,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onActivate = () => {},
     onBlur = () => {},
     onCellCommit = () => {},
+    onEvaluatedDataChange = () => {},
   } = props;
   type State = Types.StoreState<CellType>;
 
@@ -242,6 +245,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevDataRef.current = state.model.data;
   }, [state.model.data, onChange, props.data]);
 
+  const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
+    state.model.evaluatedData
+  );
+  React.useEffect(() => {
+    if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
+      onEvaluatedDataChange(state?.model?.evaluatedData);
+    }
+
+    prevEvaluatedDataRef.current = state.model.evaluatedData;
+  }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
+
   // Listen to selection changes
   const prevSelectedRef = React.useRef<Selection>(state.selected);
   React.useEffect(() => {