feat: alert 组件的 level 支持变量 (#3522)

docs/zh-CN/components/alert.md

@@ -153,6 +153,30 @@ order: 27
 ]
 ```
 
+## level 支持表达式
+
+> 1.6.4 及以上版本
+
+修改下面例子的 status 值为 2 就能看到变化
+
+```schema:
+{
+  "type": "page",
+  "data": {
+    "status": 1
+  },
+  "body": [
+    {
+      "type": "alert",
+      "level": "${IFS(status===1, 'danger', status===2, 'warning')}",
+      "body": "这是内容区"
+    }
+  ]
+}
+```
+
+同时 icon 和 showIcon 也都支持表达式
+
 ## 显示关闭按钮
 
 配置`"showCloseButton": true`实现显示关闭按钮。

src/renderers/Alert.tsx

@@ -7,6 +7,7 @@ import {
   SchemaCollection,
   SchemaIcon
 } from '../Schema';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 
 /**
  * Alert 提示渲染器。
@@ -64,7 +65,21 @@ export interface AlertSchema extends BaseSchema {
 })
 export class TplRenderer extends React.Component<AlertProps & RendererProps> {
   render() {
-    const {render, body, ...rest} = this.props;
-    return <Alert {...rest}>{render('body', body)}</Alert>;
+    let {render, body, level, icon, showIcon, ...rest} = this.props;
+    if (isPureVariable(level)) {
+      level = resolveVariableAndFilter(level, this.props.data);
+    }
+    if (isPureVariable(icon)) {
+      icon = resolveVariableAndFilter(icon, this.props.data);
+    }
+    if (isPureVariable(showIcon)) {
+      showIcon = resolveVariableAndFilter(showIcon, this.props.data);
+    }
+
+    return (
+      <Alert {...rest} level={level} icon={icon} showIcon={showIcon}>
+        {render('body', body)}
+      </Alert>
+    );
   }
 }