@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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
@@ -8,43 +8,45 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|
|
8
8
|
|
|
9
9
|
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; }; }();
|
|
10
10
|
|
|
11
|
-
var _templateObject = _taggedTemplateLiteral([
|
|
12
|
-
_templateObject2 = _taggedTemplateLiteral([
|
|
13
|
-
_templateObject3 = _taggedTemplateLiteral([
|
|
14
|
-
_templateObject4 = _taggedTemplateLiteral([
|
|
15
|
-
_templateObject5 = _taggedTemplateLiteral([
|
|
11
|
+
var _templateObject = _taggedTemplateLiteral(['\n position: relative;\n // width: 21px;\n // height: 62px;\n overflow: hidden;\n transition: width 0.6s ease;\n //z-index: 2;\n //width: 360px;\n overflow: visible;\n text-align: left;\n z-index: ', ';\n\n .filter-button {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n cursor: pointer;\n\n &.active,\n &:hover {\n path {\n transition: all 0.4s ease-out;\n }\n }\n\n &.active {\n path {\n fill: ', ';\n }\n }\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n }\n\n .dashboard-filter-box {\n border-bottom: 1px #303f51 solid;\n padding: 4px 0px 0px 0;\n position: absolute;\n }\n\n .search-filter-list-box {\n display: flex;\n position: relative;\n /* padding: 10px 0px; */\n align-items: center;\n font-family: \'SFUIText-Medium\';\n justify-content: flex-end;\n width: ', ';\n }\n\n .filter-message {\n font-size: 12px;\n font-family: \'SFUIText-Regular\';\n color: #afb2ba;\n }\n span.chip-button {\n color: #fff;\n background: #303f51;\n color: #fff;\n margin: 5px;\n &:hover {\n color: ', ';\n }\n &.checked {\n background: ', ';\n color: #0c141d;\n &:hover {\n color: #0c141d;\n }\n }\n }\n\n .filter-list-box {\n & > span {\n color: rgb(99, 208, 199);\n font-size: 10px;\n margin-bottom: 0px;\n display: inline-block;\n }\n\n .list-holder {\n overflow: auto;\n a {\n top: 7px;\n }\n /* width */\n &::-webkit-scrollbar {\n width: 2px;\n height: 2px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n box-shadow: inset 0 0 5px #a6aab2;\n border-radius: 10px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ', ';\n border-radius: 10px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ', ';\n }\n\n & > div {\n // width: max-content;\n & > span {\n // margin-right: 5px;\n // background: ', ';\n // &:hover {\n // color: #fff;\n // }\n }\n }\n }\n }\n\n .filter-options-holder {\n margin-top: 5px;\n position: absolute;\n background: #182738;\n z-index: 2;\n font-family: \'SFUIText-Medium\';\n padding: 15px;\n right: 0;\n\n .filter-group-title {\n color: #afb2ba;\n font-size: 10px;\n padding-bottom: 10px;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .filter-group-item-list {\n margin: 0px -5px 0px;\n .ardp-date-picker {\n display: inline-block;\n .label-text {\n color: #cccccc;\n font-size: 12px;\n transition: all 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n color: #fff;\n }\n }\n\n &.checked {\n .label-text {\n color: ', ';\n }\n }\n\n .calendar {\n right: -7px;\n width: 330px;\n padding: 15px;\n }\n }\n }\n\n .filter-group {\n padding: 15px 0px 10px;\n border-bottom: 1px solid #303f51;\n &:first-child {\n padding: 0px 0px 10px;\n }\n }\n\n button.filter-group-item {\n background-color: transparent;\n border: none;\n margin-right: 12px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n color: #cccccc;\n font-size: 12px;\n padding: 3px 0px;\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: #fff;\n }\n\n &.checked {\n color: ', ';\n }\n }\n\n .action-btn {\n margin: 0px;\n pointer-events: auto;\n border-radius: 999rem;\n box-shadow: none;\n padding: 0.5rem 0.7rem;\n }\n }\n'], ['\n position: relative;\n // width: 21px;\n // height: 62px;\n overflow: hidden;\n transition: width 0.6s ease;\n //z-index: 2;\n //width: 360px;\n overflow: visible;\n text-align: left;\n z-index: ', ';\n\n .filter-button {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n cursor: pointer;\n\n &.active,\n &:hover {\n path {\n transition: all 0.4s ease-out;\n }\n }\n\n &.active {\n path {\n fill: ', ';\n }\n }\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n }\n\n .dashboard-filter-box {\n border-bottom: 1px #303f51 solid;\n padding: 4px 0px 0px 0;\n position: absolute;\n }\n\n .search-filter-list-box {\n display: flex;\n position: relative;\n /* padding: 10px 0px; */\n align-items: center;\n font-family: \'SFUIText-Medium\';\n justify-content: flex-end;\n width: ', ';\n }\n\n .filter-message {\n font-size: 12px;\n font-family: \'SFUIText-Regular\';\n color: #afb2ba;\n }\n span.chip-button {\n color: #fff;\n background: #303f51;\n color: #fff;\n margin: 5px;\n &:hover {\n color: ', ';\n }\n &.checked {\n background: ', ';\n color: #0c141d;\n &:hover {\n color: #0c141d;\n }\n }\n }\n\n .filter-list-box {\n & > span {\n color: rgb(99, 208, 199);\n font-size: 10px;\n margin-bottom: 0px;\n display: inline-block;\n }\n\n .list-holder {\n overflow: auto;\n a {\n top: 7px;\n }\n /* width */\n &::-webkit-scrollbar {\n width: 2px;\n height: 2px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n box-shadow: inset 0 0 5px #a6aab2;\n border-radius: 10px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ', ';\n border-radius: 10px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ', ';\n }\n\n & > div {\n // width: max-content;\n & > span {\n // margin-right: 5px;\n // background: ', ';\n // &:hover {\n // color: #fff;\n // }\n }\n }\n }\n }\n\n .filter-options-holder {\n margin-top: 5px;\n position: absolute;\n background: #182738;\n z-index: 2;\n font-family: \'SFUIText-Medium\';\n padding: 15px;\n right: 0;\n\n .filter-group-title {\n color: #afb2ba;\n font-size: 10px;\n padding-bottom: 10px;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .filter-group-item-list {\n margin: 0px -5px 0px;\n .ardp-date-picker {\n display: inline-block;\n .label-text {\n color: #cccccc;\n font-size: 12px;\n transition: all 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n color: #fff;\n }\n }\n\n &.checked {\n .label-text {\n color: ', ';\n }\n }\n\n .calendar {\n right: -7px;\n width: 330px;\n padding: 15px;\n }\n }\n }\n\n .filter-group {\n padding: 15px 0px 10px;\n border-bottom: 1px solid #303f51;\n &:first-child {\n padding: 0px 0px 10px;\n }\n }\n\n button.filter-group-item {\n background-color: transparent;\n border: none;\n margin-right: 12px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n color: #cccccc;\n font-size: 12px;\n padding: 3px 0px;\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: #fff;\n }\n\n &.checked {\n color: ', ';\n }\n }\n\n .action-btn {\n margin: 0px;\n pointer-events: auto;\n border-radius: 999rem;\n box-shadow: none;\n padding: 0.5rem 0.7rem;\n }\n }\n']),
|
|
12
|
+
_templateObject2 = _taggedTemplateLiteral(['\n border: none;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n font-size: 12px;\n margin-left: 10px;\n padding: 10px 30px;\n background: ', ';\n border-radius: 999rem;\n color: #0c141d;\n &:hover {\n color: #ffffff;\n }\n'], ['\n border: none;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n font-size: 12px;\n margin-left: 10px;\n padding: 10px 30px;\n background: ', ';\n border-radius: 999rem;\n color: #0c141d;\n &:hover {\n color: #ffffff;\n }\n']),
|
|
13
|
+
_templateObject3 = _taggedTemplateLiteral(['\n background-color: transparent;\n border: none;\n margin-right: 10px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n font-size: 12px;\n margin: 0;\n padding: 10px 30px;\n background: #303f51;\n border-radius: 999rem;\n color: #ffffff;\n &:focus {\n outline: none;\n background: #303f51;\n color: ', ';\n }\n\n &:hover {\n color: ', ';\n background: #303f51;\n }\n'], ['\n background-color: transparent;\n border: none;\n margin-right: 10px;\n cursor: pointer;\n transition: all 0.5s ease-in-out;\n font-size: 12px;\n margin: 0;\n padding: 10px 30px;\n background: #303f51;\n border-radius: 999rem;\n color: #ffffff;\n &:focus {\n outline: none;\n background: #303f51;\n color: ', ';\n }\n\n &:hover {\n color: ', ';\n background: #303f51;\n }\n']),
|
|
14
|
+
_templateObject4 = _taggedTemplateLiteral(['\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.3);\n z-index: ', ';\n display: block;\n'], ['\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.3);\n z-index: ', ';\n display: block;\n']),
|
|
15
|
+
_templateObject5 = _taggedTemplateLiteral(['\n border-bottom: 1px solid #999999;\n\n .tags {\n padding-bottom: 2px;\n }\n input:focus {\n outline: none;\n }\n\n .input-filter {\n background: transparent;\n font-family: \'SFUIText-Medium\';\n position: relative;\n width: 100%;\n display: block;\n border: none;\n color: #999999;\n }\n .user-dropdown {\n background-color: rgb(18, 29, 41);\n margin-top: 5px;\n border: 1px solid rgb(153, 153, 153);\n max-height: 200px;\n overflow: auto;\n position: absolute;\n width: 92%;\n z-index: 2;\n cursor: pointer;\n }\n\n .dropdown-options {\n font-family: SFUIText-Regular;\n font-size: 13px;\n line-height: normal;\n color: rgb(204, 204, 204);\n padding: 7px;\n :hover {\n background-color: ', ';\n color: rgb(255, 255, 255);\n }\n &.active {\n background-color: ', ';\n color: rgb(255, 255, 255);\n :hover {\n background-color: rgb(18, 29, 41);\n color: rgb(204, 204, 204);\n }\n }\n }\n'], ['\n border-bottom: 1px solid #999999;\n\n .tags {\n padding-bottom: 2px;\n }\n input:focus {\n outline: none;\n }\n\n .input-filter {\n background: transparent;\n font-family: \'SFUIText-Medium\';\n position: relative;\n width: 100%;\n display: block;\n border: none;\n color: #999999;\n }\n .user-dropdown {\n background-color: rgb(18, 29, 41);\n margin-top: 5px;\n border: 1px solid rgb(153, 153, 153);\n max-height: 200px;\n overflow: auto;\n position: absolute;\n width: 92%;\n z-index: 2;\n cursor: pointer;\n }\n\n .dropdown-options {\n font-family: SFUIText-Regular;\n font-size: 13px;\n line-height: normal;\n color: rgb(204, 204, 204);\n padding: 7px;\n :hover {\n background-color: ', ';\n color: rgb(255, 255, 255);\n }\n &.active {\n background-color: ', ';\n color: rgb(255, 255, 255);\n :hover {\n background-color: rgb(18, 29, 41);\n color: rgb(204, 204, 204);\n }\n }\n }\n']);
|
|
16
16
|
|
|
17
|
-
var _react = require(
|
|
17
|
+
var _react = require('react');
|
|
18
18
|
|
|
19
19
|
var _react2 = _interopRequireDefault(_react);
|
|
20
20
|
|
|
21
|
-
var _styledComponents = require(
|
|
21
|
+
var _styledComponents = require('styled-components');
|
|
22
22
|
|
|
23
23
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
24
24
|
|
|
25
|
-
var _propTypes = require(
|
|
25
|
+
var _propTypes = require('prop-types');
|
|
26
26
|
|
|
27
27
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
28
28
|
|
|
29
|
-
var _lodash = require(
|
|
29
|
+
var _lodash = require('lodash');
|
|
30
30
|
|
|
31
|
-
var
|
|
31
|
+
var _tokens = require('@desynova-digital/tokens');
|
|
32
|
+
|
|
33
|
+
var _button = require('../../atoms/button');
|
|
32
34
|
|
|
33
35
|
var _button2 = _interopRequireDefault(_button);
|
|
34
36
|
|
|
35
|
-
var _datePicker = require(
|
|
37
|
+
var _datePicker = require('../../atoms/datePicker');
|
|
36
38
|
|
|
37
39
|
var _datePicker2 = _interopRequireDefault(_datePicker);
|
|
38
40
|
|
|
39
|
-
var _tag = require(
|
|
41
|
+
var _tag = require('../../atoms/tag');
|
|
40
42
|
|
|
41
43
|
var _tag2 = _interopRequireDefault(_tag);
|
|
42
44
|
|
|
43
|
-
var _icon = require(
|
|
45
|
+
var _icon = require('../../atoms/icon');
|
|
44
46
|
|
|
45
47
|
var _icon2 = _interopRequireDefault(_icon);
|
|
46
48
|
|
|
47
|
-
var _constants = require(
|
|
49
|
+
var _constants = require('./constants');
|
|
48
50
|
|
|
49
51
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
50
52
|
|
|
@@ -63,20 +65,46 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
|
|
|
63
65
|
var StyledFilterCompoment = _styledComponents2.default.div(_templateObject, function (_ref) {
|
|
64
66
|
var isMenuOpen = _ref.isMenuOpen;
|
|
65
67
|
return isMenuOpen ? '95' : '1';
|
|
68
|
+
}, function (props) {
|
|
69
|
+
return _tokens.colors[props.theme].filter.themeColor;
|
|
66
70
|
}, function (_ref2) {
|
|
67
71
|
var showSelectedFiltersAsChip = _ref2.showSelectedFiltersAsChip;
|
|
68
72
|
return showSelectedFiltersAsChip ? '360px' : '30px';
|
|
73
|
+
}, function (props) {
|
|
74
|
+
return _tokens.colors[props.theme].filter.themeColor;
|
|
75
|
+
}, function (props) {
|
|
76
|
+
return _tokens.colors[props.theme].filter.themeColor;
|
|
77
|
+
}, function (props) {
|
|
78
|
+
return _tokens.colors[props.theme].filter.lightthemeColor;
|
|
79
|
+
}, function (props) {
|
|
80
|
+
return _tokens.colors[props.theme].filter.lightthemeColor;
|
|
81
|
+
}, function (props) {
|
|
82
|
+
return _tokens.colors[props.theme].filter.lightthemeColor;
|
|
83
|
+
}, function (props) {
|
|
84
|
+
return _tokens.colors[props.theme].filter.lightthemeColor;
|
|
85
|
+
}, function (props) {
|
|
86
|
+
return _tokens.colors[props.theme].filter.lightthemeColor;
|
|
69
87
|
});
|
|
70
88
|
|
|
71
|
-
var ApplyBtn = (0, _styledComponents2.default)(_button2.default)(_templateObject2)
|
|
72
|
-
|
|
89
|
+
var ApplyBtn = (0, _styledComponents2.default)(_button2.default)(_templateObject2, function (props) {
|
|
90
|
+
return _tokens.colors[props.theme].filter.themeColor;
|
|
91
|
+
});
|
|
92
|
+
var ResetBtn = (0, _styledComponents2.default)(_button2.default)(_templateObject3, function (props) {
|
|
93
|
+
return _tokens.colors[props.theme].filter.themeColor;
|
|
94
|
+
}, function (props) {
|
|
95
|
+
return _tokens.colors[props.theme].filter.themeColor;
|
|
96
|
+
});
|
|
73
97
|
|
|
74
98
|
var OverlayStyles = _styledComponents2.default.div(_templateObject4, function (_ref3) {
|
|
75
99
|
var isMenuOpen = _ref3.isMenuOpen;
|
|
76
100
|
return isMenuOpen ? '94' : '0';
|
|
77
101
|
});
|
|
78
102
|
|
|
79
|
-
var UserIdDropdown = _styledComponents2.default.div(_templateObject5)
|
|
103
|
+
var UserIdDropdown = _styledComponents2.default.div(_templateObject5, function (props) {
|
|
104
|
+
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
105
|
+
}, function (props) {
|
|
106
|
+
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
107
|
+
});
|
|
80
108
|
|
|
81
109
|
var Filter = function (_Component) {
|
|
82
110
|
_inherits(Filter, _Component);
|
|
@@ -177,7 +205,7 @@ var Filter = function (_Component) {
|
|
|
177
205
|
selectedUserIds: updatedUserIds
|
|
178
206
|
});
|
|
179
207
|
var updatedUserid = updatedUserIds.reduce(function (updatedUserid, user) {
|
|
180
|
-
return user.email_id +
|
|
208
|
+
return user.email_id + ', ' + updatedUserid;
|
|
181
209
|
}, '');
|
|
182
210
|
filters[groupItem.field] = updatedUserIds;
|
|
183
211
|
filters.params[groupItem.field] = updatedUserid;
|
|
@@ -256,12 +284,12 @@ var Filter = function (_Component) {
|
|
|
256
284
|
|
|
257
285
|
var from = new Date(value ? value.fromDate : _constants.CURRENT_DATE);
|
|
258
286
|
var end = new Date(value ? value.toDate : _constants.CURRENT_DATE);
|
|
259
|
-
var fromattedFrom = _constants.MONTHS[from.getMonth()] +
|
|
260
|
-
var fromattedEnd = _constants.MONTHS[end.getMonth()] +
|
|
287
|
+
var fromattedFrom = _constants.MONTHS[from.getMonth()] + ' ' + from.getDate();
|
|
288
|
+
var fromattedEnd = _constants.MONTHS[end.getMonth()] + ' ' + end.getDate();
|
|
261
289
|
if (value.key === 'date_range' && !value.toDate && !value.fromDate) {
|
|
262
290
|
label = ' - ';
|
|
263
291
|
} else if (value.key === 'date_range' || value.key === 'week' || value.key === 'month' || value.key === 'three_month') {
|
|
264
|
-
label = fromattedFrom +
|
|
292
|
+
label = fromattedFrom + ' - ' + fromattedEnd;
|
|
265
293
|
} else {
|
|
266
294
|
label = fromattedEnd;
|
|
267
295
|
}
|
|
@@ -271,7 +299,7 @@ var Filter = function (_Component) {
|
|
|
271
299
|
}
|
|
272
300
|
}
|
|
273
301
|
|
|
274
|
-
return
|
|
302
|
+
return '' + (element.title === 'Date' ? '' : element.title + ': ') + label;
|
|
275
303
|
};
|
|
276
304
|
|
|
277
305
|
_this.toggleFiltersMenu = function (flag) {
|
|
@@ -404,26 +432,24 @@ var Filter = function (_Component) {
|
|
|
404
432
|
return _react2.default.createElement(
|
|
405
433
|
_react.Fragment,
|
|
406
434
|
null,
|
|
407
|
-
isMenuOpen && _react2.default.createElement(OverlayStyles, {
|
|
408
|
-
isMenuOpen: true,
|
|
409
|
-
onClick: function onClick() {
|
|
435
|
+
isMenuOpen && _react2.default.createElement(OverlayStyles, { isMenuOpen: true, onClick: function onClick() {
|
|
410
436
|
return _this.toggleFiltersMenu(false);
|
|
411
|
-
}
|
|
412
|
-
}),
|
|
437
|
+
} }),
|
|
413
438
|
_react2.default.createElement(
|
|
414
439
|
StyledFilterCompoment,
|
|
415
440
|
{
|
|
441
|
+
theme: _this.props.theme,
|
|
416
442
|
isMenuOpen: isMenuOpen,
|
|
417
443
|
showSelectedFiltersAsChip: showSelectedFiltersAsChip
|
|
418
444
|
},
|
|
419
445
|
_react2.default.createElement(
|
|
420
|
-
|
|
446
|
+
'div',
|
|
421
447
|
null,
|
|
422
448
|
_react2.default.createElement(
|
|
423
|
-
|
|
449
|
+
'div',
|
|
424
450
|
{
|
|
425
|
-
role:
|
|
426
|
-
className:
|
|
451
|
+
role: 'presentation',
|
|
452
|
+
className: 'search-filter-list-box',
|
|
427
453
|
onClick: function onClick() {
|
|
428
454
|
_this.toggleFiltersMenu(!(isMenuOpen && !showSelectedFiltersAsChip));
|
|
429
455
|
_this.applyFilters('cancel');
|
|
@@ -435,41 +461,39 @@ var Filter = function (_Component) {
|
|
|
435
461
|
}
|
|
436
462
|
},
|
|
437
463
|
!showSelectedFiltersAsChip && _react2.default.createElement(
|
|
438
|
-
|
|
439
|
-
{
|
|
440
|
-
|
|
441
|
-
},
|
|
442
|
-
_react2.default.createElement(_icon2.default, { name: "filter", width: 16, height: 16, color: "#afb2ba" })
|
|
464
|
+
'div',
|
|
465
|
+
{ className: isMenuOpen ? 'filter-button active' : 'filter-button' },
|
|
466
|
+
_react2.default.createElement(_icon2.default, { name: 'filter', width: 16, height: 16, color: '#afb2ba' })
|
|
443
467
|
),
|
|
444
468
|
showSelectedFiltersAsChip && _react2.default.createElement(
|
|
445
469
|
_react.Fragment,
|
|
446
470
|
null,
|
|
447
471
|
_react2.default.createElement(
|
|
448
|
-
|
|
449
|
-
{ className:
|
|
472
|
+
'div',
|
|
473
|
+
{ className: 'filter-list-box' },
|
|
450
474
|
_react2.default.createElement(
|
|
451
|
-
|
|
475
|
+
'span',
|
|
452
476
|
{
|
|
453
477
|
style: {
|
|
454
|
-
color:
|
|
478
|
+
color: _tokens.colors[_this.props.theme].filter.lightthemeColor
|
|
455
479
|
}
|
|
456
480
|
},
|
|
457
|
-
|
|
481
|
+
'FILTERS'
|
|
458
482
|
),
|
|
459
483
|
_react2.default.createElement(
|
|
460
|
-
|
|
461
|
-
{ className:
|
|
484
|
+
'div',
|
|
485
|
+
{ className: 'list-holder' },
|
|
462
486
|
_react2.default.createElement(
|
|
463
|
-
|
|
487
|
+
'div',
|
|
464
488
|
null,
|
|
465
489
|
filtersStructure ? filtersStructure.slice(0, 2).map(function (item) {
|
|
466
490
|
return _react2.default.createElement(
|
|
467
491
|
_tag2.default,
|
|
468
492
|
{
|
|
469
493
|
key: item.text,
|
|
470
|
-
theme:
|
|
494
|
+
theme: _this.props.theme,
|
|
471
495
|
style: { cursor: 'pointer' },
|
|
472
|
-
className:
|
|
496
|
+
className: 'chip-button checked'
|
|
473
497
|
},
|
|
474
498
|
_this.renderFilterDisplayLabels(item)
|
|
475
499
|
);
|
|
@@ -477,10 +501,10 @@ var Filter = function (_Component) {
|
|
|
477
501
|
filtersStructure.length - 2 > 0 && _react2.default.createElement(
|
|
478
502
|
_tag2.default,
|
|
479
503
|
{
|
|
480
|
-
theme:
|
|
481
|
-
className:
|
|
504
|
+
theme: _this.props.theme,
|
|
505
|
+
className: 'chip-button checked'
|
|
482
506
|
},
|
|
483
|
-
|
|
507
|
+
'+ ' + (filtersStructure.length - 2)
|
|
484
508
|
)
|
|
485
509
|
)
|
|
486
510
|
)
|
|
@@ -489,39 +513,39 @@ var Filter = function (_Component) {
|
|
|
489
513
|
)
|
|
490
514
|
),
|
|
491
515
|
isMenuOpen && _react2.default.createElement(
|
|
492
|
-
|
|
493
|
-
{ className:
|
|
516
|
+
'div',
|
|
517
|
+
{ className: 'filter-options-holder', style: { width: width } },
|
|
494
518
|
filterMessage && _react2.default.createElement(
|
|
495
|
-
|
|
496
|
-
{ className:
|
|
519
|
+
'div',
|
|
520
|
+
{ className: 'filter-message' },
|
|
497
521
|
filterMessage
|
|
498
522
|
),
|
|
499
523
|
filtersStructure && selectedFiltersObj ? filtersStructure.map(function (groupItem) {
|
|
500
524
|
if (groupItem.display_format === 'input') {
|
|
501
525
|
return _react2.default.createElement(
|
|
502
|
-
|
|
503
|
-
{ className:
|
|
526
|
+
'div',
|
|
527
|
+
{ className: 'filter-group', key: groupItem.field },
|
|
504
528
|
_react2.default.createElement(
|
|
505
|
-
|
|
506
|
-
{ className:
|
|
529
|
+
'div',
|
|
530
|
+
{ className: 'filter-group-title' },
|
|
507
531
|
groupItem.title
|
|
508
532
|
),
|
|
509
533
|
_react2.default.createElement(
|
|
510
|
-
|
|
534
|
+
'div',
|
|
511
535
|
{ ref: _this._userFilter },
|
|
512
536
|
_react2.default.createElement(
|
|
513
537
|
UserIdDropdown,
|
|
514
|
-
|
|
538
|
+
{ theme: _this.props.theme },
|
|
515
539
|
selectedFiltersObj[groupItem.field] && selectedFiltersObj[groupItem.field].length > 0 && selectedFiltersObj[groupItem.field].map(function (user) {
|
|
516
540
|
return _react2.default.createElement(
|
|
517
|
-
|
|
518
|
-
{ className:
|
|
541
|
+
'div',
|
|
542
|
+
{ className: 'tags' },
|
|
519
543
|
_react2.default.createElement(
|
|
520
544
|
_tag2.default,
|
|
521
545
|
{
|
|
522
|
-
key:
|
|
523
|
-
theme:
|
|
524
|
-
className:
|
|
546
|
+
key: 'tag-' + user.user_id,
|
|
547
|
+
theme: _this.props.theme,
|
|
548
|
+
className: '',
|
|
525
549
|
onRemove: function onRemove(e) {
|
|
526
550
|
_this.onSelection(groupItem, user);
|
|
527
551
|
}
|
|
@@ -530,9 +554,9 @@ var Filter = function (_Component) {
|
|
|
530
554
|
)
|
|
531
555
|
);
|
|
532
556
|
}),
|
|
533
|
-
_react2.default.createElement(
|
|
534
|
-
className:
|
|
535
|
-
placeholder:
|
|
557
|
+
_react2.default.createElement('input', {
|
|
558
|
+
className: 'input-filter',
|
|
559
|
+
placeholder: 'Enter User Name',
|
|
536
560
|
ref: _this._userFilterInput,
|
|
537
561
|
onChange: function onChange(e) {
|
|
538
562
|
_this.handleDebounce(groupItem.permission, e.target.value);
|
|
@@ -544,11 +568,11 @@ var Filter = function (_Component) {
|
|
|
544
568
|
// onFocus={(e) => this.setState({showDropDownOptions: true})}
|
|
545
569
|
}),
|
|
546
570
|
userIdsList && userIdsList.length > 0 && showDropDownOptions && _this._userFilterInput.current.value.length > 1 && _react2.default.createElement(
|
|
547
|
-
|
|
548
|
-
{ className:
|
|
571
|
+
'div',
|
|
572
|
+
{ className: 'user-dropdown' },
|
|
549
573
|
userIdsList.map(function (user, index) {
|
|
550
574
|
return _react2.default.createElement(
|
|
551
|
-
|
|
575
|
+
'p',
|
|
552
576
|
{
|
|
553
577
|
className: _this.getClassName(user, index),
|
|
554
578
|
onClick: function onClick(e) {
|
|
@@ -564,25 +588,25 @@ var Filter = function (_Component) {
|
|
|
564
588
|
);
|
|
565
589
|
}
|
|
566
590
|
return _react2.default.createElement(
|
|
567
|
-
|
|
568
|
-
{ className:
|
|
591
|
+
'div',
|
|
592
|
+
{ className: 'filter-group', key: groupItem.field },
|
|
569
593
|
_react2.default.createElement(
|
|
570
|
-
|
|
571
|
-
{ className:
|
|
594
|
+
'div',
|
|
595
|
+
{ className: 'filter-group-title' },
|
|
572
596
|
groupItem.title
|
|
573
597
|
),
|
|
574
598
|
_react2.default.createElement(
|
|
575
|
-
|
|
576
|
-
{ className:
|
|
599
|
+
'div',
|
|
600
|
+
{ className: 'filter-group-item-list' },
|
|
577
601
|
groupItem.options.map(function (option) {
|
|
578
602
|
if (option.field === 'date') {
|
|
579
603
|
return _react2.default.createElement(_datePicker2.default, {
|
|
580
|
-
theme:
|
|
604
|
+
theme: _this.props.theme,
|
|
581
605
|
label: _react2.default.createElement(
|
|
582
606
|
_tag2.default,
|
|
583
607
|
{
|
|
584
608
|
key: option.field,
|
|
585
|
-
theme:
|
|
609
|
+
theme: _this.props.theme,
|
|
586
610
|
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
|
|
587
611
|
},
|
|
588
612
|
option.title
|
|
@@ -602,12 +626,11 @@ var Filter = function (_Component) {
|
|
|
602
626
|
var formattedFrom = new Date(date);
|
|
603
627
|
var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
|
|
604
628
|
|
|
605
|
-
|
|
606
629
|
filters[groupItem.field].value.fromDate = date;
|
|
607
630
|
filters[groupItem.field].value.toDate = date;
|
|
608
631
|
|
|
609
632
|
filters[groupItem.field].value.key = 'date';
|
|
610
|
-
filters[groupItem.field].label = date ? _constants.MONTHS[formattedFrom.getMonth()] +
|
|
633
|
+
filters[groupItem.field].label = date ? _constants.MONTHS[formattedFrom.getMonth()] + ' ' + formattedFrom.getDate() + ' ' : 'no selection';
|
|
611
634
|
_this.setState({ isSelectDateSelected: false }, function () {
|
|
612
635
|
_this.changeFilters('selected', filters);
|
|
613
636
|
});
|
|
@@ -618,12 +641,12 @@ var Filter = function (_Component) {
|
|
|
618
641
|
});
|
|
619
642
|
} else if (option.field === 'date_range') {
|
|
620
643
|
return _react2.default.createElement(_datePicker2.default, {
|
|
621
|
-
theme:
|
|
644
|
+
theme: _this.props.theme,
|
|
622
645
|
label: _react2.default.createElement(
|
|
623
646
|
_tag2.default,
|
|
624
647
|
{
|
|
625
648
|
key: option.field,
|
|
626
|
-
theme:
|
|
649
|
+
theme: _this.props.theme,
|
|
627
650
|
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
|
|
628
651
|
},
|
|
629
652
|
option.title
|
|
@@ -646,7 +669,7 @@ var Filter = function (_Component) {
|
|
|
646
669
|
filters[groupItem.field].value.fromDate = date.from;
|
|
647
670
|
filters[groupItem.field].value.toDate = date.to; // || CURRENT_DATE;
|
|
648
671
|
filters[groupItem.field].value.key = 'date_range';
|
|
649
|
-
filters[groupItem.field].label = date.from && date.to ? _constants.MONTHS[formattedFrom.getMonth()] +
|
|
672
|
+
filters[groupItem.field].label = date.from && date.to ? _constants.MONTHS[formattedFrom.getMonth()] + ' ' + formattedFrom.getDate() + ' - ' + _constants.MONTHS[formattedEnd.getMonth()] + ' ' + formattedEnd.getDate() : 'no selection';
|
|
650
673
|
_this.setState({ isSelectRangeSelected: false }, function () {
|
|
651
674
|
_this.changeFilters('selected', filters);
|
|
652
675
|
});
|
|
@@ -660,7 +683,7 @@ var Filter = function (_Component) {
|
|
|
660
683
|
_tag2.default,
|
|
661
684
|
{
|
|
662
685
|
key: option.field,
|
|
663
|
-
theme:
|
|
686
|
+
theme: _this.props.theme,
|
|
664
687
|
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option),
|
|
665
688
|
onClick: function onClick() {
|
|
666
689
|
// first range picker false then
|
|
@@ -677,7 +700,7 @@ var Filter = function (_Component) {
|
|
|
677
700
|
);
|
|
678
701
|
}) : null,
|
|
679
702
|
_react2.default.createElement(
|
|
680
|
-
|
|
703
|
+
'div',
|
|
681
704
|
{
|
|
682
705
|
style: {
|
|
683
706
|
margin: '15px 0px 0px',
|
|
@@ -688,27 +711,29 @@ var Filter = function (_Component) {
|
|
|
688
711
|
_react2.default.createElement(
|
|
689
712
|
ResetBtn,
|
|
690
713
|
{
|
|
691
|
-
|
|
714
|
+
theme: _this.props.theme,
|
|
715
|
+
appearance: 'cta',
|
|
692
716
|
onClick: function onClick() {
|
|
693
717
|
// this.toggleFiltersMenu(false);
|
|
694
718
|
_this.applyFilters('reset');
|
|
695
719
|
// this.changeFilters('reset', null);
|
|
696
720
|
}
|
|
697
721
|
},
|
|
698
|
-
|
|
722
|
+
'Reset'
|
|
699
723
|
),
|
|
700
724
|
_react2.default.createElement(
|
|
701
725
|
ApplyBtn,
|
|
702
726
|
{
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
727
|
+
theme: _this.props.theme,
|
|
728
|
+
id: 'apply-btn',
|
|
729
|
+
appearance: 'cta',
|
|
730
|
+
display: 'rounded',
|
|
706
731
|
onClick: function onClick() {
|
|
707
732
|
_this.applyFilters();
|
|
708
733
|
// this.toggleFiltersMenu(false);
|
|
709
734
|
}
|
|
710
735
|
},
|
|
711
|
-
|
|
736
|
+
'Apply'
|
|
712
737
|
)
|
|
713
738
|
)
|
|
714
739
|
)
|
|
@@ -731,17 +756,17 @@ var Filter = function (_Component) {
|
|
|
731
756
|
}
|
|
732
757
|
|
|
733
758
|
/**
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
759
|
+
* This function handle the onChange event in the filter.
|
|
760
|
+
* @param {Object} groupItem GUI elements for the particular section
|
|
761
|
+
* @param {Object} optionItem the item from the options of that section
|
|
762
|
+
*/
|
|
738
763
|
|
|
739
764
|
|
|
740
765
|
/**
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
766
|
+
* This function performs action based on forAction on filters object
|
|
767
|
+
* @param {String} forAction action performed on the filter object
|
|
768
|
+
* @param {Object} filters Object containing current filters selected values
|
|
769
|
+
*/
|
|
745
770
|
|
|
746
771
|
|
|
747
772
|
/**
|
|
@@ -752,7 +777,7 @@ var Filter = function (_Component) {
|
|
|
752
777
|
|
|
753
778
|
|
|
754
779
|
_createClass(Filter, [{
|
|
755
|
-
key:
|
|
780
|
+
key: 'onKeyDown',
|
|
756
781
|
|
|
757
782
|
|
|
758
783
|
/**
|
|
@@ -809,12 +834,12 @@ var Filter = function (_Component) {
|
|
|
809
834
|
|
|
810
835
|
|
|
811
836
|
/**
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
837
|
+
* This function toggle filters menu - show & hide.
|
|
838
|
+
* @param {boolean} flag contains value true/false to show/ hide filter.
|
|
839
|
+
*/
|
|
815
840
|
|
|
816
841
|
}, {
|
|
817
|
-
key:
|
|
842
|
+
key: 'componentDidMount',
|
|
818
843
|
value: function componentDidMount() {
|
|
819
844
|
document.body.addEventListener('click', this.toggleDropDown);
|
|
820
845
|
}
|
|
@@ -848,6 +873,7 @@ var Filter = function (_Component) {
|
|
|
848
873
|
}(_react.Component);
|
|
849
874
|
|
|
850
875
|
Filter.propTypes = {
|
|
876
|
+
theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
|
|
851
877
|
applyFilters: _propTypes2.default.func,
|
|
852
878
|
initialFilters: _propTypes2.default.instanceOf(Object),
|
|
853
879
|
selectedFilters: _propTypes2.default.instanceOf(Object),
|
|
@@ -858,7 +884,8 @@ Filter.propTypes = {
|
|
|
858
884
|
};
|
|
859
885
|
|
|
860
886
|
Filter.defaultProps = {
|
|
861
|
-
width: '360px'
|
|
887
|
+
width: '360px',
|
|
888
|
+
theme: 'light'
|
|
862
889
|
};
|
|
863
890
|
|
|
864
891
|
exports.default = Filter;
|