jimu-mobile/src/components/swipedelet/swipeitems.js

积木组件库助力移动端开发

/**
 * Created by yanshenshen on 17/04/10.
 */

import React from 'react'
import classNames from 'classnames'
import ReactDOM from 'react-dom'

import SwipeItem from './swipeitem'

class SwipeItems extends React.Component {
  static propTypes = {
    buttons: React.PropTypes.array,
    shows: React.PropTypes.array,
    displacements: React.PropTypes.array,
    disTouchs: React.PropTypes.array,
    touchDefaults: React.PropTypes.array,
    itemsTouchBack: React.PropTypes.func
  }

  static defaultProps = {
    buttons: [], // 按钮信息 { type: 'cancel', label: '取消', onClick: self._confirmcancel } 
    shows :[], // 数据展开
    displacements :[], // 默认已滑动展开
    disTouchs :[], // 是否可以拖动
    touchDefaults :[], // 是否有因素影响拖动
    itemsTouchBack : function(){}
  }

  constructor(props) {
    super(props)
    this.initSetState(this.props)
  }

  initSetState(props){
    // 设置 state
    this.state = {
      shows : this.initStateVal(props,"shows",true),
      displacements : this.initStateVal(props,"displacements",false),
      disTouchs : this.initStateVal(props,"disTouchs",true),
      touchDefaults : this.initStateVal(props,"touchDefaults",false)
    }
  }

  // componentWillMount() {}

  componentWillReceiveProps(nextprops) {
    this.initSetState(nextprops)
  }

  initStateVal(props,key,defaultkey){
    let newArr = [],
      length = props.children.length || 1
    for (var i = 0; i < length; i++) {
      let newKey
      if (props[key][i] == undefined) {
        newKey = defaultkey
      }else{
        newKey = props[key][i]
      }
      newArr.push(newKey)
    }
    return newArr
  }


  lotStateVal(key){
    let newArr = [],
      length = this.props.children.length || 1
    for (var i = 0; i < length; i++) {
      let newKey = key
      newArr.push(newKey)
    }
    return newArr
  }

  singleStateVal(key,index,defaultkey){
    this.state[key][index] = defaultkey
    return this.state[key]
  }

  // touch状态下callback
  _touchBack(o){
    const {itemsTouchBack} = this.props

    this.setState({
      displacements : this.singleStateVal("touchDefaults",o.index,o.touchState),
      touchDefaults : this.lotStateVal(o.touchState)
    })

    if (itemsTouchBack) {
      itemsTouchBack(o)
    }
  }

  // 有因素影响拖动状态下callback
  _touchDefaultBack(o){
    this.setState({
      displacements : this.lotStateVal(false),
      touchDefaults : this.lotStateVal(false)
    })

    const {itemsTouchBack} = this.props

    if (itemsTouchBack) {
      itemsTouchBack(o)
    }

  }

  render() {
    const self = this,
      {className,children,buttons} = this.props,
      {disTouchs,shows,touchDefaults,displacements} = this.state,
      cls = classNames({
        'jimu-swipe-items': true,
        [className]: className
      })

      let defaultButtons = [
            {
              type: 'delet',
              label: '删除',
              onClick: self._confirmdel
            }
          ]

    return (
      <div className={cls}>
        {
          children.length > 2 ? children.map(function (re,index) {
            if (disTouchs[index]) {
              return (<SwipeItem key={index} index={index} buttons={buttons[index] || defaultButtons}  show={shows[index]}  displacement={displacements[index]}  touchDefault={touchDefaults[index]} touchDefaultBack={self._touchDefaultBack.bind(self)} touchBack={self._touchBack.bind(self)}>{re}</SwipeItem>)
            }else{
              return <div className="jimu-swipe-del jimu-item-undel" key={index} >{re}</div>
            }
          }) : disTouchs[0] ? (<SwipeItem index={0} buttons={buttons[0] || defaultButtons}  show={shows[0]}  displacement={displacements[0]}  touchDefault={touchDefaults[0]} touchDefaultBack={self._touchDefaultBack.bind(self)} touchBack={self._touchBack.bind(self)}>{children}</SwipeItem>) : (<div className="jimu-swipe-del jimu-item-undel">{children}</div>)
        }
      </div>
    )
  }
}

export default SwipeItems