Merge remote-tracking branch 'origin/develop' into fix/fs-style-align

common/changes/@visactor/vtable/feat-react-component-container_2024-05-07-09-28.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add CustomComponent in react-vtable",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

common/changes/@visactor/vtable/fix-custom-merge-size_2024-05-06-12-17.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix custom merge cell size update #1636",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

common/changes/@visactor/vtable/fix-selecting-cell_2024-05-06-12-55.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: add selecting cell range deduplication #1628",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

docs/assets/api/en/methods.md

@@ -1093,12 +1093,26 @@ get all columns width
 getAllColsWidth: () => number;
 ```
 
+## setSortedIndexMap(Function)
+
+Set up a pre-sort index to improve initial sorting performance in scenarios where large amounts of data are sorted.
+
+```
+setSortedIndexMap: (field: FieldDef, filedMap: ISortedMapItem) => void;
+
+interface ISortedMapItem {
+  asc?: (number | number[])[];
+  desc?: (number | number[])[];
+  normal?: (number | number[])[];
+}
+```
+
 ## getHeaderField(Function)
 
 In **ListTable** can get header's field.
 In **PivotTable** get indicatorKey.
 
 ```
-  /**获取对应header的field  */
+  /**get field of header  */
   getHeaderField: (col: number, row: number)
 ```

docs/assets/api/zh/methods.md

@@ -1091,6 +1091,20 @@ getAllRowsHeight: () => number;
 getAllColsWidth: () => number;
 ```
 
+## setSortedIndexMap(Function)
+
+设置预排序索引，用在大数据量排序的场景下，提升初次排序性能
+
+```
+setSortedIndexMap: (field: FieldDef, filedMap: ISortedMapItem) => void;
+
+interface ISortedMapItem {
+  asc?: (number | number[])[];
+  desc?: (number | number[])[];
+  normal?: (number | number[])[];
+}
+```
+
 ## getHeaderField(Function)
 
 **ListTable**中表示获取对应 header 的 field。

docs/assets/demo-openinula/en/event/event.md

@@ -17,7 +17,7 @@ The events supported by VTable can be monitored through openinula props. For det
 // import * as InulaVTable from '@visactor/openinula-vtable';
 
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-openinula/en/event/ready.md

@@ -17,7 +17,7 @@ The onReady callback is triggered after the table completes initialization or up
 // import * as InulaVTable from '@visactor/openinula-vtable';
 
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-openinula/en/usage/option-record.md

@@ -15,7 +15,7 @@ Records can be separated from options and passed into the table component as a s
 ```javascript livedemo template=vtable-openinula
 // import * as InulaVTable from '@visactor/openinula-vtable';
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-openinula/en/usage/option.md

@@ -15,7 +15,7 @@ You can use the complete option of VTable directly and pass the option into the
 ```javascript livedemo template=vtable-openinula
 // import * as InulaVTable from '@visactor/openinula-vtable';
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-openinula/zh/event/event.md

@@ -17,7 +17,7 @@ VTable支持的事件都可以通过openinula的props传入进行监听，具体
 // import * as InulaVTable from '@visactor/openinula-vtable';
 
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-openinula/zh/event/ready.md

@@ -17,7 +17,7 @@ onReady回调再表格完成初始化或更新后触发，可以获取表格实
 // import * as InulaVTable from '@visactor/openinula-vtable';
 
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-openinula/zh/usage/option-record.md

@@ -15,7 +15,7 @@ link: '../guide/Developer_Ecology/openinula'
 ```javascript livedemo template=vtable-openinula
 // import * as InulaVTable from '@visactor/openinula-vtable';
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-openinula/zh/usage/option.md

@@ -15,7 +15,7 @@ link: '../guide/Developer_Ecology/openinula'
 ```javascript livedemo template=vtable-openinula
 // import * as InulaVTable from '@visactor/openinula-vtable';
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-react/en/component/custom-component.md

@@ -0,0 +1,142 @@
+---
+category: examples
+group: component
+title: Custom Component
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/custom-component.png
+order: 1-1
+link: '../guide/Developer_Ecology/react'
+---
+
+# Custom Component
+
+The `CustomComponent` component facilitates overlaying external components on React-VTable components.
+
+## Code Example
+```javascript livedemo template=vtable-react
+// import * as ReactVTable from '@visactor/react-vtable';
+
+const { useCallback, useRef, useState } = React;
+const { ListTable, CustomComponent } = ReactVTable;
+const { Popconfirm, Message, Button } = ArcoDesign;
+
+function Tooltip(props) {
+  return (
+    <div style={{ width: '100%', height: '100%', border: '1px solid #333', backgroundColor: '#ccc', fontSize: 10 }}>
+      {`${props.value}(click to show more)`}
+    </div>
+  );
+}
+
+function App() {
+  const [hoverCol, setHoverCol] = useState(-1);
+  const [hoverRow, setHoverRow] = useState(-1);
+  const [clickCol, setClickCol] = useState(-1);
+  const [clickRow, setClickRow] = useState(-1);
+  const [value, setValue] = useState('');
+  const visible = useRef(false);
+  const tableInstance = useRef(null);
+
+  const option = {
+    columns: [
+      {
+        field: '0',
+        caption: 'name'
+      },
+      {
+        field: '1',
+        caption: 'age'
+      },
+      {
+        field: '2',
+        caption: 'gender'
+      },
+      {
+        field: '3',
+        caption: 'hobby'
+      }
+    ],
+    records: new Array(1000).fill(['John', 18, 'male', '🏀'])
+  };
+
+  const updateHoverPos = useCallback((args) => {
+    if (visible.current) {
+      return;
+    }
+    setHoverCol(args.col);
+    setHoverRow(args.row);
+    const cellValue = tableInstance.current.getCellValue(args.col, args.row);
+    setValue(cellValue);
+  }, []);
+  const hide = useCallback(() => {
+    setHoverCol(-1);
+    setHoverRow(-1);
+  }, []);
+
+  const updateClickPos = useCallback((args) => {
+    setClickCol(args.col);
+    setClickRow(args.row);
+  }, []);
+
+  const ready = (instance, isInitial) => {
+    if (isInitial) {
+      tableInstance.current = instance;
+    }
+  };
+
+  return (
+    <ListTable
+      option={option}
+      onMouseEnterCell={updateHoverPos}
+      onMouseLeaveTable={hide}
+      onClickCell={updateClickPos}
+      onReady={ready}
+    >
+      <CustomComponent
+        width="80%"
+        height="100%"
+        displayMode="cell"
+        col={hoverCol}
+        row={hoverRow}
+        anchor="bottom-right"
+        dx="-80%"
+      >
+        <Tooltip value={value} />
+      </CustomComponent>
+      <CustomComponent width="100%" height="100%" displayMode="cell" col={clickCol} row={clickRow} anchor="top-left">
+        <Popconfirm
+          focusLock
+          title="Popconfirm"
+          content="Click component!"
+          onOk={() => {
+            Message.info({
+              content: 'ok'
+            });
+            setClickCol(-1);
+            setClickRow(-1);
+          }}
+          onCancel={() => {
+            Message.error({
+              content: 'cancel'
+            });
+            setClickCol(-1);
+            setClickRow(-1);
+          }}
+          onVisibleChange={(popVisible) => {
+            visible.current = popVisible;
+          }}
+        >
+          <Button style={{ width: '100%', height: '100%' }}>Click</Button>
+        </Popconfirm>
+      </CustomComponent>
+    </ListTable>
+  );
+}
+
+const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
+root.render(<App />);
+
+// release react instance, do not copy
+window.customRelease = () => {
+  root.unmount();
+};
+```

docs/assets/demo-react/en/event/event.md

@@ -17,7 +17,7 @@ The events supported by VTable can be monitored through react props. For details
 // import * as ReactVTable from '@visactor/react-vtable';
 
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-react/en/event/ready.md

@@ -17,7 +17,7 @@ The onReady callback is triggered after the table completes initialization or up
 // import * as ReactVTable from '@visactor/react-vtable';
 
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-react/en/functional-components/arco-select-editor.md

@@ -107,7 +107,7 @@ const editor = new ArcoListEditor();
 VTable.register.editor('list-editor', editor);
 const option = {
   defaultRowHeight: 34,
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name'

docs/assets/demo-react/en/usage/option-record.md

@@ -15,7 +15,7 @@ Records can be separated from options and passed into the table component as a s
 ```javascript livedemo template=vtable-react
 // import * as ReactVTable from '@visactor/react-vtable';
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-react/en/usage/option.md

@@ -15,7 +15,7 @@ You can use the complete option of VTable directly and pass the option into the
 ```javascript livedemo template=vtable-react
 // import * as ReactVTable from '@visactor/react-vtable';
 const option = {
-  header: [
+  columns: [
     {
       field: '0',
       caption: 'name',

docs/assets/demo-react/menu.json

@@ -74,6 +74,13 @@
             "zh": "提示信息",
             "en": "tooltip"
           }
+        },
+        {
+          "path": "custom-component",
+          "title": {
+            "zh": "自定义组件",
+            "en": "custom component"
+          }
         }
       ]
     },