@twreporter/react-components 8.5.0-rc.1

package/lib/side-bar/index.js

@@ -0,0 +1,317 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnchorWrapper = AnchorWrapper;
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
+var _smoothscroll = _interopRequireDefault(require("smoothscroll"));
+
+var _reactWaypoint = require("react-waypoint");
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _excluded = ["children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var _ = {
+  get: _get["default"]
+};
+/**
+ * Get react component display name
+ *
+ * @param {object} DecoratedComponent
+ * @returns {string} display name of react component
+ */
+
+function getDisplayName(DecoratedComponent) {
+  return DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
+}
+
+function AnchorWrapper(_ref) {
+  var children = _ref.children;
+  return _react["default"].Children.only(children);
+}
+
+AnchorWrapper.defaultProps = {
+  anchorLabel: '',
+  showAnchor: false
+};
+AnchorWrapper.propTypes = {
+  anchorId: _propTypes["default"].string.isRequired,
+  anchorLabel: _propTypes["default"].string,
+  showAnchor: _propTypes["default"].bool,
+  children: _propTypes["default"].element.isRequired
+};
+/**
+ * `decorateSideBar`
+ * returns a High Order Component adding the side bar functionalities onto `DecoratedComponent`.
+ * It passes props such as `currentAnchorId`, `handleClickAnchor` to the `DecoratedComponent`.
+ * `DecoratedSideBar` will map the anchor ids to the sections which are passed as React children,
+ * `currentAnchorId` indicates which section is in the viewport right now.
+ * `handleClickAnchor` is a function which can be used to scroll to the certain section.
+ *
+ * For example,
+ * ```
+ * // react component to render side bar
+ * const SideBar = ({anchors, currentAnchorId, handleClickAnchor}) => {
+ *  const anchorsJSX = []
+ *  anchors.ForEach((anchor) => {
+ *     anchorsJSX.push(
+ *      <div
+ *        key={anchor.id}
+ *        onClick={(e) => handleClickAnchor(anchor.id, e)}
+ *        style={{color: currentAnchorId === anchor.id ? 'black' : 'white'}}
+ *      >
+ *        {anchor.label}
+ *      </div>
+ *    )
+ *  })
+ *  return (
+ *    <div>
+ *      {anchorsJSX}
+ *    </div>
+ *  )
+ * }
+ *
+ * const DecoratedSideBar = decoratedSideBar(SideBar)
+ *
+ * const SideBarWithContent = () => {
+ *  return (
+ *    <DecoratedSideBar>
+ *      <AnchorWrapper anchorId="section-1" anchorLabel="Section One">
+ *        <SectionOne />
+ *      </AnchorWrapper>
+ *      <AnchorWrapper anchorId="section-2" anchorLabel="Section Two">
+ *        <SectionTwo />
+ *      </AnchorWrapper>
+ *      <AnchorWrapper anchorId="section-3" anchorLabel="Section Three">
+ *        <SectionThree />
+ *      </AnchorWrapper>
+ *    </DecoratedSideBar>
+ *  )
+ * }
+ *
+ *
+ * The above codes will render three sections and side bar on the same page.
+ * When the section, like `SectionTwo`, scrolls into the viewport,
+ * the anchor of that section(`Section Two`) will be black, and others will be white.
+ *
+ * And when user click the anchor, say if `Secetion Two`, the browser will auto scroll to `SectionTwo`,
+ * and anchor `Section Two` will be black.
+ *
+ * ```
+ *
+ * @param {Object} DecoratedComponent A React component wants to have side bar functionality
+ * @returns {Object} A React component with side bar functionalities
+ */
+
+function decorateSideBar(DecoratedComponent) {
+  var firstSection = 'first';
+  var lastSection = 'last';
+  var secondLastSection = 'second-last';
+
+  var DecoratedSideBar = /*#__PURE__*/function (_React$PureComponent) {
+    _inherits(DecoratedSideBar, _React$PureComponent);
+
+    var _super = _createSuper(DecoratedSideBar);
+
+    function DecoratedSideBar(props) {
+      var _this;
+
+      _classCallCheck(this, DecoratedSideBar);
+
+      _this = _super.call(this, props);
+      _this.state = {
+        currentSection: '',
+        previousSection: ''
+      };
+      _this.handleClickAnchor = _this._handleClickAnchor.bind(_assertThisInitialized(_this));
+      _this.handleOnEnter = _this._handleOnEnter.bind(_assertThisInitialized(_this));
+      _this.handleOnLeave = _this._handleOnLeave.bind(_assertThisInitialized(_this)); // moduleID to Module
+
+      _this.moduleMap = {};
+      return _this;
+    }
+
+    _createClass(DecoratedSideBar, [{
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.moduleMap = {};
+      }
+    }, {
+      key: "_handleClickAnchor",
+      value: function _handleClickAnchor(moduleID, e) {
+        if (e) {
+          e.preventDefault();
+        }
+
+        var node = this.moduleMap[moduleID];
+
+        if (node) {
+          // scroll to the section
+          return (0, _smoothscroll["default"])(node.offsetTop);
+        }
+
+        return null;
+      }
+    }, {
+      key: "_handleOnEnter",
+      value: function _handleOnEnter(nextSection) {
+        this.setState({
+          previousSection: this.state.currentSection,
+          currentSection: nextSection
+        });
+      }
+      /**
+       * Function will be invoked when the section is out of viewport.
+       * Currently only handle the first section and last section.
+       * For the middle sections, except for the first and last one, could be handled by `onEnter` function.
+       *
+       * @param {string} onLeaveSection - Section id
+       * @param {Object} props - Passed from Waypoint onLeave callback
+       * @param {string} props.currentPosition - One of `Waypoint.below`, `Waypoint.above`, `Waypoint.inside`, `Waypoint.invisible`
+       * @param {string} order - Section order, could be 'first' or 'last'
+       */
+
+    }, {
+      key: "_handleOnLeave",
+      value: function _handleOnLeave(onLeaveSection, props, order) {
+        if (order && onLeaveSection === this.state.currentSection) {
+          // the following conditions are for edge cases.
+          // avoid Waypoint not invoking `onEnter` function.
+          if (order === firstSection && props.currentPosition === 'above' || order === lastSection && props.currentPosition === 'below' || order === secondLastSection && props.currentPosition === 'above') {
+            return this.setState({
+              currentSection: this.state.previousSection,
+              previousSection: onLeaveSection
+            });
+          } // leave the sections controlled by side bar
+
+
+          this.setState({
+            currentSection: '',
+            previousSection: onLeaveSection
+          });
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this2 = this;
+
+        var _this$props = this.props,
+            children = _this$props.children,
+            passThroughProps = _objectWithoutProperties(_this$props, _excluded);
+
+        var modules;
+
+        if (!children) {
+          modules = [];
+        } else if (Array.isArray(children)) {
+          modules = children;
+        } else {
+          modules = [children];
+        }
+
+        var anchors = modules.map(function (module) {
+          var anchorObj = {
+            id: _.get(module.props, 'anchorId'),
+            label: _.get(module.props, 'anchorLabel', ''),
+            show: _.get(module.props, 'showAnchor', false)
+          };
+
+          if (anchorObj.id) {
+            return anchorObj;
+          }
+        });
+        var webSiteContent = modules.map(function (module, index) {
+          var moduleID = _.get(anchors, [index, 'id'], "side_bar_module_".concat(index));
+
+          var order;
+
+          if (index === 0) {
+            order = firstSection;
+          } else if (index === modules.length - 1) {
+            order = lastSection;
+          } else if (index === modules.length - 2) {
+            order = secondLastSection;
+          }
+
+          return /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
+            key: moduleID,
+            onLeave: function onLeave(props) {
+              _this2.handleOnLeave(moduleID, props, order);
+            },
+            onEnter: function onEnter(props) {
+              _this2.handleOnEnter(moduleID, props);
+            },
+            fireOnRapidScroll: true,
+            topOffset: "4%",
+            bottomOffset: order === lastSection ? '50%' : '95%',
+            scrollableAncestor: "window"
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            id: moduleID,
+            ref: function ref(node) {
+              _this2.moduleMap[moduleID] = node;
+            }
+          }, module));
+        });
+        return /*#__PURE__*/_react["default"].createElement(DecoratedComponent, _extends({
+          anchors: anchors,
+          handleClickAnchor: this.handleClickAnchor,
+          currentAnchorId: this.state.currentSection
+        }, passThroughProps), webSiteContent);
+      }
+    }]);
+
+    return DecoratedSideBar;
+  }(_react["default"].PureComponent);
+
+  DecoratedSideBar.displayName = "SideBarHOC(".concat(getDisplayName(DecoratedComponent), ")");
+  DecoratedSideBar.defaultProps = {
+    children: []
+  };
+  DecoratedSideBar.propTypes = {
+    children: _propTypes["default"].arrayOf(_propTypes["default"].element)
+  };
+  return (0, _hoistNonReactStatics["default"])(DecoratedSideBar, DecoratedComponent);
+}
+
+var _default = decorateSideBar;
+exports["default"] = _default;