@desynova-digital/components 8.19.63 → 9.0.0
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/atoms/avatar/avatar.js +1 -1
- package/atoms/avatar/avatar.story.js +46 -14
- package/atoms/badge/badge.js +13 -13
- package/atoms/badge/badge.story.js +91 -29
- package/atoms/button/button.js +81 -85
- package/atoms/button/button.story.js +342 -2
- package/atoms/card/card.js +43 -39
- package/atoms/card/card.story.js +74 -48
- package/atoms/cardStack/cardStack.js +182 -155
- package/atoms/cardStack/cardStack.story.js +131 -18
- package/atoms/cardV2/cardV2.js +23 -23
- package/atoms/cardV2/cardV2.story.js +196 -45
- package/atoms/cardV2/content.js +109 -87
- package/atoms/cardV2/thumbnail.js +85 -72
- package/atoms/cardV2/timeline.js +119 -107
- package/atoms/checkbox/checkbox.js +41 -32
- package/atoms/checkbox/checkbox.story.js +220 -99
- package/atoms/customSelect/customSelect.story.js +820 -582
- package/atoms/datePicker/datePicker.js +77 -83
- package/atoms/datePicker/datePicker.story.js +167 -1
- package/atoms/dateTime/dateTime.story.js +26 -1
- package/atoms/draftInputText/draftInputText.js +358 -0
- package/atoms/draftInputText/draftInputText.story.js +251 -0
- package/atoms/draftInputText/index.js +13 -0
- package/atoms/dropdown/dropdown.story.js +146 -18
- package/atoms/dropdownList/dropdownList.story.js +1598 -1091
- package/atoms/graphs/barGraph/barGraph.js +143 -130
- package/atoms/graphs/barGraph/barGraph.story.js +74 -40
- package/atoms/graphs/circleDonut/circleDonut.story.js +374 -220
- package/atoms/graphs/circleGraph/circleGraph.js +84 -80
- package/atoms/graphs/circleGraph/circleGraph.story.js +38 -26
- package/atoms/graphs/circleNested/circleNested.story.js +98 -103
- package/atoms/graphs/pieChart/pieChart.story.js +160 -81
- package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js +30 -28
- package/atoms/icon/icon.story.js +220 -163
- package/atoms/inputText/inputText.js +52 -49
- package/atoms/label/label.js +29 -29
- package/atoms/label/label.story.js +42 -30
- package/atoms/loader/CircleLoader.js +13 -4
- package/atoms/loader/CircleLoader.jsx +10 -4
- package/atoms/loader/ThreeDotLoader.js +8 -4
- package/atoms/loader/ThreeDotLoader.jsx +4 -4
- package/atoms/loader/loader.js +29 -30
- package/atoms/loader/loader.story.js +38 -23
- package/atoms/loader/spinningLoader.js +7 -4
- package/atoms/loader/spinningLoader.jsx +5 -5
- package/atoms/popup/popup.js +11 -11
- package/atoms/popup/popup.story.js +36 -4
- package/atoms/radio/radio.story.js +140 -2
- package/atoms/sideBar/sidebar.js +19 -5
- package/atoms/sideBar/sidebar.jsx +13 -8
- package/atoms/switch/switch.js +72 -66
- package/atoms/switch/switch.story.js +323 -78
- package/atoms/tag/tag.js +39 -39
- package/atoms/tag/tag.story.js +83 -2
- package/atoms/textarea/textarea.js +36 -34
- package/atoms/timeCodeInput/timCodeInput.story.js +10 -9
- package/atoms/timeCodeInput/timeCodeInput.js +107 -100
- package/atoms/timer/timer.js +127 -126
- package/atoms/toast/toast.js +24 -14
- package/atoms/toast/toast.story.js +22 -0
- package/atoms/videoCard/videoCard.js +226 -203
- package/atoms/videoCard/videoCard.story.js +547 -186
- package/components.js +69 -66
- package/index.js +5 -4
- package/molecules/carousel/carousel.js +55 -67
- package/molecules/filter/filter.js +133 -106
- package/molecules/filter/filter.story.js +215 -173
- package/molecules/graphCard/graphCard.js +34 -24
- package/molecules/graphCard/graphCard.story.js +169 -82
- package/molecules/graphDetailCard/graphDetailCard.js +207 -182
- package/molecules/pageHeader/pageHeader.js +3 -2
- package/molecules/pageHeader/pageHeader.story.js +40 -18
- package/molecules/pagination/pagination.js +66 -14
- package/molecules/pagination/pagination.story.js +24 -2
- package/molecules/table/table.js +367 -315
- package/molecules/table/table.story.js +404 -208
- package/molecules/tabs/tabs.js +15 -6
- package/molecules/tabs/tabs.story.js +26 -0
- package/package.json +2 -2
package/molecules/table/table.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
@@ -10,85 +10,85 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|
|
10
10
|
|
|
11
11
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
12
12
|
|
|
13
|
-
var _templateObject = _taggedTemplateLiteral([
|
|
14
|
-
_templateObject2 = _taggedTemplateLiteral([
|
|
15
|
-
_templateObject3 = _taggedTemplateLiteral([
|
|
16
|
-
_templateObject4 = _taggedTemplateLiteral([
|
|
17
|
-
_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: #00cec6;\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed #00cec6;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: #00cec6;\n border-color: #00cec6;\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\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(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: #63d0c7;\n }\n }\n\n &:checked ~ span {\n background: #00cec6;\n &:hover {\n background: #00cec6;\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: #00cec6;\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed #00cec6;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: #00cec6;\n border-color: #00cec6;\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\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(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: #63d0c7;\n }\n }\n\n &:checked ~ span {\n background: #00cec6;\n &:hover {\n background: #00cec6;\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"]),
|
|
18
|
-
_templateObject6 = _taggedTemplateLiteral([
|
|
19
|
-
_templateObject7 = _taggedTemplateLiteral([
|
|
20
|
-
_templateObject8 = _taggedTemplateLiteral([
|
|
21
|
-
_templateObject9 = _taggedTemplateLiteral([
|
|
22
|
-
_templateObject10 = _taggedTemplateLiteral([
|
|
23
|
-
_templateObject11 = _taggedTemplateLiteral([
|
|
24
|
-
_templateObject12 = _taggedTemplateLiteral([
|
|
25
|
-
_templateObject13 = _taggedTemplateLiteral([
|
|
26
|
-
|
|
27
|
-
var _react = require(
|
|
13
|
+
var _templateObject = _taggedTemplateLiteral(['\n border-bottom: 1px solid #303f51;\n display: flex;\n align-items: center;\n input:focus {\n outline: none;\n }\n .search-icon-wrapper {\n padding-right: 10px;\n }\n .input-field {\n border: none;\n color: #999999;\n min-width: 300px;\n margin-top: 0px;\n }\n .close-icon-wrapper {\n cursor: pointer;\n &:hover {\n path {\n fill: white;\n }\n }\n }\n'], ['\n border-bottom: 1px solid #303f51;\n display: flex;\n align-items: center;\n input:focus {\n outline: none;\n }\n .search-icon-wrapper {\n padding-right: 10px;\n }\n .input-field {\n border: none;\n color: #999999;\n min-width: 300px;\n margin-top: 0px;\n }\n .close-icon-wrapper {\n cursor: pointer;\n &:hover {\n path {\n fill: white;\n }\n }\n }\n']),
|
|
14
|
+
_templateObject2 = _taggedTemplateLiteral(['\n & .avatar-details {\n display: none;\n }\n\n .initial-placeholder {\n background: #78909c;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 100%;\n font-size: 12px;\n color: #fff;\n }\n'], ['\n & .avatar-details {\n display: none;\n }\n\n .initial-placeholder {\n background: #78909c;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 100%;\n font-size: 12px;\n color: #fff;\n }\n']),
|
|
15
|
+
_templateObject3 = _taggedTemplateLiteral(['\n\n position: absolute;\n top: 0;\n left: 55px;\n width: 0px;\n overflow: hidden;\n transition: all 0.4s ease;\n height: 38px;\n background: ', ';//#ccc;\n display: flex;\n align-items: center;\n &.show{\n width: 146px;\n overflow: visible;\n }\n\n div.action-icons-common{\n white-space: nowrap;\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .tooltip-container{\n display: inline-block;\n margin: 0px 5px;\n }\n\n .action-button{\n // padding: 0px;\n // border-radius: 50%;\n // -webkit-appearance: none;\n // cursor:pointer;\n // align-items: center;\n // justify-content: center;\n // height: 25px;\n // width: 25px;\n\n &.default{\n //background: #666666;\n //border:1px solid #666666;\n &:hover{\n //background: #8e8e8e;\n //border:1px solid #8e8e8e;\n }\n }\n &.play{\n background: ', ';\n border:1px solid ', ';\n &:hover{\n background: #39cac2;\n border:1px solid #39cac2;\n }\n }\n }\n\n'], ['\n\n position: absolute;\n top: 0;\n left: 55px;\n width: 0px;\n overflow: hidden;\n transition: all 0.4s ease;\n height: 38px;\n background: ', ';//#ccc;\n display: flex;\n align-items: center;\n &.show{\n width: 146px;\n overflow: visible;\n }\n\n div.action-icons-common{\n white-space: nowrap;\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .tooltip-container{\n display: inline-block;\n margin: 0px 5px;\n }\n\n .action-button{\n // padding: 0px;\n // border-radius: 50%;\n // -webkit-appearance: none;\n // cursor:pointer;\n // align-items: center;\n // justify-content: center;\n // height: 25px;\n // width: 25px;\n\n &.default{\n //background: #666666;\n //border:1px solid #666666;\n &:hover{\n //background: #8e8e8e;\n //border:1px solid #8e8e8e;\n }\n }\n &.play{\n background: ', ';\n border:1px solid ', ';\n &:hover{\n background: #39cac2;\n border:1px solid #39cac2;\n }\n }\n }\n\n']),
|
|
16
|
+
_templateObject4 = _taggedTemplateLiteral(['\n width: 100%;\n height: 100%;\n // overflow-x: auto;\n // overflow-y: hidden;\n margin: 10px 0;\n /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n position:relative\n\n ', '\n\ninput[type=\'checkbox\']{ height: 0; width: 0; display:none;}\n\ninput[type=\'checkbox\'] + label{\n position: relative;\n display: flex;\n margin:0;\n align-items: center;\n color: #9e9e9e;\n transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\'] + label > span{\n display: flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9E9E9E;\n border-radius: 50%;\n cursor: pointer; \n transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type=\'checkbox\'] + label:hover > span,\ninput[type=\'checkbox\']:focus + label > span{\n background: rgba(255,255,255,.1);\n}\n\ninput[type=\'checkbox\']:checked + label > span{\n border: 10px solid #49dad0\n animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\']:checked + label > span:before{\n content: "";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n 0%{\n transform: scale(1);\n }\n 33%{ \n transform: scale(.85);\n }\n 100%{\n transform: scale(1); \n }\n}\n@keyframes checkbox-check{\n 0%{\n width: 0;\n height: 0;\n border-color: #FFF;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 33%{\n width: 4px;\n height: 0;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 100%{ \n width: 4px;\n height: 9px; \n border-color: #FFF;\n transform: translate3d(0,-.5em,0) rotate(45deg);\n }\n}\n \n'], ['\n width: 100%;\n height: 100%;\n // overflow-x: auto;\n // overflow-y: hidden;\n margin: 10px 0;\n /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n position:relative\n\n ', '\n\ninput[type=\'checkbox\']{ height: 0; width: 0; display:none;}\n\ninput[type=\'checkbox\'] + label{\n position: relative;\n display: flex;\n margin:0;\n align-items: center;\n color: #9e9e9e;\n transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\'] + label > span{\n display: flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9E9E9E;\n border-radius: 50%;\n cursor: pointer; \n transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type=\'checkbox\'] + label:hover > span,\ninput[type=\'checkbox\']:focus + label > span{\n background: rgba(255,255,255,.1);\n}\n\ninput[type=\'checkbox\']:checked + label > span{\n border: 10px solid #49dad0\n animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\']:checked + label > span:before{\n content: "";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n 0%{\n transform: scale(1);\n }\n 33%{ \n transform: scale(.85);\n }\n 100%{\n transform: scale(1); \n }\n}\n@keyframes checkbox-check{\n 0%{\n width: 0;\n height: 0;\n border-color: #FFF;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 33%{\n width: 4px;\n height: 0;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 100%{ \n width: 4px;\n height: 9px; \n border-color: #FFF;\n transform: translate3d(0,-.5em,0) rotate(45deg);\n }\n}\n \n']),
|
|
17
|
+
_templateObject5 = _taggedTemplateLiteral(['\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: \'SFUIText-Medium\';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ', ';\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: \'\';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: \'SFUIText-Regular\';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: ', ';\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: \'\';\n border-top: 6px dashed ', ';\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: ', ';\n border-color: ', ';\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\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 ', ';\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: \'SFUIText-Regular\';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: ', ';\n }\n }\n\n &:checked ~ span {\n background: ', ';\n &:hover {\n background: ', ';\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n'], ['\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: \'SFUIText-Medium\';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ', ';\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: \'\';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: \'SFUIText-Regular\';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: ', ';\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: \'\';\n border-top: 6px dashed ', ';\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: ', ';\n border-color: ', ';\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\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 ', ';\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: \'SFUIText-Regular\';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: ', ';\n }\n }\n\n &:checked ~ span {\n background: ', ';\n &:hover {\n background: ', ';\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n']),
|
|
18
|
+
_templateObject6 = _taggedTemplateLiteral(['\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n'], ['\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n']),
|
|
19
|
+
_templateObject7 = _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: auto;\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: auto;\n']),
|
|
20
|
+
_templateObject8 = _taggedTemplateLiteral([''], ['']),
|
|
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: ', ';\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: ', ';\n }\n }\n\n ', ' {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ', ';\n }\n']),
|
|
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: ', ';\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: ', ';\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: ', ';\n path{\n fill: ', ';\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: ', ';\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 ', ';\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid ', ';\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: ', ';\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: ', ';\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: ', ';\n path{\n fill: ', ';\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: ', ';\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 ', ';\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid ', ';\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: -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: ', ';\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: ', ';\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']);
|
|
26
|
+
|
|
27
|
+
var _react = require('react');
|
|
28
28
|
|
|
29
29
|
var _react2 = _interopRequireDefault(_react);
|
|
30
30
|
|
|
31
|
-
var _propTypes = require(
|
|
31
|
+
var _propTypes = require('prop-types');
|
|
32
32
|
|
|
33
33
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
34
34
|
|
|
35
|
-
var _styledComponents = require(
|
|
35
|
+
var _styledComponents = require('styled-components');
|
|
36
36
|
|
|
37
37
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
38
38
|
|
|
39
|
-
var _lodash = require(
|
|
39
|
+
var _lodash = require('lodash');
|
|
40
40
|
|
|
41
|
-
var _button = require(
|
|
41
|
+
var _button = require('../../atoms/button');
|
|
42
42
|
|
|
43
43
|
var _button2 = _interopRequireDefault(_button);
|
|
44
44
|
|
|
45
|
-
var _label = require(
|
|
45
|
+
var _label = require('../../atoms/label');
|
|
46
46
|
|
|
47
47
|
var _label2 = _interopRequireDefault(_label);
|
|
48
48
|
|
|
49
|
-
var _card = require(
|
|
49
|
+
var _card = require('../../atoms/card');
|
|
50
50
|
|
|
51
51
|
var _card2 = _interopRequireDefault(_card);
|
|
52
52
|
|
|
53
|
-
var _icon = require(
|
|
53
|
+
var _icon = require('../../atoms/icon');
|
|
54
54
|
|
|
55
55
|
var _icon2 = _interopRequireDefault(_icon);
|
|
56
56
|
|
|
57
|
-
var _checkbox = require(
|
|
57
|
+
var _checkbox = require('../../atoms/checkbox');
|
|
58
58
|
|
|
59
59
|
var _checkbox2 = _interopRequireDefault(_checkbox);
|
|
60
60
|
|
|
61
|
-
var _tokens = require(
|
|
61
|
+
var _tokens = require('@desynova-digital/tokens');
|
|
62
62
|
|
|
63
|
-
var _tableColumn = require(
|
|
63
|
+
var _tableColumn = require('./table-column');
|
|
64
64
|
|
|
65
65
|
var _tableColumn2 = _interopRequireDefault(_tableColumn);
|
|
66
66
|
|
|
67
|
-
var _tableHeader = require(
|
|
67
|
+
var _tableHeader = require('./table-header');
|
|
68
68
|
|
|
69
69
|
var _tableHeader2 = _interopRequireDefault(_tableHeader);
|
|
70
70
|
|
|
71
|
-
var _dateTime = require(
|
|
71
|
+
var _dateTime = require('../../atoms/dateTime/dateTime');
|
|
72
72
|
|
|
73
73
|
var _dateTime2 = _interopRequireDefault(_dateTime);
|
|
74
74
|
|
|
75
|
-
var _filter = require(
|
|
75
|
+
var _filter = require('../../molecules/filter/filter');
|
|
76
76
|
|
|
77
77
|
var _filter2 = _interopRequireDefault(_filter);
|
|
78
78
|
|
|
79
|
-
var _permissionIconMap = require(
|
|
79
|
+
var _permissionIconMap = require('../../../tokens/permissionIconMap');
|
|
80
80
|
|
|
81
81
|
var _permissionIconMap2 = _interopRequireDefault(_permissionIconMap);
|
|
82
82
|
|
|
83
|
-
var _TableErrorScreen = require(
|
|
83
|
+
var _TableErrorScreen = require('../../molecules/errorScreen/TableErrorScreen');
|
|
84
84
|
|
|
85
85
|
var _TableErrorScreen2 = _interopRequireDefault(_TableErrorScreen);
|
|
86
86
|
|
|
87
|
-
var _inputText = require(
|
|
87
|
+
var _inputText = require('../../atoms/inputText');
|
|
88
88
|
|
|
89
89
|
var _inputText2 = _interopRequireDefault(_inputText);
|
|
90
90
|
|
|
91
|
-
var _Shimmer = require(
|
|
91
|
+
var _Shimmer = require('../../atoms/loader/ShimmerComponent/Shimmer');
|
|
92
92
|
|
|
93
93
|
var _Shimmer2 = _interopRequireDefault(_Shimmer);
|
|
94
94
|
|
|
@@ -120,15 +120,15 @@ var Table = function (_Component) {
|
|
|
120
120
|
_this.actionIconCol = [];
|
|
121
121
|
|
|
122
122
|
var extraColumnsSchema = {
|
|
123
|
-
title:
|
|
124
|
-
field:
|
|
125
|
-
type:
|
|
123
|
+
title: '',
|
|
124
|
+
field: 'extra_columns',
|
|
125
|
+
type: 'extra_columns'
|
|
126
126
|
};
|
|
127
127
|
|
|
128
128
|
_this.columns = _this.columns.filter(function (item, idx) {
|
|
129
|
-
if (item.type ===
|
|
129
|
+
if (item.type === 'action_icon') {
|
|
130
130
|
_this.actionIconCol.push(item);
|
|
131
|
-
} else if (item.type ===
|
|
131
|
+
} else if (item.type === 'table') {
|
|
132
132
|
_this.nestedTable.push(item); // will maitain seperate table for nested
|
|
133
133
|
} else {
|
|
134
134
|
return item;
|
|
@@ -213,11 +213,11 @@ var Table = function (_Component) {
|
|
|
213
213
|
|
|
214
214
|
_this.actionElements = function (item, column, idx) {
|
|
215
215
|
if (item[column.field] === undefined) {
|
|
216
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
216
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
217
217
|
}
|
|
218
218
|
var arrLength = item[column.field].length;
|
|
219
219
|
var elements = item[column.field].reduce(function (acc, curr) {
|
|
220
|
-
if (curr ===
|
|
220
|
+
if (curr === 'play') {
|
|
221
221
|
arrLength -= 1;
|
|
222
222
|
return acc;
|
|
223
223
|
}
|
|
@@ -230,17 +230,18 @@ var Table = function (_Component) {
|
|
|
230
230
|
}, { first: [], remaining: [] });
|
|
231
231
|
|
|
232
232
|
return _react2.default.createElement(
|
|
233
|
-
|
|
234
|
-
{ className:
|
|
235
|
-
item[column.field] && _typeof(item[column.field]) ===
|
|
236
|
-
|
|
237
|
-
{ style: { display:
|
|
233
|
+
'div',
|
|
234
|
+
{ className: 'action-icons-cell' },
|
|
235
|
+
item[column.field] && _typeof(item[column.field]) === 'object' ? _react2.default.createElement(
|
|
236
|
+
'div',
|
|
237
|
+
{ style: { display: 'flex', alignItems: 'center' } },
|
|
238
238
|
elements.first.map(function (action, i) {
|
|
239
239
|
return _react2.default.createElement(_button2.default, {
|
|
240
|
+
theme: _this.props.theme,
|
|
240
241
|
key: action,
|
|
241
|
-
className:
|
|
242
|
-
style: { border:
|
|
243
|
-
appearance:
|
|
242
|
+
className: 'action-item-btn',
|
|
243
|
+
style: { border: 'none' },
|
|
244
|
+
appearance: 'cta',
|
|
244
245
|
width: 20,
|
|
245
246
|
height: 20,
|
|
246
247
|
iconWidth: 13,
|
|
@@ -253,40 +254,41 @@ var Table = function (_Component) {
|
|
|
253
254
|
});
|
|
254
255
|
}),
|
|
255
256
|
elements.remaining.length > 0 && _react2.default.createElement(
|
|
256
|
-
|
|
257
|
-
{ className:
|
|
257
|
+
'div',
|
|
258
|
+
{ className: 'more-action-holder' },
|
|
258
259
|
_react2.default.createElement(
|
|
259
|
-
|
|
260
|
-
{ className:
|
|
261
|
-
_react2.default.createElement(_icon2.default, { name:
|
|
260
|
+
'div',
|
|
261
|
+
{ className: 'more-action-icon' },
|
|
262
|
+
_react2.default.createElement(_icon2.default, { name: 'more-ver', width: 3, height: 13, theme: _this.props.theme })
|
|
262
263
|
),
|
|
263
264
|
_react2.default.createElement(
|
|
264
|
-
|
|
265
|
-
{ className:
|
|
265
|
+
'div',
|
|
266
|
+
{ className: 'more-action-list-box' },
|
|
266
267
|
_react2.default.createElement(
|
|
267
|
-
|
|
268
|
-
{ className:
|
|
268
|
+
'div',
|
|
269
|
+
{ className: 'more-action-list' },
|
|
269
270
|
elements.remaining.map(function (action, i) {
|
|
270
271
|
return _react2.default.createElement(
|
|
271
|
-
|
|
272
|
+
'div',
|
|
272
273
|
{
|
|
273
|
-
className:
|
|
274
|
+
className: 'action-item-btn nested',
|
|
274
275
|
key: i,
|
|
275
276
|
onClick: function onClick(e) {
|
|
276
277
|
return _this.actionClickEvents(e, action, idx);
|
|
277
278
|
}
|
|
278
279
|
},
|
|
279
280
|
_react2.default.createElement(
|
|
280
|
-
|
|
281
|
+
'div',
|
|
281
282
|
null,
|
|
282
283
|
_react2.default.createElement(_icon2.default, {
|
|
284
|
+
theme: _this.props.theme,
|
|
283
285
|
name: column.valueIconMap && column.valueIconMap[action] ? column.valueIconMap[action] : _permissionIconMap2.default[action],
|
|
284
286
|
width: 14,
|
|
285
287
|
height: 14
|
|
286
288
|
})
|
|
287
289
|
),
|
|
288
290
|
_react2.default.createElement(
|
|
289
|
-
|
|
291
|
+
'div',
|
|
290
292
|
null,
|
|
291
293
|
_this.props.actionLable && _this.props.actionLable[action]
|
|
292
294
|
)
|
|
@@ -303,21 +305,22 @@ var Table = function (_Component) {
|
|
|
303
305
|
var tableLoading = _this.props.tableLoading;
|
|
304
306
|
|
|
305
307
|
switch (column.type) {
|
|
306
|
-
case
|
|
308
|
+
case 'video_src':
|
|
307
309
|
{
|
|
308
|
-
return _react2.default.createElement(
|
|
309
|
-
|
|
310
|
+
return _react2.default.createElement('div', {}, _react2.default.createElement(
|
|
311
|
+
'div',
|
|
310
312
|
null,
|
|
311
313
|
_react2.default.createElement(
|
|
312
|
-
|
|
313
|
-
{ className:
|
|
314
|
+
'span',
|
|
315
|
+
{ className: 'video-button-box' },
|
|
314
316
|
_react2.default.createElement(_button2.default, {
|
|
317
|
+
theme: _this.props.theme,
|
|
315
318
|
onClick: function onClick(e) {
|
|
316
319
|
_this.videoPlayBtnClickHandler(e, idx, item[column.field]);
|
|
317
320
|
},
|
|
318
|
-
appearance:
|
|
319
|
-
icon:
|
|
320
|
-
display:
|
|
321
|
+
appearance: 'cta',
|
|
322
|
+
icon: 'play',
|
|
323
|
+
display: 'rounded',
|
|
321
324
|
width: 25,
|
|
322
325
|
height: 25,
|
|
323
326
|
iconWidth: 8,
|
|
@@ -327,25 +330,24 @@ var Table = function (_Component) {
|
|
|
327
330
|
));
|
|
328
331
|
}
|
|
329
332
|
|
|
330
|
-
case
|
|
333
|
+
case 'extra_columns':
|
|
331
334
|
{
|
|
332
335
|
if (tableLoading) {
|
|
333
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
336
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
334
337
|
} else {
|
|
335
|
-
return _react2.default.createElement(
|
|
338
|
+
return _react2.default.createElement('div', {
|
|
336
339
|
onClick: function onClick(e) {
|
|
337
340
|
_this.toggleExtraDetails(e, idx);
|
|
338
341
|
}
|
|
339
342
|
}, _react2.default.createElement(
|
|
340
|
-
|
|
341
|
-
{
|
|
342
|
-
className: _this.state.showExtraRow === idx ? "show-row" : "hide-row"
|
|
343
|
-
},
|
|
343
|
+
'div',
|
|
344
|
+
{ className: _this.state.showExtraRow === idx ? 'show-row' : 'hide-row' },
|
|
344
345
|
_react2.default.createElement(
|
|
345
|
-
|
|
346
|
-
{ className:
|
|
346
|
+
'span',
|
|
347
|
+
{ className: 'open-close-extra' },
|
|
347
348
|
_react2.default.createElement(_icon2.default, {
|
|
348
|
-
|
|
349
|
+
theme: _this.props.theme,
|
|
350
|
+
name: 'chevron-down',
|
|
349
351
|
width: 12,
|
|
350
352
|
height: 10,
|
|
351
353
|
color: _tokens.colors[_this.props.theme].table.tdColor
|
|
@@ -355,22 +357,22 @@ var Table = function (_Component) {
|
|
|
355
357
|
}
|
|
356
358
|
}
|
|
357
359
|
|
|
358
|
-
case
|
|
360
|
+
case 'link_text':
|
|
359
361
|
{
|
|
360
362
|
if (tableLoading) {
|
|
361
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
363
|
+
return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
|
|
362
364
|
} else {
|
|
363
365
|
if (item.actions === undefined) {
|
|
364
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
366
|
+
return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
|
|
365
367
|
} else {
|
|
366
368
|
var isPlayable = Array.isArray(item) ? item.actions.includes("play") : false;
|
|
367
369
|
return _react2.default.createElement(
|
|
368
|
-
|
|
370
|
+
'div',
|
|
369
371
|
{
|
|
370
|
-
className:
|
|
372
|
+
className: 'text-box ' + (isPlayable ? 'asset-play' : ''),
|
|
371
373
|
title: item[column.field],
|
|
372
374
|
onClick: function onClick(e) {
|
|
373
|
-
return isPlayable ? _this.actionClickEvents(e,
|
|
375
|
+
return isPlayable ? _this.actionClickEvents(e, 'play', idx) : e.preventDefault();
|
|
374
376
|
}
|
|
375
377
|
},
|
|
376
378
|
item[column.field].toString()
|
|
@@ -379,93 +381,106 @@ var Table = function (_Component) {
|
|
|
379
381
|
}
|
|
380
382
|
}
|
|
381
383
|
|
|
382
|
-
case
|
|
384
|
+
case 'action_icon':
|
|
383
385
|
if (tableLoading) {
|
|
384
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
386
|
+
return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
|
|
385
387
|
} else {
|
|
386
388
|
return _this.actionElements(item, column, idx);
|
|
387
389
|
}
|
|
388
390
|
|
|
389
|
-
case
|
|
391
|
+
case 'avatar':
|
|
390
392
|
return _this.getAvatar(item[column.field]);
|
|
391
393
|
|
|
392
|
-
case
|
|
394
|
+
case 'date':
|
|
393
395
|
if (tableLoading) {
|
|
394
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
396
|
+
return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
|
|
395
397
|
} else {
|
|
396
398
|
return _react2.default.createElement(
|
|
397
|
-
|
|
398
|
-
{ className:
|
|
399
|
-
item[column.field] ? _dateTime2.default.toDateString(new Date(item[column.field]),
|
|
399
|
+
'div',
|
|
400
|
+
{ className: 'text-box', style: { whiteSpace: 'nowrap' } },
|
|
401
|
+
item[column.field] ? _dateTime2.default.toDateString(new Date(item[column.field]), 'DD/MM/YYYY') : null
|
|
400
402
|
);
|
|
401
403
|
}
|
|
402
404
|
|
|
403
|
-
case
|
|
405
|
+
case 'time':
|
|
404
406
|
if (tableLoading) {
|
|
405
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
407
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
406
408
|
} else {
|
|
407
409
|
return _react2.default.createElement(
|
|
408
|
-
|
|
409
|
-
{ className:
|
|
410
|
-
item[column.field] ? _dateTime2.default.toTimeString(new Date(item[column.field]),
|
|
410
|
+
'div',
|
|
411
|
+
{ className: 'text-box', style: { whiteSpace: 'nowrap' } },
|
|
412
|
+
item[column.field] ? _dateTime2.default.toTimeString(new Date(item[column.field]), 'HH:MM AP') : null
|
|
411
413
|
);
|
|
412
414
|
}
|
|
413
415
|
|
|
414
|
-
case
|
|
416
|
+
case 'datetime':
|
|
415
417
|
if (tableLoading) {
|
|
416
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
418
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
417
419
|
} else {
|
|
418
420
|
return _react2.default.createElement(
|
|
419
|
-
|
|
420
|
-
{ className:
|
|
421
|
+
'div',
|
|
422
|
+
{ className: 'text-box', style: { whiteSpace: 'nowrap' } },
|
|
421
423
|
item[column.field] ? _dateTime2.default.toDateTimeString(new Date(item[column.field])) : null
|
|
422
424
|
);
|
|
423
425
|
}
|
|
424
426
|
|
|
425
|
-
case
|
|
427
|
+
case 'icon':
|
|
426
428
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
427
429
|
return item[column.field].map(function (iconItem) {
|
|
428
430
|
return _react2.default.createElement(_icon2.default, {
|
|
431
|
+
theme: _this.props.theme,
|
|
429
432
|
name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
|
|
430
433
|
width: 18,
|
|
431
434
|
height: 18,
|
|
432
|
-
color: column.iconColorMap && column.iconColorMap[iconItem] ? column.iconColorMap[iconItem] :
|
|
435
|
+
color: column.iconColorMap && column.iconColorMap[iconItem] ? column.iconColorMap[iconItem] : '#FFF'
|
|
433
436
|
});
|
|
434
437
|
});
|
|
435
438
|
}
|
|
436
439
|
return null;
|
|
437
440
|
|
|
438
|
-
case
|
|
441
|
+
case 'icon_circle':
|
|
439
442
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
440
443
|
return item[column.field].map(function (iconItem) {
|
|
441
444
|
return _react2.default.createElement(
|
|
442
|
-
|
|
445
|
+
'div',
|
|
443
446
|
{
|
|
444
|
-
className:
|
|
447
|
+
className: 'icon-circle',
|
|
445
448
|
style: {
|
|
446
|
-
background: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].background ? column.iconColorMap[iconItem].background :
|
|
449
|
+
background: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].background ? column.iconColorMap[iconItem].background : _tokens.colors[_this.props.theme].table.titleBackgroundColor
|
|
447
450
|
}
|
|
451
|
+
// style={{
|
|
452
|
+
// background:
|
|
453
|
+
// column.iconColorMap &&
|
|
454
|
+
// column.iconColorMap[iconItem] &&
|
|
455
|
+
// column.iconColorMap[iconItem].background
|
|
456
|
+
// ? column.iconColorMap[iconItem].background
|
|
457
|
+
// : this.props.theme == 'nexc'
|
|
458
|
+
// ? '#60BEF8'
|
|
459
|
+
// : '#00cec6'
|
|
460
|
+
// }}
|
|
448
461
|
},
|
|
449
462
|
_react2.default.createElement(_icon2.default, {
|
|
463
|
+
theme: _this.props.theme,
|
|
450
464
|
name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
|
|
451
465
|
width: 14,
|
|
452
466
|
height: 14,
|
|
453
|
-
color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color :
|
|
467
|
+
color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color : '#FFF'
|
|
454
468
|
})
|
|
455
469
|
);
|
|
456
470
|
});
|
|
457
471
|
}
|
|
458
472
|
return null;
|
|
459
473
|
|
|
460
|
-
case
|
|
474
|
+
case 'label':
|
|
461
475
|
{
|
|
462
476
|
if (tableLoading) {
|
|
463
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
477
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
464
478
|
} else {
|
|
465
479
|
if (item[column.field] || column.percentageField && column.percentageField.field && item[column.percentageField.field]) {
|
|
466
480
|
return _react2.default.createElement(
|
|
467
481
|
_label2.default,
|
|
468
482
|
{
|
|
483
|
+
theme: _this.props.theme,
|
|
469
484
|
percentageStatus: column.percentageField && column.percentageField.field && item[column.percentageField.field],
|
|
470
485
|
percentageField: column.percentageField,
|
|
471
486
|
status: item[column.field]
|
|
@@ -478,25 +493,23 @@ var Table = function (_Component) {
|
|
|
478
493
|
return null;
|
|
479
494
|
}
|
|
480
495
|
|
|
481
|
-
case
|
|
496
|
+
case 'dubbing_status':
|
|
482
497
|
{
|
|
483
498
|
if (tableLoading) {
|
|
484
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
499
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
485
500
|
} else {
|
|
486
501
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
487
502
|
return _react2.default.createElement(
|
|
488
503
|
DubbingStatusStyles,
|
|
489
|
-
|
|
504
|
+
{ theme: _this.props.theme },
|
|
490
505
|
item[column.field].map(function (el) {
|
|
491
506
|
return _react2.default.createElement(
|
|
492
|
-
|
|
493
|
-
{ className:
|
|
494
|
-
_react2.default.createElement(
|
|
495
|
-
className: "status-color " + el.review_status.toLowerCase()
|
|
496
|
-
}),
|
|
507
|
+
'div',
|
|
508
|
+
{ className: 'detail-block', key: el.language },
|
|
509
|
+
_react2.default.createElement('div', { className: 'status-color ' + el.review_status.toLowerCase() }),
|
|
497
510
|
_react2.default.createElement(
|
|
498
|
-
|
|
499
|
-
{ className:
|
|
511
|
+
'p',
|
|
512
|
+
{ className: 'language-name' },
|
|
500
513
|
el.language
|
|
501
514
|
)
|
|
502
515
|
);
|
|
@@ -507,23 +520,23 @@ var Table = function (_Component) {
|
|
|
507
520
|
break;
|
|
508
521
|
}
|
|
509
522
|
|
|
510
|
-
case
|
|
523
|
+
case 'rowChecked':
|
|
511
524
|
{
|
|
512
525
|
if (tableLoading) {
|
|
513
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
526
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
514
527
|
} else {
|
|
515
528
|
return _react2.default.createElement(
|
|
516
|
-
|
|
529
|
+
'div',
|
|
517
530
|
{
|
|
518
531
|
onClick: function onClick(e) {
|
|
519
532
|
_this.rowCheckChange(e, !item.rowChecked, item, idx);
|
|
520
533
|
}
|
|
521
534
|
},
|
|
522
|
-
_react2.default.createElement(
|
|
535
|
+
_react2.default.createElement('input', { checked: item.rowChecked ? true : false, type: 'checkbox' }),
|
|
523
536
|
_react2.default.createElement(
|
|
524
|
-
|
|
537
|
+
'label',
|
|
525
538
|
null,
|
|
526
|
-
_react2.default.createElement(
|
|
539
|
+
_react2.default.createElement('span', null)
|
|
527
540
|
)
|
|
528
541
|
);
|
|
529
542
|
}
|
|
@@ -531,15 +544,15 @@ var Table = function (_Component) {
|
|
|
531
544
|
|
|
532
545
|
default:
|
|
533
546
|
if (tableLoading) {
|
|
534
|
-
return _react2.default.createElement(_Shimmer2.default, { height:
|
|
547
|
+
return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
|
|
535
548
|
} else {
|
|
536
|
-
if (typeof item[column.field] ===
|
|
537
|
-
var className =
|
|
549
|
+
if (typeof item[column.field] === 'string' || typeof item[column.field] === 'number' || Array.isArray(item[column.field])) {
|
|
550
|
+
var className = 'text-box';
|
|
538
551
|
if (item[column.field]) {
|
|
539
|
-
className = className +
|
|
552
|
+
className = className + ' text-' + item[column.field].toString().toLowerCase().split(' ').join('');
|
|
540
553
|
}
|
|
541
554
|
return _react2.default.createElement(
|
|
542
|
-
|
|
555
|
+
'div',
|
|
543
556
|
{ className: className, title: item[column.field] },
|
|
544
557
|
item[column.field].toString()
|
|
545
558
|
);
|
|
@@ -582,34 +595,34 @@ var Table = function (_Component) {
|
|
|
582
595
|
|
|
583
596
|
_this.getAvatar = function (data) {
|
|
584
597
|
var returnDom = null;
|
|
585
|
-
if (data && data.user_image && data.user_image !==
|
|
598
|
+
if (data && data.user_image && data.user_image !== '') {
|
|
586
599
|
returnDom = _react2.default.createElement(
|
|
587
|
-
|
|
600
|
+
'div',
|
|
588
601
|
null,
|
|
589
|
-
|
|
602
|
+
'image'
|
|
590
603
|
);
|
|
591
604
|
} else {
|
|
592
605
|
returnDom = data && data.name ? _react2.default.createElement(
|
|
593
|
-
|
|
606
|
+
'div',
|
|
594
607
|
null,
|
|
595
608
|
_react2.default.createElement(
|
|
596
|
-
|
|
597
|
-
{ className:
|
|
598
|
-
data.name ? data.name.split(
|
|
609
|
+
'div',
|
|
610
|
+
{ className: 'initial-placeholder', title: data.name },
|
|
611
|
+
data.name ? data.name.split(' ')[0] ? data.name.split(' ')[1] ? data.name.split(' ')[0][0] + '' + data.name.split(' ')[1][0] : data.name.split(' ')[0][0] : null : null
|
|
599
612
|
),
|
|
600
613
|
_react2.default.createElement(
|
|
601
|
-
|
|
602
|
-
{ className:
|
|
603
|
-
|
|
604
|
-
_react2.default.createElement(
|
|
605
|
-
|
|
614
|
+
'div',
|
|
615
|
+
{ className: 'avatar-details' },
|
|
616
|
+
'FUll NAme ',
|
|
617
|
+
_react2.default.createElement('br', null),
|
|
618
|
+
'email@address.com'
|
|
606
619
|
)
|
|
607
620
|
) : null;
|
|
608
621
|
}
|
|
609
622
|
|
|
610
623
|
return _react2.default.createElement(
|
|
611
624
|
AvatarBox,
|
|
612
|
-
{ className:
|
|
625
|
+
{ className: 'avatar-box' },
|
|
613
626
|
returnDom
|
|
614
627
|
);
|
|
615
628
|
};
|
|
@@ -638,7 +651,7 @@ var Table = function (_Component) {
|
|
|
638
651
|
};
|
|
639
652
|
|
|
640
653
|
_this.resetSearchTextAndFilters = function () {
|
|
641
|
-
_this.handleInputChange(
|
|
654
|
+
_this.handleInputChange('');
|
|
642
655
|
_this._filterRef && _this._filterRef.current && this_filterRef.current.resetSelectedUserFilter();
|
|
643
656
|
};
|
|
644
657
|
|
|
@@ -654,15 +667,15 @@ var Table = function (_Component) {
|
|
|
654
667
|
getSearchedRows = _this$props.getSearchedRows;
|
|
655
668
|
|
|
656
669
|
_this.setState({
|
|
657
|
-
searchedText:
|
|
670
|
+
searchedText: ''
|
|
658
671
|
});
|
|
659
672
|
switch (operation) {
|
|
660
|
-
case
|
|
673
|
+
case 'refresh':
|
|
661
674
|
_this.props.tableLoadingActionFunc(true);
|
|
662
675
|
refreshDashboard();
|
|
663
676
|
break;
|
|
664
|
-
case
|
|
665
|
-
getSearchedRows(
|
|
677
|
+
case 'clearInput':
|
|
678
|
+
getSearchedRows('');
|
|
666
679
|
break;
|
|
667
680
|
}
|
|
668
681
|
};
|
|
@@ -679,7 +692,7 @@ var Table = function (_Component) {
|
|
|
679
692
|
selectedRows: [],
|
|
680
693
|
showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : [],
|
|
681
694
|
isAllRowsSelected: false,
|
|
682
|
-
searchedText: props.searchValue ||
|
|
695
|
+
searchedText: props.searchValue || '',
|
|
683
696
|
commonActionsSelected: [],
|
|
684
697
|
ingestedDbIdArray: []
|
|
685
698
|
};
|
|
@@ -687,7 +700,7 @@ var Table = function (_Component) {
|
|
|
687
700
|
}
|
|
688
701
|
|
|
689
702
|
_createClass(Table, [{
|
|
690
|
-
key:
|
|
703
|
+
key: 'componentDidUpdate',
|
|
691
704
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
692
705
|
if (prevState.items !== this.state.items) {
|
|
693
706
|
this.setState({
|
|
@@ -702,7 +715,7 @@ var Table = function (_Component) {
|
|
|
702
715
|
}
|
|
703
716
|
}
|
|
704
717
|
}, {
|
|
705
|
-
key:
|
|
718
|
+
key: 'toggleExtraDetails',
|
|
706
719
|
value: function toggleExtraDetails(e, idx) {
|
|
707
720
|
if (this.state.showExtraRow !== idx) {
|
|
708
721
|
this.setState({
|
|
@@ -717,7 +730,7 @@ var Table = function (_Component) {
|
|
|
717
730
|
this.props.onToggleExtraDetails(e, idx);
|
|
718
731
|
}
|
|
719
732
|
}, {
|
|
720
|
-
key:
|
|
733
|
+
key: 'videoPlayBtnClickHandler',
|
|
721
734
|
value: function videoPlayBtnClickHandler(e, idx, videoObj) {
|
|
722
735
|
this.props.onVideoPlayClick(e, idx, videoObj);
|
|
723
736
|
}
|
|
@@ -728,7 +741,7 @@ var Table = function (_Component) {
|
|
|
728
741
|
// actions elements
|
|
729
742
|
|
|
730
743
|
}, {
|
|
731
|
-
key:
|
|
744
|
+
key: 'componentWillReceiveProps',
|
|
732
745
|
value: function componentWillReceiveProps(newProps) {
|
|
733
746
|
this.setState({
|
|
734
747
|
showExtraRow: null
|
|
@@ -754,14 +767,14 @@ var Table = function (_Component) {
|
|
|
754
767
|
this.forceUpdate();
|
|
755
768
|
}
|
|
756
769
|
}, {
|
|
757
|
-
key:
|
|
770
|
+
key: 'getColumns',
|
|
758
771
|
value: function getColumns(props) {
|
|
759
772
|
return _react2.default.Children.toArray(props.children).map(function (element) {
|
|
760
773
|
return element.props;
|
|
761
774
|
});
|
|
762
775
|
}
|
|
763
776
|
}, {
|
|
764
|
-
key:
|
|
777
|
+
key: 'getDisplayedItems',
|
|
765
778
|
value: function getDisplayedItems(columns, allItems) {
|
|
766
779
|
var items = [].concat(_toConsumableArray(allItems));
|
|
767
780
|
var sortColumn = columns.find(function (column) {
|
|
@@ -775,16 +788,16 @@ var Table = function (_Component) {
|
|
|
775
788
|
return comparator(sortColumn, row1, row2);
|
|
776
789
|
});
|
|
777
790
|
|
|
778
|
-
if (sortColumn.sort ===
|
|
791
|
+
if (sortColumn.sort === 'desc') items.reverse();
|
|
779
792
|
|
|
780
793
|
return items;
|
|
781
794
|
}
|
|
782
795
|
}, {
|
|
783
|
-
key:
|
|
796
|
+
key: 'guessComparator',
|
|
784
797
|
value: function guessComparator(firstItem, sortColumn) {
|
|
785
798
|
// If a comparator isn't specified, try to guess based on the type of the data.
|
|
786
799
|
var sampleValue = firstItem[sortColumn.field];
|
|
787
|
-
if (typeof sampleValue ===
|
|
800
|
+
if (typeof sampleValue === 'number') return Table.compare.numbers;
|
|
788
801
|
return Table.compare.strings;
|
|
789
802
|
}
|
|
790
803
|
/**
|
|
@@ -794,7 +807,7 @@ var Table = function (_Component) {
|
|
|
794
807
|
*/
|
|
795
808
|
|
|
796
809
|
}, {
|
|
797
|
-
key:
|
|
810
|
+
key: 'findCommon',
|
|
798
811
|
value: function findCommon(array) {
|
|
799
812
|
if (array.length === 0) {
|
|
800
813
|
return [];
|
|
@@ -815,14 +828,14 @@ var Table = function (_Component) {
|
|
|
815
828
|
*/
|
|
816
829
|
|
|
817
830
|
}, {
|
|
818
|
-
key:
|
|
831
|
+
key: 'removeObjects',
|
|
819
832
|
value: function removeObjects(arr, indexesToRemove) {
|
|
820
833
|
return arr.filter(function (obj, index) {
|
|
821
834
|
return indexesToRemove.includes(index);
|
|
822
835
|
});
|
|
823
836
|
}
|
|
824
837
|
}, {
|
|
825
|
-
key:
|
|
838
|
+
key: 'execute',
|
|
826
839
|
value: function execute(allChecked) {
|
|
827
840
|
var _this2 = this;
|
|
828
841
|
|
|
@@ -863,7 +876,7 @@ var Table = function (_Component) {
|
|
|
863
876
|
}
|
|
864
877
|
}
|
|
865
878
|
}, {
|
|
866
|
-
key:
|
|
879
|
+
key: 'rowCheckChange',
|
|
867
880
|
value: function rowCheckChange(e, value, item, idx) {
|
|
868
881
|
var _state = this.state,
|
|
869
882
|
items = _state.items,
|
|
@@ -876,7 +889,7 @@ var Table = function (_Component) {
|
|
|
876
889
|
dashboard_common_actions = _props.dashboard_common_actions,
|
|
877
890
|
common_actions = _props.common_actions;
|
|
878
891
|
|
|
879
|
-
var table = e.target.closest(
|
|
892
|
+
var table = e.target.closest('table');
|
|
880
893
|
var checkboxNodes = table.querySelectorAll('thead tr th input[type="checkbox"]');
|
|
881
894
|
|
|
882
895
|
if (value) {
|
|
@@ -975,7 +988,7 @@ var Table = function (_Component) {
|
|
|
975
988
|
}
|
|
976
989
|
}
|
|
977
990
|
}, {
|
|
978
|
-
key:
|
|
991
|
+
key: 'allRowCheckChange',
|
|
979
992
|
value: function allRowCheckChange(e, value) {
|
|
980
993
|
var _this3 = this;
|
|
981
994
|
|
|
@@ -1060,56 +1073,56 @@ var Table = function (_Component) {
|
|
|
1060
1073
|
*/
|
|
1061
1074
|
|
|
1062
1075
|
}, {
|
|
1063
|
-
key:
|
|
1076
|
+
key: 'refreshClicked',
|
|
1064
1077
|
value: function refreshClicked() {
|
|
1065
1078
|
this.props.tableLoadingActionFunc(true);
|
|
1066
1079
|
return getTableData({ page: 1 }, false, true);
|
|
1067
1080
|
}
|
|
1068
1081
|
}, {
|
|
1069
|
-
key:
|
|
1082
|
+
key: 'tableLoadingFirst',
|
|
1070
1083
|
value: function tableLoadingFirst() {
|
|
1071
1084
|
var divArray = new Array(15).fill(null);
|
|
1072
1085
|
return _react2.default.createElement(
|
|
1073
|
-
|
|
1086
|
+
'div',
|
|
1074
1087
|
null,
|
|
1075
1088
|
divArray.map(function (_, index) {
|
|
1076
1089
|
return _react2.default.createElement(
|
|
1077
|
-
|
|
1090
|
+
'div',
|
|
1078
1091
|
{
|
|
1079
1092
|
style: {
|
|
1080
|
-
display:
|
|
1081
|
-
alignItems:
|
|
1082
|
-
justifyContent:
|
|
1083
|
-
marginBottom:
|
|
1093
|
+
display: 'flex',
|
|
1094
|
+
alignItems: 'center',
|
|
1095
|
+
justifyContent: 'space-between',
|
|
1096
|
+
marginBottom: '15px'
|
|
1084
1097
|
}
|
|
1085
1098
|
},
|
|
1086
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1087
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1088
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1089
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1090
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1091
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1092
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1093
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1094
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1099
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
|
|
1100
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '110px' }),
|
|
1101
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '110px' }),
|
|
1102
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '120px' }),
|
|
1103
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
|
|
1104
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '110px' }),
|
|
1105
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
|
|
1106
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
|
|
1107
|
+
_react2.default.createElement(_Shimmer2.default, { height: '16px', width: '50px' })
|
|
1095
1108
|
);
|
|
1096
1109
|
})
|
|
1097
1110
|
);
|
|
1098
1111
|
}
|
|
1099
1112
|
}, {
|
|
1100
|
-
key:
|
|
1113
|
+
key: 'returnTableStatus',
|
|
1101
1114
|
value: function returnTableStatus() {
|
|
1102
1115
|
if (this.props.tableLoading && !this.props.tableLoadingAction) {
|
|
1103
1116
|
return _react2.default.createElement(
|
|
1104
|
-
|
|
1105
|
-
{ style: { padding:
|
|
1117
|
+
'div',
|
|
1118
|
+
{ style: { padding: '10px' } },
|
|
1106
1119
|
this.tableLoadingFirst()
|
|
1107
1120
|
);
|
|
1108
1121
|
} else {
|
|
1109
1122
|
if (this.state.items.length == 0) {
|
|
1110
1123
|
if (this.props.tableLoading === false) {
|
|
1111
1124
|
return _react2.default.createElement(
|
|
1112
|
-
|
|
1125
|
+
'div',
|
|
1113
1126
|
null,
|
|
1114
1127
|
_react2.default.createElement(
|
|
1115
1128
|
Table.Element,
|
|
@@ -1125,7 +1138,7 @@ var Table = function (_Component) {
|
|
|
1125
1138
|
);
|
|
1126
1139
|
} else {
|
|
1127
1140
|
return _react2.default.createElement(
|
|
1128
|
-
|
|
1141
|
+
'div',
|
|
1129
1142
|
null,
|
|
1130
1143
|
_react2.default.createElement(
|
|
1131
1144
|
Table.Element,
|
|
@@ -1138,18 +1151,18 @@ var Table = function (_Component) {
|
|
|
1138
1151
|
})
|
|
1139
1152
|
),
|
|
1140
1153
|
_react2.default.createElement(
|
|
1141
|
-
|
|
1142
|
-
{ style: { padding:
|
|
1154
|
+
'div',
|
|
1155
|
+
{ style: { padding: '10px' } },
|
|
1143
1156
|
this.tableLoadingFirst()
|
|
1144
1157
|
),
|
|
1145
|
-
|
|
1158
|
+
';'
|
|
1146
1159
|
);
|
|
1147
1160
|
}
|
|
1148
1161
|
}
|
|
1149
1162
|
}
|
|
1150
1163
|
}
|
|
1151
1164
|
}, {
|
|
1152
|
-
key:
|
|
1165
|
+
key: 'render',
|
|
1153
1166
|
value: function render() {
|
|
1154
1167
|
var _this4 = this;
|
|
1155
1168
|
|
|
@@ -1171,7 +1184,6 @@ var Table = function (_Component) {
|
|
|
1171
1184
|
searchedText = _state2.searchedText,
|
|
1172
1185
|
items = _state2.items;
|
|
1173
1186
|
|
|
1174
|
-
|
|
1175
1187
|
var rows = this.state.items.map(function (item, index) {
|
|
1176
1188
|
return _react2.default.createElement(
|
|
1177
1189
|
_react2.default.Fragment,
|
|
@@ -1179,9 +1191,9 @@ var Table = function (_Component) {
|
|
|
1179
1191
|
_react2.default.createElement(
|
|
1180
1192
|
Table.Row,
|
|
1181
1193
|
{
|
|
1182
|
-
theme: theme,
|
|
1194
|
+
theme: _this4.props.theme,
|
|
1183
1195
|
key: index,
|
|
1184
|
-
className: item.rowChecked ?
|
|
1196
|
+
className: item.rowChecked ? 'selected-row ' + (item._divider_ ? 'divider-row' : '') : item._divider_ ? 'divider-row' : ''
|
|
1185
1197
|
},
|
|
1186
1198
|
_this4.defaultShowColumns.map(function (column) {
|
|
1187
1199
|
var cellRenderer = column.children || _this4.defaultCellRenderer;
|
|
@@ -1189,13 +1201,13 @@ var Table = function (_Component) {
|
|
|
1189
1201
|
return _react2.default.createElement(
|
|
1190
1202
|
Table.Cell,
|
|
1191
1203
|
{
|
|
1192
|
-
className:
|
|
1193
|
-
theme: theme,
|
|
1204
|
+
className: 'table-cell',
|
|
1205
|
+
theme: _this4.props.theme,
|
|
1194
1206
|
key: index + column.title + Math.random(),
|
|
1195
1207
|
maxWidth: column.maxWidth,
|
|
1196
1208
|
column: {
|
|
1197
1209
|
column: column,
|
|
1198
|
-
width: column.field ===
|
|
1210
|
+
width: column.field === 'extra_columns' ? '40px' : 'auto'
|
|
1199
1211
|
}
|
|
1200
1212
|
},
|
|
1201
1213
|
cellRenderer(item, column, index)
|
|
@@ -1205,24 +1217,24 @@ var Table = function (_Component) {
|
|
|
1205
1217
|
),
|
|
1206
1218
|
_this4.state.showExtraRow === index ? _react2.default.createElement(
|
|
1207
1219
|
Table.Row,
|
|
1208
|
-
{ theme: theme, key:
|
|
1220
|
+
{ theme: _this4.props.theme, key: 'row-' + index + 'extra' },
|
|
1209
1221
|
_react2.default.createElement(
|
|
1210
1222
|
Table.Cell,
|
|
1211
1223
|
{
|
|
1212
|
-
className:
|
|
1213
|
-
theme: theme,
|
|
1224
|
+
className: 'table-inner-cell',
|
|
1225
|
+
theme: _this4.props.theme,
|
|
1214
1226
|
column: {},
|
|
1215
1227
|
colSpan: _this4.props.maxShowNoOfColumns + 1
|
|
1216
1228
|
// className="tableHolder"
|
|
1217
1229
|
},
|
|
1218
1230
|
nestedTable.length > 0 && item[nestedTable[0].field].rows.length > 0 ? _react2.default.createElement(
|
|
1219
1231
|
Table.Card,
|
|
1220
|
-
{ width:
|
|
1232
|
+
{ theme: _this4.props.theme, width: '100%' },
|
|
1221
1233
|
_react2.default.createElement(
|
|
1222
1234
|
TableInner.Element,
|
|
1223
|
-
{ className:
|
|
1235
|
+
{ theme: _this4.props.theme, className: 'nested-table' },
|
|
1224
1236
|
_react2.default.createElement(Table.Header, {
|
|
1225
|
-
theme: theme,
|
|
1237
|
+
theme: _this4.props.theme,
|
|
1226
1238
|
columns: item[nestedTable[0].field].column_elements,
|
|
1227
1239
|
selectedColumns: item[nestedTable[0].field].column_elements.map(function (column) {
|
|
1228
1240
|
return column.field;
|
|
@@ -1231,17 +1243,17 @@ var Table = function (_Component) {
|
|
|
1231
1243
|
item[nestedTable[0].field].rows.map(function (element, i) {
|
|
1232
1244
|
return _react2.default.createElement(
|
|
1233
1245
|
Table.Body,
|
|
1234
|
-
{ key:
|
|
1246
|
+
{ theme: _this4.props.theme, key: 'nested-table-' + i },
|
|
1235
1247
|
_react2.default.createElement(
|
|
1236
|
-
|
|
1248
|
+
'tr',
|
|
1237
1249
|
null,
|
|
1238
1250
|
item[nestedTable[0].field].column_elements.map(function (inner) {
|
|
1239
1251
|
var cellRenderer = inner.children || _this4.defaultCellRenderer;
|
|
1240
1252
|
return _react2.default.createElement(
|
|
1241
1253
|
TableInner.Cell,
|
|
1242
1254
|
{
|
|
1243
|
-
theme: theme,
|
|
1244
|
-
key: inner.title +
|
|
1255
|
+
theme: _this4.props.theme,
|
|
1256
|
+
key: inner.title + 'n',
|
|
1245
1257
|
column: inner
|
|
1246
1258
|
},
|
|
1247
1259
|
cellRenderer(element, inner, i)
|
|
@@ -1254,12 +1266,12 @@ var Table = function (_Component) {
|
|
|
1254
1266
|
) : null,
|
|
1255
1267
|
_react2.default.createElement(
|
|
1256
1268
|
Table.Card,
|
|
1257
|
-
_extends({}, _this4.props, { width:
|
|
1269
|
+
_extends({}, _this4.props, { width: '100%' }),
|
|
1258
1270
|
_react2.default.createElement(
|
|
1259
1271
|
TableInner.Element,
|
|
1260
1272
|
_this4.props,
|
|
1261
1273
|
_react2.default.createElement(Table.Header, {
|
|
1262
|
-
theme: theme,
|
|
1274
|
+
theme: _this4.props.theme,
|
|
1263
1275
|
columns: _this4.extraColumns,
|
|
1264
1276
|
selectedColumns: _this4.extraColumns.map(function (column) {
|
|
1265
1277
|
return column.field;
|
|
@@ -1272,14 +1284,14 @@ var Table = function (_Component) {
|
|
|
1272
1284
|
null,
|
|
1273
1285
|
_react2.default.createElement(
|
|
1274
1286
|
Table.Row,
|
|
1275
|
-
{ theme: theme, key:
|
|
1287
|
+
{ theme: _this4.props.theme, key: 'row-' + index + 'child' },
|
|
1276
1288
|
_this4.extraColumns.map(function (column) {
|
|
1277
1289
|
var cellRenderer = column.children || _this4.defaultCellRenderer;
|
|
1278
1290
|
return _react2.default.createElement(
|
|
1279
1291
|
TableInner.Cell,
|
|
1280
1292
|
{
|
|
1281
|
-
theme: theme,
|
|
1282
|
-
key: column.title +
|
|
1293
|
+
theme: _this4.props.theme,
|
|
1294
|
+
key: column.title + 'c',
|
|
1283
1295
|
column: column
|
|
1284
1296
|
},
|
|
1285
1297
|
cellRenderer(item, column, index)
|
|
@@ -1301,16 +1313,16 @@ var Table = function (_Component) {
|
|
|
1301
1313
|
Table.Title,
|
|
1302
1314
|
{
|
|
1303
1315
|
style: {
|
|
1304
|
-
display:
|
|
1316
|
+
display: 'flex'
|
|
1305
1317
|
},
|
|
1306
|
-
className:
|
|
1318
|
+
className: 'table-title-holder',
|
|
1307
1319
|
theme: this.props.theme
|
|
1308
1320
|
},
|
|
1309
1321
|
_react2.default.createElement(
|
|
1310
|
-
|
|
1311
|
-
{ className:
|
|
1322
|
+
'div',
|
|
1323
|
+
{ className: 'table-title' },
|
|
1312
1324
|
_react2.default.createElement(
|
|
1313
|
-
|
|
1325
|
+
'p',
|
|
1314
1326
|
null,
|
|
1315
1327
|
this.props.tableTitle
|
|
1316
1328
|
)
|
|
@@ -1320,28 +1332,23 @@ var Table = function (_Component) {
|
|
|
1320
1332
|
null,
|
|
1321
1333
|
tableLoading && !tableLoadingAction && _react2.default.createElement(
|
|
1322
1334
|
TableTitleLoadingInitial,
|
|
1323
|
-
|
|
1324
|
-
_react2.default.createElement(_Shimmer2.default, { height:
|
|
1335
|
+
{ theme: this.props.theme },
|
|
1336
|
+
_react2.default.createElement(_Shimmer2.default, { height: '24px', width: '150px' })
|
|
1325
1337
|
),
|
|
1326
1338
|
_react2.default.createElement(
|
|
1327
|
-
|
|
1328
|
-
{ className:
|
|
1339
|
+
'div',
|
|
1340
|
+
{ className: 'title-right-area' },
|
|
1329
1341
|
showSearchBox && (!tableLoading || tableLoading && tableLoadingAction) && _react2.default.createElement(
|
|
1330
1342
|
SearchContainer,
|
|
1331
|
-
|
|
1343
|
+
{ theme: this.props.theme },
|
|
1332
1344
|
_react2.default.createElement(
|
|
1333
|
-
|
|
1334
|
-
{ className:
|
|
1335
|
-
_react2.default.createElement(_icon2.default, {
|
|
1336
|
-
name: "search",
|
|
1337
|
-
width: 12,
|
|
1338
|
-
height: 12,
|
|
1339
|
-
color: "#999999"
|
|
1340
|
-
})
|
|
1345
|
+
'span',
|
|
1346
|
+
{ className: 'search-icon-wrapper' },
|
|
1347
|
+
_react2.default.createElement(_icon2.default, { name: 'search', width: 12, height: 12, color: '#999999' })
|
|
1341
1348
|
),
|
|
1342
1349
|
_react2.default.createElement(_inputText2.default, {
|
|
1343
|
-
className:
|
|
1344
|
-
label:
|
|
1350
|
+
className: 'input-field',
|
|
1351
|
+
label: 'Search',
|
|
1345
1352
|
value: searchedText,
|
|
1346
1353
|
onChange: function onChange(e) {
|
|
1347
1354
|
_this4.props.tableLoadingActionFunc(true);
|
|
@@ -1349,29 +1356,31 @@ var Table = function (_Component) {
|
|
|
1349
1356
|
}
|
|
1350
1357
|
}),
|
|
1351
1358
|
searchedText && searchedText.length && _react2.default.createElement(
|
|
1352
|
-
|
|
1359
|
+
'span',
|
|
1353
1360
|
{
|
|
1354
|
-
className:
|
|
1361
|
+
className: 'close-icon-wrapper',
|
|
1355
1362
|
onClick: function onClick() {
|
|
1356
|
-
return _this4.tableOperation(
|
|
1363
|
+
return _this4.tableOperation('clearInput');
|
|
1357
1364
|
}
|
|
1358
1365
|
},
|
|
1359
1366
|
_react2.default.createElement(_icon2.default, {
|
|
1360
|
-
|
|
1367
|
+
theme: this.props.theme,
|
|
1368
|
+
name: 'cross',
|
|
1361
1369
|
width: 12,
|
|
1362
1370
|
height: 10,
|
|
1363
|
-
color:
|
|
1371
|
+
color: '#999999'
|
|
1364
1372
|
})
|
|
1365
1373
|
)
|
|
1366
|
-
) || _react2.default.createElement(_Shimmer2.default, { height:
|
|
1367
|
-
!tableLoading && pageDropdown && pageDropdown || tableLoadingAction ? pageDropdown : _react2.default.createElement(_Shimmer2.default, { height:
|
|
1374
|
+
) || _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '322px' }),
|
|
1375
|
+
!tableLoading && pageDropdown && pageDropdown || tableLoadingAction ? pageDropdown : _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '100px' }),
|
|
1368
1376
|
this.props.searchable ? _react2.default.createElement(
|
|
1369
|
-
|
|
1377
|
+
'div',
|
|
1370
1378
|
null,
|
|
1371
1379
|
_react2.default.createElement(_button2.default, {
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1380
|
+
theme: this.props.theme,
|
|
1381
|
+
appearance: 'cta',
|
|
1382
|
+
icon: 'search',
|
|
1383
|
+
display: 'rounded',
|
|
1375
1384
|
width: 34,
|
|
1376
1385
|
height: 34,
|
|
1377
1386
|
iconWidth: 16,
|
|
@@ -1379,32 +1388,34 @@ var Table = function (_Component) {
|
|
|
1379
1388
|
})
|
|
1380
1389
|
) : null,
|
|
1381
1390
|
_react2.default.createElement(
|
|
1382
|
-
|
|
1383
|
-
{ className:
|
|
1391
|
+
'div',
|
|
1392
|
+
{ className: 'refresh-section' },
|
|
1384
1393
|
isRefreshActivated && _react2.default.createElement(
|
|
1385
|
-
|
|
1386
|
-
{ className:
|
|
1387
|
-
|
|
1394
|
+
'div',
|
|
1395
|
+
{ className: 'tooltip' },
|
|
1396
|
+
'Refresh to get updated reports'
|
|
1388
1397
|
),
|
|
1389
|
-
isRefreshDotVisible && _react2.default.createElement(
|
|
1398
|
+
isRefreshDotVisible && _react2.default.createElement('div', { className: 'red-dot' }),
|
|
1390
1399
|
(!tableLoading || tableLoadingAction) && _react2.default.createElement(
|
|
1391
|
-
|
|
1400
|
+
'div',
|
|
1392
1401
|
{
|
|
1393
|
-
className:
|
|
1402
|
+
className: '' + (isRefreshActivated ? 'refresh-btn active' : 'refresh-btn'),
|
|
1394
1403
|
onClick: function onClick() {
|
|
1395
|
-
return _this4.tableOperation(
|
|
1404
|
+
return _this4.tableOperation('refresh');
|
|
1396
1405
|
}
|
|
1397
1406
|
},
|
|
1398
1407
|
_react2.default.createElement(_button2.default, {
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1408
|
+
theme: this.props.theme,
|
|
1409
|
+
display: 'rounded',
|
|
1410
|
+
appearance: 'cta',
|
|
1411
|
+
icon: 'data-refresh',
|
|
1402
1412
|
width: 16,
|
|
1403
1413
|
height: 16
|
|
1404
1414
|
})
|
|
1405
|
-
) || _react2.default.createElement(_Shimmer2.default, { height:
|
|
1415
|
+
) || _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '30px' })
|
|
1406
1416
|
),
|
|
1407
1417
|
this.props.filtersStructure && this.props.filtersStructure.length && !tableLoading || tableLoadingAction && filtersStructure.length ? _react2.default.createElement(_filter2.default, {
|
|
1418
|
+
theme: this.props.theme,
|
|
1408
1419
|
ref: this._filterRef,
|
|
1409
1420
|
initialFilters: this.props.initialFilters,
|
|
1410
1421
|
filtersStructure: this.props.filtersStructure,
|
|
@@ -1414,81 +1425,83 @@ var Table = function (_Component) {
|
|
|
1414
1425
|
filterMessage: this.props.filterMessage,
|
|
1415
1426
|
handleUserIdFilterChange: this.props.handleUserIdFilterChange,
|
|
1416
1427
|
userIdsList: this.props.userIdsList
|
|
1417
|
-
}) : tableLoading && filtersStructure.length ? _react2.default.createElement(_Shimmer2.default, { height:
|
|
1428
|
+
}) : tableLoading && filtersStructure.length ? _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '30px' }) : null,
|
|
1418
1429
|
downloadAvailable && (!tableLoading || tableLoading && tableLoadingAction) && _react2.default.createElement(
|
|
1419
|
-
|
|
1420
|
-
{ className:
|
|
1430
|
+
'div',
|
|
1431
|
+
{ className: 'refresh-section' },
|
|
1421
1432
|
_react2.default.createElement(
|
|
1422
|
-
|
|
1433
|
+
'div',
|
|
1423
1434
|
{
|
|
1424
|
-
className:
|
|
1435
|
+
className: 'refresh-btn',
|
|
1425
1436
|
onClick: function onClick() {
|
|
1426
1437
|
return getTableData({ page: 1 }, false, true);
|
|
1427
1438
|
}
|
|
1428
1439
|
},
|
|
1429
1440
|
_react2.default.createElement(_button2.default, {
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1441
|
+
theme: this.props.theme,
|
|
1442
|
+
display: 'rounded',
|
|
1443
|
+
appearance: 'cta',
|
|
1444
|
+
icon: 'download-icon',
|
|
1433
1445
|
width: 16,
|
|
1434
1446
|
height: 16,
|
|
1435
1447
|
iconWidth: 12,
|
|
1436
1448
|
iconHeight: 12
|
|
1437
1449
|
})
|
|
1438
1450
|
)
|
|
1439
|
-
) || _react2.default.createElement(_Shimmer2.default, { height:
|
|
1451
|
+
) || _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '30px' }),
|
|
1440
1452
|
false && _react2.default.createElement(
|
|
1441
|
-
|
|
1442
|
-
{ className:
|
|
1453
|
+
'div',
|
|
1454
|
+
{ className: 'column-show-holder' },
|
|
1443
1455
|
_react2.default.createElement(
|
|
1444
|
-
|
|
1445
|
-
{ className:
|
|
1456
|
+
'div',
|
|
1457
|
+
{ className: 'column-show-icon' },
|
|
1446
1458
|
_react2.default.createElement(_icon2.default, {
|
|
1447
|
-
|
|
1459
|
+
theme: this.props.theme,
|
|
1460
|
+
name: 'controls',
|
|
1448
1461
|
width: 16,
|
|
1449
1462
|
height: 16,
|
|
1450
|
-
color:
|
|
1463
|
+
color: '#afb2ba'
|
|
1451
1464
|
})
|
|
1452
1465
|
),
|
|
1453
1466
|
_react2.default.createElement(
|
|
1454
|
-
|
|
1455
|
-
{ className:
|
|
1467
|
+
'div',
|
|
1468
|
+
{ className: 'column-show-list-box' },
|
|
1456
1469
|
_react2.default.createElement(
|
|
1457
|
-
|
|
1470
|
+
'div',
|
|
1458
1471
|
null,
|
|
1459
1472
|
_react2.default.createElement(
|
|
1460
|
-
|
|
1461
|
-
{ className:
|
|
1473
|
+
'div',
|
|
1474
|
+
{ className: 'column-show-info' },
|
|
1462
1475
|
_react2.default.createElement(
|
|
1463
|
-
|
|
1464
|
-
{ className:
|
|
1465
|
-
|
|
1476
|
+
'div',
|
|
1477
|
+
{ className: 'column-show-info-header' },
|
|
1478
|
+
'Table Filters'
|
|
1466
1479
|
),
|
|
1467
1480
|
_react2.default.createElement(
|
|
1468
|
-
|
|
1481
|
+
'div',
|
|
1469
1482
|
null,
|
|
1470
|
-
|
|
1483
|
+
'Select/deselect to show/hide columns.'
|
|
1471
1484
|
),
|
|
1472
1485
|
_react2.default.createElement(
|
|
1473
|
-
|
|
1486
|
+
'div',
|
|
1474
1487
|
null,
|
|
1475
|
-
|
|
1488
|
+
'Drag and arrange the column order.'
|
|
1476
1489
|
)
|
|
1477
1490
|
),
|
|
1478
1491
|
_react2.default.createElement(
|
|
1479
|
-
|
|
1480
|
-
{ className:
|
|
1492
|
+
'div',
|
|
1493
|
+
{ className: 'column-show-list' },
|
|
1481
1494
|
_react2.default.createElement(
|
|
1482
1495
|
_checkbox2.default.Group,
|
|
1483
1496
|
{
|
|
1484
|
-
|
|
1485
|
-
|
|
1497
|
+
theme: this.props.theme,
|
|
1498
|
+
name: 'example2',
|
|
1499
|
+
type: 'label',
|
|
1486
1500
|
onChange: function onChange(e) {
|
|
1487
1501
|
_this4.showCloumnCheckChange(e.target.value, e.target.checked);
|
|
1488
1502
|
},
|
|
1489
|
-
align:
|
|
1490
|
-
selected: this.state.showColumnArr ? this.state.showColumnArr : []
|
|
1491
|
-
theme: this.props.theme
|
|
1503
|
+
align: 'horizontal',
|
|
1504
|
+
selected: this.state.showColumnArr ? this.state.showColumnArr : []
|
|
1492
1505
|
},
|
|
1493
1506
|
this.columns ? this.columns.map(function (item) {
|
|
1494
1507
|
return _react2.default.createElement(
|
|
@@ -1505,27 +1518,29 @@ var Table = function (_Component) {
|
|
|
1505
1518
|
)
|
|
1506
1519
|
)
|
|
1507
1520
|
),
|
|
1508
|
-
rows.length && this.state.showColumnArr[0] ===
|
|
1521
|
+
rows.length && this.state.showColumnArr[0] === 'rowChecked' && this.props.selectAllRows && !tableLoading ? _react2.default.createElement(
|
|
1509
1522
|
SelectAllButton,
|
|
1510
1523
|
{
|
|
1524
|
+
theme: this.props.theme,
|
|
1511
1525
|
isActive: !this.state.isAllRowsSelected,
|
|
1512
1526
|
onClick: function onClick(e) {
|
|
1513
1527
|
_this4.execute(!_this4.state.isAllRowsSelected);
|
|
1514
1528
|
}
|
|
1515
1529
|
},
|
|
1516
|
-
_react2.default.createElement(
|
|
1530
|
+
_react2.default.createElement('input', { className: 'input-select-all-button', type: 'checkbox' }),
|
|
1517
1531
|
_react2.default.createElement(
|
|
1518
|
-
|
|
1519
|
-
{ className:
|
|
1520
|
-
_react2.default.createElement(
|
|
1532
|
+
'label',
|
|
1533
|
+
{ className: 'label-select-all-button' },
|
|
1534
|
+
_react2.default.createElement('span', { className: 'span-select-all-button' })
|
|
1521
1535
|
)
|
|
1522
1536
|
) : null,
|
|
1523
1537
|
_react2.default.createElement(
|
|
1524
1538
|
Table.Card,
|
|
1525
1539
|
_extends({
|
|
1526
|
-
|
|
1540
|
+
theme: this.props.theme,
|
|
1541
|
+
className: 'table-card'
|
|
1527
1542
|
}, this.props, {
|
|
1528
|
-
width:
|
|
1543
|
+
width: '100%',
|
|
1529
1544
|
radius: 2
|
|
1530
1545
|
}),
|
|
1531
1546
|
this.state.commonActionsSelected.length > 0 ? _react2.default.createElement(
|
|
@@ -1535,14 +1550,15 @@ var Table = function (_Component) {
|
|
|
1535
1550
|
Table.SelectedAction,
|
|
1536
1551
|
{
|
|
1537
1552
|
theme: this.props.theme,
|
|
1538
|
-
className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ?
|
|
1553
|
+
className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ? 'selectedAction show' : 'selectedAction'
|
|
1539
1554
|
},
|
|
1540
1555
|
_react2.default.createElement(
|
|
1541
|
-
|
|
1542
|
-
{ className:
|
|
1556
|
+
'div',
|
|
1557
|
+
{ className: 'action-icons-common' },
|
|
1543
1558
|
this.state.commonActionsSelected.map(function (item, idx) {
|
|
1544
|
-
return item !==
|
|
1545
|
-
|
|
1559
|
+
return item !== 'play' ? _react2.default.createElement(_button2.default, {
|
|
1560
|
+
theme: _this4.props.theme,
|
|
1561
|
+
className: 'action-button ' + (item === 'play' ? 'play' : 'default'),
|
|
1546
1562
|
key: idx,
|
|
1547
1563
|
onClick: function onClick(e) {
|
|
1548
1564
|
if (_this4.props.commonActionClickHandler) {
|
|
@@ -1556,13 +1572,13 @@ var Table = function (_Component) {
|
|
|
1556
1572
|
selectedRows: []
|
|
1557
1573
|
});
|
|
1558
1574
|
|
|
1559
|
-
_this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray,
|
|
1575
|
+
_this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray, 'common-action');
|
|
1560
1576
|
} else {
|
|
1561
1577
|
console.log("pass func as props named 'commonActionClickHandler'... receive args as actionItem name and event obj. ");
|
|
1562
1578
|
}
|
|
1563
1579
|
},
|
|
1564
|
-
display:
|
|
1565
|
-
appearance:
|
|
1580
|
+
display: 'rounded',
|
|
1581
|
+
appearance: 'primary',
|
|
1566
1582
|
icon: _permissionIconMap2.default[item],
|
|
1567
1583
|
iconWidth: 10,
|
|
1568
1584
|
iconHeight: 10,
|
|
@@ -1609,6 +1625,10 @@ var SearchContainer = _styledComponents2.default.div(_templateObject);
|
|
|
1609
1625
|
var AvatarBox = _styledComponents2.default.div(_templateObject2);
|
|
1610
1626
|
Table.SelectedAction = _styledComponents2.default.div(_templateObject3, function (props) {
|
|
1611
1627
|
return _tokens.colors[props.theme].table.background;
|
|
1628
|
+
}, function (props) {
|
|
1629
|
+
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1630
|
+
}, function (props) {
|
|
1631
|
+
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1612
1632
|
});
|
|
1613
1633
|
|
|
1614
1634
|
Table.Card = (0, _styledComponents2.default)(_card2.default)(_templateObject4, function (props) {
|
|
@@ -1616,6 +1636,22 @@ Table.Card = (0, _styledComponents2.default)(_card2.default)(_templateObject4, f
|
|
|
1616
1636
|
});
|
|
1617
1637
|
Table.Title = _styledComponents2.default.div(_templateObject5, function (props) {
|
|
1618
1638
|
return _tokens.colors[props.theme].table.titleColor;
|
|
1639
|
+
}, function (props) {
|
|
1640
|
+
return _tokens.colors[props.theme].table.titleBackgroundColor;
|
|
1641
|
+
}, function (props) {
|
|
1642
|
+
return _tokens.colors[props.theme].table.titleBorderTop;
|
|
1643
|
+
}, function (props) {
|
|
1644
|
+
return _tokens.colors[props.theme].table.titleActiveBackgroundColor;
|
|
1645
|
+
}, function (props) {
|
|
1646
|
+
return _tokens.colors[props.theme].table.titleActiveBorderColor;
|
|
1647
|
+
}, function (props) {
|
|
1648
|
+
return _tokens.colors[props.theme].table.titleBeforeBorderBottom;
|
|
1649
|
+
}, function (props) {
|
|
1650
|
+
return _tokens.colors[props.theme].table.lightthemeColor;
|
|
1651
|
+
}, function (props) {
|
|
1652
|
+
return _tokens.colors[props.theme].table.titleCheckedBackgroundColor;
|
|
1653
|
+
}, function (props) {
|
|
1654
|
+
return _tokens.colors[props.theme].table.titleCheckedHoverBackgroundColor;
|
|
1619
1655
|
});
|
|
1620
1656
|
Table.compare = {
|
|
1621
1657
|
numbers: function numbers(column, row1, row2) {
|
|
@@ -1645,8 +1681,10 @@ Table.Row = _styledComponents2.default.tr(_templateObject9, function (props) {
|
|
|
1645
1681
|
return _tokens.colors[props.theme].table.rowSelectedBackground;
|
|
1646
1682
|
}, function (props) {
|
|
1647
1683
|
return _tokens.colors[props.theme].table.evenRowBackground;
|
|
1684
|
+
}, function (props) {
|
|
1685
|
+
return _tokens.colors[props.theme].table.RowHoverColor;
|
|
1648
1686
|
}, Table.Card, function (props) {
|
|
1649
|
-
if (typeof props.theme ===
|
|
1687
|
+
if (typeof props.theme === 'string') return 'background:' + _tokens.colors[props.theme].table.innerTableBackground;
|
|
1650
1688
|
});
|
|
1651
1689
|
|
|
1652
1690
|
Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
|
|
@@ -1656,26 +1694,40 @@ Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
|
|
|
1656
1694
|
}, function (props) {
|
|
1657
1695
|
return props.column.width;
|
|
1658
1696
|
}, function (props) {
|
|
1659
|
-
return props.maxWidth ||
|
|
1697
|
+
return props.maxWidth || '175px';
|
|
1698
|
+
}, function (props) {
|
|
1699
|
+
return _tokens.colors[props.theme].table.CellHoverFocusColor;
|
|
1700
|
+
}, function (props) {
|
|
1701
|
+
return _tokens.colors[props.theme].table.CellHoverColor;
|
|
1702
|
+
}, function (props) {
|
|
1703
|
+
return _tokens.colors[props.theme].table.CellHoverFillColor;
|
|
1704
|
+
}, function (props) {
|
|
1705
|
+
return _tokens.colors[props.theme].table.CellMoreActionBackgroundColor;
|
|
1660
1706
|
}, function (props) {
|
|
1661
1707
|
return _tokens.colors[props.theme].table.innerTableBackground;
|
|
1708
|
+
}, function (props) {
|
|
1709
|
+
return _tokens.colors[props.theme].table.CellBeforeBorderBottom;
|
|
1710
|
+
}, function (props) {
|
|
1711
|
+
return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
|
|
1662
1712
|
});
|
|
1663
1713
|
|
|
1664
1714
|
var TableTitleLoadingInitial = _styledComponents2.default.div(_templateObject11);
|
|
1665
1715
|
|
|
1666
|
-
var DubbingStatusStyles = _styledComponents2.default.div(_templateObject12)
|
|
1716
|
+
var DubbingStatusStyles = _styledComponents2.default.div(_templateObject12, function (props) {
|
|
1717
|
+
return _tokens.colors[props.theme].table.ApprovedBackground;
|
|
1718
|
+
});
|
|
1667
1719
|
var SelectAllButton = _styledComponents2.default.div(_templateObject13, function (props) {
|
|
1668
|
-
return props.isActive ?
|
|
1720
|
+
return props.isActive ? '1px solid #9E9E9E' : '';
|
|
1669
1721
|
}, function (props) {
|
|
1670
|
-
return !props.isActive ?
|
|
1722
|
+
return !props.isActive ? '#49dad0' : '';
|
|
1671
1723
|
}, function (props) {
|
|
1672
|
-
return props.isActive ?
|
|
1724
|
+
return props.isActive ? 'inline' : '';
|
|
1673
1725
|
}, function (props) {
|
|
1674
|
-
return !props.isActive ?
|
|
1726
|
+
return !props.isActive ? 'checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards' : '';
|
|
1675
1727
|
});
|
|
1676
1728
|
|
|
1677
1729
|
Table.propTypes = {
|
|
1678
|
-
theme: _propTypes2.default.oneOf([
|
|
1730
|
+
theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
|
|
1679
1731
|
items: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,
|
|
1680
1732
|
tableTitle: _propTypes2.default.string,
|
|
1681
1733
|
onSort: _propTypes2.default.func,
|
|
@@ -1690,7 +1742,7 @@ Table.propTypes = {
|
|
|
1690
1742
|
};
|
|
1691
1743
|
|
|
1692
1744
|
Table.defaultProps = {
|
|
1693
|
-
theme:
|
|
1745
|
+
theme: 'light',
|
|
1694
1746
|
videoPlayBtn: false,
|
|
1695
1747
|
showActions: true,
|
|
1696
1748
|
onSort: function onSort() {
|