import React from 'react'
import ReactDOM from 'react-dom'
import WebFrame from '@xm/WebFrame'
class App extends React.Component {
constructor (props) {
super(props)
this.index = 0
this.directions = ['top', 'right', 'bottom', 'left']
this.state = {
visible: false,
index: -1,
renderWebFrame: true,
direction: this.directions[this.index],
urls: [
{
title: '百度',
url: 'http://m.baidu.com'
},
{
title: '天猫',
url: 'http://m.tmall.com'
},
{
title: '淘宝',
url: 'http://m.taobao.com'
}]
}
this.hide = this.hide.bind(this)
this.show = this.show.bind(this)
this.change = this.change.bind(this)
this.unmount = this.unmount.bind(this)
this.switchDirection = this.switchDirection.bind(this)
}
change () {
const {urls} = this.state
let {index} = this.state
const len = urls.length
index = index + 1 >= len ? 0 : index + 1
this.setState({
visible: true,
index
})
}
show () {
this.setState({
visible: true,
renderWebFrame: true
})
}
hide () {
this.setState({
visible: false
})
}
unmount () {
this.setState({
renderWebFrame: false
})
}
switchDirection () {
if (this.index + 1 === this.directions.length) {
this.index = 0
} else {
this.index += 1
}
this.setState({
direction: this.directions[this.index]
})
}
render () {
const {visible, urls, index, renderWebFrame, direction} = this.state
const width = (this.index === 1 || this.index === 3) ? '400px' : '100%'
const height = (this.index === 1 || this.index === 3) ? '100%' : '400px'
return (
<div>
<button onClick={this.change}>切换</button>
<button onClick={this.show}>显示</button>
<button onClick={this.hide}>隐藏</button>
<button onClick={this.unmount}>销毁</button>
<button onClick={this.switchDirection}>修改出现的方向</button>
{
renderWebFrame ?
<WebFrame visible={visible} autoClose closable direction={direction}
url={urls[index] && urls[index].url} width={width} height={height}
title={false} onClose={this.hide} />
: null
}
</div>
)
}
}
window.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<App />, document.body)
})