Skip to content

Instantly share code, notes, and snippets.

@FaiChou FaiChou/Address.js
Last active Jan 4, 2019

Embed
What would you like to do?
React address demo js file
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
});
}
}
@FaiChou

This comment has been minimized.

Copy link
Owner Author

commented Jan 4, 2019

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.