React address demo js file

Address.js

import React from 'react';
import ReactDOM from 'react-dom';
import '../styles/swiper.css';

function coroutine(f) {
  const o = f(); // instantiate the coroutine
  o.next(); // execute until the first yield
  return function(x) {
    o.next(x);
  };
}

export default class Item extends React.Component {
  startupTouchEvent = this.startupTouchEvent.bind(this)
  startupClickEvent = this.startupClickEvent.bind(this)
  removeTouchEvent = this.removeTouchEvent.bind(this)
  openMask = this.openMask.bind(this)
  moveMask = this.moveMask.bind(this)
  closeMaskIfNeeded = this.closeMaskIfNeeded.bind(this)
  constructor(props) {
    super(props);
    const that = this;
    this.moveLoop = coroutine(function*() {
      let e = {};
      while (e = yield) {
        if (e.type === 'touchstart') {
          // trace position
          const startX = e.touches[0].clientX;
          while (e = yield) {
            if (e.type === 'touchmove') {
              // trace position
              const movedX = e.changedTouches[0].clientX;
              const deltaX = movedX - startX;
              if (deltaX <= 0) {
                that.moveMask(deltaX);
              }
            }
            if (e.type === 'touchend') {
              const endX = e.changedTouches[0].clientX;
              const deltaX = endX - startX;
              if (deltaX >= -40) {
                that.closeMaskIfNeeded();
              } else {
                that.openMask();
              }
              break;
            }
          }
        }
      }
    })
  }
  state = {
    left: 0
  }
  componentDidMount() {
    this.startupTouchEvent();
    this.startupClickEvent();
  }
  componentWillUnmount() {
    this.removeTouchEvent();
  }
  render() {
    const {
      name,
      mobile,
      provinceName,
      cityName,
      districtName,
      detailedAddress,
      onClick,
      selected,
      onDelete,
      onEdit,
    } = this.props;
    const { left } = this.state;
    return (
      <div className="address-swipe-wrapper">
        <div className="swiper-operation-btns">
          <button style={{
            backgroundColor: '#7EA1D6'
          }} onClick={onEdit}>
            编辑
          </button>
          <button style={{
            backgroundColor: 'red'
          }} onClick={onDelete}>
            删除
          </button>
        </div>
        <div className="address-item" onClick={onClick} style={{
          left
        }}>
          {selected &&
            <img className="address-item-selected-icon" src={require('../img/check.png')} alt="选中" />
          }
          <div className="address-content">
            <div style={{
              fontSize: 15,
              fontWeight: 'bold',
              marginBottom: 4,
            }}>{`${name}  ${mobile}`}</div>
            <div style={{
              fontSize: 13,
              color: '#555',
            }}>{provinceName+cityName+districtName+detailedAddress}</div>
          </div>
        </div>
      </div>
    );
  }
  startupTouchEvent() {
    const current = ReactDOM.findDOMNode(this);
    current.addEventListener('touchstart', this.moveLoop);
    current.addEventListener('touchend', this.moveLoop);
    current.addEventListener('touchmove', this.moveLoop);
  }
  startupClickEvent() {
    // window.addEventListener('touchstart', this.closeMaskIfNeeded);
  }
  removeTouchEvent() {
    const current = ReactDOM.findDOMNode(this);
    current.removeEventListener('touchstart', this.moveLoop);
    current.removeEventListener('touchend', this.moveLoop);
    current.removeEventListener('touchmove', this.moveLoop);
  }
  removeClickEvent() {
    // window.removeEventListener('touchstart', this.closeMaskIfNeeded);
  }
  openMask() {
    this.setState({
      left: -160
    });
  }
  moveMask(deltaX) {
    this.setState({
      left: deltaX
    });
  }
  closeMaskIfNeeded() {
    this.setState({
      left: 0
    });
  }
}

Here is the swiper.css :

div.address-swipe-wrapper {
  width: 100vw;
  background-color: white;
  position: relative;
}

div.swiper-operation-btns {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

div.swiper-layer button {
  width: 80px;
  height: 100%;
  color: white;
  font-size: 15px;
  font-weight: 500;
}