quesbook-component
Version:
212 lines (183 loc) • 8.94 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 _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);
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; } /**
* Created by az on 2017/8/7.
*/
var QbTabs = function (_Component) {
_inherits(QbTabs, _Component);
function QbTabs(props) {
_classCallCheck(this, QbTabs);
var _this = _possibleConstructorReturn(this, (QbTabs.__proto__ || Object.getPrototypeOf(QbTabs)).call(this, props));
var tabsMap = new Map();
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = props.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var tab = _step.value;
tabsMap.set(tab.ref, tab);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
_this.state = {
selectedTab: props.children[0].ref,
tabs: tabsMap
};
return _this;
}
_createClass(QbTabs, [{
key: 'tabClick',
value: function tabClick(e) {
this.setState({
selectedTab: e.target.textContent
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var tabsMap = new Map();
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = nextProps.children[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var tab = _step2.value;
tabsMap.set(tab.ref, tab);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
this.setState({
tabs: tabsMap
});
}
}, {
key: 'renderTabs',
value: function renderTabs() {
var tabStyle = this.props.tabStyle;
var tabs = [];
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = this.state.tabs.keys()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var tabKey = _step3.value;
var selectedStyle = {};
if (this.state.selectedTab === tabKey) {
selectedStyle = { opacity: 1 };
}
tabs.push(_react2.default.createElement(
'div',
{ key: tabKey, style: _extends({}, style.tab, selectedStyle, tabStyle),
onClick: this.tabClick.bind(this), value: tabKey },
tabKey
));
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
return tabs;
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
frameStyle = _props.frameStyle,
tabsStyle = _props.tabsStyle,
contentStyle = _props.contentStyle;
var tabs = this.renderTabs();
var content = this.state.tabs.get(this.state.selectedTab);
console.log('Tag tabs render: ');
return _react2.default.createElement(
'div',
{ style: _extends({}, style.frame, frameStyle) },
_react2.default.createElement(
'div',
{ style: _extends({}, style.tabs, tabsStyle) },
tabs
),
_react2.default.createElement(
'div',
{ style: _extends({}, style.content, contentStyle) },
content
)
);
}
}]);
return QbTabs;
}(_react.Component);
var style = {
frame: {
width: 300,
background: '#203a62',
display: 'flex',
flexDirection: 'column'
},
tabs: {
width: '100%',
height: 50,
display: 'flex',
flexDirection: 'row',
background: '#203a62'
},
tab: {
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#203a62',
color: '#ffffff',
opacity: 0.4
},
content: {
background: '#203a62',
margin: '0 15px',
padding: '15px 0',
borderTop: 'solid 1px rgba(255, 255, 255, 0.3)'
}
};
exports.default = QbTabs;
//# sourceMappingURL=QbTabs.js.map