weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
228 lines (187 loc) • 7.87 kB
JavaScript
/** @jsx createElement */
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _rax = require('rax');
var _nukeView = require('../../View/index.js');
var _nukeView2 = _interopRequireDefault(_nukeView);
var _nukeTouchable = require('../../Touchable/index.js');
var _nukeTouchable2 = _interopRequireDefault(_nukeTouchable);
var _nukeScrollView = require('../../ScrollView/index.js');
var _nukeScrollView2 = _interopRequireDefault(_nukeScrollView);
var _nukeEpUtils = require('../../EpUtils/index.js');
var _nukeThemeProvider = require('../../ThemeProvider/index.js');
var _index = require('../styles/index.js');
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// const ratio = window.devicePixelRatio;
var Nav = function (_Component) {
_inherits(Nav, _Component);
function Nav(props) {
_classCallCheck(this, Nav);
// 每个item的宽度 itemWidthList 可以是定值也可以是数组,如果不存在则使用flex均分渲染
var _this = _possibleConstructorReturn(this, (Nav.__proto__ || Object.getPrototypeOf(Nav)).call(this, props));
_this.onTabItemClick = function (itemData, index) {
var curIndex = _this.state.curIndex;
if (curIndex !== index) {
var slideTo = _this.props.slideTo;
slideTo(index, 'clk', _this);
}
};
_this.scrollTo = function (index) {
var navStyle = _this.props.navStyle;
var tabElement = _this.refs.nav;
var itemWidthList = _this.itemWidthList;
var selectedItemWidth = itemWidthList[index];
var screenWidth = 750;
var selectedItemOffset = 0;
var dist = void 0;
if (navStyle && navStyle.width) {
screenWidth = parseInt(navStyle.width, 10);
}
itemWidthList.forEach(function (itemData, i) {
if (i < index) {
selectedItemOffset += itemData;
}
});
dist = selectedItemOffset - screenWidth / 2 + selectedItemWidth / 2;
// @note: weex android下计算误差
// if (Detection.isWeex && Detection.Android && !isNew) {
// dist /= ratio;
// }
if (_this.maxWidth < screenWidth) {
return;
}
if (dist < 0) {
dist = 0;
} else if (dist > _this.maxWidth) {
dist = _this.maxWidth;
}
tabElement.scrollTo({
x: dist
});
};
_this.focusMove = function (index) {
if (_this.props.navFocusStyle) {
var left = 0;
var itemWidthList = _this.itemWidthList;
if (index === 1) {
left = itemWidthList[0];
} else if (index > 1) {
itemWidthList.map(function (item, i) {
if (i < index) {
left += itemWidthList[i];
} else {
return;
}
});
}
if (_nukeEpUtils.Detection.epEnable) {
var animation = require('@weex-module/animation');
// 高版本系统的手机才使用transform动画
var tabElement = (0, _rax.findDOMNode)(_this.refs.tabFocus);
// const dist = 750 * index;
animation.transition(tabElement, {
styles: {
transform: 'translateX(' + left + ')'
},
delay: 0,
duration: _nukeEpUtils.Detection.iOS ? 300 : 250, // ms
timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' // ['cubic-bezier(0.25, 0.46, 0.45, 0.94)', 'cubic-bezier(0,0,0.25,1)']
}, function () {});
} else {
_this.setState({
transform: left
});
}
}
};
if (props.dataSource instanceof Array) {
_this.itemWidthList = props.dataSource.map(function (item) {
return item.style && item.style.width || 750 / props.dataSource.length;
});
}
// @todo what's maxWidth for
// this.maxWidth = 750;
if (_this.itemWidthList.length) {
_this.maxWidth = _this.itemWidthList.reduce(function (pre, cur) {
return pre + cur;
});
}
_this.state = {
transform: 0,
curIndex: props.curIndex ? props.curIndex : 0
};
return _this;
}
_createClass(Nav, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
if (nextState.curIndex !== this.state.curIndex || nextProps.forceRender) {
return true;
}
if (nextState.transform !== this.state.transform) {
return true;
}
return false;
}
/**
* @description scroll to witch element base on index
*/
/**
* @description 选中态动效滚动样式
*/
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
dataSource = _props.dataSource,
style = _props.style,
navFocusStyle = _props.navFocusStyle,
renderNavItem = _props.renderNavItem,
themeStyle = _props.themeStyle,
navContentStyle = _props.navContentStyle;
var _state = this.state,
curIndex = _state.curIndex,
transform = _state.transform;
var tabFocusLeft = navFocusStyle && navFocusStyle.left ? parseInt(navFocusStyle.left) : 0;
return (0, _rax.createElement)(
_nukeScrollView2.default,
{
ref: 'nav',
style: [themeStyle.nav, style],
contentContainerStyle: [themeStyle.navContent, navContentStyle],
horizontal: true,
showsHorizontalScrollIndicator: false
},
navFocusStyle ? (0, _rax.createElement)(_nukeView2.default, {
ref: 'tabFocus',
style: [navFocusStyle, { left: tabFocusLeft + transform }]
}) : null,
dataSource.map(function (itemData, index) {
return (0, _rax.createElement)(
_nukeTouchable2.default,
{
key: index,
ref: 'TabItem' + index,
onPress: function onPress() {
return _this2.onTabItemClick(itemData, index);
}
},
renderNavItem(itemData, index, curIndex)
);
})
);
}
}]);
return Nav;
}(_rax.Component);
Nav.displayName = 'Ep-Tabbar';
exports.default = (0, _nukeThemeProvider.connectStyle)(_index2.default)(Nav);
module.exports = exports['default'];