react鼠標框選組件

介紹

一個鼠標框選的react組件，支持單個單元點擊、移入移除等回調等，任意數量單元內容編輯,自定義設置類名等功能

npm傳送門

github傳送門

 

Gifs

 

 

 

 

Usage

import Selection from 'react-box-selection'
 
const content = [...Array(7)].map((item, row) => {
  return [...Array(14)].map((item, col) => {
    const data = Math.floor(Math.random() * 100 + 1)
    const tmp = <h3 key={`${row}-${col}`}>{data}</h3>
    return tmp
  })
})
 
class App extends React.Component {
  state = {}
 
  componentWillUnmount () {
    this.setState = () => { }
  }
 
  mounted = all => { //all items(dom)
    console.log(all)
  }
  selected = (positions, items, all) => { //data-position(array of string),selected items(array of dom)
    console.log(positions)
  }
  singleSelected = (position, item, all) => { //data-position(string),selected items(dom)
    console.log(position)
  }
  hovered = (position, item) => {
    console.log(position)
  }
  leaved = (position, item) => {
    console.log(position)
  }
 
  render () {
 
    return (
      <div>
        <Selection
          cols={24} 
          rows={48} 
          width={30} 
          height={50} 
          gap={10} 
          wrapperScroll={undefined}
          onMounted={this.mounted}
          onHovered={this.hovered}
          onLeaved={this.leaved}
          onSelected={this.selected}
          onSingleSelected={this.singleSelected}
          itemClass='selection_item'
          extraClass={['extra_1', 'extra_2']}
          activeClass='selection_item_active'
        >
          {content}
        </Selection>
      </div>
    )
  }
}

 

params

參數名	默認值	是否必要	作用
cols	24	×	列
rows	7	×	行
height	50px	×	單個單元高
width	30px	×	單個單元寬
gap	0	×	單元間距
wrapperScroll	body的scrollTop & scrollLeft	×	指定的外層元素的scrollTop & scrollLeft
Children	-	×	自定義任意單元子節點 支持jsx組件
onMounted	-	×	掛載完成時的回調
onHovered	-	×	單個單元鼠標移入的回調
onLeaved	-	×	單個單元鼠標移出的回調
onSelected	-	×	框選多個單元的回調
onSingleSelected	-	×	單個點擊或框選單個單元的回調
itemClass	selection_item	×	類
extraClass	[]	×	額外的類
activeClass	selection_item_active	×	激活狀態下的類