feat: #22, link component supports params

package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@rollup/plugin-eslint": "^8.0.1",
     "@types/cheerio": "0.22.22",
+    "@types/lodash": "^4.14.178",
     "@types/react-window": "^1.8.5",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",

packages/drip-table/src/drip-table/components/link/index.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { DripTableRecordTypeBase } from '@/types';
 
+import { finalizeString } from '../utils';
 import { DripTableComponentProps, DripTableComponentSchema } from '../component';
 
 export interface DTCLinkSchema extends DripTableComponentSchema {
@@ -46,7 +47,7 @@ export default class DTCLink<RecordType extends DripTableRecordTypeBase> extends
       }
       return false;
     }
-    if (schema.mode === 'single' && (schema.href || schema.event)) {
+    if (schema.mode === 'single' && (finalizeString('pattern', schema.href || '', this.props.data) || schema.event)) {
       return true;
     }
     return false;
@@ -73,7 +74,7 @@ export default class DTCLink<RecordType extends DripTableRecordTypeBase> extends
           </a>
         );
       }
-      return <a href={schema.href} target={schema.target}>{ schema.label }</a>;
+      return <a href={finalizeString('pattern', schema.href || '', this.props.data)} target={schema.target}>{ schema.label }</a>;
     }
     return (
       <div>
@@ -96,7 +97,16 @@ export default class DTCLink<RecordType extends DripTableRecordTypeBase> extends
                 </a>
               );
             }
-            return <a style={{ marginRight: '5px' }} key={config.name || index} href={config.href} target={config.target}>{ config.label }</a>;
+            return (
+              <a
+                style={{ marginRight: '5px' }}
+                key={config.name || index}
+                href={finalizeString('pattern', config.href || '', this.props.data)}
+                target={config.target}
+              >
+                { config.label }
+              </a>
+            );
           })
         }
       </div>

packages/drip-table/src/drip-table/components/utils.ts

@@ -0,0 +1,63 @@
+/**
+ * This file is part of the drip-table project.
+ * @link     : https://drip-table.jd.com/
+ * @author   : Emil Zhai (root@derzh.com)
+ * @modifier : Emil Zhai (root@derzh.com)
+ * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
+ */
+
+import get from 'lodash/get';
+import { DripTableRecordTypeBase } from '@/types';
+
+/**
+ * 格式化变量用于提供给渲染函数
+ * @param v 任意数据
+ * @returns 渲染字符串
+ */
+export const stringify = (v: unknown) => {
+  if (typeof v === 'object' && v !== null) {
+    try {
+      v = JSON.stringify(v);
+    } catch {}
+  }
+  if (v === void 0) {
+    return '';
+  }
+  return String(v);
+};
+
+/**
+ * 格式化模板字符串，填充变量值
+ * @param mode 格式化模式
+ * @param text 模板字符串
+ * @param rec 填充数据源对象
+ * @returns 最终字符串
+ */
+export const finalizeString = (mode: 'plain' | 'key' | 'pattern' | 'script', text: string, rec: DripTableRecordTypeBase) => {
+  let value = '';
+  if (!mode || mode === 'plain') {
+    value = stringify(text);
+  } else if (mode === 'key') {
+    value = stringify(get(rec, text, ''));
+  } else if (mode === 'pattern') {
+    value = stringify(text)
+      .replace(/\{\{(.+?)\}\}/guis, (s, s1) => {
+        try {
+          return stringify(new Function('rec', `return ${s1}`)(rec));
+        } catch (error) {
+          return error instanceof Error
+            ? `{{Render Error: ${error.message}}}`
+            : '{{Unknown Render Error}}';
+        }
+      });
+  } else if (mode === 'script') {
+    try {
+      value = stringify(new Function('rec', text)(rec));
+    } catch (error) {
+      value = error instanceof Error
+        ? `Render Error: ${error.message}`
+        : 'Unknown Render Error';
+    }
+  }
+  return value;
+};

yarn.lock

@@ -2577,6 +2577,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.178":
+  version "4.14.178"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
+  integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
+
 "@types/mathjax@^0.0.36":
   version "0.0.36"
   resolved "https://registry.yarnpkg.com/@types/mathjax/-/mathjax-0.0.36.tgz#18cf766f88ac0cd4e7ee8282b1286049bb6aa682"