{controls && controls.map((control:string, index:number) => {
control = 'render' + upperFirst(control);
const method:'renderRates'|'renderPlay'|'renderTime'|'renderProcess'|'renderVolume'|'render' = control as any;
diff --git a/src/renderers/Carousel.tsx b/src/renderers/Carousel.tsx
new file mode 100644
index 000000000..eb9ddeb46
--- /dev/null
+++ b/src/renderers/Carousel.tsx
@@ -0,0 +1,301 @@
+import * as 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 {leftArrowIcon, rightArrowIcon} from '../components/icons';
+
+const animationStyles: {
+ [propName: string]: string;
+} = {
+ [ENTERING]: 'in',
+ [ENTERED]: 'in',
+ [EXITING]: 'out'
+};
+
+export interface CarouselProps extends RendererProps {
+ className?: string;
+ auto?: boolean;
+ value?: any;
+ placeholder?: any;
+ width?: number;
+ height?: number;
+ controls: string[];
+ interval: number;
+ duration: number;
+ controlsTheme: 'light' | 'dark';
+ animation: 'fade' | 'slide';
+}
+
+export interface CarouselState {
+ current: number;
+ options: any[];
+ showArrows: boolean;
+ nextAnimation: string;
+}
+
+export class Carousel extends React.Component
{
+ wrapperRef: React.RefObject;
+ intervalTimeout: number;
+ durationTimeout: number;
+
+ static defaultProps: Pick<
+ CarouselProps,
+ 'auto' | 'interval' | 'duration' | 'controlsTheme' | 'animation' | 'controls' | 'placeholder'
+ > = {
+ auto: true,
+ interval: 5000,
+ duration: 500,
+ controlsTheme: 'light',
+ animation: 'fade',
+ controls: ['dots', 'arrows'],
+ placeholder: ''
+ };
+
+ constructor(props:CarouselProps) {
+ super(props);
+
+ this.state = {
+ current: 0,
+ options: this.props.value ? this.props.value : this.props.options ? this.props.options : [],
+ showArrows: false,
+ nextAnimation: ''
+ };
+
+ this.wrapperRef = React.createRef();
+ }
+
+ componentDidMount() {
+ this.prepareAutoSlide();
+ }
+
+ componentWillUnmount() {
+ this.clearAutoTimeout()
+ }
+
+ @autobind
+ prepareAutoSlide () {
+ if (this.state.options.length < 2) {
+ return;
+ }
+
+ this.clearAutoTimeout();
+ if (this.props.auto) {
+ this.intervalTimeout = setTimeout(this.autoSlide, this.props.interval);
+ }
+ }
+
+ @autobind
+ autoSlide (rel?:string) {
+ this.clearAutoTimeout();
+ const {animation} = this.props;
+ let {nextAnimation} = this.state;
+
+ switch (rel) {
+ case 'prev':
+ animation === 'slide' ? nextAnimation = 'slideRight' : nextAnimation = '';
+ this.transitFramesTowards('right', nextAnimation);
+ break;
+ case 'next':
+ default:
+ nextAnimation = '';
+ this.transitFramesTowards('left', nextAnimation);
+ break;
+ }
+
+ this.durationTimeout = setTimeout(this.prepareAutoSlide, this.props.duration);
+ }
+
+ @autobind
+ transitFramesTowards (direction:string, nextAnimation: string) {
+ let {current} = this.state;
+
+ switch (direction) {
+ case 'left':
+ current = this.getFrameId('next');
+ break;
+ case 'right':
+ current = this.getFrameId('prev');
+ break;
+ }
+
+ this.setState({
+ current,
+ nextAnimation
+ });
+ }
+
+ @autobind
+ getFrameId (pos?:string) {
+ const {options, current} = this.state;
+ const total = options.length;
+ switch (pos) {
+ case 'prev':
+ return (current - 1 + total) % total;
+ case 'next':
+ return (current + 1) % total;
+ default:
+ return current;
+ }
+ }
+
+ @autobind
+ next () {
+ this.autoSlide('next');
+ }
+
+ @autobind
+ prev () {
+ this.autoSlide('prev');
+ }
+
+ @autobind
+ clearAutoTimeout () {
+ clearTimeout(this.intervalTimeout);
+ clearTimeout(this.durationTimeout);
+ }
+
+ renderDots() {
+ const {classnames: cx} = this.props;
+ const {current, options} = this.state;
+ return (
+
+ {Array.from({length: options.length}).map((_, i) =>
+
+ )}
+
+ )
+ }
+
+ renderArrows() {
+ const {classnames: cx} = this.props;
+ return (
+
+
{leftArrowIcon}
+
{rightArrowIcon}
+
)\" class=\"image <%= data.imageClassName %>\">
" +
+ "<% if (data.title) { %> " +
+ "\"><%= data.title %>
" +
+ "<% } if (data.description) { %> " +
+ "\"><%= data.description %>
" +
+ "<% } %>" +
+ "<% } else if (data.html) { %>" +
+ "<%= data.html %>" +
+ "<% } %>"
+ }
+ }
+
+ @autobind
+ handleMouseEnter() {
+ this.setState({
+ showArrows: true
+ });
+ this.clearAutoTimeout();
+ }
+
+ @autobind
+ handleMouseLeave() {
+ this.setState({
+ showArrows: false
+ });
+ this.prepareAutoSlide();
+ }
+
+ render() {
+ const {
+ render,
+ className,
+ classnames: cx,
+ itemSchema,
+ animation,
+ width,
+ height,
+ controls,
+ controlsTheme,
+ placeholder,
+ data
+ } = this.props;
+ const {
+ options,
+ showArrows,
+ current,
+ nextAnimation
+ } = this.state;
+
+ let body:JSX.Element | null = null;
+ let carouselStyles: {
+ [propName: string]: string;
+ } = {};
+ width ? carouselStyles.width = width + 'px' : '';
+ height ? carouselStyles.height = height + 'px' : '';
+ const [dots, arrows] = [controls.indexOf('dots') > -1, controls.indexOf('arrows') > -1];
+ const animationName = nextAnimation || animation;
+
+ if (options && options.length) {
+ body = (
+
+ {options.map((option:any, key:number) => (
+
+ {(status:string) => {
+ if (status === ENTERING) {
+ this.wrapperRef.current && this.wrapperRef.current.childNodes.forEach((item:HTMLElement) => item.offsetHeight);
+ }
+
+ return (
+
+ {render(`${current}/body`, itemSchema ? itemSchema : this.defaultSchema(), {
+ data: createObject(data, option)
+ })}
+
+ );
+ }}
+
+ ))}
+ {dots ? this.renderDots() : null}
+ {arrows && showArrows ? this.renderArrows() : null}
+
+ {body ? body : placeholder}
+
+ );
+ }
+}
+
+@Renderer({
+ test: /(^|\/)carousel/,
+ name: 'carousel',
+})
+export class CarouselRenderer extends Carousel {}
diff --git a/src/utils/tpl-lodash.ts b/src/utils/tpl-lodash.ts
index 31e841f12..e784ea364 100644
--- a/src/utils/tpl-lodash.ts
+++ b/src/utils/tpl-lodash.ts
@@ -1,5 +1,5 @@
import { reigsterTplEnginer, filter } from "./tpl";
-import tempalte = require('lodash/template');
+import template = require('lodash/template');
import { filters } from "./tpl-builtin";
import * as React from 'react';
import * as moment from 'moment';
@@ -31,7 +31,7 @@ const imports = {
delete imports.default; // default 是个关键字，不能 imports 到 lodash 里面去。
function lodashCompile(str: string, data: object) {
try {
- const fn = tempalte(str, {
+ const fn = template(str, {
imports: imports,
variable: 'data'
});