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

frozen sheet filter handling

Browse Source
This commit is contained in:
Sanchit Agarwal 2023-08-09 20:29:59 +05:30 committed by tato
parent 6c51158a7c
commit 0da9286be9
1 changed files with 69 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/react/src/components/FilterOption/index.tsx
View File

@ -1,4 +1,9 @@
import { createFilterOptions, getSheetIndex } from "@fortune-sheet/core";
import {
createFilterOptions,
fixColumnStyleOverflowInFreeze,
fixRowStyleOverflowInFreeze,
getSheetIndex,
} from "@fortune-sheet/core";
import _ from "lodash";
import React, { useCallback, useContext, useEffect } from "react";
import WorkbookContext from "../../context";
@ -16,7 +21,7 @@ const FilterOptions: React.FC<{ getContainer: () => HTMLDivElement }> = ({
visibledatacolumn,
} = context;
const sheetIndex = getSheetIndex(context, context.currentSheetId);
const { filter_select } = context.luckysheetfile[sheetIndex!];
const { filter_select, frozen } = context.luckysheetfile[sheetIndex!];
useEffect(() => {
setContext((draftCtx) => {
@ -86,33 +91,84 @@ const FilterOptions: React.FC<{ getContainer: () => HTMLDivElement }> = ({
]
);
const frozenColumns = frozen?.range?.column_focus || -1;
const frozenRows = frozen?.range?.row_focus || -1;
return filterOptions == null ? (
<div />
) : (
<>
<div>
<div
id="luckysheet-filter-selected-sheet"
className="luckysheet-cell-selected luckysheet-filter-selected"
style={{
left: filterOptions.left,
width: filterOptions.width,
top: filterOptions.top,
height: filterOptions.height,
display: "block",
}}
style={_.assign(
{
left: filterOptions.left,
width: filterOptions.width,
top: filterOptions.top,
height: filterOptions.height,
display: "block",
},
fixRowStyleOverflowInFreeze(
context,
filterOptions.startRow,
filterOptions.endRow,
refs.globalCache.freezen?.[context.currentSheetId]
),
fixColumnStyleOverflowInFreeze(
context,
filterOptions.startCol,
filterOptions.endCol,
refs.globalCache.freezen?.[context.currentSheetId]
)
)}
/>
{filterOptions.items.map((v, i) => {
const filterParam = filter[i];
const columnOverflowFreezeStyle = fixColumnStyleOverflowInFreeze(
context,
i + filterOptions.startCol,
i + filterOptions.startCol,
refs.globalCache.freezen?.[context.currentSheetId]
);
const rowOverflowFreezeStyle = fixRowStyleOverflowInFreeze(
context,
filterOptions.startRow,
filterOptions.startRow,
refs.globalCache.freezen?.[context.currentSheetId]
);
const col = visibledatacolumn[v.col];
const col_pre = v.col > 0 ? visibledatacolumn[v.col - 1] : 0;
const left =
v.col <= frozenColumns && columnOverflowFreezeStyle.left
? columnOverflowFreezeStyle.left + col - col_pre - 20
: v.left;
const top =
filterOptions.startRow <= frozenRows && rowOverflowFreezeStyle.top
? rowOverflowFreezeStyle.top
: v.top;
const v_adjusted = { ...v, left, top };
return (
<div
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
showFilterContextMenu(v, i);
showFilterContextMenu(v_adjusted, i);
}}
onDoubleClick={(e) => e.stopPropagation()}
key={i}
style={{ left: v.left, top: v.top }}
style={_.assign(rowOverflowFreezeStyle, columnOverflowFreezeStyle, {
left,
top,
height: undefined,
width: undefined,
})}
className={`luckysheet-filter-options ${
filterParam == null ? "" : "luckysheet-filter-options-active"
}`}
@ -128,7 +184,7 @@ const FilterOptions: React.FC<{ getContainer: () => HTMLDivElement }> = ({
</div>
);
})}
</>
</div>
);
};