@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
|
|
@@ -6,37 +6,38 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
|
|
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
|
-
var _templateObject = _taggedTemplateLiteral([
|
|
10
|
-
_templateObject2 = _taggedTemplateLiteral([
|
|
11
|
-
_templateObject3 = _taggedTemplateLiteral([
|
|
12
|
-
_templateObject4 = _taggedTemplateLiteral([
|
|
13
|
-
_templateObject5 = _taggedTemplateLiteral([
|
|
14
|
-
_templateObject6 = _taggedTemplateLiteral([
|
|
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: cover;\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-size: cover;\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
|
+
_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
|
+
_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
|
+
_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']),
|
|
14
|
+
_templateObject6 = _taggedTemplateLiteral(['\n display: flex;\n justify-content: space-between;\n padding: 10px;\n'], ['\n display: flex;\n justify-content: space-between;\n padding: 10px;\n']);
|
|
15
15
|
|
|
16
|
-
var _react = require(
|
|
16
|
+
var _react = require('react');
|
|
17
17
|
|
|
18
18
|
var _react2 = _interopRequireDefault(_react);
|
|
19
19
|
|
|
20
|
-
var _styledComponents = require(
|
|
20
|
+
var _styledComponents = require('styled-components');
|
|
21
21
|
|
|
22
22
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
23
23
|
|
|
24
|
-
var _propTypes = require(
|
|
24
|
+
var _propTypes = require('prop-types');
|
|
25
25
|
|
|
26
26
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _tokens = require('@desynova-digital/tokens');
|
|
29
|
+
|
|
30
|
+
var _icon = require('../../atoms/icon');
|
|
29
31
|
|
|
30
32
|
var _icon2 = _interopRequireDefault(_icon);
|
|
31
33
|
|
|
32
|
-
var
|
|
34
|
+
var _tokens2 = require('../../../tokens');
|
|
33
35
|
|
|
34
|
-
var _cardV = require(
|
|
36
|
+
var _cardV = require('./cardV2');
|
|
35
37
|
|
|
36
38
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
37
39
|
|
|
38
40
|
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
39
|
-
|
|
40
41
|
// atoms
|
|
41
42
|
|
|
42
43
|
|
|
@@ -50,20 +51,20 @@ var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject);
|
|
|
50
51
|
|
|
51
52
|
var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function (_ref) {
|
|
52
53
|
var thumbnail = _ref.thumbnail;
|
|
53
|
-
return
|
|
54
|
+
return 'url(' + thumbnail + ') no-repeat 50%';
|
|
54
55
|
}, function (_ref2) {
|
|
55
56
|
var width = _ref2.width;
|
|
56
|
-
return width ===
|
|
57
|
+
return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
|
|
57
58
|
}, function (_ref3) {
|
|
58
59
|
var width = _ref3.width;
|
|
59
|
-
return width ===
|
|
60
|
+
return width === 'sm' ? '50px' : width === 'md' ? '70px' : '126px';
|
|
60
61
|
}, function (_ref4) {
|
|
61
62
|
var isClickPrevented = _ref4.isClickPrevented;
|
|
62
|
-
return !isClickPrevented ?
|
|
63
|
+
return !isClickPrevented ? 'pointer' : 'default';
|
|
63
64
|
});
|
|
64
65
|
|
|
65
66
|
var UploadTypeContainer = _styledComponents2.default.div(_templateObject3, function (props) {
|
|
66
|
-
return props.upload_type === 'rc' ? '#FF6327' :
|
|
67
|
+
return props.upload_type === 'rc' ? '#FF6327' : _tokens.colors[props.theme].card.themeColor;
|
|
67
68
|
}, function (props) {
|
|
68
69
|
return props.upload_type === 'rc' ? '#FFFFFF' : '#0C141D';
|
|
69
70
|
});
|
|
@@ -75,12 +76,15 @@ var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBa
|
|
|
75
76
|
|
|
76
77
|
var IconButtonStyles = (0, _styledComponents2.default)(function (props) {
|
|
77
78
|
return _react2.default.createElement(_cardV.BaseButtonStyles, props);
|
|
78
|
-
})(_templateObject5, OverlayBackgroundStyles)
|
|
79
|
+
})(_templateObject5, OverlayBackgroundStyles, function (props) {
|
|
80
|
+
return _tokens.colors[props.theme].card.themeColor;
|
|
81
|
+
});
|
|
79
82
|
|
|
80
83
|
var CardHeader = _styledComponents2.default.div(_templateObject6);
|
|
81
84
|
|
|
82
85
|
var Thumbnail = function Thumbnail(props) {
|
|
83
|
-
var
|
|
86
|
+
var theme = props.theme,
|
|
87
|
+
width = props.width,
|
|
84
88
|
thumbnail = props.thumbnail,
|
|
85
89
|
iframeurl = props.iframeurl,
|
|
86
90
|
card_status = props.card_status,
|
|
@@ -106,7 +110,7 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
106
110
|
var hoverPointerRef = (0, _react.useRef)(null);
|
|
107
111
|
(0, _react.useEffect)(function () {
|
|
108
112
|
if (actions && actions.length > 0 && actions.some(function (item) {
|
|
109
|
-
return item.field ===
|
|
113
|
+
return item.field === 'upload' || item.field === 'phupload_ingest';
|
|
110
114
|
}) // can add multiple condition in future to prevent click
|
|
111
115
|
) {
|
|
112
116
|
setClickPreventation(true);
|
|
@@ -121,8 +125,8 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
121
125
|
* return hex
|
|
122
126
|
* @const
|
|
123
127
|
*/
|
|
124
|
-
var index =
|
|
125
|
-
return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(
|
|
128
|
+
var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
|
|
129
|
+
return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
|
|
126
130
|
});
|
|
127
131
|
setStatusIndex(index);
|
|
128
132
|
}, [upload_status, card_status]);
|
|
@@ -138,13 +142,13 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
138
142
|
var iframeOffsetHeight = offsetHeight / iframeCount;
|
|
139
143
|
var imageChangePoint = offsetWidth / iframeCount;
|
|
140
144
|
var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
|
|
141
|
-
hoverPointerRef.current.style.left = event.offsetX +
|
|
145
|
+
hoverPointerRef.current.style.left = event.offsetX + 'px';
|
|
142
146
|
var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
|
|
143
147
|
var imageTop = iframeOffsetHeight * imageNum + offsetTop;
|
|
144
148
|
if (imageTop > offsetHeight) {
|
|
145
149
|
imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
|
|
146
150
|
}
|
|
147
|
-
iframeImageRef.current.style.top =
|
|
151
|
+
iframeImageRef.current.style.top = '-' + imageTop + 'px';
|
|
148
152
|
}
|
|
149
153
|
}, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
|
|
150
154
|
|
|
@@ -155,32 +159,35 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
155
159
|
*/
|
|
156
160
|
var handleThumbnailClick = (0, _react.useCallback)(function (e) {
|
|
157
161
|
if (!isClickPrevented) {
|
|
158
|
-
actionClick(e,
|
|
162
|
+
actionClick(e, 'play', ingest_db_id);
|
|
159
163
|
} else {
|
|
160
164
|
e.preventDefault();
|
|
161
165
|
}
|
|
162
166
|
}, [isClickPrevented]);
|
|
163
|
-
|
|
164
167
|
return _react2.default.createElement(
|
|
165
168
|
ThumbnailStyles,
|
|
166
169
|
{
|
|
167
170
|
width: width,
|
|
168
171
|
thumbnail: thumbnail,
|
|
169
172
|
isClickPrevented: isClickPrevented,
|
|
170
|
-
onClick: handleThumbnailClick
|
|
173
|
+
onClick: handleThumbnailClick,
|
|
174
|
+
theme: props.theme
|
|
171
175
|
},
|
|
172
176
|
_react2.default.createElement(
|
|
173
177
|
CardHeader,
|
|
174
178
|
null,
|
|
175
179
|
upload_type && _react2.default.createElement(
|
|
176
180
|
UploadTypeContainer,
|
|
177
|
-
{
|
|
181
|
+
{
|
|
182
|
+
theme: props.theme,
|
|
183
|
+
upload_type: upload_type && upload_type.toLowerCase()
|
|
184
|
+
},
|
|
178
185
|
_react2.default.createElement(
|
|
179
|
-
|
|
180
|
-
{ className:
|
|
186
|
+
'div',
|
|
187
|
+
{ className: 'uploadWrapper' },
|
|
181
188
|
_react2.default.createElement(
|
|
182
|
-
|
|
183
|
-
{ className:
|
|
189
|
+
'p',
|
|
190
|
+
{ className: 'wrapper' },
|
|
184
191
|
upload_type
|
|
185
192
|
)
|
|
186
193
|
)
|
|
@@ -188,27 +195,30 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
188
195
|
_react2.default.createElement(
|
|
189
196
|
_cardV.DivStyles,
|
|
190
197
|
{
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
+
theme: props.theme,
|
|
199
|
+
className: 'asset-card-thumbnail-head',
|
|
200
|
+
display: 'flex',
|
|
201
|
+
justify: 'flex-end',
|
|
202
|
+
align: 'center',
|
|
203
|
+
position: 'relative',
|
|
204
|
+
zIndex: '2',
|
|
205
|
+
marginLeft: 'auto'
|
|
198
206
|
},
|
|
199
207
|
(card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
|
|
200
208
|
StatusBoxStyles,
|
|
201
209
|
{
|
|
202
|
-
|
|
210
|
+
theme: props.theme,
|
|
211
|
+
hex: _tokens2.CARD_ASSET_STATUS[statusIndex] ? _tokens2.CARD_ASSET_STATUS[statusIndex].hex : { background: '#AFB2BA' }
|
|
203
212
|
},
|
|
204
|
-
_react2.default.createElement(
|
|
213
|
+
_react2.default.createElement('div', { className: 'status-color' }),
|
|
205
214
|
_react2.default.createElement(
|
|
206
215
|
_cardV.BaseParaStyles,
|
|
207
216
|
{
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
217
|
+
theme: props.theme,
|
|
218
|
+
className: 'status-text',
|
|
219
|
+
display: 'inline-block',
|
|
220
|
+
fontSize: '10px',
|
|
221
|
+
color: '#FFF'
|
|
212
222
|
},
|
|
213
223
|
card_status || upload_status
|
|
214
224
|
)
|
|
@@ -217,26 +227,27 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
217
227
|
return item.icon && _react2.default.createElement(
|
|
218
228
|
IconButtonStyles,
|
|
219
229
|
{
|
|
220
|
-
|
|
221
|
-
|
|
230
|
+
theme: props.theme,
|
|
231
|
+
className: 'asset-card-thumbnail-icon-button',
|
|
232
|
+
type: 'button',
|
|
222
233
|
key: i,
|
|
223
|
-
position:
|
|
224
|
-
border:
|
|
225
|
-
cursor:
|
|
226
|
-
borderRadius:
|
|
227
|
-
height:
|
|
228
|
-
padding:
|
|
229
|
-
width:
|
|
230
|
-
margin: actions.length === i + 1 ?
|
|
234
|
+
position: 'relative',
|
|
235
|
+
border: 'none',
|
|
236
|
+
cursor: 'pointer',
|
|
237
|
+
borderRadius: '15px',
|
|
238
|
+
height: '26px',
|
|
239
|
+
padding: '0px',
|
|
240
|
+
width: '26px',
|
|
241
|
+
margin: actions.length === i + 1 ? '0' : '0 5px 0px 0px',
|
|
231
242
|
onClick: function onClick(e) {
|
|
232
243
|
e.stopPropagation();
|
|
233
244
|
actionClick(e, item.field);
|
|
234
245
|
}
|
|
235
246
|
},
|
|
236
|
-
_react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 }),
|
|
247
|
+
_react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14, theme: props.theme }),
|
|
237
248
|
_react2.default.createElement(
|
|
238
|
-
|
|
239
|
-
{ className:
|
|
249
|
+
'div',
|
|
250
|
+
{ className: 'tooltip' },
|
|
240
251
|
item.title
|
|
241
252
|
)
|
|
242
253
|
);
|
|
@@ -244,28 +255,29 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
244
255
|
)
|
|
245
256
|
),
|
|
246
257
|
file_type && !thumbnail ? _react2.default.createElement(
|
|
247
|
-
|
|
248
|
-
{ className:
|
|
258
|
+
'div',
|
|
259
|
+
{ className: 'thumbnail-image-block background-block' },
|
|
249
260
|
_react2.default.createElement(
|
|
250
|
-
|
|
251
|
-
{ className:
|
|
252
|
-
_react2.default.createElement(_icon2.default, { name: file_type +
|
|
261
|
+
'div',
|
|
262
|
+
{ className: 'circle' },
|
|
263
|
+
_react2.default.createElement(_icon2.default, { name: file_type + '-icon', width: 20, height: 20 })
|
|
253
264
|
)
|
|
254
265
|
) : null,
|
|
255
266
|
iframeurl && _react2.default.createElement(
|
|
256
|
-
|
|
267
|
+
'div',
|
|
257
268
|
{
|
|
258
269
|
onMouseMove: handleMouseMove,
|
|
259
|
-
className:
|
|
270
|
+
className: 'iframe-image-block background-block',
|
|
260
271
|
ref: iframeImageBlockRef
|
|
261
272
|
},
|
|
262
|
-
_react2.default.createElement(
|
|
263
|
-
_react2.default.createElement(
|
|
273
|
+
_react2.default.createElement('div', { className: 'hover-pointer', ref: hoverPointerRef }),
|
|
274
|
+
_react2.default.createElement('img', { ref: iframeImageRef, className: 'iframe-image', src: iframeurl })
|
|
264
275
|
) || null
|
|
265
276
|
);
|
|
266
277
|
};
|
|
267
278
|
|
|
268
279
|
Thumbnail.propTypes = {
|
|
280
|
+
theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
|
|
269
281
|
width: _propTypes2.default.string,
|
|
270
282
|
thumbnail: _propTypes2.default.string,
|
|
271
283
|
file_type: _propTypes2.default.string,
|
|
@@ -278,9 +290,10 @@ Thumbnail.propTypes = {
|
|
|
278
290
|
};
|
|
279
291
|
|
|
280
292
|
Thumbnail.defaultProps = {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
293
|
+
theme: 'dark',
|
|
294
|
+
width: 'lg',
|
|
295
|
+
thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
|
|
296
|
+
iframeurl: ''
|
|
284
297
|
};
|
|
285
298
|
|
|
286
299
|
exports.default = Thumbnail;
|
package/atoms/cardV2/timeline.js
CHANGED
|
@@ -1,27 +1,29 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
4
|
+
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
-
var _templateObject = _taggedTemplateLiteral([
|
|
7
|
+
var _templateObject = _taggedTemplateLiteral(['\n position: relative;\n height: 50px;\n .start-time {\n position: absolute;\n top: 0px;\n .hours {\n font-size: 20px;\n color: #fff;\n font-family: \'SFUIText-Medium\';\n }\n .seperator {\n font-size: 20px;\n color: #fff;\n font-family: \'SFUIText-Light\';\n }\n .minutes {\n font-size: 20px;\n color: #fff;\n font-family: \'SFUIText-Light\';\n align-self: 1;\n }\n }\n .image-block {\n position: absolute;\n bottom: 0;\n }\n .end-time {\n position: absolute;\n right: 0;\n top: 8px;\n font-size: 10px;\n font-family: \'SFUIText-Light\';\n color: #afb2ba;\n .am-pm {\n margin-left: 4px;\n }\n }\n .am-pm {\n font-size: 10px;\n align-self: end;\n font-family: \'SFUIText-Light\';\n color: #afb2ba;\n margin-left: 3px;\n }\n'], ['\n position: relative;\n height: 50px;\n .start-time {\n position: absolute;\n top: 0px;\n .hours {\n font-size: 20px;\n color: #fff;\n font-family: \'SFUIText-Medium\';\n }\n .seperator {\n font-size: 20px;\n color: #fff;\n font-family: \'SFUIText-Light\';\n }\n .minutes {\n font-size: 20px;\n color: #fff;\n font-family: \'SFUIText-Light\';\n align-self: 1;\n }\n }\n .image-block {\n position: absolute;\n bottom: 0;\n }\n .end-time {\n position: absolute;\n right: 0;\n top: 8px;\n font-size: 10px;\n font-family: \'SFUIText-Light\';\n color: #afb2ba;\n .am-pm {\n margin-left: 4px;\n }\n }\n .am-pm {\n font-size: 10px;\n align-self: end;\n font-family: \'SFUIText-Light\';\n color: #afb2ba;\n margin-left: 3px;\n }\n']);
|
|
8
8
|
|
|
9
|
-
var _react = require(
|
|
9
|
+
var _react = require('react');
|
|
10
10
|
|
|
11
11
|
var _react2 = _interopRequireDefault(_react);
|
|
12
12
|
|
|
13
|
-
var _styledComponents = require(
|
|
13
|
+
var _styledComponents = require('styled-components');
|
|
14
14
|
|
|
15
15
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
16
16
|
|
|
17
|
-
var _propTypes = require(
|
|
17
|
+
var _propTypes = require('prop-types');
|
|
18
18
|
|
|
19
19
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
20
20
|
|
|
21
|
-
var _dateTime = require(
|
|
21
|
+
var _dateTime = require('../dateTime');
|
|
22
22
|
|
|
23
23
|
var _dateTime2 = _interopRequireDefault(_dateTime);
|
|
24
24
|
|
|
25
|
+
var _tokens = require('@desynova-digital/tokens');
|
|
26
|
+
|
|
25
27
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
28
|
|
|
27
29
|
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
@@ -29,108 +31,118 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
|
|
|
29
31
|
var TimelineBlock = _styledComponents2.default.div(_templateObject);
|
|
30
32
|
|
|
31
33
|
var Timeline = function Timeline(props) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
),
|
|
104
|
-
_react2.default.createElement(
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
)
|
|
128
|
-
|
|
34
|
+
var startTime = props.startTime,
|
|
35
|
+
endTime = props.endTime,
|
|
36
|
+
theme = props.theme;
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
var getTimeString = function getTimeString(date, type) {
|
|
40
|
+
var string = '';
|
|
41
|
+
if (date) {
|
|
42
|
+
var timeString = _dateTime2.default.toTimeString(date, 'HH:MM AP');
|
|
43
|
+
|
|
44
|
+
if (type === 'hours') {
|
|
45
|
+
string = timeString.split(':')[0];
|
|
46
|
+
} else if (type === 'minutes') {
|
|
47
|
+
string = timeString.split(':')[1].split(' ')[0];
|
|
48
|
+
} else if (type === 'ampm') {
|
|
49
|
+
string = timeString.split(' ')[1];
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
return string;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return _react2.default.createElement(
|
|
56
|
+
TimelineBlock,
|
|
57
|
+
null,
|
|
58
|
+
_react2.default.createElement(
|
|
59
|
+
'div',
|
|
60
|
+
{ className: 'start-time' },
|
|
61
|
+
_react2.default.createElement(
|
|
62
|
+
'span',
|
|
63
|
+
{ className: 'hours' },
|
|
64
|
+
getTimeString(startTime, 'hours')
|
|
65
|
+
),
|
|
66
|
+
_react2.default.createElement(
|
|
67
|
+
'span',
|
|
68
|
+
{ className: 'seperator' },
|
|
69
|
+
':'
|
|
70
|
+
),
|
|
71
|
+
_react2.default.createElement(
|
|
72
|
+
'span',
|
|
73
|
+
{ className: 'minutes' },
|
|
74
|
+
getTimeString(startTime, 'minutes')
|
|
75
|
+
),
|
|
76
|
+
_react2.default.createElement(
|
|
77
|
+
'span',
|
|
78
|
+
{ className: 'am-pm' },
|
|
79
|
+
getTimeString(startTime, 'ampm')
|
|
80
|
+
)
|
|
81
|
+
),
|
|
82
|
+
_react2.default.createElement(
|
|
83
|
+
'div',
|
|
84
|
+
{ className: 'image-block' },
|
|
85
|
+
_react2.default.createElement(
|
|
86
|
+
'svg',
|
|
87
|
+
{
|
|
88
|
+
width: '222',
|
|
89
|
+
height: '23',
|
|
90
|
+
viewBox: '0 0 222 23',
|
|
91
|
+
fill: 'none',
|
|
92
|
+
xmlns: 'http://www.w3.org/2000/svg'
|
|
93
|
+
},
|
|
94
|
+
_react2.default.createElement('rect', { width: '2', height: '23', rx: '1', fill: _tokens.colors[props.theme].card.themeColor }),
|
|
95
|
+
_react2.default.createElement('rect', { x: '15', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
96
|
+
_react2.default.createElement('rect', { x: '29', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
97
|
+
_react2.default.createElement('rect', { x: '42', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
98
|
+
_react2.default.createElement('rect', { x: '56', y: '8', width: '1', height: '15', rx: '0.5', fill: '#303F51' }),
|
|
99
|
+
_react2.default.createElement('rect', { x: '70', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
100
|
+
_react2.default.createElement('rect', { x: '84', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
101
|
+
_react2.default.createElement('rect', { x: '97', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
102
|
+
_react2.default.createElement('rect', { x: '111', y: '8', width: '1', height: '15', rx: '0.5', fill: '#303F51' }),
|
|
103
|
+
_react2.default.createElement('rect', { x: '125', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
104
|
+
_react2.default.createElement('rect', { x: '139', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
105
|
+
_react2.default.createElement('rect', { x: '152', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
106
|
+
_react2.default.createElement('rect', { x: '166', y: '8', width: '1', height: '15', rx: '0.5', fill: '#303F51' }),
|
|
107
|
+
_react2.default.createElement('rect', { x: '180', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
108
|
+
_react2.default.createElement('rect', { x: '194', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
109
|
+
_react2.default.createElement('rect', { x: '207', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
|
|
110
|
+
_react2.default.createElement('rect', { x: '221', y: '8', width: '1', height: '15', rx: '0.5', fill: '#FF6C56' })
|
|
111
|
+
)
|
|
112
|
+
),
|
|
113
|
+
_react2.default.createElement(
|
|
114
|
+
'div',
|
|
115
|
+
{ className: 'end-time' },
|
|
116
|
+
_react2.default.createElement(
|
|
117
|
+
'span',
|
|
118
|
+
{ className: 'hours' },
|
|
119
|
+
getTimeString(endTime, 'hours')
|
|
120
|
+
),
|
|
121
|
+
_react2.default.createElement(
|
|
122
|
+
'span',
|
|
123
|
+
{ className: 'seperator' },
|
|
124
|
+
':'
|
|
125
|
+
),
|
|
126
|
+
_react2.default.createElement(
|
|
127
|
+
'span',
|
|
128
|
+
{ className: 'minutes' },
|
|
129
|
+
getTimeString(endTime, 'minutes')
|
|
130
|
+
),
|
|
131
|
+
_react2.default.createElement(
|
|
132
|
+
'span',
|
|
133
|
+
{ className: 'am-pm' },
|
|
134
|
+
getTimeString(endTime, 'ampm')
|
|
135
|
+
)
|
|
136
|
+
)
|
|
137
|
+
);
|
|
129
138
|
};
|
|
130
139
|
|
|
131
140
|
Timeline.propTypes = {
|
|
132
|
-
|
|
133
|
-
|
|
141
|
+
theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
|
|
142
|
+
startTime: _propTypes2.default.string,
|
|
143
|
+
endTime: _propTypes2.default.string
|
|
144
|
+
};
|
|
145
|
+
Timeline.defaultProps = {
|
|
146
|
+
theme: 'dark'
|
|
134
147
|
};
|
|
135
|
-
|
|
136
148
|
exports.default = Timeline;
|