1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.Tabs = exports.StateType = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
13 |
|
14 | var _createClass3 = _interopRequireDefault(_createClass2);
|
15 |
|
16 | var _get2 = require('babel-runtime/helpers/get');
|
17 |
|
18 | var _get3 = _interopRequireDefault(_get2);
|
19 |
|
20 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
21 |
|
22 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
23 |
|
24 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
25 |
|
26 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
27 |
|
28 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
29 |
|
30 | var _inherits3 = _interopRequireDefault(_inherits2);
|
31 |
|
32 | var _react = require('react');
|
33 |
|
34 | var _react2 = _interopRequireDefault(_react);
|
35 |
|
36 | var _rcGesture = require('rc-gesture');
|
37 |
|
38 | var _rcGesture2 = _interopRequireDefault(_rcGesture);
|
39 |
|
40 | var _TabPane = require('./TabPane');
|
41 |
|
42 | var _DefaultTabBar = require('./DefaultTabBar');
|
43 |
|
44 | var _util = require('./util');
|
45 |
|
46 | var _Tabs = require('./Tabs.base');
|
47 |
|
48 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
49 |
|
50 | var getPanDirection = function getPanDirection(direction) {
|
51 | switch (direction) {
|
52 | case 2:
|
53 | case 4:
|
54 | return 'horizontal';
|
55 | case 8:
|
56 | case 16:
|
57 | return 'vertical';
|
58 | default:
|
59 | return 'none';
|
60 | }
|
61 | };
|
62 |
|
63 | var StateType = exports.StateType = function (_BaseStateType) {
|
64 | (0, _inherits3['default'])(StateType, _BaseStateType);
|
65 |
|
66 | function StateType() {
|
67 | (0, _classCallCheck3['default'])(this, StateType);
|
68 |
|
69 | var _this = (0, _possibleConstructorReturn3['default'])(this, (StateType.__proto__ || Object.getPrototypeOf(StateType)).apply(this, arguments));
|
70 |
|
71 | _this.contentPos = '';
|
72 | _this.isMoving = false;
|
73 | return _this;
|
74 | }
|
75 |
|
76 | return StateType;
|
77 | }(_Tabs.StateType);
|
78 |
|
79 | var Tabs = exports.Tabs = function (_Component) {
|
80 | (0, _inherits3['default'])(Tabs, _Component);
|
81 |
|
82 | function Tabs(props) {
|
83 | (0, _classCallCheck3['default'])(this, Tabs);
|
84 |
|
85 | var _this2 = (0, _possibleConstructorReturn3['default'])(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, props));
|
86 |
|
87 | _this2.onPan = function () {
|
88 | var lastOffset = 0;
|
89 | var finalOffset = 0;
|
90 | var panDirection = void 0;
|
91 | var getLastOffset = function getLastOffset() {
|
92 | var isVertical = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.isTabVertical();
|
93 |
|
94 | var offset = +('' + lastOffset).replace('%', '');
|
95 | if (('' + lastOffset).indexOf('%') >= 0) {
|
96 | offset /= 100;
|
97 | offset *= isVertical ? _this2.layout.clientHeight : _this2.layout.clientWidth;
|
98 | }
|
99 | return offset;
|
100 | };
|
101 | return {
|
102 | onPanStart: function onPanStart(status) {
|
103 | if (!_this2.props.swipeable || !_this2.props.animated) return;
|
104 | panDirection = getPanDirection(status.direction);
|
105 | _this2.setState({
|
106 | isMoving: true
|
107 | });
|
108 | },
|
109 | onPanMove: function onPanMove(status) {
|
110 | var _this2$props = _this2.props,
|
111 | swipeable = _this2$props.swipeable,
|
112 | animated = _this2$props.animated,
|
113 | useLeftInsteadTransform = _this2$props.useLeftInsteadTransform;
|
114 |
|
115 | if (!status.moveStatus || !_this2.layout || !swipeable || !animated) return;
|
116 | var isVertical = _this2.isTabVertical();
|
117 | var offset = getLastOffset();
|
118 | if (isVertical) {
|
119 | offset += panDirection === 'horizontal' ? 0 : status.moveStatus.y;
|
120 | } else {
|
121 | offset += panDirection === 'vertical' ? 0 : status.moveStatus.x;
|
122 | }
|
123 | var canScrollOffset = isVertical ? -_this2.layout.scrollHeight + _this2.layout.clientHeight : -_this2.layout.scrollWidth + _this2.layout.clientWidth;
|
124 | offset = Math.min(offset, 0);
|
125 | offset = Math.max(offset, canScrollOffset);
|
126 | (0, _util.setPxStyle)(_this2.layout, offset, 'px', isVertical, useLeftInsteadTransform);
|
127 | finalOffset = offset;
|
128 | },
|
129 | onPanEnd: function onPanEnd() {
|
130 | if (!_this2.props.swipeable || !_this2.props.animated) return;
|
131 | lastOffset = finalOffset;
|
132 | var isVertical = _this2.isTabVertical();
|
133 | var offsetIndex = _this2.getOffsetIndex(finalOffset, isVertical ? _this2.layout.clientHeight : _this2.layout.clientWidth);
|
134 | _this2.setState({
|
135 | isMoving: false
|
136 | });
|
137 | if (offsetIndex === _this2.state.currentTab) {
|
138 | if (_this2.props.usePaged) {
|
139 | (0, _util.setTransform)(_this2.layout.style, _this2.getContentPosByIndex(offsetIndex, _this2.isTabVertical(), _this2.props.useLeftInsteadTransform));
|
140 | }
|
141 | } else {
|
142 | _this2.goToTab(offsetIndex);
|
143 | }
|
144 | },
|
145 | setCurrentOffset: function setCurrentOffset(offset) {
|
146 | return lastOffset = offset;
|
147 | }
|
148 | };
|
149 | }();
|
150 | _this2.onSwipe = function (status) {
|
151 | var _this2$props2 = _this2.props,
|
152 | tabBarPosition = _this2$props2.tabBarPosition,
|
153 | swipeable = _this2$props2.swipeable,
|
154 | usePaged = _this2$props2.usePaged;
|
155 |
|
156 | if (!swipeable || !usePaged || _this2.isTabVertical()) return;
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 | switch (tabBarPosition) {
|
166 | case 'top':
|
167 | case 'bottom':
|
168 | switch (status.direction) {
|
169 | case 2:
|
170 | if (!_this2.isTabVertical()) {
|
171 | _this2.goToTab(_this2.prevCurrentTab + 1);
|
172 | }
|
173 | case 8:
|
174 | if (_this2.isTabVertical()) {
|
175 | _this2.goToTab(_this2.prevCurrentTab + 1);
|
176 | }
|
177 | break;
|
178 | case 4:
|
179 | if (!_this2.isTabVertical()) {
|
180 | _this2.goToTab(_this2.prevCurrentTab - 1);
|
181 | }
|
182 | case 16:
|
183 | if (_this2.isTabVertical()) {
|
184 | _this2.goToTab(_this2.prevCurrentTab - 1);
|
185 | }
|
186 | break;
|
187 | }
|
188 | break;
|
189 | }
|
190 | };
|
191 | _this2.setContentLayout = function (div) {
|
192 | _this2.layout = div;
|
193 | };
|
194 | _this2.state = (0, _extends3['default'])({}, _this2.state, new StateType(), { contentPos: _this2.getContentPosByIndex(_this2.getTabIndex(props), _this2.isTabVertical(props.tabDirection), props.useLeftInsteadTransform) });
|
195 | return _this2;
|
196 | }
|
197 |
|
198 | (0, _createClass3['default'])(Tabs, [{
|
199 | key: 'goToTab',
|
200 | value: function goToTab(index) {
|
201 | var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
202 | var usePaged = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props.usePaged;
|
203 | var props = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.props;
|
204 | var tabDirection = props.tabDirection,
|
205 | useLeftInsteadTransform = props.useLeftInsteadTransform;
|
206 |
|
207 | var newState = {};
|
208 | if (usePaged) {
|
209 | newState = {
|
210 | contentPos: this.getContentPosByIndex(index, this.isTabVertical(tabDirection), useLeftInsteadTransform)
|
211 | };
|
212 | }
|
213 | return (0, _get3['default'])(Tabs.prototype.__proto__ || Object.getPrototypeOf(Tabs.prototype), 'goToTab', this).call(this, index, force, newState, props);
|
214 | }
|
215 | }, {
|
216 | key: 'tabClickGoToTab',
|
217 | value: function tabClickGoToTab(index) {
|
218 | this.goToTab(index, false, true);
|
219 | }
|
220 | }, {
|
221 | key: 'getContentPosByIndex',
|
222 | value: function getContentPosByIndex(index, isVertical) {
|
223 | var useLeft = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
224 |
|
225 | var value = -index * 100 + '%';
|
226 | this.onPan.setCurrentOffset(value);
|
227 | if (useLeft) {
|
228 | return '' + value;
|
229 | } else {
|
230 | var translate = isVertical ? '0px, ' + value : value + ', 0px';
|
231 |
|
232 | return 'translate3d(' + translate + ', 1px)';
|
233 | }
|
234 | }
|
235 | }, {
|
236 | key: 'renderContent',
|
237 | value: function renderContent() {
|
238 | var _this3 = this;
|
239 |
|
240 | var getSubElements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getSubElements();
|
241 | var _props = this.props,
|
242 | prefixCls = _props.prefixCls,
|
243 | tabs = _props.tabs,
|
244 | animated = _props.animated,
|
245 | destroyInactiveTab = _props.destroyInactiveTab,
|
246 | useLeftInsteadTransform = _props.useLeftInsteadTransform;
|
247 | var _state = this.state,
|
248 | currentTab = _state.currentTab,
|
249 | isMoving = _state.isMoving,
|
250 | contentPos = _state.contentPos;
|
251 |
|
252 | var isTabVertical = this.isTabVertical();
|
253 | var contentCls = prefixCls + '-content-wrap';
|
254 | if (animated && !isMoving) {
|
255 | contentCls += ' ' + contentCls + '-animated';
|
256 | }
|
257 | var contentStyle = animated ? useLeftInsteadTransform ? (0, _extends3['default'])({ position: 'relative' }, this.isTabVertical() ? { top: contentPos } : { left: contentPos }) : (0, _util.getTransformPropValue)(contentPos) : (0, _extends3['default'])({ position: 'relative' }, this.isTabVertical() ? { top: -currentTab * 100 + '%' } : { left: -currentTab * 100 + '%' });
|
258 |
|
259 | var _getTabBarBaseProps = this.getTabBarBaseProps(),
|
260 | instanceId = _getTabBarBaseProps.instanceId;
|
261 |
|
262 | return _react2['default'].createElement(
|
263 | 'div',
|
264 | { className: contentCls, style: contentStyle, ref: this.setContentLayout },
|
265 | tabs.map(function (tab, index) {
|
266 | var cls = prefixCls + '-pane-wrap';
|
267 | if (_this3.state.currentTab === index) {
|
268 | cls += ' ' + cls + '-active';
|
269 | } else {
|
270 | cls += ' ' + cls + '-inactive';
|
271 | }
|
272 | var key = tab.key || 'tab_' + index;
|
273 |
|
274 | if (_this3.shouldRenderTab(index)) {
|
275 | _this3.tabCache[index] = _this3.getSubElement(tab, index, getSubElements);
|
276 | } else if (destroyInactiveTab) {
|
277 | _this3.tabCache[index] = undefined;
|
278 | }
|
279 | return _react2['default'].createElement(
|
280 | _TabPane.TabPane,
|
281 | { key: key, className: cls, active: currentTab === index, role: 'tabpanel', 'aria-hidden': currentTab !== index, 'aria-labelledby': 'm-tabs-' + instanceId + '-' + index, fixX: isTabVertical, fixY: !isTabVertical },
|
282 | _this3.tabCache[index]
|
283 | );
|
284 | })
|
285 | );
|
286 | }
|
287 | }, {
|
288 | key: 'render',
|
289 | value: function render() {
|
290 | var _props2 = this.props,
|
291 | prefixCls = _props2.prefixCls,
|
292 | tabBarPosition = _props2.tabBarPosition,
|
293 | tabDirection = _props2.tabDirection,
|
294 | useOnPan = _props2.useOnPan,
|
295 | noRenderContent = _props2.noRenderContent;
|
296 |
|
297 | var isTabVertical = this.isTabVertical(tabDirection);
|
298 | var tabBarProps = (0, _extends3['default'])({}, this.getTabBarBaseProps());
|
299 | var onPan = !isTabVertical && useOnPan ? this.onPan : {};
|
300 | var content = [_react2['default'].createElement(
|
301 | 'div',
|
302 | { key: 'tabBar', className: prefixCls + '-tab-bar-wrap' },
|
303 | this.renderTabBar(tabBarProps, _DefaultTabBar.DefaultTabBar)
|
304 | ), !noRenderContent && _react2['default'].createElement(
|
305 | _rcGesture2['default'],
|
306 | (0, _extends3['default'])({ key: '$content', onSwipe: this.onSwipe }, onPan),
|
307 | this.renderContent()
|
308 | )];
|
309 | return _react2['default'].createElement(
|
310 | 'div',
|
311 | { className: prefixCls + ' ' + prefixCls + '-' + tabDirection + ' ' + prefixCls + '-' + tabBarPosition },
|
312 | tabBarPosition === 'top' || tabBarPosition === 'left' ? content : content.reverse()
|
313 | );
|
314 | }
|
315 | }]);
|
316 | return Tabs;
|
317 | }(_Tabs.Tabs);
|
318 |
|
319 | Tabs.DefaultTabBar = _DefaultTabBar.DefaultTabBar;
|
320 | Tabs.defaultProps = (0, _extends3['default'])({}, _Tabs.Tabs.defaultProps, { prefixCls: 'rmc-tabs', useOnPan: true }); |
\ | No newline at end of file |