audio 支持src取变量值

scss/components/_carousel.scss

@@ -17,6 +17,8 @@
 }
 
 .#{$ns}Carousel {
+    min-width: $Carousel-minWidth;
+    height: $Carousel-height;
     position: relative;
     display: block;
     background: $Carousel-bg;
@@ -56,8 +58,8 @@
     }
 
     &-container {
-        min-width: $Carousel-minWidth;
+        width: 100%;
-        height: $Carousel-height;
+        height: 100%;
         position: relative;
         overflow: hidden;
 

src/renderers/Audio.tsx

@@ -4,6 +4,7 @@ import {Renderer, RendererProps} from '../factory';
 import {autobind} from '../utils/helper';
 import {volumeIcon, muteIcon, playIcon, pauseIcon} from '../components/icons';
 import {resolveVariable} from '../utils/tpl-builtin';
+import {filter} from '../utils/tpl';
 
 export interface AudioProps extends RendererProps {
     className?: string;
@@ -49,7 +50,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
     };
 
     state: AudioState = {
-        src: this.props.value || this.props.src || resolveVariable(this.props.name, this.props.data) || '',
+        src: this.props.value || (this.props.src ? filter(this.props.src, this.props.data) : '') || resolveVariable(this.props.name, this.props.data) || '',
         isReady: false,
         muted: false,
         playing: false,
@@ -82,9 +83,12 @@ export class Audio extends React.Component<AudioProps, AudioState> {
     componentWillReceiveProps(nextProps:AudioProps) {
         const props = this.props;
 
-        if (props.value !== nextProps.value || props.src !== nextProps.src) {
+        if (
+            props.value !== nextProps.value ||
+            filter(props.src as string, props.data) !== filter(nextProps.src as string, nextProps.data)
+        ) {
             this.setState({
-                src: nextProps.value || nextProps.src,
+                src: nextProps.value || filter(nextProps.src as string, nextProps.data),
                 playing: false
             }, () => {
                 this.audio.load();

src/renderers/Carousel.tsx

@@ -262,7 +262,6 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
                     className={cx('Carousel-container')}
                     onMouseEnter={this.handleMouseEnter}
                     onMouseLeave={this.handleMouseLeave}
-                    style={carouselStyles}
                     >
                     {options.map((option:any, key:number) => (
                         <Transition
@@ -294,7 +293,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
         }
 
         return (
-            <div className={cx(`Carousel Carousel--${controlsTheme}`, className)}>
+            <div className={cx(`Carousel Carousel--${controlsTheme}`, className)} style={carouselStyles}>
                 {body ? body : placeholder}
             </div>
         );