@twreporter/universal-header 2.8.0 → 2.9.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/lib/components/action-button.js +4 -9
- package/lib/components/hamburger-footer-old.js +162 -0
- package/lib/components/hamburger-menu.js +8 -3
- package/lib/constants/footer-old.js +24 -0
- package/lib/constants/footer.js +5 -4
- package/lib/containers/header.js +1 -6
- package/lib/utils/links-old.js +15 -18
- package/lib/utils/links.js +1 -1
- package/package.json +4 -4
- package/lib/components/action-button-item-old.js +0 -187
- package/lib/components/hamburger-menu-old.js +0 -384
- package/lib/components/header-old.js +0 -347
- package/lib/components/icons-old.js +0 -298
- package/lib/constants/services-old.js +0 -31
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
|
-
var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
|
|
17
|
-
|
|
18
|
-
var _linksOld = require("../utils/links-old");
|
|
19
|
-
|
|
20
|
-
var _actions = require("../constants/actions");
|
|
21
|
-
|
|
22
|
-
var _actionItemTypes = require("../constants/action-item-types");
|
|
23
|
-
|
|
24
|
-
var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
|
|
25
|
-
|
|
26
|
-
var _css = require("@twreporter/core/lib/utils/css");
|
|
27
|
-
|
|
28
|
-
var _button = require("@twreporter/react-components/lib/button");
|
|
29
|
-
|
|
30
|
-
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
31
|
-
|
|
32
|
-
var _map = _interopRequireDefault(require("lodash/map"));
|
|
33
|
-
|
|
34
|
-
var _excluded = ["actions", "direction", "textType", "buttonWidth", "buttonSize", "callback", "isForHambuger"];
|
|
35
|
-
|
|
36
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
37
|
-
|
|
38
|
-
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); }
|
|
39
|
-
|
|
40
|
-
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; }
|
|
41
|
-
|
|
42
|
-
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); }
|
|
43
|
-
|
|
44
|
-
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; }
|
|
45
|
-
|
|
46
|
-
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; }
|
|
47
|
-
|
|
48
|
-
var _ = {
|
|
49
|
-
map: _map["default"]
|
|
50
|
-
}; // global var
|
|
51
|
-
|
|
52
|
-
var defaultFunc = function defaultFunc() {};
|
|
53
|
-
|
|
54
|
-
var styles = {
|
|
55
|
-
itemMargin: {
|
|
56
|
-
row: [0, 0, 0, 16],
|
|
57
|
-
// px
|
|
58
|
-
column: [16, 0, 0, 0] // px
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
var StyledPillButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.PillButton).withConfig({
|
|
63
|
-
displayName: "action-button-item-old__StyledPillButton",
|
|
64
|
-
componentId: "xdvfjj-0"
|
|
65
|
-
})(["justify-content:center;", ""], function (props) {
|
|
66
|
-
return props.buttonWidth === 'stretch' ? 'width: auto;' : '';
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
70
|
-
displayName: "action-button-item-old__ActionItem",
|
|
71
|
-
componentId: "xdvfjj-1"
|
|
72
|
-
})(["display:flex;align-items:center;justify-content:center;margin:", ";&:first-child{margin-top:0;margin-left:0;}a{text-decoration:none;}"], function (props) {
|
|
73
|
-
return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
77
|
-
displayName: "action-button-item-old__ActionsContainer",
|
|
78
|
-
componentId: "xdvfjj-2"
|
|
79
|
-
})(["display:flex;align-items:center;flex-direction:", ";&,", ",a{", "}"], function (props) {
|
|
80
|
-
return props.direction;
|
|
81
|
-
}, ActionItem, function (props) {
|
|
82
|
-
return props.buttonWidth === 'stretch' ? 'width: 100%;' : '';
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
var ActionButtonItem = function ActionButtonItem(_ref) {
|
|
86
|
-
var _ref$action = _ref.action,
|
|
87
|
-
action = _ref$action === void 0 ? {} : _ref$action,
|
|
88
|
-
_ref$direction = _ref.direction,
|
|
89
|
-
direction = _ref$direction === void 0 ? _actionItemTypes.DIRECTION_TYPE.row : _ref$direction,
|
|
90
|
-
_ref$textType = _ref.textType,
|
|
91
|
-
textType = _ref$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref$textType,
|
|
92
|
-
_ref$buttonWidth = _ref.buttonWidth,
|
|
93
|
-
buttonWidth = _ref$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref$buttonWidth,
|
|
94
|
-
_ref$buttonSize = _ref.buttonSize,
|
|
95
|
-
buttonSize = _ref$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref$buttonSize,
|
|
96
|
-
_ref$callback = _ref.callback,
|
|
97
|
-
callback = _ref$callback === void 0 ? defaultFunc : _ref$callback,
|
|
98
|
-
_ref$isForHambuger = _ref.isForHambuger,
|
|
99
|
-
isForHambuger = _ref$isForHambuger === void 0 ? false : _ref$isForHambuger;
|
|
100
|
-
|
|
101
|
-
var _useContext = (0, _react.useContext)(_headerContext["default"]),
|
|
102
|
-
theme = _useContext.theme;
|
|
103
|
-
|
|
104
|
-
var buttonTheme;
|
|
105
|
-
|
|
106
|
-
if (isForHambuger) {
|
|
107
|
-
if (theme === _theme.THEME.transparent) {
|
|
108
|
-
buttonTheme = _theme.THEME.normal;
|
|
109
|
-
} else {
|
|
110
|
-
buttonTheme = theme;
|
|
111
|
-
}
|
|
112
|
-
} else {
|
|
113
|
-
buttonTheme = theme;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
var actionKey = action.key;
|
|
117
|
-
var actionLabel = _actions.ACTION_LABEL[textType][actionKey];
|
|
118
|
-
var actionLink = (0, _linksOld.getActionLinks)()[actionKey];
|
|
119
|
-
var buttonType = _actions.ACTION_BUTTON_TYPE[actionKey];
|
|
120
|
-
return /*#__PURE__*/_react["default"].createElement(ActionItem, {
|
|
121
|
-
onClick: callback,
|
|
122
|
-
direction: direction
|
|
123
|
-
}, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], actionLink, /*#__PURE__*/_react["default"].createElement(StyledPillButton, {
|
|
124
|
-
text: actionLabel,
|
|
125
|
-
theme: buttonTheme,
|
|
126
|
-
type: buttonType,
|
|
127
|
-
size: buttonSize,
|
|
128
|
-
buttonWidth: buttonWidth
|
|
129
|
-
})));
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
ActionButtonItem.propTypes = {
|
|
133
|
-
action: _propTypes["default"].shape({
|
|
134
|
-
key: _propTypes["default"].string
|
|
135
|
-
}),
|
|
136
|
-
direction: _actionItemTypes.DIRECTION_PROP_TYPE,
|
|
137
|
-
textType: _actionItemTypes.TEXT_PROP_TYPE,
|
|
138
|
-
buttonWidth: _actionItemTypes.BUTTON_WIDTH_PROP_TYPE,
|
|
139
|
-
buttonSize: _actionItemTypes.BUTTON_SIZE_PROP_TYPE,
|
|
140
|
-
callback: _propTypes["default"].func,
|
|
141
|
-
isForHambuger: _propTypes["default"].bool
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
var ActionButton = function ActionButton(_ref2) {
|
|
145
|
-
var _ref2$actions = _ref2.actions,
|
|
146
|
-
actions = _ref2$actions === void 0 ? [] : _ref2$actions,
|
|
147
|
-
_ref2$direction = _ref2.direction,
|
|
148
|
-
direction = _ref2$direction === void 0 ? _actionItemTypes.DIRECTION_TYPE.row : _ref2$direction,
|
|
149
|
-
_ref2$textType = _ref2.textType,
|
|
150
|
-
textType = _ref2$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref2$textType,
|
|
151
|
-
_ref2$buttonWidth = _ref2.buttonWidth,
|
|
152
|
-
buttonWidth = _ref2$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref2$buttonWidth,
|
|
153
|
-
_ref2$buttonSize = _ref2.buttonSize,
|
|
154
|
-
buttonSize = _ref2$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref2$buttonSize,
|
|
155
|
-
_ref2$callback = _ref2.callback,
|
|
156
|
-
callback = _ref2$callback === void 0 ? defaultFunc : _ref2$callback,
|
|
157
|
-
_ref2$isForHambuger = _ref2.isForHambuger,
|
|
158
|
-
isForHambuger = _ref2$isForHambuger === void 0 ? false : _ref2$isForHambuger,
|
|
159
|
-
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
160
|
-
|
|
161
|
-
return /*#__PURE__*/_react["default"].createElement(ActionsContainer, _extends({
|
|
162
|
-
direction: direction,
|
|
163
|
-
buttonWidth: buttonWidth
|
|
164
|
-
}, rest), _.map(actions, function (action) {
|
|
165
|
-
return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, {
|
|
166
|
-
action: action,
|
|
167
|
-
direction: direction,
|
|
168
|
-
textType: textType,
|
|
169
|
-
buttonWidth: buttonWidth,
|
|
170
|
-
buttonSize: buttonSize,
|
|
171
|
-
key: action.key,
|
|
172
|
-
isForHambuger: isForHambuger
|
|
173
|
-
});
|
|
174
|
-
}));
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
ActionButton.propTypes = {
|
|
178
|
-
actions: _propTypes["default"].arrayOf(ActionButtonItem.propTypes.action),
|
|
179
|
-
direction: ActionButtonItem.propTypes.direction,
|
|
180
|
-
textType: ActionButtonItem.propTypes.textType,
|
|
181
|
-
buttonWidth: ActionButtonItem.propTypes.buttonWidth,
|
|
182
|
-
buttonSize: ActionButtonItem.propTypes.buttonSize,
|
|
183
|
-
callback: _propTypes["default"].func,
|
|
184
|
-
isForHambuger: _propTypes["default"].bool
|
|
185
|
-
};
|
|
186
|
-
var _default = ActionButton;
|
|
187
|
-
exports["default"] = _default;
|
|
@@ -1,384 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
|
-
var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
|
|
17
|
-
|
|
18
|
-
var _links = require("../utils/links");
|
|
19
|
-
|
|
20
|
-
var _theme = require("../utils/theme");
|
|
21
|
-
|
|
22
|
-
var _channels = require("../constants/channels");
|
|
23
|
-
|
|
24
|
-
var _hamburgerMenu = require("../constants/hamburger-menu");
|
|
25
|
-
|
|
26
|
-
var _actionButton = require("./action-button");
|
|
27
|
-
|
|
28
|
-
var _hamburgerFooter = _interopRequireDefault(require("./hamburger-footer"));
|
|
29
|
-
|
|
30
|
-
var _hamburgerMenuItem = require("./hamburger-menu-item");
|
|
31
|
-
|
|
32
|
-
var _iconsOld = require("./icons-old");
|
|
33
|
-
|
|
34
|
-
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
35
|
-
|
|
36
|
-
var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
|
|
37
|
-
|
|
38
|
-
var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
|
|
39
|
-
|
|
40
|
-
var _button = require("@twreporter/react-components/lib/button");
|
|
41
|
-
|
|
42
|
-
var _icon = require("@twreporter/react-components/lib/icon");
|
|
43
|
-
|
|
44
|
-
var _logo = require("@twreporter/react-components/lib/logo");
|
|
45
|
-
|
|
46
|
-
var _input = require("@twreporter/react-components/lib/input");
|
|
47
|
-
|
|
48
|
-
var _categorySet = require("@twreporter/core/lib/constants/category-set");
|
|
49
|
-
|
|
50
|
-
var _theme2 = require("@twreporter/core/lib/constants/theme");
|
|
51
|
-
|
|
52
|
-
var _rwd = require("@twreporter/react-components/lib/rwd");
|
|
53
|
-
|
|
54
|
-
var _map = _interopRequireDefault(require("lodash/map"));
|
|
55
|
-
|
|
56
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
57
|
-
|
|
58
|
-
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); }
|
|
59
|
-
|
|
60
|
-
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; }
|
|
61
|
-
|
|
62
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
63
|
-
|
|
64
|
-
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); }
|
|
65
|
-
|
|
66
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
67
|
-
|
|
68
|
-
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."); }
|
|
69
|
-
|
|
70
|
-
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); }
|
|
71
|
-
|
|
72
|
-
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; }
|
|
73
|
-
|
|
74
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
75
|
-
|
|
76
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
77
|
-
|
|
78
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
79
|
-
|
|
80
|
-
var _ = {
|
|
81
|
-
map: _map["default"]
|
|
82
|
-
}; // global var
|
|
83
|
-
|
|
84
|
-
var reserveHeightForIos15 = 48;
|
|
85
|
-
|
|
86
|
-
var MenuContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
87
|
-
displayName: "hamburger-menu-old__MenuContainer",
|
|
88
|
-
componentId: "ai0vhm-0"
|
|
89
|
-
})(["width:", ";height:100vh;max-height:100vh;overflow-y:scroll;overscroll-behavior:contain;background-color:", ";-webkit-overflow-scrolling:touch;", " ", " &::-webkit-scrollbar{background-color:transparent;width:4px;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
|
|
90
|
-
return props.bgColor;
|
|
91
|
-
}, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", ";\n "])), _hamburgerMenu.MENU_WIDTH.tablet), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n max-height: ", ";\n padding-bottom: ", "px;\n "])), _hamburgerMenu.MENU_WIDTH.mobile, function (props) {
|
|
92
|
-
return props.mobileHeight;
|
|
93
|
-
}, function (props) {
|
|
94
|
-
return props.mobileHeight;
|
|
95
|
-
}, reserveHeightForIos15 + 48), function (props) {
|
|
96
|
-
return props.scrollBarColor;
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
var CloseSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
100
|
-
displayName: "hamburger-menu-old__CloseSection",
|
|
101
|
-
componentId: "ai0vhm-1"
|
|
102
|
-
})(["display:flex;padding:24px 32px 16px 0;justify-content:end;align-items:center;", ""], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
103
|
-
|
|
104
|
-
var LogoSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
105
|
-
displayName: "hamburger-menu-old__LogoSection",
|
|
106
|
-
componentId: "ai0vhm-2"
|
|
107
|
-
})(["display:flex;justify-content:center;a{display:flex;}img{height:24px;width:24px;}", ""], _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
108
|
-
|
|
109
|
-
var SearchSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
110
|
-
displayName: "hamburger-menu-old__SearchSection",
|
|
111
|
-
componentId: "ai0vhm-3"
|
|
112
|
-
})(["display:flex;justify-content:center;align-items:center;padding:24px 32px 0 32px;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 24px 32px 8px 32px;\n "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
113
|
-
|
|
114
|
-
var ContentSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
115
|
-
displayName: "hamburger-menu-old__ContentSection",
|
|
116
|
-
componentId: "ai0vhm-4"
|
|
117
|
-
})(["padding-top:16px;"]);
|
|
118
|
-
|
|
119
|
-
var ActionSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
120
|
-
displayName: "hamburger-menu-old__ActionSection",
|
|
121
|
-
componentId: "ai0vhm-5"
|
|
122
|
-
})(["padding:40px 32px 32px 32px;"]);
|
|
123
|
-
|
|
124
|
-
var HeaderSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
125
|
-
displayName: "hamburger-menu-old__HeaderSection",
|
|
126
|
-
componentId: "ai0vhm-6"
|
|
127
|
-
})(["display:flex;justify-content:space-between;padding:16px 24px;"]);
|
|
128
|
-
|
|
129
|
-
var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
130
|
-
displayName: "hamburger-menu-old__FlexGroup",
|
|
131
|
-
componentId: "ai0vhm-7"
|
|
132
|
-
})(["display:flex;align-items:center;img{height:21px;}"]);
|
|
133
|
-
|
|
134
|
-
var DropdownItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
135
|
-
displayName: "hamburger-menu-old__DropdownItemContainer",
|
|
136
|
-
componentId: "ai0vhm-8"
|
|
137
|
-
})([""]);
|
|
138
|
-
|
|
139
|
-
var SubContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
140
|
-
displayName: "hamburger-menu-old__SubContainer",
|
|
141
|
-
componentId: "ai0vhm-9"
|
|
142
|
-
})(["max-height:", ";overflow:hidden;transition:max-height 300ms ease-in-out;"], function (props) {
|
|
143
|
-
return props.isActive ? '300px' : '0';
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
147
|
-
displayName: "hamburger-menu-old__DividerContainer",
|
|
148
|
-
componentId: "ai0vhm-10"
|
|
149
|
-
})(["margin:16px 32px;"]);
|
|
150
|
-
|
|
151
|
-
var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
152
|
-
displayName: "hamburger-menu-old__IconContainer",
|
|
153
|
-
componentId: "ai0vhm-11"
|
|
154
|
-
})(["margin-left:24px;", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n z-index: 1;\n margin-left: 16px;\n "]))));
|
|
155
|
-
|
|
156
|
-
var StyledMobileHamburgerAction = /*#__PURE__*/(0, _styledComponents["default"])(_actionButton.MobileHamburgerAction).withConfig({
|
|
157
|
-
displayName: "hamburger-menu-old__StyledMobileHamburgerAction",
|
|
158
|
-
componentId: "ai0vhm-12"
|
|
159
|
-
})(["width:100%;"]);
|
|
160
|
-
|
|
161
|
-
var DropdownContent = function DropdownContent(_ref) {
|
|
162
|
-
var itemKey = _ref.itemKey,
|
|
163
|
-
isActive = _ref.isActive,
|
|
164
|
-
toggleFunc = _ref.toggleFunc;
|
|
165
|
-
|
|
166
|
-
var _useContext = (0, _react.useContext)(_headerContext["default"]),
|
|
167
|
-
releaseBranch = _useContext.releaseBranch,
|
|
168
|
-
isLinkExternal = _useContext.isLinkExternal;
|
|
169
|
-
|
|
170
|
-
var _useContext2 = (0, _react.useContext)(_headerContext.HamburgerContext),
|
|
171
|
-
closeHamburgerMenu = _useContext2.closeHamburgerMenu;
|
|
172
|
-
|
|
173
|
-
var subItemJSX;
|
|
174
|
-
|
|
175
|
-
if (itemKey === _channels.CHANNEL_KEY.category) {
|
|
176
|
-
// category
|
|
177
|
-
subItemJSX = _.map(_categorySet.CATEGORY_ORDER, function (catKey) {
|
|
178
|
-
var label = _categorySet.CATEGORY_LABEL[catKey];
|
|
179
|
-
var path = "/categories/".concat(catKey);
|
|
180
|
-
var link = (0, _links.getLink)(isLinkExternal, releaseBranch, path);
|
|
181
|
-
|
|
182
|
-
if (!label || !link) {
|
|
183
|
-
return;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
return /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuSubItem, {
|
|
187
|
-
text: label,
|
|
188
|
-
link: link,
|
|
189
|
-
key: catKey
|
|
190
|
-
});
|
|
191
|
-
});
|
|
192
|
-
} else {
|
|
193
|
-
// subcategory
|
|
194
|
-
subItemJSX = _.map(_channels.CHANNEL_DROPDOWN[itemKey], function (subItem, key) {
|
|
195
|
-
var type = subItem.type;
|
|
196
|
-
var label, path;
|
|
197
|
-
|
|
198
|
-
if (type === 'subcategory') {
|
|
199
|
-
label = _categorySet.SUBCATEGORY_LABEL[subItem.key];
|
|
200
|
-
path = "/categories/".concat(_categorySet.CATEGORY_PATH[itemKey]);
|
|
201
|
-
|
|
202
|
-
if (subItem.key !== 'all') {
|
|
203
|
-
path += "/".concat(subItem.key);
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
if (type === 'path') {
|
|
208
|
-
label = subItem.label;
|
|
209
|
-
path = subItem.path;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
var link = (0, _links.getLink)(isLinkExternal, releaseBranch, path);
|
|
213
|
-
|
|
214
|
-
if (!label || !link) {
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
var componentKey = "".concat(itemKey, "-").concat(key);
|
|
219
|
-
return /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuSubItem, {
|
|
220
|
-
text: label,
|
|
221
|
-
link: link,
|
|
222
|
-
key: componentKey
|
|
223
|
-
});
|
|
224
|
-
});
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
var label = _channels.CHANNEL_LABEL[itemKey];
|
|
228
|
-
|
|
229
|
-
var handleClick = function handleClick() {
|
|
230
|
-
return toggleFunc(itemKey);
|
|
231
|
-
};
|
|
232
|
-
|
|
233
|
-
var dropdownKey = "".concat(itemKey, "-dropdown");
|
|
234
|
-
return /*#__PURE__*/_react["default"].createElement(DropdownItemContainer, {
|
|
235
|
-
key: itemKey
|
|
236
|
-
}, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuDropdownItem, {
|
|
237
|
-
text: label,
|
|
238
|
-
isActive: isActive,
|
|
239
|
-
onClick: handleClick,
|
|
240
|
-
key: dropdownKey
|
|
241
|
-
}), /*#__PURE__*/_react["default"].createElement(SubContainer, {
|
|
242
|
-
isActive: isActive,
|
|
243
|
-
onClick: closeHamburgerMenu
|
|
244
|
-
}, subItemJSX));
|
|
245
|
-
};
|
|
246
|
-
|
|
247
|
-
DropdownContent.propTypes = {
|
|
248
|
-
itemKey: _propTypes["default"].string,
|
|
249
|
-
isActive: _propTypes["default"].bool,
|
|
250
|
-
toggleFunc: _propTypes["default"].func
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
var Content = function Content() {
|
|
254
|
-
var _useContext3 = (0, _react.useContext)(_headerContext["default"]),
|
|
255
|
-
releaseBranch = _useContext3.releaseBranch,
|
|
256
|
-
isLinkExternal = _useContext3.isLinkExternal;
|
|
257
|
-
|
|
258
|
-
var _useContext4 = (0, _react.useContext)(_headerContext.HamburgerContext),
|
|
259
|
-
closeHamburgerMenu = _useContext4.closeHamburgerMenu;
|
|
260
|
-
|
|
261
|
-
var _useState = (0, _react.useState)(''),
|
|
262
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
263
|
-
activeKey = _useState2[0],
|
|
264
|
-
setActiveKey = _useState2[1];
|
|
265
|
-
|
|
266
|
-
var itemLinks = (0, _links.getChannelLinks)(isLinkExternal, releaseBranch);
|
|
267
|
-
|
|
268
|
-
var itemJSX = _.map(_channels.CHANNEL_ORDER, function (itemKey, index) {
|
|
269
|
-
// divider
|
|
270
|
-
if (itemKey === 'divider') {
|
|
271
|
-
return /*#__PURE__*/_react["default"].createElement(DividerContainer, {
|
|
272
|
-
key: index
|
|
273
|
-
}, /*#__PURE__*/_react["default"].createElement(_divider["default"], null));
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
var label = _channels.CHANNEL_LABEL[itemKey];
|
|
277
|
-
var type = _channels.CHANNEL_TYPE[itemKey]; // link type
|
|
278
|
-
|
|
279
|
-
if (type === _channels.CHANNEL_LINK_TYPE) {
|
|
280
|
-
var link = itemLinks && itemLinks[itemKey];
|
|
281
|
-
|
|
282
|
-
if (!label || !link) {
|
|
283
|
-
return;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
return /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuLinkItem, {
|
|
287
|
-
text: label,
|
|
288
|
-
link: link,
|
|
289
|
-
key: itemKey,
|
|
290
|
-
onClick: closeHamburgerMenu
|
|
291
|
-
});
|
|
292
|
-
} // dropdown type
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
var isActive = activeKey === itemKey;
|
|
296
|
-
|
|
297
|
-
var toggleFunc = function toggleFunc(key) {
|
|
298
|
-
var nextActiveKey = activeKey === key ? '' : key;
|
|
299
|
-
setActiveKey(nextActiveKey);
|
|
300
|
-
};
|
|
301
|
-
|
|
302
|
-
return /*#__PURE__*/_react["default"].createElement(DropdownContent, {
|
|
303
|
-
itemKey: itemKey,
|
|
304
|
-
isActive: isActive,
|
|
305
|
-
toggleFunc: toggleFunc
|
|
306
|
-
});
|
|
307
|
-
});
|
|
308
|
-
|
|
309
|
-
return /*#__PURE__*/_react["default"].createElement(ContentSection, null, itemJSX);
|
|
310
|
-
};
|
|
311
|
-
|
|
312
|
-
var HamburgerMenu = function HamburgerMenu(_ref2) {
|
|
313
|
-
var props = _extends({}, _ref2);
|
|
314
|
-
|
|
315
|
-
var _useContext5 = (0, _react.useContext)(_headerContext["default"]),
|
|
316
|
-
theme = _useContext5.theme,
|
|
317
|
-
releaseBranch = _useContext5.releaseBranch,
|
|
318
|
-
isLinkExternal = _useContext5.isLinkExternal;
|
|
319
|
-
|
|
320
|
-
var _useContext6 = (0, _react.useContext)(_headerContext.HamburgerContext),
|
|
321
|
-
closeHamburgerMenu = _useContext6.closeHamburgerMenu;
|
|
322
|
-
|
|
323
|
-
var _useState3 = (0, _react.useState)('100vh'),
|
|
324
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
325
|
-
mobileHeight = _useState4[0],
|
|
326
|
-
setMobileHeight = _useState4[1];
|
|
327
|
-
|
|
328
|
-
var menuTheme = theme === _theme2.THEME.photography ? theme : _theme2.THEME.noraml;
|
|
329
|
-
|
|
330
|
-
var _selectHamburgerMenuT = (0, _theme.selectHamburgerMenuTheme)(menuTheme),
|
|
331
|
-
bgColor = _selectHamburgerMenuT.bgColor,
|
|
332
|
-
scrollBarColor = _selectHamburgerMenuT.scrollBarColor;
|
|
333
|
-
|
|
334
|
-
var logoType = (0, _theme.selectLogoType)(menuTheme);
|
|
335
|
-
|
|
336
|
-
var CloseIcon = /*#__PURE__*/_react["default"].createElement(_icon.Cross, {
|
|
337
|
-
releaseBranch: releaseBranch
|
|
338
|
-
});
|
|
339
|
-
|
|
340
|
-
var logoLink = (0, _links.getLogoLink)(isLinkExternal, releaseBranch);
|
|
341
|
-
|
|
342
|
-
var onSearch = function onSearch(keywords) {
|
|
343
|
-
if (!window) {
|
|
344
|
-
return;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
window.location = "".concat((0, _links.getSearchLink)(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
|
|
348
|
-
};
|
|
349
|
-
|
|
350
|
-
(0, _react.useEffect)(function () {
|
|
351
|
-
setMobileHeight("".concat(window.innerHeight + reserveHeightForIos15, "px"));
|
|
352
|
-
}, []);
|
|
353
|
-
return /*#__PURE__*/_react["default"].createElement(MenuContainer, _extends({
|
|
354
|
-
bgColor: bgColor,
|
|
355
|
-
scrollBarColor: scrollBarColor,
|
|
356
|
-
mobileHeight: mobileHeight
|
|
357
|
-
}, props), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(CloseSection, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
|
|
358
|
-
iconComponent: CloseIcon,
|
|
359
|
-
theme: menuTheme,
|
|
360
|
-
onClick: closeHamburgerMenu
|
|
361
|
-
})), /*#__PURE__*/_react["default"].createElement(LogoSection, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, logoLink, {
|
|
362
|
-
onClick: closeHamburgerMenu
|
|
363
|
-
}), /*#__PURE__*/_react["default"].createElement(_logo.LogoSymbol, {
|
|
364
|
-
type: logoType,
|
|
365
|
-
releaseBranch: releaseBranch
|
|
366
|
-
})))), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, logoLink, {
|
|
367
|
-
onClick: closeHamburgerMenu
|
|
368
|
-
}), /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
|
|
369
|
-
type: logoType,
|
|
370
|
-
releaseBranch: releaseBranch
|
|
371
|
-
}))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(_actionButton.MobileHeaderAction, {
|
|
372
|
-
isForHambuger: true
|
|
373
|
-
}), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_iconsOld.MobileIcons, {
|
|
374
|
-
isForHambuger: true
|
|
375
|
-
}))))), /*#__PURE__*/_react["default"].createElement(SearchSection, null, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
|
|
376
|
-
onSearch: onSearch,
|
|
377
|
-
autofocus: false,
|
|
378
|
-
widthType: "stretch",
|
|
379
|
-
placeholder: "\u95DC\u9375\u5B57\u641C\u5C0B"
|
|
380
|
-
})), /*#__PURE__*/_react["default"].createElement(Content, null), /*#__PURE__*/_react["default"].createElement(_hamburgerFooter["default"], null), /*#__PURE__*/_react["default"].createElement(ActionSection, null, /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(_actionButton.DesktopHamburgerAction, null)), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(StyledMobileHamburgerAction, null))));
|
|
381
|
-
};
|
|
382
|
-
|
|
383
|
-
var _default = HamburgerMenu;
|
|
384
|
-
exports["default"] = _default;
|