feat: templateLink support function #2847

VisActor · Nov 26, 2024 · 7171ee8 · 7171ee8
1 parent daaeeeb
commit 7171ee8
Show file tree

Hide file tree

Showing 17 changed files with 44 additions and 23 deletions.
diff --git a/common/changes/@visactor/vtable/feat-templateLink-func_2024-11-20-08-59.json b/common/changes/@visactor/vtable/feat-templateLink-func_2024-11-20-08-59.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: templateLink support function #2847",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/docs/assets/guide/en/cell_type/link.md b/docs/assets/guide/en/cell_type/link.md
@@ -10,7 +10,7 @@ Next, we will explain the configuration items unique to the link type one by one
 
 *   `linkDetect` The default value is `true`When set to `true` The program will check the links regularly, and only links that meet the URL rules will be displayed as clickable hyperlinkes. For template link types, this configuration item does not take effect.
 
-*   `templateLink` Used to define template link addresses. For example, configure to `'https://www.google.com.hk/search?q={name}`, in which `name` Is the field name of the data source property. This makes it easier to quickly generate link addresses.
+*   `templateLink` Used to define template link addresses. For example, configure to `'https://www.google.com.hk/search?q={name}`, in which `name` Is the field name of the data source property. This makes it easier to quickly generate link addresses. `templateLink` can also be a function `(record, col, row, table) => string`, `record` is the data record, `col` is the column index, `row` is the row index, `table` is the table instance. 
 
 # Example of hyperlinke in table display
 

diff --git a/docs/assets/guide/zh/cell_type/link.md b/docs/assets/guide/zh/cell_type/link.md
@@ -10,7 +10,7 @@
 
 - `linkDetect` 默认值为 `true`。当设置为 `true` 时，程序会对链接进行正则检测，只有符合 URL 规则的链接才会被展示成可点击的超链接。为模板链接类型，此配置项不生效。
 
-- `templateLink` 用于定义模板链接地址。例如，配置为 `'https://www.google.com.hk/search?q={name}`，其中 `name` 是数据源属性字段名。这样可以更方便地快速生成链接地址。
+- `templateLink` 用于定义模板链接地址。例如，配置为 `'https://www.google.com.hk/search?q={name}`，其中 `name` 是数据源属性字段名。这样可以更方便地快速生成链接地址。也可以配置为函数：`(record, col, row, table) => string`，其中 `record` 是当前行数据，`col` 是当前列索引，`row` 是当前行索引，`table` 是当前表格实例。
 
 # 超链接在表格展示的示例
 

diff --git a/docs/assets/option/en/column/link-column-type.md b/docs/assets/option/en/column/link-column-type.md
@@ -20,7 +20,7 @@ Specify the column type as 'link', cellType can be omitted and defaults to 'text
 
 **link type exclusive configuration item**  Whether the link undergoes regular detection, and displays as link only if the link conforms to the url rules. This configuration does not take effect if a template link is configured.
 
-##${prefix} templateLink(string)
+##${prefix} templateLink(string | (record: any, col: number, row: number, table: BaseTableAPI) => string)
 
 **link type exclusive configuration item**  Template link address, such as: 'https://www.google.com.hk/search?q={name}', where name is the attribute field name of the data source.
 

diff --git a/docs/assets/option/en/dimension/link-dimension-type.md b/docs/assets/option/en/dimension/link-dimension-type.md
@@ -20,7 +20,7 @@ Specify the column type as 'link', headerType can be omitted and defaults to 'te
 
 **Link type exclusive configuration item** Whether the link undetrrgoes regular expression detection, and only if the link complies with the URL rules it will be displayed as a link. This configuration does not take effect if a template link is configured.
 
-##${prefix} templateLink(string)
+##${prefix} templateLink(string | (record: any, col: number, row: number, table: BaseTableAPI) => string)
 
 **Link type exclusive configuration item** Template link address, such as: 'https://www.google.com.hk/search?q={name}', where name is the data source attribute field name.
 

diff --git a/docs/assets/option/en/indicator/link-indicator-type.md b/docs/assets/option/en/indicator/link-indicator-type.md
@@ -20,7 +20,7 @@ Specify the column type as 'link', and the default cellType is 'text' if not spe
 
 **Exclusive configuration for link type** Whether to perform regular detection on the link. If the link conforms to the URL rules, it will be displayed as a link. This configuration does not take effect if a template link is configured.
 
-##${prefix} templateLink(string)
+##${prefix} templateLink(string | (record: any, col: number, row: number, table: BaseTableAPI) => string)
 
 **Exclusive configuration for link type** Template link address, such as: 'https://www.google.com.hk/search?q={name}', where name is the attribute field name in the data source.
 

diff --git a/docs/assets/option/zh/column/link-column-type.md b/docs/assets/option/zh/column/link-column-type.md
@@ -20,7 +20,7 @@
 
 **link 类型专属配置项** 链接是否进行正则检测，如果链接符合 url 规则才展示成为 link。如果配置了模板链接该配置不生效。
 
-##${prefix} templateLink(string)
+##${prefix} templateLink(string | (record: any, col: number, row: number, table: BaseTableAPI) => string)
 
 **link 类型专属配置项** 模板链接地址，如：'https://www.google.com.hk/search?q={name}'，name是数据源属性字段名。
 

diff --git a/docs/assets/option/zh/dimension/link-dimension-type.md b/docs/assets/option/zh/dimension/link-dimension-type.md
@@ -20,7 +20,7 @@
 
 **link类型专属配置项**  链接是否进行正则检测，如果链接符合url规则才展示成为link。如果配置了模板链接该配置不生效。
 
-##${prefix} templateLink(string)
+##${prefix} templateLink(string | (record: any, col: number, row: number, table: BaseTableAPI) => string)
 
 **link类型专属配置项**  模板链接地址，如：'https://www.google.com.hk/search?q={name}'，name是数据源属性字段名。
 

diff --git a/docs/assets/option/zh/indicator/link-indicator-type.md b/docs/assets/option/zh/indicator/link-indicator-type.md
@@ -20,7 +20,7 @@
 
 **link 类型专属配置项** 链接是否进行正则检测，如果链接符合 url 规则才展示成为 link。如果配置了模板链接该配置不生效。
 
-##${prefix} templateLink(string)
+##${prefix} templateLink(string | (record: any, col: number, row: number, table: BaseTableAPI) => string)
 
 **link 类型专属配置项** 模板链接地址，如：'https://www.google.com.hk/search?q={name}'，name是数据源属性字段名。
 

diff --git a/packages/vtable/src/event/media-click.ts b/packages/vtable/src/event/media-click.ts
@@ -1,3 +1,4 @@
+import { isFunction } from '@visactor/vutils';
 import { TABLE_EVENT_TYPE } from '../core/TABLE_EVENT_TYPE';
 import { Env } from '../tools/env';
 import { regUrl } from '../tools/global';
@@ -50,11 +51,15 @@ export function bindMediaClick(table: BaseTableAPI): void {
             },
             rowData
           );
-          const re = /\{\s*(\S+?)\s*\}/g;
-          url = templateLink.replace(re, (matchs: string, key: string) => {
-            matchs;
-            return (data as any)[key];
-          });
+          if (isFunction(templateLink)) {
+            url = templateLink(data, col, row, table);
+          } else {
+            const re = /\{\s*(\S+?)\s*\}/g;
+            url = templateLink.replace(re, (matchs: string, key: string) => {
+              matchs;
+              return (data as any)[key];
+            });
+          }
         } else if (!linkDetect) {
           url = cellValue;
         } else if (regUrl.test(cellValue)) {

diff --git a/packages/vtable/src/ts-types/list-table/define/composite-define.ts b/packages/vtable/src/ts-types/list-table/define/composite-define.ts
@@ -2,6 +2,7 @@ import type { ColumnTypeOption, IStyleOption, ITextStyleOption } from '../../col
 import type { CellInfo } from '../../common';
 import type { SparklineSpec } from '../../sparkline';
 import type { StylePropertyFunctionArg } from '../../style-define';
+import type { FieldGetter } from '../../table-engine';
 import type { IBasicColumnBodyDefine } from './basic-define';
 
 export interface ICompositeColumnBodyDefine extends IBasicColumnBodyDefine {
@@ -13,7 +14,7 @@ export interface ICompositeColumnBodyDefine extends IBasicColumnBodyDefine {
   /** 链接是否进行正则检测，如果链接符合url规则才展示成为link。如果配置了模板链接该配置不生效。 */
   linkDetect?: boolean;
   /** 模板链接地址，如：'https://www.google.com.hk/search?q={name}'，name是数据源属性字段名。 */
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
 
   linkTarget?: string; // window.open的第二个参数
   linkWindowFeatures?: string; // window.open的第三个参数

diff --git a/packages/vtable/src/ts-types/list-table/define/link-define.ts b/packages/vtable/src/ts-types/list-table/define/link-define.ts
@@ -1,5 +1,6 @@
 import type { ITextStyleOption } from '../../column';
 import type { StylePropertyFunctionArg } from '../../style-define';
+import type { FieldGetter } from '../../table-engine';
 import type { IBasicColumnBodyDefine, IBasicHeaderDefine } from './basic-define';
 
 export interface ILinkHeaderDefine extends IBasicHeaderDefine {
@@ -17,7 +18,7 @@ export interface ILinkHeaderDefine extends IBasicHeaderDefine {
   /** 链接是否进行正则检测，如果链接符合url规则才展示成为link。如果配置了模板链接该配置不生效。 */
   linkDetect?: boolean;
   /** 模板链接地址，如：'https://www.google.com.hk/search?q={name}'，name是数据源属性字段名。 */
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
 
   linkTarget?: string; // window.open的第二个参数
   linkWindowFeatures?: string; // window.open的第三个参数
@@ -36,7 +37,7 @@ export interface ILinkColumnBodyDefine extends IBasicColumnBodyDefine {
   /** 链接是否进行正则检测，如果链接符合url规则才展示成为link。如果配置了模板链接该配置不生效。 */
   linkDetect?: boolean;
   /** 模板链接地址，如：'https://www.google.com.hk/search?q={name}'，name是数据源属性字段名。 */
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
 
   linkTarget?: string; // window.open的第二个参数
   linkWindowFeatures?: string; // window.open的第三个参数

diff --git a/packages/vtable/src/ts-types/list-table/layout-map/api.ts b/packages/vtable/src/ts-types/list-table/layout-map/api.ts
@@ -21,7 +21,8 @@ import type {
   HierarchyState,
   Aggregation,
   IRowSeriesNumber,
-  SortOption
+  SortOption,
+  FieldGetter
 } from '../../';
 import type { Aggregator } from '../../../dataset/statistics-helper';
 import type { BaseTableAPI } from '../../base-table';
@@ -127,7 +128,7 @@ export interface ColumnData extends WidthData {
   sparklineSpec?: SparklineSpec | ((arg0: CellInfo) => SparklineSpec);
   style: ColumnStyleOption | null | undefined;
   define: ColumnDefine;
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
   columnWidthComputeMode?: 'normal' | 'only-header' | 'only-body';
   /**存储图标的位置 坐标及宽高 是包括了boxWidth boxWidth 共getHitIcon方法使用 计算是否命中图标*/
   // iconPositionList?: { [key in IconFuncTypeEnum]?: RectProps & { icon: ColumnIconOption } };

diff --git a/packages/vtable/src/ts-types/pivot-table/dimension/link-dimension.ts b/packages/vtable/src/ts-types/pivot-table/dimension/link-dimension.ts
@@ -1,5 +1,6 @@
 import type { ITextStyleOption } from '../../column';
 import type { StylePropertyFunctionArg } from '../../style-define';
+import type { FieldGetter } from '../../table-engine';
 import type { IBasicDimension } from './basic-dimension';
 
 export interface ILinkDimension extends IBasicDimension {
@@ -14,7 +15,7 @@ export interface ILinkDimension extends IBasicDimension {
 
   linkJump?: boolean; // 链接是否点击跳转
   linkDetect?: boolean; // 链接是否进行正则检测
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
 
   linkTarget?: string; // window.open的第二个参数
   linkWindowFeatures?: string; // window.open的第三个参数

diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/basic-indicator.ts
@@ -17,7 +17,7 @@ export interface IBasicHeaderIndicator {
 
   // linkJump?: boolean;
   // linkDetect?: boolean;
-  // templateLink?: string;
+  // templateLink?: string | FieldGetter;
 
   // chartSpec?: any | ((arg0: CustomRenderFunctionArg) => any);
   // chartModule?: string; // 如果配置了columnType未chart，chartType来指定图表组件类型 如'vchart' 需要从预先register的图表类型获取

diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/composite-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/composite-indicator.ts
@@ -2,6 +2,7 @@ import type { ColumnTypeOption, IStyleOption, ITextStyleOption } from '../../col
 import type { CellInfo } from '../../common';
 import type { SparklineSpec } from '../../sparkline';
 import type { StylePropertyFunctionArg } from '../../style-define';
+import type { FieldGetter } from '../../table-engine';
 import type { IBasicColumnIndicator } from './basic-indicator';
 
 export interface ICompositeColumnIndicator extends IBasicColumnIndicator {
@@ -14,7 +15,7 @@ export interface ICompositeColumnIndicator extends IBasicColumnIndicator {
   /** 链接是否进行正则检测，如果链接符合url规则才展示成为link。如果配置了模板链接该配置不生效。 */
   linkDetect?: boolean;
   /** 模板链接地址，如：'https://www.google.com.hk/search?q={name}'，name是数据源属性字段名。 */
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
 
   linkTarget?: string; // window.open的第二个参数
   linkWindowFeatures?: string; // window.open的第三个参数

diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/link-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/link-indicator.ts
@@ -1,5 +1,6 @@
 import type { ITextStyleOption } from '../../column';
 import type { StylePropertyFunctionArg } from '../../style-define';
+import type { FieldGetter } from '../../table-engine';
 import type { IBasicColumnIndicator, IBasicHeaderIndicator } from './basic-indicator';
 
 export interface ILinkHeaderIndicator extends IBasicHeaderIndicator {
@@ -16,7 +17,7 @@ export interface ILinkHeaderIndicator extends IBasicHeaderIndicator {
   linkJump?: boolean; // 链接是否点击跳转
   //默认false
   linkDetect?: boolean; // 链接是否进行正则检测
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
 
   linkTarget?: string; // window.open的第二个参数
   linkWindowFeatures?: string; // window.open的第三个参数
@@ -33,7 +34,7 @@ export interface ILinkColumnIndicator extends IBasicColumnIndicator {
 
   linkJump?: boolean; // 链接是否点击跳转
   linkDetect?: boolean; // 链接是否进行正则检测
-  templateLink?: string;
+  templateLink?: string | FieldGetter;
 
   linkTarget?: string; // window.open的第二个参数
   linkWindowFeatures?: string; // window.open的第三个参数