@desynova-digital/components 8.16.0 → 8.17.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/cardV2/content.js
CHANGED
|
@@ -12,7 +12,7 @@ var _templateObject = _taggedTemplateLiteral(["\n display: -webkit-box;\n -web
|
|
|
12
12
|
_templateObject2 = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"], ["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"]),
|
|
13
13
|
_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"], ["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"]),
|
|
14
14
|
_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"], ["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"]),
|
|
15
|
-
_templateObject5 = _taggedTemplateLiteral(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:
|
|
15
|
+
_templateObject5 = _taggedTemplateLiteral(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:165px;\n overflow:scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n \n .divider{\n height:1px;\n width:100%;\n margin:10px 0;\n background:#303F51;\n }\n .header-container{\n display:flex;\n position:relative;\n .thumbnail{\n width:100px;\n height:55px;\n background-size:cover !important;\n background-repeat:no-repeat !important;\n margin-right:10px;\n border-radius:2px;\n }\n .episod-title{\n font-size:12px;\n margin-bottom:8px;\n max-width:180px;\n line-height:14px;\n color:#fff;\n }\n .episod-details{\n font-size:10px;\n color:#AFB2BA;\n }\n }\n \n .overlappig-popup-title{\n font-size: 12px;\n line-height: 12px;\n color: #AFB2BA;\n margin-bottom:15px;\n }\n }\n }\n \n\n\n :hover{\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"], ["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:165px;\n overflow:scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n \n .divider{\n height:1px;\n width:100%;\n margin:10px 0;\n background:#303F51;\n }\n .header-container{\n display:flex;\n position:relative;\n .thumbnail{\n width:100px;\n height:55px;\n background-size:cover !important;\n background-repeat:no-repeat !important;\n margin-right:10px;\n border-radius:2px;\n }\n .episod-title{\n font-size:12px;\n margin-bottom:8px;\n max-width:180px;\n line-height:14px;\n color:#fff;\n }\n .episod-details{\n font-size:10px;\n color:#AFB2BA;\n }\n }\n \n .overlappig-popup-title{\n font-size: 12px;\n line-height: 12px;\n color: #AFB2BA;\n margin-bottom:15px;\n }\n }\n }\n \n\n\n :hover{\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"]);
|
|
16
16
|
|
|
17
17
|
var _react = require("react");
|
|
18
18
|
|
package/atoms/sideBar/sidebar.js
CHANGED
|
@@ -9,8 +9,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|
|
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
11
|
var _templateObject = _taggedTemplateLiteral(['\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.5);\n z-index: 100;\n visibility: ', ';\n'], ['\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.5);\n z-index: 100;\n visibility: ', ';\n']),
|
|
12
|
-
_templateObject2 = _taggedTemplateLiteral(['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n'], ['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n']),
|
|
13
|
-
_templateObject3 = _taggedTemplateLiteral(['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n'], ['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n']);
|
|
12
|
+
_templateObject2 = _taggedTemplateLiteral(['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n\n .ball{\n background-color:#151717\n }\n\n .circle{\n border:4px solid #1d2020;\n height:10px;\n width:10px\n }\n\n div.loader-holder > div{\n height:20px;\n margin-left:5px;\n }\n\n .parentBox{\n width:18px;\n height:18px;\n }\n\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n'], ['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n\n .ball{\n background-color:#151717\n }\n\n .circle{\n border:4px solid #1d2020;\n height:10px;\n width:10px\n }\n\n div.loader-holder > div{\n height:20px;\n margin-left:5px;\n }\n\n .parentBox{\n width:18px;\n height:18px;\n }\n\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n']),
|
|
13
|
+
_templateObject3 = _taggedTemplateLiteral(['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n display:flex;\n justify-content:center;\n align-items:center;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n'], ['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n display:flex;\n justify-content:center;\n align-items:center;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n']);
|
|
14
14
|
|
|
15
15
|
var _react = require('react');
|
|
16
16
|
|
|
@@ -28,6 +28,8 @@ var _index = require('../button/index');
|
|
|
28
28
|
|
|
29
29
|
var _index2 = _interopRequireDefault(_index);
|
|
30
30
|
|
|
31
|
+
var _components = require('../../components');
|
|
32
|
+
|
|
31
33
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
32
34
|
|
|
33
35
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
@@ -96,7 +98,8 @@ var SideBar = function (_Component) {
|
|
|
96
98
|
title = _props.title,
|
|
97
99
|
content = _props.content,
|
|
98
100
|
sideBarButtonObject = _props.sideBarButtonObject,
|
|
99
|
-
showSideBar = _props.showSideBar
|
|
101
|
+
showSideBar = _props.showSideBar,
|
|
102
|
+
loadingBtn = _props.loadingBtn;
|
|
100
103
|
|
|
101
104
|
|
|
102
105
|
return _react2.default.createElement(
|
|
@@ -143,7 +146,8 @@ var SideBar = function (_Component) {
|
|
|
143
146
|
_this2.buttonClick(object.field);
|
|
144
147
|
}
|
|
145
148
|
},
|
|
146
|
-
object.title
|
|
149
|
+
object.title,
|
|
150
|
+
object.isLoading ? _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader' }) : null
|
|
147
151
|
);
|
|
148
152
|
})
|
|
149
153
|
)
|
|
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import Button from '../button/index';
|
|
5
|
-
|
|
5
|
+
import { Loader } from '../../components'
|
|
6
6
|
|
|
7
7
|
const SideBarOverlay = styled.div`
|
|
8
8
|
position: fixed;
|
|
@@ -12,7 +12,7 @@ const SideBarOverlay = styled.div`
|
|
|
12
12
|
left: 0;
|
|
13
13
|
background: rgba(0,0,0,0.5);
|
|
14
14
|
z-index: 100;
|
|
15
|
-
visibility: ${(
|
|
15
|
+
visibility: ${((props) => props.open ? 'visible' : 'hidden')};
|
|
16
16
|
`;
|
|
17
17
|
|
|
18
18
|
const SideBarBlock = styled.div`
|
|
@@ -27,6 +27,27 @@ const SideBarBlock = styled.div`
|
|
|
27
27
|
width:0px;
|
|
28
28
|
|
|
29
29
|
transition: width 250ms ease-in-out;
|
|
30
|
+
|
|
31
|
+
.ball{
|
|
32
|
+
background-color:#151717
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.circle{
|
|
36
|
+
border:4px solid #1d2020;
|
|
37
|
+
height:10px;
|
|
38
|
+
width:10px
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
div.loader-holder > div{
|
|
42
|
+
height:20px;
|
|
43
|
+
margin-left:5px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.parentBox{
|
|
47
|
+
width:18px;
|
|
48
|
+
height:18px;
|
|
49
|
+
}
|
|
50
|
+
|
|
30
51
|
&.open{
|
|
31
52
|
width:400px;
|
|
32
53
|
.sidebar-header, .bodyContainer, .button-container {
|
|
@@ -102,6 +123,9 @@ const ButtonContainer = styled.div`
|
|
|
102
123
|
margin: 0 10px;
|
|
103
124
|
max-width: 150px;
|
|
104
125
|
cursor: pointer;
|
|
126
|
+
display:flex;
|
|
127
|
+
justify-content:center;
|
|
128
|
+
align-items:center;
|
|
105
129
|
|
|
106
130
|
:hover{
|
|
107
131
|
color: #00CEC6;
|
|
@@ -126,7 +150,7 @@ const ButtonContainer = styled.div`
|
|
|
126
150
|
box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
|
|
127
151
|
}
|
|
128
152
|
}
|
|
129
|
-
`;
|
|
153
|
+
`;
|
|
130
154
|
|
|
131
155
|
/**
|
|
132
156
|
* @component
|
|
@@ -138,7 +162,7 @@ export default class SideBar extends Component {
|
|
|
138
162
|
super(props);
|
|
139
163
|
this.state = {
|
|
140
164
|
show: false,
|
|
141
|
-
renderFlag:false
|
|
165
|
+
renderFlag: false
|
|
142
166
|
};
|
|
143
167
|
}
|
|
144
168
|
componentDidMount = () => {
|
|
@@ -146,7 +170,7 @@ export default class SideBar extends Component {
|
|
|
146
170
|
renderFlag: true
|
|
147
171
|
})
|
|
148
172
|
}
|
|
149
|
-
|
|
173
|
+
|
|
150
174
|
cancelClick() {
|
|
151
175
|
const { onCancelClick } = this.props;
|
|
152
176
|
onCancelClick();
|
|
@@ -160,45 +184,48 @@ export default class SideBar extends Component {
|
|
|
160
184
|
})
|
|
161
185
|
}
|
|
162
186
|
render() {
|
|
163
|
-
const { title, content, sideBarButtonObject, showSideBar } = this.props;
|
|
164
|
-
|
|
187
|
+
const { title, content, sideBarButtonObject, showSideBar, loadingBtn } = this.props;
|
|
188
|
+
|
|
165
189
|
return (
|
|
166
190
|
<React.Fragment>
|
|
167
191
|
<SideBarOverlay open={showSideBar} />
|
|
168
|
-
<SideBarBlock className={showSideBar ? 'open':'close'}>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
192
|
+
<SideBarBlock className={showSideBar ? 'open' : 'close'}>
|
|
193
|
+
<div className="sidebar-header">
|
|
194
|
+
<p className="header-title">{title}</p>
|
|
195
|
+
<Button
|
|
196
|
+
appearance="cta"
|
|
197
|
+
iconWidth={12}
|
|
198
|
+
iconHeight={12}
|
|
199
|
+
icon="cross"
|
|
200
|
+
iconBackground={false}
|
|
201
|
+
onClick={() => {
|
|
202
|
+
this.buttonClick('cancel');
|
|
203
|
+
}}
|
|
204
|
+
/>
|
|
205
|
+
</div>
|
|
206
|
+
<div className="bodyContainer">
|
|
207
|
+
{content}
|
|
208
|
+
</div>
|
|
209
|
+
<ButtonContainer className="button-container" >
|
|
210
|
+
{
|
|
211
|
+
sideBarButtonObject.map((object) => {
|
|
212
|
+
return (
|
|
213
|
+
<div
|
|
214
|
+
key={object.field}
|
|
215
|
+
className={`btn ${object.type || 'default'}`}
|
|
216
|
+
onClick={() => { this.buttonClick(object.field) }}
|
|
217
|
+
>
|
|
218
|
+
{object.title}
|
|
219
|
+
{object.isLoading ?
|
|
220
|
+
<Loader theme="dark" loaderName='SpinningLoader' />
|
|
221
|
+
: null}
|
|
222
|
+
</div>
|
|
223
|
+
)
|
|
224
|
+
})
|
|
225
|
+
}
|
|
226
|
+
</ButtonContainer>
|
|
227
|
+
|
|
228
|
+
</SideBarBlock>
|
|
202
229
|
</React.Fragment>
|
|
203
230
|
);
|
|
204
231
|
}
|
|
@@ -207,7 +234,7 @@ export default class SideBar extends Component {
|
|
|
207
234
|
SideBar.propTypes = {
|
|
208
235
|
showSideBar: PropTypes.bool,
|
|
209
236
|
title: PropTypes.string,
|
|
210
|
-
content: PropTypes.object,
|
|
237
|
+
content: PropTypes.object,
|
|
211
238
|
sideBarButtonObject: PropTypes.object,
|
|
212
239
|
onCancelClick: PropTypes.func,
|
|
213
240
|
onButtonClick: PropTypes.func
|
|
@@ -271,7 +271,7 @@ var Filter = function (_Component) {
|
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
|
|
274
|
-
return "" + (element.title === 'Date' ? '' : element.title + "
|
|
274
|
+
return "" + (element.title === 'Date' ? '' : element.title + ": ") + label;
|
|
275
275
|
};
|
|
276
276
|
|
|
277
277
|
_this.toggleFiltersMenu = function (flag) {
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.17.0",
|
|
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.17.0",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|