@twreporter/react-article-components 2.2.0-rc.0 → 2.2.0-rc.2
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/article-page.js +39 -108
- package/lib/components/aside/desktop-aside.js +25 -65
- package/lib/components/aside/desktop-tools.js +11 -57
- package/lib/components/aside/metadata.js +22 -89
- package/lib/components/aside/mobile-tool-bar.js +79 -175
- package/lib/components/aside/utils/theme.js +5 -11
- package/lib/components/body/annotation.js +15 -73
- package/lib/components/body/audio/audio-contexts.js +4 -16
- package/lib/components/body/audio/audio-provider.js +13 -48
- package/lib/components/body/audio/control-button.js +4 -28
- package/lib/components/body/audio/index.js +10 -56
- package/lib/components/body/audio/seek-bar.js +6 -23
- package/lib/components/body/audio/time.js +0 -6
- package/lib/components/body/blockquote.js +11 -52
- package/lib/components/body/brief.js +10 -55
- package/lib/components/body/centered-quote.js +10 -52
- package/lib/components/body/embedded-code.js +22 -101
- package/lib/components/body/headings.js +6 -23
- package/lib/components/body/image-diff.js +13 -66
- package/lib/components/body/image.js +11 -46
- package/lib/components/body/index.js +21 -118
- package/lib/components/body/infobox.js +13 -58
- package/lib/components/body/list.js +8 -29
- package/lib/components/body/multimedia.js +10 -29
- package/lib/components/body/paragraph.js +5 -23
- package/lib/components/body/slider/index.js +28 -96
- package/lib/components/body/slideshow/index.js +36 -107
- package/lib/components/body/tracking-section.js +7 -46
- package/lib/components/body/youtube.js +8 -41
- package/lib/components/donation-box.js +10 -44
- package/lib/components/img-with-placeholder/index.js +34 -106
- package/lib/components/leading/extend.js +6 -25
- package/lib/components/leading/fullscreen.js +17 -63
- package/lib/components/leading/index.js +2 -10
- package/lib/components/leading/normal.js +19 -64
- package/lib/components/leading/pink.js +20 -59
- package/lib/components/leading/small.js +6 -25
- package/lib/components/license.js +9 -40
- package/lib/components/link.js +8 -37
- package/lib/components/related/card.js +20 -73
- package/lib/components/related/index.js +25 -71
- package/lib/components/related/list.js +16 -70
- package/lib/components/related/mockup.js +10 -12
- package/lib/components/separation-curve.js +0 -15
- package/lib/components/table-of-contents/index.js +17 -46
- package/lib/components/table-of-contents/styled.js +10 -38
- package/lib/constants/anchor.js +4 -8
- package/lib/constants/css.js +2 -15
- package/lib/constants/element-alignment.js +2 -3
- package/lib/constants/prop-types/article-page.js +2 -7
- package/lib/constants/prop-types/aside.js +2 -8
- package/lib/constants/prop-types/body.js +4 -9
- package/lib/constants/prop-types/img-with-placeholder.js +2 -7
- package/lib/constants/prop-types/leading.js +8 -13
- package/lib/constants/prop-types/related.js +2 -7
- package/lib/constants/theme.js +2 -3
- package/lib/constants/typography.js +2 -5
- package/lib/contexts/dynamic-components-context.js +2 -8
- package/lib/managers/layout-manager.js +13 -28
- package/lib/managers/theme-manager.js +13 -32
- package/lib/managers/ui-manager.js +14 -26
- package/lib/utils/image.js +5 -14
- package/package.json +6 -6
|
@@ -1,104 +1,72 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
3
|
+
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); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
|
|
11
|
-
|
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
10
|
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
|
|
16
11
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
|
|
18
12
|
var _mockup = _interopRequireDefault(require("./mockup"));
|
|
19
|
-
|
|
20
13
|
var _card = _interopRequireDefault(require("./card"));
|
|
21
|
-
|
|
22
14
|
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
23
|
-
|
|
24
15
|
var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
|
|
25
|
-
|
|
26
16
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
27
|
-
|
|
28
17
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
29
|
-
|
|
30
18
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
31
|
-
|
|
32
19
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
33
|
-
|
|
34
20
|
var _map = _interopRequireDefault(require("lodash/map"));
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
function _interopRequireWildcard(
|
|
41
|
-
|
|
21
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // components
|
|
22
|
+
// constants
|
|
23
|
+
// @twreporter
|
|
24
|
+
// lodash
|
|
25
|
+
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); }
|
|
26
|
+
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; }
|
|
42
27
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
43
|
-
|
|
44
28
|
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); }
|
|
45
|
-
|
|
46
29
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
47
|
-
|
|
48
|
-
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); } }
|
|
49
|
-
|
|
30
|
+
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, _toPropertyKey(descriptor.key), descriptor); } }
|
|
50
31
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
51
|
-
|
|
52
32
|
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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
53
|
-
|
|
54
33
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
55
|
-
|
|
56
34
|
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); }; }
|
|
57
|
-
|
|
58
35
|
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); }
|
|
59
|
-
|
|
60
36
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
61
|
-
|
|
62
37
|
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; } }
|
|
63
|
-
|
|
64
38
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
65
|
-
|
|
66
|
-
function
|
|
67
|
-
|
|
39
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
40
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
41
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
68
42
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
69
|
-
|
|
70
43
|
var _ = {
|
|
71
44
|
get: _get["default"],
|
|
72
45
|
map: _map["default"]
|
|
73
46
|
};
|
|
74
47
|
var fadeIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{opacity:0;}to{opacity:1;}"]);
|
|
75
|
-
|
|
76
48
|
var selectButtonColors = function selectButtonColors(theme) {
|
|
77
49
|
switch (theme) {
|
|
78
50
|
case _theme["default"].article.v2.photo:
|
|
79
51
|
return (0, _styledComponents.css)(["color:", ";background-color:", "1a;&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray300, _color.colorGrayscale.white, _color.colorGrayscale.white, _color.colorGrayscale.gray400);
|
|
80
|
-
|
|
81
52
|
case _theme["default"].article.v2.pink:
|
|
82
53
|
case _theme["default"].article.v2["default"]:
|
|
83
54
|
default:
|
|
84
55
|
return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray300, _color.colorGrayscale.gray800, _color.colorGrayscale.gray400);
|
|
85
56
|
}
|
|
86
57
|
};
|
|
87
|
-
|
|
88
58
|
var LoadMoreButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
89
59
|
displayName: "list__LoadMoreButton",
|
|
90
60
|
componentId: "uykdc6-0"
|
|
91
61
|
})(["text-align:center;font-size:14px;letter-spacing:0.4px;padding-top:26px;border-radius:4px;height:72px;font-weight:", ";cursor:pointer;", " transition:color 100ms ease;", " ", " ", " ", ""], _typography["default"].font.weight.bold, function (props) {
|
|
92
62
|
return selectButtonColors(props.theme.name);
|
|
93
63
|
}, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", ";\n margin: 30px auto;\n "])), _mockup["default"].mobile.item.width), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", "px;\n margin: 40px auto;\n "])), _mockup["default"].tablet.item.width), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", "px;\n margin: 30px 0;\n "])), _mockup["default"].desktop.item.width * 3 + _mockup["default"].desktop.item.margin.right * 2 + 3), _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: ", "px;\n margin: 30px 0;\n "])), _mockup["default"].hd.item.width * 3 + _mockup["default"].hd.item.margin.right * 2 + 3));
|
|
94
|
-
|
|
95
64
|
var ListBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
96
65
|
displayName: "list__ListBlock",
|
|
97
66
|
componentId: "uykdc6-1"
|
|
98
67
|
})(["display:flex;flex-wrap:wrap;align-items:", ";"], function (props) {
|
|
99
68
|
return props.$alignItems;
|
|
100
69
|
});
|
|
101
|
-
|
|
102
70
|
var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
103
71
|
displayName: "list__Item",
|
|
104
72
|
componentId: "uykdc6-2"
|
|
@@ -106,44 +74,32 @@ var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
106
74
|
switch (props.theme.name) {
|
|
107
75
|
case _theme["default"].article.v2.photo:
|
|
108
76
|
return _color.colorGrayscale.gray400;
|
|
109
|
-
|
|
110
77
|
default:
|
|
111
78
|
return _color.colorGrayscale.gray300;
|
|
112
79
|
}
|
|
113
80
|
}, fadeIn, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-width: 0 0 0.5px 0;\n margin: 0 auto;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex: 0 0 ", ";\n "])), _mockup["default"].mobile.item.width), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n flex: 0 0 ", "px;\n "])), _mockup["default"].tablet.item.width), _mediaQuery["default"].desktopOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n margin-right: ", "px;\n flex: 0 0 ", "px;\n "])), _mockup["default"].desktop.item.margin.right, _mockup["default"].desktop.item.width), _mediaQuery["default"].hdOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-right: ", "px;\n flex: 0 0 ", "px;\n "])), _mockup["default"].hd.item.margin.right, _mockup["default"].hd.thumbnail.width));
|
|
114
|
-
|
|
115
|
-
var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
81
|
+
var List = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
|
|
116
82
|
_inherits(List, _React$PureComponent);
|
|
117
|
-
|
|
118
83
|
var _super = _createSuper(List);
|
|
119
|
-
|
|
120
84
|
function List() {
|
|
121
85
|
var _this;
|
|
122
|
-
|
|
123
86
|
_classCallCheck(this, List);
|
|
124
|
-
|
|
125
87
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
126
88
|
args[_key] = arguments[_key];
|
|
127
89
|
}
|
|
128
|
-
|
|
129
90
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
130
|
-
|
|
131
91
|
_defineProperty(_assertThisInitialized(_this), "mountedCardNum", 0);
|
|
132
|
-
|
|
133
92
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
134
93
|
alignItems: 'stretch'
|
|
135
94
|
});
|
|
136
|
-
|
|
137
95
|
_defineProperty(_assertThisInitialized(_this), "handleCardMounted", function () {
|
|
138
96
|
_this.mountedCardNum += 1;
|
|
139
|
-
|
|
140
97
|
if (_this.mountedCardNum === _.get(_this.props, 'data.length', 0)) {
|
|
141
98
|
_this.setState({
|
|
142
99
|
alignItems: 'flex-start'
|
|
143
100
|
});
|
|
144
101
|
}
|
|
145
102
|
});
|
|
146
|
-
|
|
147
103
|
_defineProperty(_assertThisInitialized(_this), "renderCard", function (item, i) {
|
|
148
104
|
return /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, {
|
|
149
105
|
key: item.id
|
|
@@ -156,7 +112,6 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
156
112
|
}))));
|
|
157
113
|
});
|
|
158
114
|
});
|
|
159
|
-
|
|
160
115
|
_defineProperty(_assertThisInitialized(_this), "loadMore", function () {
|
|
161
116
|
// `alignItems: stretch` will make cards the same height.
|
|
162
117
|
// Therefore, we have to set `alignItems: stretch`
|
|
@@ -165,24 +120,20 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
165
120
|
alignItems: 'stretch'
|
|
166
121
|
}, _this.props.loadMore);
|
|
167
122
|
});
|
|
168
|
-
|
|
169
123
|
return _this;
|
|
170
124
|
}
|
|
171
|
-
|
|
172
125
|
_createClass(List, [{
|
|
173
126
|
key: "render",
|
|
174
127
|
value: function render() {
|
|
175
128
|
var _this$props = this.props,
|
|
176
|
-
|
|
177
|
-
|
|
129
|
+
data = _this$props.data,
|
|
130
|
+
hasMore = _this$props.hasMore;
|
|
178
131
|
var alignItems = this.state.alignItems;
|
|
179
|
-
|
|
180
|
-
|
|
132
|
+
var cards = _.map(data, this.renderCard);
|
|
133
|
+
// Use `align-items: stretch` to make sure every Item(Card)
|
|
181
134
|
// having the same height while mounting.
|
|
182
135
|
// Then, use `flex-start` instead to make each Item(Card)
|
|
183
136
|
// show description with different height while hovering.
|
|
184
|
-
|
|
185
|
-
|
|
186
137
|
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ListBlock, {
|
|
187
138
|
$alignItems: alignItems
|
|
188
139
|
}, cards), hasMore ? /*#__PURE__*/_react["default"].createElement(LoadMoreButton, {
|
|
@@ -191,18 +142,13 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
191
142
|
}, "\u8F09\u5165\u66F4\u591A\u6587\u7AE0") : null);
|
|
192
143
|
}
|
|
193
144
|
}]);
|
|
194
|
-
|
|
195
145
|
return List;
|
|
196
146
|
}(_react["default"].PureComponent);
|
|
197
|
-
|
|
198
|
-
exports["default"] = List;
|
|
199
|
-
|
|
200
147
|
_defineProperty(List, "propTypes", {
|
|
201
148
|
data: _related["default"].data,
|
|
202
149
|
hasMore: _propTypes["default"].bool,
|
|
203
150
|
loadMore: _propTypes["default"].func.isRequired
|
|
204
151
|
});
|
|
205
|
-
|
|
206
152
|
_defineProperty(List, "defaultProps", {
|
|
207
153
|
data: [],
|
|
208
154
|
hasMore: false
|
|
@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _default = {
|
|
7
|
+
var _default = exports["default"] = {
|
|
8
8
|
mobile: {
|
|
9
9
|
thumbnail: {
|
|
10
10
|
width: 88,
|
|
11
11
|
// px
|
|
12
12
|
height: 68 // px
|
|
13
|
-
|
|
14
13
|
},
|
|
14
|
+
|
|
15
15
|
item: {
|
|
16
16
|
width: 'calc((309/355)*100%)'
|
|
17
17
|
}
|
|
@@ -21,44 +21,42 @@ var _default = {
|
|
|
21
21
|
width: 88,
|
|
22
22
|
// px
|
|
23
23
|
height: 68 // px
|
|
24
|
-
|
|
25
24
|
},
|
|
25
|
+
|
|
26
26
|
item: {
|
|
27
27
|
width: 513 // px
|
|
28
|
-
|
|
29
28
|
}
|
|
30
29
|
},
|
|
30
|
+
|
|
31
31
|
desktop: {
|
|
32
32
|
thumbnail: {
|
|
33
33
|
width: 246,
|
|
34
34
|
// px
|
|
35
35
|
height: 148 // px
|
|
36
|
-
|
|
37
36
|
},
|
|
37
|
+
|
|
38
38
|
item: {
|
|
39
39
|
margin: {
|
|
40
40
|
right: 8 // px
|
|
41
|
-
|
|
42
41
|
},
|
|
43
|
-
width: 246 // px
|
|
44
42
|
|
|
43
|
+
width: 246 // px
|
|
45
44
|
}
|
|
46
45
|
},
|
|
46
|
+
|
|
47
47
|
hd: {
|
|
48
48
|
thumbnail: {
|
|
49
49
|
width: 349,
|
|
50
50
|
// px
|
|
51
51
|
height: 148 // px
|
|
52
|
-
|
|
53
52
|
},
|
|
53
|
+
|
|
54
54
|
item: {
|
|
55
55
|
margin: {
|
|
56
56
|
right: 10 // px
|
|
57
|
-
|
|
58
57
|
},
|
|
59
|
-
width: 349 // px
|
|
60
58
|
|
|
59
|
+
width: 349 // px
|
|
61
60
|
}
|
|
62
61
|
}
|
|
63
|
-
};
|
|
64
|
-
exports["default"] = _default;
|
|
62
|
+
};
|
|
@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = SeparationCurve;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
13
|
-
|
|
14
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
11
|
var _theme = _interopRequireDefault(require("../constants/theme"));
|
|
17
|
-
|
|
18
12
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
19
|
-
|
|
20
13
|
var _templateObject;
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
15
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
25
|
-
|
|
26
16
|
var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
27
17
|
displayName: "separation-curve__Separation",
|
|
28
18
|
componentId: "s2ekrq-0"
|
|
@@ -30,16 +20,13 @@ var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
30
20
|
switch (props.theme.name) {
|
|
31
21
|
case _theme["default"].article.v2.pink:
|
|
32
22
|
return _color.COLOR_PINK_ARTICLE.pink;
|
|
33
|
-
|
|
34
23
|
case _theme["default"].article.v2.photo:
|
|
35
24
|
return _color.colorSupportive.heavy;
|
|
36
|
-
|
|
37
25
|
case _theme["default"].article.v2["default"]:
|
|
38
26
|
default:
|
|
39
27
|
return _color.colorSupportive.main;
|
|
40
28
|
}
|
|
41
29
|
});
|
|
42
|
-
|
|
43
30
|
var curve = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
44
31
|
viewBox: "0 0 270 11",
|
|
45
32
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -51,14 +38,12 @@ var curve = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
|
51
38
|
d: "M270,11c-6.285,0 -9.463,-2.629 -12.537,-5.172c-3.097,-2.562 -6.023,-4.982 -12.013,-4.982c-5.99,0 -8.915,2.42 -12.013,4.982c-3.074,2.543 -6.252,5.172 -12.537,5.172c-6.284,0 -9.462,-2.629 -12.535,-5.172c-3.097,-2.562 -6.022,-4.982 -12.011,-4.982c-5.99,0 -8.916,2.42 -12.012,4.983c-3.074,2.542 -6.252,5.171 -12.536,5.171c-6.284,0 -9.462,-2.629 -12.535,-5.172c-3.097,-2.562 -6.022,-4.982 -12.011,-4.982c-5.989,0 -8.915,2.42 -12.012,4.983c-3.073,2.542 -6.251,5.171 -12.534,5.171c-6.284,0 -9.461,-2.629 -12.534,-5.172c-3.097,-2.562 -6.021,-4.982 -12.01,-4.982c-5.988,0 -8.912,2.42 -12.008,4.982c-3.073,2.543 -6.251,5.172 -12.534,5.172c-6.283,0 -9.459,-2.629 -12.532,-5.172c-3.096,-2.562 -6.02,-4.982 -12.008,-4.982c-5.989,0 -8.914,2.42 -12.01,4.982c-3.073,2.543 -6.251,5.172 -12.535,5.172c-6.283,0 -9.46,-2.629 -12.533,-5.172c-3.097,-2.562 -6.022,-4.982 -12.01,-4.982l0,-0.846c6.283,0 9.461,2.629 12.534,5.172c3.096,2.562 6.021,4.982 12.009,4.982c5.989,0 8.914,-2.42 12.011,-4.982c3.073,-2.543 6.251,-5.172 12.534,-5.172c6.283,0 9.46,2.629 12.533,5.172c3.095,2.562 6.019,4.982 12.007,4.982c5.988,0 8.913,-2.42 12.009,-4.982c3.073,-2.543 6.25,-5.172 12.533,-5.172c6.283,0 9.461,2.629 12.534,5.172c3.096,2.562 6.022,4.982 12.01,4.982c5.989,0 8.913,-2.42 12.01,-4.982c3.073,-2.543 6.251,-5.172 12.536,-5.172c6.284,0 9.461,2.629 12.535,5.172c3.096,2.562 6.022,4.982 12.011,4.982c5.989,0 8.915,-2.42 12.012,-4.982c3.073,-2.543 6.251,-5.172 12.536,-5.172c6.284,0 9.462,2.629 12.535,5.172c3.097,2.562 6.022,4.982 12.011,4.982c5.99,0 8.916,-2.42 12.013,-4.982c3.074,-2.543 6.252,-5.172 12.537,-5.172c6.286,0 9.463,2.629 12.537,5.172c3.098,2.562 6.023,4.982 12.013,4.982l0,0.846Z",
|
|
52
39
|
fill: "#fabcf0"
|
|
53
40
|
}));
|
|
54
|
-
|
|
55
41
|
function SeparationCurve() {
|
|
56
42
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
57
43
|
return /*#__PURE__*/_react["default"].createElement(Separation, {
|
|
58
44
|
className: props.className
|
|
59
45
|
}, curve);
|
|
60
46
|
}
|
|
61
|
-
|
|
62
47
|
SeparationCurve.propTypes = {
|
|
63
48
|
className: _propTypes["default"].string
|
|
64
49
|
};
|
|
@@ -1,44 +1,28 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
3
|
+
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); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
10
|
var _tableOfContents = _interopRequireDefault(require("@twreporter/react-components/lib/table-of-contents"));
|
|
15
|
-
|
|
16
11
|
var _anchor = require("../../constants/anchor");
|
|
17
|
-
|
|
18
12
|
var Styled = _interopRequireWildcard(require("./styled"));
|
|
19
|
-
|
|
20
13
|
var _map = _interopRequireDefault(require("lodash/map"));
|
|
21
|
-
|
|
22
14
|
var _isNil = _interopRequireDefault(require("lodash/isNil"));
|
|
23
|
-
|
|
24
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
|
-
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
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; }
|
|
29
|
-
|
|
16
|
+
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); }
|
|
17
|
+
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; }
|
|
30
18
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
31
|
-
|
|
32
19
|
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."); }
|
|
33
|
-
|
|
34
20
|
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); }
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
41
|
-
|
|
21
|
+
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; }
|
|
22
|
+
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; } }
|
|
23
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // @twreporters
|
|
24
|
+
// constants
|
|
25
|
+
// styled
|
|
42
26
|
var Tab = function Tab(props) {
|
|
43
27
|
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
|
|
44
28
|
fill: "#CDCDCD",
|
|
@@ -47,45 +31,36 @@ var Tab = function Tab(props) {
|
|
|
47
31
|
opacity: ".5"
|
|
48
32
|
}));
|
|
49
33
|
};
|
|
50
|
-
|
|
51
34
|
Tab.defaultProps = {
|
|
52
35
|
xmlns: "http://www.w3.org/2000/svg",
|
|
53
36
|
width: "29",
|
|
54
37
|
height: "120",
|
|
55
38
|
viewBox: "0 0 29 120"
|
|
56
39
|
}; // lodash
|
|
57
|
-
|
|
58
40
|
var _ = {
|
|
59
41
|
map: _map["default"],
|
|
60
42
|
isNil: _isNil["default"]
|
|
61
43
|
};
|
|
62
|
-
|
|
63
44
|
var TableOfContents = function TableOfContents(_ref) {
|
|
64
45
|
var className = _ref.className,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
46
|
+
manager = _ref.manager,
|
|
47
|
+
onStartScrollingToAnchor = _ref.onStartScrollingToAnchor,
|
|
48
|
+
onToggleTabExpanded = _ref.onToggleTabExpanded,
|
|
49
|
+
scrollStage = _ref.scrollStage;
|
|
70
50
|
var _useState = (0, _react.useState)(false),
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
+
isExpanded = _useState2[0],
|
|
53
|
+
setIsExpanded = _useState2[1];
|
|
75
54
|
var tocRef = (0, _react.useRef)(null);
|
|
76
|
-
|
|
77
55
|
var handleMouseEnter = function handleMouseEnter() {
|
|
78
56
|
return setIsExpanded(true);
|
|
79
57
|
};
|
|
80
|
-
|
|
81
58
|
var handleMouseLeave = function handleMouseLeave() {
|
|
82
59
|
return setIsExpanded(false);
|
|
83
60
|
};
|
|
84
|
-
|
|
85
61
|
var handleTabClick = function handleTabClick() {
|
|
86
62
|
return setIsExpanded(!isExpanded);
|
|
87
63
|
};
|
|
88
|
-
|
|
89
64
|
var handleTouchOutside = function handleTouchOutside(e) {
|
|
90
65
|
try {
|
|
91
66
|
if (tocRef.current && !tocRef.current.contains(e.target) && isExpanded) {
|
|
@@ -95,7 +70,6 @@ var TableOfContents = function TableOfContents(_ref) {
|
|
|
95
70
|
console.warn('TableOfContents#handleTouchOutside error:', error);
|
|
96
71
|
}
|
|
97
72
|
};
|
|
98
|
-
|
|
99
73
|
(0, _react.useEffect)(function () {
|
|
100
74
|
document.addEventListener('touchstart', handleTouchOutside, {
|
|
101
75
|
passive: true,
|
|
@@ -141,7 +115,6 @@ var TableOfContents = function TableOfContents(_ref) {
|
|
|
141
115
|
$toHighlight: toHighlight
|
|
142
116
|
}, anchor.anchorLable));
|
|
143
117
|
});
|
|
144
|
-
|
|
145
118
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Styled.TOCTabWrapper, {
|
|
146
119
|
$isHidden: hideTOC
|
|
147
120
|
}, /*#__PURE__*/_react["default"].createElement(Styled.TOCTab, {
|
|
@@ -155,7 +128,6 @@ var TableOfContents = function TableOfContents(_ref) {
|
|
|
155
128
|
}
|
|
156
129
|
}));
|
|
157
130
|
};
|
|
158
|
-
|
|
159
131
|
TableOfContents.propTypes = {
|
|
160
132
|
className: _propTypes["default"].string,
|
|
161
133
|
manager: _tableOfContents["default"].React.TableOfContents.propTypes.manager,
|
|
@@ -166,7 +138,7 @@ TableOfContents.propTypes = {
|
|
|
166
138
|
TableOfContents.defaultProps = {
|
|
167
139
|
className: ''
|
|
168
140
|
};
|
|
169
|
-
var _default = {
|
|
141
|
+
var _default = exports["default"] = {
|
|
170
142
|
createManager: function createManager(props) {
|
|
171
143
|
return new _tableOfContents["default"].Manager(props);
|
|
172
144
|
},
|
|
@@ -174,5 +146,4 @@ var _default = {
|
|
|
174
146
|
Anchor: _tableOfContents["default"].React.Anchor,
|
|
175
147
|
TableOfContents: TableOfContents
|
|
176
148
|
}
|
|
177
|
-
};
|
|
178
|
-
exports["default"] = _default;
|
|
149
|
+
};
|
|
@@ -4,31 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.TOCText = exports.TOCTabWrapper = exports.TOCTab = exports.TOCRow = exports.TOCIndicator = exports.TOCBlock = exports.TOCBackground = void 0;
|
|
7
|
-
|
|
8
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
10
8
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
11
|
-
|
|
12
9
|
var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
|
|
13
|
-
|
|
14
10
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // @twerporter
|
|
12
|
+
// constants
|
|
18
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
-
|
|
20
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
21
|
-
|
|
22
15
|
var tocWidth = 190; // px
|
|
23
16
|
|
|
24
|
-
var TOCBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
17
|
+
var TOCBlock = exports.TOCBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
25
18
|
displayName: "styled__TOCBlock",
|
|
26
19
|
componentId: "sc-1guo9zm-0"
|
|
27
20
|
})(["position:absolute;top:50%;left:0;transform:translateY(-50%);"]);
|
|
28
|
-
|
|
29
|
-
exports.TOCBlock = TOCBlock;
|
|
30
|
-
|
|
31
|
-
var TOCText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
21
|
+
var TOCText = exports.TOCText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
32
22
|
displayName: "styled__TOCText",
|
|
33
23
|
componentId: "sc-1guo9zm-1"
|
|
34
24
|
})(["font-size:14px;font-weight:", ";line-height:1.29;letter-spacing:0.1px;color:", ";&:hover{color:", ";}margin-left:5px;margin-right:auto;max-width:150px;"], _typography["default"].font.weight.normal, function (props) {
|
|
@@ -36,10 +26,7 @@ var TOCText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
36
26
|
}, function (props) {
|
|
37
27
|
return props.theme.colors.toc.accent;
|
|
38
28
|
});
|
|
39
|
-
|
|
40
|
-
exports.TOCText = TOCText;
|
|
41
|
-
|
|
42
|
-
var TOCIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
29
|
+
var TOCIndicator = exports.TOCIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
43
30
|
displayName: "styled__TOCIndicator",
|
|
44
31
|
componentId: "sc-1guo9zm-2"
|
|
45
32
|
})(["width:", ";border-top:", ";transition:width 0.3s ease-in-out,border-top 0.3s ease-in-out,transform 0.1s ease-in-out 0.1s;margin-top:7px;flex-shrink:0;", " ", ""], function (props) {
|
|
@@ -48,7 +35,6 @@ var TOCIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
48
35
|
} else if (props.$toHighlight && props.$isExpanded) {
|
|
49
36
|
return '20px';
|
|
50
37
|
}
|
|
51
|
-
|
|
52
38
|
return '10px';
|
|
53
39
|
}, function (props) {
|
|
54
40
|
return props.$toHighlight ? "solid 2px ".concat(props.theme.colors.toc.accent) : "solid 2px ".concat(props.theme.colors.toc.text);
|
|
@@ -57,26 +43,17 @@ var TOCIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
57
43
|
}), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n transform: ", ";\n "])), function (props) {
|
|
58
44
|
return props.$isExpanded ? 'translateX(0px)' : "translateX(".concat(tocWidth - 10, "px)");
|
|
59
45
|
}));
|
|
60
|
-
|
|
61
|
-
exports.TOCIndicator = TOCIndicator;
|
|
62
|
-
|
|
63
|
-
var TOCRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
46
|
+
var TOCRow = exports.TOCRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
64
47
|
displayName: "styled__TOCRow",
|
|
65
48
|
componentId: "sc-1guo9zm-3"
|
|
66
49
|
})(["cursor:pointer;display:flex;margin:15px 15px 15px 0;"]);
|
|
67
|
-
|
|
68
|
-
exports.TOCRow = TOCRow;
|
|
69
|
-
|
|
70
|
-
var TOCTabWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
50
|
+
var TOCTabWrapper = exports.TOCTabWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
71
51
|
displayName: "styled__TOCTabWrapper",
|
|
72
52
|
componentId: "sc-1guo9zm-4"
|
|
73
53
|
})(["", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 30px;\n position: fixed;\n z-index: ", ";\n top: 20%;\n left: 0;\n transition: transform 200ms;\n transform: ", ";\n "])), _zIndex["default"].toc, function (props) {
|
|
74
54
|
return props.$isHidden || false ? 'translateX(-100%)' : 'translateX(0%)';
|
|
75
55
|
}), _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
76
|
-
|
|
77
|
-
exports.TOCTabWrapper = TOCTabWrapper;
|
|
78
|
-
|
|
79
|
-
var TOCTab = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
56
|
+
var TOCTab = exports.TOCTab = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
80
57
|
displayName: "styled__TOCTab",
|
|
81
58
|
componentId: "sc-1guo9zm-5"
|
|
82
59
|
})(["transition:transform 0.1s ease-in-out 0.1s;transform:", ";> div{opacity:0.6;color:", ";font-size:14px;width:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}"], function (props) {
|
|
@@ -84,10 +61,7 @@ var TOCTab = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
84
61
|
}, function (props) {
|
|
85
62
|
return props.theme.colors.base.lightText;
|
|
86
63
|
});
|
|
87
|
-
|
|
88
|
-
exports.TOCTab = TOCTab;
|
|
89
|
-
|
|
90
|
-
var TOCBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
64
|
+
var TOCBackground = exports.TOCBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
91
65
|
displayName: "styled__TOCBackground",
|
|
92
66
|
componentId: "sc-1guo9zm-6"
|
|
93
67
|
})(["position:fixed;z-index:", ";top:0;left:0;height:100%;width:", "px;background-color:", ";transition:transform 0.1s ease-in-out 0.1s;", " ", ""], _zIndex["default"].toc, tocWidth, function (props) {
|
|
@@ -96,6 +70,4 @@ var TOCBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
96
70
|
return props.$isExpanded ? 'translateX(0px)' : "translateX(-".concat(tocWidth, "px)");
|
|
97
71
|
}), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n transform: ", ";\n "])), function (props) {
|
|
98
72
|
return props.$isExpanded ? 'translateX(0px)' : "translateX(-".concat(tocWidth - 10, "px)");
|
|
99
|
-
}));
|
|
100
|
-
|
|
101
|
-
exports.TOCBackground = TOCBackground;
|
|
73
|
+
}));
|
package/lib/constants/anchor.js
CHANGED
|
@@ -4,11 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.WAIT_AFTER_REACH_ANCHOR = exports.RELATED_POST_ANCHOR_ID = exports.ARTICLE_ANCHOR_SCROLL = exports.ANCHOR_SCROLL_DURATION = void 0;
|
|
7
|
-
var RELATED_POST_ANCHOR_ID = 'related-post-anchor';
|
|
8
|
-
exports.
|
|
9
|
-
var
|
|
10
|
-
exports.
|
|
11
|
-
var WAIT_AFTER_REACH_ANCHOR = 20;
|
|
12
|
-
exports.WAIT_AFTER_REACH_ANCHOR = WAIT_AFTER_REACH_ANCHOR;
|
|
13
|
-
var ANCHOR_SCROLL_DURATION = 500;
|
|
14
|
-
exports.ANCHOR_SCROLL_DURATION = ANCHOR_SCROLL_DURATION;
|
|
7
|
+
var RELATED_POST_ANCHOR_ID = exports.RELATED_POST_ANCHOR_ID = 'related-post-anchor';
|
|
8
|
+
var ARTICLE_ANCHOR_SCROLL = exports.ARTICLE_ANCHOR_SCROLL = 'article-anchor-scroll';
|
|
9
|
+
var WAIT_AFTER_REACH_ANCHOR = exports.WAIT_AFTER_REACH_ANCHOR = 20;
|
|
10
|
+
var ANCHOR_SCROLL_DURATION = exports.ANCHOR_SCROLL_DURATION = 500;
|