1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.Tabs = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
13 |
|
14 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
15 |
|
16 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
17 |
|
18 | var _createClass3 = _interopRequireDefault(_createClass2);
|
19 |
|
20 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
21 |
|
22 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
23 |
|
24 | var _get2 = require('babel-runtime/helpers/get');
|
25 |
|
26 | var _get3 = _interopRequireDefault(_get2);
|
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 _reactNative = require('react-native');
|
37 |
|
38 | var _Tabs = require('./Tabs.base');
|
39 |
|
40 | var _DefaultTabBar = require('./DefaultTabBar');
|
41 |
|
42 | var _Styles = require('./Styles.native');
|
43 |
|
44 | var _Styles2 = _interopRequireDefault(_Styles);
|
45 |
|
46 | var _TabPane = require('./TabPane.native');
|
47 |
|
48 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
49 |
|
50 | var Tabs = exports.Tabs = function (_Component) {
|
51 | (0, _inherits3['default'])(Tabs, _Component);
|
52 |
|
53 | function Tabs(props) {
|
54 | (0, _classCallCheck3['default'])(this, Tabs);
|
55 |
|
56 | var _this = (0, _possibleConstructorReturn3['default'])(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, props));
|
57 |
|
58 | _this.AnimatedScrollView = _reactNative.Animated.createAnimatedComponent(_reactNative.ScrollView);
|
59 | _this.onScroll = function (evt) {
|
60 | if (evt) {
|
61 | _reactNative.Animated.event([{
|
62 | nativeEvent: { contentOffset: { x: _this.state.scrollX } }
|
63 | }])(evt);
|
64 | }
|
65 | };
|
66 | _this.setScrollView = function (sv) {
|
67 | _this.scrollView = sv;
|
68 | _this.scrollTo(_this.state.currentTab);
|
69 | };
|
70 | _this.renderContent = function () {
|
71 | var getSubElements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getSubElements();
|
72 | var _this$props = _this.props,
|
73 | tabs = _this$props.tabs,
|
74 | usePaged = _this$props.usePaged,
|
75 | destroyInactiveTab = _this$props.destroyInactiveTab,
|
76 | keyboardShouldPersistTaps = _this$props.keyboardShouldPersistTaps;
|
77 | var _this$state = _this.state,
|
78 | _this$state$currentTa = _this$state.currentTab,
|
79 | currentTab = _this$state$currentTa === undefined ? 0 : _this$state$currentTa,
|
80 | _this$state$container = _this$state.containerWidth,
|
81 | containerWidth = _this$state$container === undefined ? 0 : _this$state$container;
|
82 |
|
83 | var AnimatedScrollView = _this.AnimatedScrollView;
|
84 | return _react2['default'].createElement(
|
85 | AnimatedScrollView,
|
86 | { key: '$content', horizontal: true, pagingEnabled: usePaged, automaticallyAdjustContentInsets: false, ref: _this.setScrollView, onScroll: _this.onScroll, onMomentumScrollEnd: _this.onMomentumScrollEnd, scrollEventThrottle: 16, scrollsToTop: false, showsHorizontalScrollIndicator: false, scrollEnabled: _this.props.swipeable, directionalLockEnabled: true, alwaysBounceVertical: false, keyboardDismissMode: 'on-drag', keyboardShouldPersistTaps: keyboardShouldPersistTaps },
|
87 | tabs.map(function (tab, index) {
|
88 | var key = tab.key || 'tab_' + index;
|
89 |
|
90 | if (_this.shouldRenderTab(index)) {
|
91 | _this.tabCache[index] = _this.getSubElement(tab, index, getSubElements);
|
92 | } else if (destroyInactiveTab) {
|
93 | _this.tabCache[index] = undefined;
|
94 | }
|
95 | return _react2['default'].createElement(
|
96 | _TabPane.TabPane,
|
97 | { key: key, active: currentTab === index, style: { width: containerWidth } },
|
98 | _this.tabCache[index]
|
99 | );
|
100 | })
|
101 | );
|
102 | };
|
103 | _this.onMomentumScrollEnd = function (e) {
|
104 | var offsetX = e.nativeEvent.contentOffset.x;
|
105 | var page = _this.getOffsetIndex(offsetX, _this.state.containerWidth);
|
106 | if (_this.state.currentTab !== page) {
|
107 | _this.goToTab(page);
|
108 | }
|
109 | };
|
110 | _this.handleLayout = function (e) {
|
111 | var width = e.nativeEvent.layout.width;
|
112 |
|
113 | requestAnimationFrame(function () {
|
114 | _this.scrollTo(_this.state.currentTab, false);
|
115 | });
|
116 | if (Math.round(width) !== Math.round(_this.state.containerWidth)) {
|
117 | _this.setState({ containerWidth: width });
|
118 | }
|
119 | };
|
120 | _this.scrollTo = function (index) {
|
121 | var animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
122 | var containerWidth = _this.state.containerWidth;
|
123 |
|
124 | if (containerWidth) {
|
125 | var offset = index * containerWidth;
|
126 | if (_this.scrollView && _this.scrollView._component) {
|
127 | var scrollTo = _this.scrollView._component.scrollTo;
|
128 |
|
129 | scrollTo && scrollTo({ x: offset, animated: animated });
|
130 | }
|
131 | }
|
132 | };
|
133 | var width = _reactNative.Dimensions.get('window').width;
|
134 | var pageIndex = _this.getTabIndex(props);
|
135 | _this.state = (0, _extends3['default'])({}, _this.state, { scrollX: new _reactNative.Animated.Value(pageIndex * width), scrollValue: new _reactNative.Animated.Value(pageIndex), containerWidth: width });
|
136 | return _this;
|
137 | }
|
138 |
|
139 | (0, _createClass3['default'])(Tabs, [{
|
140 | key: 'componentDidMount',
|
141 | value: function componentDidMount() {
|
142 | var _this2 = this;
|
143 |
|
144 | this.state.scrollX.addListener(function (_ref) {
|
145 | var value = _ref.value;
|
146 |
|
147 | var scrollValue = value / _this2.state.containerWidth;
|
148 | _this2.state.scrollValue.setValue(scrollValue);
|
149 | });
|
150 | }
|
151 | }, {
|
152 | key: 'goToTab',
|
153 | value: function goToTab(index) {
|
154 | var _this3 = this;
|
155 |
|
156 | var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
157 | var animated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props.animated;
|
158 |
|
159 | var result = (0, _get3['default'])(Tabs.prototype.__proto__ || Object.getPrototypeOf(Tabs.prototype), 'goToTab', this).call(this, index, force);
|
160 | if (result) {
|
161 | requestAnimationFrame(function () {
|
162 | _this3.scrollTo(_this3.state.currentTab, animated);
|
163 | });
|
164 | }
|
165 | return result;
|
166 | }
|
167 | }, {
|
168 | key: 'render',
|
169 | value: function render() {
|
170 | var _props = this.props,
|
171 | tabBarPosition = _props.tabBarPosition,
|
172 | _props$styles = _props.styles,
|
173 | styles = _props$styles === undefined ? _Styles2['default'] : _props$styles,
|
174 | noRenderContent = _props.noRenderContent,
|
175 | keyboardShouldPersistTaps = _props.keyboardShouldPersistTaps;
|
176 | var _state = this.state,
|
177 | scrollX = _state.scrollX,
|
178 | scrollValue = _state.scrollValue,
|
179 | containerWidth = _state.containerWidth;
|
180 |
|
181 |
|
182 | var overlayTabs = false;
|
183 | var tabBarProps = (0, _extends3['default'])({}, this.getTabBarBaseProps(), { keyboardShouldPersistTaps: keyboardShouldPersistTaps, scrollX: scrollX, scrollValue: scrollValue, containerWidth: containerWidth });
|
184 | if (overlayTabs) {
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 | }
|
192 | var content = [_react2['default'].createElement(
|
193 | _reactNative.View,
|
194 | { key: '$tabbar', style: tabBarPosition === 'top' ? styles.Tabs.topTabBarSplitLine : styles.Tabs.bottomTabBarSplitLine },
|
195 | this.renderTabBar(tabBarProps, _DefaultTabBar.DefaultTabBar)
|
196 | ), !noRenderContent && this.renderContent()];
|
197 | return _react2['default'].createElement(
|
198 | _reactNative.View,
|
199 | { style: (0, _extends3['default'])({}, styles.Tabs.container, this.props.style), onLayout: this.handleLayout },
|
200 | tabBarPosition === 'top' ? content : content.reverse()
|
201 | );
|
202 | }
|
203 | }]);
|
204 | return Tabs;
|
205 | }(_Tabs.Tabs);
|
206 |
|
207 | Tabs.DefaultTabBar = _DefaultTabBar.DefaultTabBar;
|
208 | Tabs.defaultProps = (0, _extends3['default'])({}, _Tabs.Tabs.defaultProps, { style: {} }); |
\ | No newline at end of file |