shinemo-checkbox v0.0.3

多选框 / Checkbox

兼容性

IE8+

使用方式

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import Checkbox from '@xm/Checkbox'

const style = {
  display: 'block',
  marginBottom: '20px',
  fontSize: '12px',
  color: 'gray'
}

const groupItemStyle = {
  marginRight: '20px'
}

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

    const groupList = [
      {value: 'A', checked: false},
      {value: 'B', checked: false},
      {value: 'C', checked: true}
    ]

    const hasChecked = !!groupList.filter(item => item.checked).length
    const hasUnchecked = !!groupList.filter(item => !item.checked).length

    this.state = {
      // 所有都选中的情况下
      checked: hasChecked && !hasUnchecked,
      // 同时存在选中与未选中的情况下
      indeterminate: hasChecked && hasUnchecked,
      groupList
    }

    this.onCheckAllChange = this.onCheckAllChange.bind(this)
    this.onItemChange = this.onItemChange.bind(this)
  }

  onCheckAllChange (ev) {
    const {groupList} = this.state
    const {checked} = ev.target
    const newList = groupList.map((item) => {
      item.checked = checked
      return item
    })

    this.setState({
      checked,
      indeterminate: false,
      groupList: newList
    })
  }

  onItemChange (ev) {
    const {groupList} = this.state
    const {value, checked} = ev.target

    groupList.some((item) => {
      if (item.value === value) {
        item.checked = checked
        return true
      }
      return false
    })

    const isCheckedAll = !groupList.filter(item => !item.checked).length
    const isUncheckedAll = !groupList.filter(item => item.checked).length

    this.setState({
      groupList,
      checked: isCheckedAll,
      indeterminate: !isUncheckedAll && !isCheckedAll
    })
  }

  renderGroup () {
    const {groupList, indeterminate, checked} = this.state

    return (
      <div>
        <Checkbox indeterminate={indeterminate} checked={checked}
                  onChange={this.onCheckAllChange}>全选</Checkbox>
        <hr />
        {
          groupList.map(item => (
            <Checkbox style={groupItemStyle} key={item.value} value={item.value}
                      checked={item.checked} onChange={this.onItemChange}>{item.value}</Checkbox>
          ))
        }

      </div>
    )
  }

  render () {
    return (
      <div>
        <Checkbox value="A" style={style}>多选框</Checkbox>
        <Checkbox value="B" style={style} checked>多选框</Checkbox>
        <Checkbox value="C" style={style} disabled>多选框</Checkbox>
        <Checkbox value="D" style={style} checked disabled>多选框</Checkbox>
        {this.renderGroup()}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))