@unbxd-ui/unbxd-react-components 0.3.3 → 0.3.4-beta.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/components/Button/Button.js +64 -10
- package/components/Button/Button.stories.js +17 -1
- 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/Table/Table.stories.js +53 -7
- package/components/Table/TableChild.js +23 -9
- package/components/Table/TableUtils.js +133 -0
- package/components/Table/tableCore.css +1 -1
- package/components/Table/tableCore.scss +54 -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 +4 -4
|
@@ -0,0 +1,133 @@
|
|
|
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.DefaultNoDataComponent = exports.DefaultLoading = exports.DefaultAPIErrorComponent = void 0;
|
|
8
|
+
var _react = require("motion/react");
|
|
9
|
+
var _ = require(".");
|
|
10
|
+
var _NoDataPlaceholder = _interopRequireDefault(require("../NoDataPlaceholder"));
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
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; }
|
|
15
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
16
|
+
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); }
|
|
17
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
18
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
+
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; } }
|
|
20
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
21
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
22
|
+
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; }
|
|
23
|
+
var DefaultNoDataComponent = exports.DefaultNoDataComponent = function DefaultNoDataComponent(props) {
|
|
24
|
+
var _props$description = props.description,
|
|
25
|
+
description = _props$description === void 0 ? "No Data" : _props$description,
|
|
26
|
+
_props$heading = props.heading,
|
|
27
|
+
heading = _props$heading === void 0 ? "No Data" : _props$heading,
|
|
28
|
+
_props$image = props.image,
|
|
29
|
+
image = _props$image === void 0 ? "" : _props$image;
|
|
30
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: "table-no-data-placeholder-wrapper"
|
|
32
|
+
}, /*#__PURE__*/React.createElement(_NoDataPlaceholder["default"], {
|
|
33
|
+
title: heading,
|
|
34
|
+
description: description,
|
|
35
|
+
image: image
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
var DefaultAPIErrorComponent = exports.DefaultAPIErrorComponent = function DefaultAPIErrorComponent(props) {
|
|
39
|
+
var _props$status = props.status,
|
|
40
|
+
status = _props$status === void 0 ? "Error" : _props$status,
|
|
41
|
+
_props$image2 = props.image,
|
|
42
|
+
image = _props$image2 === void 0 ? "" : _props$image2;
|
|
43
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
className: "table-no-data-placeholder-wrapper"
|
|
45
|
+
}, /*#__PURE__*/React.createElement(_NoDataPlaceholder["default"], {
|
|
46
|
+
title: status,
|
|
47
|
+
description: "An error occurred while processing the request",
|
|
48
|
+
image: image
|
|
49
|
+
}));
|
|
50
|
+
};
|
|
51
|
+
var DefaultLoading = exports.DefaultLoading = function DefaultLoading(props) {
|
|
52
|
+
var columns = props.columns,
|
|
53
|
+
expandableRows = props.expandableRows,
|
|
54
|
+
selectableRows = props.selectableRows;
|
|
55
|
+
var columnCopy = _toConsumableArray(columns);
|
|
56
|
+
if (expandableRows || selectableRows) {
|
|
57
|
+
columnCopy.unshift({
|
|
58
|
+
name: "",
|
|
59
|
+
minWidth: '48px',
|
|
60
|
+
width: "48px"
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
var newColumns = columnCopy.map(function (col, i) {
|
|
64
|
+
var cell = function cell(row) {
|
|
65
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
66
|
+
className: "loading-anim-wrap"
|
|
67
|
+
}, /*#__PURE__*/React.createElement(TableLoadingCell, {
|
|
68
|
+
key: row.id,
|
|
69
|
+
lineCount: col.lineCount
|
|
70
|
+
}));
|
|
71
|
+
};
|
|
72
|
+
var style = {
|
|
73
|
+
display: "flex",
|
|
74
|
+
alignItems: "flex-start",
|
|
75
|
+
flexDirection: "column",
|
|
76
|
+
justifyContent: "center",
|
|
77
|
+
padding: "16px"
|
|
78
|
+
};
|
|
79
|
+
return _objectSpread(_objectSpread(_objectSpread({
|
|
80
|
+
cell: cell,
|
|
81
|
+
style: style
|
|
82
|
+
}, {
|
|
83
|
+
width: col.width
|
|
84
|
+
}), {
|
|
85
|
+
minWidth: col.minWidth
|
|
86
|
+
}), {}, {
|
|
87
|
+
name: col.name || "",
|
|
88
|
+
grow: col.grow || ""
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
var data = new Array(15).fill({});
|
|
92
|
+
return /*#__PURE__*/React.createElement(_react.AnimatePresence, null, /*#__PURE__*/React.createElement(_react.motion.div, {
|
|
93
|
+
className: "table-loader",
|
|
94
|
+
initial: {
|
|
95
|
+
opacity: 0,
|
|
96
|
+
y: 20
|
|
97
|
+
},
|
|
98
|
+
animate: {
|
|
99
|
+
opacity: 1,
|
|
100
|
+
y: 0
|
|
101
|
+
},
|
|
102
|
+
exit: {
|
|
103
|
+
opacity: 0,
|
|
104
|
+
y: 20
|
|
105
|
+
},
|
|
106
|
+
transition: {
|
|
107
|
+
duration: 0.3,
|
|
108
|
+
ease: "easeInOut"
|
|
109
|
+
}
|
|
110
|
+
}, /*#__PURE__*/React.createElement(_.Table, {
|
|
111
|
+
columnConfigs: newColumns,
|
|
112
|
+
pagination: false,
|
|
113
|
+
records: data,
|
|
114
|
+
paginationType: "CLIENT",
|
|
115
|
+
customClassName: "loading-table"
|
|
116
|
+
})));
|
|
117
|
+
};
|
|
118
|
+
var TableLoadingCell = function TableLoadingCell(_ref) {
|
|
119
|
+
var _ref$lineCount = _ref.lineCount,
|
|
120
|
+
lineCount = _ref$lineCount === void 0 ? 1 : _ref$lineCount;
|
|
121
|
+
return _toConsumableArray(Array(lineCount)).map(function (n, i) {
|
|
122
|
+
var width = Math.random() * (100 - 25) + 25 + '%';
|
|
123
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
124
|
+
className: "loading-default-text",
|
|
125
|
+
style: {
|
|
126
|
+
'width': width
|
|
127
|
+
},
|
|
128
|
+
key: i
|
|
129
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
130
|
+
className: "loading-default-background"
|
|
131
|
+
}));
|
|
132
|
+
});
|
|
133
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.RCB-table{border-collapse:collapse;width:100%}.RCB-th.RCB-expand-column{width:50px}.RCB-th-sortable{cursor:pointer}.RCB-th-sort:after{content:"\2B0D"}.RCB-th-asc:after{content:"\25B2"}.RCB-th-dsc:after{content:"\25BC"}.RCB-tr .expand-open:before{content:"▼"}.RCB-tr .expand-close:before{content:"▶"}.RCB-paginate-wrapper .RCB-per-page-count{display:inline-block}.RCB-paginate-wrapper .RCB-form-el-cont{margin:0}.RCB-paginate-wrapper .RCB-inline-modal-btn{background:transparent;padding:0}.RCB-paginate-nav{display:inline-block;border-radius:12px;border:solid 1px #8399ae;background-color:#f6f7f9;vertical-align:middle;margin-left:15px;overflow:hidden}.RCB-page-nav{padding:0 5px;text-decoration:none;color:inherit}.RCB-page-nav:first-child{border-right:solid 1px #8399ae}.RCB-page-nav.disabled{color:#ccc;pointer-events:none;cursor:not-allowed}.RCB-no-data{text-align:center}.nutana-table{font-family:Nunito Sans, Helvetica Neue, Helvetica, Roboto, "sans-serif";letter-spacing:0.42px;max-height:unset !important;min-height:unset !important;overflow:inherit !important;z-index:20}.nutana-table .rdt_TableRow{border-bottom-color:#DDE2EE !important}.nutana-table .rdt_TableRow:hover{background-color:#F4F8FF}.nutana-table .rdt_TableRow:hover .readable{color:#3E71F2;cursor:pointer}.nutana-table .rdt_TableRow:hover .view-one{background-color:#F4F8FF}.nutana-table .rdt_TableRow:hover .view-one .no-metric-wrap{background-color:#F4F8FF !important}.nutana-table .rdt_TableRow:hover .rdt_TableCell:first-child,.nutana-table .rdt_TableRow:hover [aria-label="Expand Row"]{box-shadow:inset 3px 0px 0px 0px #3E71F2}.nutana-table .rdt_TableRow .rdt_TableCell{padding:0;border-right:unset}.nutana-table .rdt_TableRow .rdt_TableCell:first-child{border-left:1px solid #DDE2EE}.nutana-table .rdt_TableRow .rdt_TableCell:last-child{border-right:1px solid #DDE2EE}.nutana-table.first-clm-sticky{overflow-x:auto !important;overflow-y:hidden}.nutana-table.first-clm-sticky .rdt_TableRow .rdt_TableCell:first-child{background:white;border-right:1px solid #dde2ee;box-shadow:5px 10px 15px 0px #17173A14;position:sticky;left:0;z-index:9}.nutana-table.first-clm-sticky .rdt_TableRow:hover .rdt_TableCell:first-child{background-color:#F4F8FF}.nutana-table.first-clm-sticky .rdt_TableHeadRow .rdt_TableCol:first-child{background:white;border-right:1px solid #dde2ee;position:sticky;left:0;z-index:9}.nutana-table.last-clm-sticky{overflow-x:auto !important;overflow-y:hidden}.nutana-table.last-clm-sticky .rdt_TableRow .rdt_TableCell:last-child{background:white;border-left:1px solid #dde2ee;box-shadow:-5px 10px 15px 0px #17173A14;position:sticky;left:unset;right:0;z-index:9}.nutana-table.last-clm-sticky .rdt_TableRow:hover .rdt_TableCell:last-child{background-color:#F4F8FF}.nutana-table.last-clm-sticky .rdt_TableHeadRow .rdt_TableCol:last-child{background:white;border-left:1px solid #dde2ee;position:sticky;left:unset;right:0;z-index:9}.nutana-table .tbl-content{padding:18px 24px;width:100%}.nutana-table .header-title{color:#17173A;display:inline;font-weight:600;font-size:16px;text-transform:capitalize}.nutana-table .tbl-title-1{color:#17173A;font-size:16px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-title-2{color:#17173A;font-size:14px;font-weight:600}.nutana-table .tbl-title-3{color:#17173A;font-size:12px;font-weight:600}.nutana-table .tbl-desc-1{color:#6F6F8D;font-size:16px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-desc-2{color:#6F6F8D;font-size:14px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-desc-3{color:#6F6F8D;font-size:12px;font-weight:600;letter-spacing:.42px}.nutana-table .rdt_TableHeadRow{box-shadow:0px 5px 15px 0px #17173A14;border-color:#DDE2EE;z-index:10}.nutana-table .rdt_TableHeadRow .rdt_TableCol:first-child{border-right:unset;border-left:1px solid #dde2ee;border-top:1px solid #dde2ee;border-top-left-radius:8px;margin:0}.nutana-table .rdt_TableHeadRow .rdt_TableCol{border-right:unset;border-color:#DDE2EE;padding:16px 24px}.nutana-table .rdt_TableHeadRow .rdt_TableCol:last-child{border-right:1px solid #DDE2EE;border-top-right-radius:8px}.nutana-table .rdt_TableCol_Sortable [data-column-id]{color:#17173a;display:inline;font-size:16px;font-weight:600;text-transform:capitalize}.nutana-table .rdt_TableCol_Sortable .status-col-tooltip{vertical-align:middle}.nutana-table .rdt_TableCol_Sortable .status-col-tooltip .RCB-tooltip-btn{margin-left:5px;border:unset}.nutana-table .column-kebab-menu .RCB-inline-modal-btn{padding:0}.nutana-table .column-kebab-menu .RCB-inline-modal-body{border-radius:4px;width:max-content}.nutana-table .left-line{border-left:1px solid #dde2ee;height:20px;padding-left:12px}.nutana-table .dd-menu-item{align-items:center;cursor:pointer;color:#6F6F8D;display:flex;font-size:14px;font-weight:600;padding:12px 16px}.nutana-table .dd-menu-item:hover{box-shadow:inset 3px 0 0 0 #3E71F2;background-color:#F4F8FF;color:#17173A}.nutana-table .dd-menu-item:hover .tbl-plus-icon{background-position:-1988px -2777px}.nutana-table .dd-menu-item:hover .tbl-file-icon{background-position:-2031px -2777px}.nutana-table .dd-menu-item .menu-icon{margin-right:8px}.nutana-table .dd-menu-item.no-more-queries-disabled{color:#bfc8ce;text-decoration:none;cursor:no-drop}.nutana-table .status-btn{border:1px solid;border-radius:37px;font-size:12px;font-weight:600;letter-spacing:.42px;padding:3px 8px}.nutana-table .status-btn__active{background-color:#e9f8f3;border-color:#90DCC1;color:#00C48C}.nutana-table .status-btn__draft{background-color:#e1e8fa;border-color:#8BACFF;color:#0A8FFD}.nutana-table .status-btn__upcoming{background-color:#fff5de;border-color:#FEE199;color:#C39C5B}.nutana-table .status-btn__expired{background:#FFE6E6;border-color:#FF8484;color:#F05C5C}.nutana-table .status-btn__stopped{background:#EFEFEF;border-color:#A0A0A0;color:#6F6F8D}.nutana-table .status-btns{margin-bottom:0}.nutana-table .merch-rule-type{border:1px solid #dae1e9;border-radius:12px;background-color:#ffffff;color:#687f8f;font-size:10px;padding:4px 9px}.nutana-table .campaign-type-icon span:first-of-type:before{content:"";margin-right:2px}.nutana-table .vertical-menu-icon{background-position:-1946px -2744px;height:18px;transform:scale(1.3);width:18px}.nutana-table .vertical-menu-icon:hover{background-position:-1946px -2778px}.nutana-table .right-triangle-icon{background-position:-1857px -2745px;height:20px;transform:scale(1);width:20px}.nutana-table .delete-text{color:#F05C5C}.nutana-table .loading-anim-wrap{padding:18px 24px;width:100%}.nutana-table .global{align-items:center;color:#3E71F2;text-transform:capitalize}.nutana-table .global .glob-icon{margin-right:3px;margin-left:-2px}.nutana-table .meta-info-bg{background-color:#F4F8FF;border-radius:6px;padding:16px;width:fit-content}.nutana-table .mb-5{margin-bottom:5px}.nutana-table .mb-0{margin-bottom:0}.nutana-table .mb-3{margin-bottom:3px}.nutana-table .mt-2{margin-top:2px}.nutana-table .pl-3{padding-left:3px}.nutana-table .pl-10{padding-left:10px}.RCB-table{font-size:14px}.RCB-table thead{border:1px solid #DADFE6}.RCB-table th{color:#FFF;background-color:#5C7185;padding:10px 8px;text-align:left}.RCB-table .RCB-tr{height:41px}.RCB-table td{padding:6px;background-color:#FFF;border-bottom:1px solid #E8EDEF}.RCB-table .RCB-form-el-cont{margin:0}.RCB-th-sortable:after{content:" ";margin-left:7px}.RCB-paginate-bar{color:#445870;font-size:14px;padding:7px 18px;border:1px solid #DADFE6;border-radius:7px 7px 0 0;background-color:#eef2fc}.RCB-paginate-bar .RCB-dropdown .RCB-inline-modal{border:none}.RCB-paginate-bar .RCB-inline-modal-btn{background:transparent;padding:0}.rdt_Pagination{border-color:#DDE2EE !important;border-bottom-left-radius:8px;border-bottom-right-radius:8px}
|
|
1
|
+
.RCB-table{border-collapse:collapse;width:100%}.RCB-th.RCB-expand-column{width:50px}.RCB-th-sortable{cursor:pointer}.RCB-th-sort:after{content:"\2B0D"}.RCB-th-asc:after{content:"\25B2"}.RCB-th-dsc:after{content:"\25BC"}.RCB-tr .expand-open:before{content:"▼"}.RCB-tr .expand-close:before{content:"▶"}.RCB-paginate-wrapper .RCB-per-page-count{display:inline-block}.RCB-paginate-wrapper .RCB-form-el-cont{margin:0}.RCB-paginate-wrapper .RCB-inline-modal-btn{background:transparent;padding:0}.RCB-paginate-nav{display:inline-block;border-radius:12px;border:solid 1px #8399ae;background-color:#f6f7f9;vertical-align:middle;margin-left:15px;overflow:hidden}.RCB-page-nav{padding:0 5px;text-decoration:none;color:inherit}.RCB-page-nav:first-child{border-right:solid 1px #8399ae}.RCB-page-nav.disabled{color:#ccc;pointer-events:none;cursor:not-allowed}.RCB-no-data{text-align:center}.nutana-table{font-family:Nunito Sans, Helvetica Neue, Helvetica, Roboto, "sans-serif";letter-spacing:0.42px;max-height:unset !important;min-height:unset !important;overflow:inherit !important;z-index:20}.nutana-table .rdt_TableRow{border-bottom-color:#DDE2EE !important}.nutana-table .rdt_TableRow:hover{background-color:#F4F8FF}.nutana-table .rdt_TableRow:hover .readable{color:#3E71F2;cursor:pointer}.nutana-table .rdt_TableRow:hover .view-one{background-color:#F4F8FF}.nutana-table .rdt_TableRow:hover .view-one .no-metric-wrap{background-color:#F4F8FF !important}.nutana-table .rdt_TableRow:hover .rdt_TableCell:first-child,.nutana-table .rdt_TableRow:hover [aria-label="Expand Row"]{box-shadow:inset 3px 0px 0px 0px #3E71F2}.nutana-table .rdt_TableRow .rdt_TableCell{padding:0;border-right:unset}.nutana-table .rdt_TableRow .rdt_TableCell:first-child{border-left:1px solid #DDE2EE}.nutana-table .rdt_TableRow .rdt_TableCell:last-child{border-right:1px solid #DDE2EE}.nutana-table.first-clm-sticky{overflow-x:auto !important;overflow-y:hidden}.nutana-table.first-clm-sticky .rdt_TableRow .rdt_TableCell:first-child{background:white;border-right:1px solid #dde2ee;box-shadow:5px 10px 15px 0px #17173A14;position:sticky;left:0;z-index:9}.nutana-table.first-clm-sticky .rdt_TableRow:hover .rdt_TableCell:first-child{background-color:#F4F8FF}.nutana-table.first-clm-sticky .rdt_TableHeadRow .rdt_TableCol:first-child{background:white;border-right:1px solid #dde2ee;position:sticky;left:0;z-index:9}.nutana-table.last-clm-sticky{overflow-x:auto !important;overflow-y:hidden}.nutana-table.last-clm-sticky .rdt_TableRow .rdt_TableCell:last-child{background:white;border-left:1px solid #dde2ee;box-shadow:-5px 10px 15px 0px #17173A14;position:sticky;left:unset;right:0;z-index:9}.nutana-table.last-clm-sticky .rdt_TableRow:hover .rdt_TableCell:last-child{background-color:#F4F8FF}.nutana-table.last-clm-sticky .rdt_TableHeadRow .rdt_TableCol:last-child{background:white;border-left:1px solid #dde2ee;position:sticky;left:unset;right:0;z-index:9}.nutana-table .tbl-content{padding:18px 24px;width:100%}.nutana-table .header-title{color:#17173A;display:inline;font-weight:600;font-size:16px;text-transform:capitalize}.nutana-table .tbl-title-1{color:#17173A;font-size:16px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-title-2{color:#17173A;font-size:14px;font-weight:600}.nutana-table .tbl-title-3{color:#17173A;font-size:12px;font-weight:600}.nutana-table .tbl-desc-1{color:#6F6F8D;font-size:16px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-desc-2{color:#6F6F8D;font-size:14px;font-weight:600;margin-bottom:14px}.nutana-table .tbl-desc-3{color:#6F6F8D;font-size:12px;font-weight:600;letter-spacing:.42px}.nutana-table .rdt_TableHeadRow{box-shadow:0px 5px 15px 0px #17173A14;border-color:#DDE2EE;z-index:10}.nutana-table .rdt_TableHeadRow .rdt_TableCol:first-child{border-right:unset;border-left:1px solid #dde2ee;border-top:1px solid #dde2ee;border-top-left-radius:8px;margin:0}.nutana-table .rdt_TableHeadRow .rdt_TableCol{border-right:unset;border-color:#DDE2EE;padding:16px 24px}.nutana-table .rdt_TableHeadRow .rdt_TableCol:last-child{border-right:1px solid #DDE2EE;border-top-right-radius:8px}.nutana-table .rdt_TableCol_Sortable [data-column-id]{color:#17173a;display:inline;font-size:16px;font-weight:600;text-transform:capitalize}.nutana-table .rdt_TableCol_Sortable .status-col-tooltip{vertical-align:middle}.nutana-table .rdt_TableCol_Sortable .status-col-tooltip .RCB-tooltip-btn{margin-left:5px;border:unset}.nutana-table .column-kebab-menu .RCB-inline-modal-btn{padding:0}.nutana-table .column-kebab-menu .RCB-inline-modal-body{border-radius:4px;width:max-content}.nutana-table .left-line{border-left:1px solid #dde2ee;height:20px;padding-left:12px}.nutana-table .dd-menu-item{align-items:center;cursor:pointer;color:#6F6F8D;display:flex;font-size:14px;font-weight:600;padding:12px 16px}.nutana-table .dd-menu-item:hover{box-shadow:inset 3px 0 0 0 #3E71F2;background-color:#F4F8FF;color:#17173A}.nutana-table .dd-menu-item:hover .tbl-plus-icon{background-position:-1988px -2777px}.nutana-table .dd-menu-item:hover .tbl-file-icon{background-position:-2031px -2777px}.nutana-table .dd-menu-item .menu-icon{margin-right:8px}.nutana-table .dd-menu-item.no-more-queries-disabled{color:#bfc8ce;text-decoration:none;cursor:no-drop}.nutana-table .status-btn{border:1px solid;border-radius:37px;font-size:12px;font-weight:600;letter-spacing:.42px;padding:3px 8px}.nutana-table .status-btn__active{background-color:#e9f8f3;border-color:#90DCC1;color:#00C48C}.nutana-table .status-btn__draft{background-color:#e1e8fa;border-color:#8BACFF;color:#0A8FFD}.nutana-table .status-btn__upcoming{background-color:#fff5de;border-color:#FEE199;color:#C39C5B}.nutana-table .status-btn__expired{background:#FFE6E6;border-color:#FF8484;color:#F05C5C}.nutana-table .status-btn__stopped{background:#EFEFEF;border-color:#A0A0A0;color:#6F6F8D}.nutana-table .status-btns{margin-bottom:0}.nutana-table .merch-rule-type{border:1px solid #dae1e9;border-radius:12px;background-color:#ffffff;color:#687f8f;font-size:10px;padding:4px 9px}.nutana-table .campaign-type-icon span:first-of-type:before{content:"";margin-right:2px}.nutana-table .vertical-menu-icon{background-position:-1946px -2744px;height:18px;transform:scale(1.3);width:18px}.nutana-table .vertical-menu-icon:hover{background-position:-1946px -2778px}.nutana-table .right-triangle-icon{background-position:-1857px -2745px;height:20px;transform:scale(1);width:20px}.nutana-table .delete-text{color:#F05C5C}.nutana-table .loading-anim-wrap{padding:18px 24px;width:100%}.nutana-table .global{align-items:center;color:#3E71F2;text-transform:capitalize}.nutana-table .global .glob-icon{margin-right:3px;margin-left:-2px}.nutana-table .meta-info-bg{background-color:#F4F8FF;border-radius:6px;padding:16px;width:fit-content}.nutana-table .mb-5{margin-bottom:5px}.nutana-table .mb-0{margin-bottom:0}.nutana-table .mb-3{margin-bottom:3px}.nutana-table .mt-2{margin-top:2px}.nutana-table .pl-3{padding-left:3px}.nutana-table .pl-10{padding-left:10px}.RCB-table{font-size:14px}.RCB-table thead{border:1px solid #DADFE6}.RCB-table th{color:#FFF;background-color:#5C7185;padding:10px 8px;text-align:left}.RCB-table .RCB-tr{height:41px}.RCB-table td{padding:6px;background-color:#FFF;border-bottom:1px solid #E8EDEF}.RCB-table .RCB-form-el-cont{margin:0}.RCB-th-sortable:after{content:" ";margin-left:7px}.RCB-paginate-bar{color:#445870;font-size:14px;padding:7px 18px;border:1px solid #DADFE6;border-radius:7px 7px 0 0;background-color:#eef2fc}.RCB-paginate-bar .RCB-dropdown .RCB-inline-modal{border:none}.RCB-paginate-bar .RCB-inline-modal-btn{background:transparent;padding:0}.rdt_Pagination{border-color:#DDE2EE !important;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.loading-anim-wrap{width:100%}.loading-default-text{vertical-align:middle;max-width:100%;min-height:15px;margin-bottom:5px;border-radius:3px;min-width:20px}@keyframes placeHolderShimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.loading-default-background{vertical-align:middle;animation-duration:1.25s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:darkgray;border-radius:3px;background:linear-gradient(to right, #eee 10%, #ddd 18%, #eee 33%);background-size:800px 104px;height:15px;position:relative;min-width:20px}.table-loader{width:100%}.table-no-data-placeholder-wrapper{background-color:#ffffff;width:inherit;margin:0 auto}
|
|
@@ -544,4 +544,58 @@
|
|
|
544
544
|
border-color: #DDE2EE !important;
|
|
545
545
|
border-bottom-left-radius: 8px;
|
|
546
546
|
border-bottom-right-radius: 8px;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
|
|
550
|
+
.loading-anim-wrap {
|
|
551
|
+
width: 100%;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.loading-default-text {
|
|
555
|
+
vertical-align: middle;
|
|
556
|
+
max-width: 100%;
|
|
557
|
+
min-height: 15px;
|
|
558
|
+
margin-bottom: 5px;
|
|
559
|
+
border-radius: 3px;
|
|
560
|
+
min-width: 20px;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
@keyframes placeHolderShimmer {
|
|
564
|
+
0% {
|
|
565
|
+
background-position: -468px 0;
|
|
566
|
+
}
|
|
567
|
+
100% {
|
|
568
|
+
background-position: 468px 0;
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.loading-default-background {
|
|
573
|
+
vertical-align: middle;
|
|
574
|
+
animation-duration: 1.25s;
|
|
575
|
+
animation-fill-mode: forwards;
|
|
576
|
+
animation-iteration-count: infinite;
|
|
577
|
+
animation-name: placeHolderShimmer;
|
|
578
|
+
animation-timing-function: linear;
|
|
579
|
+
background: darkgray;
|
|
580
|
+
border-radius: 3px;
|
|
581
|
+
background: linear-gradient(
|
|
582
|
+
to right,
|
|
583
|
+
#eeeeee 10%,
|
|
584
|
+
#dddddd 18%,
|
|
585
|
+
#eeeeee 33%
|
|
586
|
+
);
|
|
587
|
+
background-size: 800px 104px;
|
|
588
|
+
height: 15px;
|
|
589
|
+
position: relative;
|
|
590
|
+
min-width: 20px;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.table-loader {
|
|
594
|
+
width: 100%;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.table-no-data-placeholder-wrapper {
|
|
598
|
+
background-color: #ffffff;
|
|
599
|
+
width: inherit;
|
|
600
|
+
margin: 0 auto;
|
|
547
601
|
}
|
|
@@ -6,13 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports["default"] = UIDItemComponent;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var
|
|
10
|
-
var _mapPin = _interopRequireDefault(require("../../assets/map-pin.svg"));
|
|
11
|
-
var _p = _interopRequireDefault(require("../../assets/p1.svg"));
|
|
12
|
-
var _p2 = _interopRequireDefault(require("../../assets/p2.svg"));
|
|
13
|
-
var _p3 = _interopRequireDefault(require("../../assets/p3.svg"));
|
|
14
|
-
var _p4 = _interopRequireDefault(require("../../assets/p4.svg"));
|
|
15
|
-
var _p5 = _interopRequireDefault(require("../../assets/p5.svg"));
|
|
9
|
+
var _icon = _interopRequireDefault(require("../../core/icon"));
|
|
16
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
17
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 _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); }
|
|
18
12
|
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
@@ -36,7 +30,9 @@ function UIDItemComponent(props) {
|
|
|
36
30
|
_props$index = props.index,
|
|
37
31
|
index = _props$index === void 0 ? 0 : _props$index,
|
|
38
32
|
_props$style = props.style,
|
|
39
|
-
style = _props$style === void 0 ? {} : _props$style
|
|
33
|
+
style = _props$style === void 0 ? {} : _props$style,
|
|
34
|
+
_props$avatars = props.avatars,
|
|
35
|
+
clientAvatars = _props$avatars === void 0 ? [] : _props$avatars;
|
|
40
36
|
var _data$items = data.items,
|
|
41
37
|
items = _data$items === void 0 ? [] : _data$items,
|
|
42
38
|
_data$paginationType = data.paginationType,
|
|
@@ -44,10 +40,13 @@ function UIDItemComponent(props) {
|
|
|
44
40
|
_data$selectItem = data.selectItem,
|
|
45
41
|
serverSelectItem = _data$selectItem === void 0 ? function () {} : _data$selectItem,
|
|
46
42
|
_data$selectedItems = data.selectedItems,
|
|
47
|
-
serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems
|
|
43
|
+
serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems,
|
|
44
|
+
_data$avatars = data.avatars,
|
|
45
|
+
serverAvatars = _data$avatars === void 0 ? [] : _data$avatars;
|
|
48
46
|
|
|
49
47
|
// Determine the pagination type
|
|
50
48
|
var paginationType = clientPaginationType ? "CLIENT" : serverPaginationType;
|
|
49
|
+
var avatars = paginationType !== 'SERVER' ? clientAvatars : serverAvatars;
|
|
51
50
|
|
|
52
51
|
// Update the item data and select item function based on the pagination type
|
|
53
52
|
var updatedItemData = paginationType !== 'SERVER' ? itemData : items[index] || {};
|
|
@@ -104,8 +103,7 @@ function UIDItemComponent(props) {
|
|
|
104
103
|
return [].concat(_toConsumableArray(platforms), _toConsumableArray(devices)).join(", ");
|
|
105
104
|
}, [platforms, devices]);
|
|
106
105
|
var getAvatarSrc = function getAvatarSrc(rank) {
|
|
107
|
-
var
|
|
108
|
-
var avatarIndex = rank % 5;
|
|
106
|
+
var avatarIndex = rank % avatars.length;
|
|
109
107
|
return avatars[avatarIndex];
|
|
110
108
|
};
|
|
111
109
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -132,16 +130,14 @@ function UIDItemComponent(props) {
|
|
|
132
130
|
className: "RCB-user-id-metadata"
|
|
133
131
|
}, locationMetadata && /*#__PURE__*/_react["default"].createElement("div", {
|
|
134
132
|
className: "RCB-user-id-metadata-item RCB-location-metadata-item"
|
|
135
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
className: "RCB-location-icon"
|
|
133
|
+
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
134
|
+
icon: "map-pin",
|
|
135
|
+
size: "16px"
|
|
139
136
|
}), /*#__PURE__*/_react["default"].createElement("span", null, " ", locationMetadata)), locationMetadata && deviceMetadata && /*#__PURE__*/_react["default"].createElement("div", null, "|"), deviceMetadata && /*#__PURE__*/_react["default"].createElement("div", {
|
|
140
137
|
className: "RCB-user-id-metadata-item"
|
|
141
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
className: "RCB-device-icon"
|
|
138
|
+
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
139
|
+
icon: "desktop",
|
|
140
|
+
size: "16px"
|
|
145
141
|
}), /*#__PURE__*/_react["default"].createElement("span", null, deviceMetadata))))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
146
142
|
className: "RCB-user-id-description"
|
|
147
143
|
}, "This user is a ", /*#__PURE__*/_react["default"].createElement("b", null, user_types), " visitor with", " ", /*#__PURE__*/_react["default"].createElement("b", null, session_count), " sessions and ", /*#__PURE__*/_react["default"].createElement("b", null, total_events), " ", "events. They made ", /*#__PURE__*/_react["default"].createElement("b", null, clicks), " clicks, placed ", /*#__PURE__*/_react["default"].createElement("b", null, orders), " ", "order(s) worth ", /*#__PURE__*/_react["default"].createElement("b", null, "$", revenue), ".")))));
|