@twreporter/react-components 8.5.0-rc.1

package/lib/mobile-pop-up-modal.js

@@ -0,0 +1,161 @@
+"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["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _excluded = ["modalHeight", "modalWidth"];
+
+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); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Modal = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-pop-up-modal__Modal",
+  componentId: "sc-1m2meeu-0"
+})(["height:", ";width:", ";position:fixed;top:0;z-index:1000;overflow-y:scroll;max-height:-webkit-fill-available;"], function (props) {
+  return props.height;
+}, function (props) {
+  return props.width;
+});
+
+var MobileModal = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(MobileModal, _React$PureComponent);
+
+  var _super = _createSuper(MobileModal);
+
+  function MobileModal(props) {
+    var _this;
+
+    _classCallCheck(this, MobileModal);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_handleTouchmoveWhenPanning", function (event) {
+      event.preventDefault();
+
+      _this._updateScrollY(event.changedTouches[0].screenY);
+
+      _this._updateStartY(event.changedTouches[0].screenY);
+    });
+
+    _this.startY = 0;
+    _this.panel = /*#__PURE__*/_react["default"].createRef();
+    _this.handleTouchstartWhenPanning = _this._handleTouchstartWhenPanning.bind(_assertThisInitialized(_this));
+    _this.handleTouchendWhenPanning = _this._handleTouchendWhenPanning.bind(_assertThisInitialized(_this));
+    _this.handleTouchmoveWhenPanning = _this._handleTouchmoveWhenPanning.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(MobileModal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.document.body.addEventListener('touchstart', this.handleTouchstartWhenPanning, {
+        passive: false
+      });
+      window.document.body.addEventListener('touchend', this.handleTouchendWhenPanning, {
+        passive: false
+      });
+      window.document.body.addEventListener('touchmove', this.handleTouchmoveWhenPanning, {
+        passive: false
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.document.body.removeEventListener('touchstart', this.handleTouchstartWhenPanning, {
+        passive: false
+      });
+      window.document.body.removeEventListener('touchend', this.handleTouchendWhenPanning, {
+        passive: false
+      });
+      window.document.body.removeEventListener('touchmove', this.handleTouchmoveWhenPanning, {
+        passive: false
+      });
+    }
+  }, {
+    key: "_updateStartY",
+    value: function _updateStartY(startY) {
+      this.startY = startY;
+    }
+  }, {
+    key: "_updateScrollY",
+    value: function _updateScrollY(endY) {
+      this.panel.current.scrollTop += this.startY - endY;
+    }
+  }, {
+    key: "_handleTouchstartWhenPanning",
+    value: function _handleTouchstartWhenPanning(event) {
+      this._updateStartY(event.touches[0].screenY);
+    }
+  }, {
+    key: "_handleTouchendWhenPanning",
+    value: function _handleTouchendWhenPanning(event) {
+      this._updateScrollY(event.changedTouches[0].screenY);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          modalHeight = _this$props.modalHeight,
+          modalWidth = _this$props.modalWidth,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+      return /*#__PURE__*/_react["default"].createElement(Modal, _extends({
+        height: modalHeight,
+        width: modalWidth,
+        ref: this.panel
+      }, rest));
+    }
+  }]);
+
+  return MobileModal;
+}(_react["default"].PureComponent);
+
+_defineProperty(MobileModal, "propTypes", {
+  modalHeight: _propTypes["default"].string,
+  modalWidth: _propTypes["default"].string
+});
+
+_defineProperty(MobileModal, "defaultProps", {
+  modalHeight: '100vh',
+  modalWidth: '100vw'
+});
+
+var _default = MobileModal;
+exports["default"] = _default;

package/lib/more.js

@@ -0,0 +1,98 @@
+"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["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "more__Container",
+  componentId: "sc-1sv8d16-0"
+})(["cursor:pointer;width:100%;height:105px;background-color:black;text-align:center;&:hover,&:focus{polyline{stroke-width:3;}}&active{polyline{stroke-width:6;transition:all 100ms ease-in-out;}}polyline{transition:all 250ms ease-in-out;}@media only screen and (max-width:799px){height:76px;padding-top:10px;& > span{line-height:30px;font-size:16px;}}"]);
+
+var Label = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "more__Label",
+  componentId: "sc-1sv8d16-1"
+})(["color:white;line-height:70px;font-size:18px;font-weight:700;"]);
+
+var More = /*#__PURE__*/function (_Component) {
+  _inherits(More, _Component);
+
+  var _super = _createSuper(More);
+
+  function More() {
+    _classCallCheck(this, More);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(More, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          loadMore = _this$props.loadMore,
+          children = _this$props.children;
+      var points = '0,0 25,10 50,0';
+      var width = 50;
+      var height = 11;
+      return /*#__PURE__*/_react["default"].createElement(Container, {
+        onClick: loadMore
+      }, children ? _react["default"].Children.only(children) : /*#__PURE__*/_react["default"].createElement(Label, null, "\u66F4\u591A\u6587\u7AE0"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("svg", {
+        width: width,
+        height: height
+      }, /*#__PURE__*/_react["default"].createElement("polyline", {
+        points: points,
+        fill: "none",
+        stroke: "#FFFFFF",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }))));
+    }
+  }]);
+
+  return More;
+}(_react.Component);
+
+exports["default"] = More;
+
+_defineProperty(More, "propTypes", {
+  children: _propTypes["default"].node,
+  loadMore: _propTypes["default"].func.isRequired
+});

package/lib/pagination/index.js

@@ -0,0 +1,310 @@
+"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["default"] = void 0;
+
+var _predefinedCss = require("@twreporter/core/lib/constants/predefined-css");
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _concat = _interopRequireDefault(require("lodash/concat"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 _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); }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var PageDownIcon = function PageDownIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "pagedown"), /*#__PURE__*/_react["default"].createElement("path", {
+    stroke: "#3E3F3F",
+    strokeWidth: "2",
+    d: "M1 9.353l5.695-4.177L1 1",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+};
+
+PageDownIcon.defaultProps = {
+  width: "9",
+  height: "11",
+  viewBox: "0 0 9 11",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var PageUpIcon = function PageUpIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "pageup"), /*#__PURE__*/_react["default"].createElement("path", {
+    stroke: "#3E3F3F",
+    strokeWidth: "2",
+    d: "M7.695 1L2 5.176l5.695 4.177",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+};
+
+PageUpIcon.defaultProps = {
+  width: "9",
+  height: "11",
+  viewBox: "0 0 9 11",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var _ = {
+  concat: _concat["default"],
+  get: _get["default"]
+};
+var styles = {
+  btnBoxSize: {
+    mobile: 36,
+    desktop: 28
+  },
+  prevNextBtnPadding: [0, 20, 2, 20],
+  ellipsisBoxPadding: [10, 6, 10, 6],
+  containerMargin: [58, 'auto', 50, 'auto']
+};
+
+var PaginationContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "pagination__PaginationContainer",
+  componentId: "sc-17bqftr-0"
+})(["margin:", ";text-align:center;height:", "px;", ""], (0, _css.arrayToCssShorthand)(styles.containerMargin), styles.btnBoxSize.mobile, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), styles.btnBoxSize.desktop));
+
+var Boxes = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "pagination__Boxes",
+  componentId: "sc-17bqftr-1"
+})(["display:inline-block;user-select:none;"]);
+
+var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "pagination__Box",
+  componentId: "sc-17bqftr-2"
+})(["margin:0 5px 0 5px;width:", "px;height:", "px;box-sizing:border-box;user-select:none;display:inline-block;font-size:14px;cursor:pointer;color:#a67a44;position:relative;>:first-child{", "}"], styles.btnBoxSize.desktop, styles.btnBoxSize.desktop, _predefinedCss.absoluteCentering);
+
+var PageNumberBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
+  displayName: "pagination__PageNumberBox",
+  componentId: "sc-17bqftr-3"
+})(["border:solid 1px #a67a44;border-radius:50%;line-height:", "px;background-color:", ";> span{color:", ";}", ""], styles.btnBoxSize.desktop, function (props) {
+  return props.isCurrent ? '#a67a44' : 'transparent';
+}, function (props) {
+  return props.isCurrent ? '#ffffff' : '#a67a44';
+}, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: ", ";\n  "])), function (props) {
+  return props.isCurrent ? '' : 'none';
+}));
+var EllipsisBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
+  displayName: "pagination__EllipsisBox",
+  componentId: "sc-17bqftr-4"
+})(["cursor:default;padding:", ";", ""], (0, _css.arrayToCssShorthand)(styles.ellipsisBoxPadding), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+var PrevNextBtn = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
+  displayName: "pagination__PrevNextBtn",
+  componentId: "sc-17bqftr-5"
+})(["padding:", ";cursor:pointer;path{stroke:#a67a44;}"], (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding));
+/*
+Pages Array:
+
+           left-range
+          |-----------|
+                 right-range
+                |-----------|
+        < 1  2  3 4[5]6  7  8  >
+        < 1  2  3 4[5]6 ... 9  >
+        < 1 ... 4[5]6 7  8  9  >
+        < 1 ... 24[25]26 27 ... 30 >
+        < 1 ... 25[26]27 28 29  30 >
+        < 1 ... 4[5]6 7 ... 30 >
+         |-|               |-|
+     left-margin          right-margin
+                |-----|
+                 center
+            |-|         |-|
+      left-ellipsis  right-ellipsis
+
+  let margin = x, center = y
+  pages array length = 2x + y + 2
+*/
+
+var Pagination = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Pagination, _React$PureComponent);
+
+  var _super = _createSuper(Pagination);
+
+  function Pagination(props) {
+    var _this;
+
+    _classCallCheck(this, Pagination);
+
+    _this = _super.call(this, props);
+    _this._buildPagesArray = _this._buildPagesArray.bind(_assertThisInitialized(_this));
+    _this._buildPageBox = _this._buildPageBox.bind(_assertThisInitialized(_this));
+    _this._buildCenterJSX = _this._buildCenterJSX.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Pagination, [{
+    key: "_buildPageBox",
+    value: function _buildPageBox(index, currentPage) {
+      return /*#__PURE__*/_react["default"].createElement(PageNumberBox, {
+        key: "page-num-box-".concat(index),
+        isCurrent: index === currentPage,
+        onClick: this.props.handleClickPage
+      }, /*#__PURE__*/_react["default"].createElement("span", null, index));
+    }
+  }, {
+    key: "_buildCenterJSX",
+    value: function _buildCenterJSX(startAt, length, currentPage) {
+      var centerJSX = [];
+      var endAt = startAt + length - 1;
+
+      for (var i = startAt; i <= endAt; i += 1) {
+        centerJSX.push(this._buildPageBox(i, currentPage));
+      }
+
+      return centerJSX;
+    }
+  }, {
+    key: "_buildPagesArray",
+    value: function _buildPagesArray(currentPage, totalPages) {
+      var _this$props = this.props,
+          nOfMarginPages = _this$props.nOfMarginPages,
+          nOfCenterPages = _this$props.nOfCenterPages,
+          ellipsis = _this$props.ellipsis;
+      var pagesArrayMaxLength = nOfCenterPages + (nOfMarginPages + 1) * 2;
+      /* Case 1: display all pages (no ellipsis) */
+
+      if (totalPages <= pagesArrayMaxLength) {
+        var pagesArray = [];
+
+        for (var page = 1; page <= totalPages; page += 1) {
+          pagesArray.push(this._buildPageBox(page, currentPage));
+        }
+
+        return pagesArray;
+      }
+      /* Case 2: display ellipsis */
+
+
+      var isCurrentPageInLeftRange = currentPage <= nOfMarginPages + nOfCenterPages;
+      var isCurrentPageInRightRange = currentPage > totalPages - nOfMarginPages - nOfCenterPages;
+
+      var leftEllipsisJSX = /*#__PURE__*/_react["default"].createElement(EllipsisBox, {
+        key: "left-ellipsis"
+      }, ellipsis);
+
+      var rightEllipsisJSX = /*#__PURE__*/_react["default"].createElement(EllipsisBox, {
+        key: "right-ellipsis"
+      }, ellipsis);
+      /* build margin page boxes */
+
+
+      var leftMarginJSX = [];
+
+      for (var _page = 1; _page <= nOfMarginPages; _page += 1) {
+        leftMarginJSX.push(this._buildPageBox(_page, currentPage));
+      }
+
+      var rightMarginJSX = [];
+
+      for (var i = 1; i <= nOfMarginPages; i += 1) {
+        var _page2 = totalPages - nOfMarginPages + i;
+
+        rightMarginJSX.push(this._buildPageBox(_page2, currentPage));
+      }
+
+      if (isCurrentPageInLeftRange) {
+        /* Case 2-1: only show right ellipsis */
+        var _startAt = nOfMarginPages + 1;
+
+        var _length = nOfCenterPages + 1;
+
+        return _.concat(leftMarginJSX, this._buildCenterJSX(_startAt, _length, currentPage), rightEllipsisJSX, rightMarginJSX);
+      } else if (isCurrentPageInRightRange) {
+        /* Case 2-2: only show left ellipsis */
+        var _startAt2 = totalPages - nOfMarginPages - nOfCenterPages;
+
+        var _length2 = nOfCenterPages + 1;
+
+        return _.concat(leftMarginJSX, leftEllipsisJSX, this._buildCenterJSX(_startAt2, _length2, currentPage), rightMarginJSX);
+      }
+      /* Case 2-3: show both ellipses */
+
+
+      var startAt = currentPage - Math.floor(nOfCenterPages / 2) + 1;
+      var length = nOfCenterPages;
+      return _.concat(leftMarginJSX, leftEllipsisJSX, this._buildCenterJSX(startAt, length, currentPage), rightEllipsisJSX, rightMarginJSX);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          currentPage = _this$props2.currentPage,
+          totalPages = _this$props2.totalPages,
+          handleClickPrev = _this$props2.handleClickPrev,
+          handleClickNext = _this$props2.handleClickNext;
+      if (!totalPages || !currentPage) return /*#__PURE__*/_react["default"].createElement(PaginationContainer, null, /*#__PURE__*/_react["default"].createElement(Boxes, null));
+
+      var pagesArrayJSX = this._buildPagesArray(currentPage, totalPages);
+
+      var belowFirstPage = currentPage <= 1;
+      var aboveFinalPage = currentPage >= totalPages;
+      return /*#__PURE__*/_react["default"].createElement(PaginationContainer, null, /*#__PURE__*/_react["default"].createElement(Boxes, null, belowFirstPage ? null : /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
+        key: "prev-btn",
+        onClick: handleClickPrev
+      }, /*#__PURE__*/_react["default"].createElement(PageUpIcon, null)), pagesArrayJSX, aboveFinalPage ? null : /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
+        key: "next-btn",
+        onClick: handleClickNext
+      }, /*#__PURE__*/_react["default"].createElement(PageDownIcon, null))));
+    }
+  }]);
+
+  return Pagination;
+}(_react["default"].PureComponent);
+
+Pagination.propTypes = {
+  currentPage: _propTypes["default"].number.isRequired,
+  ellipsis: _propTypes["default"].string.isRequired,
+  handleClickNext: _propTypes["default"].func.isRequired,
+  handleClickPage: _propTypes["default"].func.isRequired,
+  handleClickPrev: _propTypes["default"].func.isRequired,
+  nOfCenterPages: _propTypes["default"].number.isRequired,
+  nOfMarginPages: _propTypes["default"].number.isRequired,
+  totalPages: _propTypes["default"].number.isRequired
+};
+Pagination.defaultProps = {
+  currentPage: 1,
+  totalPages: 1,
+  ellipsis: '…',
+  nOfCenterPages: 4,
+  nOfMarginPages: 1
+};
+var _default = Pagination;
+exports["default"] = _default;

package/lib/podcast-link.js

@@ -0,0 +1,73 @@
+"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["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("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 _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); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// TODO(taylrj): update to the topic landing page link
+var podcastTopicLandingPageLink = 'https://www.twreporter.org/a/podcast-list';
+
+var PodcastLandingPageLink = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(PodcastLandingPageLink, _React$PureComponent);
+
+  var _super = _createSuper(PodcastLandingPageLink);
+
+  function PodcastLandingPageLink() {
+    _classCallCheck(this, PodcastLandingPageLink);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(PodcastLandingPageLink, [{
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      var podcastLandingPageURL = podcastTopicLandingPageLink;
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        href: podcastLandingPageURL,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, children);
+    }
+  }]);
+
+  return PodcastLandingPageLink;
+}(_react["default"].PureComponent);
+
+_defineProperty(PodcastLandingPageLink, "propTypes", {
+  children: _propTypes["default"].node
+});
+
+var _default = PodcastLandingPageLink;
+exports["default"] = _default;