es-grid-template 1.9.59 → 1.9.60

package/es/ali-table/base-table/table.js

@@ -11,21 +11,18 @@ import { TableDOMHelper } from "./helpers/TableDOMUtils";
 import { HtmlTable } from "./html-table";
 import Loading from "./loading";
 import { Classes, LOCK_SHADOW_PADDING, StyledArtTableWrapper } from "./styles";
-import {
-// getScrollbarSize, // scroll mặc định thì bật lên
-OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$ } from "./utils";
+import { getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$ } from "./utils";
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 let emptyContentDeprecatedWarned = false;
 function warnEmptyContentIsDeprecated() {
   if (!emptyContentDeprecatedWarned) {
     emptyContentDeprecatedWarned = true;
-    console.warn('[ali-react-table] `BaseTable` props.emptyContent is deprecated. Please use `props.components.EmptyContent` to customize the table display when there is no data.');
+    console.warn('[ali-react-table] BaseTable props.emptyContent 已经过时，请使用 props.components.EmptyContent 来自定义数据为空时的表格表现');
   }
 }
 export class BaseTable extends React.Component {
   static defaultProps = {
     showHeader: true,
-    // theme: undefined,
     isStickyHeader: true,
     stickyTop: 0,
     footerDataSource: [],
@@ -38,8 +35,7 @@ export class BaseTable extends React.Component {
     isLoading: false,
     components: {},
     getRowProps: noop,
-    dataSource: [],
-    originData: []
+    dataSource: []
   };
   // @ts-ignore
   rowHeightManager = makeRowHeightManager(this.props.dataSource.length, this.props.estimatedRowHeight);
@@ -54,7 +50,7 @@ export class BaseTable extends React.Component {
   // @ts-ignore
   props$;
 
-  /** @deprecated `BaseTable.getDoms()` is deprecated. Please do not call it. */
+  /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
   getDoms() {
     console.warn('[ali-react-table] BaseTable.getDoms() 已经过时');
     return this.domHelper;
@@ -74,7 +70,7 @@ export class BaseTable extends React.Component {
     };
   }
 
-  /** Customize the scrollbar width to match the table width, ensuring the scrollbar thumb has the same width */
+  /** 自定义滚动条宽度为table宽度，使滚动条滑块宽度相同 */
   updateStickyScroll() {
     const {
       stickyScroll,
@@ -88,11 +84,7 @@ export class BaseTable extends React.Component {
     const innerTableWidth = tableBodyHtmlTable.offsetWidth;
     const artTableWidth = artTable.offsetWidth;
     const stickyScrollHeightProp = this.props.stickyScrollHeight;
-
-    // scroll mặc định thì bật lên
-    // const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? getScrollbarSize().height : stickyScrollHeightProp
-    const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? 8 : stickyScrollHeightProp; // height customscrll bar = 8
-
+    const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? getScrollbarSize().height : stickyScrollHeightProp;
     stickyScroll.style.marginTop = `-${(stickyScrollHeight ?? 0) + 1}px`;
     if (artTableWidth >= innerTableWidth) {
       if (this.state.hasScroll) {
@@ -185,7 +177,6 @@ export class BaseTable extends React.Component {
   renderTableBody(info) {
     const {
       dataSource,
-      originData = [],
       getRowProps,
       primaryKey,
       isLoading,
@@ -195,7 +186,8 @@ export class BaseTable extends React.Component {
       id,
       commandClick,
       format,
-      dataRowIds
+      dataRowIds,
+      originData
     } = this.props;
     const tableBodyClassName = cx(Classes.tableBody, Classes.horizontalScrollContainer, {
       'no-scrollbar': footerDataSource && footerDataSource.length > 0
@@ -237,25 +229,22 @@ export class BaseTable extends React.Component {
       items: dataRowIds ?? [],
       strategy: verticalListSortingStrategy
     }, /*#__PURE__*/React.createElement(HtmlTable, {
-      id: id ?? '',
-      commandClick: commandClick,
       components: components,
       tbodyHtmlTag: "tbody",
-      getRowProps: getRowProps
-
-      // -----------------
-      ,
+      getRowProps: getRowProps,
       primaryKey: primaryKey,
       data: dataSource.slice(topIndex, bottomIndex),
-      originData: originData,
-      format: format,
       horizontalRenderInfo: info,
       verticalRenderInfo: {
         first: 0,
         offset: topIndex,
         limit: bottomIndex,
         last: dataSource.length - 1
-      }
+      },
+      id: id ?? '',
+      commandClick: commandClick,
+      originData: originData ?? [],
+      format: format
     })), bottomBlank > 0 && /*#__PURE__*/React.createElement("div", {
       key: "bottom-blank",
       className: cx(Classes.virtualBlank, 'bottom'),
@@ -272,6 +261,7 @@ export class BaseTable extends React.Component {
       stickyBottom,
       components,
       id,
+      originData,
       format
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
@@ -280,14 +270,9 @@ export class BaseTable extends React.Component {
         bottom: stickyBottom === 0 ? undefined : stickyBottom
       }
     }, /*#__PURE__*/React.createElement(HtmlTable, {
-      id: id ?? ''
-      // commandClick={commandClick}
-      ,
       components: components,
       tbodyHtmlTag: "tfoot",
       data: footerDataSource,
-      originData: [],
-      format: format,
       horizontalRenderInfo: info,
       getRowProps: getRowProps,
       primaryKey: primaryKey,
@@ -296,7 +281,11 @@ export class BaseTable extends React.Component {
         first: 0,
         last: footerDataSource.length - 1,
         limit: Infinity
-      }
+      },
+      id: id ?? '',
+      commandClick: undefined,
+      originData: originData ?? [],
+      format: format
     }));
   }
   renderLockShadows(info) {
@@ -318,7 +307,6 @@ export class BaseTable extends React.Component {
       className: cx(Classes.lockShadow, Classes.rightLockShadow)
     })));
   }
-
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   renderStickyScroll(info) {
     const {
@@ -332,8 +320,7 @@ export class BaseTable extends React.Component {
       className: cx(Classes.stickyScroll, Classes.horizontalScrollContainer),
       style: {
         display: hasStickyScroll && hasScroll ? 'block' : 'none',
-        bottom: stickyBottom,
-        marginTop: 0
+        bottom: stickyBottom
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: Classes.stickyScrollItem
@@ -343,12 +330,13 @@ export class BaseTable extends React.Component {
     const info = calculateRenderInfo(this);
     this.lastInfo = info;
     const {
+      theme,
       dataSource,
       className,
       style,
       showHeader,
-      theme,
       useOuterBorder,
+      // isStickyHead,
       isStickyHeader,
       isStickyFooter,
       isLoading,
@@ -399,15 +387,6 @@ export class BaseTable extends React.Component {
     this.adjustNeedRenderLock();
     this.updateRowHeightManager();
     this.updateScrollLeftWhenLayoutChanged(prevProps, prevState);
-    this.updateVerticalScrollClass();
-  }
-  updateVerticalScrollClass() {
-    const wrapper = this.domHelper?.artTableWrapper;
-    if (!wrapper) {
-      return;
-    }
-    const hasVerticalScroll = wrapper.scrollHeight > wrapper.clientHeight + 1;
-    wrapper.classList.toggle('has-vertical-scroll', hasVerticalScroll);
   }
   updateScrollLeftWhenLayoutChanged(prevProps, prevState) {
     if (prevState != null) {
@@ -433,7 +412,6 @@ export class BaseTable extends React.Component {
     this.rootSubscription.add(throttledWindowResize$.subscribe(() => {
       this.updateStickyScroll();
       this.adjustNeedRenderLock();
-      this.updateVerticalScrollClass();
     }));
 
     // Scroll synchronization

package/es/ali-table/base-table/utils.d.ts

@@ -1,19 +1,16 @@
 import { Subscription } from 'rxjs';
-/** Version of the `styled-components` library. ali-react-table supports both v3 and v5. */
+/** styled-components 类库的版本，ali-react-table 同时支持 v3 和 v5 */
 export declare const STYLED_VERSION: string;
 export declare const STYLED_REF_PROP: string;
-export declare const OVERSCAN_SIZE = 300;
-export declare const AUTO_VIRTUAL_THRESHOLD = 300;
+export declare const OVERSCAN_SIZE = 100;
+export declare const AUTO_VIRTUAL_THRESHOLD = 100;
 export declare function sum(arr: number[]): number;
 export declare const throttledWindowResize$: import("rxjs").Observable<Event>;
 export declare function getScrollbarSize(): {
     width: number;
     height: number;
 };
-/**
- * Synchronize the `scrollLeft` value among multiple elements.
- * The callback will be invoked whenever `scrollLeft` changes.
- */
+/** 同步多个元素之间的 scrollLeft, 每当 scrollLeft 发生变化时 callback 会被调用 */
 export declare function syncScrollLeft(elements: HTMLElement[], callback: (scrollLeft: number) => void): Subscription;
 /**
  * Performs equality by iterating through keys on an object and returning false

package/es/ali-table/base-table/utils.js

@@ -2,11 +2,11 @@ import { asyncScheduler, BehaviorSubject, defer, fromEvent, Subscription } from
 import { map, throttleTime } from 'rxjs/operators';
 import * as styledComponents from 'styled-components';
 
-/** Version of the `styled-components` library. ali-react-table supports both v3 and v5. */
+/** styled-components 类库的版本，ali-react-table 同时支持 v3 和 v5 */
 export const STYLED_VERSION = styledComponents.createGlobalStyle != null ? 'v5' : 'v3';
 export const STYLED_REF_PROP = STYLED_VERSION === 'v3' ? 'innerRef' : 'ref';
-export const OVERSCAN_SIZE = 300;
-export const AUTO_VIRTUAL_THRESHOLD = 300;
+export const OVERSCAN_SIZE = 100;
+export const AUTO_VIRTUAL_THRESHOLD = 100;
 export function sum(arr) {
   let result = 0;
   arr.forEach(x => {
@@ -23,7 +23,7 @@ export const throttledWindowResize$ = defer(() => fromEvent(window, 'resize', {
   trailing: true
 })));
 
-/** Get the default scrollbar size */
+/** 获取默认的滚动条大小 */
 function getScrollbarSizeImpl() {
   const scrollDiv = document.createElement('div');
   scrollDiv.style.position = 'absolute';
@@ -49,10 +49,7 @@ export function getScrollbarSize() {
   return scrollBarSize$.value;
 }
 
-/**
- * Synchronize the `scrollLeft` value among multiple elements.
- * The callback will be invoked whenever `scrollLeft` changes.
- */
+/** 同步多个元素之间的 scrollLeft, 每当 scrollLeft 发生变化时 callback 会被调用 */
 export function syncScrollLeft(elements, callback) {
   const bypassSet = new Set();
   function publishScrollLeft(origin, scrollLeft) {

package/es/ali-table/interfaces.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import type React from 'react';
-import type { ColumnTemplate, CommandItem, FilterOperator, IColumnType, IFormat, ITextAlign, TypeFilter } from '../grid-component/type';
+import type { ColumnTemplate, CommandItem, EditType, FilterOperator, IColumnType, IFormat, ITextAlign, TypeFilter } from '../grid-component/type';
 export type CellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
 export type FilterState = {
     field: any;
@@ -9,11 +9,12 @@ export type FilterState = {
     filteredKeys: any[];
     operator: string | undefined;
 };
-export interface ArtColumnStaticPart {
+export interface ArtColumnStaticPart<RecordType = any> {
     /** Column name */
     headerText?: string;
     /** Field in the data */
     field: string;
+    targetField?: string;
     /** Display title of the column; when rendering on the page, this field overrides the `name` field */
     title?: ReactNode;
     headerTemplate?: ReactNode | ((col: any) => ReactNode);
@@ -51,14 +52,18 @@ export interface ArtColumnStaticPart {
     /** Data source dropdown options for the column */
     source?: any[];
     /** Format configuration or formatter function */
-    format?: IFormat | ((rowData: any) => IFormat);
+    format?: IFormat | ((rowData: RecordType) => IFormat);
     /** Alignment of the text or content inside the cell */
     textAlign?: ITextAlign;
     headerTextAlign?: ITextAlign;
-    onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, column: any) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     commandItems?: CommandItem[];
-    tooltipDescription?: string | ((rowData: any) => string | ReactNode);
+    tooltipDescription?: string | ((rowData: RecordType) => string | ReactNode);
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
+    editType?: EditType | ((rowData?: RecordType) => EditType);
+    /** Cho phép header edit */
+    headerEditEnable?: boolean;
+    /** Kiểu editor khi edit cell */
+    headerEditType?: EditType;
 }
 export interface ArtColumnDynamicPart<RecordType = any> {
     /** Custom data retrieval method */

package/es/ali-table/pipeline/features/columnCustom.d.ts

@@ -56,6 +56,21 @@ export interface ColumnFeatureOptions {
     wrapSettings?: IWrapSettings;
     currentPage?: number;
     pageSize?: number;
+    editAble?: boolean;
+    rowEditable?: (rowData: any) => boolean;
+    setValue?: any;
+    reset?: any;
+    getValues?: any;
+    control?: any;
+    errors?: any;
+    handleDeleteContent?: () => void;
+    tableRef: any;
+    triggerPaste?: (pastedRows: any[], pastedColumnsArray: string[], newData: any[], copyRows: any[]) => void;
+    handleSubmit: any;
+    onSubmit: any;
+    handleCellChange: any;
+    handleHeaderCellChange?: any;
+    dataErrors?: any[];
 }
 export declare function columnCustom(opts: ColumnFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};