@desynova-digital/components 9.2.52 → 9.3.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/cardV2/cardV2.js +24 -9
- package/atoms/cardV2/content.js +94 -150
- package/atoms/cardV2/contentV2.js +338 -0
- package/atoms/cardV2/thumbnail.js +58 -61
- package/atoms/cardV2/thumbnailV2.js +598 -0
- package/atoms/icon/icon.js +2 -1
- package/atoms/icon/icon.story.js +230 -203
- package/atoms/icon/icons.json +105 -5
- package/atoms/pageSearchCard/index.js +9 -0
- package/atoms/pageSearchCard/pageSearchCard.js +109 -0
- package/atoms/popup/popup.js +3 -2
- package/atoms/sideBar/sidebar.js +16 -11
- package/atoms/sideBar/sidebar.jsx +154 -165
- package/atoms/timeCodeInput/timeCodeMSInput.js +6 -4
- package/atoms/timeCodeInput/timeCodeMainInput.js +6 -4
- package/atoms/timeCodeInput/timeCodeStandardInput.js +7 -4
- package/components.js +7 -0
- package/index.js +6 -0
- package/molecules/richTextInputV2/RichTextInputV2.js +32 -6
- package/package.json +2 -2
package/atoms/cardV2/cardV2.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = exports.DivStyles = exports.CommonStyles = exports.BaseParaStyles = exports.BaseButtonStyles = void 0;
|
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
@@ -13,6 +14,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
13
14
|
var _thumbnail = _interopRequireDefault(require("./thumbnail"));
|
|
14
15
|
var _content = _interopRequireDefault(require("./content"));
|
|
15
16
|
var _timeline = _interopRequireDefault(require("./timeline"));
|
|
17
|
+
var _contentV = _interopRequireDefault(require("./contentV2"));
|
|
18
|
+
var _thumbnailV = _interopRequireDefault(require("./thumbnailV2"));
|
|
16
19
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // components
|
|
17
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
21
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -38,21 +41,23 @@ var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateOb
|
|
|
38
41
|
var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n"])), CommonStyles);
|
|
39
42
|
var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
|
|
40
43
|
var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n ", ";\n"])), CommonStyles);
|
|
41
|
-
var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n border-radius:
|
|
44
|
+
var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n border-radius: 10px;\n overflow: hidden;\n width: ", ";\n\n border: 1px solid transparent;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);\n\n /* \u2705 Center pop baseline */\n transform: scale(1);\n transform-origin: 50% 50%;\n\n /* \u2705 Make it pop above siblings */\n z-index: 0;\n isolation: isolate;\n\n transition:\n transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),\n border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);\n\n will-change: transform;\n\n /* \uD83D\uDD25 Glow Layer */\n &::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 10px;\n pointer-events: none;\n opacity: 0;\n transition: all 0.4s ease-out;\n\n box-shadow: ", ";\n }\n\n /* \u2705 Hover = pop from center (NO translate) */\n &:hover {\n transform: scale(1.035);\n z-index: 5;\n border-color: ", ";\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n }\n\n &:hover::after {\n opacity: 1;\n }\n"])), function (_ref2) {
|
|
42
45
|
var width = _ref2.width;
|
|
43
46
|
return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
|
|
44
47
|
}, function (_ref3) {
|
|
45
48
|
var upload_type = _ref3.upload_type;
|
|
46
|
-
return upload_type === '
|
|
49
|
+
return String(upload_type || '').toLowerCase() === 'rc' ? "\n 0 0 0 1px rgba(255,140,0,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(255,140,0,0.18)\n " : "\n 0 0 0 1px rgba(13,247,169,0.45),\n 0 12px 35px rgba(0,0,0,0.55),\n 0 0 28px rgba(13,247,169,0.18)\n ";
|
|
47
50
|
}, function (_ref4) {
|
|
48
|
-
var upload_type = _ref4.upload_type
|
|
49
|
-
|
|
51
|
+
var upload_type = _ref4.upload_type,
|
|
52
|
+
ingest_db_id = _ref4.ingest_db_id;
|
|
53
|
+
return String(upload_type || '').toLowerCase() === 'rc' ? 'rgba(255, 141, 41, 0.2)' : !ingest_db_id ? 'rgba(48, 63, 81, 0.2)' : 'rgba(24, 185, 110, 0.2)';
|
|
50
54
|
});
|
|
51
55
|
var CardV2 = function CardV2(props) {
|
|
52
56
|
var width = props.width,
|
|
53
|
-
type = props.type
|
|
57
|
+
type = props.type,
|
|
58
|
+
isCardv2 = props.isCardv2;
|
|
54
59
|
var content = (0, _react.useCallback)(function () {
|
|
55
|
-
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props)
|
|
60
|
+
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props), isCardv2 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnailV["default"], props), /*#__PURE__*/_react["default"].createElement(_contentV["default"], props)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnail["default"], props), /*#__PURE__*/_react["default"].createElement(_content["default"], props)));
|
|
56
61
|
}, [props]);
|
|
57
62
|
|
|
58
63
|
/**
|
|
@@ -68,7 +73,9 @@ var CardV2 = function CardV2(props) {
|
|
|
68
73
|
}, content());
|
|
69
74
|
} else return content();
|
|
70
75
|
}, [props]);
|
|
71
|
-
return /*#__PURE__*/_react["default"].createElement(CardStyles, props,
|
|
76
|
+
return /*#__PURE__*/_react["default"].createElement(CardStyles, (0, _extends2["default"])({}, props, {
|
|
77
|
+
title: undefined
|
|
78
|
+
}), renderBasedOnWidth());
|
|
72
79
|
};
|
|
73
80
|
CardV2.propTypes = {
|
|
74
81
|
h1: _propTypes["default"].string.isRequired,
|
|
@@ -76,6 +83,9 @@ CardV2.propTypes = {
|
|
|
76
83
|
h3: _propTypes["default"].string,
|
|
77
84
|
h4: _propTypes["default"].string,
|
|
78
85
|
h5: _propTypes["default"].string,
|
|
86
|
+
episode_label: _propTypes["default"].string,
|
|
87
|
+
season_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
88
|
+
episode_no: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
79
89
|
width: _propTypes["default"].string,
|
|
80
90
|
thumbnail: _propTypes["default"].string,
|
|
81
91
|
preview: _propTypes["default"].string,
|
|
@@ -86,7 +96,11 @@ CardV2.propTypes = {
|
|
|
86
96
|
onUploadTypeClick: _propTypes["default"].func,
|
|
87
97
|
theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
|
|
88
98
|
type: _propTypes["default"].oneOf(['asset', 'search']),
|
|
89
|
-
bgColor: _propTypes["default"].oneOf(['primary', 'secondary'])
|
|
99
|
+
bgColor: _propTypes["default"].oneOf(['primary', 'secondary']),
|
|
100
|
+
isCardv2: _propTypes["default"].bool,
|
|
101
|
+
nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
|
|
102
|
+
onNestedDropdownSelect: _propTypes["default"].func,
|
|
103
|
+
isSearchPageCard: _propTypes["default"].bool
|
|
90
104
|
};
|
|
91
105
|
CardV2.defaultProps = {
|
|
92
106
|
isSegment: false,
|
|
@@ -95,6 +109,7 @@ CardV2.defaultProps = {
|
|
|
95
109
|
type: 'asset',
|
|
96
110
|
bgColor: 'primary',
|
|
97
111
|
thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
|
|
98
|
-
preview: ''
|
|
112
|
+
preview: '',
|
|
113
|
+
isSearchPageCard: false
|
|
99
114
|
};
|
|
100
115
|
var _default = exports["default"] = CardV2;
|
package/atoms/cardV2/content.js
CHANGED
|
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
11
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
13
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
@@ -16,199 +15,135 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
16
15
|
var _cardV = require("./cardV2");
|
|
17
16
|
var _icon = _interopRequireDefault(require("../../atoms/icon"));
|
|
18
17
|
var _tokens = require("@desynova-digital/tokens");
|
|
19
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
20
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
21
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
22
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
21
|
var TextEllipsisStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
|
|
22
|
+
var ToolTipStyles = (0, _styledComponents["default"])(function (props) {
|
|
23
|
+
return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
|
|
24
|
+
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
|
|
25
|
+
return props.top ? props.top : '25px';
|
|
26
|
+
});
|
|
25
27
|
var ParaStyles = (0, _styledComponents["default"])(function (props) {
|
|
26
28
|
return /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, props);
|
|
27
|
-
})(
|
|
29
|
+
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"])), TextEllipsisStyles);
|
|
28
30
|
var TitleStyles = (0, _styledComponents["default"])(function (props) {
|
|
29
31
|
return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
|
|
30
|
-
})(
|
|
32
|
+
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"])), TextEllipsisStyles, function (_ref) {
|
|
31
33
|
var isTitleClick = _ref.isTitleClick;
|
|
32
34
|
return isTitleClick ? 'pointer' : 'default';
|
|
33
35
|
});
|
|
34
|
-
var ContentStyles = _styledComponents["default"].div(
|
|
35
|
-
var
|
|
36
|
-
width = _ref2.width;
|
|
37
|
-
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
|
|
38
|
-
}, function (_ref3) {
|
|
39
|
-
var width = _ref3.width;
|
|
36
|
+
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\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 ", ";\n\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 :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"])), function (_ref2) {
|
|
37
|
+
var width = _ref2.width;
|
|
40
38
|
return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
|
|
41
|
-
}, function (
|
|
42
|
-
var type =
|
|
43
|
-
width =
|
|
39
|
+
}, function (_ref3) {
|
|
40
|
+
var type = _ref3.type,
|
|
41
|
+
width = _ref3.width;
|
|
44
42
|
if (width === 'sm' && type === 'search') {
|
|
45
43
|
return '0px 13px';
|
|
46
44
|
} else if (type === 'search' && width !== 'sm') {
|
|
47
45
|
return '13px 0px';
|
|
48
46
|
} else return '13px 15px';
|
|
49
|
-
}, function (
|
|
50
|
-
var bgColor =
|
|
51
|
-
type =
|
|
47
|
+
}, function (_ref4) {
|
|
48
|
+
var bgColor = _ref4.bgColor,
|
|
49
|
+
type = _ref4.type;
|
|
52
50
|
return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
|
|
53
51
|
}, function (props) {
|
|
54
52
|
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
55
53
|
}, function (props) {
|
|
56
54
|
return _tokens.colors[props.theme].card.themeColor;
|
|
57
|
-
}, function (_ref6) {
|
|
58
|
-
var upload_type = _ref6.upload_type;
|
|
59
|
-
var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
|
|
60
|
-
var color = isRC ? '#ff6327' : '#00CEC6';
|
|
61
|
-
var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
|
|
62
|
-
return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
|
|
63
|
-
}, function (_ref7) {
|
|
64
|
-
var upload_type = _ref7.upload_type;
|
|
65
|
-
return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
|
|
66
55
|
});
|
|
67
|
-
var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 2px 6px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 3px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--Color-Text-color-Text-500, #999);\n text-align: center;\n font-family: 'SFUITEXT-LIGHT';\n font-size: 8px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n span {\n padding: 0px 2px;\n }\n"])));
|
|
68
56
|
var Content = function Content(props) {
|
|
69
57
|
var h1 = props.h1,
|
|
70
58
|
h2 = props.h2,
|
|
71
59
|
h3 = props.h3,
|
|
72
60
|
h4 = props.h4,
|
|
73
61
|
h5 = props.h5,
|
|
74
|
-
h6 = props.h6,
|
|
75
|
-
h7 = props.h7,
|
|
76
62
|
isSegment = props.isSegment,
|
|
77
63
|
type = props.type,
|
|
78
64
|
width = props.width,
|
|
79
65
|
titleClick = props.titleClick,
|
|
80
66
|
show_page_id = props.show_page_id,
|
|
81
67
|
overlapping = props.overlapping,
|
|
82
|
-
theme = props.theme
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
dubbing_review: {
|
|
108
|
-
width: 7,
|
|
109
|
-
height: 10
|
|
68
|
+
theme = props.theme;
|
|
69
|
+
var _useState = (0, _react.useState)(''),
|
|
70
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
71
|
+
tooltipVisibleSection = _useState2[0],
|
|
72
|
+
setTooltipVisibleSection = _useState2[1];
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* toogle tooltip -> true / false
|
|
76
|
+
* @function
|
|
77
|
+
*/
|
|
78
|
+
var handleTooltip = (0, _react.useCallback)(function (tooltipSection, tooltipText) {
|
|
79
|
+
return function () {
|
|
80
|
+
if (tooltipText.replace(/ /g, '').length >= (width === 'sm' ? 15 : 33)) {
|
|
81
|
+
setTooltipVisibleSection(tooltipSection);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
}, []);
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* returns filtered list removing undefined from input array
|
|
88
|
+
* @function
|
|
89
|
+
*/
|
|
90
|
+
var getTooltipData = function getTooltipData() {
|
|
91
|
+
for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
92
|
+
list[_key] = arguments[_key];
|
|
110
93
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
snp_edit: 'SNP edit',
|
|
114
|
-
pgm_edit_V2: 'PGM edit',
|
|
115
|
-
archive: 'Archive',
|
|
116
|
-
delivery: 'Delivery',
|
|
117
|
-
dubbing_review: 'Dubbing Review',
|
|
118
|
-
subtitle_assign: 'Subtitle',
|
|
119
|
-
file_ingest: 'Ingest'
|
|
120
|
-
};
|
|
121
|
-
var getIconLabel = function getIconLabel(iconName) {
|
|
122
|
-
return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
|
|
123
|
-
};
|
|
124
|
-
var STATUS_COLOR_MAP = {
|
|
125
|
-
Success: '#18B96E',
|
|
126
|
-
Pending: '#666666',
|
|
127
|
-
Failed: '#FF6C56',
|
|
128
|
-
'In Progress': '#FF8D29',
|
|
129
|
-
'In Queue': '#F9E900'
|
|
130
|
-
};
|
|
131
|
-
var footerIcons = (icon_status || []).map(function (item) {
|
|
132
|
-
var _STATUS_COLOR_MAP$ite, _ICON_DIMENSION_MAP$i;
|
|
133
|
-
return _objectSpread({
|
|
134
|
-
name: item.icon,
|
|
135
|
-
status: item.status,
|
|
136
|
-
tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
|
|
137
|
-
color: (_STATUS_COLOR_MAP$ite = STATUS_COLOR_MAP[item.status]) !== null && _STATUS_COLOR_MAP$ite !== void 0 ? _STATUS_COLOR_MAP$ite : '#AFB2BA'
|
|
138
|
-
}, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
|
|
139
|
-
width: 10,
|
|
140
|
-
height: 10
|
|
94
|
+
return list.map(function (ele) {
|
|
95
|
+
return ele && "".concat(ele, " ");
|
|
141
96
|
});
|
|
142
|
-
}
|
|
143
|
-
var _useState = (0, _react.useState)(false),
|
|
144
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
145
|
-
isFilesIconHovered = _useState2[0],
|
|
146
|
-
setIsFilesIconHovered = _useState2[1];
|
|
97
|
+
};
|
|
147
98
|
return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
|
|
148
99
|
className: "asset-card-content"
|
|
149
100
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
150
|
-
className: "title-parent"
|
|
101
|
+
className: "title-parent",
|
|
102
|
+
onMouseOver: handleTooltip('top', h1),
|
|
103
|
+
onMouseOut: handleTooltip('', h1)
|
|
151
104
|
}, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
|
|
152
105
|
theme: props.theme,
|
|
153
106
|
isTitleClick: show_page_id,
|
|
154
107
|
onClick: function onClick(e) {
|
|
155
108
|
return titleClick(e, show_page_id);
|
|
156
109
|
},
|
|
157
|
-
fontSize: "
|
|
110
|
+
fontSize: "14px",
|
|
158
111
|
color: "#FFF"
|
|
159
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}, h3), h4 && /*#__PURE__*/_react["default"].createElement("span", {
|
|
183
|
-
className: "meta-text",
|
|
184
|
-
title: h4
|
|
185
|
-
}, h4), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
112
|
+
}, h1), tooltipVisibleSection == 'top' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
|
|
113
|
+
theme: props.theme,
|
|
114
|
+
width: "100%",
|
|
115
|
+
padding: "0.5rem",
|
|
116
|
+
borderRadius: "0.25rem",
|
|
117
|
+
position: "absolute",
|
|
118
|
+
zIndex: "1",
|
|
119
|
+
bgColor: "#000",
|
|
120
|
+
fontSize: "12px",
|
|
121
|
+
color: "#FFF",
|
|
122
|
+
top: "30px"
|
|
123
|
+
}, h1)), (h2 || h3 || h4 || h5 || isSegment) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
124
|
+
theme: props.theme,
|
|
125
|
+
display: "flex",
|
|
126
|
+
justify: "space-between",
|
|
127
|
+
margin: "10px 0 0 0",
|
|
128
|
+
position: "relative",
|
|
129
|
+
onMouseOver: handleTooltip('bottom', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', '')),
|
|
130
|
+
onMouseOut: handleTooltip('', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', ''))
|
|
131
|
+
}, (h2 || h3 || isSegment) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
132
|
+
theme: props.theme,
|
|
133
|
+
display: "flex"
|
|
134
|
+
}, h2 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h2), h3 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h3), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
186
135
|
className: "segment-indicator"
|
|
187
|
-
}, "S")), (
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
},
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}, h7), /*#__PURE__*/_react["default"].createElement("span", {
|
|
199
|
-
className: "footer-icons"
|
|
200
|
-
}, footerIcons.map(function (icon) {
|
|
201
|
-
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
202
|
-
key: icon.name,
|
|
203
|
-
className: "footer-icon",
|
|
204
|
-
title: icon.tooltipLabel
|
|
205
|
-
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
206
|
-
name: icon.name,
|
|
207
|
-
color: icon.color,
|
|
208
|
-
width: icon.width,
|
|
209
|
-
height: icon.height
|
|
210
|
-
}));
|
|
211
|
-
}))), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
136
|
+
}, "S")), (h4 || h5) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
137
|
+
theme: props.theme,
|
|
138
|
+
display: "flex"
|
|
139
|
+
}, h4 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
140
|
+
theme: props.theme,
|
|
141
|
+
style: {
|
|
142
|
+
marginRight: !h5 && 0
|
|
143
|
+
}
|
|
144
|
+
}, h4), h5 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
145
|
+
margin: "0"
|
|
146
|
+
}, h5)), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
|
|
212
147
|
theme: props.theme,
|
|
213
148
|
display: "flex",
|
|
214
149
|
className: "overlapping-container"
|
|
@@ -247,7 +182,18 @@ var Content = function Content(props) {
|
|
|
247
182
|
})))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
|
|
248
183
|
theme: props.theme,
|
|
249
184
|
margin: "0"
|
|
250
|
-
}, overlapping.length)) || null
|
|
185
|
+
}, overlapping.length)) || null, tooltipVisibleSection == 'bottom' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
|
|
186
|
+
theme: props.theme,
|
|
187
|
+
width: "100%",
|
|
188
|
+
padding: "0.5rem",
|
|
189
|
+
borderRadius: "0.25rem",
|
|
190
|
+
position: "absolute",
|
|
191
|
+
zIndex: "1",
|
|
192
|
+
bgColor: "#000",
|
|
193
|
+
fontSize: "12px",
|
|
194
|
+
color: "#FFF",
|
|
195
|
+
top: "15px"
|
|
196
|
+
}, getTooltipData(h2, h3, h4, h5))));
|
|
251
197
|
};
|
|
252
198
|
Content.propTypes = {
|
|
253
199
|
h1: _propTypes["default"].string,
|
|
@@ -255,8 +201,6 @@ Content.propTypes = {
|
|
|
255
201
|
h3: _propTypes["default"].string,
|
|
256
202
|
h4: _propTypes["default"].string,
|
|
257
203
|
h5: _propTypes["default"].string,
|
|
258
|
-
h6: _propTypes["default"].string,
|
|
259
|
-
h7: _propTypes["default"].string,
|
|
260
204
|
width: _propTypes["default"].string,
|
|
261
205
|
type: _propTypes["default"].string,
|
|
262
206
|
titleClick: _propTypes["default"].func,
|