@unbxd-ui/unbxd-react-components 0.3.3 → 0.3.4
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/components/Form/Checkbox.js +4 -3
- package/components/Form/Dropdown.js +12 -5
- package/components/Form/stories/Dropdown.stories.js +10 -2
- package/components/NoDataPlaceholder/NoDataPlaceholder.js +20 -3
- package/components/NoDataPlaceholder/NoDataPlaceholder.stories.js +3 -0
- package/components/PIDItemComponent/PIDItemComponent.js +1 -0
- package/components/PulseVersionToggler/PulseVersionToggler.js +178 -0
- package/components/PulseVersionToggler/PulseVersionToggler.stories.js +295 -0
- package/components/PulseVersionToggler/index.js +9 -0
- package/components/PulseVersionToggler/pulse-version-toggler.css +1 -0
- package/components/PulseVersionToggler/pulse-version-toggler.scss +106 -0
- package/components/UIDItemComponent/UIDItemComponent.js +15 -19
- package/components/core.css +2 -2
- package/components/core.scss +1 -0
- package/components/index.js +7 -0
- package/index.js +6 -0
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _Form = require("./Form");
|
|
11
11
|
var _FormElementWrapper = _interopRequireDefault(require("./FormElementWrapper"));
|
|
12
|
-
var _excluded = ["label", "name", "className", "value", "defaultValue", "appearance", "onChange"];
|
|
12
|
+
var _excluded = ["label", "name", "className", "value", "defaultValue", "appearance", "onChange", "labelTitle"];
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
15
15
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
@@ -28,6 +28,7 @@ var Checkbox = function Checkbox(props) {
|
|
|
28
28
|
defaultValue = props.defaultValue,
|
|
29
29
|
appearance = props.appearance,
|
|
30
30
|
onChange = props.onChange,
|
|
31
|
+
labelTitle = props.labelTitle,
|
|
31
32
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
32
33
|
var _useContext = (0, _react.useContext)(_Form.FormContext),
|
|
33
34
|
onValueChange = _useContext.onValueChange;
|
|
@@ -64,11 +65,11 @@ var Checkbox = function Checkbox(props) {
|
|
|
64
65
|
appearance: appearance
|
|
65
66
|
}, /*#__PURE__*/_react["default"].createElement("input", _extends({}, inputProps, {
|
|
66
67
|
"data-hj-allow": true,
|
|
67
|
-
title:
|
|
68
|
+
title: labelTitle
|
|
68
69
|
})), /*#__PURE__*/_react["default"].createElement("label", {
|
|
69
70
|
className: "RCB-form-el-label",
|
|
70
71
|
htmlFor: name,
|
|
71
|
-
title:
|
|
72
|
+
title: labelTitle
|
|
72
73
|
}, label));
|
|
73
74
|
};
|
|
74
75
|
Checkbox.propTypes = {
|
|
@@ -16,7 +16,7 @@ var _FormElementWrapper = _interopRequireDefault(require("./FormElementWrapper")
|
|
|
16
16
|
var _ServerPaginatedDDList = _interopRequireDefault(require("./ServerPaginatedDDList"));
|
|
17
17
|
var _SummarySelection = _interopRequireDefault(require("./SummarySelection"));
|
|
18
18
|
var _excluded = ["items", "selectedItems", "selectItem", "idAttribute", "nameAttribute", "DropdownItem", "ListHeaderItem", "showClippedContentTitle", "searchQuery"],
|
|
19
|
-
_excluded2 = ["halign", "label", "showLabel", "name", "SelectionSummary", "className", "value", "defaultValue", "onChange", "disabled", "options", "showSearch", "searchPlaceholder", "idAttribute", "nameAttribute", "noSelectionLabel", "appearance", "multiSelect", "DropdownItem", "validations", "paginationType", "requestId", "onItemsRenderedCB", "requestParams", "pageNoKey", "perPageKey", "pageSize", "searchAttribute", "maxHeight", "responseFormatter", "getUrlParams", "showCreateCTA", "createCTAComponent", "onCreateCTAClick", "serverListClassName", "showClear", "onClear", "minPageNo", "LoaderComponent", "ListHeaderItem", "isModalOpen", "onSearchChange", "showClippedContentTitle", "onModalOpenCB", "onModalCloseCB", "showAllTags"];
|
|
19
|
+
_excluded2 = ["halign", "label", "showLabel", "name", "SelectionSummary", "className", "value", "defaultValue", "onChange", "disabled", "options", "showSearch", "searchPlaceholder", "idAttribute", "nameAttribute", "noSelectionLabel", "appearance", "multiSelect", "DropdownItem", "validations", "paginationType", "requestId", "onItemsRenderedCB", "requestParams", "pageNoKey", "perPageKey", "pageSize", "searchAttribute", "maxHeight", "responseFormatter", "getUrlParams", "showCreateCTA", "createCTAComponent", "onCreateCTAClick", "serverListClassName", "showClear", "onClear", "minPageNo", "LoaderComponent", "ListHeaderItem", "isModalOpen", "onSearchChange", "showClippedContentTitle", "onModalOpenCB", "onModalCloseCB", "showAllTags", "labelTitle"];
|
|
20
20
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
21
21
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
22
22
|
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
@@ -165,12 +165,14 @@ var CheckboxDropdownItem = exports.CheckboxDropdownItem = function CheckboxDropd
|
|
|
165
165
|
_ref3$idAttribute = _ref3.idAttribute,
|
|
166
166
|
idAttribute = _ref3$idAttribute === void 0 ? "id" : _ref3$idAttribute,
|
|
167
167
|
_ref3$nameAttribute = _ref3.nameAttribute,
|
|
168
|
-
nameAttribute = _ref3$nameAttribute === void 0 ? "name" : _ref3$nameAttribute
|
|
168
|
+
nameAttribute = _ref3$nameAttribute === void 0 ? "name" : _ref3$nameAttribute,
|
|
169
|
+
labelTitle = _ref3.labelTitle;
|
|
169
170
|
var item = pageType === "SERVER" ? items[index] || {} : itemData;
|
|
170
171
|
var id = item[idAttribute];
|
|
171
172
|
var labelContent = DDItem ? /*#__PURE__*/_react["default"].createElement(DDItem, _extends({
|
|
172
173
|
itemData: item
|
|
173
174
|
}, props)) : item[nameAttribute];
|
|
175
|
+
var labelTitle1 = labelTitle ? labelTitle : item[nameAttribute];
|
|
174
176
|
var findItemWithId = function findItemWithId() {
|
|
175
177
|
var foundObj = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(function (obj) {
|
|
176
178
|
return obj[idAttribute] === id;
|
|
@@ -184,6 +186,7 @@ var CheckboxDropdownItem = exports.CheckboxDropdownItem = function CheckboxDropd
|
|
|
184
186
|
name: item[nameAttribute],
|
|
185
187
|
className: "RCB-checkbox-wrapper",
|
|
186
188
|
label: labelContent,
|
|
189
|
+
labelTitle: labelTitle1,
|
|
187
190
|
value: findItemWithId(),
|
|
188
191
|
onChange: function onChange(e) {
|
|
189
192
|
return _onChange(e, item, findItemWithId);
|
|
@@ -240,6 +243,7 @@ var Dropdown = function Dropdown(props, ref) {
|
|
|
240
243
|
onModalCloseCB = props.onModalCloseCB,
|
|
241
244
|
_props$showAllTags = props.showAllTags,
|
|
242
245
|
showAllTags = _props$showAllTags === void 0 ? true : _props$showAllTags,
|
|
246
|
+
labelTitle = props.labelTitle,
|
|
243
247
|
restProps = _objectWithoutProperties(props, _excluded2);
|
|
244
248
|
var _useState = (0, _react.useState)(""),
|
|
245
249
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -344,7 +348,8 @@ var Dropdown = function Dropdown(props, ref) {
|
|
|
344
348
|
showClippedContentTitle: showClippedContentTitle,
|
|
345
349
|
searchQuery: searchQuery,
|
|
346
350
|
onChange: onChange,
|
|
347
|
-
paginationType: paginationType
|
|
351
|
+
paginationType: paginationType,
|
|
352
|
+
labelTitle: labelTitle
|
|
348
353
|
};
|
|
349
354
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
350
355
|
return {
|
|
@@ -408,12 +413,14 @@ var Dropdown = function Dropdown(props, ref) {
|
|
|
408
413
|
DropdownItem: multiSelect ? CheckboxDropdownItem : DropdownItem,
|
|
409
414
|
DDItem: DropdownItem
|
|
410
415
|
}, serverListAttrs, restProps, {
|
|
411
|
-
LoaderComponent: LoaderComponent
|
|
416
|
+
LoaderComponent: LoaderComponent,
|
|
417
|
+
labelTitle: labelTitle
|
|
412
418
|
})) : /*#__PURE__*/_react["default"].createElement(NormalList, _extends({}, commonAttributes, {
|
|
413
419
|
DropdownItem: multiSelect ? CheckboxDropdownItem : DropdownItem
|
|
414
420
|
}, restProps, {
|
|
415
421
|
items: getFilteredOptions(options, searchQuery, nameAttribute),
|
|
416
|
-
DDItem: DropdownItem
|
|
422
|
+
DDItem: DropdownItem,
|
|
423
|
+
labelTitle: labelTitle
|
|
417
424
|
})), showCreateCTA && /*#__PURE__*/_react["default"].createElement("div", {
|
|
418
425
|
className: "RCB-dd-create-cta",
|
|
419
426
|
onClick: onCreateCTAClick
|
|
@@ -5,6 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = exports.WithoutCreateCTA = exports.WithUIDItemComponent = exports.WithPreselectedValue = exports.WithPIDItemComponent = exports.WithLabel = exports.WithCreateCTA = exports.Disabled = exports.Default = exports.CustomOptionRenderer = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _p = _interopRequireDefault(require("../../../assets/p1.svg"));
|
|
9
|
+
var _p2 = _interopRequireDefault(require("../../../assets/p2.svg"));
|
|
10
|
+
var _p3 = _interopRequireDefault(require("../../../assets/p3.svg"));
|
|
11
|
+
var _p4 = _interopRequireDefault(require("../../../assets/p4.svg"));
|
|
12
|
+
var _p5 = _interopRequireDefault(require("../../../assets/p5.svg"));
|
|
8
13
|
var _dataLoader = _interopRequireDefault(require("../../../core/dataLoader"));
|
|
9
14
|
var _PIDItemComponent = _interopRequireDefault(require("../../PIDItemComponent/PIDItemComponent"));
|
|
10
15
|
var _UIDItemComponent = _interopRequireDefault(require("../../UIDItemComponent/UIDItemComponent"));
|
|
@@ -416,6 +421,7 @@ var WithUIDItemComponent = exports.WithUIDItemComponent = {
|
|
|
416
421
|
cities: ['Toronto']
|
|
417
422
|
}
|
|
418
423
|
}];
|
|
424
|
+
var avatars = [_p["default"], _p2["default"], _p3["default"], _p4["default"], _p5["default"]];
|
|
419
425
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
420
426
|
style: {
|
|
421
427
|
width: '500px'
|
|
@@ -430,6 +436,7 @@ var WithUIDItemComponent = exports.WithUIDItemComponent = {
|
|
|
430
436
|
setSelectedValue(value);
|
|
431
437
|
},
|
|
432
438
|
DropdownItem: _UIDItemComponent["default"],
|
|
439
|
+
avatars: avatars,
|
|
433
440
|
placeholder: "Choose a user...",
|
|
434
441
|
className: "demo-dropdown",
|
|
435
442
|
showSearch: true,
|
|
@@ -471,7 +478,7 @@ var WithPIDItemComponent = exports.WithPIDItemComponent = {
|
|
|
471
478
|
}];
|
|
472
479
|
var keysMap = {
|
|
473
480
|
uniqueIdMap: 'uniqueId',
|
|
474
|
-
imageUrlMap: '
|
|
481
|
+
imageUrlMap: 'imageUrl4',
|
|
475
482
|
titleMap: 'title'
|
|
476
483
|
};
|
|
477
484
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -492,7 +499,8 @@ var WithPIDItemComponent = exports.WithPIDItemComponent = {
|
|
|
492
499
|
placeholder: "Choose a product...",
|
|
493
500
|
className: "demo-dropdown",
|
|
494
501
|
showSearch: true,
|
|
495
|
-
searchPlaceholder: "Search products..."
|
|
502
|
+
searchPlaceholder: "Search products...",
|
|
503
|
+
keysMap: keysMap
|
|
496
504
|
}));
|
|
497
505
|
}
|
|
498
506
|
};
|
|
@@ -4,19 +4,30 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _lazyLoadImage = _interopRequireDefault(require("../../core/lazyLoadImage"));
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
11
|
var NoDataPlaceholder = function NoDataPlaceholder(props) {
|
|
11
12
|
var className = props.className,
|
|
12
13
|
image = props.image,
|
|
14
|
+
_props$imageUrl = props.imageUrl,
|
|
15
|
+
imageUrl = _props$imageUrl === void 0 ? "" : _props$imageUrl,
|
|
16
|
+
_props$imageAlt = props.imageAlt,
|
|
17
|
+
imageAlt = _props$imageAlt === void 0 ? "" : _props$imageAlt,
|
|
18
|
+
_props$imageClassname = props.imageClassname,
|
|
19
|
+
imageClassname = _props$imageClassname === void 0 ? "" : _props$imageClassname,
|
|
13
20
|
title = props.title,
|
|
14
21
|
description = props.description;
|
|
15
22
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
16
23
|
className: "RCB-no-data-placeholder ".concat(className)
|
|
17
|
-
}, image && /*#__PURE__*/_react["default"].createElement("div", {
|
|
24
|
+
}, (image || imageUrl) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
18
25
|
className: "RCB-no-data-image"
|
|
19
|
-
},
|
|
26
|
+
}, imageUrl ? /*#__PURE__*/_react["default"].createElement(_lazyLoadImage["default"], {
|
|
27
|
+
src: imageUrl,
|
|
28
|
+
alt: imageAlt || "No data",
|
|
29
|
+
className: imageClassname
|
|
30
|
+
}) : image), title && /*#__PURE__*/_react["default"].createElement("div", {
|
|
20
31
|
className: "RCB-no-data-title"
|
|
21
32
|
}, title), description && /*#__PURE__*/_react["default"].createElement("div", {
|
|
22
33
|
className: "RCB-no-data-description"
|
|
@@ -27,6 +38,12 @@ NoDataPlaceholder.propTypes = {
|
|
|
27
38
|
className: _propTypes["default"].string,
|
|
28
39
|
/** React element (typically an image or icon) to display */
|
|
29
40
|
image: _propTypes["default"].element,
|
|
41
|
+
/** Image URL string for lazy loading */
|
|
42
|
+
imageUrl: _propTypes["default"].string,
|
|
43
|
+
/** Alt text for the lazy loaded image */
|
|
44
|
+
imageAlt: _propTypes["default"].string,
|
|
45
|
+
/** Class name for the lazy loaded image */
|
|
46
|
+
imageClassname: _propTypes["default"].string,
|
|
30
47
|
/** Title text to display */
|
|
31
48
|
title: _propTypes["default"].string,
|
|
32
49
|
/** Description text to display */
|
|
@@ -36,6 +36,9 @@ var Default = exports.Default = {
|
|
|
36
36
|
src: "https://placehold.co/100",
|
|
37
37
|
alt: "No Data"
|
|
38
38
|
}),
|
|
39
|
+
imageUrl: "https://placehold.co/100",
|
|
40
|
+
imageAlt: "No Data Image",
|
|
41
|
+
imageClassname: "",
|
|
39
42
|
title: 'No Data Available',
|
|
40
43
|
description: 'There is no data to display at the moment.'
|
|
41
44
|
}
|
|
@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _lazyLoadImage = _interopRequireDefault(require("../../core/lazyLoadImage"));
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
10
|
function PIDItemComponent(props) {
|
|
11
|
+
console.log('props', props);
|
|
11
12
|
var DEFAULT_IMAGE = "https://libraries.unbxdapi.com/sdk-assets/defaultImage.svg";
|
|
12
13
|
|
|
13
14
|
// Desrructure props that are needed for client as well as server pagination types.
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
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); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _ToastNotification = require("../ToastNotification");
|
|
11
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
14
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
15
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
16
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
17
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
18
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
19
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
20
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
21
|
+
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."); }
|
|
22
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
23
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
24
|
+
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; } }
|
|
25
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
26
|
+
var getCookie = function getCookie(name) {
|
|
27
|
+
var match = document.cookie.match(new RegExp("(?:^|;\\s*)".concat(name, "=([^;]*)")));
|
|
28
|
+
return match ? decodeURIComponent(match[1]) : null;
|
|
29
|
+
};
|
|
30
|
+
var PulseVersionToggler = function PulseVersionToggler(props) {
|
|
31
|
+
var _getCookie;
|
|
32
|
+
var className = props.className,
|
|
33
|
+
endpoint = props.endpoint,
|
|
34
|
+
cookieName = props.cookieName,
|
|
35
|
+
queryParamKey = props.queryParamKey,
|
|
36
|
+
tooltipMessageOn = props.tooltipMessageOn,
|
|
37
|
+
tooltipMessageOff = props.tooltipMessageOff,
|
|
38
|
+
successMessage = props.successMessage,
|
|
39
|
+
errorMessage = props.errorMessage,
|
|
40
|
+
reloadDelay = props.reloadDelay,
|
|
41
|
+
shouldFallbackToV2 = props.shouldFallbackToV2;
|
|
42
|
+
var intialVersion = shouldFallbackToV2 ? "v2" : "v1";
|
|
43
|
+
var cookieValue = (_getCookie = getCookie(cookieName)) !== null && _getCookie !== void 0 ? _getCookie : intialVersion;
|
|
44
|
+
var _useState = (0, _react.useState)(cookieValue !== "v1"),
|
|
45
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
46
|
+
isV2 = _useState2[0],
|
|
47
|
+
setIsV2 = _useState2[1];
|
|
48
|
+
var _useState3 = (0, _react.useState)(false),
|
|
49
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
50
|
+
isLoading = _useState4[0],
|
|
51
|
+
setIsLoading = _useState4[1];
|
|
52
|
+
var _useState5 = (0, _react.useState)(false),
|
|
53
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
54
|
+
isHovered = _useState6[0],
|
|
55
|
+
setIsHovered = _useState6[1];
|
|
56
|
+
var hoverTimeoutRef = (0, _react.useRef)(null);
|
|
57
|
+
(0, _react.useEffect)(function () {
|
|
58
|
+
var _getCookie2;
|
|
59
|
+
var currentCookie = (_getCookie2 = getCookie(cookieName)) !== null && _getCookie2 !== void 0 ? _getCookie2 : intialVersion;
|
|
60
|
+
setIsV2(currentCookie !== "v1");
|
|
61
|
+
}, [cookieName]);
|
|
62
|
+
var handleMouseEnter = function handleMouseEnter() {
|
|
63
|
+
clearTimeout(hoverTimeoutRef.current);
|
|
64
|
+
setIsHovered(true);
|
|
65
|
+
};
|
|
66
|
+
var handleMouseLeave = function handleMouseLeave() {
|
|
67
|
+
if (isLoading) return;
|
|
68
|
+
hoverTimeoutRef.current = setTimeout(function () {
|
|
69
|
+
setIsHovered(false);
|
|
70
|
+
}, 300);
|
|
71
|
+
};
|
|
72
|
+
var handleToggle = /*#__PURE__*/function () {
|
|
73
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
|
|
74
|
+
var targetVersion, url, body, response, msg, _msg, _t;
|
|
75
|
+
return _regenerator().w(function (_context) {
|
|
76
|
+
while (1) switch (_context.p = _context.n) {
|
|
77
|
+
case 0:
|
|
78
|
+
if (!isLoading) {
|
|
79
|
+
_context.n = 1;
|
|
80
|
+
break;
|
|
81
|
+
}
|
|
82
|
+
return _context.a(2);
|
|
83
|
+
case 1:
|
|
84
|
+
targetVersion = isV2 ? "v1" : "v2";
|
|
85
|
+
setIsLoading(true);
|
|
86
|
+
_context.p = 2;
|
|
87
|
+
url = endpoint;
|
|
88
|
+
body = _defineProperty({}, queryParamKey, targetVersion);
|
|
89
|
+
_context.n = 3;
|
|
90
|
+
return fetch(url, {
|
|
91
|
+
method: "POST",
|
|
92
|
+
body: JSON.stringify(body),
|
|
93
|
+
headers: {
|
|
94
|
+
"Content-Type": "application/json"
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
case 3:
|
|
98
|
+
response = _context.v;
|
|
99
|
+
if (response.ok) {
|
|
100
|
+
_context.n = 4;
|
|
101
|
+
break;
|
|
102
|
+
}
|
|
103
|
+
throw new Error("Request failed with status ".concat(response.status));
|
|
104
|
+
case 4:
|
|
105
|
+
msg = typeof successMessage === "function" ? successMessage(targetVersion) : successMessage;
|
|
106
|
+
(0, _ToastNotification.successToast)(msg);
|
|
107
|
+
setTimeout(function () {
|
|
108
|
+
window.location.reload();
|
|
109
|
+
}, reloadDelay);
|
|
110
|
+
_context.n = 6;
|
|
111
|
+
break;
|
|
112
|
+
case 5:
|
|
113
|
+
_context.p = 5;
|
|
114
|
+
_t = _context.v;
|
|
115
|
+
setIsLoading(false);
|
|
116
|
+
_msg = typeof errorMessage === "function" ? errorMessage(_t) : errorMessage;
|
|
117
|
+
(0, _ToastNotification.errorToast)(_msg);
|
|
118
|
+
case 6:
|
|
119
|
+
return _context.a(2);
|
|
120
|
+
}
|
|
121
|
+
}, _callee, null, [[2, 5]]);
|
|
122
|
+
}));
|
|
123
|
+
return function handleToggle() {
|
|
124
|
+
return _ref.apply(this, arguments);
|
|
125
|
+
};
|
|
126
|
+
}();
|
|
127
|
+
var currentVersion = isV2 ? "v2" : "v1";
|
|
128
|
+
var targetVersion = isV2 ? "v1" : "v2";
|
|
129
|
+
var tooltipMessage = isV2 ? tooltipMessageOn : tooltipMessageOff;
|
|
130
|
+
var resolvedTooltip = typeof tooltipMessage === "function" ? tooltipMessage(currentVersion, targetVersion) : tooltipMessage;
|
|
131
|
+
var containerClasses = ["RCB-pulse-toggler", isHovered ? "RCB-pulse-toggler-visible" : "", className].filter(Boolean).join(" ");
|
|
132
|
+
var btnClasses = ["RCB-pulse-toggler-btn", isV2 ? "active" : ""].filter(Boolean).join(" ");
|
|
133
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
134
|
+
className: containerClasses,
|
|
135
|
+
onMouseEnter: handleMouseEnter,
|
|
136
|
+
onMouseLeave: handleMouseLeave
|
|
137
|
+
}, isHovered && /*#__PURE__*/_react["default"].createElement("div", {
|
|
138
|
+
className: "RCB-pulse-toggler-tooltip"
|
|
139
|
+
}, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
140
|
+
className: "RCB-pulse-toggler-loader-wrap"
|
|
141
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
142
|
+
className: "RCB-pulse-toggler-loader"
|
|
143
|
+
}), /*#__PURE__*/_react["default"].createElement("span", null, "Switching to ", targetVersion, "...")) : /*#__PURE__*/_react["default"].createElement("span", null, resolvedTooltip), /*#__PURE__*/_react["default"].createElement("div", {
|
|
144
|
+
className: "RCB-pulse-toggler-tooltip-arrow"
|
|
145
|
+
})), /*#__PURE__*/_react["default"].createElement("button", {
|
|
146
|
+
className: btnClasses,
|
|
147
|
+
onClick: handleToggle,
|
|
148
|
+
disabled: isLoading,
|
|
149
|
+
"aria-label": "Pulse version toggle - currently ".concat(currentVersion)
|
|
150
|
+
}, currentVersion.toUpperCase()));
|
|
151
|
+
};
|
|
152
|
+
PulseVersionToggler.propTypes = {
|
|
153
|
+
className: _propTypes["default"].string,
|
|
154
|
+
endpoint: _propTypes["default"].string.isRequired,
|
|
155
|
+
cookieName: _propTypes["default"].string,
|
|
156
|
+
queryParamKey: _propTypes["default"].string,
|
|
157
|
+
tooltipMessageOn: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
|
|
158
|
+
tooltipMessageOff: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
|
|
159
|
+
successMessage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
|
|
160
|
+
errorMessage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
|
|
161
|
+
reloadDelay: _propTypes["default"].number,
|
|
162
|
+
shouldFallbackToV2: _propTypes["default"].bool
|
|
163
|
+
};
|
|
164
|
+
PulseVersionToggler.defaultProps = {
|
|
165
|
+
endpoint: "/api/v1/pulse/version",
|
|
166
|
+
className: "",
|
|
167
|
+
cookieName: "_pulse_ver",
|
|
168
|
+
queryParamKey: "version",
|
|
169
|
+
tooltipMessageOn: "V2 Analytics is an upgraded version of V1 that provides improved session attribution, better support for AI-related use cases, and expanded tracking for new analytics events.",
|
|
170
|
+
tooltipMessageOff: "V2 Analytics is an upgraded version of V1 that provides improved session attribution, better support for AI-related use cases, and expanded tracking for new analytics events.",
|
|
171
|
+
successMessage: function successMessage(targetVersion) {
|
|
172
|
+
return "Switched to Pulse ".concat(targetVersion, ". Reloading page...");
|
|
173
|
+
},
|
|
174
|
+
errorMessage: "Failed to switch Pulse version. Please try again.",
|
|
175
|
+
reloadDelay: 1500,
|
|
176
|
+
shouldFallbackToV2: true
|
|
177
|
+
};
|
|
178
|
+
var _default = exports["default"] = PulseVersionToggler;
|