@desynova-digital/components 8.14.4 → 8.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/atoms/icon/icons.json +1374 -1275
- package/atoms/label/label.js +2 -2
- package/molecules/carousel/carousel.js +2 -2
- package/molecules/filter/filter.js +97 -46
- package/molecules/filter/filter.story.js +3 -0
- package/package.json +2 -2
package/atoms/label/label.js
CHANGED
|
@@ -37,12 +37,12 @@ var LABEL_STYLES = [{
|
|
|
37
37
|
color: "#FFF"
|
|
38
38
|
}
|
|
39
39
|
}, {
|
|
40
|
-
code: ["in_queue", "running", "verifying", "approval_pending"],
|
|
40
|
+
code: ["in_queue", "inqueue", "running", "verifying", "approval_pending"],
|
|
41
41
|
hex: {
|
|
42
42
|
background: "#F9E900"
|
|
43
43
|
}
|
|
44
44
|
}, {
|
|
45
|
-
code: ["finished", "archived", "restored", "approved", "upload_finished", "delivered", "ingested", "tagged"],
|
|
45
|
+
code: ["finished", "archived", "restored", "approved", "success", "complete", "upload_finished", "delivered", "ingested", "tagged"],
|
|
46
46
|
hex: {
|
|
47
47
|
background: "#18B96E"
|
|
48
48
|
}
|
|
@@ -247,7 +247,7 @@ var Carousel = function (_React$Component) {
|
|
|
247
247
|
{ className: "carousel-header-right" },
|
|
248
248
|
this.props.rightPart
|
|
249
249
|
)
|
|
250
|
-
) : _react2.default.createElement(
|
|
250
|
+
) : addNew || totalEntries || headerTitle ? _react2.default.createElement(
|
|
251
251
|
"div",
|
|
252
252
|
null,
|
|
253
253
|
_react2.default.createElement(
|
|
@@ -260,7 +260,7 @@ var Carousel = function (_React$Component) {
|
|
|
260
260
|
{ className: "child-count" },
|
|
261
261
|
addNew ? totalEntries - 1 : totalEntries
|
|
262
262
|
)
|
|
263
|
-
)
|
|
263
|
+
) : null
|
|
264
264
|
),
|
|
265
265
|
_react2.default.createElement(
|
|
266
266
|
CarouselBlock,
|
|
@@ -140,6 +140,11 @@ var Filter = function (_Component) {
|
|
|
140
140
|
filters[groupItem.field].value.fromDate = selectedFiltersObj[groupItem.field].value.fromDate;
|
|
141
141
|
filters[groupItem.field].value.toDate = selectedFiltersObj[groupItem.field].value.toDate;
|
|
142
142
|
});
|
|
143
|
+
} else if (optionItem.field === 'date') {
|
|
144
|
+
_this.setState({ isSelectDateSelected: true }, function () {
|
|
145
|
+
filters[groupItem.field].value.fromDate = selectedFiltersObj[groupItem.field].value.fromDate;
|
|
146
|
+
filters[groupItem.field].value.toDate = selectedFiltersObj[groupItem.field].value.toDate;
|
|
147
|
+
});
|
|
143
148
|
} else if (optionItem.field === 'week') {
|
|
144
149
|
filters[groupItem.field].value.fromDate = _constants.WEEK_DATE;
|
|
145
150
|
filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
|
|
@@ -393,6 +398,7 @@ var Filter = function (_Component) {
|
|
|
393
398
|
isMenuOpen = _this$state4.isMenuOpen,
|
|
394
399
|
selectedFiltersObj = _this$state4.selectedFiltersObj,
|
|
395
400
|
isSelectRangeSelected = _this$state4.isSelectRangeSelected,
|
|
401
|
+
isSelectDateSelected = _this$state4.isSelectDateSelected,
|
|
396
402
|
showDropDownOptions = _this$state4.showDropDownOptions;
|
|
397
403
|
|
|
398
404
|
return _react2.default.createElement(
|
|
@@ -569,58 +575,103 @@ var Filter = function (_Component) {
|
|
|
569
575
|
"div",
|
|
570
576
|
{ className: "filter-group-item-list" },
|
|
571
577
|
groupItem.options.map(function (option) {
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
578
|
+
if (option.field === 'date') {
|
|
579
|
+
return _react2.default.createElement(_datePicker2.default, {
|
|
580
|
+
theme: "dark",
|
|
581
|
+
label: _react2.default.createElement(
|
|
582
|
+
_tag2.default,
|
|
583
|
+
{
|
|
584
|
+
key: option.field,
|
|
585
|
+
theme: "dark",
|
|
586
|
+
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
|
|
587
|
+
},
|
|
588
|
+
option.title
|
|
589
|
+
),
|
|
590
|
+
className: _this.highlightSelectedFilters(groupItem, option),
|
|
591
|
+
labelAsText: true,
|
|
592
|
+
minDate: isSelectDateSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
|
|
593
|
+
maxDate: _this.getMaxDate(option, groupItem),
|
|
594
|
+
datepickerStep: 2,
|
|
595
|
+
selected:
|
|
596
|
+
// previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
|
|
597
|
+
selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.fromDate] : []
|
|
598
|
+
// )
|
|
599
|
+
,
|
|
600
|
+
onSelectionChange: function onSelectionChange(date) {
|
|
601
|
+
var filters = _extends({}, selectedFiltersObj);
|
|
602
|
+
var formattedFrom = new Date(date);
|
|
603
|
+
var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
|
|
604
|
+
|
|
605
|
+
|
|
606
|
+
filters[groupItem.field].value.fromDate = date;
|
|
607
|
+
filters[groupItem.field].value.toDate = date;
|
|
608
|
+
|
|
609
|
+
filters[groupItem.field].value.key = 'date';
|
|
610
|
+
filters[groupItem.field].label = date ? _constants.MONTHS[formattedFrom.getMonth()] + " " + formattedFrom.getDate() + " " : 'no selection';
|
|
611
|
+
_this.setState({ isSelectDateSelected: false }, function () {
|
|
612
|
+
_this.changeFilters('selected', filters);
|
|
613
|
+
});
|
|
614
|
+
},
|
|
615
|
+
onCalendarOpen: function onCalendarOpen() {
|
|
616
|
+
_this.onSelection(groupItem, option);
|
|
617
|
+
}
|
|
618
|
+
});
|
|
619
|
+
} else if (option.field === 'date_range') {
|
|
620
|
+
return _react2.default.createElement(_datePicker2.default, {
|
|
621
|
+
theme: "dark",
|
|
622
|
+
label: _react2.default.createElement(
|
|
623
|
+
_tag2.default,
|
|
624
|
+
{
|
|
625
|
+
key: option.field,
|
|
626
|
+
theme: "dark",
|
|
627
|
+
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
|
|
628
|
+
},
|
|
629
|
+
option.title
|
|
630
|
+
),
|
|
631
|
+
className: _this.highlightSelectedFilters(groupItem, option),
|
|
632
|
+
labelAsText: true,
|
|
633
|
+
rangePicker: true,
|
|
634
|
+
minDate: isSelectRangeSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
|
|
635
|
+
maxDate: _this.getMaxDate(option, groupItem),
|
|
636
|
+
datepickerStep: 2,
|
|
637
|
+
selected:
|
|
638
|
+
// previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
|
|
639
|
+
selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.toDate] : []
|
|
640
|
+
// )
|
|
641
|
+
,
|
|
642
|
+
onSelectionChange: function onSelectionChange(date) {
|
|
643
|
+
var filters = _extends({}, selectedFiltersObj);
|
|
644
|
+
var formattedFrom = date.from ? new Date(date.from) : null;
|
|
645
|
+
var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
|
|
646
|
+
filters[groupItem.field].value.fromDate = date.from;
|
|
647
|
+
filters[groupItem.field].value.toDate = date.to; // || CURRENT_DATE;
|
|
648
|
+
filters[groupItem.field].value.key = 'date_range';
|
|
649
|
+
filters[groupItem.field].label = date.from && date.to ? _constants.MONTHS[formattedFrom.getMonth()] + " " + formattedFrom.getDate() + " - " + _constants.MONTHS[formattedEnd.getMonth()] + " " + formattedEnd.getDate() : 'no selection';
|
|
650
|
+
_this.setState({ isSelectRangeSelected: false }, function () {
|
|
651
|
+
_this.changeFilters('selected', filters);
|
|
652
|
+
});
|
|
653
|
+
},
|
|
654
|
+
onCalendarOpen: function onCalendarOpen() {
|
|
655
|
+
_this.onSelection(groupItem, option);
|
|
656
|
+
}
|
|
657
|
+
});
|
|
658
|
+
} else {
|
|
659
|
+
return _react2.default.createElement(
|
|
575
660
|
_tag2.default,
|
|
576
661
|
{
|
|
577
662
|
key: option.field,
|
|
578
663
|
theme: "dark",
|
|
579
|
-
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
|
|
664
|
+
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option),
|
|
665
|
+
onClick: function onClick() {
|
|
666
|
+
// first range picker false then
|
|
667
|
+
_this.setState({ isRangePickerVisible: false }, function () {
|
|
668
|
+
_this.onSelection(groupItem, option);
|
|
669
|
+
});
|
|
670
|
+
}
|
|
580
671
|
},
|
|
581
672
|
option.title
|
|
582
|
-
)
|
|
583
|
-
|
|
584
|
-
labelAsText: true,
|
|
585
|
-
rangePicker: true,
|
|
586
|
-
minDate: isSelectRangeSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
|
|
587
|
-
maxDate: _this.getMaxDate(option, groupItem),
|
|
588
|
-
datepickerStep: 2,
|
|
589
|
-
selected:
|
|
590
|
-
// previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
|
|
591
|
-
selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.toDate] : []
|
|
592
|
-
// )
|
|
593
|
-
,
|
|
594
|
-
onSelectionChange: function onSelectionChange(date) {
|
|
595
|
-
var filters = _extends({}, selectedFiltersObj);
|
|
596
|
-
var formattedFrom = date.from ? new Date(date.from) : null;
|
|
597
|
-
var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
|
|
598
|
-
filters[groupItem.field].value.fromDate = date.from;
|
|
599
|
-
filters[groupItem.field].value.toDate = date.to; // || CURRENT_DATE;
|
|
600
|
-
filters[groupItem.field].value.key = 'date_range';
|
|
601
|
-
filters[groupItem.field].label = date.from && date.to ? _constants.MONTHS[formattedFrom.getMonth()] + " " + formattedFrom.getDate() + " - " + _constants.MONTHS[formattedEnd.getMonth()] + " " + formattedEnd.getDate() : 'no selection';
|
|
602
|
-
_this.setState({ isSelectRangeSelected: false }, function () {
|
|
603
|
-
_this.changeFilters('selected', filters);
|
|
604
|
-
});
|
|
605
|
-
},
|
|
606
|
-
onCalendarOpen: function onCalendarOpen() {
|
|
607
|
-
_this.onSelection(groupItem, option);
|
|
608
|
-
}
|
|
609
|
-
}) : _react2.default.createElement(
|
|
610
|
-
_tag2.default,
|
|
611
|
-
{
|
|
612
|
-
key: option.field,
|
|
613
|
-
theme: "dark",
|
|
614
|
-
className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option),
|
|
615
|
-
onClick: function onClick() {
|
|
616
|
-
// first range picker false then
|
|
617
|
-
_this.setState({ isRangePickerVisible: false }, function () {
|
|
618
|
-
_this.onSelection(groupItem, option);
|
|
619
|
-
});
|
|
620
|
-
}
|
|
621
|
-
},
|
|
622
|
-
option.title
|
|
623
|
-
);
|
|
673
|
+
);
|
|
674
|
+
}
|
|
624
675
|
})
|
|
625
676
|
)
|
|
626
677
|
);
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.15.1",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "8.
|
|
10
|
+
"@desynova-digital/tokens": "8.15.1",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|