carousel 增加获取data中同名数据

docs/renderers/Carousel.md

@@ -12,7 +12,8 @@
         -  `titleClassName` 图片标题类名
         -  `description` 图片描述
         -  `descriptionClassName` 图片描述类名
-    -   `html` HTML 自定义，同[Tpl](./Tpl.md)一致
+    -   `item` HTML 自定义，同[Tpl](./Tpl.md)一致
+-   `itemSchema` 自定义`schema`来展示数据
 -   `auto` 是否自动轮播，默认`true`
 -   `interval` 切换动画间隔，默认`5s`
 -   `duration` 切换动画时长，默认`0.5s`
@@ -33,7 +34,7 @@
             "image": "https://video-react.js.org/assets/poster.png"
         },
         {
-            "html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
+            "item": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
         },
         {
             "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"

examples/components/Carousel.jsx

@@ -4,7 +4,7 @@ export default {
     data: {
         carousel: [
             {
-                html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
+                item: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
             },
             {
                 image: 'https://www.baidu.com/img/bd_logo1.png'
@@ -28,7 +28,7 @@ export default {
                             image: 'https://video-react.js.org/assets/poster.png'
                         },
                         {
-                            html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
+                            item: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
                         },
                         {
                             image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'

mock/crud/list.js

@@ -30,7 +30,7 @@ module.exports = function(req, res) {
                         image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
                     },
                     {
-                        html: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
+                        item: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
                     },
                     {
                         image: 'https://video-react.js.org/assets/poster.png'

src/renderers/Carousel.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Transition';
 import {Renderer, RendererProps} from '../factory';
-import {autobind, createObject} from '../utils/helper';
+import {resolveVariable} from '../utils/tpl-builtin';
+import {autobind, createObject, isObject} from '../utils/helper';
 import {leftArrowIcon, rightArrowIcon} from '../components/icons';
 
 const animationStyles: {
@@ -53,7 +54,14 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
 
     state = {
         current: 0,
-        options: this.props.value ? this.props.value : this.props.options ? this.props.options : [],
+        options:
+            this.props.value
+                ? this.props.value
+                : this.props.options
+                    ? this.props.options
+                    : resolveVariable(this.props.name, this.props.data)
+                        ? resolveVariable(this.props.name, this.props.data)
+                        : [],
         showArrows: false,
         nextAnimation: ''
     };
@@ -178,24 +186,6 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
         )
     }
 
-    @autobind
-    defaultSchema() {
-        return {
-            type: 'tpl',
-            tpl:
-            "<% if (data.image) { %> " +
-                "<div style=\"background-image: url(<%= data.image %>)\" class=\"image <%= data.imageClassName %>\"></div>" +
-                "<% if (data.title) { %> " +
-                    "<div class=\"title <%= data.titleClassName %>\"><%= data.title %></div>" +
-                "<% } if (data.description) { %> " +
-                    "<div class=\"description <%= data.descriptionClassName %>\"><%= data.description %></div>" +
-                "<% } %>" +
-            "<% } else if (data.html) { %>" +
-                "<%= data.html %>" +
-            "<% } %>"
-        }
-    }
-
     @autobind
     handleMouseEnter() {
         this.setState({
@@ -223,8 +213,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
             height,
             controls,
             controlsTheme,
-            placeholder,
+            placeholder
-            data
         } = this.props;
         const {
             options,
@@ -232,6 +221,20 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
             current,
             nextAnimation
         } = this.state;
+        const defaultSchema = {
+            type: 'tpl',
+            tpl:
+            "<% if (data.image) { %> " +
+                "<div style=\"background-image: url(<%= data.image %>)\" class=\"image <%= data.imageClassName %>\"></div>" +
+                "<% if (data.title) { %> " +
+                    "<div class=\"title <%= data.titleClassName %>\"><%= data.title %></div>" +
+                "<% } if (data.description) { %> " +
+                    "<div class=\"description <%= data.descriptionClassName %>\"><%= data.description %></div>" +
+                "<% } %>" +
+            "<% } else if (data.item) { %>" +
+                "<%= data.item %>" +
+            "<% } %>"
+        }
 
         let body:JSX.Element | null = null;
         let carouselStyles: {
@@ -266,8 +269,8 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
 
                                 return (
                                     <div className={cx('Carousel-item', animationName, animationStyles[status])}>
-                                        {render(`${current}/body`, itemSchema ? itemSchema : this.defaultSchema(), {
+                                        {render(`${current}/body`, itemSchema ? itemSchema : defaultSchema, {
-                                            data: createObject(data, option)
+                                            data: isObject(option) ? option : {item: option}
                                         })}
                                     </div>
                                 );