MemberList.js

import React from 'react';
import { SwipeAction } from 'antd-mobile';
import $ from 'jquery';

import { sortArr } from '../../utils/dataFilter';
import css from './css.less';

class MemberList extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      searchVal:'',
      isShowTips: true,
      letters: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']
    }
  }


  swipeBack(el, i) {
    $(el).find('.am-swipe-cover, .am-swipe-content').css('left', 0);
  }

  render() {
    const { dataList, pTitle, showActionSheet, chooseClient, handleAction, renderItem, renderType, filterData, handleEdit,isCheckClientStateForSwipe } = this.props;
    const list = sortArr(dataList, renderType);
    const isf = typeof handleAction === 'function';
    return  <div className={css.listWrap}>
      <div className={css.splitline}></div>
      <div className={css.search}>
        <input
          onChange={(e) => {
            this.setState({ searchVal: e.target.value });
            filterData(e.target.value.trim());
          }}
          value={this.state.searchVal}
          placeholder={"请输入" + pTitle + "姓名"} />
      </div>
      <div className={css.subTip}>所有{pTitle}<i>（{dataList.length}人）</i></div>
      <div className={css.scrollListWrap} ref={el=>this.nameList=el}>
        <div className={css.list}>
          {
            list.length>0 && list.map((itm, index) => {
              return <dl key={index} ref={el=>this['list'+itm.letter]=el}  >
                <dt>{itm.letter}</dt>
                {
                  itm.list.map((item, i) => {
                    let disabled = false;
                    if (isCheckClientStateForSwipe) {
                      disabled = item.currentState && item.currentState !== '2';
                    }
                  return <dd key={index + '_' + i} onClick={() => {
                    if (chooseClient) {
                      chooseClient(item);
                    }
                  }}><SwipeAction
                    disabled={disabled||!isf}
                    right={[
                      {
                        text: '编辑',
                        onPress: () => {
                          this.swipeBack(this['list' + itm.letter]);
                          handleEdit(item);
                        },
                        style: { backgroundColor: '#ddd', color: 'white' },
                      },
                      {
                        text: '删除',
                        onPress: () => {
                          this.swipeBack(this['list' + itm.letter]);
                          this.setState({
                            isShowTips: true
                          })
                          isf && handleAction(item);
                        },
                        style: { backgroundColor: '#F4333C', color: 'white' },
                      },
                    ]}
                    >
                      {
                        renderItem(item, index + '_' + i)
                      }
                    </SwipeAction>
                  </dd>
                  })
                }
              </dl>
            })
          }
        </div>
      </div>
      {
        // 是否有选择操作
        showActionSheet && <div className={css.btnAdd} onClick={ showActionSheet }></div>
      }
      <ul className={css.indexList}>
        {
          // 右侧字母索引
          this.state.letters.map((item,i) => {
            return <li key={i} onClick={() => {
              for (let j = 0; j < list.length; j++){
                if (list[j].letter === item) {
                  this['nameList'].scrollTop = this['list' + item].offsetTop;
                }
              }
              
            }}>{item}</li>
          })
        }
      </ul>
    </div>
  }
}

export default MemberList;