quesbook-component
Version:
315 lines (277 loc) • 12.4 kB
JavaScript
;
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 _templateObject = _taggedTemplateLiteral(['\n query {\n\n }\n '], ['\n query {\n\n }\n ']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
require('./QbHeader.scss');
var _dark = require('../assets/image/logo/dark.png');
var _dark2 = _interopRequireDefault(_dark);
var _QbSideBar = require('./QbSideBar');
var _QbSideBar2 = _interopRequireDefault(_QbSideBar);
var _reactRouter = require('react-router');
var _QbMessageCard = require('../QbMessageCard');
var _QbMessageCard2 = _interopRequireDefault(_QbMessageCard);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
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 QbHeader = function (_Component) {
_inherits(QbHeader, _Component);
function QbHeader() {
_classCallCheck(this, QbHeader);
var _this = _possibleConstructorReturn(this, (QbHeader.__proto__ || Object.getPrototypeOf(QbHeader)).call(this));
_this.state = {
activeClass: '',
currentUser: null,
linkItems: [],
isShowSideBar: false,
showMessageCard: false,
messageTitle: '',
messageContent: ''
};
return _this;
}
_createClass(QbHeader, [{
key: 'componentWillMount',
value: function componentWillMount() {
var _this2 = this;
var _props = this.props,
client = _props.client,
messageId = _props.messageId;
if (messageId !== null && messageId !== undefined) {
// query message content
client.query({ query: gql(_templateObject), fetchPolicy: 'network-only' }).then(function (res) {
_this2.setState(function (prevState, props) {
return {
showMessageCard: !prevState.showMessageCard,
currentUser: props.currentUser,
linkItems: props.navItemList
};
}, function () {
return _this2.resetNavLinkItem_Active(window.location.hash);
});
}).catch(function (e) {
console.info(e);
});
} else {
this.setState({
currentUser: this.props.currentUser,
linkItems: this.props.navItemList
}, function () {
return _this2.resetNavLinkItem_Active(window.location.hash);
});
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newProps) {
var _this3 = this;
var currentUser = newProps.currentUser;
console.log('Get new', currentUser);
this.setState({
currentUser: currentUser,
linkItems: newProps.navItemList
}, function () {
return _this3.resetNavLinkItem_Active(window.location.hash);
});
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this4 = this;
window.addEventListener('scroll', function (event) {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var classScroll = '';
if (top > 50) {
classScroll = 'navbar-scroll-over';
} else {
classScroll = '';
}
_this4.setState({ activeClass: classScroll });
});
}
}, {
key: 'onClick_NavLinkItem',
value: function onClick_NavLinkItem(e) {
console.log('onClick_NavLinkItem');
this.resetNavLinkItem_Active(e.target.hash);
}
}, {
key: 'resetNavLinkItem_Active',
value: function resetNavLinkItem_Active(hashName) {
this.setState({ isShowSideBar: false });
var linkItems = this.state.linkItems;
if (linkItems.length && linkItems.length > 0) {
linkItems.map(function (item, index) {
item.isActive = hashName.indexOf(item.href) !== -1;
});
this.setState({ linkItems: linkItems });
}
}
}, {
key: 'onHover_Signed',
value: function onHover_Signed() {
this.setState({ isShowSideBar: true });
}
}, {
key: 'onClick_SignOut',
value: function onClick_SignOut() {
this.props.onClick_SignOut();
}
}, {
key: 'renderLinkItems',
value: function renderLinkItems() {
var _this5 = this;
var ret = [];
ret = this.state.linkItems.map(function (item, index) {
return _react2.default.createElement(
'li',
{ key: index, className: item.isActive ? 'active' : '' },
_react2.default.createElement(
_reactRouter.Link,
{ to: item.href, onClick: _this5.onClick_NavLinkItem.bind(_this5) },
item.label
)
);
});
return _react2.default.createElement(
'ul',
null,
ret
);
}
}, {
key: 'renderSignedLink',
value: function renderSignedLink(currentUser) {
if (currentUser && this.state.linkItems) {
return _react2.default.createElement(
'div',
{ className: 'section-ct-link' },
this.renderLinkItems()
);
} else {
return null;
}
}
}, {
key: 'messageToggle',
value: function messageToggle() {
var client = this.props.client;
// update message read record while close message card
// client.query({query: gql `
// query {
//
// }
// `, fetchPolicy: 'network-only'}).then((res) => {
this.setState(function (prevState, props) {
return {
showMessageCard: !prevState.showMessageCard
};
});
// }).catch((e) => {
// console.info(e);
// });
}
}, {
key: 'renderSign',
value: function renderSign(currentUser) {
if (currentUser) {
var userName = currentUser.name;
return _react2.default.createElement(
'div',
{ className: 'navbar-signed' },
_react2.default.createElement(
'div',
{ className: 'signed-text' },
'Welcome, ',
userName,
'!'
),
_react2.default.createElement(
'span',
{ onClick: this.onHover_Signed.bind(this), onMouseOver: this.onHover_Signed.bind(this) },
_react2.default.createElement(
'div',
{ className: 'signed-icon' },
userName.charAt(0)
),
_react2.default.createElement('div', { className: 'signed-arrowdown' })
)
);
} else {
return _react2.default.createElement(
'div',
{ className: 'navbar-unsigned' },
_react2.default.createElement(
'a',
{ href: '/users/sign_in' },
'Log in'
),
_react2.default.createElement(
'a',
{ className: 'navbar-unsigned-signup', href: '/users/sign_up' },
'Sign up'
)
);
}
}
}, {
key: 'renderTargetExam',
value: function renderTargetExam(currentUser) {
if (currentUser && currentUser.exam_type_names.length > 0) {
return currentUser.exam_type_names[0];
} else {
return null;
}
}
}, {
key: 'render',
value: function render() {
var currentUser = this.state.currentUser;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: this.state.activeClass },
_react2.default.createElement(
'div',
{ className: 'section-ct-navbar' },
_react2.default.createElement(
'div',
{ className: 'navbar-logo' },
_react2.default.createElement('img', { src: _dark2.default, alt: '' }),
_react2.default.createElement(
'span',
null,
this.renderTargetExam(currentUser)
)
),
this.renderSign(currentUser)
),
_react2.default.createElement('div', { className: 'section-ct-navbarstatic' }),
_react2.default.createElement(
'div',
null,
this.renderSignedLink(currentUser)
),
_react2.default.createElement(_QbMessageCard2.default, { display: this.state.showMessageCard,
size: 'xs',
title: this.state.messageTitle,
content: this.state.messageContent,
messageStyle: {},
onCancelClick: this.messageToggle.bind(this) })
),
_react2.default.createElement(_QbSideBar2.default, { currentUser: currentUser, isShow: this.state.isShowSideBar, onClick_SignOut: this.onClick_SignOut.bind(this) })
);
}
}]);
return QbHeader;
}(_react.Component);
exports.default = QbHeader;
//# sourceMappingURL=QbHeader.js.map