WindyMadman/fortune-sheet
1
0
Fork 0
mirror of https://github.com/ruilisi/fortune-sheet.git synced 2025-01-05 10:27:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: use produceWithPatches universally for op extracting and history recording

Browse Source
This commit is contained in:
zyc9012 2022-04-04 21:35:26 +08:00
parent cde439db0b
commit 6757b973a5
18 changed files with 499 additions and 596 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/tsconfig.json
View File

@ -1,10 +0,0 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./lib",
"rootDir": "./src",
"baseUrl": "./",
"composite": true
},
"include": ["./src"]
}

11
packages/react/src/components/ContextMenu/SheetTab.tsx
View File

@ -6,7 +6,6 @@ import React, {
useState,
useLayoutEffect,
} from "react";
import produce from "immer";
import WorkbookContext from "../../context";
import "./index.css";
import Menu from "./Menu";
@ -68,12 +67,10 @@ const SheetTabContextMenu: React.FC<Props> = ({
>
<Menu
onClick={() => {
setContext(
produce((draftCtx) => {
deleteSheet(draftCtx, sheet.index);
onClose?.();
})
);
setContext((draftCtx) => {
deleteSheet(draftCtx, sheet.index!);
onClose?.();
});
}}
>
{sheetconfig.delete}

131
packages/react/src/components/ContextMenu/index.tsx
View File

@ -7,7 +7,6 @@ import {
} from "@fortune-sheet/core";
import _ from "lodash";
import React, { useContext, useMemo, useRef, useLayoutEffect } from "react";
import produce from "immer";
import WorkbookContext from "../../context";
import "./index.css";
import Menu from "./Menu";
@ -24,12 +23,10 @@ const ContextMenu: React.FC = () => {
<Menu
key="copy"
onClick={() => {
setContext(
produce((draftCtx) => {
handleCopy(draftCtx);
draftCtx.contextMenu = undefined;
})
);
setContext((draftCtx) => {
handleCopy(draftCtx);
draftCtx.contextMenu = undefined;
});
}}
>
{rightclick.copy}
@ -39,12 +36,10 @@ const ContextMenu: React.FC = () => {
<Menu
key="paste"
onClick={() => {
setContext(
produce((draftCtx) => {
handlePasteByClick(draftCtx);
draftCtx.contextMenu = undefined;
})
);
setContext((draftCtx) => {
handlePasteByClick(draftCtx);
draftCtx.contextMenu = undefined;
});
}}
>
{rightclick.paste}
@ -56,28 +51,26 @@ const ContextMenu: React.FC = () => {
<Menu
key={`add-col-${dir}`}
onClick={(e) => {
setContext(
produce((draftCtx) => {
const position =
draftCtx.luckysheet_select_save?.[0]?.column?.[0];
if (position == null) return;
const countStr = (e.target as HTMLDivElement).querySelector(
"input"
)?.value;
if (countStr == null) return;
const count = parseInt(countStr, 10);
if (count < 1) return;
extendSheet(
draftCtx,
"column",
position,
count,
dir === "left" ? "lefttop" : "rightbottom",
draftCtx.currentSheetIndex
);
draftCtx.contextMenu = undefined;
})
);
setContext((draftCtx) => {
const position =
draftCtx.luckysheet_select_save?.[0]?.column?.[0];
if (position == null) return;
const countStr = (e.target as HTMLDivElement).querySelector(
"input"
)?.value;
if (countStr == null) return;
const count = parseInt(countStr, 10);
if (count < 1) return;
extendSheet(
draftCtx,
"column",
position,
count,
dir === "left" ? "lefttop" : "rightbottom",
draftCtx.currentSheetIndex
);
draftCtx.contextMenu = undefined;
});
}}
>
<>
@ -106,26 +99,24 @@ const ContextMenu: React.FC = () => {
<Menu
key={`add-row-${dir}`}
onClick={(e, container) => {
setContext(
produce((draftCtx) => {
const position =
draftCtx.luckysheet_select_save?.[0]?.row?.[0];
if (position == null) return;
const countStr = container.querySelector("input")?.value;
if (countStr == null) return;
const count = parseInt(countStr, 10);
if (count < 1) return;
extendSheet(
draftCtx,
"row",
position,
count,
dir === "top" ? "lefttop" : "rightbottom",
draftCtx.currentSheetIndex
);
draftCtx.contextMenu = undefined;
})
);
setContext((draftCtx) => {
const position =
draftCtx.luckysheet_select_save?.[0]?.row?.[0];
if (position == null) return;
const countStr = container.querySelector("input")?.value;
if (countStr == null) return;
const count = parseInt(countStr, 10);
if (count < 1) return;
extendSheet(
draftCtx,
"row",
position,
count,
dir === "top" ? "lefttop" : "rightbottom",
draftCtx.currentSheetIndex
);
draftCtx.contextMenu = undefined;
});
}}
>
<>
@ -154,12 +145,10 @@ const ContextMenu: React.FC = () => {
onClick={() => {
if (!selection) return;
const [st_index, ed_index] = selection.column;
setContext(
produce((draftCtx) => {
deleteRowCol(draftCtx, "column", st_index, ed_index);
draftCtx.contextMenu = undefined;
})
);
setContext((draftCtx) => {
deleteRowCol(draftCtx, "column", st_index, ed_index);
draftCtx.contextMenu = undefined;
});
}}
>
{rightclick.deleteSelected}
@ -172,12 +161,10 @@ const ContextMenu: React.FC = () => {
onClick={() => {
if (!selection) return;
const [st_index, ed_index] = selection.row;
setContext(
produce((draftCtx) => {
deleteRowCol(draftCtx, "row", st_index, ed_index);
draftCtx.contextMenu = undefined;
})
);
setContext((draftCtx) => {
deleteRowCol(draftCtx, "row", st_index, ed_index);
draftCtx.contextMenu = undefined;
});
}}
>
{rightclick.deleteSelected}
@ -214,12 +201,10 @@ const ContextMenu: React.FC = () => {
hasOverflow = true;
}
if (hasOverflow) {
setContext(
produce((draftCtx) => {
draftCtx.contextMenu.x = left;
draftCtx.contextMenu.y = top;
})
);
setContext((draftCtx) => {
draftCtx.contextMenu.x = left;
draftCtx.contextMenu.y = top;
});
}
}, [contextMenu, setContext]);

159
packages/react/src/components/FxEditor/index.tsx
View File

@ -17,7 +17,6 @@ import React, {
useEffect,
useRef,
} from "react";
import produce from "immer";
import "./index.css";
import _ from "lodash";
import WorkbookContext from "../../context";
@ -65,21 +64,19 @@ const FxEditor: React.FC = () => {
const onFocus = useCallback(() => {
if ((context.luckysheet_select_save?.length ?? 0) > 0) {
setFocused(true);
setContext(
produce((draftCtx) => {
const last =
draftCtx.luckysheet_select_save![
draftCtx.luckysheet_select_save!.length - 1
];
setContext((draftCtx) => {
const last =
draftCtx.luckysheet_select_save![
draftCtx.luckysheet_select_save!.length - 1
];
const row_index = last.row_focus;
const col_index = last.column_focus;
const row_index = last.row_focus;
const col_index = last.column_focus;
draftCtx.luckysheetCellUpdate = [row_index, col_index];
refs.globalCache.doNotFocus = true;
// formula.rangeResizeTo = $("#luckysheet-functionbox-cell");
})
);
draftCtx.luckysheetCellUpdate = [row_index, col_index];
refs.globalCache.doNotFocus = true;
// formula.rangeResizeTo = $("#luckysheet-functionbox-cell");
});
}
}, [context.luckysheet_select_save, refs.globalCache, setContext]);
@ -90,53 +87,52 @@ const FxEditor: React.FC = () => {
// return;
// }
lastKeyDownEventRef.current = e;
setContext(
produce((draftCtx) => {
if (context.luckysheetCellUpdate.length > 0) {
switch (e.key) {
case "Enter": {
// if (
// $("#luckysheet-formula-search-c").is(":visible") &&
// formula.searchFunctionCell != null
// ) {
// formula.searchFunctionEnter(
// $("#luckysheet-formula-search-c").find(
// ".luckysheet-formula-search-item-active"
// )
// );
// } else {
const lastCellUpdate = _.clone(draftCtx.luckysheetCellUpdate);
updateCell(
draftCtx,
draftCtx.luckysheetCellUpdate[0],
draftCtx.luckysheetCellUpdate[1],
refs.fxInput.current!
);
draftCtx.luckysheet_select_save = [
{
row: [lastCellUpdate[0], lastCellUpdate[0]],
column: [lastCellUpdate[1], lastCellUpdate[1]],
row_focus: lastCellUpdate[0],
column_focus: lastCellUpdate[1],
},
];
moveHighlightCell(draftCtx, "down", 1, "rangeOfSelect");
// $("#luckysheet-rich-text-editor").focus();
// }
e.preventDefault();
e.stopPropagation();
break;
}
case "Escape": {
cancelNormalSelected(draftCtx);
moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
// $("#luckysheet-functionbox-cell").blur();
// $("#luckysheet-rich-text-editor").focus();
e.preventDefault();
e.stopPropagation();
break;
}
/*
setContext((draftCtx) => {
if (context.luckysheetCellUpdate.length > 0) {
switch (e.key) {
case "Enter": {
// if (
// $("#luckysheet-formula-search-c").is(":visible") &&
// formula.searchFunctionCell != null
// ) {
// formula.searchFunctionEnter(
// $("#luckysheet-formula-search-c").find(
// ".luckysheet-formula-search-item-active"
// )
// );
// } else {
const lastCellUpdate = _.clone(draftCtx.luckysheetCellUpdate);
updateCell(
draftCtx,
draftCtx.luckysheetCellUpdate[0],
draftCtx.luckysheetCellUpdate[1],
refs.fxInput.current!
);
draftCtx.luckysheet_select_save = [
{
row: [lastCellUpdate[0], lastCellUpdate[0]],
column: [lastCellUpdate[1], lastCellUpdate[1]],
row_focus: lastCellUpdate[0],
column_focus: lastCellUpdate[1],
},
];
moveHighlightCell(draftCtx, "down", 1, "rangeOfSelect");
// $("#luckysheet-rich-text-editor").focus();
// }
e.preventDefault();
e.stopPropagation();
break;
}
case "Escape": {
cancelNormalSelected(draftCtx);
moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
// $("#luckysheet-functionbox-cell").blur();
// $("#luckysheet-rich-text-editor").focus();
e.preventDefault();
e.stopPropagation();
break;
}
/*
case "F4": {
formula.setfreezonFuc(event);
e.preventDefault();
@ -182,20 +178,19 @@ const FxEditor: React.FC = () => {
break;
}
*/
case "ArrowLeft": {
rangeHightlightselected(draftCtx, refs.fxInput.current!);
break;
}
case "ArrowRight": {
rangeHightlightselected(draftCtx, refs.fxInput.current!);
break;
}
default:
break;
case "ArrowLeft": {
rangeHightlightselected(draftCtx, refs.fxInput.current!);
break;
}
case "ArrowRight": {
rangeHightlightselected(draftCtx, refs.fxInput.current!);
break;
}
default:
break;
}
})
);
}
});
},
[context.luckysheetCellUpdate.length, refs.fxInput, setContext]
);
@ -222,16 +217,14 @@ const FxEditor: React.FC = () => {
kcode === 46 ||
(e.ctrlKey && kcode === 86)
) {
setContext(
produce((draftCtx) => {
handleFormulaInput(
draftCtx,
refs.cellInput.current!,
refs.fxInput.current!,
kcode
);
})
);
setContext((draftCtx) => {
handleFormulaInput(
draftCtx,
refs.cellInput.current!,
refs.fxInput.current!,
kcode
);
});
}
}, [refs.cellInput, refs.fxInput, setContext]);

63
packages/react/src/components/Sheet/index.tsx
View File

@ -9,7 +9,6 @@ import {
} from "@fortune-sheet/core";
import "./index.css";
import type { CellMatrix } from "@fortune-sheet/core";
import produce from "immer";
import WorkbookContext from "../../context";
import SheetOverlay from "../SheetOverlay";
@ -25,16 +24,14 @@ const Sheet: React.FC<Props> = ({ data }) => {
useEffect(() => {
function resize() {
setContext(
produce((draftCtx) => {
updateContextWithSheetData(draftCtx, data);
updateContextWithCanvas(
draftCtx,
canvasRef.current!,
placeholderRef.current!
);
})
);
setContext((draftCtx) => {
updateContextWithSheetData(draftCtx, data);
updateContextWithCanvas(
draftCtx,
canvasRef.current!,
placeholderRef.current!
);
});
}
window.addEventListener("resize", resize);
return () => {
@ -43,30 +40,24 @@ const Sheet: React.FC<Props> = ({ data }) => {
}, [data, setContext]);
useEffect(() => {
setContext(
produce((draftCtx) => updateContextWithSheetData(draftCtx, data))
);
setContext((draftCtx) => updateContextWithSheetData(draftCtx, data));
}, [context.config?.rowlen, context.config?.columnlen, data, setContext]);
useEffect(() => {
setContext(
produce((draftCtx) =>
updateContextWithCanvas(
draftCtx,
canvasRef.current!,
placeholderRef.current!
)
setContext((draftCtx) =>
updateContextWithCanvas(
draftCtx,
canvasRef.current!,
placeholderRef.current!
)
);
}, [setContext]);
useEffect(() => {
if (hasGroupValuesRefreshData()) {
setContext(
produce((draftCtx) => {
groupValuesRefresh(draftCtx);
})
);
setContext((draftCtx) => {
groupValuesRefresh(draftCtx);
});
}
}, [context.luckysheetfile, context.currentSheetIndex, setContext]);
@ -82,17 +73,15 @@ const Sheet: React.FC<Props> = ({ data }) => {
const onWheel = useCallback(
(e: WheelEvent) => {
setContext(
produce((draftCtx) => {
handleGlobalWheel(
draftCtx,
e,
refs.globalCache,
refs.scrollbarX.current!,
refs.scrollbarY.current!
);
})
);
setContext((draftCtx) => {
handleGlobalWheel(
draftCtx,
e,
refs.globalCache,
refs.scrollbarX.current!,
refs.scrollbarY.current!
);
});
},
[refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]
);

53
packages/react/src/components/SheetOverlay/ColumnHeader.tsx
View File

@ -15,7 +15,6 @@ import React, {
useCallback,
useEffect,
} from "react";
import produce from "immer";
import WorkbookContext from "../../context";
const ColumnHeader: React.FC = () => {
@ -55,15 +54,13 @@ const ColumnHeader: React.FC = () => {
const onMouseDown = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleColumnHeaderMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!
);
})
);
setContext((draftCtx) => {
handleColumnHeaderMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!
);
});
},
[setContext]
);
@ -77,16 +74,14 @@ const ColumnHeader: React.FC = () => {
const onColSizeHandleMouseDown = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleColSizeHandleMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!,
refs.cellArea.current!
);
})
);
setContext((draftCtx) => {
handleColSizeHandleMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!,
refs.cellArea.current!
);
});
e.stopPropagation();
},
[refs.cellArea, setContext]
@ -94,16 +89,14 @@ const ColumnHeader: React.FC = () => {
const onContextMenu = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleContextMenu(
draftCtx,
settings,
e.nativeEvent,
refs.workbookContainer.current!
);
})
);
setContext((draftCtx) => {
handleContextMenu(
draftCtx,
settings,
e.nativeEvent,
refs.workbookContainer.current!
);
});
},
[refs.workbookContainer, setContext, settings]
);

144
packages/react/src/components/SheetOverlay/InputBox.tsx
View File

@ -19,7 +19,6 @@ import React, {
useLayoutEffect,
} from "react";
import _ from "lodash";
import produce from "immer";
import WorkbookContext from "../../context";
import ContentEditable from "./ContentEditable";
import FormulaSearch from "./FormulaSearch";
@ -107,58 +106,54 @@ const InputBox: React.FC = () => {
// return;
// }
setContext(
produce((draftCtx) => {
if (e.key === "Escape" && draftCtx.luckysheetCellUpdate.length > 0) {
cancelNormalSelected(draftCtx);
moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
e.preventDefault();
} else if (
e.key === "Enter" &&
draftCtx.luckysheetCellUpdate.length > 0
) {
// if (
// $("#luckysheet-formula-search-c").is(":visible") &&
// formula.searchFunctionCell != null
// ) {
// formula.searchFunctionEnter(
// $("#luckysheet-formula-search-c").find(
// ".luckysheet-formula-search-item-active"
// )
// );
// event.preventDefault();
// }
} else if (
e.key === "Tab" &&
draftCtx.luckysheetCellUpdate.length > 0
) {
// if (
// $("#luckysheet-formula-search-c").is(":visible") &&
// formula.searchFunctionCell != null
// ) {
// formula.searchFunctionEnter(
// $("#luckysheet-formula-search-c").find(
// ".luckysheet-formula-search-item-active"
// )
// );
// } else {
// updateCell(
// draftCtx,
// draftCtx.luckysheetCellUpdate[0],
// draftCtx.luckysheetCellUpdate[1],
// refs.cellInput.current!
// );
// moveHighlightCell(draftCtx, "right", 1, "rangeOfSelect");
// }
setContext((draftCtx) => {
if (e.key === "Escape" && draftCtx.luckysheetCellUpdate.length > 0) {
cancelNormalSelected(draftCtx);
moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
e.preventDefault();
} else if (
e.key === "Enter" &&
draftCtx.luckysheetCellUpdate.length > 0
) {
// if (
// $("#luckysheet-formula-search-c").is(":visible") &&
// formula.searchFunctionCell != null
// ) {
// formula.searchFunctionEnter(
// $("#luckysheet-formula-search-c").find(
// ".luckysheet-formula-search-item-active"
// )
// );
// event.preventDefault();
// }
} else if (
e.key === "Tab" &&
draftCtx.luckysheetCellUpdate.length > 0
) {
// if (
// $("#luckysheet-formula-search-c").is(":visible") &&
// formula.searchFunctionCell != null
// ) {
// formula.searchFunctionEnter(
// $("#luckysheet-formula-search-c").find(
// ".luckysheet-formula-search-item-active"
// )
// );
// } else {
// updateCell(
// draftCtx,
// draftCtx.luckysheetCellUpdate[0],
// draftCtx.luckysheetCellUpdate[1],
// refs.cellInput.current!
// );
// moveHighlightCell(draftCtx, "right", 1, "rangeOfSelect");
// }
e.preventDefault();
} else if (
e.key === "F4" &&
draftCtx.luckysheetCellUpdate.length > 0
) {
// formula.setfreezonFuc(event);
e.preventDefault();
} /* else if (
e.preventDefault();
} else if (e.key === "F4" && draftCtx.luckysheetCellUpdate.length > 0) {
// formula.setfreezonFuc(event);
e.preventDefault();
} /* else if (
e.key === "ArrowUp" &&
draftCtx.luckysheetCellUpdate.length > 0
) {
@ -179,8 +174,7 @@ const InputBox: React.FC = () => {
) {
formulaMoveEvent("right", ctrlKey, shiftKey, event);
} */
})
);
});
},
[setContext]
);
@ -213,28 +207,26 @@ const InputBox: React.FC = () => {
kcode === 46 ||
(e.ctrlKey && kcode === 86)
) {
setContext(
produce((draftCtx) => {
// if(event.target.id!="luckysheet-input-box" && event.target.id!="luckysheet-rich-text-editor"){
handleFormulaInput(
draftCtx,
refs.fxInput.current!,
refs.cellInput.current!,
kcode
);
// formula.functionInputHanddler(
// $("#luckysheet-functionbox-cell"),
// $("#luckysheet-rich-text-editor"),
// kcode
// );
// setCenterInputPosition(
// draftCtx.luckysheetCellUpdate[0],
// draftCtx.luckysheetCellUpdate[1],
// draftCtx.flowdata
// );
// }
})
);
setContext((draftCtx) => {
// if(event.target.id!="luckysheet-input-box" && event.target.id!="luckysheet-rich-text-editor"){
handleFormulaInput(
draftCtx,
refs.fxInput.current!,
refs.cellInput.current!,
kcode
);
// formula.functionInputHanddler(
// $("#luckysheet-functionbox-cell"),
// $("#luckysheet-rich-text-editor"),
// kcode
// );
// setCenterInputPosition(
// draftCtx.luckysheetCellUpdate[0],
// draftCtx.luckysheetCellUpdate[1],
// draftCtx.flowdata
// );
// }
});
}
}, [refs.cellInput, refs.fxInput, setContext]);

53
packages/react/src/components/SheetOverlay/RowHeader.tsx
View File

@ -15,7 +15,6 @@ import React, {
useCallback,
useEffect,
} from "react";
import produce from "immer";
import WorkbookContext from "../../context";
const RowHeader: React.FC = () => {
@ -55,15 +54,13 @@ const RowHeader: React.FC = () => {
const onMouseDown = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleRowHeaderMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!
);
})
);
setContext((draftCtx) => {
handleRowHeaderMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!
);
});
},
[setContext]
);
@ -77,16 +74,14 @@ const RowHeader: React.FC = () => {
const onRowSizeHandleMouseDown = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleRowSizeHandleMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!,
refs.cellArea.current!
);
})
);
setContext((draftCtx) => {
handleRowSizeHandleMouseDown(
draftCtx,
e.nativeEvent,
containerRef.current!,
refs.cellArea.current!
);
});
e.stopPropagation();
},
[refs.cellArea, setContext]
@ -94,16 +89,14 @@ const RowHeader: React.FC = () => {
const onContextMenu = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleContextMenu(
draftCtx,
settings,
e.nativeEvent,
refs.workbookContainer.current!
);
})
);
setContext((draftCtx) => {
handleContextMenu(
draftCtx,
settings,
e.nativeEvent,
refs.workbookContainer.current!
);
});
},
[refs.workbookContainer, setContext, settings]
);

10
packages/react/src/components/SheetOverlay/ScrollBar/index.tsx
View File

@ -7,7 +7,7 @@ type Props = {
};
const ScrollBar: React.FC<Props> = ({ axis }) => {
const { context, refs, setContextValue } = useContext(WorkbookContext);
const { context, refs, setContext } = useContext(WorkbookContext);
useEffect(() => {
if (axis === "x") {
@ -24,9 +24,13 @@ const ScrollBar: React.FC<Props> = ({ axis }) => {
className={`luckysheet-scrollbars luckysheet-scrollbar-ltr luckysheet-scrollbar-${axis}`}
onScroll={() => {
if (axis === "x") {
setContextValue("scrollLeft", refs.scrollbarX.current!.scrollLeft);
setContext((draftCtx) => {
draftCtx.scrollLeft = refs.scrollbarX.current!.scrollLeft;
});
} else {
setContextValue("scrollTop", refs.scrollbarY.current!.scrollTop);
setContext((draftCtx) => {
draftCtx.scrollTop = refs.scrollbarY.current!.scrollTop;
});
}
}}
>

93
packages/react/src/components/SheetOverlay/index.tsx
View File

@ -1,6 +1,5 @@
import React, { useContext, useCallback, useRef, useEffect } from "react";
import "./index.css";
import produce from "immer";
import {
handleCellAreaDoubleClick,
handleCellAreaMouseDown,
@ -20,81 +19,71 @@ const SheetOverlay: React.FC = () => {
const cellAreaMouseDown = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleCellAreaMouseDown(
draftCtx,
e.nativeEvent,
refs.cellInput.current!,
refs.cellArea.current!
);
})
);
setContext((draftCtx) => {
handleCellAreaMouseDown(
draftCtx,
e.nativeEvent,
refs.cellInput.current!,
refs.cellArea.current!
);
});
},
[refs.cellArea, refs.cellInput, setContext]
);
const cellAreaContextMenu = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleContextMenu(
draftCtx,
settings,
e.nativeEvent,
refs.workbookContainer.current!
);
})
);
setContext((draftCtx) => {
handleContextMenu(
draftCtx,
settings,
e.nativeEvent,
refs.workbookContainer.current!
);
});
},
[refs.workbookContainer, setContext, settings]
);
const cellAreaDoubleClick = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleCellAreaDoubleClick(
draftCtx,
settings,
e.nativeEvent,
refs.cellArea.current!
);
})
);
setContext((draftCtx) => {
handleCellAreaDoubleClick(
draftCtx,
settings,
e.nativeEvent,
refs.cellArea.current!
);
});
},
[refs.cellArea, setContext, settings]
);
const onMouseMove = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleOverlayMouseMove(
draftCtx,
e.nativeEvent,
refs.scrollbarX.current!,
refs.scrollbarY.current!,
containerRef.current!
);
})
);
setContext((draftCtx) => {
handleOverlayMouseMove(
draftCtx,
e.nativeEvent,
refs.scrollbarX.current!,
refs.scrollbarY.current!,
containerRef.current!
);
});
},
[refs.scrollbarX, refs.scrollbarY, setContext]
);
const onMouseUp = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
setContext(
produce((draftCtx) => {
handleOverlayMouseUp(
draftCtx,
settings,
e.nativeEvent,
containerRef.current!
);
})
);
setContext((draftCtx) => {
handleOverlayMouseUp(
draftCtx,
settings,
e.nativeEvent,
containerRef.current!
);
});
},
[setContext, settings]
);

15
packages/react/src/components/SheetTab/SheetItem.tsx
View File

@ -6,7 +6,6 @@ import React, {
useRef,
useCallback,
} from "react";
import produce from "immer";
import WorkbookContext from "../../context";
import SheetTabContextMenu from "../ContextMenu/SheetTab";
@ -15,7 +14,7 @@ type Props = {
};
const SheetItem: React.FC<Props> = ({ sheet }) => {
const { context, setContext, setContextValue } = useContext(WorkbookContext);
const { context, setContext } = useContext(WorkbookContext);
const [editing, setEditing] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const editable = useRef<HTMLSpanElement>(null);
@ -53,11 +52,9 @@ const SheetItem: React.FC<Props> = ({ sheet }) => {
}, [editing]);
const onBlur = useCallback(() => {
setContext(
produce((draftCtx) => {
handleSheetTabOnBlur(draftCtx, editable.current!);
})
);
setContext((draftCtx) => {
handleSheetTabOnBlur(draftCtx, editable.current!);
});
setEditing(false);
}, [setContext]);
@ -71,7 +68,9 @@ const SheetItem: React.FC<Props> = ({ sheet }) => {
: ""
}`}
onClick={() => {
setContextValue("currentSheetIndex", sheet.index);
setContext((draftCtx) => {
draftCtx.currentSheetIndex = sheet.index!;
});
}}
onContextMenu={(e) => {
const rect = containerRef.current!.getBoundingClientRect();

25
packages/react/src/components/SheetTab/index.tsx
View File

@ -1,5 +1,4 @@
import React, { useContext, useRef } from "react";
import produce from "immer";
import { updateCell, addSheet } from "@fortune-sheet/core";
import WorkbookContext from "../../context";
import SVGIcon from "../SVGIcon";
@ -21,19 +20,17 @@ const SheetTab: React.FC = () => {
<div
className="fortune-sheettab-button"
onClick={() => {
setContext(
produce((draftCtx) => {
if (draftCtx.luckysheetCellUpdate.length > 0) {
updateCell(
draftCtx,
draftCtx.luckysheetCellUpdate[0],
draftCtx.luckysheetCellUpdate[1],
refs.cellInput.current!
);
}
addSheet(draftCtx);
})
);
setContext((draftCtx) => {
if (draftCtx.luckysheetCellUpdate.length > 0) {
updateCell(
draftCtx,
draftCtx.luckysheetCellUpdate[0],
draftCtx.luckysheetCellUpdate[1],
refs.cellInput.current!
);
}
addSheet(draftCtx);
});
}}
>
<SVGIcon name="plus" width={16} height={16} />

39
packages/react/src/components/Toolbar/index.tsx
View File

@ -1,5 +1,4 @@
import React, { useContext, useCallback, useRef } from "react";
import produce from "immer";
import {
getToolbarItemClickHandler,
handleTextBackground,
@ -32,13 +31,11 @@ const Toolbar: React.FC = () => {
}
if (["text-color", "text-background"].includes(name)) {
const pick = (color: string) => {
setContext(
produce((draftCtx) =>
(name === "text-color" ? handleTextColor : handleTextBackground)(
draftCtx,
refs.cellInput.current!,
color
)
setContext((draftCtx) =>
(name === "text-color" ? handleTextColor : handleTextBackground)(
draftCtx,
refs.cellInput.current!,
color
)
);
if (name === "text-color") {
@ -103,13 +100,11 @@ const Toolbar: React.FC = () => {
<Option
key={num}
onClick={() => {
setContext(
produce((draftContext) =>
handleTextSize(
draftContext,
refs.cellInput.current!,
num
)
setContext((draftContext) =>
handleTextSize(
draftContext,
refs.cellInput.current!,
num
)
);
setOpen(false);
@ -129,14 +124,12 @@ const Toolbar: React.FC = () => {
tooltip={name}
key={name}
onClick={() =>
setContext(
produce((draftCtx) => {
getToolbarItemClickHandler(name)?.(
draftCtx,
refs.cellInput.current!
);
})
)
setContext((draftCtx) => {
getToolbarItemClickHandler(name)?.(
draftCtx,
refs.cellInput.current!
);
})
}
/>
);

264
packages/react/src/components/Workbook/index.tsx
View File

@ -20,7 +20,7 @@ import React, {
useRef,
} from "react";
import "./index.css";
import produce from "immer";
import { enablePatches, produceWithPatches } from "immer";
import _, { assign } from "lodash";
import Sheet from "../Sheet";
import WorkbookContext from "../../context";
@ -30,6 +30,8 @@ import SheetTab from "../SheetTab";
import ContextMenu from "../ContextMenu";
import SVGDefines from "../SVGDefines";
enablePatches();
const Workbook: React.FC<
Settings & { onChange?: (data: SheetType[]) => void }
> = ({ onChange, ...props }) => {
@ -45,21 +47,21 @@ const Workbook: React.FC<
() => assign(defaultSettings, props) as Required<Settings>,
[props]
);
const setContextValue = useCallback(
<K extends keyof Context>(key: K, value: Context[K]) => {
setContext(
produce((draftCtx) => {
draftCtx[key] = value;
})
);
const setContextWithProduce = useCallback(
(recipe: (ctx: Context) => void) => {
setContext((ctx_) => {
const [result] = produceWithPatches(ctx_, recipe);
return result;
});
},
[]
);
const providerValue = useMemo(
() => ({
context,
setContext,
setContextValue,
setContext: setContextWithProduce,
settings: mergedSettings,
refs: {
globalCache: globalCache.current,
@ -71,7 +73,7 @@ const Workbook: React.FC<
workbookContainer,
},
}),
[context, mergedSettings, setContextValue]
[context, mergedSettings, setContextWithProduce]
);
useEffect(() => {
@ -79,129 +81,126 @@ const Workbook: React.FC<
}, [context.luckysheetfile, onChange]);
useEffect(() => {
setContext(
produce((draftCtx) => {
if (_.isEmpty(draftCtx.luckysheetfile)) {
// mergedSettings.data at this time may be immutable, causing following modifications to fail,
// clone it to make it mutable
// TODO do not clone it
draftCtx.luckysheetfile = _.cloneDeep(mergedSettings.data);
setContextWithProduce((draftCtx) => {
if (_.isEmpty(draftCtx.luckysheetfile)) {
// mergedSettings.data at this time may be immutable, causing following modifications to fail,
// clone it to make it mutable
// TODO do not clone it
draftCtx.luckysheetfile = _.cloneDeep(mergedSettings.data);
}
draftCtx.defaultcolumnNum = mergedSettings.column;
draftCtx.defaultrowNum = mergedSettings.row;
draftCtx.defaultFontSize = mergedSettings.defaultFontSize;
draftCtx.fullscreenmode = mergedSettings.fullscreenmode;
draftCtx.lang = mergedSettings.lang;
draftCtx.allowEdit = mergedSettings.allowEdit;
draftCtx.limitSheetNameLength = mergedSettings.limitSheetNameLength;
draftCtx.defaultSheetNameMaxLength =
mergedSettings.defaultSheetNameMaxLength;
// draftCtx.fontList = mergedSettings.fontList;
if (_.isEmpty(draftCtx.currentSheetIndex)) {
initSheetIndex(draftCtx);
}
let sheetIdx = getSheetIndex(draftCtx, draftCtx.currentSheetIndex);
if (sheetIdx == null) {
if ((draftCtx.luckysheetfile?.length ?? 0) > 0) {
sheetIdx = 0;
draftCtx.currentSheetIndex = draftCtx.luckysheetfile[0].index!;
}
draftCtx.defaultcolumnNum = mergedSettings.column;
draftCtx.defaultrowNum = mergedSettings.row;
draftCtx.defaultFontSize = mergedSettings.defaultFontSize;
draftCtx.fullscreenmode = mergedSettings.fullscreenmode;
draftCtx.lang = mergedSettings.lang;
draftCtx.allowEdit = mergedSettings.allowEdit;
draftCtx.limitSheetNameLength = mergedSettings.limitSheetNameLength;
draftCtx.defaultSheetNameMaxLength =
mergedSettings.defaultSheetNameMaxLength;
// draftCtx.fontList = mergedSettings.fontList;
if (_.isEmpty(draftCtx.currentSheetIndex)) {
initSheetIndex(draftCtx);
}
let sheetIdx = getSheetIndex(draftCtx, draftCtx.currentSheetIndex);
if (sheetIdx == null) {
if ((draftCtx.luckysheetfile?.length ?? 0) > 0) {
sheetIdx = 0;
draftCtx.currentSheetIndex = draftCtx.luckysheetfile[0].index!;
}
}
if (sheetIdx == null) return;
}
if (sheetIdx == null) return;
const sheet = draftCtx.luckysheetfile?.[sheetIdx];
if (!sheet) return;
const sheet = draftCtx.luckysheetfile?.[sheetIdx];
if (!sheet) return;
const cellData = sheet.celldata;
let { data } = sheet;
// expand cell data
if (_.isEmpty(data)) {
const lastRow = _.maxBy<CellWithRowAndCol>(cellData, "r");
const lastCol = _.maxBy(cellData, "c");
const lastRowNum = lastRow?.r || draftCtx.defaultrowNum;
const lastColNum = lastCol?.c || draftCtx.defaultcolumnNum;
if (lastRowNum && lastColNum) {
const expandedData: SheetType["data"] = _.times(
lastRowNum + 1,
() => _.times(lastColNum + 1, () => null)
);
cellData?.forEach((d) => {
// TODO setCellValue(draftCtx, d.r, d.c, expandedData, d.v);
expandedData[d.r][d.c] = d.v;
});
sheet.data = expandedData;
data = expandedData;
}
const cellData = sheet.celldata;
let { data } = sheet;
// expand cell data
if (_.isEmpty(data)) {
const lastRow = _.maxBy<CellWithRowAndCol>(cellData, "r");
const lastCol = _.maxBy(cellData, "c");
const lastRowNum = lastRow?.r || draftCtx.defaultrowNum;
const lastColNum = lastCol?.c || draftCtx.defaultcolumnNum;
if (lastRowNum && lastColNum) {
const expandedData: SheetType["data"] = _.times(lastRowNum + 1, () =>
_.times(lastColNum + 1, () => null)
);
cellData?.forEach((d) => {
// TODO setCellValue(draftCtx, d.r, d.c, expandedData, d.v);
expandedData[d.r][d.c] = d.v;
});
sheet.data = expandedData;
data = expandedData;
}
}
if (
_.isEmpty(draftCtx.luckysheet_select_save) &&
!_.isEmpty(sheet.luckysheet_select_save)
) {
draftCtx.luckysheet_select_save = sheet.luckysheet_select_save;
}
if (draftCtx.luckysheet_select_save?.length === 0) {
if (
_.isEmpty(draftCtx.luckysheet_select_save) &&
!_.isEmpty(sheet.luckysheet_select_save)
data?.[0]?.[0]?.mc &&
!_.isNil(data?.[0]?.[0]?.mc?.rs) &&
!_.isNil(data?.[0]?.[0]?.mc?.cs)
) {
draftCtx.luckysheet_select_save = sheet.luckysheet_select_save;
}
if (draftCtx.luckysheet_select_save?.length === 0) {
if (
data?.[0]?.[0]?.mc &&
!_.isNil(data?.[0]?.[0]?.mc?.rs) &&
!_.isNil(data?.[0]?.[0]?.mc?.cs)
) {
draftCtx.luckysheet_select_save = [
{
row: [0, data[0][0].mc.rs - 1],
column: [0, data[0][0].mc.cs - 1],
},
];
} else {
draftCtx.luckysheet_select_save = [
{
row: [0, 0],
column: [0, 0],
},
];
}
}
draftCtx.luckysheet_selection_range = _.isNil(
sheet.luckysheet_selection_range
)
? []
: sheet.luckysheet_selection_range;
draftCtx.config = _.isNil(sheet.config) ? {} : sheet.config;
draftCtx.zoomRatio = _.isNil(sheet.zoomRatio) ? 1 : sheet.zoomRatio;
if (!_.isNil(sheet.defaultRowHeight)) {
draftCtx.defaultrowlen = Number(sheet.defaultRowHeight);
draftCtx.luckysheet_select_save = [
{
row: [0, data[0][0].mc.rs - 1],
column: [0, data[0][0].mc.cs - 1],
},
];
} else {
draftCtx.defaultrowlen = mergedSettings.defaultRowHeight;
draftCtx.luckysheet_select_save = [
{
row: [0, 0],
column: [0, 0],
},
];
}
}
if (!_.isNil(sheet.defaultColWidth)) {
draftCtx.defaultcollen = Number(sheet.defaultColWidth);
} else {
draftCtx.defaultcollen = mergedSettings.defaultColWidth;
}
draftCtx.luckysheet_selection_range = _.isNil(
sheet.luckysheet_selection_range
)
? []
: sheet.luckysheet_selection_range;
draftCtx.config = _.isNil(sheet.config) ? {} : sheet.config;
if (!_.isNil(sheet.showGridLines)) {
const { showGridLines } = sheet;
if (showGridLines === 0 || showGridLines === false) {
draftCtx.showGridLines = false;
} else {
draftCtx.showGridLines = true;
}
draftCtx.zoomRatio = _.isNil(sheet.zoomRatio) ? 1 : sheet.zoomRatio;
if (!_.isNil(sheet.defaultRowHeight)) {
draftCtx.defaultrowlen = Number(sheet.defaultRowHeight);
} else {
draftCtx.defaultrowlen = mergedSettings.defaultRowHeight;
}
if (!_.isNil(sheet.defaultColWidth)) {
draftCtx.defaultcollen = Number(sheet.defaultColWidth);
} else {
draftCtx.defaultcollen = mergedSettings.defaultColWidth;
}
if (!_.isNil(sheet.showGridLines)) {
const { showGridLines } = sheet;
if (showGridLines === 0 || showGridLines === false) {
draftCtx.showGridLines = false;
} else {
draftCtx.showGridLines = true;
}
if (!_.isNil(mergedSettings.lang)) {
localStorage.setItem("lang", mergedSettings.lang);
}
})
);
} else {
draftCtx.showGridLines = true;
}
if (!_.isNil(mergedSettings.lang)) {
localStorage.setItem("lang", mergedSettings.lang);
}
});
}, [
mergedSettings.data,
context.currentSheetIndex,
context.luckysheetfile?.length,
context.luckysheetfile.length,
mergedSettings.defaultRowHeight,
mergedSettings.defaultColWidth,
mergedSettings.column,
@ -212,11 +211,12 @@ const Workbook: React.FC<
mergedSettings.allowEdit,
mergedSettings.limitSheetNameLength,
mergedSettings.defaultSheetNameMaxLength,
setContextWithProduce,
]);
const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
setContext(
produce((draftCtx) => {
const onKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLDivElement>) => {
setContextWithProduce((draftCtx) => {
handleGlobalKeyDown(
draftCtx,
cellInput.current!,
@ -224,17 +224,19 @@ const Workbook: React.FC<
e.nativeEvent,
globalCache.current!
);
})
);
}, []);
});
},
[setContextWithProduce]
);
const onPaste = useCallback((e: ClipboardEvent) => {
setContext(
produce((draftCtx) => {
const onPaste = useCallback(
(e: ClipboardEvent) => {
setContextWithProduce((draftCtx) => {
handlePaste(draftCtx, e);
})
);
}, []);
});
},
[setContextWithProduce]
);
useEffect(() => {
document.addEventListener("paste", onPaste);
@ -270,7 +272,9 @@ const Workbook: React.FC<
{!_.isEmpty(context.contextMenu) && (
<div
onMouseDown={() => {
setContextValue("contextMenu", undefined);
setContextWithProduce((draftCtx) => {
draftCtx.contextMenu = undefined;
});
}}
onMouseMove={(e) => e.stopPropagation()}
onMouseUp={(e) => e.stopPropagation()}

4
packages/react/src/context/index.ts
View File

@ -19,15 +19,13 @@ type RefValues = {
const WorkbookContext = React.createContext<{
context: Context;
setContext: React.Dispatch<React.SetStateAction<Context>>;
setContext: (recipe: (ctx: Context) => void) => void;
// eslint-disable-next-line
setContextValue: <K extends keyof Context>(key: K, value: Context[K]) => void;
settings: Required<Settings>;
refs: RefValues;
}>({
context: defaultContext(),
setContext: () => {},
setContextValue: () => {},
settings: defaultSettings,
refs: {
globalCache: {},

16
packages/react/tsconfig.json
View File

@ -1,16 +0,0 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDirs": ["./src", "../core/src"],
"outDir": "./lib",
"baseUrl": "./",
"paths": {
"@fortune-sheet/core": ["../core/src"]
},
"composite": true
},
"include": [
"./src"
],
"references": [{ "path": "../core" }]
}

4
stories/Workbook.stories.tsx
View File

@ -11,6 +11,7 @@ export default {
} as ComponentMeta<typeof Workbook>;
const Template: ComponentStory<typeof Workbook> = ({
// eslint-disable-next-line react/prop-types
data: data0,
...args
}) => {
@ -26,13 +27,16 @@ const Template: ComponentStory<typeof Workbook> = ({
};
export const Basic = Template.bind({});
// @ts-ignore
Basic.args = { data: [cell] };
export const Formula = Template.bind({});
// @ts-ignore
Formula.args = { data: [formula] };
export const Empty = Template.bind({});
Empty.args = { data: [empty] };
export const Tabs = Template.bind({});
// @ts-ignore
Tabs.args = { data: [cell, formula] };

1
tsconfig.json
View File

@ -19,7 +19,6 @@
"@fortune-sheet/react": ["packages/react/src"]
}
},
"references": [{ "path": "./packages/core" }, { "path": "./packages/react" }],
"include": ["packages/*/src", "stories/"],
"exclude": [
"node_modules",