1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
12 |
|
13 | var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
14 |
|
15 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
16 |
|
17 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
18 |
|
19 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
20 |
|
21 | var _createClass3 = _interopRequireDefault(_createClass2);
|
22 |
|
23 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
24 |
|
25 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
26 |
|
27 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
28 |
|
29 | var _inherits3 = _interopRequireDefault(_inherits2);
|
30 |
|
31 | var _react = require('react');
|
32 |
|
33 | var _react2 = _interopRequireDefault(_react);
|
34 |
|
35 | var _reactDom = require('react-dom');
|
36 |
|
37 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
38 |
|
39 | var _rcGesture = require('rc-gesture');
|
40 |
|
41 | var _rcGesture2 = _interopRequireDefault(_rcGesture);
|
42 |
|
43 | var _classnames2 = require('classnames');
|
44 |
|
45 | var _classnames3 = _interopRequireDefault(_classnames2);
|
46 |
|
47 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
48 |
|
49 | var __rest = undefined && undefined.__rest || function (s, e) {
|
50 | var t = {};
|
51 | for (var p in s) {
|
52 | if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
53 | }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
54 | if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
|
55 | }return t;
|
56 | };
|
57 |
|
58 |
|
59 |
|
60 | function closest(el, selector) {
|
61 | var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
|
62 | while (el) {
|
63 | if (matchesSelector.call(el, selector)) {
|
64 | return el;
|
65 | } else {
|
66 | el = el.parentElement;
|
67 | }
|
68 | }
|
69 | return null;
|
70 | }
|
71 |
|
72 | var Swipeout = function (_React$Component) {
|
73 | (0, _inherits3['default'])(Swipeout, _React$Component);
|
74 |
|
75 | function Swipeout(props) {
|
76 | (0, _classCallCheck3['default'])(this, Swipeout);
|
77 |
|
78 | var _this = (0, _possibleConstructorReturn3['default'])(this, (Swipeout.__proto__ || Object.getPrototypeOf(Swipeout)).call(this, props));
|
79 |
|
80 | _this.onCloseSwipe = function (ev) {
|
81 | if (!(_this.openedLeft || _this.openedRight)) {
|
82 | return;
|
83 | }
|
84 | var pNode = closest(ev.target, '.' + _this.props.prefixCls + '-actions');
|
85 | if (!pNode) {
|
86 | ev.preventDefault();
|
87 | _this.close();
|
88 | }
|
89 | };
|
90 | _this.onPanStart = function (e) {
|
91 | var direction = e.direction,
|
92 | moveStatus = e.moveStatus;
|
93 | var deltaX = moveStatus.x;
|
94 |
|
95 |
|
96 | var isLeft = direction === 2;
|
97 | var isRight = direction === 4;
|
98 | if (!isLeft && !isRight) {
|
99 | return;
|
100 | }
|
101 | var _this$props = _this.props,
|
102 | left = _this$props.left,
|
103 | right = _this$props.right;
|
104 |
|
105 | _this.needShowRight = isLeft && right.length > 0;
|
106 | _this.needShowLeft = isRight && left.length > 0;
|
107 | if (_this.left) {
|
108 | _this.left.style.visibility = _this.needShowRight ? 'hidden' : 'visible';
|
109 | }
|
110 | if (_this.right) {
|
111 | _this.right.style.visibility = _this.needShowLeft ? 'hidden' : 'visible';
|
112 | }
|
113 | if (_this.needShowLeft || _this.needShowRight) {
|
114 | _this.swiping = true;
|
115 | _this.setState({
|
116 | swiping: _this.swiping
|
117 | });
|
118 | _this._setStyle(deltaX);
|
119 | }
|
120 | };
|
121 | _this.onPanMove = function (e) {
|
122 | var moveStatus = e.moveStatus;
|
123 | var deltaX = moveStatus.x;
|
124 |
|
125 | if (!_this.swiping) {
|
126 | return;
|
127 | }
|
128 | _this._setStyle(deltaX);
|
129 | };
|
130 | _this.onPanEnd = function (e) {
|
131 | if (!_this.swiping) {
|
132 | return;
|
133 | }
|
134 | var moveStatus = e.moveStatus;
|
135 | var deltaX = moveStatus.x;
|
136 |
|
137 | var needOpenRight = _this.needShowRight && Math.abs(deltaX) > _this.btnsRightWidth / 2;
|
138 | var needOpenLeft = _this.needShowLeft && Math.abs(deltaX) > _this.btnsLeftWidth / 2;
|
139 | if (needOpenRight) {
|
140 | _this.doOpenRight();
|
141 | } else if (needOpenLeft) {
|
142 | _this.doOpenLeft();
|
143 | } else {
|
144 | _this.close();
|
145 | }
|
146 | _this.swiping = false;
|
147 | _this.setState({
|
148 | swiping: _this.swiping
|
149 | });
|
150 | _this.needShowLeft = false;
|
151 | _this.needShowRight = false;
|
152 | };
|
153 | _this.doOpenLeft = function () {
|
154 | _this.open(_this.btnsLeftWidth, true, false);
|
155 | };
|
156 | _this.doOpenRight = function () {
|
157 | _this.open(-_this.btnsRightWidth, true, false);
|
158 | };
|
159 |
|
160 | _this._setStyle = function (value) {
|
161 | var limit = value > 0 ? _this.btnsLeftWidth : -_this.btnsRightWidth;
|
162 | var contentLeft = _this._getContentEasing(value, limit);
|
163 | _this.content.style.left = contentLeft + 'px';
|
164 | if (_this.cover) {
|
165 | _this.cover.style.display = Math.abs(value) > 0 ? 'block' : 'none';
|
166 | _this.cover.style.left = contentLeft + 'px';
|
167 | }
|
168 | };
|
169 | _this.open = function (value, openedLeft, openedRight) {
|
170 | if (!_this.openedLeft && !_this.openedRight && _this.props.onOpen) {
|
171 | _this.props.onOpen();
|
172 | }
|
173 | _this.openedLeft = openedLeft;
|
174 | _this.openedRight = openedRight;
|
175 | _this._setStyle(value);
|
176 | };
|
177 | _this.close = function () {
|
178 | if ((_this.openedLeft || _this.openedRight) && _this.props.onClose) {
|
179 | _this.props.onClose();
|
180 | }
|
181 | _this._setStyle(0);
|
182 | _this.openedLeft = false;
|
183 | _this.openedRight = false;
|
184 | };
|
185 | _this.state = {
|
186 | swiping: false
|
187 | };
|
188 | _this.openedLeft = false;
|
189 | _this.openedRight = false;
|
190 | return _this;
|
191 | }
|
192 |
|
193 | (0, _createClass3['default'])(Swipeout, [{
|
194 | key: 'componentDidMount',
|
195 | value: function componentDidMount() {
|
196 | this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
|
197 | this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
|
198 | document.body.addEventListener('touchstart', this.onCloseSwipe, true);
|
199 | }
|
200 | }, {
|
201 | key: 'componentWillUnmount',
|
202 | value: function componentWillUnmount() {
|
203 | document.body.removeEventListener('touchstart', this.onCloseSwipe, true);
|
204 | }
|
205 |
|
206 |
|
207 | }, {
|
208 | key: 'onBtnClick',
|
209 | value: function onBtnClick(ev, btn) {
|
210 | var onPress = btn.onPress;
|
211 | if (onPress) {
|
212 | onPress(ev);
|
213 | }
|
214 | if (this.props.autoClose) {
|
215 | this.close();
|
216 | }
|
217 | }
|
218 | }, {
|
219 | key: '_getContentEasing',
|
220 | value: function _getContentEasing(value, limit) {
|
221 |
|
222 | var delta = Math.abs(value) - Math.abs(limit);
|
223 | var isOverflow = delta > 0;
|
224 | var factor = limit > 0 ? 1 : -1;
|
225 | if (isOverflow) {
|
226 | value = limit + Math.pow(delta, 0.85) * factor;
|
227 | return Math.abs(value) > Math.abs(limit) ? limit : value;
|
228 | }
|
229 | return value;
|
230 | }
|
231 | }, {
|
232 | key: 'renderButtons',
|
233 | value: function renderButtons(buttons, _ref) {
|
234 | var _this2 = this;
|
235 |
|
236 | var prefixCls = this.props.prefixCls;
|
237 | return buttons && buttons.length ? _react2['default'].createElement(
|
238 | 'div',
|
239 | { className: prefixCls + '-actions ' + prefixCls + '-actions-' + _ref, ref: function ref(el) {
|
240 | return _this2[_ref] = el;
|
241 | } },
|
242 | buttons.map(function (btn, i) {
|
243 | return _react2['default'].createElement(
|
244 | 'div',
|
245 | { key: i, className: prefixCls + '-btn ' + (btn.hasOwnProperty('className') ? btn.className : ''), style: btn.style, role: 'button', onClick: function onClick(e) {
|
246 | return _this2.onBtnClick(e, btn);
|
247 | } },
|
248 | _react2['default'].createElement(
|
249 | 'div',
|
250 | { className: prefixCls + '-btn-text' },
|
251 | btn.text || 'Click'
|
252 | )
|
253 | );
|
254 | })
|
255 | ) : null;
|
256 | }
|
257 | }, {
|
258 | key: 'render',
|
259 | value: function render() {
|
260 | var _this3 = this;
|
261 |
|
262 | var _a = this.props,
|
263 | prefixCls = _a.prefixCls,
|
264 | left = _a.left,
|
265 | right = _a.right,
|
266 | disabled = _a.disabled,
|
267 | children = _a.children,
|
268 | restProps = __rest(_a, ["prefixCls", "left", "right", "disabled", "children"]);
|
269 | var autoClose = restProps.autoClose,
|
270 | onOpen = restProps.onOpen,
|
271 | onClose = restProps.onClose,
|
272 | divProps = __rest(restProps, ["autoClose", "onOpen", "onClose"]);
|
273 |
|
274 | var cls = (0, _classnames3['default'])(prefixCls, (0, _defineProperty3['default'])({}, prefixCls + '-swiping', this.state.swiping));
|
275 | var refProps = {
|
276 | ref: function ref(el) {
|
277 | return _this3.content = _reactDom2['default'].findDOMNode(el);
|
278 | }
|
279 | };
|
280 | return (left.length || right.length) && !disabled ? _react2['default'].createElement(
|
281 | 'div',
|
282 | (0, _extends3['default'])({ className: cls }, divProps),
|
283 | _react2['default'].createElement('div', { className: prefixCls + '-cover', ref: function ref(el) {
|
284 | return _this3.cover = el;
|
285 | } }),
|
286 | this.renderButtons(left, 'left'),
|
287 | this.renderButtons(right, 'right'),
|
288 | _react2['default'].createElement(
|
289 | _rcGesture2['default'],
|
290 | (0, _extends3['default'])({ onPanStart: this.onPanStart, onPanMove: this.onPanMove, onPanEnd: this.onPanEnd, onPanCancel: this.onPanEnd, onSwipeLeft: this.doOpenRight, onSwipeRight: this.doOpenLeft, direction: 'horizontal' }, refProps),
|
291 | _react2['default'].createElement(
|
292 | 'div',
|
293 | { className: prefixCls + '-content' },
|
294 | children
|
295 | )
|
296 | )
|
297 | ) : _react2['default'].createElement(
|
298 | 'div',
|
299 | (0, _extends3['default'])({}, refProps, divProps),
|
300 | children
|
301 | );
|
302 | }
|
303 | }]);
|
304 | return Swipeout;
|
305 | }(_react2['default'].Component);
|
306 |
|
307 | exports['default'] = Swipeout;
|
308 |
|
309 | Swipeout.defaultProps = {
|
310 | prefixCls: 'rc-swipeout',
|
311 | autoClose: false,
|
312 | disabled: false,
|
313 | left: [],
|
314 | right: [],
|
315 | onOpen: function onOpen() {},
|
316 | onClose: function onClose() {}
|
317 | };
|
318 | module.exports = exports['default']; |
\ | No newline at end of file |