@twreporter/universal-header/lib/components/hamburger-menu-item.stories.js

Universal header of TWReporter sites

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.menuSubItem = exports.menuLinkItem = exports["default"] = exports.MenuDropdownItemExample = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _previewApi = require("@storybook/preview-api");
var _hamburgerMenuItem = require("./hamburger-menu-item");
var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
var _constants = require("../storybook/constants");
var _theme = require("@twreporter/core/lib/constants/theme");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable react/prop-types */ /* eslint react/display-name:0 */ /* eslint react-hooks/rules-of-hooks:0 */
var _default = exports["default"] = {
  title: 'Hamburger/Item',
  component: _hamburgerMenuItem.MenuLinkItem,
  argTypes: {
    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
  }
};
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  displayName: "hamburger-menu-itemstories__Container",
  componentId: "xfb28s-0"
})(["width:375px;background-color:", ";padding:16px 0;box-shadow:0px 0px 24px rgba(0,0,0,0.1);"], function (props) {
  return props.$bgColor;
});
var getBgColor = function getBgColor(theme) {
  if (theme === _theme.THEME.photography) {
    return {
      bgColor: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #052142'
    };
  }
  return {
    bgColor: 'white'
  };
};
var menuLinkItem = exports.menuLinkItem = {
  render: function render(props) {
    var theme = props.theme,
      releaseBranch = props.releaseBranch;
    var context = {
      theme: theme,
      releaseBranch: releaseBranch,
      isLinkExternal: true
    };
    var _getBgColor = getBgColor(theme),
      bgColor = _getBgColor.bgColor;
    return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
      value: context
    }, /*#__PURE__*/_react["default"].createElement(Container, {
      $bgColor: bgColor
    }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuLinkItem, props)));
  },
  args: {
    text: '深度專題'
  }
};
var MenuDropdownItemExample = exports.MenuDropdownItemExample = {
  render: function render(props) {
    var _useArgs = (0, _previewApi.useArgs)(),
      _useArgs2 = _slicedToArray(_useArgs, 2),
      isActive = _useArgs2[0].isActive,
      updateArgs = _useArgs2[1];
    var theme = props.theme,
      releaseBranch = props.releaseBranch,
      text = props.text;
    var context = {
      theme: theme,
      releaseBranch: releaseBranch,
      isLinkExternal: true
    };
    var _getBgColor2 = getBgColor(theme),
      bgColor = _getBgColor2.bgColor;
    var handleClick = function handleClick() {
      return updateArgs({
        isActive: !isActive
      });
    };
    return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
      value: context
    }, /*#__PURE__*/_react["default"].createElement(Container, {
      bgColor: bgColor
    }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuDropdownItem, {
      text: text,
      isActive: isActive,
      onClick: handleClick
    })));
  },
  args: {
    text: '議題',
    isActive: false
  }
};
var menuSubItem = exports.menuSubItem = {
  render: function render(props) {
    var theme = props.theme;
    var context = {
      theme: theme,
      isLinkExternal: true
    };
    var _getBgColor3 = getBgColor(theme),
      bgColor = _getBgColor3.bgColor;
    return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
      value: context
    }, /*#__PURE__*/_react["default"].createElement(Container, {
      bgColor: bgColor
    }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuSubItem, props)));
  },
  args: {
    text: '小標題'
  }
};