jimu-mobile/example/components/swipedelet.js

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

import React, { Component } from 'react'
import JIMU from '../../src/index'

const {SwipeDelet,Layouts} = JIMU,
  {
    Layout,
    LayoutHd,
    LayoutHdTitle,
    LayoutHdAside,
    LayoutBd,
    LayoutFt,
    Items,
    Item,
    ItemAside,
    ItemContent,
    ItemTitle,
    ItemDesc,
    ItemHd,
    ItemBd,
    ItemFt,
    ItemLink
  } = Layouts,

  {SwipeItem,SwipeItems} = SwipeDelet

const _SwipeMove = React.createClass({
  getInitialState() {
    return {
      shows : [true,true,true],
      displacements : [false,false,false],
      disTouchs :[true,false,true],
      touchDefaults : [false,false,false],
      shows2 : [true],
      displacements2 : [false],
      disTouchs2 :[true],
      touchDefaults2 : [false,false,false]
    }
  },

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

  lotStateVal(len,key){
    let newArr = []
    for (var i = 0; i < len; i++) {
      let newKey = key
      newArr.push(newKey)
    }
    return newArr
  },

  otherStateVal(len,index,key,otherkey){
    let newArr = []
    for (var i = 0; i < len; i++) {
      let newKey = i == index ? key : otherkey
      newArr.push(newKey)
    }
    return newArr
  },

  _confirmdel(o){
    let len = this.state.displacements.length
    this.setState({
      shows : this.singleStateVal("shows",o,false),
      displacements : this.singleStateVal("displacements",o,true),
      touchDefaults : this.lotStateVal(len,false)
    })
  },
  _confirmcancel(o){
    let len = this.state.displacements.length
    this.setState({
      displacements : this.singleStateVal("displacements",o,false),
      touchDefaults : this.lotStateVal(len,false)
    })
  },

  _confirmcancel2(o){
    alert("我是自定义按钮的点击事件")
  },

  _confirmdel2(o){
    this.setState({
      shows2 : this.singleStateVal("shows2",o,false),
      displacements2 : this.singleStateVal("displacements2",o,true)
    })
  },

  _itemsTouchBack(o){
    let len = this.state.displacements.length
    this.setState({
      displacements : this.otherStateVal(len,o.index,o.touchState,false),
      touchDefaults : this.lotStateVal(len,o.touchState)
    })

    // console.log(123,this.otherStateVal(len,o.index,o.touchState,!o.touchState))
  },
  _itemsTouchBack2(o){
    let len = this.state.displacements2.length
    this.setState({
      displacements2 : this.otherStateVal(len,o.index,o.touchState,false),
      touchDefaults2 : this.lotStateVal(len,o.touchState)
    })
  },

  render() {
    let self = this,
      {shows,displacements,disTouchs,shows2,displacements2,disTouchs2,touchDefaults,touchDefaults2} = this.state
    return (
      <div>
        <div className="libs-intr">
          <h2><span className="icon-bin"></span> 滑动列表删除 (SwipeDelet)</h2>
          <div className="demo-show">
            <h3 className="demo-title">demo展示</h3>
          </div>

          <div className="demo-content-del pb-20">
            <SwipeItems shows={shows} displacements={displacements} touchDefaults={touchDefaults} itemsTouchBack={self._itemsTouchBack} disTouchs={disTouchs} buttons={[[
                  {
                    type: 'delet',
                    label: '删除',
                    onClick: self._confirmdel.bind(self,0)
                  },{
                    type: 'cancel',
                    label: '取消',
                    onClick: self._confirmcancel.bind(self,0)
                  }
                ],[],[
                  {
                    type: 'delet',
                    label: '删除',
                    onClick: self._confirmdel.bind(self,2)
                  }
                ]]}>
              <Item>
                <ItemHd>
                  <ItemTitle>我有两个按钮</ItemTitle>
                </ItemHd>
                <ItemBd>
                  <ItemContent>
                    <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                    <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                  </ItemContent>
                </ItemBd>
              </Item>

              <Item>
                <ItemHd>
                  <ItemTitle>我不可以滑动</ItemTitle>
                </ItemHd>
                <ItemBd>
                  <ItemContent>
                    <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                    <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                  </ItemContent>
                </ItemBd>
              </Item>

              <Item>
                <ItemHd>
                  <ItemTitle>我有一个按钮</ItemTitle>
                </ItemHd>
                <ItemBd>
                  <ItemContent>
                    <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                    <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                  </ItemContent>
                </ItemBd>
              </Item>
            </SwipeItems>

            <SwipeItems className="mt-20" itemsTouchBack={self._itemsTouchBack2} touchDefaults={touchDefaults2} shows={shows2} displacements={displacements2} disTouchs={disTouchs2} buttons={[[
                  {
                    type: 'delet',
                    label: '删除',
                    onClick: self._confirmdel2.bind(self,0)
                  },{
                    label: '自定义按钮',
                    onClick: self._confirmcancel2.bind(self,0)
                  }
                ]]}>
              <Item>
                <ItemHd>
                  <ItemTitle>单列可自定义按钮</ItemTitle>
                </ItemHd>
                <ItemBd>
                  <ItemContent>
                    <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                    <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                  </ItemContent>
                </ItemBd>
              </Item>

            </SwipeItems>


            <SwipeItems 
  shows={[true,true,true]} 
  displacements={[false,false,false]} 
  touchDefaults={[false,false,false]} 
  itemsTouchBack={self._itemsTouchBack} 
  disTouchs={[true,false,true]} 
  buttons={[[
    { 
      type: 'delet',
      label: '删除',
      onClick: self._confirmdel.bind(self,0)
    },{
      type: 'cancel',
      label: '取消',
      onClick: self._confirmcancel.bind(self,0)
    }
  ],[],[
    {
      type: 'delet',
      label: '删除',
      onClick: self._confirmdel.bind(self,2)
    }
  ]]}>
  <div className="demo-delet-item">我有两个按钮</div>
  <div className="demo-delet-item">我不可以滑动</div>
  <div className="demo-delet-item">我只有一个删除按钮</div>
</SwipeItems>

          </div>
        </div>
      </div>
    )
  }
})
module.exports = _SwipeMove