Merge remote-tracking branch 'baidu/master' into form2

docs/zh-CN/components/wrapper.md

@@ -22,6 +22,51 @@ order: 72
 
 > 上面例子中的 `"className": "b"` 是为了增加边框，不然看不出来。
 
+## 动态获取
+
+直接返回一个对象
+
+```schema: scope="body"
+{
+  "type": "page",
+  "data": {
+    "style": {
+      "color": "#aaa"
+    }
+  },
+  "body": [
+    {
+      "type": "wrapper",
+      "body": "内容",
+      "className": "b",
+      "style": "${style}"
+    }
+  ]
+}
+```
+
+返回变量
+
+```schema: scope="body"
+{
+  "type": "page",
+  "data": {
+    "color": "#aaa"
+  },
+  "body": [
+    {
+      "type": "wrapper",
+      "body": "内容",
+      "className": "b",
+      "style": {
+        "color": "${color}",
+        "fontSize": "30px"
+      }
+    }
+  ]
+}
+```
+
 ## 不同内边距
 
 通过配置`size`属性，可以调整内边距
@@ -94,5 +139,5 @@ wrapper 可以设置 style，当成一个 `div` 标签来用
 | type      | `string`                                  | `"wrapper"` | 指定为 Wrapper 渲染器        |
 | className | `string`                                  |             | 外层 Dom 的类名              |
 | size      | `string`                                  |             | 支持: `xs`、`sm`、`md`和`lg` |
-| style     | `Object`                                  |             | 自定义样式                   |
+| style     | `Object` \| `string`                      |             | 自定义样式                   |
 | body      | [SchemaNode](../../docs/types/schemanode) |             | 内容容器                     |

src/renderers/Wrapper.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaCollection} from '../Schema';
+import {resolveVariable} from '../utils/tpl-builtin';
 import {SchemaNode} from '../types';
+import mapValues from 'lodash/mapValues';
 
 /**
  * Wrapper 容器渲染器。
@@ -53,12 +55,15 @@ export default class Wrapper extends React.Component<WrapperProps, object> {
   }
 
   render() {
-    const {className, size, classnames: cx, style} = this.props;
+    const {className, size, classnames: cx, style, data} = this.props;
+    let styleVar = typeof style === 'string'
+      ? resolveVariable(style, data) || {}
+      : mapValues(style, s => resolveVariable(s, data) || s);
 
     return (
       <div
         className={cx('Wrapper', size ? `Wrapper--${size}` : '', className)}
-        style={style}
+        style={styleVar}
       >
         {this.renderBody()}
       </div>