p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #83 from catchonme/master 

carousel 增加获取data中同名数据
This commit is contained in:
liaoxuezhi 2019-06-14 12:02:09 +08:00 committed by GitHub
parent 580f11320a 1977926697
commit 4d824c59e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/renderers/Carousel.md
View File

@ -13,6 +13,7 @@
- `description` 图片描述
- `descriptionClassName` 图片描述类名
- `html` HTML 自定义，同[Tpl](./Tpl.md)一致
- `itemSchema` 自定义`schema`来展示数据
- `auto` 是否自动轮播，默认`true`
- `interval` 切换动画间隔，默认`5s`
- `duration` 切换动画时长，默认`0.5s`

65
examples/components/Carousel.jsx
View File

@ -2,7 +2,12 @@ export default {
type: 'page',
title: '轮播图',
data: {
carousel: [
carousel0: [
'https://www.baidu.com/img/bd_logo1.png',
'https://video-react.js.org/assets/poster.png',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
],
carousel1: [
{
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
},
@ -19,31 +24,53 @@ export default {
type: 'grid',
columns: [
{
type: 'carousel',
controlsTheme: 'light',
height: '300',
className: 'm-t-xxl',
options: [
{
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>'
},
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
}
]
type: 'panel',
title: '直接页面配置',
body: {
type: 'carousel',
controlsTheme: 'light',
height: '300',
options: [
{
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>'
},
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
}
]
}
},
{
type: 'panel',
title: '使用itemSchema配置',
body: {
type: 'carousel',
name: 'carousel0',
controlsTheme: 'dark',
height: '300',
itemSchema: {
type: 'tpl',
tpl: '<img src=\"<%=data.item%>\" />'
}
}
}
]
},
{
type: 'grid',
columns: [
{
type: 'form',
title: '表单',
className: 'm-b-xxl',
title: '表单内展示',
sm: 6,
controls: [
{
type: 'carousel',
controlsTheme: 'dark',
name: 'carousel',
name: 'carousel1',
label: 'carousel',
animation: 'slide',
height: '300'

55
src/renderers/Carousel.tsx
View File

@ -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,7 @@ 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.options || resolveVariable(this.props.name, this.props.data) || [],
showArrows: false,
nextAnimation: ''
};
@ -178,24 +179,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({
@ -232,6 +215,34 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
current,
nextAnimation
} = 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 carouselStyles: {
@ -266,8 +277,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(), {
data: createObject(data, option)
{render(`${current}/body`, itemSchema ? itemSchema : defaultSchema, {
data: createObject(data, isObject(option) ? option : {item: option})
})}
</div>
);