shinemo-example v0.2.1

示例模块/Example

使用

import React from 'react'
import ReactDOM from 'react-dom'
import Tab from '@xm/Tab'
import Example from '@xm/Example'
import styles from './index.scss'

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      tabs: [
        {
          value: 1,
          text: 'tab1',
          active: true
        },
        {
          value: 2,
          text: 'tab2'
        }
      ],
      exampleIcon: '',
      showExample: true
    }

    this.handleClick = this.handleClick.bind(this)
    this.addTab = this.addTab.bind(this)
    this.hideExample = this.hideExample.bind(this)
  }

  handleClick (tab) {
    const {tabs} = this.state

    tabs.forEach((t) => {
      if (t.active) {
        delete t.active
      }

      if (t.value === tab.value) {
        t.active = true
      }
    })

    console.log(tab)
    this.setState({
      tabs
    })
  }

  hideExample () {
    this.setState({
      showExample: false
    })
  }

  addTab () {
    const {tabs} = this.state
    const v = tabs[tabs.length - 1].value + 1
    tabs.push({
      value: v,
      text: `tab${v}`
    })

    this.setState({
      tabs
    })
  }

  render () {
    const {tabs, showExample, exampleIcon} = this.state

    return (
      <div className={styles.container}>
        <Tab cls={styles['custom-tabs']} toEach={tabs} onChange={this.handleClick} />
        {showExample ?
          (<Example style={{top: '40px', zIndex: 999}} icon={exampleIcon}>
            <div className={styles.overlay}>
              <div className={styles.text}>
                只有签到真的用起来才能做这样的数据统计哦，管理员还等什么，
                <br />去后台开启使用签到功能版
              </div>
              <button className={styles.btn} onClick={this.hideExample}>去配置</button>
            </div>
          </Example>) : null
        }
      </div>
    )
  }
}

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render((<App />), document.body)
})