@zhenliang/sheet 0.1.22 → 0.1.23

package/dist/standardUtils/index.js

@@ -0,0 +1,32 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+export var formatPrecision = function formatPrecision(value) {
+  var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (Number.isNaN(Number(value)) || value === null || value === 0) {
+    return '0';
+  }
+  var b = Math.pow(10, precision);
+  var res = Math.round(Number(value) * b) / b;
+  return res.toFixed(precision);
+};
+
+/**
+ * 千位分隔符
+ * @param value 需要千分符格式化的数据
+ * @returns 含千分符的字符串
+ */
+export var thousandsSeparator = function thousandsSeparator(value) {
+  var _String$split = String(value).split('.'),
+    _String$split2 = _slicedToArray(_String$split, 2),
+    integer = _String$split2[0],
+    decimal = _String$split2[1];
+  var formattedData = integer === null || integer === void 0 ? void 0 : integer.replace(/(\d{1,3})(?=(\d{3})+$)/g, '$1,');
+  if (decimal && decimal.length) {
+    formattedData += ".".concat(decimal);
+  }
+  return formattedData;
+};

package/dist/type/index.d.ts

@@ -0,0 +1,2 @@
+export * as SheetType from './sheet';
+export * as SheetTableType from './sheetTable';

package/dist/type/index.js

@@ -0,0 +1,4 @@
+import * as _SheetType from "./sheet";
+export { _SheetType as SheetType };
+import * as _SheetTableType from "./sheetTable";
+export { _SheetTableType as SheetTableType };

package/dist/type/sheet.d.ts

@@ -0,0 +1,205 @@
+/// <reference types="react" />
+/// <reference types="node" />
+import type { EventEmitter } from 'events';
+import { SheetTableType, SheetType } from '.';
+export declare enum CellAlign {
+    left = "left",
+    center = "center",
+    right = "right",
+    unset = "unset"
+}
+export declare type Cell = {
+    id: string;
+    key?: string;
+    readonly?: boolean;
+    component?: CellViewer;
+    editable?: boolean;
+    colSpan?: number;
+    rowSpan?: number;
+    width?: number;
+    record?: Record<string, unknown>;
+    disableEvents?: boolean;
+    dataEditor?: CellEditor;
+    valueViewer?: CellViewer;
+    className?: string;
+    align?: CellAlign;
+    fixed?: Omit<CellAlign, 'center'>;
+    value?: string | number | null;
+};
+export declare type CellViewerProps = {
+    value: unknown;
+    record?: Record<string, unknown>;
+    row?: number;
+    col?: number;
+    cell?: Cell;
+};
+export declare type CellEditorProps = {
+    value: unknown;
+    cell?: Cell;
+    onChange: (value: unknown) => void;
+    onConfirm: (value: unknown) => void;
+} & CellViewerProps;
+export declare 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 = {
+    row: number;
+    col: number;
+};
+export declare type CellData = {
+    id: string;
+    cell: Cell;
+    row: number;
+    col: number;
+    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 = {
+    groupName: string;
+    groupStart: number;
+    groupEnd: number;
+};
+export declare type RowGroupConfig = {
+    defaultOpen?: boolean;
+    groups: RowGroup[];
+    groupOpen: boolean[];
+};
+export declare type MenuRenderProps = {
+    position?: {
+        top: number;
+        left: number;
+    };
+    cell?: CellPosition;
+    onContextMenu?: (event: any) => void;
+};
+export declare type SheetInstance = {
+    zoomTo: (row?: number) => void;
+    pushToHistory: (value: OperateHistory) => void;
+    selectRow: (row?: number) => void;
+    select: (props: {
+        start: SheetType.CellPosition;
+        end: SheetType.CellPosition;
+    }) => void;
+    popHistory: () => OperateHistory;
+};
+export declare type SheetProps = {
+    sheetInstance?: React.MutableRefObject<SheetInstance | null>;
+    sheetRenderer?: any;
+    rowRenderer?: any;
+    className?: string;
+    data: Cell[][];
+    freePaste?: boolean;
+    virtualized?: boolean;
+    showBackEdit?: boolean;
+    backEditStyle?: Partial<CSSStyleDeclaration>;
+    sticky?: boolean;
+    groupConfig?: RowGroupConfig;
+    onCellsChanged?: CellChangeHandler;
+    menuRenderer?: React.FC<MenuRenderProps>;
+    onContextMenu?: (event: any) => void;
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    rowClassName?: string | ((record: Record<string, unknown>, index: number) => string);
+    children?: any[];
+};
+export declare type WidthConfig = {
+    onChange?: (value: Record<number | string, number>) => void;
+    widths?: Record<number | string, number>;
+};
+export declare type SheetShell = Pick<SheetTableType.TableProps, 'columns'> & {
+    className?: string;
+    showGroup?: boolean;
+    showSelect?: boolean;
+    controlWidth?: number;
+    controlProps?: {
+        check?: {
+            checked: boolean;
+            indeterminate?: boolean;
+        };
+        group?: {
+            open: boolean;
+        };
+    };
+};
+export declare type SheetRow = {
+    row: number;
+    cells: Cell[];
+    selected: boolean;
+    children: React.ElementType;
+};
+export declare type windowAssertion = {
+    clipboardData?: {
+        getData?: (type: string) => string;
+        setData?: (type: string, data: string) => string;
+    };
+};
+export declare 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 = {
+    row: number;
+    col: number;
+    cell: Cell;
+    cellRenderer?: React.ElementType;
+    dataEditor?: React.ElementType;
+    valueViewer?: React.ElementType;
+    attributesRenderer?: AttributesRenderer;
+};
+export declare type UpdateStateType = {
+    eventBus: EventEmitter;
+    start: CellPosition;
+    end: CellPosition;
+    selecting: boolean;
+    forceEdit: boolean;
+    clear: CellPosition;
+    editing: CellPosition & {
+        value?: string;
+    };
+    history: OperateHistory[];
+    freePaste?: boolean;
+    data: Cell[][];
+    mouseDown: boolean;
+    lastSelected?: {
+        start?: CellPosition;
+        end?: CellPosition;
+    };
+    groupConfig?: {
+        groups: RowGroup[];
+        groupOpen: boolean[];
+    };
+    lastFocus: {
+        id: string;
+        col: number;
+    }[];
+    lastEditing: CellPosition & {
+        confirm?: boolean;
+    };
+    cellChangeHandler: (cells: CellData[], additions?: CellData[]) => void;
+};
+export declare type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
+export declare type Options<T = any> = {
+    value: string | number;
+    label: string;
+} & T;
+export declare type OptionsType = Options<{
+    disabled?: boolean;
+    children?: OptionsType[];
+}>;
+export declare type OperateHistory = {
+    changes: Partial<CellData>[];
+    type: OperateType;
+    rowInfo?: {
+        newRow?: number;
+        deleteRow?: number;
+    };
+    extraInfo?: Record<string, unknown>;
+};
+export declare type OperateType = 'Edit' | 'Paste' | 'Delete' | 'DeleteRow' | 'NewRow' | 'Custom';

package/dist/type/sheet.js

@@ -0,0 +1,9 @@
+export var CellAlign = /*#__PURE__*/function (CellAlign) {
+  CellAlign["left"] = "left";
+  CellAlign["center"] = "center";
+  CellAlign["right"] = "right";
+  CellAlign["unset"] = "unset";
+  return CellAlign;
+}({});
+
+// todo

package/dist/type/sheetTable.d.ts

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { SheetType } from '.';
+export declare 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 = {
+    /**
+     * @description 对齐
+     * @default "left"
+     */
+    align?: SheetType.CellAlign;
+    /**
+     * @description 固定
+     * @default "undefined"
+     */
+    fixed?: Omit<CellFixed, 'center'>;
+    /**
+     * @description 列宽
+     * @default "undefined"
+     */
+    width?: string | number;
+    dataIndex?: string;
+    title: string | ReactNode | ReactNode[] | React.FC;
+    titleConfig?: {
+        colSpan?: number;
+        className?: string;
+    };
+    cellConfig?: {
+        className?: string | RecordRowMap<string>;
+    };
+    key?: string;
+    editable?: boolean | RecordRowMap<boolean>;
+    readonly?: boolean | RecordRowMap<boolean>;
+    render?: SheetType.CellViewer;
+    editor?: SheetType.CellEditor;
+};
+export declare type TableChange = {
+    col?: number;
+    row: number;
+    id: string;
+    key: string;
+    value: unknown;
+};
+export declare type TableRowSelection = {
+    rowSelected?: string[];
+    onChange?: (selectedRowKeys: string[], selectedRows: Record<string, unknown>[]) => void;
+};
+export declare type TableGroupConfig = {
+    defaultOpen?: boolean;
+    rowGroup?: SheetType.RowGroupConfig;
+    onChange?: (value: SheetType.RowGroupConfig) => void;
+};
+export declare type EventHandler = (value: any) => void;
+export declare type TableProps = {
+    /**
+     * @description 表格类名
+     * @default "undefined"
+     */
+    className?: string;
+    /**
+     * @description sheet的一些定义方法可执行
+     * @default "object"
+     */
+    sheetInstance?: React.MutableRefObject<SheetType.SheetInstance | null>;
+    columns: ColumnProps[];
+    virtualized?: boolean;
+    dataSource: Record<string, unknown>[];
+    rowClassName?: string | ((record: Record<string, unknown>, index: number) => string);
+    rowKey?: string | ((record: Record<string, unknown>, index: number) => string);
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    sticky?: boolean;
+    draggable?: boolean;
+    freePaste?: boolean;
+    showBackEdit?: boolean;
+    backEditStyle?: Partial<CSSStyleDeclaration>;
+    rowSelection?: TableRowSelection;
+    groupConfig?: TableGroupConfig;
+    menuRenderer?: React.FC<SheetType.MenuRenderProps>;
+    onContextMenu?: (event: any) => void;
+    onChange: (changes: TableChange[], extChanges?: TableChange[]) => void;
+    handleAdd?: () => void;
+    eventHandler?: Record<'reverse' | 'btn-click' | 'cell-edit' | 'cell-switch' | string, undefined | EventHandler>;
+};

package/dist/type/sheetTable.js

@@ -0,0 +1 @@
+export {};

package/dist/typings/index.d.ts

@@ -0,0 +1 @@
+declare module '*.less';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",

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