twreporter-react-index-page/lib/components/side-bar.js

twreporter index page version 2

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.moduleIdObj = undefined;

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactWaypoint = require('react-waypoint');

var _reactWaypoint2 = _interopRequireDefault(_reactWaypoint);

var _sectionStrings = require('../constants/section-strings');

var _sectionStrings2 = _interopRequireDefault(_sectionStrings);

var _smoothscroll = require('smoothscroll');

var _smoothscroll2 = _interopRequireDefault(_smoothscroll);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _commonVariables = require('../styles/common-variables');

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; } /* global React */


var anchorsList = [];
var moduleIdObj = {};
for (var key in _sectionStrings2.default) {
  if (Object.prototype.hasOwnProperty.call(_sectionStrings2.default, key)) {
    anchorsList.push(key);
    moduleIdObj[key] = key;
  }
}

var Container = _styledComponents2.default.div.withConfig({
  displayName: 'side-bar__Container',
  componentId: 's1ntabz8-0'
})(['font-size: ', ';position: fixed;right: calc((100% - 1024px)/2 + 1px);color: ', ';z-index: 2;margin-top: 104px;@media (max-width: 1038px) {right: 1px;}@media (max-width: 730px) {display: none;}'], _commonVariables.fonts.size.base, _commonVariables.colors.primaryColor);

var SectionButton = _styledComponents2.default.div.withConfig({
  displayName: 'side-bar__SectionButton',
  componentId: 's1ntabz8-1'
})(['writing-mode: vertical-rl;letter-spacing: 2px;margin-bottom: 15px;padding: 3px 0;font-weight: 500;&:hover {cursor: pointer;}color: ', ';background: ', ';'], function (props) {
  return props.highlight ? 'white' : '' + _commonVariables.colors.primaryColor;
}, function (props) {
  return props.highlight ? '' + _commonVariables.colors.primaryColor : 'none';
});
var SectoinAnchor = _styledComponents2.default.a.withConfig({
  displayName: 'side-bar__SectoinAnchor',
  componentId: 's1ntabz8-2'
})(['text-decoration: none;']);

var SideBar = function (_React$Component) {
  _inherits(SideBar, _React$Component);

  function SideBar(props) {
    _classCallCheck(this, SideBar);

    var _this = _possibleConstructorReturn(this, (SideBar.__proto__ || Object.getPrototypeOf(SideBar)).call(this, props));

    _this.state = {
      currentSection: '',
      previousSection: ''
    };
    _this.handleOnEnter = _this._handleOnEnter.bind(_this);
    _this.handleOnLeave = _this._handleOnLeave.bind(_this);
    _this.moduleMap = {};
    _this.scrollTo = _this._scrollTo.bind(_this);
    return _this;
  }

  _createClass(SideBar, [{
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.moduleMap = {};
    }
  }, {
    key: '_handleOnEnter',
    value: function _handleOnEnter(nextSection) {
      var currentSection = this.state.currentSection;

      this.setState({
        currentSection: nextSection,
        previousSection: currentSection
      });
    }
  }, {
    key: '_handleOnLeave',
    value: function _handleOnLeave(onLeaveSection) {
      var _state = this.state,
          currentSection = _state.currentSection,
          previousSection = _state.previousSection;

      if (onLeaveSection === currentSection) {
        this.setState({
          currentSection: previousSection,
          previousSection: onLeaveSection
        });
      }
    }
  }, {
    key: '_scrollTo',
    value: function _scrollTo(moduleId) {
      var node = this.moduleMap[moduleId];
      if (node) {
        return (0, _smoothscroll2.default)(node.offsetTop);
      }
      return null;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var navBarSections = anchorsList.map(function (value) {
        return React.createElement(
          SectoinAnchor,
          {
            href: '#' + value,
            key: 'SectionButton_' + value,
            onClick: function onClick() {
              _this2.scrollTo(value);
            }
          },
          React.createElement(
            SectionButton,
            {
              highlight: value === _this2.state.currentSection
            },
            _sectionStrings2.default[value]
          )
        );
      });
      var webSiteContent = this.props.children.map(function (singleModule, index) {
        var moduleId = singleModule.props.moduleId;

        if (anchorsList.includes(moduleId)) {
          return React.createElement(
            _reactWaypoint2.default,
            {
              key: 'Single_Module_' + moduleId,
              onLeave: function onLeave() {
                _this2.handleOnLeave(moduleId);
              },
              onEnter: function onEnter(obj) {
                _this2.handleOnEnter(moduleId, obj.previousPosition);
              },
              fireOnRapidScroll: true,
              topOffset: '4%',
              bottomOffset: index + 1 === _this2.props.children.length ? '50%' : '95%'
            },
            React.createElement(
              'div',
              {
                id: moduleId,
                ref: function ref(input) {
                  _this2.moduleMap[moduleId] = input;
                }
              },
              singleModule
            )
          );
        }
        return React.createElement('span', null);
      });

      return React.createElement(
        'div',
        null,
        React.createElement(
          Container,
          null,
          navBarSections
        ),
        webSiteContent
      );
    }
  }]);

  return SideBar;
}(React.Component);

SideBar.defaultProps = {
  children: []
};

SideBar.propTypes = {
  children: _propTypes2.default.array
};

exports.default = SideBar;
exports.moduleIdObj = moduleIdObj;