# Bulletin

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Bulletin, { IBulletinProps } from '../index'
import Icon from '../../icon'

class Example extends React.Component {
  state = {
    visible1: true,
    visible2: true,
    visible3: true,
    visible4: true
  }

  onClose(key) {
    this.setState({
      [`visible${key}`]: !this.state[`visible${key}`]
    })
  }

  render() {
    const {
      visible1,
      visible2,
      visible3,
      visible4
    } = this.state
    return (
      <div>
        <Bulletin
          content='有20条内容更新啦'
          isCenter
        />
        <Bulletin
          content='321店庆狂降1000万！'
          className='q-bulletin--yellow'
          icon={(<Icon type='prompt' />)}
          isCenter
        />
        <Bulletin
          visible={visible1}
          content='有20条内容更新啦'
          icon={(<Icon type='prompt' />)}
          closeIcon={(<Icon type='closePop' />)}
          onClose={this.onClose.bind(this, '1')}
        />
        <Bulletin
          visible={visible2}
          className='q-bulletin--yellow'
          content='有20条内容更新啦'
          icon={(<Icon type='prompt' />)}
          closeIcon='关闭'
          onClose={this.onClose.bind(this, '2')}
        />
        <Bulletin
          visible={visible3}
          content='【不滚动】有20条内容更新啦！【不滚动】有20条内容更新啦！【不滚动】有20条内容更新啦！'
          icon={(<Icon type='prompt' />)}
          closeIcon={(<Icon type='closePop' />)}
          onClose={this.onClose.bind(this, '3')}
        />
        <Bulletin
          visible={visible4}
          className='q-bulletin--yellow'
          content='有20条内容更新啦！有20条内容更新啦！有20条内容更新啦！有20条内容更新啦！有20条内容更新啦！'
          icon={(<Icon type='prompt' />)}
          closeIcon={(<Icon type='closePop' />)}
          onClose={this.onClose.bind(this, '4')}
          isScroll
        />
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.getElementById('root'))