@twreporter/universal-header 2.2.0-rc.5

package/lib/actions/error-action-creators.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+var _ = {
+  get: _get["default"],
+  merge: _merge["default"]
+};
+/**
+ *  Refine Axios config to remain the infomative properties.
+ *  @param {Object} axiosConfig - config provied by Axios
+ *  @return {Object} - empty object or the object containing the following properties
+ *  'url',
+ *  'method' ,
+ *  'baseURL',
+ *  'headers',
+ *  'params',
+ *  'timeout',
+ *  'withCredentials',
+ *  'auth',
+ *  'responseType',
+ *  'responseEncoding',
+ *  'maxContentLength',
+ *  'proxy'
+ *
+ *  For other removed properties,
+ *  see https://github.com/axios/axios#request-config
+ */
+
+function refineAxiosConfig(axiosConfig) {
+  if (_typeof(axiosConfig) === 'object' && axiosConfig !== null) {
+    return {
+      // request url
+      url: axiosConfig.url,
+      // requst method
+      method: axiosConfig.method,
+      // request baseURL
+      baseURL: axiosConfig.baseURL,
+      // request headers
+      headers: axiosConfig.headers,
+      // request query params
+      params: axiosConfig.params,
+      // request data
+      data: axiosConfig.data,
+      // request timeout
+      timeout: axiosConfig.timeout,
+      withCredentials: axiosConfig.withCredentials,
+      auth: axiosConfig.auth,
+      responseType: axiosConfig.responseType,
+      responseEncoding: axiosConfig.responseEncoding,
+      maxContentLength: axiosConfig.maxContentLength,
+      proxy: axiosConfig.proxy
+    };
+  }
+
+  return {};
+}
+/**
+ *  Axios Error object
+ *  @typedef {Error} AxiosError
+ *  @property {Function} toJSON
+ *  @property {Object} config - Axios config
+ *  @property {Object} request - Axios request
+ *  @property {Object} response- Axios response
+ *  @property {bool} isAxiosError
+ *  @property {string} message - Error message
+ *  @property {string} stack - Error stack
+ */
+
+/**
+ *  Refined Axios error object type definition
+ *  We only pick certain properties of Axios error to log
+ *  because of the record size limitation (250kb) of
+ *  Stackdriver logging system.
+ *  @typedef {Error} RefinedAxiosError
+ *  @property {Object} config - Refined Axios config object
+ *  @property {Object} data - Server response body
+ *  @property {Object} headers - Server response headers
+ *  @property {number} statusCode - Response status code
+ *  @property {string} message - Error message
+ *  @property {string} name - Error name
+ */
+
+/**
+ *  Error rejected from Axios contains many details
+ *  which we might not need.
+ *  Therefore, we need to remove those properties
+ *  to maintain a neat and informative object.
+ *
+ *  @param {AxiosError} err - Axios Error object
+ *  @return {RefinedAxiosError}
+ */
+
+
+function refineAxiosError(err) {
+  var config = refineAxiosConfig(_.get(err, 'config'));
+  var data = null;
+  var statusCode = 500; // internal server error
+
+  var headers = null;
+
+  var message = _.get(err, 'message');
+
+  if (err.response) {
+    data = _.get(err, 'response.data');
+    statusCode = _.get(err, 'response.status');
+    headers = _.get(err, 'response.headers');
+  } else if (err.request) {
+    message = 'A request was made but no response was received: ' + message;
+  } else {
+    message = 'An error occured when setting up the request: ' + message;
+  }
+
+  var refinedErr = new Error(message);
+  refinedErr.name = 'AxiosError';
+  refinedErr.data = data;
+  refinedErr.statusCode = statusCode;
+  refinedErr.headers = headers;
+  refinedErr.config = config;
+  return refinedErr;
+}
+/**
+ *  error action type definition
+ *  @typedef {Object} ErrorAction
+ *  @property {string} type - Action error type
+ *  @property {RefinedAxiosError} payload
+ */
+
+/**
+ *  Create an action which carefully records the details about the error.
+ *  @param {AxiosError} [err={}] - Axios Error
+ *  @param {string} failActionType
+ *  @returns {ErrorAction}
+ */
+
+
+function createAxiosErrorAction() {
+  var err = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var failActionType = arguments.length > 1 ? arguments[1] : undefined;
+  return {
+    type: failActionType,
+    payload: {
+      error: refineAxiosError(err)
+    }
+  };
+}
+
+var _default = {
+  axios: createAxiosErrorAction
+};
+exports["default"] = _default;

package/lib/components/action-button.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
+var _colors = _interopRequireDefault(require("../constants/colors"));
+
+var _actions = _interopRequireDefault(require("../constants/actions"));
+
+var _links = _interopRequireDefault(require("../utils/links"));
+
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _excluded = ["actions", "direction"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  map: _map["default"]
+};
+var styles = {
+  itemWidth: {
+    mobile: {
+      row: '48px',
+      column: '100%'
+    },
+    tablet: {
+      row: '70px',
+      column: '100%'
+    },
+    desktop: '70px'
+  },
+  itemHeight: {
+    mobile: {
+      row: 24,
+      // px
+      column: 40 // px
+
+    },
+    tablet: {
+      row: 30,
+      // px
+      column: 40 // px
+
+    },
+    desktop: 30 // px
+
+  },
+  itemMargin: {
+    row: [0, 0, 0, 10],
+    // px
+    column: [7, 0, 0, 0] // px
+
+  },
+  fontSize: {
+    mobile: {
+      row: _fonts["default"].size.small,
+      column: _fonts["default"].size.medium
+    },
+    tablet: {
+      row: _fonts["default"].size.base,
+      column: _fonts["default"].size.medium
+    },
+    desktop: _fonts["default"].size.base
+  }
+};
+
+var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button__ActionsContainer",
+  componentId: "sc-4wc24t-0"
+})(["display:flex;align-items:center;flex-direction:", ";width:100%;"], function (props) {
+  return props.direction;
+});
+
+var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button__ActionContainer",
+  componentId: "sc-4wc24t-1"
+})(["transition:opacity 0.3s;transition-delay:400ms;opacity:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
+  return props.isActive ? 1 : 0;
+}, function (props) {
+  return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
+}, function (props) {
+  return props.color || _colors["default"].white;
+}, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-size: ", ";\n    "])), function (props) {
+  return styles.fontSize.tablet[props.direction];
+}), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      font-size: ", ";\n    "])), function (props) {
+  return styles.fontSize.mobile[props.direction];
+}));
+
+var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button__ActionItem",
+  componentId: "sc-4wc24t-2"
+})(["background-color:", ";width:", ";max-width:316px;height:", "px;border-radius:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;&:hover{background-color:", ";}", " ", ""], function (props) {
+  return props.bgColor || _colors["default"].red;
+}, styles.itemWidth.desktop, styles.itemHeight.desktop, function (props) {
+  return props.hoverBgColor || _colors["default"].red;
+}, _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", ";\n  "])), function (props) {
+  return styles.itemHeight.tablet[props.direction];
+}, function (props) {
+  return styles.itemWidth.tablet[props.direction];
+}), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", ";\n  "])), function (props) {
+  return styles.itemHeight.mobile[props.direction];
+}, function (props) {
+  return styles.itemWidth.mobile[props.direction];
+}));
+
+var ActionButtonItem = function ActionButtonItem(_ref) {
+  var _action$active;
+
+  var action = _ref.action,
+      direction = _ref.direction,
+      themeFunction = _ref.themeFunction,
+      callback = _ref.callback;
+  var actionKey = action.key;
+  var isActive = (_action$active = action.active) !== null && _action$active !== void 0 ? _action$active : true;
+  var actionLabel = _actions["default"].actionLabels[actionKey];
+
+  var actionLink = _links["default"].getActionLinks()[actionKey];
+
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+    var theme = _ref2.theme;
+
+    var _themeFunction = themeFunction(theme),
+        color = _themeFunction.color,
+        bgColor = _themeFunction.bgColor,
+        hoverBgColor = _themeFunction.hoverBgColor;
+
+    return /*#__PURE__*/_react["default"].createElement(ActionContainer, {
+      color: color,
+      direction: direction,
+      isActive: isActive,
+      onClick: callback
+    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], actionLink, /*#__PURE__*/_react["default"].createElement(ActionItem, {
+      direction: direction,
+      bgColor: bgColor,
+      hoverBgColor: hoverBgColor
+    }, actionLabel)));
+  });
+};
+
+ActionButtonItem.propTypes = {
+  action: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    active: _propTypes["default"]["boolean"]
+  }),
+  direction: _propTypes["default"].string,
+  themeFunction: _propTypes["default"].func,
+  callback: _propTypes["default"].func
+};
+ActionButtonItem.defaultProps = {
+  action: {},
+  direction: 'row',
+  themeFunction: _theme["default"].selectActionButtonTheme,
+  callback: function callback() {}
+};
+
+var ActionButton = function ActionButton(_ref3) {
+  var actions = _ref3.actions,
+      direction = _ref3.direction,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(ActionsContainer, {
+    direction: direction
+  }, _.map(actions, function (action) {
+    return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, _extends({
+      action: action,
+      direction: direction,
+      key: action.key
+    }, rest));
+  }));
+};
+
+ActionButton.propTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape(ActionButtonItem.propTypes)),
+  direction: _propTypes["default"].string,
+  themeFunction: _propTypes["default"].func,
+  callback: _propTypes["default"].func
+};
+ActionButton.defaultProps = {
+  actions: [],
+  direction: 'row',
+  themeFunction: _theme["default"].selectActionButtonTheme,
+  callback: function callback() {}
+};
+var _default = ActionButton;
+exports["default"] = _default;