Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/simple.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ const SwipeDemo = () => (
borderTop: '1px solid #dedede',
borderBottom: '1px solid #dedede',
}}
>swipe out simple demo</div>
>swipe out simple demo
</div>
</Swipeout>
);

Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rc-swipeout",
"version": "2.0.0",
"version": "2.0.1",
"description": "swipe out ui component for react(web and react-native)",
"keywords": [
"react",
Expand Down Expand Up @@ -53,8 +53,7 @@
},
"dependencies": {
"babel-runtime": "6.x",
"classnames": "^2.2.5",
"omit.js": "^1.0.0",
"classnames": "2.x",
"rc-gesture": "^0.0.15",
"react-native-swipeout": "~2.1.1"
},
Expand Down
51 changes: 29 additions & 22 deletions src/Swipeout.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Gesture from 'rc-gesture';
import omit from 'omit.js';
import classnames from 'classnames';
import SwipeoutPropType from './PropTypes';

// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
// http://caniuse.com/#search=match
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}

export default class Swipeout extends React.Component <SwipeoutPropType, any> {
static defaultProps = {
prefixCls: 'rc-swipeout',
Expand Down Expand Up @@ -48,19 +62,13 @@ export default class Swipeout extends React.Component <SwipeoutPropType, any> {
}

onCloseSwipe = (ev) => {
if (this.openedLeft || this.openedRight) {
const pNode = (node => {
while (node.parentNode && node.parentNode !== document.body) {
if (node.className.indexOf(`${this.props.prefixCls}-actions`) > -1) {
return node;
}
node = node.parentNode;
}
})(ev.target);
if (!pNode) {
ev.preventDefault();
this.close();
}
if (!(this.openedLeft || this.openedRight)) {
return;
}
const pNode = closest(ev.target, `.${this.props.prefixCls}-actions`);
if (!pNode) {
ev.preventDefault();
this.close();
}
}

Expand Down Expand Up @@ -213,18 +221,17 @@ export default class Swipeout extends React.Component <SwipeoutPropType, any> {

render() {
const { prefixCls, left, right, disabled, children, ...restProps } = this.props;
const divProps = omit(restProps, [
'autoClose',
'onOpen',
'onClose',
]);

const refProps = {
ref: el => this.content = ReactDOM.findDOMNode(el),
};
const { autoClose, onOpen, onClose, ...divProps } = restProps;

const cls = classnames(prefixCls, {
[`${prefixCls}-swiping`]: this.state.swiping,
});

const refProps = {
ref: el => this.content = ReactDOM.findDOMNode(el),
};

return (left!.length || right!.length) && !disabled ? (
<div className={cls} {...divProps}>
{/* 保证 body touchStart 后不触发 pan */}
Expand Down