@splunk/react-page 6.2.0 → 6.3.1
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 +10 -0
- package/lib/index.js +220 -244
- package/package.json +12 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
Change Log
|
|
2
2
|
============
|
|
3
3
|
|
|
4
|
+
6.3.1 - October 4, 2023
|
|
5
|
+
----------
|
|
6
|
+
Bug Fixes:
|
|
7
|
+
* Background color of header will not flicker when fallback components are replaced with layout.
|
|
8
|
+
|
|
9
|
+
6.3.0 - August 1, 2023
|
|
10
|
+
----------
|
|
11
|
+
New Features:
|
|
12
|
+
* `options.onLayoutComplete` parameter supports a callback function which executes after layout API is fetched and compiled.
|
|
13
|
+
|
|
4
14
|
6.2.0 - July 27, 2023
|
|
5
15
|
----------
|
|
6
16
|
New Features:
|
package/lib/index.js
CHANGED
|
@@ -1,193 +1,80 @@
|
|
|
1
|
-
|
|
2
|
-
/******/
|
|
3
|
-
/******/ // The
|
|
4
|
-
/******/ var
|
|
5
|
-
/******/
|
|
6
|
-
|
|
7
|
-
/******/
|
|
8
|
-
/******/
|
|
9
|
-
/******/ //
|
|
10
|
-
/******/
|
|
11
|
-
/******/
|
|
12
|
-
/******/
|
|
13
|
-
/******/
|
|
14
|
-
/******/
|
|
15
|
-
/******/
|
|
16
|
-
/******/
|
|
17
|
-
/******/
|
|
1
|
+
/******/ (() => { // webpackBootstrap
|
|
2
|
+
/******/ "use strict";
|
|
3
|
+
/******/ // The require scope
|
|
4
|
+
/******/ var __webpack_require__ = {};
|
|
5
|
+
/******/
|
|
6
|
+
/************************************************************************/
|
|
7
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
8
|
+
/******/ (() => {
|
|
9
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
10
|
+
/******/ __webpack_require__.n = (module) => {
|
|
11
|
+
/******/ var getter = module && module.__esModule ?
|
|
12
|
+
/******/ () => (module['default']) :
|
|
13
|
+
/******/ () => (module);
|
|
14
|
+
/******/ __webpack_require__.d(getter, { a: getter });
|
|
15
|
+
/******/ return getter;
|
|
16
|
+
/******/ };
|
|
17
|
+
/******/ })();
|
|
18
|
+
/******/
|
|
19
|
+
/******/ /* webpack/runtime/define property getters */
|
|
20
|
+
/******/ (() => {
|
|
21
|
+
/******/ // define getter functions for harmony exports
|
|
22
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
23
|
+
/******/ for(var key in definition) {
|
|
24
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
25
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
26
|
+
/******/ }
|
|
27
|
+
/******/ }
|
|
28
|
+
/******/ };
|
|
29
|
+
/******/ })();
|
|
30
|
+
/******/
|
|
31
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
32
|
+
/******/ (() => {
|
|
33
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
34
|
+
/******/ })();
|
|
35
|
+
/******/
|
|
36
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
37
|
+
/******/ (() => {
|
|
38
|
+
/******/ // define __esModule on exports
|
|
39
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
40
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
41
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
42
|
+
/******/ }
|
|
43
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
18
44
|
/******/ };
|
|
19
|
-
/******/
|
|
20
|
-
/******/
|
|
21
|
-
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
22
|
-
/******/
|
|
23
|
-
/******/ // Flag the module as loaded
|
|
24
|
-
/******/ module.l = true;
|
|
25
|
-
/******/
|
|
26
|
-
/******/ // Return the exports of the module
|
|
27
|
-
/******/ return module.exports;
|
|
28
|
-
/******/ }
|
|
29
|
-
/******/
|
|
30
|
-
/******/
|
|
31
|
-
/******/ // expose the modules object (__webpack_modules__)
|
|
32
|
-
/******/ __webpack_require__.m = modules;
|
|
33
|
-
/******/
|
|
34
|
-
/******/ // expose the module cache
|
|
35
|
-
/******/ __webpack_require__.c = installedModules;
|
|
36
|
-
/******/
|
|
37
|
-
/******/ // define getter function for harmony exports
|
|
38
|
-
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
39
|
-
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
40
|
-
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
41
|
-
/******/ }
|
|
42
|
-
/******/ };
|
|
43
|
-
/******/
|
|
44
|
-
/******/ // define __esModule on exports
|
|
45
|
-
/******/ __webpack_require__.r = function(exports) {
|
|
46
|
-
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
47
|
-
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
48
|
-
/******/ }
|
|
49
|
-
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
50
|
-
/******/ };
|
|
51
|
-
/******/
|
|
52
|
-
/******/ // create a fake namespace object
|
|
53
|
-
/******/ // mode & 1: value is a module id, require it
|
|
54
|
-
/******/ // mode & 2: merge all properties of value into the ns
|
|
55
|
-
/******/ // mode & 4: return value when already ns object
|
|
56
|
-
/******/ // mode & 8|1: behave like require
|
|
57
|
-
/******/ __webpack_require__.t = function(value, mode) {
|
|
58
|
-
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
59
|
-
/******/ if(mode & 8) return value;
|
|
60
|
-
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
61
|
-
/******/ var ns = Object.create(null);
|
|
62
|
-
/******/ __webpack_require__.r(ns);
|
|
63
|
-
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
64
|
-
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
65
|
-
/******/ return ns;
|
|
66
|
-
/******/ };
|
|
67
|
-
/******/
|
|
68
|
-
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
69
|
-
/******/ __webpack_require__.n = function(module) {
|
|
70
|
-
/******/ var getter = module && module.__esModule ?
|
|
71
|
-
/******/ function getDefault() { return module['default']; } :
|
|
72
|
-
/******/ function getModuleExports() { return module; };
|
|
73
|
-
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
74
|
-
/******/ return getter;
|
|
75
|
-
/******/ };
|
|
76
|
-
/******/
|
|
77
|
-
/******/ // Object.prototype.hasOwnProperty.call
|
|
78
|
-
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
79
|
-
/******/
|
|
80
|
-
/******/ // __webpack_public_path__
|
|
81
|
-
/******/ __webpack_require__.p = "";
|
|
82
|
-
/******/
|
|
83
|
-
/******/
|
|
84
|
-
/******/ // Load entry module and return exports
|
|
85
|
-
/******/ return __webpack_require__(__webpack_require__.s = 11);
|
|
86
|
-
/******/ })
|
|
45
|
+
/******/ })();
|
|
46
|
+
/******/
|
|
87
47
|
/************************************************************************/
|
|
88
|
-
|
|
89
|
-
/* 0 */
|
|
90
|
-
/***/ (function(module, exports) {
|
|
91
|
-
|
|
92
|
-
module.exports = require("react");
|
|
93
|
-
|
|
94
|
-
/***/ }),
|
|
95
|
-
/* 1 */
|
|
96
|
-
/***/ (function(module, exports) {
|
|
97
|
-
|
|
98
|
-
module.exports = require("@splunk/themes");
|
|
99
|
-
|
|
100
|
-
/***/ }),
|
|
101
|
-
/* 2 */
|
|
102
|
-
/***/ (function(module, exports) {
|
|
103
|
-
|
|
104
|
-
module.exports = require("styled-components");
|
|
105
|
-
|
|
106
|
-
/***/ }),
|
|
107
|
-
/* 3 */
|
|
108
|
-
/***/ (function(module, exports) {
|
|
109
|
-
|
|
110
|
-
module.exports = require("react-dom");
|
|
111
|
-
|
|
112
|
-
/***/ }),
|
|
113
|
-
/* 4 */
|
|
114
|
-
/***/ (function(module, exports) {
|
|
115
|
-
|
|
116
|
-
module.exports = require("prop-types");
|
|
117
|
-
|
|
118
|
-
/***/ }),
|
|
119
|
-
/* 5 */
|
|
120
|
-
/***/ (function(module, exports) {
|
|
121
|
-
|
|
122
|
-
module.exports = require("@splunk/themes/SplunkThemeProvider");
|
|
123
|
-
|
|
124
|
-
/***/ }),
|
|
125
|
-
/* 6 */
|
|
126
|
-
/***/ (function(module, exports) {
|
|
127
|
-
|
|
128
|
-
module.exports = require("scriptjs");
|
|
129
|
-
|
|
130
|
-
/***/ }),
|
|
131
|
-
/* 7 */
|
|
132
|
-
/***/ (function(module, exports) {
|
|
133
|
-
|
|
134
|
-
module.exports = require("@splunk/react-ui/Layer");
|
|
135
|
-
|
|
136
|
-
/***/ }),
|
|
137
|
-
/* 8 */
|
|
138
|
-
/***/ (function(module, exports) {
|
|
139
|
-
|
|
140
|
-
module.exports = require("@splunk/splunk-utils/url");
|
|
141
|
-
|
|
142
|
-
/***/ }),
|
|
143
|
-
/* 9 */
|
|
144
|
-
/***/ (function(module, exports) {
|
|
145
|
-
|
|
146
|
-
module.exports = require("@splunk/react-ui/ScreenReaderContent");
|
|
147
|
-
|
|
148
|
-
/***/ }),
|
|
149
|
-
/* 10 */
|
|
150
|
-
/***/ (function(module, exports) {
|
|
151
|
-
|
|
152
|
-
module.exports = require("@splunk/ui-utils/i18n");
|
|
153
|
-
|
|
154
|
-
/***/ }),
|
|
155
|
-
/* 11 */
|
|
156
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
157
|
-
|
|
158
|
-
"use strict";
|
|
48
|
+
var __webpack_exports__ = {};
|
|
159
49
|
// ESM COMPAT FLAG
|
|
160
50
|
__webpack_require__.r(__webpack_exports__);
|
|
161
51
|
|
|
162
|
-
//
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
var
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
var
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
var
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
var themes_ = __webpack_require__(1);
|
|
189
|
-
|
|
190
|
-
// CONCATENATED MODULE: ./src/LoadingStyles.js
|
|
52
|
+
// EXPORTS
|
|
53
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
54
|
+
"default": () => (/* binding */ src)
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
;// CONCATENATED MODULE: external "react-dom"
|
|
58
|
+
const external_react_dom_namespaceObject = require("react-dom");
|
|
59
|
+
;// CONCATENATED MODULE: external "react"
|
|
60
|
+
const external_react_namespaceObject = require("react");
|
|
61
|
+
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
|
|
62
|
+
;// CONCATENATED MODULE: external "scriptjs"
|
|
63
|
+
const external_scriptjs_namespaceObject = require("scriptjs");
|
|
64
|
+
var external_scriptjs_default = /*#__PURE__*/__webpack_require__.n(external_scriptjs_namespaceObject);
|
|
65
|
+
;// CONCATENATED MODULE: external "@splunk/react-ui/Layer"
|
|
66
|
+
const Layer_namespaceObject = require("@splunk/react-ui/Layer");
|
|
67
|
+
;// CONCATENATED MODULE: external "@splunk/splunk-utils/url"
|
|
68
|
+
const url_namespaceObject = require("@splunk/splunk-utils/url");
|
|
69
|
+
;// CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
|
|
70
|
+
const SplunkThemeProvider_namespaceObject = require("@splunk/themes/SplunkThemeProvider");
|
|
71
|
+
var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(SplunkThemeProvider_namespaceObject);
|
|
72
|
+
;// CONCATENATED MODULE: external "styled-components"
|
|
73
|
+
const external_styled_components_namespaceObject = require("styled-components");
|
|
74
|
+
var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
|
|
75
|
+
;// CONCATENATED MODULE: external "@splunk/themes"
|
|
76
|
+
const themes_namespaceObject = require("@splunk/themes");
|
|
77
|
+
;// CONCATENATED MODULE: ./src/LoadingStyles.js
|
|
191
78
|
function _templateObject6() {
|
|
192
79
|
var data = _taggedTemplateLiteral(["\n animation-name: ", ";\n animation-duration: 1.4s;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n background-color: ", ";\n width: 10px;\n height: 10px;\n border-radius: 5px;\n display: inline-block;\n margin-right: ", ";\n\n &:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n &:nth-child(3) {\n animation-delay: 0.4s;\n }\n"]);
|
|
193
80
|
|
|
@@ -254,45 +141,42 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
254
141
|
|
|
255
142
|
var APPBAR_HEIGHT = 45;
|
|
256
143
|
var SPLUNKBAR_HEIGHT = 34;
|
|
257
|
-
var blink =
|
|
258
|
-
var Main = external_styled_components_default.
|
|
259
|
-
var SplunkBar = external_styled_components_default.
|
|
260
|
-
prisma:
|
|
261
|
-
enterprise:
|
|
144
|
+
var blink = (0,external_styled_components_namespaceObject.keyframes)(_templateObject());
|
|
145
|
+
var Main = external_styled_components_default().div(_templateObject2(), themes_namespaceObject.variables.backgroundColorPage);
|
|
146
|
+
var SplunkBar = external_styled_components_default().div(_templateObject3(), (0,themes_namespaceObject.pick)({
|
|
147
|
+
prisma: themes_namespaceObject.variables.backgroundColorSection,
|
|
148
|
+
enterprise: themes_namespaceObject.variables.gray20
|
|
262
149
|
}), SPLUNKBAR_HEIGHT);
|
|
263
|
-
var AppBar = external_styled_components_default.
|
|
264
|
-
prisma:
|
|
265
|
-
enterprise:
|
|
150
|
+
var AppBar = external_styled_components_default().div(_templateObject4(), (0,themes_namespaceObject.pick)({
|
|
151
|
+
prisma: themes_namespaceObject.variables.backgroundColorPopup,
|
|
152
|
+
enterprise: themes_namespaceObject.variables.gray30
|
|
266
153
|
}), APPBAR_HEIGHT);
|
|
267
|
-
var AppBody = external_styled_components_default.
|
|
268
|
-
var Dot = external_styled_components_default.
|
|
269
|
-
prisma:
|
|
270
|
-
enterprise:
|
|
154
|
+
var AppBody = external_styled_components_default().div(_templateObject5(), themes_namespaceObject.variables.contentColorInverted);
|
|
155
|
+
var Dot = external_styled_components_default().div(_templateObject6(), blink, themes_namespaceObject.variables.neutral500, (0,themes_namespaceObject.pick)({
|
|
156
|
+
prisma: themes_namespaceObject.variables.spacingMedium,
|
|
157
|
+
enterprise: themes_namespaceObject.variables.spacingHalf
|
|
271
158
|
}));
|
|
272
159
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
var
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
var i18n_ = __webpack_require__(10);
|
|
283
|
-
|
|
284
|
-
// CONCATENATED MODULE: ./src/Loading.jsx
|
|
160
|
+
;// CONCATENATED MODULE: external "prop-types"
|
|
161
|
+
const external_prop_types_namespaceObject = require("prop-types");
|
|
162
|
+
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
|
|
163
|
+
;// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
|
|
164
|
+
const ScreenReaderContent_namespaceObject = require("@splunk/react-ui/ScreenReaderContent");
|
|
165
|
+
var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_namespaceObject);
|
|
166
|
+
;// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
|
|
167
|
+
const i18n_namespaceObject = require("@splunk/ui-utils/i18n");
|
|
168
|
+
;// CONCATENATED MODULE: ./src/Loading.jsx
|
|
285
169
|
|
|
286
170
|
|
|
287
171
|
|
|
288
172
|
|
|
289
173
|
|
|
290
174
|
var propTypes = {
|
|
291
|
-
hideAppBar: external_prop_types_default.
|
|
292
|
-
hideChrome: external_prop_types_default.
|
|
293
|
-
hideSplunkBar: external_prop_types_default.
|
|
294
|
-
AppBarFallback: external_prop_types_default.
|
|
295
|
-
SplunkBarFallback: external_prop_types_default.
|
|
175
|
+
hideAppBar: (external_prop_types_default()).bool,
|
|
176
|
+
hideChrome: (external_prop_types_default()).bool,
|
|
177
|
+
hideSplunkBar: (external_prop_types_default()).bool,
|
|
178
|
+
AppBarFallback: (external_prop_types_default()).elementType,
|
|
179
|
+
SplunkBarFallback: (external_prop_types_default()).elementType
|
|
296
180
|
};
|
|
297
181
|
var defaultProps = {
|
|
298
182
|
hideAppBar: false,
|
|
@@ -308,13 +192,13 @@ function Loading(_ref) {
|
|
|
308
192
|
hideSplunkBar = _ref.hideSplunkBar,
|
|
309
193
|
SplunkBarFallback = _ref.SplunkBarFallback,
|
|
310
194
|
AppBarFallback = _ref.AppBarFallback;
|
|
311
|
-
return /*#__PURE__*/external_react_default.
|
|
195
|
+
return /*#__PURE__*/external_react_default().createElement(Main, null, !hideChrome && !hideSplunkBar && /*#__PURE__*/external_react_default().createElement(SplunkBarFallback, null), !hideChrome && !hideAppBar && /*#__PURE__*/external_react_default().createElement(AppBarFallback, null), /*#__PURE__*/external_react_default().createElement(AppBody, null, /*#__PURE__*/external_react_default().createElement(Dot, null), /*#__PURE__*/external_react_default().createElement(Dot, null), /*#__PURE__*/external_react_default().createElement(Dot, null), /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), null, (0,i18n_namespaceObject._)('Loading'))));
|
|
312
196
|
}
|
|
313
197
|
|
|
314
198
|
Loading.propTypes = propTypes;
|
|
315
199
|
Loading.defaultProps = defaultProps;
|
|
316
|
-
/* harmony default export */
|
|
317
|
-
|
|
200
|
+
/* harmony default export */ const src_Loading = (Loading);
|
|
201
|
+
;// CONCATENATED MODULE: ./src/baseLayout.jsx
|
|
318
202
|
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; }
|
|
319
203
|
|
|
320
204
|
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; }
|
|
@@ -326,7 +210,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
326
210
|
|
|
327
211
|
|
|
328
212
|
|
|
329
|
-
|
|
330
213
|
var LIGHT_LAYOUT = 'build/api/layout.js';
|
|
331
214
|
var DARK_LAYOUT = 'build/api/layout-dark.js';
|
|
332
215
|
var HEADER_SELECTOR = 'header[data-view="splunkjs/mvc/headerview"]';
|
|
@@ -345,7 +228,7 @@ function getLayoutApi(theme, callback) {
|
|
|
345
228
|
loader = _ref$loader === void 0 ? 'scriptjs' : _ref$loader;
|
|
346
229
|
|
|
347
230
|
var themedLayout = theme === 'dark' ? DARK_LAYOUT : LIGHT_LAYOUT;
|
|
348
|
-
var url =
|
|
231
|
+
var url = (0,url_namespaceObject.createStaticURL)(themedLayout);
|
|
349
232
|
|
|
350
233
|
if (loader === 'scriptjs') {
|
|
351
234
|
external_scriptjs_default()(url, function () {
|
|
@@ -362,10 +245,39 @@ function getLayoutApi(theme, callback) {
|
|
|
362
245
|
throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
|
|
363
246
|
}
|
|
364
247
|
}
|
|
248
|
+
/**
|
|
249
|
+
* Computes the background css of the header container during lazy loading
|
|
250
|
+
*
|
|
251
|
+
* @param {HTMLDivElement} headerContainer
|
|
252
|
+
* @param {object} [options]
|
|
253
|
+
* @private
|
|
254
|
+
*/
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
function getHeaderBackground(headerContainer) {
|
|
258
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
259
|
+
var hideSplunkBar = options.hideSplunkBar,
|
|
260
|
+
hideAppBar = options.hideAppBar,
|
|
261
|
+
headerHeight = options.headerHeight;
|
|
262
|
+
var firstFallback = headerContainer.children[0];
|
|
263
|
+
var firstFallbackColor = firstFallback && getComputedStyle(firstFallback).backgroundColor;
|
|
264
|
+
|
|
265
|
+
if (!(hideSplunkBar || hideAppBar)) {
|
|
266
|
+
// compute background color to be same as both fallback components
|
|
267
|
+
var firstFallbackHeight = firstFallback === null || firstFallback === void 0 ? void 0 : firstFallback.offsetHeight;
|
|
268
|
+
var secondFallback = headerContainer.children[1];
|
|
269
|
+
var secondFallbackColor = secondFallback && getComputedStyle(secondFallback).backgroundColor;
|
|
270
|
+
var heightRatio = Math.round(firstFallbackHeight / headerHeight * 100);
|
|
271
|
+
return "linear-gradient(\n ".concat(firstFallbackColor, " 0%,\n ").concat(firstFallbackColor, " ").concat(heightRatio, "%,\n ").concat(secondFallbackColor, " ").concat(heightRatio, "%,\n ").concat(secondFallbackColor, " 100%\n )");
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
return firstFallbackColor;
|
|
275
|
+
}
|
|
365
276
|
/**
|
|
366
277
|
* renders body element and attaches it to container node in DOM
|
|
367
278
|
*
|
|
368
279
|
* @param {element} element
|
|
280
|
+
* @param {element} render - A render function that returns an unmount() function.
|
|
369
281
|
* @param {HTMLDivElement} container
|
|
370
282
|
* @param {boolean} useGlobalLayerStack
|
|
371
283
|
* @param {object} splunkTheme
|
|
@@ -373,16 +285,17 @@ function getLayoutApi(theme, callback) {
|
|
|
373
285
|
*/
|
|
374
286
|
|
|
375
287
|
|
|
376
|
-
function renderBody(element, container) {
|
|
377
|
-
var useGlobalLayerStack = arguments.length >
|
|
378
|
-
var splunkTheme = arguments.length >
|
|
379
|
-
var wrappedElement = useGlobalLayerStack ? /*#__PURE__*/external_react_default.
|
|
380
|
-
|
|
288
|
+
function renderBody(element, render, container) {
|
|
289
|
+
var useGlobalLayerStack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
290
|
+
var splunkTheme = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
291
|
+
var wrappedElement = useGlobalLayerStack ? /*#__PURE__*/external_react_default().createElement(Layer_namespaceObject.LayerStackGlobalProvider, null, /*#__PURE__*/external_react_default().createElement((SplunkThemeProvider_default()), splunkTheme, element)) : /*#__PURE__*/external_react_default().createElement((SplunkThemeProvider_default()), splunkTheme, element);
|
|
292
|
+
return render(wrappedElement, container);
|
|
381
293
|
}
|
|
382
294
|
/**
|
|
383
295
|
* Renders a React element into the Layout API.
|
|
384
296
|
* @public
|
|
385
297
|
* @param {element} element - A React element.
|
|
298
|
+
* @param {element} render - A render function that returns an unmount() function.
|
|
386
299
|
* @param {object} [options]
|
|
387
300
|
* @param {string} [options.pageTitle] - Changes the page title.
|
|
388
301
|
* @param {Boolean} [options.hideAppBar = false] - Hides the app bar.
|
|
@@ -401,11 +314,12 @@ function renderBody(element, container) {
|
|
|
401
314
|
* @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
|
|
402
315
|
* @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
|
|
403
316
|
* @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
|
|
317
|
+
* @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
|
|
404
318
|
*/
|
|
405
319
|
|
|
406
320
|
|
|
407
|
-
function layout(element) {
|
|
408
|
-
var _ref2 = arguments.length >
|
|
321
|
+
function layout(element, render) {
|
|
322
|
+
var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
409
323
|
|
|
410
324
|
var _ref2$useGlobalLayerS = _ref2.useGlobalLayerStack,
|
|
411
325
|
useGlobalLayerStack = _ref2$useGlobalLayerS === void 0 ? true : _ref2$useGlobalLayerS,
|
|
@@ -428,7 +342,8 @@ function layout(element) {
|
|
|
428
342
|
_layoutAPIOptions$App = layoutAPIOptions.AppBarFallback,
|
|
429
343
|
AppBarFallback = _layoutAPIOptions$App === void 0 ? AppBar : _layoutAPIOptions$App,
|
|
430
344
|
_layoutAPIOptions$laz = layoutAPIOptions.lazyLoadLayout,
|
|
431
|
-
lazyLoadLayout = _layoutAPIOptions$laz === void 0 ? false : _layoutAPIOptions$laz
|
|
345
|
+
lazyLoadLayout = _layoutAPIOptions$laz === void 0 ? false : _layoutAPIOptions$laz,
|
|
346
|
+
onLayoutComplete = layoutAPIOptions.onLayoutComplete;
|
|
432
347
|
var bodyContainer = document.createElement('div');
|
|
433
348
|
var headerContainer = document.createElement('div'); // The "theme" in enterprise used to be "enterprise" instead of "light"...
|
|
434
349
|
|
|
@@ -438,19 +353,32 @@ function layout(element) {
|
|
|
438
353
|
colorScheme: colorScheme,
|
|
439
354
|
density: 'comfortable'
|
|
440
355
|
};
|
|
356
|
+
var bodyRoot;
|
|
357
|
+
var headerRoot;
|
|
441
358
|
|
|
442
359
|
if (lazyLoadLayout) {
|
|
443
360
|
// render the React app immediately without waiting for layout API
|
|
444
|
-
|
|
445
|
-
|
|
361
|
+
if (!hideChrome) {
|
|
362
|
+
document.body.appendChild(headerContainer);
|
|
363
|
+
headerRoot = render( /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, !hideSplunkBar && /*#__PURE__*/external_react_default().createElement(SplunkBarFallback, null), !hideAppBar && /*#__PURE__*/external_react_default().createElement(AppBarFallback, null)), headerContainer); // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
|
|
364
|
+
|
|
365
|
+
var headerHeight = headerContainer.offsetHeight;
|
|
366
|
+
var headerBackground = getHeaderBackground(headerContainer, {
|
|
367
|
+
hideSplunkBar: hideSplunkBar,
|
|
368
|
+
hideAppBar: hideAppBar,
|
|
369
|
+
headerHeight: headerHeight,
|
|
370
|
+
AppBarFallback: AppBarFallback,
|
|
371
|
+
SplunkBarFallback: SplunkBarFallback
|
|
372
|
+
});
|
|
373
|
+
headerContainer.style.height = "".concat(headerHeight, "px");
|
|
374
|
+
headerContainer.style.background = "".concat(headerBackground);
|
|
375
|
+
}
|
|
446
376
|
|
|
447
|
-
var headerHeight = headerContainer.offsetHeight;
|
|
448
|
-
headerContainer.style.cssText = "height: ".concat(headerHeight, "px");
|
|
449
377
|
document.body.appendChild(bodyContainer);
|
|
450
|
-
renderBody(element, bodyContainer, useGlobalLayerStack, splunkTheme);
|
|
378
|
+
bodyRoot = renderBody(element, render, bodyContainer, useGlobalLayerStack, splunkTheme);
|
|
451
379
|
} else {
|
|
452
380
|
document.body.appendChild(bodyContainer);
|
|
453
|
-
|
|
381
|
+
bodyRoot = render( /*#__PURE__*/external_react_default().createElement((SplunkThemeProvider_default()), splunkTheme, /*#__PURE__*/external_react_default().createElement(src_Loading, layoutAPIOptions)), bodyContainer);
|
|
454
382
|
}
|
|
455
383
|
|
|
456
384
|
getLayoutApi(theme, function (layoutApi) {
|
|
@@ -487,18 +415,23 @@ function layout(element) {
|
|
|
487
415
|
}
|
|
488
416
|
|
|
489
417
|
if (lazyLoadLayout) {
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
418
|
+
if (!hideChrome) {
|
|
419
|
+
// replace placeholder nav bar with real nav bar
|
|
420
|
+
headerRoot.unmount(headerContainer);
|
|
421
|
+
var header = document.querySelector(HEADER_SELECTOR);
|
|
422
|
+
var containerHeight = (!hideChrome && !hideSplunkBar ? SPLUNKBAR_HEIGHT : 0) + (!hideChrome && !hideAppBar ? APPBAR_HEIGHT : 0);
|
|
423
|
+
headerContainer.style.height = "".concat(containerHeight, "px");
|
|
424
|
+
headerContainer.appendChild(header);
|
|
425
|
+
}
|
|
426
|
+
|
|
496
427
|
containerEl.appendChild(bodyContainer);
|
|
428
|
+
onLayoutComplete === null || onLayoutComplete === void 0 ? void 0 : onLayoutComplete();
|
|
497
429
|
} else {
|
|
498
430
|
setTimeout(function () {
|
|
499
|
-
|
|
500
|
-
renderBody(element, bodyContainer, useGlobalLayerStack, splunkTheme);
|
|
431
|
+
bodyRoot.unmount(bodyContainer);
|
|
432
|
+
bodyRoot = renderBody(element, render, bodyContainer, useGlobalLayerStack, splunkTheme);
|
|
501
433
|
containerEl.appendChild(bodyContainer);
|
|
434
|
+
onLayoutComplete === null || onLayoutComplete === void 0 ? void 0 : onLayoutComplete();
|
|
502
435
|
}, 30);
|
|
503
436
|
}
|
|
504
437
|
}, {
|
|
@@ -506,7 +439,50 @@ function layout(element) {
|
|
|
506
439
|
});
|
|
507
440
|
}
|
|
508
441
|
|
|
509
|
-
/* harmony default export */
|
|
442
|
+
/* harmony default export */ const baseLayout = (layout);
|
|
443
|
+
;// CONCATENATED MODULE: ./src/index.jsx
|
|
444
|
+
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
var renderShim = function renderShim(elementToRender, container) {
|
|
448
|
+
(0,external_react_dom_namespaceObject.render)(elementToRender, container);
|
|
449
|
+
return {
|
|
450
|
+
unmount: function unmount() {
|
|
451
|
+
return (0,external_react_dom_namespaceObject.unmountComponentAtNode)(container);
|
|
452
|
+
}
|
|
453
|
+
};
|
|
454
|
+
};
|
|
455
|
+
/**
|
|
456
|
+
* Renders a React element into the Layout API.
|
|
457
|
+
* @public
|
|
458
|
+
* @param {element} element - A React element.
|
|
459
|
+
* @param {object} [options]
|
|
460
|
+
* @param {string} [options.pageTitle] - Changes the page title.
|
|
461
|
+
* @param {Boolean} [options.hideAppBar = false] - Hides the app bar.
|
|
462
|
+
* @param {Boolean} [options.hideAppsList = false] - Hides the app list in
|
|
463
|
+
* the Splunk bar.
|
|
464
|
+
* @param {Boolean} [options.hideChrome = false] - Renders only the main content, hiding
|
|
465
|
+
* the Splunk bar, app bar, and footer.
|
|
466
|
+
* @param {Boolean} [options.hideFooter = false] - Hides the footer.
|
|
467
|
+
* @param {Boolean} [options.hideSplunkBar = false] - Hides the Splunk bar.
|
|
468
|
+
* @param {string} [options.layout = 'scrolling'] - Set to `fixed` to fix all navigation bars
|
|
469
|
+
* to the edge of the page.
|
|
470
|
+
* @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
|
|
471
|
+
* @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
|
|
472
|
+
* @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
|
|
473
|
+
* Change this only if the default loader does not work for your application.
|
|
474
|
+
* @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
|
|
475
|
+
* @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
|
|
476
|
+
* @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
|
|
477
|
+
* @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
|
|
478
|
+
*/
|
|
479
|
+
|
|
480
|
+
|
|
481
|
+
function src_layout(element, options) {
|
|
482
|
+
baseLayout(element, renderShim, options);
|
|
483
|
+
}
|
|
510
484
|
|
|
511
|
-
|
|
512
|
-
|
|
485
|
+
/* harmony default export */ const src = (src_layout);
|
|
486
|
+
module.exports = __webpack_exports__;
|
|
487
|
+
/******/ })()
|
|
488
|
+
;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@splunk/react-page",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.1",
|
|
4
4
|
"description": "Load React components into the latest layout from Splunk Enterprise",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
"scripts": {
|
|
9
9
|
"build": "cross-env NODE_ENV=production webpack",
|
|
10
10
|
"docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
|
|
11
|
-
"docs:publish": "
|
|
12
|
-
"docs:publish:external": "
|
|
11
|
+
"docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
|
|
12
|
+
"docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
|
|
13
13
|
"docs:start": "webpack serve --config docs.gen.webpack.config.js",
|
|
14
14
|
"eslint": "eslint src --ext \".js,.jsx\"",
|
|
15
15
|
"eslint:fix": "eslint src --ext \".js, .jsx\" --fix",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"test:cypress:ci": "node src/tests/run-cypress-tests.js"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@splunk/react-ui": "^4.
|
|
25
|
+
"@splunk/react-ui": "^4.21.0",
|
|
26
26
|
"@splunk/splunk-utils": "^2.3.4",
|
|
27
|
-
"@splunk/themes": "^0.16.
|
|
27
|
+
"@splunk/themes": "^0.16.2",
|
|
28
28
|
"@splunk/ui-utils": "^1.6.0",
|
|
29
29
|
"prop-types": "^15.6.2",
|
|
30
30
|
"scriptjs": "^2.5.8"
|
|
@@ -32,19 +32,18 @@
|
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@babel/core": "^7.2.0",
|
|
34
34
|
"@splunk/babel-preset": "^4.0.0",
|
|
35
|
-
"@splunk/cicd-tools": "^0.5.0",
|
|
36
35
|
"@splunk/eslint-config": "^4.0.0",
|
|
37
36
|
"@splunk/stylelint-config": "^4.0.0",
|
|
38
|
-
"@splunk/webpack-configs": "^
|
|
37
|
+
"@splunk/webpack-configs": "^7.0.0",
|
|
39
38
|
"babel-eslint": "^10.1.0",
|
|
40
|
-
"babel-loader": "^8.0
|
|
39
|
+
"babel-loader": "^8.3.0",
|
|
41
40
|
"babel-plugin-transform-imports": "^2.0.0",
|
|
42
41
|
"cross-env": "^6.0.3",
|
|
43
42
|
"cypress": "^12.17.1",
|
|
44
43
|
"eslint": "^7.14.0",
|
|
45
44
|
"eslint-config-airbnb": "^18.2.1",
|
|
46
45
|
"eslint-config-prettier": "^6.15.0",
|
|
47
|
-
"eslint-import-resolver-webpack": "^0.13.
|
|
46
|
+
"eslint-import-resolver-webpack": "^0.13.4",
|
|
48
47
|
"eslint-plugin-import": "^2.22.1",
|
|
49
48
|
"eslint-plugin-jsx-a11y": "^6.4.1",
|
|
50
49
|
"eslint-plugin-react": "^7.21.5",
|
|
@@ -52,13 +51,12 @@
|
|
|
52
51
|
"execa": "^4.0.0",
|
|
53
52
|
"react": "^16.12.0",
|
|
54
53
|
"react-dom": "^16.12.0",
|
|
55
|
-
"style-loader": "^0.23.1",
|
|
56
54
|
"styled-components": "^5.3.10",
|
|
57
55
|
"stylelint": "^13.0.0",
|
|
58
|
-
"webpack": "^
|
|
59
|
-
"webpack-cli": "^
|
|
60
|
-
"webpack-dev-server": "^4.
|
|
61
|
-
"webpack-merge": "^
|
|
56
|
+
"webpack": "^5.88.2",
|
|
57
|
+
"webpack-cli": "^5.1.4",
|
|
58
|
+
"webpack-dev-server": "^4.15.1",
|
|
59
|
+
"webpack-merge": "^5.9.0"
|
|
62
60
|
},
|
|
63
61
|
"peerDependencies": {
|
|
64
62
|
"react": "^16.8",
|