@desynova-digital/components 9.0.21 → 9.0.23
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.
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
|
8
8
|
|
|
9
9
|
var _templateObject = _taggedTemplateLiteral(['\n background: rgba(0, 0, 0, 0.5);\n'], ['\n background: rgba(0, 0, 0, 0.5);\n']),
|
|
10
|
-
_templateObject2 = _taggedTemplateLiteral(['\n position: relative;\n background: ', ';\n background-size:
|
|
10
|
+
_templateObject2 = _taggedTemplateLiteral(['\n position: relative;\n background: ', ';\n background-color:', ';\n background-size: ', ';\n width: ', ';\n height: ', ';\n\n .iframe-image-block {\n cursor: ', ';\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n }\n .background-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n overflow: hidden;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n .thumbnail-image-block {\n cursor: pointer;\n background: #182738;\n }\n'], ['\n position: relative;\n background: ', ';\n background-color:', ';\n background-size: ', ';\n width: ', ';\n height: ', ';\n\n .iframe-image-block {\n cursor: ', ';\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n }\n .background-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n overflow: hidden;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n .thumbnail-image-block {\n cursor: pointer;\n background: #182738;\n }\n']),
|
|
11
11
|
_templateObject3 = _taggedTemplateLiteral(['\n z-index: 2;\n .uploadWrapper {\n border-radius: 50%;\n background: ', ';\n\n color: ', ';\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n .wrapper {\n font-size: 10px;\n font-family: \'SFUIText-Regular\';\n line-height: 1.1;\n text-transform: uppercase;\n }\n }\n'], ['\n z-index: 2;\n .uploadWrapper {\n border-radius: 50%;\n background: ', ';\n\n color: ', ';\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n .wrapper {\n font-size: 10px;\n font-family: \'SFUIText-Regular\';\n line-height: 1.1;\n text-transform: uppercase;\n }\n }\n']),
|
|
12
12
|
_templateObject4 = _taggedTemplateLiteral(['\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ', ';\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ', ';\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n'], ['\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ', ';\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ', ';\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n']),
|
|
13
13
|
_templateObject5 = _taggedTemplateLiteral(['\n ', ';\n\n .tooltip {\n position: absolute;\n bottom: 130%;\n left: 30%;\n transform: translateX(-50%);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color: #fff;\n border-radius: 10px;\n visibility: hidden;\n opacity: 0;\n z-index: 10;\n transition: all 350ms ease-in-out 0s;\n &:after {\n content: \'\';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #000;\n bottom: -5px;\n left: 50%;\n }\n .details-header {\n color: #666666;\n font-family: \'SFUIText-Regular\';\n text-transform: none;\n margin-bottom: 8px;\n }\n .details-value {\n color: #999999;\n font-family: \'SFUIText-Light\';\n text-transform: none;\n font-size: 10px;\n }\n }\n\n &:hover {\n background-color: ', ';\n .tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n'], ['\n ', ';\n\n .tooltip {\n position: absolute;\n bottom: 130%;\n left: 30%;\n transform: translateX(-50%);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color: #fff;\n border-radius: 10px;\n visibility: hidden;\n opacity: 0;\n z-index: 10;\n transition: all 350ms ease-in-out 0s;\n &:after {\n content: \'\';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #000;\n bottom: -5px;\n left: 50%;\n }\n .details-header {\n color: #666666;\n font-family: \'SFUIText-Regular\';\n text-transform: none;\n margin-bottom: 8px;\n }\n .details-value {\n color: #999999;\n font-family: \'SFUIText-Light\';\n text-transform: none;\n font-size: 10px;\n }\n }\n\n &:hover {\n background-color: ', ';\n .tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n']),
|
|
@@ -49,17 +49,33 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
|
|
|
49
49
|
|
|
50
50
|
var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject);
|
|
51
51
|
|
|
52
|
+
var assetStyles = {
|
|
53
|
+
"folder": {
|
|
54
|
+
backgroundColor: '#121D29',
|
|
55
|
+
backgroundSize: 'inherit'
|
|
56
|
+
},
|
|
57
|
+
"asset": {
|
|
58
|
+
backgroundColor: 'inherit',
|
|
59
|
+
backgroundSize: 'cover' }
|
|
60
|
+
};
|
|
61
|
+
|
|
52
62
|
var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function (_ref) {
|
|
53
63
|
var thumbnail = _ref.thumbnail;
|
|
54
64
|
return 'url(' + thumbnail + ') no-repeat 50%';
|
|
55
65
|
}, function (_ref2) {
|
|
56
|
-
var
|
|
57
|
-
return
|
|
66
|
+
var data_type = _ref2.data_type;
|
|
67
|
+
return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
|
|
58
68
|
}, function (_ref3) {
|
|
59
|
-
var
|
|
60
|
-
return
|
|
69
|
+
var data_type = _ref3.data_type;
|
|
70
|
+
return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
|
|
61
71
|
}, function (_ref4) {
|
|
62
|
-
var
|
|
72
|
+
var width = _ref4.width;
|
|
73
|
+
return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
|
|
74
|
+
}, function (_ref5) {
|
|
75
|
+
var width = _ref5.width;
|
|
76
|
+
return width === 'sm' ? '50px' : width === 'md' ? '70px' : '126px';
|
|
77
|
+
}, function (_ref6) {
|
|
78
|
+
var isClickPrevented = _ref6.isClickPrevented;
|
|
63
79
|
return !isClickPrevented ? 'pointer' : 'default';
|
|
64
80
|
});
|
|
65
81
|
|
|
@@ -69,8 +85,8 @@ var UploadTypeContainer = _styledComponents2.default.div(_templateObject3, funct
|
|
|
69
85
|
return props.upload_type === 'rc' ? '#FFFFFF' : '#0C141D';
|
|
70
86
|
});
|
|
71
87
|
|
|
72
|
-
var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBackgroundStyles, function (
|
|
73
|
-
var hex =
|
|
88
|
+
var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBackgroundStyles, function (_ref7) {
|
|
89
|
+
var hex = _ref7.hex;
|
|
74
90
|
return hex.background;
|
|
75
91
|
});
|
|
76
92
|
|
|
@@ -93,7 +109,8 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
93
109
|
actionClick = props.actionClick,
|
|
94
110
|
upload_status = props.upload_status,
|
|
95
111
|
upload_type = props.upload_type,
|
|
96
|
-
file_type = props.file_type
|
|
112
|
+
file_type = props.file_type,
|
|
113
|
+
data_type = props.data_type;
|
|
97
114
|
|
|
98
115
|
var _useState = (0, _react.useState)(null),
|
|
99
116
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -171,7 +188,8 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
171
188
|
thumbnail: thumbnail,
|
|
172
189
|
isClickPrevented: isClickPrevented,
|
|
173
190
|
onClick: handleThumbnailClick,
|
|
174
|
-
theme: props.theme
|
|
191
|
+
theme: props.theme,
|
|
192
|
+
data_type: data_type
|
|
175
193
|
},
|
|
176
194
|
_react2.default.createElement(
|
|
177
195
|
CardHeader,
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
|
|
7
7
|
var _templateObject = _taggedTemplateLiteral(['\n 0% {\n transform: translateX(-100%);\n } \n \n 100% {\n transform: translateX(100%);\n }\n'], ['\n 0% {\n transform: translateX(-100%);\n } \n \n 100% {\n transform: translateX(100%);\n }\n']),
|
|
8
|
-
_templateObject2 = _taggedTemplateLiteral(['\n position: relative;\n background-color: linear-gradient(\n 85deg,\n rgba(48, 63, 81, 0.5) 0%,\n rgba(48, 63, 81, 0.24) 50.76%,\n rgba(48, 63, 81, 0.11) 68.68%,\n rgba(48, 63, 81, 0) 100%\n );\n width: ', ';\n height: ', ';\n border-radius:
|
|
8
|
+
_templateObject2 = _taggedTemplateLiteral(['\n position: relative;\n background-color: linear-gradient(\n 85deg,\n rgba(48, 63, 81, 0.5) 0%,\n rgba(48, 63, 81, 0.24) 50.76%,\n rgba(48, 63, 81, 0.11) 68.68%,\n rgba(48, 63, 81, 0) 100%\n );\n width: ', ';\n height: ', ';\n border-radius: ', ';\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n &::after {\n display: block;\n content: \'\';\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateX(-100%);\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n animation: ', ' 1s infinite;\n }\n'], ['\n position: relative;\n background-color: linear-gradient(\n 85deg,\n rgba(48, 63, 81, 0.5) 0%,\n rgba(48, 63, 81, 0.24) 50.76%,\n rgba(48, 63, 81, 0.11) 68.68%,\n rgba(48, 63, 81, 0) 100%\n );\n width: ', ';\n height: ', ';\n border-radius: ', ';\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n &::after {\n display: block;\n content: \'\';\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateX(-100%);\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n animation: ', ' 1s infinite;\n }\n']);
|
|
9
9
|
|
|
10
10
|
var _react = require('react');
|
|
11
11
|
|
|
@@ -25,16 +25,19 @@ var ShimmerContainer = _styledComponents2.default.div(_templateObject2, function
|
|
|
25
25
|
return props.width;
|
|
26
26
|
}, function (props) {
|
|
27
27
|
return props.height;
|
|
28
|
+
}, function (props) {
|
|
29
|
+
return props.borderRadius || '38px';
|
|
28
30
|
}, shimmerAnimation);
|
|
29
31
|
|
|
30
32
|
var Shimmer = function Shimmer(_ref) {
|
|
31
33
|
var height = _ref.height,
|
|
32
|
-
width = _ref.width
|
|
34
|
+
width = _ref.width,
|
|
35
|
+
borderRadius = _ref.borderRadius;
|
|
33
36
|
|
|
34
37
|
return _react2.default.createElement(
|
|
35
38
|
'div',
|
|
36
39
|
{ style: { marginRight: '2px' } },
|
|
37
|
-
_react2.default.createElement(ShimmerContainer, { width: width, height: height }),
|
|
40
|
+
_react2.default.createElement(ShimmerContainer, { width: width, height: height, borderRadius: borderRadius }),
|
|
38
41
|
' '
|
|
39
42
|
);
|
|
40
43
|
};
|
|
@@ -22,7 +22,7 @@ const ShimmerContainer = styled.div`
|
|
|
22
22
|
);
|
|
23
23
|
width: ${(props) => props.width};
|
|
24
24
|
height: ${(props) => props.height};
|
|
25
|
-
border-radius: 38px;
|
|
25
|
+
border-radius: ${(props) => props.borderRadius || '38px'};
|
|
26
26
|
overflow: hidden;
|
|
27
27
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);
|
|
28
28
|
&::after {
|
|
@@ -37,10 +37,10 @@ const ShimmerContainer = styled.div`
|
|
|
37
37
|
}
|
|
38
38
|
`;
|
|
39
39
|
|
|
40
|
-
const Shimmer = ({ height, width }) => {
|
|
40
|
+
const Shimmer = ({ height, width, borderRadius }) => {
|
|
41
41
|
return (
|
|
42
42
|
<div style={{ marginRight: '2px' }}>
|
|
43
|
-
<ShimmerContainer width={width} height={height} />{' '}
|
|
43
|
+
<ShimmerContainer width={width} height={height} borderRadius={borderRadius} />{' '}
|
|
44
44
|
</div>
|
|
45
45
|
);
|
|
46
46
|
};
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.23",
|
|
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": "9.0.
|
|
10
|
+
"@desynova-digital/tokens": "9.0.23",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|