@twreporter/universal-header
Version:
Universal header of TWReporter sites
163 lines (160 loc) • 9.15 kB
JavaScript
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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"));
var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
var _links = require("../utils/links");
var _actions = require("../constants/actions");
var _actionItemTypes = require("../constants/action-item-types");
var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
var _css = require("@twreporter/core/lib/utils/css");
var _button = require("@twreporter/react-components/lib/button");
var _theme = require("@twreporter/core/lib/constants/theme");
var _map = _interopRequireDefault(require("lodash/map"));
var _excluded = ["actions", "direction", "textType", "buttonWidth", "buttonSize", "callback", "isForHambuger"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } // util
// constant
// @twreporter
// lodash
var _ = {
map: _map["default"]
};
// global var
var defaultFunc = function defaultFunc() {};
var styles = {
itemMargin: {
row: [0, 0, 0, 16],
// px
column: [16, 0, 0, 0] // px
}
};
var StyledPillButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.PillButton).withConfig({
displayName: "action-button-item__StyledPillButton",
componentId: "z0zuf3-0"
})(["justify-content:center;", ""], function (props) {
return props.$buttonWidth === 'stretch' ? 'width: auto !important;' : '';
});
var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "action-button-item__ActionItem",
componentId: "z0zuf3-1"
})(["display:flex;align-items:center;justify-content:center;margin:", ";&:first-child{margin-top:0;margin-left:0;}a{text-decoration:none;}"], function (props) {
return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.$direction]);
});
var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "action-button-item__ActionsContainer",
componentId: "z0zuf3-2"
})(["display:flex;align-items:center;flex-direction:", ";&,", ",a{", "}"], function (props) {
return props.$direction;
}, ActionItem, function (props) {
return props.$buttonWidth === 'stretch' ? 'width: 100%;' : '';
});
var ActionButtonItem = function ActionButtonItem(_ref) {
var _ref$action = _ref.action,
action = _ref$action === void 0 ? {} : _ref$action,
_ref$direction = _ref.direction,
direction = _ref$direction === void 0 ? _actionItemTypes.DIRECTION_TYPE.row : _ref$direction,
_ref$textType = _ref.textType,
textType = _ref$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref$textType,
_ref$buttonWidth = _ref.buttonWidth,
buttonWidth = _ref$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref$buttonWidth,
_ref$buttonSize = _ref.buttonSize,
buttonSize = _ref$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref$buttonSize,
_ref$callback = _ref.callback,
callback = _ref$callback === void 0 ? defaultFunc : _ref$callback,
_ref$isForHambuger = _ref.isForHambuger,
isForHambuger = _ref$isForHambuger === void 0 ? false : _ref$isForHambuger;
var _useContext = (0, _react.useContext)(_headerContext["default"]),
theme = _useContext.theme,
isLinkExternal = _useContext.isLinkExternal,
releaseBranch = _useContext.releaseBranch;
var buttonTheme;
if (isForHambuger) {
if (theme === _theme.THEME.transparent) {
buttonTheme = _theme.THEME.normal;
} else {
buttonTheme = theme;
}
} else {
buttonTheme = theme;
}
var actionKey = action.key;
var actionId = action.id;
var actionLabel = _actions.ACTION_LABEL[textType][actionKey];
var actionLink = (0, _links.getActionLinks)(isLinkExternal, releaseBranch)[actionKey];
var buttonType = _actions.ACTION_BUTTON_TYPE[actionKey];
return /*#__PURE__*/_react["default"].createElement(ActionItem, {
onClick: callback,
$direction: direction
}, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({
id: actionId
}, actionLink), /*#__PURE__*/_react["default"].createElement(StyledPillButton, {
text: actionLabel,
theme: buttonTheme,
type: buttonType,
size: buttonSize,
$buttonWidth: buttonWidth
})));
};
ActionButtonItem.propTypes = {
action: _propTypes["default"].shape({
key: _propTypes["default"].string
}),
direction: _actionItemTypes.DIRECTION_PROP_TYPE,
textType: _actionItemTypes.TEXT_PROP_TYPE,
buttonWidth: _actionItemTypes.BUTTON_WIDTH_PROP_TYPE,
buttonSize: _actionItemTypes.BUTTON_SIZE_PROP_TYPE,
callback: _propTypes["default"].func,
isForHambuger: _propTypes["default"].bool
};
var ActionButton = function ActionButton(_ref2) {
var _ref2$actions = _ref2.actions,
actions = _ref2$actions === void 0 ? [] : _ref2$actions,
_ref2$direction = _ref2.direction,
direction = _ref2$direction === void 0 ? _actionItemTypes.DIRECTION_TYPE.row : _ref2$direction,
_ref2$textType = _ref2.textType,
textType = _ref2$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref2$textType,
_ref2$buttonWidth = _ref2.buttonWidth,
buttonWidth = _ref2$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref2$buttonWidth,
_ref2$buttonSize = _ref2.buttonSize,
buttonSize = _ref2$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref2$buttonSize,
_ref2$callback = _ref2.callback,
callback = _ref2$callback === void 0 ? defaultFunc : _ref2$callback,
_ref2$isForHambuger = _ref2.isForHambuger,
isForHambuger = _ref2$isForHambuger === void 0 ? false : _ref2$isForHambuger,
rest = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/_react["default"].createElement(ActionsContainer, _extends({
$direction: direction,
$buttonWidth: buttonWidth
}, rest), _.map(actions, function (action) {
return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, {
action: action,
direction: direction,
textType: textType,
buttonWidth: buttonWidth,
buttonSize: buttonSize,
key: action.key,
isForHambuger: isForHambuger,
callback: callback
});
}));
};
ActionButton.propTypes = {
actions: _propTypes["default"].arrayOf(ActionButtonItem.propTypes.action),
direction: ActionButtonItem.propTypes.direction,
textType: ActionButtonItem.propTypes.textType,
buttonWidth: ActionButtonItem.propTypes.buttonWidth,
buttonSize: ActionButtonItem.propTypes.buttonSize,
callback: _propTypes["default"].func,
isForHambuger: _propTypes["default"].bool
};
var _default = exports["default"] = ActionButton;