From 9fe2294bb41a9b01095ce55a3006d8743ee4a832 Mon Sep 17 00:00:00 2001 From: Sanchit Agarwal Date: Mon, 23 Sep 2024 09:08:54 +0000 Subject: [PATCH] feat: api for hide/show rows and cols --- packages/core/src/api/rowcol.ts | 117 ++++++++++++++++++ packages/react/src/components/Workbook/api.ts | 10 ++ stories/API.stories.tsx | 67 ++++++++++ 3 files changed, 194 insertions(+) diff --git a/packages/core/src/api/rowcol.ts b/packages/core/src/api/rowcol.ts index 81512e4..f094437 100644 --- a/packages/core/src/api/rowcol.ts +++ b/packages/core/src/api/rowcol.ts @@ -3,6 +3,7 @@ import { Context } from "../context"; import { deleteRowCol, insertRowCol } from "../modules"; import { CommonOptions, getSheet } from "./common"; import { INVALID_PARAMS } from "./errors"; +import { getSheetIndex } from "../utils"; export function freeze( ctx: Context, @@ -81,6 +82,122 @@ export function deleteRowOrColumn( deleteRowCol(ctx, { type, start, end, id: sheet.id! }); } +export function hideRowOrColumn( + ctx: Context, + rowColInfo: string[], + type: "row" | "column" +) { + if (!["row", "column"].includes(type)) { + throw INVALID_PARAMS; + } + + if (!ctx || !ctx.config) return; + + const index = getSheetIndex(ctx, ctx.currentSheetId) as number; + + if (type === "row") { + /* TODO: 工作表保护判断 + if ( + !checkProtectionAuthorityNormal(Store.currentSheetIndex, "formatRows") + ) { + return ; + } */ + const rowhidden = ctx.config.rowhidden ?? {}; + + rowColInfo.forEach((r) => { + rowhidden[r] = 0; + }); + + /* 保存撤销,luck中保存撤销用以下方式实现，而在本项目中不需要另外处理 + if(Store.clearjfundo){ + let redo = {}; + redo["type"] = "showHidRows"; + redo["sheetIndex"] = Store.currentSheetIndex; + redo["config"] = $.extend(true, {}, Store.config); + redo["curconfig"] = cfg; + + Store.jfundo.length = 0; + Store.jfredo.push(redo); + } */ + ctx.config.rowhidden = rowhidden; + // const rowLen = ctx.luckysheetfile[index].data!.length; + /** + * 计算要隐藏的行是否是最后一列 + * 符合最后一列的条件：要隐藏的index===表格的长度-1 或者 + * 记录隐藏数组里面的数-1===要隐藏的index + */ + } else if (type === "column") { + // 隐藏列 + const colhidden = ctx.config.colhidden ?? {}; + + rowColInfo.forEach((r) => { + colhidden[r] = 0; + }); + + ctx.config.colhidden = colhidden; + // const columnLen = ctx.luckysheetfile[index].data![0].length; + } + ctx.luckysheetfile[index].config = ctx.config; +} + +export function showRowOrColumn( + ctx: Context, + rowColInfo: string[], + type: "row" | "column" +) { + if (!["row", "column"].includes(type)) { + throw INVALID_PARAMS; + } + + if (!ctx || !ctx.config) return; + + const index = getSheetIndex(ctx, ctx.currentSheetId) as number; + + if (type === "row") { + /* TODO: 工作表保护判断 + if ( + !checkProtectionAuthorityNormal(Store.currentSheetIndex, "formatRows") + ) { + return ; + } */ + const rowhidden = ctx.config.rowhidden ?? {}; + + rowColInfo.forEach((r) => { + delete rowhidden[r]; + }); + + /* 保存撤销,luck中保存撤销用以下方式实现，而在本项目中不需要另外处理 + if(Store.clearjfundo){ + let redo = {}; + redo["type"] = "showHidRows"; + redo["sheetIndex"] = Store.currentSheetIndex; + redo["config"] = $.extend(true, {}, Store.config); + redo["curconfig"] = cfg; + + Store.jfundo.length = 0; + Store.jfredo.push(redo); + } */ + ctx.config.rowhidden = rowhidden; + // const rowLen = ctx.luckysheetfile[index].data!.length; + /** + * 计算要隐藏的行是否是最后一列 + * 符合最后一列的条件：要隐藏的index===表格的长度-1 或者 + * 记录隐藏数组里面的数-1===要隐藏的index + */ + } else if (type === "column") { + // 隐藏列 + const colhidden = ctx.config.colhidden ?? {}; + + rowColInfo.forEach((r) => { + delete colhidden[r]; + }); + + ctx.config.colhidden = colhidden; + // const columnLen = ctx.luckysheetfile[index].data![0].length; + } + ctx.luckysheetfile[index].config = ctx.config; +} + export function setRowHeight( ctx: Context, rowInfo: Record, diff --git a/packages/react/src/components/Workbook/api.ts b/packages/react/src/components/Workbook/api.ts index 498ee8d..1526c2d 100644 --- a/packages/react/src/components/Workbook/api.ts +++ b/packages/react/src/components/Workbook/api.ts @@ -170,6 +170,16 @@ export function generateAPIs( api.deleteRowOrColumn(draftCtx, type, start, end, options) ), + hideRowOrColumn: (rowOrColInfo: string[], type: "row" | "column") => + setContext((draftCtx) => + api.hideRowOrColumn(draftCtx, rowOrColInfo, type) + ), + + showRowOrColumn: (rowOrColInfo: string[], type: "row" | "column") => + setContext((draftCtx) => + api.showRowOrColumn(draftCtx, rowOrColInfo, type) + ), + setRowHeight: ( rowInfo: Record, options: api.CommonOptions = {}, diff --git a/stories/API.stories.tsx b/stories/API.stories.tsx index 8eae6c8..1d65883 100644 --- a/stories/API.stories.tsx +++ b/stories/API.stories.tsx @@ -363,6 +363,73 @@ export const SetRowHeight: StoryFn = () => { ); }; +export const HideRow: StoryFn = () => { + const ref = useRef(null); + const [data, setData] = useState([ + { + name: "Sheet1", + celldata: [ + { r: 0, c: 0, v: { v: "0" } }, + { r: 1, c: 0, v: { v: "1" } }, + { r: 2, c: 0, v: { v: "hide this!" } }, + { r: 3, c: 0, v: { v: "3" } }, + { r: 4, c: 0, v: { v: "4" } }, + ], + order: 0, + row: 5, + column: 1, + }, + ]); + const onChange = useCallback((d: Sheet[]) => { + setData(d); + }, []); + return ( + { + ref.current?.hideRowOrColumn(["2"], "row"); + }} + > + + + ); +}; + +export const ShowRow: StoryFn = () => { + const ref = useRef(null); + const [data, setData] = useState([ + { + name: "Sheet1", + celldata: [ + { r: 0, c: 0, v: { v: "0" } }, + { r: 1, c: 0, v: { v: "1" } }, + { r: 2, c: 0, v: { v: "show this" } }, + { r: 3, c: 0, v: { v: "3" } }, + { r: 4, c: 0, v: { v: "4" } }, + ], + config: { + rowhidden: { + "2": 0, + }, + }, + order: 0, + row: 5, + column: 1, + }, + ]); + const onChange = useCallback((d: Sheet[]) => { + setData(d); + }, []); + return ( + { + ref.current?.showRowOrColumn(["2"], "row"); + }} + > + + + ); +}; + export const SetColumnWidth: StoryFn = () => { const ref = useRef(null); const [data, setData] = useState([