@desynova-digital/components 8.19.16 → 8.19.18

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.
Files changed (5) hide show
  1. package/atoms/icon/icons.json +7 -0
  2. package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.js +9 -10
  3. package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.jsx +8 -6
  4. package/molecules/table/table.js +178 -180
  5. package/package.json +2 -2
package/atoms/icon/icons.json CHANGED
@@ -1418,6 +1418,13 @@
1418
1418
  ],
1419
1419
  "width": 18,
1420
1420
  "height": 18
1421
+ },
1422
+ "revoke-user": {
1423
+ "paths": [
1424
+ "M7.07139 2.8577C7.07139 1.67377 6.11247 0.714844 4.92854 0.714844C3.74461 0.714844 2.78568 1.67377 2.78568 2.8577C2.78568 4.04163 3.74461 5.00056 4.92854 5.00056C6.11247 5.00056 7.07139 4.04163 7.07139 2.8577ZM8.67854 3.92913V5.00056H11.8928V3.92913H8.67854ZM0.642822 8.21484V9.28627H9.21425V8.21484C9.21425 6.78984 6.35889 6.07199 4.92854 6.07199C3.49818 6.07199 0.642822 6.78984 0.642822 8.21484Z"
1425
+ ],
1426
+ "width": 12,
1427
+ "height": 10
1421
1428
  }
1422
1429
  }
1423
1430
  }
package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.js CHANGED
@@ -1,25 +1,25 @@
1
- 'use strict';
1
+ "use strict";
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var _react = require('react');
7
+ var _react = require("react");
8
8
 
9
9
  var _react2 = _interopRequireDefault(_react);
10
10
 
11
- var _GraphDetailShimmer = require('./GraphDetailShimmer');
11
+ var _GraphDetailShimmer = require("./GraphDetailShimmer");
12
12
 
13
13
  var _GraphDetailShimmer2 = _interopRequireDefault(_GraphDetailShimmer);
14
14
 
15
- var _GraphTitleShimmer = require('./GraphTitleShimmer');
15
+ var _GraphTitleShimmer = require("./GraphTitleShimmer");
16
16
 
17
17
  var _GraphTitleShimmer2 = _interopRequireDefault(_GraphTitleShimmer);
18
18
 
19
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
20
 
21
21
  var GraphsComponentShimmer = function GraphsComponentShimmer() {
22
- var val = window.location.href.split('/').pop() === 'hotstar' ? 1 : 4;
22
+ var val = window.location.href.split("/").pop() === "hotstar" ? 2 : 4;
23
23
  var components = [];
24
24
 
25
25
  for (var i = 0; i < val; i++) {
@@ -27,13 +27,12 @@ var GraphsComponentShimmer = function GraphsComponentShimmer() {
27
27
  }
28
28
 
29
29
  return _react2.default.createElement(
30
- 'div',
31
- { style: { display: 'flex', flexDirection: 'column' } },
30
+ "div",
31
+ { style: { display: "flex", flexDirection: "column" } },
32
32
  _react2.default.createElement(_GraphTitleShimmer2.default, null),
33
33
  _react2.default.createElement(
34
- 'div',
35
- { style: { padding: '0 10px', display: 'flex', gap: '10px' } },
36
- ' ',
34
+ "div",
35
+ { style: { padding: "0 10px", display: "flex", gap: "10px" } },
37
36
  components.map(function (component) {
38
37
  return component;
39
38
  })
package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.jsx CHANGED
@@ -1,9 +1,9 @@
1
- import React from 'react';
2
- import GraphDetailsShimmer from './GraphDetailShimmer';
3
- import GraphTitleShimmer from './GraphTitleShimmer';
1
+ import React from "react";
2
+ import GraphDetailsShimmer from "./GraphDetailShimmer";
3
+ import GraphTitleShimmer from "./GraphTitleShimmer";
4
4
 
5
5
  const GraphsComponentShimmer = () => {
6
- let val = window.location.href.split('/').pop() === 'hotstar' ? 1 : 4;
6
+ let val = window.location.href.split("/").pop() === "hotstar" ? 2 : 4;
7
7
  const components = [];
8
8
 
9
9
  for (let i = 0; i < val; i++) {
@@ -11,9 +11,11 @@ const GraphsComponentShimmer = () => {
11
11
  }
12
12
 
13
13
  return (
14
- <div style={{ display: 'flex', flexDirection: 'column' }}>
14
+ <div style={{ display: "flex", flexDirection: "column" }}>
15
15
  <GraphTitleShimmer />
16
- <div style={{ padding: '0 10px', display: 'flex', gap: '10px' }}> {components.map((component) => component)}</div>
16
+ <div style={{ padding: "0 10px", display: "flex", gap: "10px" }}>
17
+ {components.map((component) => component)}
18
+ </div>
17
19
  </div>
18
20
  );
19
21
  };
package/molecules/table/table.js CHANGED
@@ -20,10 +20,9 @@ var _templateObject = _taggedTemplateLiteral(["\n border-bottom: 1px solid #303
20
20
  _templateObject8 = _taggedTemplateLiteral([""], [""]),
21
21
  _templateObject9 = _taggedTemplateLiteral(["\n .show-row {\n transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -moz-transform: rotate(-180deg);\n -ms-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n }\n .hide-row {\n transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n }\n .show-row,\n .hide-row {\n transition: transform 0.5s ease-in-out;\n -webkit-transition: transform 0.5s ease-in-out;\n -moz-transition: transform 0.5s ease-in-out;\n -ms-transition: transform 0.5s ease-in-out;\n -o-transition: transform 0.5s ease-in-out;\n text-align: right;\n cursor: pointer;\n }\n\n &.selected-row > td,\n &.selected-row:nth-child(even) > td {\n background: ", ";\n }\n\n &:nth-child(even) > td {\n background: ", ";\n }\n\n &:hover {\n .asset-play {\n color: #00cec6;\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"], ["\n .show-row {\n transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -moz-transform: rotate(-180deg);\n -ms-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n }\n .hide-row {\n transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n }\n .show-row,\n .hide-row {\n transition: transform 0.5s ease-in-out;\n -webkit-transition: transform 0.5s ease-in-out;\n -moz-transition: transform 0.5s ease-in-out;\n -ms-transition: transform 0.5s ease-in-out;\n -o-transition: transform 0.5s ease-in-out;\n text-align: right;\n cursor: pointer;\n }\n\n &.selected-row > td,\n &.selected-row:nth-child(even) > td {\n background: ", ";\n }\n\n &:nth-child(even) > td {\n background: ", ";\n }\n\n &:hover {\n .asset-play {\n color: #00cec6;\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"]),
22
22
  _templateObject10 = _taggedTemplateLiteral(["\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", "; \n padding: 7px 14px;\n // border-top: 1px solid ", "; \n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: ", ";\n max-width: 200px;\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: #00cec6;\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #FF6C56;\n }\n }\n & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: #00cec6;\n path{\n fill: #00cec6;\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: #00cec6;\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid #00CEC6;\n }\n\n\n"], ["\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", "; \n padding: 7px 14px;\n // border-top: 1px solid ", "; \n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: ", ";\n max-width: 200px;\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: #00cec6;\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #FF6C56;\n }\n }\n & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: #00cec6;\n path{\n fill: #00cec6;\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: #00cec6;\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid #00CEC6;\n }\n\n\n"]),
23
- _templateObject11 = _taggedTemplateLiteral(["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -40px;\n"], ["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -40px;\n"]),
24
- _templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n height: 30px;\n position: absolute;\n right: 0px;\n gap: 2px;\n"], ["\n display: flex;\n height: 30px;\n position: absolute;\n right: 0px;\n gap: 2px;\n"]),
25
- _templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"]),
26
- _templateObject14 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"], ["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"]);
23
+ _templateObject11 = _taggedTemplateLiteral(["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -1px;\n"], ["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -1px;\n"]),
24
+ _templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"]),
25
+ _templateObject13 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"], ["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"]);
27
26
 
28
27
  var _react = require("react");
29
28
 
@@ -81,9 +80,9 @@ var _permissionIconMap = require("../../../tokens/permissionIconMap");
81
80
 
82
81
  var _permissionIconMap2 = _interopRequireDefault(_permissionIconMap);
83
82
 
84
- var _errorScreen = require("../errorScreen/errorScreen");
83
+ var _TableErrorScreen = require("../../molecules/errorScreen/TableErrorScreen");
85
84
 
86
- var _errorScreen2 = _interopRequireDefault(_errorScreen);
85
+ var _TableErrorScreen2 = _interopRequireDefault(_TableErrorScreen);
87
86
 
88
87
  var _inputText = require("../../atoms/inputText");
89
88
 
@@ -654,6 +653,7 @@ var Table = function (_Component) {
654
653
  });
655
654
  switch (operation) {
656
655
  case "refresh":
656
+ _this.props.tableLoadingActionFunc(true);
657
657
  refreshDashboard();
658
658
  break;
659
659
  case "clearInput":
@@ -663,7 +663,6 @@ var Table = function (_Component) {
663
663
  };
664
664
 
665
665
  _this.columns = _this.getColumns(props);
666
-
667
666
  var spiltColumns = _this.spiltColumns();
668
667
 
669
668
  _this.state = {
@@ -1056,8 +1055,14 @@ var Table = function (_Component) {
1056
1055
  */
1057
1056
 
1058
1057
  }, {
1059
- key: "tableLoadingFunc",
1060
- value: function tableLoadingFunc() {
1058
+ key: "refreshClicked",
1059
+ value: function refreshClicked() {
1060
+ this.props.tableLoadingActionFunc(true);
1061
+ return getTableData({ page: 1 }, false, true);
1062
+ }
1063
+ }, {
1064
+ key: "tableLoadingFirst",
1065
+ value: function tableLoadingFirst() {
1061
1066
  var divArray = new Array(15).fill(null);
1062
1067
  return _react2.default.createElement(
1063
1068
  "div",
@@ -1093,7 +1098,7 @@ var Table = function (_Component) {
1093
1098
  return _react2.default.createElement(
1094
1099
  "div",
1095
1100
  { style: { padding: "10px" } },
1096
- this.tableLoadingFunc()
1101
+ this.tableLoadingFirst()
1097
1102
  );
1098
1103
  } else {
1099
1104
  return _react2.default.createElement(
@@ -1109,7 +1114,7 @@ var Table = function (_Component) {
1109
1114
  onSort: this.props.onSort
1110
1115
  })
1111
1116
  ),
1112
- _react2.default.createElement(_errorScreen2.default, null)
1117
+ _react2.default.createElement(_TableErrorScreen2.default, null)
1113
1118
  );
1114
1119
  }
1115
1120
  }
@@ -1128,7 +1133,8 @@ var Table = function (_Component) {
1128
1133
  pageDropdown = _props2.pageDropdown,
1129
1134
  getTableData = _props2.getTableData,
1130
1135
  downloadAvailable = _props2.downloadAvailable,
1131
- tableLoading = _props2.tableLoading;
1136
+ tableLoading = _props2.tableLoading,
1137
+ tableLoadingAction = _props2.tableLoadingAction;
1132
1138
  var _state2 = this.state,
1133
1139
  nestedTable = _state2.nestedTable,
1134
1140
  searchedText = _state2.searchedText,
@@ -1277,193 +1283,186 @@ var Table = function (_Component) {
1277
1283
  this.props.tableTitle
1278
1284
  )
1279
1285
  ),
1280
- this.props.tableLoading && _react2.default.createElement(
1281
- TableTitleLoadingInitial,
1286
+ _react2.default.createElement(
1287
+ _react2.default.Fragment,
1282
1288
  null,
1283
- _react2.default.createElement(_Shimmer2.default, { height: "20px", width: "150px" }),
1284
- _react2.default.createElement(
1285
- RightSideTitleLoadingTable,
1286
- null,
1287
- _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "200px" }),
1288
- _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "100px" }),
1289
- _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "150px" }),
1290
- _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" }),
1291
- _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" }),
1292
- _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" })
1293
- )
1294
- ) || _react2.default.createElement(
1295
- "div",
1296
- { className: "title-right-area" },
1297
- showSearchBox && _react2.default.createElement(
1298
- SearchContainer,
1289
+ tableLoading && !tableLoadingAction && _react2.default.createElement(
1290
+ TableTitleLoadingInitial,
1299
1291
  null,
1300
- _react2.default.createElement(
1301
- "span",
1302
- { className: "search-icon-wrapper" },
1303
- _react2.default.createElement(_icon2.default, {
1304
- name: "search",
1305
- width: 12,
1306
- height: 12,
1307
- color: "#999999"
1308
- })
1309
- ),
1310
- _react2.default.createElement(_inputText2.default, {
1311
- className: "input-field",
1312
- label: "Search",
1313
- value: searchedText,
1314
- onChange: function onChange(e) {
1315
- _this4.handleInputChange(e.target.value);
1316
- }
1317
- }),
1318
- searchedText && searchedText.length && _react2.default.createElement(
1319
- "span",
1320
- {
1321
- className: "close-icon-wrapper",
1322
- onClick: function onClick() {
1323
- return _this4.tableOperation("clearInput");
1324
- }
1325
- },
1326
- _react2.default.createElement(_icon2.default, {
1327
- name: "cross",
1328
- width: 12,
1329
- height: 10,
1330
- color: "#999999"
1331
- })
1332
- )
1292
+ _react2.default.createElement(_Shimmer2.default, { height: "24px", width: "150px" })
1333
1293
  ),
1334
- pageDropdown && pageDropdown || null,
1335
- this.props.searchable ? _react2.default.createElement(
1336
- "div",
1337
- null,
1338
- _react2.default.createElement(_button2.default, {
1339
- appearance: "cta",
1340
- icon: "search",
1341
- display: "rounded",
1342
- width: 34,
1343
- height: 34,
1344
- iconWidth: 16,
1345
- iconHeight: 16
1346
- })
1347
- ) : null,
1348
1294
  _react2.default.createElement(
1349
1295
  "div",
1350
- { className: "refresh-section" },
1351
- isRefreshActivated && _react2.default.createElement(
1352
- "div",
1353
- { className: "tooltip" },
1354
- "Refresh Records"
1355
- ),
1356
- isRefreshDotVisible && _react2.default.createElement("div", { className: "red-dot" }),
1357
- _react2.default.createElement(
1358
- "div",
1359
- {
1360
- className: "" + (isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
1361
- onClick: function onClick() {
1362
- return _this4.tableOperation("refresh");
1296
+ { className: "title-right-area" },
1297
+ showSearchBox && (!tableLoading || tableLoading && tableLoadingAction) && _react2.default.createElement(
1298
+ SearchContainer,
1299
+ null,
1300
+ _react2.default.createElement(
1301
+ "span",
1302
+ { className: "search-icon-wrapper" },
1303
+ _react2.default.createElement(_icon2.default, {
1304
+ name: "search",
1305
+ width: 12,
1306
+ height: 12,
1307
+ color: "#999999"
1308
+ })
1309
+ ),
1310
+ _react2.default.createElement(_inputText2.default, {
1311
+ className: "input-field",
1312
+ label: "Search",
1313
+ value: searchedText,
1314
+ onChange: function onChange(e) {
1315
+ _this4.handleInputChange(e.target.value);
1363
1316
  }
1364
- },
1365
- _react2.default.createElement(_button2.default, {
1366
- display: "rounded",
1367
- appearance: "cta",
1368
- icon: "data-refresh",
1369
- width: 16,
1370
- height: 16
1371
- })
1372
- )
1373
- ),
1374
- this.props.filtersStructure && this.props.filtersStructure.length ? _react2.default.createElement(_filter2.default, {
1375
- ref: this._filterRef,
1376
- initialFilters: this.props.initialFilters,
1377
- filtersStructure: this.props.filtersStructure,
1378
- selectedFilters: this.props.selectedFilters,
1379
- applyFilters: this.props.applyFilters,
1380
- showSelectedFiltersAsChip: this.props.showSelectedFiltersAsChip,
1381
- filterMessage: this.props.filterMessage,
1382
- handleUserIdFilterChange: this.props.handleUserIdFilterChange,
1383
- userIdsList: this.props.userIdsList
1384
- }) : null,
1385
- downloadAvailable && _react2.default.createElement(
1386
- "div",
1387
- { className: "refresh-section" },
1388
- _react2.default.createElement(
1317
+ }),
1318
+ searchedText && searchedText.length && _react2.default.createElement(
1319
+ "span",
1320
+ {
1321
+ className: "close-icon-wrapper",
1322
+ onClick: function onClick() {
1323
+ return _this4.tableOperation("clearInput");
1324
+ }
1325
+ },
1326
+ _react2.default.createElement(_icon2.default, {
1327
+ name: "cross",
1328
+ width: 12,
1329
+ height: 10,
1330
+ color: "#999999"
1331
+ })
1332
+ )
1333
+ ) || _react2.default.createElement(_Shimmer2.default, { height: "24px", width: "322px" }),
1334
+ !tableLoading && pageDropdown && pageDropdown || tableLoadingAction ? pageDropdown : _react2.default.createElement(_Shimmer2.default, { height: "24px", width: "100px" }),
1335
+ this.props.searchable ? _react2.default.createElement(
1389
1336
  "div",
1390
- {
1391
- className: "" + (isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
1392
- onClick: function onClick() {
1393
- return getTableData({ page: 1 }, false, true);
1394
- }
1395
- },
1337
+ null,
1396
1338
  _react2.default.createElement(_button2.default, {
1397
- display: "rounded",
1398
1339
  appearance: "cta",
1399
- icon: "download-icon",
1400
- width: 16,
1401
- height: 16,
1402
- iconWidth: 12,
1403
- iconHeight: 12
1340
+ icon: "search",
1341
+ display: "rounded",
1342
+ width: 34,
1343
+ height: 34,
1344
+ iconWidth: 16,
1345
+ iconHeight: 16
1404
1346
  })
1405
- )
1406
- ) || null,
1407
- false && _react2.default.createElement(
1408
- "div",
1409
- { className: "column-show-holder" },
1347
+ ) : null,
1410
1348
  _react2.default.createElement(
1411
1349
  "div",
1412
- { className: "column-show-icon" },
1413
- _react2.default.createElement(_icon2.default, {
1414
- name: "controls",
1415
- width: 16,
1416
- height: 16,
1417
- color: "#afb2ba"
1418
- })
1350
+ { className: "refresh-section" },
1351
+ isRefreshActivated && _react2.default.createElement(
1352
+ "div",
1353
+ { className: "tooltip" },
1354
+ "Refresh Records"
1355
+ ),
1356
+ isRefreshDotVisible && _react2.default.createElement("div", { className: "red-dot" }),
1357
+ (!tableLoading || tableLoadingAction) && _react2.default.createElement(
1358
+ "div",
1359
+ {
1360
+ className: "" + (isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
1361
+ onClick: function onClick() {
1362
+ return _this4.tableOperation("refresh");
1363
+ }
1364
+ },
1365
+ _react2.default.createElement(_button2.default, {
1366
+ display: "rounded",
1367
+ appearance: "cta",
1368
+ icon: "data-refresh",
1369
+ width: 16,
1370
+ height: 16
1371
+ })
1372
+ ) || _react2.default.createElement(_Shimmer2.default, { height: "24px", width: "30px" })
1419
1373
  ),
1420
- _react2.default.createElement(
1374
+ this.props.filtersStructure && this.props.filtersStructure.length && !tableLoading || tableLoadingAction ? _react2.default.createElement(_filter2.default, {
1375
+ ref: this._filterRef,
1376
+ initialFilters: this.props.initialFilters,
1377
+ filtersStructure: this.props.filtersStructure,
1378
+ selectedFilters: this.props.selectedFilters,
1379
+ applyFilters: this.props.applyFilters,
1380
+ showSelectedFiltersAsChip: this.props.showSelectedFiltersAsChip,
1381
+ filterMessage: this.props.filterMessage,
1382
+ handleUserIdFilterChange: this.props.handleUserIdFilterChange,
1383
+ userIdsList: this.props.userIdsList
1384
+ }) : tableLoading ? _react2.default.createElement(_Shimmer2.default, { height: "24px", width: "30px" }) : null,
1385
+ downloadAvailable && (!tableLoading || tableLoading && tableLoadingAction) && _react2.default.createElement(
1421
1386
  "div",
1422
- { className: "column-show-list-box" },
1387
+ { className: "refresh-section" },
1423
1388
  _react2.default.createElement(
1424
1389
  "div",
1425
- null,
1390
+ {
1391
+ className: "" + (isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
1392
+ onClick: this.refreshClicked
1393
+ },
1394
+ _react2.default.createElement(_button2.default, {
1395
+ display: "rounded",
1396
+ appearance: "cta",
1397
+ icon: "download-icon",
1398
+ width: 16,
1399
+ height: 16,
1400
+ iconWidth: 12,
1401
+ iconHeight: 12
1402
+ })
1403
+ )
1404
+ ) || _react2.default.createElement(_Shimmer2.default, { height: "24px", width: "30px" }),
1405
+ false && _react2.default.createElement(
1406
+ "div",
1407
+ { className: "column-show-holder" },
1408
+ _react2.default.createElement(
1409
+ "div",
1410
+ { className: "column-show-icon" },
1411
+ _react2.default.createElement(_icon2.default, {
1412
+ name: "controls",
1413
+ width: 16,
1414
+ height: 16,
1415
+ color: "#afb2ba"
1416
+ })
1417
+ ),
1418
+ _react2.default.createElement(
1419
+ "div",
1420
+ { className: "column-show-list-box" },
1426
1421
  _react2.default.createElement(
1427
1422
  "div",
1428
- { className: "column-show-info" },
1429
- _react2.default.createElement(
1430
- "div",
1431
- { className: "column-show-info-header" },
1432
- "Table Filters"
1433
- ),
1423
+ null,
1434
1424
  _react2.default.createElement(
1435
1425
  "div",
1436
- null,
1437
- "Select/deselect to show/hide columns."
1426
+ { className: "column-show-info" },
1427
+ _react2.default.createElement(
1428
+ "div",
1429
+ { className: "column-show-info-header" },
1430
+ "Table Filters"
1431
+ ),
1432
+ _react2.default.createElement(
1433
+ "div",
1434
+ null,
1435
+ "Select/deselect to show/hide columns."
1436
+ ),
1437
+ _react2.default.createElement(
1438
+ "div",
1439
+ null,
1440
+ "Drag and arrange the column order."
1441
+ )
1438
1442
  ),
1439
1443
  _react2.default.createElement(
1440
1444
  "div",
1441
- null,
1442
- "Drag and arrange the column order."
1443
- )
1444
- ),
1445
- _react2.default.createElement(
1446
- "div",
1447
- { className: "column-show-list" },
1448
- _react2.default.createElement(
1449
- _checkbox2.default.Group,
1450
- {
1451
- name: "example2",
1452
- type: "label",
1453
- onChange: function onChange(e) {
1454
- _this4.showCloumnCheckChange(e.target.value, e.target.checked);
1445
+ { className: "column-show-list" },
1446
+ _react2.default.createElement(
1447
+ _checkbox2.default.Group,
1448
+ {
1449
+ name: "example2",
1450
+ type: "label",
1451
+ onChange: function onChange(e) {
1452
+ _this4.showCloumnCheckChange(e.target.value, e.target.checked);
1453
+ },
1454
+ align: "horizontal",
1455
+ selected: this.state.showColumnArr ? this.state.showColumnArr : [],
1456
+ theme: this.props.theme
1455
1457
  },
1456
- align: "horizontal",
1457
- selected: this.state.showColumnArr ? this.state.showColumnArr : [],
1458
- theme: this.props.theme
1459
- },
1460
- this.columns ? this.columns.map(function (item) {
1461
- return _react2.default.createElement(
1462
- _checkbox2.default,
1463
- { value: item.field },
1464
- item.title
1465
- );
1466
- }) : null
1458
+ this.columns ? this.columns.map(function (item) {
1459
+ return _react2.default.createElement(
1460
+ _checkbox2.default,
1461
+ { value: item.field },
1462
+ item.title
1463
+ );
1464
+ }) : null
1465
+ )
1467
1466
  )
1468
1467
  )
1469
1468
  )
@@ -1545,8 +1544,8 @@ var Table = function (_Component) {
1545
1544
  this.props,
1546
1545
  _react2.default.createElement(Table.Header, {
1547
1546
  theme: this.props.theme,
1548
- columns: tableLoading ? [] : this.defaultShowColumns,
1549
- selectedColumns: tableLoading ? [] : this.state.showColumnArr,
1547
+ columns: this.defaultShowColumns,
1548
+ selectedColumns: !tableLoading || tableLoading && tableLoadingAction ? this.state.showColumnArr : [],
1550
1549
  onSort: this.props.onSort
1551
1550
  }),
1552
1551
  _react2.default.createElement(
@@ -1626,10 +1625,9 @@ Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
1626
1625
  });
1627
1626
 
1628
1627
  var TableTitleLoadingInitial = _styledComponents2.default.div(_templateObject11);
1629
- var RightSideTitleLoadingTable = _styledComponents2.default.div(_templateObject12);
1630
1628
 
1631
- var DubbingStatusStyles = _styledComponents2.default.div(_templateObject13);
1632
- var SelectAllButton = _styledComponents2.default.div(_templateObject14, function (props) {
1629
+ var DubbingStatusStyles = _styledComponents2.default.div(_templateObject12);
1630
+ var SelectAllButton = _styledComponents2.default.div(_templateObject13, function (props) {
1633
1631
  return props.isActive ? "1px solid #9E9E9E" : "";
1634
1632
  }, function (props) {
1635
1633
  return !props.isActive ? "#49dad0" : "";
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.16",
3
+ "version": "8.19.18",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "8.19.16",
10
+ "@desynova-digital/tokens": "8.19.18",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },