tuya-panel-kit
Version:
a functional component library for developing tuya device panels!
235 lines (195 loc) • 9 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _jsxFileName = 'src/components/tabbar/radio-button/group.js';
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactNative = require('react-native');
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _utils = require('../../../utils');
var _radioButton = require('./radioButton');
var _radioButton2 = _interopRequireDefault(_radioButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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; }
var convertY = _utils.RatioUtils.convertY;
var styles = _reactNative.StyleSheet.create({
activeViewStyle: {
backgroundColor: '#fff',
position: 'absolute'
},
containerStyle: {
height: convertY(30),
borderRadius: convertY(15),
borderColor: '#fff',
justifyContent: 'center',
backgroundColor: '#E3E9EE'
},
wrapperStyle: {
flexDirection: 'row'
}
});
var Group = function (_React$PureComponent) {
_inherits(Group, _React$PureComponent);
function Group(props) {
_classCallCheck(this, Group);
var _this = _possibleConstructorReturn(this, (Group.__proto__ || Object.getPrototypeOf(Group)).call(this, props));
_this.getItem = function () {
var _this$props = _this.props,
tabs = _this$props.tabs,
type = _this$props.type,
tabTextStyle = _this$props.tabTextStyle,
tabActiveTextStyle = _this$props.tabActiveTextStyle;
var buttonStyle = [{ width: _this.state.wrapperWidth / tabs.length }];
var defaultTextStyle = [{ opacity: _this.state.activeViewHidden ? 0 : 1 }];
var circleStyle = tabTextStyle && tabTextStyle.color && { backgroundColor: tabTextStyle.color };
return tabs.map(function (item, index) {
var style = item.style,
textStyle = item.textStyle,
other = _objectWithoutProperties(item, ['style', 'textStyle']);
return _react2.default.createElement(_radioButton2.default, _extends({
activeTextStyle: tabActiveTextStyle,
circleStyle: circleStyle
}, other, {
key: 'tab_' + index,
type: type,
style: [buttonStyle, style],
textStyle: [defaultTextStyle, tabTextStyle, textStyle],
onItemPress: function onItemPress() {
return _this.changeTab(index, item, item.onItemPress);
},
isActive: _this.state.activeIndex === index,
__source: {
fileName: _jsxFileName,
lineNumber: 80
}
}));
});
};
_this.moveActiveView = function (index) {
var gutter = _this.props.gutter;
var currentLeft = index * _this.state.everyWidth + gutter;
_reactNative.Animated.spring(_this.state.activeLeft, {
toValue: currentLeft
}).start();
_this.setState({
activeIndex: index
});
};
_this.changeTab = function (index, item, func) {
if (func) func(index);
if (index === _this.state.activeIndex) return;
var onChange = _this.props.onChange;
onChange && onChange(index, item);
if ('activeIndex' in _this.props) return;
_this.moveActiveView(index);
};
_this.containerLayout = function (e) {
_this.containerSize = e.nativeEvent.layout;
_this.completeCalcWidth();
};
_this.wrapperLayout = function (e) {
_this.wrapperSize = e.nativeEvent.layout;
_this.completeCalcWidth();
};
_this.completeCalcWidth = function () {
if (!_this.wrapperSize || !_this.containerSize) return;
var _this$props2 = _this.props,
tabs = _this$props2.tabs,
gutter = _this$props2.gutter;
var everyWidth = _this.wrapperSize.width / tabs.length;
_this.state.activeLeft.setValue(gutter + everyWidth * _this.state.activeIndex);
_this.setState({
containerHeight: _this.containerSize.height,
wrapperWidth: _this.wrapperSize.width,
activeViewHidden: false,
everyWidth: everyWidth
});
};
var activeIndex = props.activeIndex !== undefined ? props.activeIndex : props.defaultActiveIndex;
_this.state = {
activeLeft: new _reactNative.Animated.Value(0),
activeIndex: activeIndex,
activeViewHidden: true,
wrapperWidth: 0
};
_this.containerSize = null;
_this.wrapperSize = null;
return _this;
}
_createClass(Group, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if ('activeIndex' in nextProps) {
this.moveActiveView(nextProps.activeIndex);
}
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
style = _props.style,
wrapperStyle = _props.wrapperStyle,
activeColor = _props.activeColor,
tabs = _props.tabs,
gutter = _props.gutter;
var containerPadding = _reactNative.StyleSheet.flatten([styles.containerStyle, style]).borderRadius + gutter;
var containerStyle = [styles.containerStyle, style, { paddingHorizontal: gutter }];
var customWrapperStyle = [styles.wrapperStyle, wrapperStyle];
var activeLeft = { left: this.state.activeLeft };
var activeViewStyle = [styles.activeViewStyle, {
width: this.state.wrapperWidth / tabs.length,
height: this.state.containerHeight - gutter * 2
}, activeColor && { backgroundColor: activeColor }, { borderRadius: containerPadding }, activeLeft];
return _react2.default.createElement(
_reactNative.View,
{ onLayout: this.containerLayout, style: containerStyle, __source: {
fileName: _jsxFileName,
lineNumber: 157
}
},
!this.state.activeViewHidden && _react2.default.createElement(_reactNative.Animated.View, { style: activeViewStyle, __source: {
fileName: _jsxFileName,
lineNumber: 158
}
}),
_react2.default.createElement(
_reactNative.View,
{ onLayout: this.wrapperLayout, style: customWrapperStyle, __source: {
fileName: _jsxFileName,
lineNumber: 159
}
},
this.getItem()
)
);
}
}]);
return Group;
}(_react2.default.PureComponent);
Group.propTypes = {
tabs: _propTypes2.default.array.isRequired,
style: _reactNative.ViewPropTypes.style,
wrapperStyle: _reactNative.ViewPropTypes.style,
activeColor: _propTypes2.default.string,
activeIndex: _propTypes2.default.number,
defaultActiveIndex: _propTypes2.default.number,
gutter: _propTypes2.default.number,
onChange: _propTypes2.default.func,
type: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['radio', 'radioCircle']), _propTypes2.default.string])
};
Group.defaultProps = {
style: {},
wrapperStyle: {},
activeColor: '',
defaultActiveIndex: 0,
gutter: 2,
onChange: function onChange() {},
type: 'radio'
};
exports.default = Group;