代码小调整

This commit is contained in:
liaoxuezhi 2019-06-14 13:35:54 +08:00
parent 2e489f25c7
commit ed28740f27
1 changed files with 33 additions and 31 deletions

View File

@ -34,6 +34,35 @@ export interface CarouselState {
nextAnimation: string; nextAnimation: string;
} }
const defaultSchema = {
type: 'tpl',
tpl: `
<% if (data.hasOwnProperty('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.hasOwnProperty('html')) { %>
<%= data.html %>"
<% } else 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 %>
<% } else if (data.item) { %>
<%= data.item %>
<% } else { %>
<%= '未找到渲染数据' %>
<% } %>
`
};
export class Carousel extends React.Component<CarouselProps, CarouselState> { export class Carousel extends React.Component<CarouselProps, CarouselState> {
wrapperRef: React.RefObject<HTMLDivElement> = React.createRef(); wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
intervalTimeout: number; intervalTimeout: number;
@ -207,7 +236,8 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
controls, controls,
controlsTheme, controlsTheme,
placeholder, placeholder,
data data,
name
} = this.props; } = this.props;
const { const {
options, options,
@ -215,34 +245,6 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
current, current,
nextAnimation nextAnimation
} = this.state; } = this.state;
const defaultSchema = {
type: 'tpl',
tpl: `
<% if (data.hasOwnProperty('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.hasOwnProperty('html')) { %>
<%= data.html %>"
<% } else 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 %>
<% } else if (data.item) { %>
<%= data.item %>
<% } else { %>
<%= '未找到渲染数据' %>
<% } %>
`
}
let body:JSX.Element | null = null; let body:JSX.Element | null = null;
let carouselStyles: { let carouselStyles: {
@ -278,7 +280,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
return ( return (
<div className={cx('Carousel-item', animationName, animationStyles[status])}> <div className={cx('Carousel-item', animationName, animationStyles[status])}>
{render(`${current}/body`, itemSchema ? itemSchema : defaultSchema, { {render(`${current}/body`, itemSchema ? itemSchema : defaultSchema, {
data: createObject(data, isObject(option) ? option : {item: option}) data: createObject(data, isObject(option) ? option : {item: option, [name]: option})
})} })}
</div> </div>
); );