@zhenliang/sheet 0.1.72-beta.7 → 0.1.74

package/dist/type/sheet.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { EventEmitter } from 'events';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { SheetTableType, SheetType } from '.';
 export declare enum CellAlign {
     left = "left",
@@ -8,7 +8,7 @@ export declare enum CellAlign {
     right = "right",
     unset = "unset"
 }
-export declare type Cell = {
+export type Cell = {
     id: string;
     row?: number;
     col?: number;
@@ -31,37 +31,37 @@ export declare type Cell = {
     value?: string | number | null;
     allowClear?: boolean;
 };
-export declare type FixedInfo = {
+export type FixedInfo = {
     isFirstFixedRight: boolean;
     isLastFixedLeft: boolean;
     fixPosition: number;
     isScrolledOver?: boolean;
     isScrolledToEnd?: boolean;
 };
-export declare type CellViewerProps = {
+export type CellViewerProps = {
     value: unknown;
     record?: Record<string, unknown>;
     row?: number;
     col?: number;
     cell?: Cell;
 };
-export declare type CellEditorProps = {
+export type CellEditorProps = {
     value: unknown;
     cell?: Cell;
     onChange: (value: unknown) => void;
     onConfirm: (value: unknown) => void;
 } & CellViewerProps;
-export declare type CellEditor = React.FC<CellEditorProps> & {
+export type CellEditor = React.FC<CellEditorProps> & {
     checker?: (value: unknown, record?: Record<string, unknown>) => boolean;
     formatter?: (value: unknown, record?: Record<string, unknown>) => unknown;
     parser?: (value: unknown, record?: Record<string, unknown>) => unknown;
 };
-export declare type CellViewer = React.FC<CellViewerProps>;
-export declare type CellPosition = {
+export type CellViewer = React.FC<CellViewerProps>;
+export type CellPosition = {
     row: number;
     col: number;
 };
-export declare type CellData = {
+export type CellData = {
     id: string;
     cell: Cell;
     row: number;
@@ -69,31 +69,33 @@ export declare type CellData = {
     key?: string;
     value?: string;
 };
-export declare type CellNavigable = (cell?: Cell, row?: number, col?: number) => boolean;
-export declare type CellChangeHandler = (cells: CellData[], additions?: CellData[]) => void;
-export declare type RowGroup = {
+export type CellNavigable = (cell?: Cell, row?: number, col?: number) => boolean;
+export type CellChangeHandler = (cells: CellData[], additions?: CellData[]) => void;
+export type RowGroup = {
     groupName: string;
     groupStart: number;
     groupEnd: number;
 };
-export declare type RowGroupConfig = {
+export type RowGroupConfig = {
     defaultOpen?: boolean;
     groups: RowGroup[];
     groupOpen: boolean[];
 };
-export declare type GroupMap = Map<number, SheetType.RowGroup & {
+export type GroupMap = Map<number, SheetType.RowGroup & {
     isStart: boolean;
     isOpen: boolean;
 }>;
-export declare type MenuRenderProps = {
+export type MenuRenderProps = {
     position?: {
         top: number;
         left: number;
     };
     cell?: CellPosition;
     onContextMenu?: (event: any) => void;
+    children?: ReactNode | ReactNode[];
+    target?: any;
 };
-export declare type SheetInstance = {
+export type SheetInstance = {
     zoomTo: (row?: number) => void;
     goTo: (row: number, col: number) => void;
     pushToHistory: (value: OperateHistory) => void;
@@ -104,8 +106,9 @@ export declare type SheetInstance = {
     }) => void;
     popHistory: () => OperateHistory;
     dropHistory: () => OperateHistory[];
+    call: (caller: (...args: any) => void, ...args: any) => void;
 };
-export declare type SheetProps = {
+export type SheetProps = {
     sheetInstance?: React.MutableRefObject<SheetInstance | null>;
     sheetRenderer?: any;
     rowRenderer?: any;
@@ -118,7 +121,9 @@ export declare type SheetProps = {
     backEditStyle?: Partial<CSSProperties>;
     searchStyle?: Partial<CSSProperties>;
     sticky?: boolean;
+    freeze?: boolean;
     groupConfig?: RowGroupConfig;
+    remarkElement?: ReactNode;
     onCellsChanged?: CellChangeHandler;
     menuRenderer?: React.FC<MenuRenderProps>;
     onContextMenu?: (event: any) => void;
@@ -132,20 +137,22 @@ export declare type SheetProps = {
     boldScroll?: boolean;
     hideColBar?: boolean;
     showQuickLocationBtn?: boolean;
+    showRemark?: boolean;
     ControlContainer?: React.FC;
 };
-export declare type WidthConfigContext = {
+export type WidthConfigContext = {
     onChange?: (value: Record<number | string, number>) => void;
     widths?: Record<number | string, number>;
 };
-export declare type GroupConfigContext = {
+export type GroupConfigContext = {
     onChange?: (value: RowGroupConfig) => void;
     config?: RowGroupConfig & {
         configMap: GroupMap;
     };
 };
-export declare type SheetShell = Pick<SheetTableType.TableProps, 'columns'> & {
+export type SheetShell = Pick<SheetTableType.TableProps, 'columns'> & {
     className?: string;
+    dragable?: boolean;
     showGroup?: boolean;
     showSelect?: boolean;
     controlWidth?: number;
@@ -159,24 +166,24 @@ export declare type SheetShell = Pick<SheetTableType.TableProps, 'columns'> & {
         };
     };
 };
-export declare type SheetRow = {
+export type SheetRow = {
     row: number;
     cells: Cell[];
     selected: boolean;
     children: React.ElementType;
 };
-export declare type windowAssertion = {
+export type windowAssertion = {
     clipboardData?: {
         getData?: (type: string) => string;
         setData?: (type: string, data: string) => string;
     };
 };
-export declare type refAssertion = {
+export type refAssertion = {
     contains?: (target: EventTarget | null) => boolean;
     focus?: () => boolean;
 } & HTMLSpanElement;
-export declare type AttributesRenderer = (cell: Cell, row: number, col: number) => Record<string, string>;
-export declare type CellProps = {
+export type AttributesRenderer = (cell: Cell, row: number, col: number) => Record<string, string>;
+export type CellProps = {
     row: number;
     col: number;
     cell: Cell;
@@ -186,7 +193,7 @@ export declare type CellProps = {
     attributesRenderer?: AttributesRenderer;
     cellFixedInfo: SheetType.FixedInfo;
 };
-export declare type SearchState = {
+export type SearchState = {
     showSearch: boolean;
     searchText: string;
     searchTotal: number;
@@ -194,7 +201,7 @@ export declare type SearchState = {
     searchResultList?: CellPosition[];
     searchCalledCount: number;
 };
-export declare type UpdateStateType = {
+export type UpdateStateType = {
     eventBus: EventEmitter;
     start: CellPosition;
     end: CellPosition;
@@ -210,6 +217,7 @@ export declare type UpdateStateType = {
     data: Cell[][];
     mouseDown: boolean;
     isIndex: boolean;
+    freeze: boolean;
     lastSelected?: {
         start?: CellPosition;
         end?: CellPosition;
@@ -228,16 +236,16 @@ export declare type UpdateStateType = {
     cellChangeHandler: (cells: CellData[], additions?: CellData[]) => void;
     fixedInfo: SheetType.FixedInfo[];
 } & SearchState;
-export declare type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
-export declare type Options<T = any> = {
+export type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
+export type Options<T = any> = {
     value: string | number;
     label: string;
 } & T;
-export declare type OptionsType = Options<{
+export type OptionsType = Options<{
     disabled?: boolean;
     children?: OptionsType[];
 }>;
-export declare type OperateHistory = {
+export type OperateHistory = {
     changes: Partial<CellData>[];
     type: OperateType;
     rowInfo?: {
@@ -246,4 +254,4 @@ export declare type OperateHistory = {
     };
     extraInfo?: Record<string, unknown>;
 };
-export declare type OperateType = 'Edit' | 'Paste' | 'Delete' | 'DeleteRow' | 'NewRow' | 'Custom';
+export type OperateType = 'Edit' | 'Paste' | 'Delete' | 'DeleteRow' | 'NewRow' | 'Custom';

package/dist/type/sheetTable.d.ts

@@ -1,12 +1,12 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SheetType } from '.';
-export declare type refAssertion = {
+export type refAssertion = {
     contains?: (target: EventTarget | null) => boolean;
     focus?: () => boolean;
 } & HTMLTableSectionElement;
-export declare type CellFixed = SheetType.CellAlign;
-export declare type RecordRowMap<T> = (value: unknown, record: Record<string, unknown>, index: number, colIndex?: number) => T;
-export declare type ColumnProps = {
+export type CellFixed = SheetType.CellAlign;
+export type RecordRowMap<T> = (value: unknown, record: Record<string, unknown>, index: number, colIndex?: number) => T;
+export type ColumnProps = {
     /**
      * @description 对齐
      * @default "left"
@@ -23,7 +23,7 @@ export declare type ColumnProps = {
      */
     width?: string | number;
     dataIndex?: string;
-    title: string | ReactNode | ReactNode[] | React.FC;
+    title: string | ReactNode;
     titleConfig?: {
         colSpan?: number;
         className?: string;
@@ -39,24 +39,33 @@ export declare type ColumnProps = {
     editor?: SheetType.CellEditor;
     searchKey?: (value: unknown, record: Record<string, unknown>) => string;
 };
-export declare type TableChange = {
+export type TableChange = {
     col?: number;
     row: number;
     id: string;
     key: string;
     value: unknown;
 };
-export declare type TableRowSelection = {
+export type TableRowSelection = {
     rowSelected?: string[];
     onChange?: (selectedRowKeys: string[], selectedRows: Record<string, unknown>[]) => void;
 };
-export declare type TableGroupConfig = {
+export type TableGroupConfig = {
     defaultOpen?: boolean;
     rowGroup?: SheetType.RowGroupConfig;
     onChange?: (value: SheetType.RowGroupConfig) => void;
 };
-export declare type EventHandler = (value: any) => void;
-export declare type TableProps = {
+export type EventHandler = (value: any) => void;
+export type RemarkProps = {
+    cell: SheetType.CellPosition;
+    columnKey: string;
+    id?: string | number;
+    close: () => void;
+};
+export type TableInstance = {
+    goToByTable?: (id: number, columnKey: string) => void;
+} & SheetType.SheetInstance;
+export type TableProps = {
     /**
      * @description 表格类名
      * @default "undefined"
@@ -66,7 +75,7 @@ export declare type TableProps = {
      * @description sheet的一些定义方法可执行
      * @default "object"
      */
-    sheetInstance?: React.MutableRefObject<SheetType.SheetInstance | null>;
+    sheetInstance?: React.MutableRefObject<SheetType.SheetInstance & TableInstance | null>;
     columns: ColumnProps[];
     virtualized?: boolean;
     dataSource: Record<string, unknown>[];
@@ -80,7 +89,11 @@ export declare type TableProps = {
     sticky?: boolean;
     draggable?: boolean;
     freePaste?: boolean;
+    freeze?: boolean;
     showBackEdit?: boolean;
+    showRemark?: boolean;
+    remarkRender?: React.FC<RemarkProps>;
+    handleAddRemark?: (value: RemarkProps) => void;
     backEditStyle?: Partial<CSSProperties>;
     searchStyle?: Partial<CSSProperties>;
     rowSelection?: TableRowSelection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.72-beta.7",
+  "version": "0.1.74",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -43,12 +43,17 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "resolutions": {
+    "@types/react": "17.0.40"
+  },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "antd": "^4.24.0",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "react": "17.x",
+    "react-dom": "17.x",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2"
   },
@@ -56,8 +61,8 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@types/lodash": "^4.14.195",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "17.0.40",
+    "@types/react-dom": "17.0.13",
     "@umijs/lint": "^4.0.0",
     "dumi": "^2.2.0",
     "eslint": "^8.23.0",

package/changes.md

@@ -1,45 +0,0 @@
-### 为什么要重写
-
-#### 存在问题
-
-1、表格选择逻辑与虚拟列表的冲突
-2、表格的刷新机制： setRefresh（在多人开发的时候不便维护）
-3、回调地狱
-4、无法从 jll-portal 中剥离，有些地方与业务字段耦合
-
-#### 后果
-
-1、新增功能难度大
-2、修改容易出 bug
-3、不利于业务代码优化和重构
-
-### 重写后的表格
-
-#### 优点
-
-1、维护性
-2、扩展性
-3、新的功能
-
-#### 新的 API
-
-1、TableProps
-
-| 表头                                         | 表头                    | 表头 |
-| -------------------------------------------- | ----------------------- | ---- |
-| className                                    | container 类名 ｜ 无 ｜ |
-| ｜ sheetInstance ｜ sheet 对外暴露的一些 API | 选中行，参与回滚等 ｜   |
-
-｜ columns ｜ 表格列 ｜ 无 ，必填 ｜
-| dataSource | 数据源 ｜ 无，必填 ｜
-｜ virtualized ｜虚拟列表 ｜ false |
-| draggable | 列宽可调整 ｜ false |
-｜ rowClassName ｜ 行类名 ｜ 无 ｜
-｜ rowKey ｜ 唯一标识字段 ｜ key , id |
-| scroll | 同 antd table | {y:Math.min(400,row \* 40)} |
-| rowSelection | 选中行的配置 ｜ 尚未完全实现 ｜
-｜ groupConfig ｜ 表格分组 ｜ 表格内部自动支持，对外配置尚未完全实现 ｜
-| onChange ｜ 表格 cell change handler ｜ 无 ｜
-| eventHandler | 自定义事件 handler | Record<string,(value:unknown)=>void> |
-
-2、 ColumnProps