diff --git a/package.json b/package.json index 2a9c63c..aa6a022 100755 --- a/package.json +++ b/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", diff --git a/packages/drip-table/src/drip-table/components/link/index.tsx b/packages/drip-table/src/drip-table/components/link/index.tsx index c7918b9..85ce69f 100644 --- a/packages/drip-table/src/drip-table/components/link/index.tsx +++ b/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 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 extends ); } - return { schema.label }; + return { schema.label }; } return (
@@ -96,7 +97,16 @@ export default class DTCLink extends ); } - return { config.label }; + return ( + + { config.label } + + ); }) }
diff --git a/packages/drip-table/src/drip-table/components/utils.ts b/packages/drip-table/src/drip-table/components/utils.ts new file mode 100644 index 0000000..a2ab587 --- /dev/null +++ b/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; +}; diff --git a/yarn.lock b/yarn.lock index 21fee30..725a11c 100644 --- a/yarn.lock +++ b/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"