@ntbjs/react-components 2.0.0-rc.26 → 2.0.0-rc.28
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/build/{ActionButton-03dc5f67.js → ActionButton-4db754c3.js} +17 -24
- package/build/{Alert-8a511bdc.js → Alert-e6847a22.js} +29 -36
- package/build/{AssetAction-d081e4b7.js → AssetGallery-f67393d4.js} +588 -622
- package/build/{Badge-aa4cd9c1.js → Badge-d93586a9.js} +35 -42
- package/build/{Button-2e26f5da.js → Button-179a2fe4.js} +83 -90
- package/build/{Checkbox-0b8faf49.js → Checkbox-4a5fd716.js} +45 -52
- package/build/{CompactAutocompleteSelect-797778cb.js → CompactAutocompleteSelect-52c49513.js} +116 -125
- package/build/{CompactStarRating-da21b53f.js → CompactStarRating-9af2f427.js} +76 -101
- package/build/{CompactTextInput-d56aec71.js → CompactTextInput-42ca5d42.js} +104 -129
- package/build/InputGroup-1294d190.js +23 -0
- package/build/{MultiLevelCheckboxSelect-d229cf98.js → MultiLevelCheckboxSelect-d8044c88.js} +139 -167
- package/build/{MultiSelect-d7920eb1.js → MultiSelect-9f497e62.js} +81 -90
- package/build/{Popover-c4be47ea.js → Popover-20050b91.js} +35 -44
- package/build/{Radio-150fb2c9.js → Radio-73ca3ae2.js} +28 -35
- package/build/SectionSeparator-f47760a2.js +31 -0
- package/build/{Switch-d2d6e9ec.js → Switch-ecf3122b.js} +35 -42
- package/build/Tab-04d435c3.js +32 -0
- package/build/{Tabs-b06c0e24.js → Tabs-74d1ea8a.js} +37 -44
- package/build/{TextArea-26d3c8a1.js → TextArea-1e5b9201.js} +105 -113
- package/build/{TextInput-3a567daa.js → TextInput-fab35842.js} +78 -86
- package/build/Tooltip-c1d1199e.js +65 -0
- package/build/{VerificationStatusIcon-9876b68f.js → VerificationStatusIcon-49cb1c1b.js} +19 -44
- package/build/{_rollupPluginBabelHelpers-4b342fad.js → _rollupPluginBabelHelpers-c245b26a.js} +1 -3
- package/build/arrow-forward-ad12c5f3.js +15 -0
- package/build/close-a5d37608.js +15 -0
- package/build/data/Alert/index.js +6 -12
- package/build/data/Badge/index.js +5 -11
- package/build/data/Popover/index.js +10 -16
- package/build/data/Tab/index.js +5 -11
- package/build/data/Tabs/index.js +7 -13
- package/build/data/Tooltip/index.js +7 -13
- package/build/data/index.js +16 -30
- package/build/{defaultTheme-d9a7342e.js → defaultTheme-1bcc2541.js} +3 -7
- package/build/edit-note-283a0e15.js +15 -0
- package/build/expand-more-c5523c46.js +15 -0
- package/build/inputs/ActionButton/index.js +6 -12
- package/build/inputs/Button/index.js +13 -19
- package/build/inputs/Checkbox/index.js +6 -12
- package/build/inputs/CompactAutocompleteSelect/index.js +23 -29
- package/build/inputs/CompactStarRating/index.js +17 -23
- package/build/inputs/CompactTextInput/index.js +19 -25
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js +26 -0
- package/build/inputs/MultiSelect/index.js +10 -16
- package/build/inputs/Radio/index.js +7 -13
- package/build/inputs/Switch/index.js +6 -12
- package/build/inputs/TextArea/index.js +20 -26
- package/build/inputs/TextInput/index.js +9 -15
- package/build/inputs/index.js +40 -60
- package/build/layout/InputGroup/index.js +5 -11
- package/build/layout/SectionSeparator/index.js +5 -11
- package/build/layout/index.js +6 -15
- package/build/{shift-away-subtle-158617af.js → shift-away-subtle-0dd94a03.js} +3 -5
- package/build/ssr/index.js +1 -12
- package/build/styles/utils/colors.scss +4 -4
- package/build/warning-circle-24f3efcd.js +15 -0
- package/build/widgets/AssetGallery/AssetGallery.js +45 -0
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js +127 -0
- package/build/widgets/ContextMenu/ContextMenu.js +26 -0
- package/build/{ContextMenuItem-3967010d.js → widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js} +23 -48
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js +37 -0
- package/build/{InfoCard-d0fdf377.js → widgets/InfoCard/InfoCard.js} +27 -34
- package/build/widgets/Instructions/Instructions.js +255 -0
- package/build/{ProgressBar-2d26c1fb.js → widgets/ProgressBar/ProgressBar.js} +39 -46
- package/build/widgets/index.js +50 -65
- package/package.json +3 -3
- package/styles/utils/colors.scss +4 -4
- package/build/AssetPreviewTopBar-623cfa18.js +0 -152
- package/build/ContextMenu-82f9d728.js +0 -33
- package/build/InputGroup-8d4a4644.js +0 -30
- package/build/Instructions-af191987.js +0 -274
- package/build/SectionSeparator-e06c7660.js +0 -38
- package/build/Tab-ccbca1f2.js +0 -39
- package/build/Tooltip-d5882b82.js +0 -73
- package/build/arrow-forward-d7c77ae3.js +0 -37
- package/build/close-1751121a.js +0 -37
- package/build/edit-note-cefe2215.js +0 -37
- package/build/expand-more-d74e2bd2.js +0 -37
- package/build/widgets/AssetGallery/index.js +0 -55
- package/build/widgets/AssetPreview/AssetPreviewTopBar/index.js +0 -12
- package/build/widgets/ContextMenu/ContextMenuItem/index.js +0 -11
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/index.js +0 -44
- package/build/widgets/ContextMenu/index.js +0 -11
- package/build/widgets/InfoCard/index.js +0 -12
- package/build/widgets/Instructions/index.js +0 -33
- package/build/widgets/ProgressBar/index.js +0 -12
|
@@ -1,73 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
require('./TextArea-26d3c8a1.js');
|
|
34
|
-
require('./TextInput-3a567daa.js');
|
|
35
|
-
require('./Switch-d2d6e9ec.js');
|
|
36
|
-
var ContextMenuItem = require('./ContextMenuItem-3967010d.js');
|
|
37
|
-
|
|
38
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
39
|
-
|
|
40
|
-
function _interopNamespace(e) {
|
|
41
|
-
if (e && e.__esModule) return e;
|
|
42
|
-
var n = Object.create(null);
|
|
43
|
-
if (e) {
|
|
44
|
-
Object.keys(e).forEach(function (k) {
|
|
45
|
-
if (k !== 'default') {
|
|
46
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
47
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
48
|
-
enumerable: true,
|
|
49
|
-
get: function () { return e[k]; }
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
n["default"] = e;
|
|
55
|
-
return Object.freeze(n);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
59
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
60
|
-
var useMergedRefs__default = /*#__PURE__*/_interopDefaultLegacy(useMergedRefs);
|
|
61
|
-
var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
|
|
62
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
1
|
+
import { _ as _extends$4 } from './_rollupPluginBabelHelpers-c245b26a.js';
|
|
2
|
+
import { isFunction, get, mapKeys, omit, isEmpty, throttle } from 'lodash';
|
|
3
|
+
import { P as PropTypes, a as applyDefaultTheme, s as styleInject } from './defaultTheme-1bcc2541.js';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
|
|
6
|
+
import useMergedRefs from '@restart/hooks/useMergedRefs';
|
|
7
|
+
import ResizeObserver from 'resize-observer-polyfill';
|
|
8
|
+
import { u as useIsomorphicLayoutEffect } from './MultiLevelCheckboxSelect-d8044c88.js';
|
|
9
|
+
import styled, { css } from 'styled-components';
|
|
10
|
+
import { S as SvgWarningCircle } from './warning-circle-24f3efcd.js';
|
|
11
|
+
import { A as Alert } from './Alert-e6847a22.js';
|
|
12
|
+
import { B as Badge } from './Badge-d93586a9.js';
|
|
13
|
+
import { P as Popover } from './Popover-20050b91.js';
|
|
14
|
+
import './Tab-04d435c3.js';
|
|
15
|
+
import './Tabs-74d1ea8a.js';
|
|
16
|
+
import { T as Tooltip } from './Tooltip-c1d1199e.js';
|
|
17
|
+
import './VerificationStatusIcon-49cb1c1b.js';
|
|
18
|
+
import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions, useMergeRefs } from '@floating-ui/react';
|
|
19
|
+
import { rgba } from 'polished';
|
|
20
|
+
import { A as ActionButton } from './ActionButton-4db754c3.js';
|
|
21
|
+
import './Button-179a2fe4.js';
|
|
22
|
+
import './Checkbox-4a5fd716.js';
|
|
23
|
+
import './CompactAutocompleteSelect-52c49513.js';
|
|
24
|
+
import './CompactStarRating-9af2f427.js';
|
|
25
|
+
import './CompactTextInput-42ca5d42.js';
|
|
26
|
+
import './MultiSelect-9f497e62.js';
|
|
27
|
+
import './Radio-73ca3ae2.js';
|
|
28
|
+
import './TextArea-1e5b9201.js';
|
|
29
|
+
import './TextInput-fab35842.js';
|
|
30
|
+
import './Switch-ecf3122b.js';
|
|
31
|
+
import ContextMenu from './widgets/ContextMenu/ContextMenu.js';
|
|
32
|
+
import ContextMenuItem from './widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js';
|
|
63
33
|
|
|
64
34
|
var _path$3;
|
|
65
35
|
function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
|
|
66
36
|
function SvgCheckRectangleFilled(props) {
|
|
67
|
-
return /*#__PURE__*/
|
|
37
|
+
return /*#__PURE__*/React.createElement("svg", _extends$3({
|
|
68
38
|
xmlns: "http://www.w3.org/2000/svg",
|
|
69
39
|
viewBox: "0 0 24 24"
|
|
70
|
-
}, props), _path$3 || (_path$3 = /*#__PURE__*/
|
|
40
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
|
|
71
41
|
fill: "currentColor",
|
|
72
42
|
d: "M10.146 17.622l9.412-9.412-1.87-1.869-7.542 7.543-3.805-3.805-1.869 1.87 5.674 5.673zM2.67 24.03q-1.101 0-1.886-.784T0 21.36V2.67Q0 1.569.784.784T2.67 0h18.69q1.101 0 1.886.784t.784 1.886v18.69q0 1.101-.784 1.886t-1.886.784H2.67z"
|
|
73
43
|
})));
|
|
@@ -76,11 +46,11 @@ function SvgCheckRectangleFilled(props) {
|
|
|
76
46
|
var _path$2;
|
|
77
47
|
function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
|
|
78
48
|
function SvgHeadset(props) {
|
|
79
|
-
return /*#__PURE__*/
|
|
49
|
+
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
|
80
50
|
xmlns: "http://www.w3.org/2000/svg",
|
|
81
51
|
fill: "currentColor",
|
|
82
52
|
viewBox: "0 0 24 24"
|
|
83
|
-
}, props), _path$2 || (_path$2 = /*#__PURE__*/
|
|
53
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
|
|
84
54
|
d: "M9 21H5q-.825 0-1.413-.587Q3 19.825 3 19v-7q0-1.875.712-3.513.713-1.637 1.926-2.85 1.212-1.212 2.85-1.925Q10.125 3 12 3t3.513.712q1.637.713 2.85 1.925 1.212 1.213 1.925 2.85Q21 10.125 21 12v7q0 .825-.587 1.413Q19.825 21 19 21h-4v-8h4v-1q0-2.925-2.038-4.963Q14.925 5 12 5T7.038 7.037Q5 9.075 5 12v1h4zm-2-6H5v4h2zm10 0v4h2v-4zm0 0h2-2zM7 15H5z"
|
|
85
55
|
})));
|
|
86
56
|
}
|
|
@@ -88,10 +58,10 @@ function SvgHeadset(props) {
|
|
|
88
58
|
var _path$1;
|
|
89
59
|
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
90
60
|
function SvgLayers(props) {
|
|
91
|
-
return /*#__PURE__*/
|
|
61
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
92
62
|
xmlns: "http://www.w3.org/2000/svg",
|
|
93
63
|
viewBox: "-1 0 24 24"
|
|
94
|
-
}, props), _path$1 || (_path$1 = /*#__PURE__*/
|
|
64
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
95
65
|
fill: "currentColor",
|
|
96
66
|
d: "M11.16 23.622L0 14.942l2.046-1.55 9.114 7.068 9.114-7.068 2.046 1.55-11.16 8.68zm0-6.262L0 8.68 11.16 0l11.16 8.68-11.16 8.68z"
|
|
97
67
|
})));
|
|
@@ -100,69 +70,69 @@ function SvgLayers(props) {
|
|
|
100
70
|
var _path;
|
|
101
71
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
102
72
|
function SvgPlay(props) {
|
|
103
|
-
return /*#__PURE__*/
|
|
73
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
104
74
|
xmlns: "http://www.w3.org/2000/svg",
|
|
105
75
|
viewBox: "-3 -0.25 24 24"
|
|
106
|
-
}, props), _path || (_path = /*#__PURE__*/
|
|
76
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
107
77
|
fill: "currentColor",
|
|
108
78
|
d: "M0 23.52V0l18.48 11.76L0 23.52z"
|
|
109
79
|
})));
|
|
110
80
|
}
|
|
111
81
|
|
|
112
82
|
const assetShape = {
|
|
113
|
-
key:
|
|
114
|
-
previewUrl:
|
|
115
|
-
title:
|
|
116
|
-
note:
|
|
117
|
-
icon:
|
|
118
|
-
message:
|
|
83
|
+
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
|
84
|
+
previewUrl: PropTypes.string,
|
|
85
|
+
title: PropTypes.string,
|
|
86
|
+
note: PropTypes.shape({
|
|
87
|
+
icon: PropTypes.element,
|
|
88
|
+
message: PropTypes.string
|
|
119
89
|
}),
|
|
120
|
-
width:
|
|
121
|
-
height:
|
|
122
|
-
fileType:
|
|
123
|
-
fileTypeIconPosition:
|
|
124
|
-
group:
|
|
125
|
-
actions:
|
|
126
|
-
title:
|
|
127
|
-
icon:
|
|
128
|
-
onClick:
|
|
129
|
-
className:
|
|
130
|
-
component:
|
|
90
|
+
width: PropTypes.number,
|
|
91
|
+
height: PropTypes.number,
|
|
92
|
+
fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,
|
|
93
|
+
fileTypeIconPosition: PropTypes.oneOf(['top-left', 'top-right']),
|
|
94
|
+
group: PropTypes.string,
|
|
95
|
+
actions: PropTypes.arrayOf(PropTypes.shape({
|
|
96
|
+
title: PropTypes.string.isRequired,
|
|
97
|
+
icon: PropTypes.element.isRequired,
|
|
98
|
+
onClick: PropTypes.func.isRequired,
|
|
99
|
+
className: PropTypes.shape,
|
|
100
|
+
component: PropTypes.func
|
|
131
101
|
})),
|
|
132
|
-
overlay:
|
|
133
|
-
completed:
|
|
134
|
-
hasError:
|
|
135
|
-
disabled:
|
|
136
|
-
onClick:
|
|
137
|
-
onContextMenu:
|
|
138
|
-
onMouseEnter:
|
|
139
|
-
summary:
|
|
140
|
-
title:
|
|
141
|
-
description:
|
|
142
|
-
instructions:
|
|
143
|
-
instructionsType:
|
|
144
|
-
headerLeft:
|
|
145
|
-
headerRight:
|
|
146
|
-
footerLeft:
|
|
147
|
-
footerRight:
|
|
102
|
+
overlay: PropTypes.element,
|
|
103
|
+
completed: PropTypes.bool,
|
|
104
|
+
hasError: PropTypes.bool,
|
|
105
|
+
disabled: PropTypes.bool,
|
|
106
|
+
onClick: PropTypes.func,
|
|
107
|
+
onContextMenu: PropTypes.func,
|
|
108
|
+
onMouseEnter: PropTypes.func,
|
|
109
|
+
summary: PropTypes.shape({
|
|
110
|
+
title: PropTypes.string,
|
|
111
|
+
description: PropTypes.string,
|
|
112
|
+
instructions: PropTypes.string,
|
|
113
|
+
instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
|
|
114
|
+
headerLeft: PropTypes.node,
|
|
115
|
+
headerRight: PropTypes.node,
|
|
116
|
+
footerLeft: PropTypes.node,
|
|
117
|
+
footerRight: PropTypes.node
|
|
148
118
|
})
|
|
149
119
|
};
|
|
150
120
|
const assetShapeWithLayout = {
|
|
151
121
|
...assetShape,
|
|
152
|
-
layout:
|
|
153
|
-
width:
|
|
154
|
-
height:
|
|
155
|
-
translateX:
|
|
156
|
-
translateY:
|
|
157
|
-
type:
|
|
158
|
-
hasHeightAndWidth:
|
|
122
|
+
layout: PropTypes.shape({
|
|
123
|
+
width: PropTypes.number.isRequired,
|
|
124
|
+
height: PropTypes.number.isRequired,
|
|
125
|
+
translateX: PropTypes.number.isRequired,
|
|
126
|
+
translateY: PropTypes.number.isRequired,
|
|
127
|
+
type: PropTypes.oneOf(['groupLabel', 'asset']).isRequired,
|
|
128
|
+
hasHeightAndWidth: PropTypes.bool
|
|
159
129
|
}).isRequired
|
|
160
130
|
};
|
|
161
131
|
|
|
162
|
-
const AssetGalleryBase$1 =
|
|
132
|
+
const AssetGalleryBase$1 = styled.div.attrs(applyDefaultTheme)`
|
|
163
133
|
position: relative;
|
|
164
134
|
`;
|
|
165
|
-
const GroupLabel =
|
|
135
|
+
const GroupLabel = styled.div.attrs(applyDefaultTheme)`
|
|
166
136
|
font-family: ${props => props.theme.primaryFontFamily};
|
|
167
137
|
${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
|
|
168
138
|
display: flex;
|
|
@@ -171,7 +141,7 @@ const GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaul
|
|
|
171
141
|
padding-bottom: 4px;
|
|
172
142
|
box-sizing: border-box;
|
|
173
143
|
`;
|
|
174
|
-
const AssetGalleryCardBase =
|
|
144
|
+
const AssetGalleryCardBase = styled.div.attrs(applyDefaultTheme)`
|
|
175
145
|
position: absolute;
|
|
176
146
|
top: 0;
|
|
177
147
|
left: 0;
|
|
@@ -186,10 +156,10 @@ const AssetGalleryCardBase = styled__default["default"].div.attrs(defaultTheme.a
|
|
|
186
156
|
|
|
187
157
|
var build = {exports: {}};
|
|
188
158
|
|
|
189
|
-
(()=>{var e={296:(e,t,r)=>{var o=/^\s+|\s+$/g,n=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt,s="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,l="object"==typeof self&&self&&self.Object===Object&&self,a=s||l||Function("return this")(),f=Object.prototype.toString,p=Math.max,y=Math.min,b=function(){return a.Date.now()};function d(e){var t=typeof e;return !!e&&("object"==t||"function"==t)}function h(e){if("number"==typeof e)return e;if(function(e){return "symbol"==typeof e||function(e){return !!e&&"object"==typeof e}(e)&&"[object Symbol]"==f.call(e)}(e))return NaN;if(d(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=d(t)?t+"":t;}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var r=i.test(e);return r||c.test(e)?u(e.slice(2),r?2:8):n.test(e)?NaN:+e}e.exports=function(e,t,r){var o,n,i,c,u,s,l=0,a=!1,f=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var r=o,i=n;return o=n=void 0,l=t,c=e.apply(i,r)}function O(e){var r=e-s;return void 0===s||r>=t||r<0||f&&e-l>=i}function w(){var e=b();if(O(e))return g(e);u=setTimeout(w,function(e){var r=t-(e-s);return f?y(r,i-(e-l)):r}(e));}function g(e){return u=void 0,v&&o?m(e):(o=n=void 0,c)}function P(){var e=b(),r=O(e);if(o=arguments,n=this,s=e,r){if(void 0===u)return function(e){return l=e,u=setTimeout(w,t),a?m(e):c}(s);if(f)return u=setTimeout(w,t),m(s)}return void 0===u&&(u=setTimeout(w,t)),c}return t=h(t)||0,d(r)&&(a=!!r.leading,i=(f="maxWait"in r)?p(h(r.maxWait)||0,t):i,v="trailing"in r?!!r.trailing:v),P.cancel=function(){void 0!==u&&clearTimeout(u),l=0,o=s=n=u=void 0;},P.flush=function(){return void 0===u?c:g(b())},P};},96:(e,t,r)=>{var o="Expected a function",n=NaN,i="[object Symbol]",c=/^\s+|\s+$/g,u=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,l=/^0o[0-7]+$/i,a=parseInt,f="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,p="object"==typeof self&&self&&self.Object===Object&&self,y=f||p||Function("return this")(),b=Object.prototype.toString,d=Math.max,h=Math.min,v=function(){return y.Date.now()};function m(e){var t=typeof e;return !!e&&("object"==t||"function"==t)}function O(e){if("number"==typeof e)return e;if(function(e){return "symbol"==typeof e||function(e){return !!e&&"object"==typeof e}(e)&&b.call(e)==i}(e))return n;if(m(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=m(t)?t+"":t;}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(c,"");var r=s.test(e);return r||l.test(e)?a(e.slice(2),r?2:8):u.test(e)?n:+e}e.exports=function(e,t,r){var n=!0,i=!0;if("function"!=typeof e)throw new TypeError(o);return m(r)&&(n="leading"in r?!!r.leading:n,i="trailing"in r?!!r.trailing:i),function(e,t,r){var n,i,c,u,s,l,a=0,f=!1,p=!1,y=!0;if("function"!=typeof e)throw new TypeError(o);function b(t){var r=n,o=i;return n=i=void 0,a=t,u=e.apply(o,r)}function w(e){var r=e-l;return void 0===l||r>=t||r<0||p&&e-a>=c}function g(){var e=v();if(w(e))return P(e);s=setTimeout(g,function(e){var r=t-(e-l);return p?h(r,c-(e-a)):r}(e));}function P(e){return s=void 0,y&&n?b(e):(n=i=void 0,u)}function j(){var e=v(),r=w(e);if(n=arguments,i=this,l=e,r){if(void 0===s)return function(e){return a=e,s=setTimeout(g,t),f?b(e):u}(l);if(p)return s=setTimeout(g,t),b(l)}return void 0===s&&(s=setTimeout(g,t)),u}return t=O(t)||0,m(r)&&(f=!!r.leading,c=(p="maxWait"in r)?d(O(r.maxWait)||0,t):c,y="trailing"in r?!!r.trailing:y),j.cancel=function(){void 0!==s&&clearTimeout(s),a=0,n=l=i=s=void 0;},j.flush=function(){return void 0===s?u:P(v())},j}(e,t,{leading:n,maxWait:t,trailing:i})};},703:(e,t,r)=>{var o=r(414);function n(){}function i(){}i.resetWarningCache=n,e.exports=function(){function e(e,t,r,n,i,c){if(c!==o){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:n};return r.PropTypes=r,r};},697:(e,t,r)=>{e.exports=r(703)();},414:e=>{e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]});},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});};var o={};(()=>{r.r(o),r.d(o,{LazyLoadComponent:()=>Y,LazyLoadImage:()=>ne,trackWindowScroll:()=>D});const e=React__default["default"];var t=r.n(e),n=r(697);function i(){return "undefined"!=typeof window&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o);}return r}function s(e,t,r){return (t=a(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,a(o.key),o);}}function a(e){var t=function(e,t){if("object"!==c(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==c(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return "symbol"===c(t)?t:String(t)}function f(e,t){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},f(e,t)}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}var y=function(e){e.forEach((function(e){e.isIntersecting&&e.target.onVisible();}));},b={},d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&f(e,t);}(h,e);var r,o,n,a,d=(n=h,a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=p(n);if(a){var r=p(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===c(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function h(e){var t;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,h),(t=d.call(this,e)).supportsObserver=!e.scrollPosition&&e.useIntersectionObserver&&i(),t.supportsObserver){var r=e.threshold;t.observer=function(e){return b[e]=b[e]||new IntersectionObserver(y,{rootMargin:e+"px"}),b[e]}(r);}return t}return r=h,o=[{key:"componentDidMount",value:function(){this.placeholder&&this.observer&&(this.placeholder.onVisible=this.props.onVisible,this.observer.observe(this.placeholder)),this.supportsObserver||this.updateVisibility();}},{key:"componentWillUnmount",value:function(){this.observer&&this.placeholder&&this.observer.unobserve(this.placeholder);}},{key:"componentDidUpdate",value:function(){this.supportsObserver||this.updateVisibility();}},{key:"getPlaceholderBoundingBox",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.scrollPosition,t=this.placeholder.getBoundingClientRect(),r=this.placeholder.style,o=parseInt(r.getPropertyValue("margin-left"),10)||0,n=parseInt(r.getPropertyValue("margin-top"),10)||0;return {bottom:e.y+t.bottom+n,left:e.x+t.left+o,right:e.x+t.right+o,top:e.y+t.top+n}}},{key:"isPlaceholderInViewport",value:function(){if("undefined"==typeof window||!this.placeholder)return !1;var e=this.props,t=e.scrollPosition,r=e.threshold,o=this.getPlaceholderBoundingBox(t),n=t.y+window.innerHeight,i=t.x,c=t.x+window.innerWidth,u=t.y;return Boolean(u-r<=o.bottom&&n+r>=o.top&&i-r<=o.right&&c+r>=o.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible();}},{key:"render",value:function(){var e=this,r=this.props,o=r.className,n=r.height,i=r.placeholder,c=r.style,l=r.width;if(i&&"function"!=typeof i.type)return t().cloneElement(i,{ref:function(t){return e.placeholder=t}});var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){s(e,t,r[t]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t));}));}return e}({display:"inline-block"},c);return void 0!==l&&(a.width=l),void 0!==n&&(a.height=n),t().createElement("span",{className:o,ref:function(t){return e.placeholder=t},style:a},i)}}],o&&l(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),h}(t().Component);d.propTypes={onVisible:n.PropTypes.func.isRequired,className:n.PropTypes.string,height:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]),placeholder:n.PropTypes.element,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,scrollPosition:n.PropTypes.shape({x:n.PropTypes.number.isRequired,y:n.PropTypes.number.isRequired}),width:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string])},d.defaultProps={className:"",placeholder:null,threshold:100,useIntersectionObserver:!0};const h=d;var v=r(296),m=r.n(v),O=r(96),w=r.n(O),g=function(e){var t=getComputedStyle(e,null);return t.getPropertyValue("overflow")+t.getPropertyValue("overflow-y")+t.getPropertyValue("overflow-x")};const P=function(e){if(!(e instanceof HTMLElement))return window;for(var t=e;t&&t instanceof HTMLElement;){if(/(scroll|auto)/.test(g(t)))return t;t=t.parentNode;}return window};function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}var T=["delayMethod","delayTime"];function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);}return e},S.apply(this,arguments)}function E(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==j(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==j(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===j(n)?n:String(n)),o);}var n;}function L(e,t){return L=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},L(e,t)}function _(e,t){if(t&&("object"===j(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return I(e)}function I(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function x(e){return x=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},x(e)}var R=function(){return "undefined"==typeof window?0:window.scrollX||window.pageXOffset},k=function(){return "undefined"==typeof window?0:window.scrollY||window.pageYOffset};const D=function(e){var r=function(r){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&L(e,t);}(l,r);var o,n,c,u,s=(c=l,u=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=x(c);if(u){var r=x(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return _(this,e)});function l(e){var r;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),(r=s.call(this,e)).useIntersectionObserver=e.useIntersectionObserver&&i(),r.useIntersectionObserver)return _(r);var o=r.onChangeScroll.bind(I(r));return "debounce"===e.delayMethod?r.delayedScroll=m()(o,e.delayTime):"throttle"===e.delayMethod&&(r.delayedScroll=w()(o,e.delayTime)),r.state={scrollPosition:{x:R(),y:k()}},r.baseComponentRef=t().createRef(),r}return o=l,(n=[{key:"componentDidMount",value:function(){this.addListeners();}},{key:"componentWillUnmount",value:function(){this.removeListeners();}},{key:"componentDidUpdate",value:function(){"undefined"==typeof window||this.useIntersectionObserver||P(this.baseComponentRef.current)!==this.scrollElement&&(this.removeListeners(),this.addListeners());}},{key:"addListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement=P(this.baseComponentRef.current),this.scrollElement.addEventListener("scroll",this.delayedScroll,{passive:!0}),window.addEventListener("resize",this.delayedScroll,{passive:!0}),this.scrollElement!==window&&window.addEventListener("scroll",this.delayedScroll,{passive:!0}));}},{key:"removeListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll),this.scrollElement!==window&&window.removeEventListener("scroll",this.delayedScroll));}},{key:"onChangeScroll",value:function(){this.useIntersectionObserver||this.setState({scrollPosition:{x:R(),y:k()}});}},{key:"render",value:function(){var r=this.props,o=(r.delayMethod,r.delayTime,function(e,t){if(null==e)return {};var r,o,n=function(e,t){if(null==e)return {};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r]);}return n}(r,T)),n=this.useIntersectionObserver?null:this.state.scrollPosition;return t().createElement(e,S({forwardRef:this.baseComponentRef,scrollPosition:n},o))}}])&&E(o.prototype,n),Object.defineProperty(o,"prototype",{writable:!1}),l}(t().Component);return r.propTypes={delayMethod:n.PropTypes.oneOf(["debounce","throttle"]),delayTime:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool},r.defaultProps={delayMethod:"throttle",delayTime:300,useIntersectionObserver:!0},r};function C(e){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},C(e)}function B(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==C(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==C(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===C(n)?n:String(n)),o);}var n;}function M(e,t){return M=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},M(e,t)}function N(e){return N=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},N(e)}var V=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&M(e,t);}(u,e);var r,o,n,i,c=(n=u,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=N(n);if(i){var r=N(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===C(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function u(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),c.call(this,e)}return r=u,(o=[{key:"render",value:function(){return t().createElement(h,this.props)}}])&&B(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),u}(t().Component);const W=D(V);function z(e){return z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},z(e)}function $(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==z(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==z(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===z(n)?n:String(n)),o);}var n;}function U(e,t){return U=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},U(e,t)}function F(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function q(e){return q=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},q(e)}var H=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&U(e,t);}(s,e);var r,o,n,c,u=(n=s,c=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=q(n);if(c){var r=q(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===z(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return F(e)}(this,e)});function s(e){var t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),t=u.call(this,e);var r=e.afterLoad,o=e.beforeLoad,n=e.scrollPosition,i=e.visibleByDefault;return t.state={visible:i},i&&(o(),r()),t.onVisible=t.onVisible.bind(F(t)),t.isScrollTracked=Boolean(n&&Number.isFinite(n.x)&&n.x>=0&&Number.isFinite(n.y)&&n.y>=0),t}return r=s,(o=[{key:"componentDidUpdate",value:function(e,t){t.visible!==this.state.visible&&this.props.afterLoad();}},{key:"onVisible",value:function(){this.props.beforeLoad(),this.setState({visible:!0});}},{key:"render",value:function(){if(this.state.visible)return this.props.children;var e=this.props,r=e.className,o=e.delayMethod,n=e.delayTime,c=e.height,u=e.placeholder,s=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.width;return this.isScrollTracked||f&&i()?t().createElement(h,{className:r,height:c,onVisible:this.onVisible,placeholder:u,scrollPosition:s,style:l,threshold:a,useIntersectionObserver:f,width:p}):t().createElement(W,{className:r,delayMethod:o,delayTime:n,height:c,onVisible:this.onVisible,placeholder:u,style:l,threshold:a,width:p})}}])&&$(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),s}(t().Component);H.propTypes={afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool},H.defaultProps={afterLoad:function(){return {}},beforeLoad:function(){return {}},useIntersectionObserver:!0,visibleByDefault:!1};const Y=H;function X(e){return X="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},X(e)}var A=["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","useIntersectionObserver","visibleByDefault","wrapperClassName","wrapperProps"];function G(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o);}return r}function J(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?G(Object(r),!0).forEach((function(t){K(e,t,r[t]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):G(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t));}));}return e}function K(e,t,r){return (t=ee(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Q(){return Q=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);}return e},Q.apply(this,arguments)}function Z(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,ee(o.key),o);}}function ee(e){var t=function(e,t){if("object"!==X(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==X(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return "symbol"===X(t)?t:String(t)}function te(e,t){return te=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},te(e,t)}function re(e){return re=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},re(e)}var oe=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&te(e,t);}(u,e);var r,o,n,i,c=(n=u,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=re(n);if(i){var r=re(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===X(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function u(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),(t=c.call(this,e)).state={loaded:!1},t}return r=u,(o=[{key:"onImageLoad",value:function(){var e=this;return this.state.loaded?null:function(t){e.props.onLoad(t),e.props.afterLoad(),e.setState({loaded:!0});}}},{key:"getImg",value:function(){var e=this.props,r=(e.afterLoad,e.beforeLoad,e.delayMethod,e.delayTime,e.effect,e.placeholder,e.placeholderSrc,e.scrollPosition,e.threshold,e.useIntersectionObserver,e.visibleByDefault,e.wrapperClassName,e.wrapperProps,function(e,t){if(null==e)return {};var r,o,n=function(e,t){if(null==e)return {};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r]);}return n}(e,A));return t().createElement("img",Q({},r,{onLoad:this.onImageLoad()}))}},{key:"getLazyLoadImage",value:function(){var e=this.props,r=e.beforeLoad,o=e.className,n=e.delayMethod,i=e.delayTime,c=e.height,u=e.placeholder,s=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.visibleByDefault,y=e.width;return t().createElement(Y,{beforeLoad:r,className:o,delayMethod:n,delayTime:i,height:c,placeholder:u,scrollPosition:s,style:l,threshold:a,useIntersectionObserver:f,visibleByDefault:p,width:y},this.getImg())}},{key:"getWrappedLazyLoadImage",value:function(e){var r=this.props,o=r.effect,n=r.height,i=r.placeholderSrc,c=r.width,u=r.wrapperClassName,s=r.wrapperProps,l=this.state.loaded,a=l?" lazy-load-image-loaded":"",f=l||!i?{}:{backgroundImage:"url(".concat(i,")"),backgroundSize:"100% 100%"};return t().createElement("span",Q({className:u+" lazy-load-image-background "+o+a,style:J(J({},f),{},{color:"transparent",display:"inline-block",height:n,width:c})},s),e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,o=e.visibleByDefault,n=e.wrapperClassName,i=e.wrapperProps,c=this.getLazyLoadImage();return (t||r)&&!o||n||i?this.getWrappedLazyLoadImage(c):c}}])&&Z(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),u}(t().Component);oe.propTypes={onLoad:n.PropTypes.func,afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,delayMethod:n.PropTypes.string,delayTime:n.PropTypes.number,effect:n.PropTypes.string,placeholderSrc:n.PropTypes.string,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool,wrapperClassName:n.PropTypes.string,wrapperProps:n.PropTypes.object},oe.defaultProps={onLoad:function(){},afterLoad:function(){return {}},beforeLoad:function(){return {}},delayMethod:"throttle",delayTime:300,effect:"",placeholderSrc:null,threshold:100,useIntersectionObserver:!0,visibleByDefault:!1,wrapperClassName:""};const ne=oe;})(),build.exports=o;})();
|
|
159
|
+
(()=>{var e={296:(e,t,r)=>{var o=/^\s+|\s+$/g,n=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt,s="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,l="object"==typeof self&&self&&self.Object===Object&&self,a=s||l||Function("return this")(),f=Object.prototype.toString,p=Math.max,y=Math.min,b=function(){return a.Date.now()};function d(e){var t=typeof e;return !!e&&("object"==t||"function"==t)}function h(e){if("number"==typeof e)return e;if(function(e){return "symbol"==typeof e||function(e){return !!e&&"object"==typeof e}(e)&&"[object Symbol]"==f.call(e)}(e))return NaN;if(d(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=d(t)?t+"":t;}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var r=i.test(e);return r||c.test(e)?u(e.slice(2),r?2:8):n.test(e)?NaN:+e}e.exports=function(e,t,r){var o,n,i,c,u,s,l=0,a=!1,f=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var r=o,i=n;return o=n=void 0,l=t,c=e.apply(i,r)}function O(e){var r=e-s;return void 0===s||r>=t||r<0||f&&e-l>=i}function w(){var e=b();if(O(e))return g(e);u=setTimeout(w,function(e){var r=t-(e-s);return f?y(r,i-(e-l)):r}(e));}function g(e){return u=void 0,v&&o?m(e):(o=n=void 0,c)}function P(){var e=b(),r=O(e);if(o=arguments,n=this,s=e,r){if(void 0===u)return function(e){return l=e,u=setTimeout(w,t),a?m(e):c}(s);if(f)return u=setTimeout(w,t),m(s)}return void 0===u&&(u=setTimeout(w,t)),c}return t=h(t)||0,d(r)&&(a=!!r.leading,i=(f="maxWait"in r)?p(h(r.maxWait)||0,t):i,v="trailing"in r?!!r.trailing:v),P.cancel=function(){void 0!==u&&clearTimeout(u),l=0,o=s=n=u=void 0;},P.flush=function(){return void 0===u?c:g(b())},P};},96:(e,t,r)=>{var o="Expected a function",n=NaN,i="[object Symbol]",c=/^\s+|\s+$/g,u=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,l=/^0o[0-7]+$/i,a=parseInt,f="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,p="object"==typeof self&&self&&self.Object===Object&&self,y=f||p||Function("return this")(),b=Object.prototype.toString,d=Math.max,h=Math.min,v=function(){return y.Date.now()};function m(e){var t=typeof e;return !!e&&("object"==t||"function"==t)}function O(e){if("number"==typeof e)return e;if(function(e){return "symbol"==typeof e||function(e){return !!e&&"object"==typeof e}(e)&&b.call(e)==i}(e))return n;if(m(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=m(t)?t+"":t;}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(c,"");var r=s.test(e);return r||l.test(e)?a(e.slice(2),r?2:8):u.test(e)?n:+e}e.exports=function(e,t,r){var n=!0,i=!0;if("function"!=typeof e)throw new TypeError(o);return m(r)&&(n="leading"in r?!!r.leading:n,i="trailing"in r?!!r.trailing:i),function(e,t,r){var n,i,c,u,s,l,a=0,f=!1,p=!1,y=!0;if("function"!=typeof e)throw new TypeError(o);function b(t){var r=n,o=i;return n=i=void 0,a=t,u=e.apply(o,r)}function w(e){var r=e-l;return void 0===l||r>=t||r<0||p&&e-a>=c}function g(){var e=v();if(w(e))return P(e);s=setTimeout(g,function(e){var r=t-(e-l);return p?h(r,c-(e-a)):r}(e));}function P(e){return s=void 0,y&&n?b(e):(n=i=void 0,u)}function j(){var e=v(),r=w(e);if(n=arguments,i=this,l=e,r){if(void 0===s)return function(e){return a=e,s=setTimeout(g,t),f?b(e):u}(l);if(p)return s=setTimeout(g,t),b(l)}return void 0===s&&(s=setTimeout(g,t)),u}return t=O(t)||0,m(r)&&(f=!!r.leading,c=(p="maxWait"in r)?d(O(r.maxWait)||0,t):c,y="trailing"in r?!!r.trailing:y),j.cancel=function(){void 0!==s&&clearTimeout(s),a=0,n=l=i=s=void 0;},j.flush=function(){return void 0===s?u:P(v())},j}(e,t,{leading:n,maxWait:t,trailing:i})};},703:(e,t,r)=>{var o=r(414);function n(){}function i(){}i.resetWarningCache=n,e.exports=function(){function e(e,t,r,n,i,c){if(c!==o){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:n};return r.PropTypes=r,r};},697:(e,t,r)=>{e.exports=r(703)();},414:e=>{e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]});},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});};var o={};(()=>{r.r(o),r.d(o,{LazyLoadComponent:()=>Y,LazyLoadImage:()=>ne,trackWindowScroll:()=>D});const e=React__default;var t=r.n(e),n=r(697);function i(){return "undefined"!=typeof window&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o);}return r}function s(e,t,r){return (t=a(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,a(o.key),o);}}function a(e){var t=function(e,t){if("object"!==c(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==c(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return "symbol"===c(t)?t:String(t)}function f(e,t){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},f(e,t)}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}var y=function(e){e.forEach((function(e){e.isIntersecting&&e.target.onVisible();}));},b={},d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&f(e,t);}(h,e);var r,o,n,a,d=(n=h,a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=p(n);if(a){var r=p(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===c(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function h(e){var t;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,h),(t=d.call(this,e)).supportsObserver=!e.scrollPosition&&e.useIntersectionObserver&&i(),t.supportsObserver){var r=e.threshold;t.observer=function(e){return b[e]=b[e]||new IntersectionObserver(y,{rootMargin:e+"px"}),b[e]}(r);}return t}return r=h,o=[{key:"componentDidMount",value:function(){this.placeholder&&this.observer&&(this.placeholder.onVisible=this.props.onVisible,this.observer.observe(this.placeholder)),this.supportsObserver||this.updateVisibility();}},{key:"componentWillUnmount",value:function(){this.observer&&this.placeholder&&this.observer.unobserve(this.placeholder);}},{key:"componentDidUpdate",value:function(){this.supportsObserver||this.updateVisibility();}},{key:"getPlaceholderBoundingBox",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.scrollPosition,t=this.placeholder.getBoundingClientRect(),r=this.placeholder.style,o=parseInt(r.getPropertyValue("margin-left"),10)||0,n=parseInt(r.getPropertyValue("margin-top"),10)||0;return {bottom:e.y+t.bottom+n,left:e.x+t.left+o,right:e.x+t.right+o,top:e.y+t.top+n}}},{key:"isPlaceholderInViewport",value:function(){if("undefined"==typeof window||!this.placeholder)return !1;var e=this.props,t=e.scrollPosition,r=e.threshold,o=this.getPlaceholderBoundingBox(t),n=t.y+window.innerHeight,i=t.x,c=t.x+window.innerWidth,u=t.y;return Boolean(u-r<=o.bottom&&n+r>=o.top&&i-r<=o.right&&c+r>=o.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible();}},{key:"render",value:function(){var e=this,r=this.props,o=r.className,n=r.height,i=r.placeholder,c=r.style,l=r.width;if(i&&"function"!=typeof i.type)return t().cloneElement(i,{ref:function(t){return e.placeholder=t}});var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){s(e,t,r[t]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t));}));}return e}({display:"inline-block"},c);return void 0!==l&&(a.width=l),void 0!==n&&(a.height=n),t().createElement("span",{className:o,ref:function(t){return e.placeholder=t},style:a},i)}}],o&&l(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),h}(t().Component);d.propTypes={onVisible:n.PropTypes.func.isRequired,className:n.PropTypes.string,height:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]),placeholder:n.PropTypes.element,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,scrollPosition:n.PropTypes.shape({x:n.PropTypes.number.isRequired,y:n.PropTypes.number.isRequired}),width:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string])},d.defaultProps={className:"",placeholder:null,threshold:100,useIntersectionObserver:!0};const h=d;var v=r(296),m=r.n(v),O=r(96),w=r.n(O),g=function(e){var t=getComputedStyle(e,null);return t.getPropertyValue("overflow")+t.getPropertyValue("overflow-y")+t.getPropertyValue("overflow-x")};const P=function(e){if(!(e instanceof HTMLElement))return window;for(var t=e;t&&t instanceof HTMLElement;){if(/(scroll|auto)/.test(g(t)))return t;t=t.parentNode;}return window};function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}var T=["delayMethod","delayTime"];function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);}return e},S.apply(this,arguments)}function E(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==j(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==j(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===j(n)?n:String(n)),o);}var n;}function L(e,t){return L=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},L(e,t)}function _(e,t){if(t&&("object"===j(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return I(e)}function I(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function x(e){return x=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},x(e)}var R=function(){return "undefined"==typeof window?0:window.scrollX||window.pageXOffset},k=function(){return "undefined"==typeof window?0:window.scrollY||window.pageYOffset};const D=function(e){var r=function(r){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&L(e,t);}(l,r);var o,n,c,u,s=(c=l,u=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=x(c);if(u){var r=x(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return _(this,e)});function l(e){var r;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),(r=s.call(this,e)).useIntersectionObserver=e.useIntersectionObserver&&i(),r.useIntersectionObserver)return _(r);var o=r.onChangeScroll.bind(I(r));return "debounce"===e.delayMethod?r.delayedScroll=m()(o,e.delayTime):"throttle"===e.delayMethod&&(r.delayedScroll=w()(o,e.delayTime)),r.state={scrollPosition:{x:R(),y:k()}},r.baseComponentRef=t().createRef(),r}return o=l,(n=[{key:"componentDidMount",value:function(){this.addListeners();}},{key:"componentWillUnmount",value:function(){this.removeListeners();}},{key:"componentDidUpdate",value:function(){"undefined"==typeof window||this.useIntersectionObserver||P(this.baseComponentRef.current)!==this.scrollElement&&(this.removeListeners(),this.addListeners());}},{key:"addListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement=P(this.baseComponentRef.current),this.scrollElement.addEventListener("scroll",this.delayedScroll,{passive:!0}),window.addEventListener("resize",this.delayedScroll,{passive:!0}),this.scrollElement!==window&&window.addEventListener("scroll",this.delayedScroll,{passive:!0}));}},{key:"removeListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll),this.scrollElement!==window&&window.removeEventListener("scroll",this.delayedScroll));}},{key:"onChangeScroll",value:function(){this.useIntersectionObserver||this.setState({scrollPosition:{x:R(),y:k()}});}},{key:"render",value:function(){var r=this.props,o=(r.delayMethod,r.delayTime,function(e,t){if(null==e)return {};var r,o,n=function(e,t){if(null==e)return {};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r]);}return n}(r,T)),n=this.useIntersectionObserver?null:this.state.scrollPosition;return t().createElement(e,S({forwardRef:this.baseComponentRef,scrollPosition:n},o))}}])&&E(o.prototype,n),Object.defineProperty(o,"prototype",{writable:!1}),l}(t().Component);return r.propTypes={delayMethod:n.PropTypes.oneOf(["debounce","throttle"]),delayTime:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool},r.defaultProps={delayMethod:"throttle",delayTime:300,useIntersectionObserver:!0},r};function C(e){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},C(e)}function B(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==C(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==C(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===C(n)?n:String(n)),o);}var n;}function M(e,t){return M=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},M(e,t)}function N(e){return N=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},N(e)}var V=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&M(e,t);}(u,e);var r,o,n,i,c=(n=u,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=N(n);if(i){var r=N(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===C(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function u(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),c.call(this,e)}return r=u,(o=[{key:"render",value:function(){return t().createElement(h,this.props)}}])&&B(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),u}(t().Component);const W=D(V);function z(e){return z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},z(e)}function $(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==z(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==z(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===z(n)?n:String(n)),o);}var n;}function U(e,t){return U=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},U(e,t)}function F(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function q(e){return q=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},q(e)}var H=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&U(e,t);}(s,e);var r,o,n,c,u=(n=s,c=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=q(n);if(c){var r=q(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===z(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return F(e)}(this,e)});function s(e){var t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),t=u.call(this,e);var r=e.afterLoad,o=e.beforeLoad,n=e.scrollPosition,i=e.visibleByDefault;return t.state={visible:i},i&&(o(),r()),t.onVisible=t.onVisible.bind(F(t)),t.isScrollTracked=Boolean(n&&Number.isFinite(n.x)&&n.x>=0&&Number.isFinite(n.y)&&n.y>=0),t}return r=s,(o=[{key:"componentDidUpdate",value:function(e,t){t.visible!==this.state.visible&&this.props.afterLoad();}},{key:"onVisible",value:function(){this.props.beforeLoad(),this.setState({visible:!0});}},{key:"render",value:function(){if(this.state.visible)return this.props.children;var e=this.props,r=e.className,o=e.delayMethod,n=e.delayTime,c=e.height,u=e.placeholder,s=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.width;return this.isScrollTracked||f&&i()?t().createElement(h,{className:r,height:c,onVisible:this.onVisible,placeholder:u,scrollPosition:s,style:l,threshold:a,useIntersectionObserver:f,width:p}):t().createElement(W,{className:r,delayMethod:o,delayTime:n,height:c,onVisible:this.onVisible,placeholder:u,style:l,threshold:a,width:p})}}])&&$(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),s}(t().Component);H.propTypes={afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool},H.defaultProps={afterLoad:function(){return {}},beforeLoad:function(){return {}},useIntersectionObserver:!0,visibleByDefault:!1};const Y=H;function X(e){return X="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},X(e)}var A=["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","useIntersectionObserver","visibleByDefault","wrapperClassName","wrapperProps"];function G(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o);}return r}function J(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?G(Object(r),!0).forEach((function(t){K(e,t,r[t]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):G(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t));}));}return e}function K(e,t,r){return (t=ee(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Q(){return Q=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);}return e},Q.apply(this,arguments)}function Z(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,ee(o.key),o);}}function ee(e){var t=function(e,t){if("object"!==X(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==X(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return "symbol"===X(t)?t:String(t)}function te(e,t){return te=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},te(e,t)}function re(e){return re=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},re(e)}var oe=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&te(e,t);}(u,e);var r,o,n,i,c=(n=u,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=re(n);if(i){var r=re(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===X(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function u(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),(t=c.call(this,e)).state={loaded:!1},t}return r=u,(o=[{key:"onImageLoad",value:function(){var e=this;return this.state.loaded?null:function(t){e.props.onLoad(t),e.props.afterLoad(),e.setState({loaded:!0});}}},{key:"getImg",value:function(){var e=this.props,r=(e.afterLoad,e.beforeLoad,e.delayMethod,e.delayTime,e.effect,e.placeholder,e.placeholderSrc,e.scrollPosition,e.threshold,e.useIntersectionObserver,e.visibleByDefault,e.wrapperClassName,e.wrapperProps,function(e,t){if(null==e)return {};var r,o,n=function(e,t){if(null==e)return {};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r]);}return n}(e,A));return t().createElement("img",Q({},r,{onLoad:this.onImageLoad()}))}},{key:"getLazyLoadImage",value:function(){var e=this.props,r=e.beforeLoad,o=e.className,n=e.delayMethod,i=e.delayTime,c=e.height,u=e.placeholder,s=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.visibleByDefault,y=e.width;return t().createElement(Y,{beforeLoad:r,className:o,delayMethod:n,delayTime:i,height:c,placeholder:u,scrollPosition:s,style:l,threshold:a,useIntersectionObserver:f,visibleByDefault:p,width:y},this.getImg())}},{key:"getWrappedLazyLoadImage",value:function(e){var r=this.props,o=r.effect,n=r.height,i=r.placeholderSrc,c=r.width,u=r.wrapperClassName,s=r.wrapperProps,l=this.state.loaded,a=l?" lazy-load-image-loaded":"",f=l||!i?{}:{backgroundImage:"url(".concat(i,")"),backgroundSize:"100% 100%"};return t().createElement("span",Q({className:u+" lazy-load-image-background "+o+a,style:J(J({},f),{},{color:"transparent",display:"inline-block",height:n,width:c})},s),e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,o=e.visibleByDefault,n=e.wrapperClassName,i=e.wrapperProps,c=this.getLazyLoadImage();return (t||r)&&!o||n||i?this.getWrappedLazyLoadImage(c):c}}])&&Z(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),u}(t().Component);oe.propTypes={onLoad:n.PropTypes.func,afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,delayMethod:n.PropTypes.string,delayTime:n.PropTypes.number,effect:n.PropTypes.string,placeholderSrc:n.PropTypes.string,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool,wrapperClassName:n.PropTypes.string,wrapperProps:n.PropTypes.object},oe.defaultProps={onLoad:function(){},afterLoad:function(){return {}},beforeLoad:function(){return {}},delayMethod:"throttle",delayTime:300,effect:"",placeholderSrc:null,threshold:100,useIntersectionObserver:!0,visibleByDefault:!1,wrapperClassName:""};const ne=oe;})(),build.exports=o;})();
|
|
190
160
|
|
|
191
161
|
var css_248z = ".lazy-load-image-background.opacity {\n opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n opacity: 1;\n transition: opacity .3s;\n}\n";
|
|
192
|
-
|
|
162
|
+
styleInject(css_248z);
|
|
193
163
|
|
|
194
164
|
const convertMsToHMS = ms => {
|
|
195
165
|
const seconds = Math.floor(ms / 1000);
|
|
@@ -209,9 +179,9 @@ const convertMsToHMS = ms => {
|
|
|
209
179
|
const shouldForwardProp$1 = prop => {
|
|
210
180
|
return prop !== 'theme' && !prop.startsWith('$');
|
|
211
181
|
};
|
|
212
|
-
const SummaryCard$1 =
|
|
182
|
+
const SummaryCard$1 = styled.div.withConfig({
|
|
213
183
|
shouldForwardProp: shouldForwardProp$1
|
|
214
|
-
}).attrs(
|
|
184
|
+
}).attrs(applyDefaultTheme)`
|
|
215
185
|
display: flex;
|
|
216
186
|
flex-direction: column;
|
|
217
187
|
border-radius: 4px;
|
|
@@ -220,33 +190,33 @@ const SummaryCard$1 = styled__default["default"].div.withConfig({
|
|
|
220
190
|
|
|
221
191
|
${props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null}
|
|
222
192
|
`;
|
|
223
|
-
const Gutter =
|
|
193
|
+
const Gutter = styled.div.withConfig({
|
|
224
194
|
shouldForwardProp: shouldForwardProp$1
|
|
225
|
-
}).attrs(
|
|
195
|
+
}).attrs(applyDefaultTheme)`
|
|
226
196
|
${props => {
|
|
227
197
|
if (props.renderAsMargin) {
|
|
228
|
-
return
|
|
198
|
+
return css`
|
|
229
199
|
margin-bottom: ${props.$gutter || 8}px;
|
|
230
200
|
`;
|
|
231
201
|
} else {
|
|
232
|
-
return
|
|
202
|
+
return css`
|
|
233
203
|
padding-bottom: ${props.$gutter || 8}px;
|
|
234
204
|
`;
|
|
235
205
|
}
|
|
236
206
|
}}
|
|
237
207
|
padding-bottom: ${props => props.$gutter || 8}px;
|
|
238
208
|
`;
|
|
239
|
-
const Header =
|
|
209
|
+
const Header = styled.div.withConfig({
|
|
240
210
|
shouldForwardProp: shouldForwardProp$1
|
|
241
|
-
}).attrs(
|
|
211
|
+
}).attrs(applyDefaultTheme)`
|
|
242
212
|
display: flex;
|
|
243
213
|
align-items: center;
|
|
244
214
|
justify-content: space-between;
|
|
245
215
|
padding: 0 16px;
|
|
246
216
|
`;
|
|
247
|
-
const HeaderLeft =
|
|
217
|
+
const HeaderLeft = styled.div.withConfig({
|
|
248
218
|
shouldForwardProp: shouldForwardProp$1
|
|
249
|
-
}).attrs(
|
|
219
|
+
}).attrs(applyDefaultTheme)`
|
|
250
220
|
display: flex;
|
|
251
221
|
align-items: center;
|
|
252
222
|
justify-content: flex-start;
|
|
@@ -255,9 +225,9 @@ const HeaderLeft = styled__default["default"].div.withConfig({
|
|
|
255
225
|
margin-right: 4px;
|
|
256
226
|
}
|
|
257
227
|
`;
|
|
258
|
-
const HeaderRight =
|
|
228
|
+
const HeaderRight = styled.div.withConfig({
|
|
259
229
|
shouldForwardProp: shouldForwardProp$1
|
|
260
|
-
}).attrs(
|
|
230
|
+
}).attrs(applyDefaultTheme)`
|
|
261
231
|
display: flex;
|
|
262
232
|
align-items: center;
|
|
263
233
|
justify-content: flex-end;
|
|
@@ -266,9 +236,9 @@ const HeaderRight = styled__default["default"].div.withConfig({
|
|
|
266
236
|
margin-left: 4px;
|
|
267
237
|
}
|
|
268
238
|
`;
|
|
269
|
-
const Title =
|
|
239
|
+
const Title = styled.span.withConfig({
|
|
270
240
|
shouldForwardProp: shouldForwardProp$1
|
|
271
|
-
}).attrs(
|
|
241
|
+
}).attrs(applyDefaultTheme)`
|
|
272
242
|
display: inline-block;
|
|
273
243
|
padding: 0 16px;
|
|
274
244
|
font: normal normal 500 14px/19px Roboto;
|
|
@@ -282,9 +252,9 @@ const Title = styled__default["default"].span.withConfig({
|
|
|
282
252
|
|
|
283
253
|
${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
|
|
284
254
|
`;
|
|
285
|
-
const Description =
|
|
255
|
+
const Description = styled.span.withConfig({
|
|
286
256
|
shouldForwardProp: shouldForwardProp$1
|
|
287
|
-
}).attrs(
|
|
257
|
+
}).attrs(applyDefaultTheme)`
|
|
288
258
|
padding: 0 16px;
|
|
289
259
|
text-align: left;
|
|
290
260
|
font: normal normal normal 12px/16px Roboto;
|
|
@@ -298,20 +268,20 @@ const Description = styled__default["default"].span.withConfig({
|
|
|
298
268
|
|
|
299
269
|
${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
|
|
300
270
|
`;
|
|
301
|
-
const Instruction =
|
|
271
|
+
const Instruction = styled.div.withConfig({
|
|
302
272
|
shouldForwardProp: shouldForwardProp$1
|
|
303
|
-
}).attrs(
|
|
304
|
-
const Footer =
|
|
273
|
+
}).attrs(applyDefaultTheme)``;
|
|
274
|
+
const Footer = styled.div.withConfig({
|
|
305
275
|
shouldForwardProp: shouldForwardProp$1
|
|
306
|
-
}).attrs(
|
|
276
|
+
}).attrs(applyDefaultTheme)`
|
|
307
277
|
display: flex;
|
|
308
278
|
align-items: center;
|
|
309
279
|
justify-content: space-between;
|
|
310
280
|
padding: 0 16px;
|
|
311
281
|
`;
|
|
312
|
-
const FooterLeft =
|
|
282
|
+
const FooterLeft = styled.div.withConfig({
|
|
313
283
|
shouldForwardProp: shouldForwardProp$1
|
|
314
|
-
}).attrs(
|
|
284
|
+
}).attrs(applyDefaultTheme)`
|
|
315
285
|
display: flex;
|
|
316
286
|
align-items: center;
|
|
317
287
|
justify-content: flex-start;
|
|
@@ -320,9 +290,9 @@ const FooterLeft = styled__default["default"].div.withConfig({
|
|
|
320
290
|
margin-right: 4px;
|
|
321
291
|
}
|
|
322
292
|
`;
|
|
323
|
-
const FooterRight =
|
|
293
|
+
const FooterRight = styled.div.withConfig({
|
|
324
294
|
shouldForwardProp: shouldForwardProp$1
|
|
325
|
-
}).attrs(
|
|
295
|
+
}).attrs(applyDefaultTheme)`
|
|
326
296
|
display: flex;
|
|
327
297
|
align-items: center;
|
|
328
298
|
justify-content: flex-end;
|
|
@@ -331,13 +301,13 @@ const FooterRight = styled__default["default"].div.withConfig({
|
|
|
331
301
|
margin-left: 4px;
|
|
332
302
|
}
|
|
333
303
|
`;
|
|
334
|
-
|
|
304
|
+
styled(FloatingArrow).withConfig({
|
|
335
305
|
shouldForwardProp: shouldForwardProp$1
|
|
336
|
-
}).attrs(
|
|
306
|
+
}).attrs(applyDefaultTheme)`
|
|
337
307
|
${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
|
|
338
308
|
`;
|
|
339
309
|
|
|
340
|
-
const SummaryCard = React__default
|
|
310
|
+
const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
|
|
341
311
|
activeSummaryCard,
|
|
342
312
|
title,
|
|
343
313
|
description,
|
|
@@ -358,22 +328,22 @@ const SummaryCard = React__default["default"].forwardRef(function AssetSummaryCa
|
|
|
358
328
|
const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
|
|
359
329
|
const shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
|
|
360
330
|
if (!activeSummaryCard) return null;
|
|
361
|
-
return React__default
|
|
331
|
+
return React__default.createElement(SummaryCard$1, _extends$4({
|
|
362
332
|
ref: forwardedRef,
|
|
363
333
|
width: width,
|
|
364
334
|
useBorder: useBorder
|
|
365
335
|
}, props, {
|
|
366
336
|
view: view
|
|
367
|
-
}), shouldRenderHeader && React__default
|
|
337
|
+
}), shouldRenderHeader && React__default.createElement(React__default.Fragment, null, React__default.createElement(Gutter, {
|
|
368
338
|
gutter: 8
|
|
369
|
-
}), React__default
|
|
339
|
+
}), React__default.createElement(Header, null, React__default.createElement(HeaderLeft, null, headerLeft), React__default.createElement(HeaderRight, null, headerRight))), React__default.createElement(Gutter, {
|
|
370
340
|
gutter: shouldRenderHeader ? 8 : 16
|
|
371
|
-
}), title && React__default
|
|
341
|
+
}), title && React__default.createElement(Title, null, title), shouldAddGutterAfterTitle && React__default.createElement(Gutter, {
|
|
372
342
|
gutter: 4
|
|
373
|
-
}), description && React__default
|
|
343
|
+
}), description && React__default.createElement(Description, null, description), React__default.createElement(Gutter, {
|
|
374
344
|
gutter: 16
|
|
375
|
-
}), shouldRenderInstructions && React__default
|
|
376
|
-
icon: React__default
|
|
345
|
+
}), shouldRenderInstructions && React__default.createElement(Instruction, null, React__default.createElement(Alert, {
|
|
346
|
+
icon: React__default.createElement(SvgWarningCircle, null),
|
|
377
347
|
alertMessage: instructions,
|
|
378
348
|
type: instructionsType,
|
|
379
349
|
fontSize: 12,
|
|
@@ -381,25 +351,25 @@ const SummaryCard = React__default["default"].forwardRef(function AssetSummaryCa
|
|
|
381
351
|
horizontalPadding: 16,
|
|
382
352
|
width: width,
|
|
383
353
|
lineClamp: 1
|
|
384
|
-
})), shouldAddGutterAfterInstructions && React__default
|
|
354
|
+
})), shouldAddGutterAfterInstructions && React__default.createElement(Gutter, {
|
|
385
355
|
gutter: 16
|
|
386
|
-
}), shouldRenderFooter && React__default
|
|
356
|
+
}), shouldRenderFooter && React__default.createElement(Footer, null, React__default.createElement(FooterLeft, null, footerLeft), React__default.createElement(FooterRight, null, footerRight)), shouldRenderFooter && React__default.createElement(Gutter, {
|
|
387
357
|
gutter: 16
|
|
388
358
|
}));
|
|
389
359
|
});
|
|
390
360
|
SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
391
|
-
activeSummaryCard:
|
|
392
|
-
title:
|
|
393
|
-
description:
|
|
394
|
-
instructions:
|
|
395
|
-
instructionsType:
|
|
396
|
-
headerLeft:
|
|
397
|
-
headerRight:
|
|
398
|
-
footerLeft:
|
|
399
|
-
footerRight:
|
|
400
|
-
width:
|
|
401
|
-
useBorder:
|
|
402
|
-
view:
|
|
361
|
+
activeSummaryCard: PropTypes.bool,
|
|
362
|
+
title: PropTypes.string,
|
|
363
|
+
description: PropTypes.string,
|
|
364
|
+
instructions: PropTypes.string,
|
|
365
|
+
instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
|
|
366
|
+
headerLeft: PropTypes.node,
|
|
367
|
+
headerRight: PropTypes.node,
|
|
368
|
+
footerLeft: PropTypes.node,
|
|
369
|
+
footerRight: PropTypes.node,
|
|
370
|
+
width: PropTypes.number,
|
|
371
|
+
useBorder: PropTypes.bool,
|
|
372
|
+
view: PropTypes.string
|
|
403
373
|
} : {};
|
|
404
374
|
SummaryCard.defaultProps = {
|
|
405
375
|
title: '',
|
|
@@ -417,22 +387,22 @@ SummaryCard.defaultProps = {
|
|
|
417
387
|
const shouldForwardProp = prop => {
|
|
418
388
|
return prop !== 'theme' && !prop.startsWith('$');
|
|
419
389
|
};
|
|
420
|
-
const AssetGalleryWrapper$1 =
|
|
390
|
+
const AssetGalleryWrapper$1 = styled.div.withConfig({
|
|
421
391
|
shouldForwardProp
|
|
422
|
-
}).attrs(
|
|
423
|
-
${props => props.disabled &&
|
|
392
|
+
}).attrs(applyDefaultTheme)`
|
|
393
|
+
${props => props.disabled && css`
|
|
424
394
|
cursor: not-allowed;
|
|
425
395
|
`};
|
|
426
396
|
`;
|
|
427
|
-
const Reference =
|
|
397
|
+
const Reference = styled.div.withConfig({
|
|
428
398
|
shouldForwardProp
|
|
429
|
-
}).attrs(
|
|
399
|
+
}).attrs(applyDefaultTheme)`
|
|
430
400
|
width: 100%;
|
|
431
401
|
height: 100%;
|
|
432
402
|
`;
|
|
433
|
-
const AssetGalleryCompactCard$2 =
|
|
403
|
+
const AssetGalleryCompactCard$2 = styled.div.withConfig({
|
|
434
404
|
shouldForwardProp
|
|
435
|
-
}).attrs(
|
|
405
|
+
}).attrs(applyDefaultTheme)`
|
|
436
406
|
display: block;
|
|
437
407
|
height: 100%;
|
|
438
408
|
padding-left: ${props => props.selected ? 1 : 0}px;
|
|
@@ -445,12 +415,12 @@ const AssetGalleryCompactCard$2 = styled__default["default"].div.withConfig({
|
|
|
445
415
|
|
|
446
416
|
${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))};
|
|
447
417
|
|
|
448
|
-
${props => props.disabled &&
|
|
418
|
+
${props => props.disabled && css`
|
|
449
419
|
pointer-events: none;
|
|
450
420
|
opacity: 0.4;
|
|
451
421
|
`};
|
|
452
422
|
|
|
453
|
-
${props => props.extendedSelectMode &&
|
|
423
|
+
${props => props.extendedSelectMode && css`
|
|
454
424
|
cursor: pointer;
|
|
455
425
|
`}
|
|
456
426
|
video {
|
|
@@ -466,7 +436,7 @@ const AssetGalleryCompactCard$2 = styled__default["default"].div.withConfig({
|
|
|
466
436
|
}
|
|
467
437
|
}
|
|
468
438
|
`;
|
|
469
|
-
const Figure$1 =
|
|
439
|
+
const Figure$1 = styled.figure`
|
|
470
440
|
display: flex;
|
|
471
441
|
flex-direction: row;
|
|
472
442
|
flex-wrap: nowrap;
|
|
@@ -486,33 +456,33 @@ const Figure$1 = styled__default["default"].figure`
|
|
|
486
456
|
display: block;
|
|
487
457
|
height: 100%;
|
|
488
458
|
width: 100%;
|
|
489
|
-
${props => props.$hasHeightAndWidth ?
|
|
459
|
+
${props => props.$hasHeightAndWidth ? css`
|
|
490
460
|
object-fit: cover;
|
|
491
|
-
` :
|
|
461
|
+
` : css`
|
|
492
462
|
object-fit: contain;
|
|
493
463
|
`}
|
|
494
464
|
}
|
|
495
465
|
`;
|
|
496
|
-
const FigureOverlayBackdrop$1 =
|
|
466
|
+
const FigureOverlayBackdrop$1 = styled.div.withConfig({
|
|
497
467
|
shouldForwardProp
|
|
498
|
-
}).attrs(
|
|
468
|
+
}).attrs(applyDefaultTheme)`
|
|
499
469
|
position: absolute;
|
|
500
470
|
inset: 0;
|
|
501
471
|
opacity: ${props => props.selected ? 0.6 : 0};
|
|
502
472
|
background-color: ${props => props.selected ? '#ACCEF7' : 'transparent'};
|
|
503
473
|
`;
|
|
504
|
-
const Overlay$1 =
|
|
474
|
+
const Overlay$1 = styled.div.withConfig({
|
|
505
475
|
shouldForwardProp
|
|
506
|
-
}).attrs(
|
|
476
|
+
}).attrs(applyDefaultTheme)`
|
|
507
477
|
position: absolute;
|
|
508
478
|
top: 0;
|
|
509
479
|
bottom: 0;
|
|
510
480
|
left: 0;
|
|
511
481
|
right: 0;
|
|
512
482
|
`;
|
|
513
|
-
const OverlayBackdrop$1 =
|
|
483
|
+
const OverlayBackdrop$1 = styled.div.withConfig({
|
|
514
484
|
shouldForwardProp
|
|
515
|
-
}).attrs(
|
|
485
|
+
}).attrs(applyDefaultTheme)`
|
|
516
486
|
position: absolute;
|
|
517
487
|
top: 0;
|
|
518
488
|
bottom: 0;
|
|
@@ -521,7 +491,7 @@ const OverlayBackdrop$1 = styled__default["default"].div.withConfig({
|
|
|
521
491
|
opacity: 0;
|
|
522
492
|
transition: opacity 220ms;
|
|
523
493
|
|
|
524
|
-
${props => !props.selected ?
|
|
494
|
+
${props => !props.selected ? css`
|
|
525
495
|
background: radial-gradient(
|
|
526
496
|
ellipse at center,
|
|
527
497
|
rgba(0, 0, 0, 0.3) 27%,
|
|
@@ -529,16 +499,16 @@ const OverlayBackdrop$1 = styled__default["default"].div.withConfig({
|
|
|
529
499
|
rgba(0, 0, 0, 0.7) 90%
|
|
530
500
|
);
|
|
531
501
|
` : null}
|
|
532
|
-
${props => (props.selected || props.$softSelected) &&
|
|
502
|
+
${props => (props.selected || props.$softSelected) && css`
|
|
533
503
|
opacity: 1;
|
|
534
504
|
`}
|
|
535
505
|
${Overlay$1}:hover & {
|
|
536
506
|
opacity: 1;
|
|
537
507
|
}
|
|
538
508
|
`;
|
|
539
|
-
const OverlayInfo$1 =
|
|
509
|
+
const OverlayInfo$1 = styled.div.withConfig({
|
|
540
510
|
shouldForwardProp
|
|
541
|
-
}).attrs(
|
|
511
|
+
}).attrs(applyDefaultTheme)`
|
|
542
512
|
position: absolute;
|
|
543
513
|
top: 0;
|
|
544
514
|
bottom: 0;
|
|
@@ -554,9 +524,9 @@ const OverlayInfo$1 = styled__default["default"].div.withConfig({
|
|
|
554
524
|
word-wrap: break-word;
|
|
555
525
|
}
|
|
556
526
|
`;
|
|
557
|
-
const OverlayCompleted =
|
|
527
|
+
const OverlayCompleted = styled.div.withConfig({
|
|
558
528
|
shouldForwardProp
|
|
559
|
-
}).attrs(
|
|
529
|
+
}).attrs(applyDefaultTheme)`
|
|
560
530
|
position: absolute;
|
|
561
531
|
top: 0;
|
|
562
532
|
bottom: 0;
|
|
@@ -567,12 +537,12 @@ const OverlayCompleted = styled__default["default"].div.withConfig({
|
|
|
567
537
|
border: 3px solid;
|
|
568
538
|
${props => {
|
|
569
539
|
if (props.$softSelected) return null;
|
|
570
|
-
return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'),
|
|
540
|
+
return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), rgba(props.theme.getColor('emerald-500'), 0.7));
|
|
571
541
|
}};
|
|
572
542
|
`;
|
|
573
|
-
const OverlayHasError =
|
|
543
|
+
const OverlayHasError = styled.div.withConfig({
|
|
574
544
|
shouldForwardProp
|
|
575
|
-
}).attrs(
|
|
545
|
+
}).attrs(applyDefaultTheme)`
|
|
576
546
|
position: absolute;
|
|
577
547
|
top: 0;
|
|
578
548
|
bottom: 0;
|
|
@@ -583,12 +553,12 @@ const OverlayHasError = styled__default["default"].div.withConfig({
|
|
|
583
553
|
border: 3px solid;
|
|
584
554
|
${props => {
|
|
585
555
|
if (props.$softSelected) return null;
|
|
586
|
-
return props.theme.themeProp('border-color', props.theme.getColor('red-600'),
|
|
556
|
+
return props.theme.themeProp('border-color', props.theme.getColor('red-600'), rgba(props.theme.getColor('red-500'), 0.7));
|
|
587
557
|
}}
|
|
588
558
|
`;
|
|
589
|
-
const OverlaySelected$1 =
|
|
559
|
+
const OverlaySelected$1 = styled.div.withConfig({
|
|
590
560
|
shouldForwardProp
|
|
591
|
-
}).attrs(
|
|
561
|
+
}).attrs(applyDefaultTheme)`
|
|
592
562
|
position: absolute;
|
|
593
563
|
top: 0;
|
|
594
564
|
bottom: 0;
|
|
@@ -601,7 +571,7 @@ const OverlaySelected$1 = styled__default["default"].div.withConfig({
|
|
|
601
571
|
|
|
602
572
|
${props => {
|
|
603
573
|
if (props.$softSelected) {
|
|
604
|
-
return props.theme.themeProp('border-color',
|
|
574
|
+
return props.theme.themeProp('border-color', rgba(props.theme.getColor('gray-100'), 0.5), rgba(props.theme.getColor('gray-700'), 0.5));
|
|
605
575
|
}
|
|
606
576
|
if (props.selected) {
|
|
607
577
|
if (props.customSelectedBorder) {
|
|
@@ -613,9 +583,9 @@ const OverlaySelected$1 = styled__default["default"].div.withConfig({
|
|
|
613
583
|
return props.theme.themeProp('border-color', 'transparent', 'transparent');
|
|
614
584
|
}};
|
|
615
585
|
`;
|
|
616
|
-
const OverlayInfoTop$1 =
|
|
586
|
+
const OverlayInfoTop$1 = styled.div.withConfig({
|
|
617
587
|
shouldForwardProp
|
|
618
|
-
}).attrs(
|
|
588
|
+
}).attrs(applyDefaultTheme)`
|
|
619
589
|
position: absolute;
|
|
620
590
|
left: 0;
|
|
621
591
|
right: 0;
|
|
@@ -623,9 +593,9 @@ const OverlayInfoTop$1 = styled__default["default"].div.withConfig({
|
|
|
623
593
|
padding: 8px;
|
|
624
594
|
display: flex;
|
|
625
595
|
`;
|
|
626
|
-
const OverlayInfoTopActions$1 =
|
|
596
|
+
const OverlayInfoTopActions$1 = styled.div.withConfig({
|
|
627
597
|
shouldForwardProp
|
|
628
|
-
}).attrs(
|
|
598
|
+
}).attrs(applyDefaultTheme)`
|
|
629
599
|
position: absolute;
|
|
630
600
|
top: 0;
|
|
631
601
|
right: 0;
|
|
@@ -639,9 +609,9 @@ const OverlayInfoTopActions$1 = styled__default["default"].div.withConfig({
|
|
|
639
609
|
|
|
640
610
|
opacity: ${props => props.$isOverlayHovered ? 1 : 0};
|
|
641
611
|
`;
|
|
642
|
-
const OverlayInfoTopLeft =
|
|
612
|
+
const OverlayInfoTopLeft = styled.div.withConfig({
|
|
643
613
|
shouldForwardProp
|
|
644
|
-
}).attrs(
|
|
614
|
+
}).attrs(applyDefaultTheme)`
|
|
645
615
|
opacity: 1;
|
|
646
616
|
display: ${props => props?.$collapseExtraInfo ? 'none' : 'block'};
|
|
647
617
|
|
|
@@ -649,9 +619,9 @@ const OverlayInfoTopLeft = styled__default["default"].div.withConfig({
|
|
|
649
619
|
opacity: 0;
|
|
650
620
|
}
|
|
651
621
|
`;
|
|
652
|
-
const OverlayInfoTopWarning$1 =
|
|
622
|
+
const OverlayInfoTopWarning$1 = styled.div.withConfig({
|
|
653
623
|
shouldForwardProp
|
|
654
|
-
}).attrs(
|
|
624
|
+
}).attrs(applyDefaultTheme)`
|
|
655
625
|
margin-left: auto;
|
|
656
626
|
height: 24px;
|
|
657
627
|
width: 24px;
|
|
@@ -670,9 +640,9 @@ const OverlayInfoTopWarning$1 = styled__default["default"].div.withConfig({
|
|
|
670
640
|
opacity: 0;
|
|
671
641
|
}
|
|
672
642
|
`;
|
|
673
|
-
const OverlayInfoBottom$1 =
|
|
643
|
+
const OverlayInfoBottom$1 = styled.div.withConfig({
|
|
674
644
|
shouldForwardProp
|
|
675
|
-
}).attrs(
|
|
645
|
+
}).attrs(applyDefaultTheme)`
|
|
676
646
|
position: absolute;
|
|
677
647
|
left: 0;
|
|
678
648
|
right: 0;
|
|
@@ -680,9 +650,9 @@ const OverlayInfoBottom$1 = styled__default["default"].div.withConfig({
|
|
|
680
650
|
padding: 8px;
|
|
681
651
|
display: flex;
|
|
682
652
|
`;
|
|
683
|
-
const OverlayInfoBottomSelectButton$1 =
|
|
653
|
+
const OverlayInfoBottomSelectButton$1 = styled.div.withConfig({
|
|
684
654
|
shouldForwardProp
|
|
685
|
-
}).attrs(
|
|
655
|
+
}).attrs(applyDefaultTheme)`
|
|
686
656
|
opacity: ${props => props.selected ? 1 : 0};
|
|
687
657
|
flex-shrink: 0;
|
|
688
658
|
cursor: pointer;
|
|
@@ -700,9 +670,9 @@ const OverlayInfoBottomSelectButton$1 = styled__default["default"].div.withConfi
|
|
|
700
670
|
opacity: 1;
|
|
701
671
|
}
|
|
702
672
|
`;
|
|
703
|
-
const OverlayInfoBottomMediaIcon$1 =
|
|
673
|
+
const OverlayInfoBottomMediaIcon$1 = styled.div.withConfig({
|
|
704
674
|
shouldForwardProp
|
|
705
|
-
}).attrs(
|
|
675
|
+
}).attrs(applyDefaultTheme)`
|
|
706
676
|
margin-left: auto;
|
|
707
677
|
opacity: 1;
|
|
708
678
|
|
|
@@ -710,9 +680,9 @@ const OverlayInfoBottomMediaIcon$1 = styled__default["default"].div.withConfig({
|
|
|
710
680
|
opacity: 0;
|
|
711
681
|
}
|
|
712
682
|
`;
|
|
713
|
-
const ConsumerDefinedOverlay$1 =
|
|
683
|
+
const ConsumerDefinedOverlay$1 = styled.div.withConfig({
|
|
714
684
|
shouldForwardProp
|
|
715
|
-
}).attrs(
|
|
685
|
+
}).attrs(applyDefaultTheme)`
|
|
716
686
|
position: absolute;
|
|
717
687
|
top: 0;
|
|
718
688
|
bottom: 0;
|
|
@@ -720,23 +690,23 @@ const ConsumerDefinedOverlay$1 = styled__default["default"].div.withConfig({
|
|
|
720
690
|
right: 0;
|
|
721
691
|
pointer-events: none;
|
|
722
692
|
`;
|
|
723
|
-
|
|
693
|
+
styled.div`
|
|
724
694
|
margin: 4px;
|
|
725
695
|
`;
|
|
726
|
-
|
|
696
|
+
styled.div.withConfig({
|
|
727
697
|
shouldForwardProp
|
|
728
|
-
}).attrs(
|
|
698
|
+
}).attrs(applyDefaultTheme)`
|
|
729
699
|
${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
|
|
730
700
|
padding: 4px 8px;
|
|
731
701
|
border-radius: 4px;
|
|
732
702
|
`;
|
|
733
|
-
const StyledFloatingArrow$1 =
|
|
703
|
+
const StyledFloatingArrow$1 = styled(FloatingArrow).withConfig({
|
|
734
704
|
shouldForwardProp
|
|
735
|
-
}).attrs(
|
|
705
|
+
}).attrs(applyDefaultTheme)`
|
|
736
706
|
${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
|
|
737
707
|
`;
|
|
738
708
|
|
|
739
|
-
const AssetActions =
|
|
709
|
+
const AssetActions = styled.div.attrs(applyDefaultTheme)`
|
|
740
710
|
font-family: ${props => props.theme.primaryFontFamily};
|
|
741
711
|
font-size: 1rem;
|
|
742
712
|
font-weight: 500;
|
|
@@ -746,12 +716,137 @@ const AssetActions = styled__default["default"].div.attrs(defaultTheme.applyDefa
|
|
|
746
716
|
gap: 8px;
|
|
747
717
|
`;
|
|
748
718
|
|
|
749
|
-
const
|
|
719
|
+
const AssetAction$1 = styled.div.attrs(applyDefaultTheme)`
|
|
720
|
+
font-family: ${props => props.theme.primaryFontFamily};
|
|
721
|
+
`;
|
|
722
|
+
const AssetActionButton = styled.div.attrs(applyDefaultTheme)`
|
|
723
|
+
border-radius: 50%;
|
|
724
|
+
width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto'};
|
|
725
|
+
height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto'};
|
|
726
|
+
cursor: pointer;
|
|
727
|
+
display: flex;
|
|
728
|
+
justify-content: center;
|
|
729
|
+
align-items: center;
|
|
730
|
+
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
731
|
+
${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
|
|
732
|
+
svg {
|
|
733
|
+
pointer-events: none;
|
|
734
|
+
width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto'};
|
|
735
|
+
height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto'};
|
|
736
|
+
${props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
|
|
737
|
+
}
|
|
738
|
+
`;
|
|
739
|
+
const ActionTitle = styled.div.attrs(applyDefaultTheme)`
|
|
740
|
+
font-size: 14px;
|
|
741
|
+
border-radius: 4px;
|
|
742
|
+
padding: 8px 12px;
|
|
743
|
+
white-space: nowrap;
|
|
744
|
+
color: white;
|
|
745
|
+
background: ${props => props.theme.getColor('gray-700')};
|
|
746
|
+
`;
|
|
747
|
+
const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)`
|
|
748
|
+
fill: ${props => props.theme.getColor('gray-700')};
|
|
749
|
+
`;
|
|
750
|
+
const Floating = styled.div.attrs(applyDefaultTheme)`
|
|
751
|
+
pointer-events: none;
|
|
752
|
+
`;
|
|
753
|
+
|
|
754
|
+
const AssetAction = React__default.forwardRef(function AssetAction({
|
|
755
|
+
action,
|
|
756
|
+
asset,
|
|
757
|
+
itemKey,
|
|
758
|
+
...props
|
|
759
|
+
}, forwardedRef) {
|
|
760
|
+
const ARROW_WIDTH = 10;
|
|
761
|
+
const ARROW_HEIGHT = 5;
|
|
762
|
+
const GAP = 3;
|
|
763
|
+
const arrowRef = useRef(null);
|
|
764
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
765
|
+
const [placement] = useState('bottom');
|
|
766
|
+
const {
|
|
767
|
+
refs,
|
|
768
|
+
floatingStyles,
|
|
769
|
+
context
|
|
770
|
+
} = useFloating({
|
|
771
|
+
placement,
|
|
772
|
+
open: isOpen,
|
|
773
|
+
onOpenChange: setIsOpen,
|
|
774
|
+
whileElementsMounted: autoUpdate,
|
|
775
|
+
middleware: [offset(ARROW_HEIGHT + GAP), flip({
|
|
776
|
+
padding: 5
|
|
777
|
+
}), shift({
|
|
778
|
+
padding: 5
|
|
779
|
+
}), arrow({
|
|
780
|
+
element: arrowRef
|
|
781
|
+
})]
|
|
782
|
+
});
|
|
783
|
+
const {
|
|
784
|
+
isMounted,
|
|
785
|
+
styles
|
|
786
|
+
} = useTransitionStyles(context, {
|
|
787
|
+
initial: {
|
|
788
|
+
transform: 'translateY(-8px)',
|
|
789
|
+
opacity: 0
|
|
790
|
+
},
|
|
791
|
+
duration: {
|
|
792
|
+
open: 200,
|
|
793
|
+
close: 100
|
|
794
|
+
}
|
|
795
|
+
});
|
|
796
|
+
const hover = useHover(context);
|
|
797
|
+
const dismiss = useDismiss(context, {
|
|
798
|
+
referencePress: true
|
|
799
|
+
});
|
|
800
|
+
const {
|
|
801
|
+
getReferenceProps,
|
|
802
|
+
getFloatingProps
|
|
803
|
+
} = useInteractions([dismiss, hover]);
|
|
804
|
+
const onActionClick = useCallback((e, action) => {
|
|
805
|
+
e.preventDefault();
|
|
806
|
+
e.stopPropagation();
|
|
807
|
+
if (isFunction(action?.onClick)) {
|
|
808
|
+
action.onClick(asset);
|
|
809
|
+
}
|
|
810
|
+
}, [action]);
|
|
811
|
+
return React__default.createElement(AssetAction$1, _extends$4({
|
|
812
|
+
ref: forwardedRef
|
|
813
|
+
}, props), React__default.createElement(AssetActionButton, _extends$4({
|
|
814
|
+
key: itemKey,
|
|
815
|
+
ref: refs.setReference
|
|
816
|
+
}, getReferenceProps(), {
|
|
817
|
+
onClick: e => onActionClick(e, action.onClick(asset), itemKey),
|
|
818
|
+
actionWidthHeight: action.actionWidthHeight
|
|
819
|
+
}), action.icon), isOpen && isMounted && React__default.createElement(Floating, _extends$4({
|
|
820
|
+
className: "floating",
|
|
821
|
+
ref: refs.setFloating,
|
|
822
|
+
style: floatingStyles
|
|
823
|
+
}, getFloatingProps()), React__default.createElement(ActionTitle, {
|
|
824
|
+
style: styles
|
|
825
|
+
}, action.title), React__default.createElement(StyledFloatingArrow, {
|
|
826
|
+
ref: arrowRef,
|
|
827
|
+
context: context,
|
|
828
|
+
width: ARROW_WIDTH,
|
|
829
|
+
height: ARROW_HEIGHT
|
|
830
|
+
})));
|
|
831
|
+
});
|
|
832
|
+
AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
833
|
+
action: PropTypes.shape({
|
|
834
|
+
icon: PropTypes.node,
|
|
835
|
+
onClick: PropTypes.func,
|
|
836
|
+
actionWidthHeight: PropTypes.arrayOf(PropTypes.number),
|
|
837
|
+
title: PropTypes.string
|
|
838
|
+
}),
|
|
839
|
+
asset: PropTypes.object,
|
|
840
|
+
itemKey: PropTypes.string
|
|
841
|
+
} : {};
|
|
842
|
+
AssetAction.defaultProps = {};
|
|
843
|
+
|
|
844
|
+
const AssetActionsBase = React__default.forwardRef(function AssetActionsBase({
|
|
750
845
|
actions,
|
|
751
846
|
asset,
|
|
752
847
|
...props
|
|
753
848
|
}, forwardedRef) {
|
|
754
|
-
const assetActions = actions.map((action, index) => React__default
|
|
849
|
+
const assetActions = actions.map((action, index) => React__default.createElement(AssetAction, _extends$4({
|
|
755
850
|
key: `index_${action.title}`,
|
|
756
851
|
ref: forwardedRef
|
|
757
852
|
}, props, {
|
|
@@ -759,11 +854,11 @@ const AssetActionsBase = React__default["default"].forwardRef(function AssetActi
|
|
|
759
854
|
asset: asset,
|
|
760
855
|
itemKey: `${index}-${action.title}`
|
|
761
856
|
})));
|
|
762
|
-
return React__default
|
|
857
|
+
return React__default.createElement(AssetActions, null, assetActions);
|
|
763
858
|
});
|
|
764
859
|
AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
765
|
-
actions:
|
|
766
|
-
asset:
|
|
860
|
+
actions: PropTypes.arrayOf(PropTypes.object),
|
|
861
|
+
asset: PropTypes.object
|
|
767
862
|
} : {};
|
|
768
863
|
AssetActionsBase.defaultProps = {};
|
|
769
864
|
|
|
@@ -772,14 +867,14 @@ const ComputedRootComponent$1 = ({
|
|
|
772
867
|
asset,
|
|
773
868
|
...props
|
|
774
869
|
}) => {
|
|
775
|
-
const newProps =
|
|
870
|
+
const newProps = mapKeys(omit(props, ['theme', 'extendedSelectMode']), (_, key) => key === 'innerRef' ? 'ref' : key);
|
|
776
871
|
if (component) {
|
|
777
|
-
if (!
|
|
778
|
-
if (React__default
|
|
779
|
-
return React__default
|
|
872
|
+
if (!isFunction(component)) throw Error('Expected a function in component-prop');
|
|
873
|
+
if (React__default.isValidElement(component(asset, newProps.children))) {
|
|
874
|
+
return React__default.cloneElement(component(asset, newProps.children), omit(newProps, ['children']));
|
|
780
875
|
}
|
|
781
876
|
}
|
|
782
|
-
return React__default
|
|
877
|
+
return React__default.createElement(AssetGalleryCompactCard$2, _extends$4({
|
|
783
878
|
ref: newProps.ref
|
|
784
879
|
}, newProps));
|
|
785
880
|
};
|
|
@@ -803,32 +898,32 @@ const AssetGalleryCompactCard = props => {
|
|
|
803
898
|
const ARROW_WIDTH = 30;
|
|
804
899
|
const ARROW_HEIGHT = 15;
|
|
805
900
|
const GAP = 8;
|
|
806
|
-
const arrowRef =
|
|
807
|
-
const [isOpen, setIsOpen] =
|
|
808
|
-
const [placement] =
|
|
809
|
-
const [isOverlayHovered, setIsOverlayHovered] =
|
|
810
|
-
const [openedSubActions, updateOpenedSubActions] =
|
|
901
|
+
const arrowRef = useRef(null);
|
|
902
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
903
|
+
const [placement] = useState('bottom');
|
|
904
|
+
const [isOverlayHovered, setIsOverlayHovered] = useState(false);
|
|
905
|
+
const [openedSubActions, updateOpenedSubActions] = useState([]);
|
|
811
906
|
const {
|
|
812
907
|
refs,
|
|
813
908
|
floatingStyles,
|
|
814
909
|
context
|
|
815
|
-
} =
|
|
910
|
+
} = useFloating({
|
|
816
911
|
placement,
|
|
817
912
|
open: isOpen,
|
|
818
913
|
onOpenChange: setIsOpen,
|
|
819
|
-
whileElementsMounted:
|
|
820
|
-
middleware: [
|
|
914
|
+
whileElementsMounted: autoUpdate,
|
|
915
|
+
middleware: [offset(ARROW_HEIGHT + GAP), flip({
|
|
821
916
|
padding: 5
|
|
822
|
-
}),
|
|
917
|
+
}), shift({
|
|
823
918
|
padding: 5
|
|
824
|
-
}),
|
|
919
|
+
}), arrow({
|
|
825
920
|
element: arrowRef
|
|
826
921
|
})]
|
|
827
922
|
});
|
|
828
923
|
const {
|
|
829
924
|
isMounted,
|
|
830
925
|
styles
|
|
831
|
-
} =
|
|
926
|
+
} = useTransitionStyles(context, {
|
|
832
927
|
initial: {
|
|
833
928
|
transform: 'translateY(-8px)',
|
|
834
929
|
opacity: 0
|
|
@@ -838,10 +933,10 @@ const AssetGalleryCompactCard = props => {
|
|
|
838
933
|
close: 100
|
|
839
934
|
}
|
|
840
935
|
});
|
|
841
|
-
const hover =
|
|
936
|
+
const hover = useHover(context, {
|
|
842
937
|
restMs: 100
|
|
843
938
|
});
|
|
844
|
-
const dismiss =
|
|
939
|
+
const dismiss = useDismiss(context, {
|
|
845
940
|
referencePress: true,
|
|
846
941
|
ancestorScroll: true,
|
|
847
942
|
windowScroll: true,
|
|
@@ -850,30 +945,30 @@ const AssetGalleryCompactCard = props => {
|
|
|
850
945
|
const {
|
|
851
946
|
getReferenceProps,
|
|
852
947
|
getFloatingProps
|
|
853
|
-
} =
|
|
854
|
-
|
|
948
|
+
} = useInteractions([dismiss, hover]);
|
|
949
|
+
useEffect(() => {
|
|
855
950
|
const newOpenedSubActions = (asset?.actions ?? []).map(() => false);
|
|
856
951
|
updateOpenedSubActions(newOpenedSubActions);
|
|
857
952
|
}, [asset]);
|
|
858
|
-
|
|
953
|
+
useEffect(() => {
|
|
859
954
|
if (!isOverlayHovered && openedSubActions?.length) {
|
|
860
955
|
updateOpenedSubActions(openedSubActions.map(() => false));
|
|
861
956
|
}
|
|
862
957
|
}, [isOverlayHovered]);
|
|
863
|
-
const mouseHasEnteredOverlay =
|
|
958
|
+
const mouseHasEnteredOverlay = useCallback(() => {
|
|
864
959
|
setIsOverlayHovered(true);
|
|
865
960
|
}, []);
|
|
866
|
-
const mouseHasLeftOverlay =
|
|
961
|
+
const mouseHasLeftOverlay = useCallback(() => {
|
|
867
962
|
setIsOverlayHovered(false);
|
|
868
963
|
}, []);
|
|
869
|
-
const isAnySubActionsOpened =
|
|
964
|
+
const isAnySubActionsOpened = useMemo(() => {
|
|
870
965
|
return openedSubActions.some(isOpened => isOpened);
|
|
871
966
|
}, [openedSubActions]);
|
|
872
967
|
function onClick(event) {
|
|
873
968
|
if (extendedSelectMode) {
|
|
874
969
|
return onSelectClick(event);
|
|
875
970
|
}
|
|
876
|
-
if (
|
|
971
|
+
if (isFunction(asset.onClick)) {
|
|
877
972
|
asset.onClick(event, asset);
|
|
878
973
|
}
|
|
879
974
|
}
|
|
@@ -891,8 +986,8 @@ const AssetGalleryCompactCard = props => {
|
|
|
891
986
|
event.preventDefault();
|
|
892
987
|
asset.onContextMenu(event);
|
|
893
988
|
}
|
|
894
|
-
|
|
895
|
-
if (
|
|
989
|
+
useEffect(() => {
|
|
990
|
+
if (isFunction(asset.onContextMenu)) {
|
|
896
991
|
if (cardRef.current) {
|
|
897
992
|
cardRef.current.addEventListener('contextmenu', onContextMenu);
|
|
898
993
|
}
|
|
@@ -906,8 +1001,8 @@ const AssetGalleryCompactCard = props => {
|
|
|
906
1001
|
function onDragstart(event) {
|
|
907
1002
|
asset.onDragstart(event);
|
|
908
1003
|
}
|
|
909
|
-
|
|
910
|
-
if (
|
|
1004
|
+
useEffect(() => {
|
|
1005
|
+
if (isFunction(asset.onDragstart)) {
|
|
911
1006
|
if (dragRef.current) {
|
|
912
1007
|
dragRef.current.addEventListener('dragstart', onDragstart);
|
|
913
1008
|
}
|
|
@@ -918,10 +1013,10 @@ const AssetGalleryCompactCard = props => {
|
|
|
918
1013
|
};
|
|
919
1014
|
}
|
|
920
1015
|
}, []);
|
|
921
|
-
const videoPlayerRef =
|
|
922
|
-
const cardRef =
|
|
923
|
-
const dragRef =
|
|
924
|
-
const overlayCompactRef =
|
|
1016
|
+
const videoPlayerRef = useRef();
|
|
1017
|
+
const cardRef = useRef();
|
|
1018
|
+
const dragRef = useRef(null);
|
|
1019
|
+
const overlayCompactRef = useMergeRefs([cardRef, refs.setReference]);
|
|
925
1020
|
function onMouseEnter(event) {
|
|
926
1021
|
if (videoPlayerRef.current) {
|
|
927
1022
|
const playPromise = videoPlayerRef.current.play();
|
|
@@ -929,7 +1024,7 @@ const AssetGalleryCompactCard = props => {
|
|
|
929
1024
|
playPromise.then(() => {}).catch(() => {});
|
|
930
1025
|
}
|
|
931
1026
|
}
|
|
932
|
-
if (
|
|
1027
|
+
if (isFunction(asset.onMouseEnter)) {
|
|
933
1028
|
asset.onMouseEnter(event, asset);
|
|
934
1029
|
}
|
|
935
1030
|
}
|
|
@@ -941,24 +1036,24 @@ const AssetGalleryCompactCard = props => {
|
|
|
941
1036
|
const renderPreview = asset => {
|
|
942
1037
|
let previewContent = null;
|
|
943
1038
|
if (asset?.fileType?.toLowerCase() === 'video') {
|
|
944
|
-
previewContent = React__default
|
|
1039
|
+
previewContent = React__default.createElement(build.exports.LazyLoadComponent, {
|
|
945
1040
|
scrollPosition: scrollPosition
|
|
946
|
-
}, React__default
|
|
1041
|
+
}, React__default.createElement("video", {
|
|
947
1042
|
ref: videoPlayerRef,
|
|
948
1043
|
loop: true,
|
|
949
1044
|
muted: true
|
|
950
|
-
}, React__default
|
|
1045
|
+
}, React__default.createElement("source", {
|
|
951
1046
|
src: asset.previewUrl,
|
|
952
1047
|
type: "video/mp4"
|
|
953
1048
|
})));
|
|
954
1049
|
} else if (asset?.fileType?.toLowerCase() === 'audio') {
|
|
955
|
-
previewContent = React__default
|
|
1050
|
+
previewContent = React__default.createElement(build.exports.LazyLoadComponent, {
|
|
956
1051
|
scrollPosition: scrollPosition
|
|
957
|
-
}, React__default
|
|
1052
|
+
}, React__default.createElement("div", {
|
|
958
1053
|
className: "audio"
|
|
959
|
-
}, React__default
|
|
1054
|
+
}, React__default.createElement(SvgHeadset, null)));
|
|
960
1055
|
} else {
|
|
961
|
-
previewContent = React__default
|
|
1056
|
+
previewContent = React__default.createElement(build.exports.LazyLoadImage, {
|
|
962
1057
|
alt: asset?.title,
|
|
963
1058
|
src: asset?.previewUrl,
|
|
964
1059
|
height: "100%",
|
|
@@ -969,13 +1064,13 @@ const AssetGalleryCompactCard = props => {
|
|
|
969
1064
|
scrollPosition: scrollPosition
|
|
970
1065
|
});
|
|
971
1066
|
}
|
|
972
|
-
return React__default
|
|
1067
|
+
return React__default.createElement(Figure$1, {
|
|
973
1068
|
hasHeightAndWidth: hasHeightAndWidth
|
|
974
|
-
}, previewContent, React__default
|
|
1069
|
+
}, previewContent, React__default.createElement(FigureOverlayBackdrop$1, {
|
|
975
1070
|
selected: selected
|
|
976
1071
|
}));
|
|
977
1072
|
};
|
|
978
|
-
|
|
1073
|
+
useEffect(() => {
|
|
979
1074
|
if (softSelected) {
|
|
980
1075
|
cardRef.current.scrollIntoView({
|
|
981
1076
|
behavior: 'smooth',
|
|
@@ -983,10 +1078,10 @@ const AssetGalleryCompactCard = props => {
|
|
|
983
1078
|
});
|
|
984
1079
|
}
|
|
985
1080
|
}, [softSelected]);
|
|
986
|
-
const renderVersionsBadge =
|
|
1081
|
+
const renderVersionsBadge = useCallback(() => {
|
|
987
1082
|
if (!asset?.versions) return null;
|
|
988
|
-
return React__default
|
|
989
|
-
badgeIcon: React__default
|
|
1083
|
+
return React__default.createElement(Badge, {
|
|
1084
|
+
badgeIcon: React__default.createElement(SvgLayers, null),
|
|
990
1085
|
badgeContent: asset.versions,
|
|
991
1086
|
backgroundColors: ['black', 'black'],
|
|
992
1087
|
colors: ['#f7f8f9', '#f7f8f9'],
|
|
@@ -997,11 +1092,11 @@ const AssetGalleryCompactCard = props => {
|
|
|
997
1092
|
horizontalPadding: 8
|
|
998
1093
|
});
|
|
999
1094
|
}, [asset]);
|
|
1000
|
-
const renderVerificationBadge =
|
|
1095
|
+
const renderVerificationBadge = useCallback(() => {
|
|
1001
1096
|
if (!asset?.verifications) return null;
|
|
1002
1097
|
return asset?.verifications;
|
|
1003
1098
|
}, [asset]);
|
|
1004
|
-
const renderdynamicBadge =
|
|
1099
|
+
const renderdynamicBadge = useCallback(() => {
|
|
1005
1100
|
if (asset?.verifications) return renderVerificationBadge();
|
|
1006
1101
|
if (asset?.versions) return renderVersionsBadge();
|
|
1007
1102
|
return null;
|
|
@@ -1018,17 +1113,17 @@ const AssetGalleryCompactCard = props => {
|
|
|
1018
1113
|
return null;
|
|
1019
1114
|
}
|
|
1020
1115
|
};
|
|
1021
|
-
const renderMediaBadge =
|
|
1116
|
+
const renderMediaBadge = useCallback(() => {
|
|
1022
1117
|
let badgeIcon = null;
|
|
1023
1118
|
let badgeContent = null;
|
|
1024
1119
|
if (asset?.fileType === 'video') {
|
|
1025
|
-
badgeIcon = React__default
|
|
1120
|
+
badgeIcon = React__default.createElement(SvgPlay, null);
|
|
1026
1121
|
}
|
|
1027
1122
|
if (asset?.duration) {
|
|
1028
1123
|
badgeContent = convertMsToHMS(asset.duration);
|
|
1029
1124
|
}
|
|
1030
1125
|
if (!badgeIcon && !badgeContent) return null;
|
|
1031
|
-
return React__default
|
|
1126
|
+
return React__default.createElement(Badge, {
|
|
1032
1127
|
badgeIcon: badgeIcon,
|
|
1033
1128
|
badgeContent: badgeContent,
|
|
1034
1129
|
backgroundColors: ['black', 'black'],
|
|
@@ -1042,27 +1137,27 @@ const AssetGalleryCompactCard = props => {
|
|
|
1042
1137
|
height: 24
|
|
1043
1138
|
});
|
|
1044
1139
|
}, [asset]);
|
|
1045
|
-
const renderSummaryCardHeaderLeft =
|
|
1046
|
-
return React__default
|
|
1140
|
+
const renderSummaryCardHeaderLeft = useCallback(() => {
|
|
1141
|
+
return React__default.createElement(React__default.Fragment, null, renderVersionsBadge(), renderMediaBadge());
|
|
1047
1142
|
}, [asset]);
|
|
1048
|
-
const renderPopoverContent =
|
|
1049
|
-
return React__default
|
|
1143
|
+
const renderPopoverContent = useCallback(() => {
|
|
1144
|
+
return React__default.createElement(SummaryCard, {
|
|
1050
1145
|
activeSummaryCard: activeSummaryCard,
|
|
1051
1146
|
title: asset?.title || '',
|
|
1052
1147
|
description: asset?.description || '',
|
|
1053
1148
|
instructions: asset?.imageRights || '',
|
|
1054
1149
|
instructionsType: 'warning',
|
|
1055
1150
|
headerRight: asset?.summary?.headerRight || '',
|
|
1056
|
-
headerLeft: React__default
|
|
1151
|
+
headerLeft: React__default.createElement(React__default.Fragment, null, renderSummaryCardHeaderLeft(), asset?.summary?.headerLeft || ''),
|
|
1057
1152
|
footerLeft: asset?.summary?.footerLeft || '',
|
|
1058
1153
|
footerRight: asset?.summary?.footerRight || '',
|
|
1059
1154
|
width: 375,
|
|
1060
1155
|
view: 'compact'
|
|
1061
1156
|
});
|
|
1062
1157
|
}, [asset]);
|
|
1063
|
-
return React__default
|
|
1158
|
+
return React__default.createElement(AssetGalleryWrapper$1, {
|
|
1064
1159
|
disabled: asset.disabled
|
|
1065
|
-
}, React__default
|
|
1160
|
+
}, React__default.createElement(AssetGalleryCompactCard$2, _extends$4({
|
|
1066
1161
|
as: ComputedRootComponent$1,
|
|
1067
1162
|
component: component,
|
|
1068
1163
|
disabled: asset.disabled,
|
|
@@ -1074,79 +1169,79 @@ const AssetGalleryCompactCard = props => {
|
|
|
1074
1169
|
draggable: asset.draggable,
|
|
1075
1170
|
innerRef: dragRef,
|
|
1076
1171
|
selected: selected
|
|
1077
|
-
}, getReferenceProps()), React__default
|
|
1172
|
+
}, getReferenceProps()), React__default.createElement(Reference, {
|
|
1078
1173
|
ref: refs.setReference
|
|
1079
|
-
}, asset.previewUrl && renderPreview(asset)), React__default
|
|
1174
|
+
}, asset.previewUrl && renderPreview(asset)), React__default.createElement(Overlay$1, _extends$4({
|
|
1080
1175
|
ref: overlayCompactRef,
|
|
1081
1176
|
onMouseEnter: mouseHasEnteredOverlay,
|
|
1082
1177
|
onMouseLeave: mouseHasLeftOverlay,
|
|
1083
1178
|
style: {
|
|
1084
1179
|
height: '100%'
|
|
1085
1180
|
}
|
|
1086
|
-
}, getReferenceProps()), React__default
|
|
1181
|
+
}, getReferenceProps()), React__default.createElement(OverlayBackdrop$1, {
|
|
1087
1182
|
softSelected: softSelected,
|
|
1088
1183
|
selected: selected
|
|
1089
|
-
}), asset?.actions && React__default
|
|
1184
|
+
}), asset?.actions && React__default.createElement(OverlayInfoTopActions$1, {
|
|
1090
1185
|
$isOverlayHovered: isOverlayHovered
|
|
1091
|
-
}, React__default
|
|
1186
|
+
}, React__default.createElement(AssetActionsBase, {
|
|
1092
1187
|
actions: asset.actions,
|
|
1093
1188
|
asset: asset
|
|
1094
|
-
})), React__default
|
|
1189
|
+
})), React__default.createElement(OverlayInfo$1, null, isOverlayHovered && React__default.createElement("span", null, asset.title), React__default.createElement(OverlayInfoTop$1, null, React__default.createElement(OverlayInfoTopLeft, {
|
|
1095
1190
|
collapseExtraInfo: collapseExtraInfo
|
|
1096
|
-
}, renderBadge()), asset?.note?.title && React__default
|
|
1191
|
+
}, renderBadge()), asset?.note?.title && React__default.createElement(OverlayInfoTopWarning$1, {
|
|
1097
1192
|
type: asset?.note?.type
|
|
1098
|
-
}, React__default
|
|
1193
|
+
}, React__default.createElement(SvgWarningCircle, null))), React__default.createElement(OverlayInfoBottom$1, null, selectable && React__default.createElement(OverlayInfoBottomSelectButton$1, {
|
|
1099
1194
|
selected: selected
|
|
1100
|
-
}, React__default
|
|
1195
|
+
}, React__default.createElement(SvgCheckRectangleFilled, {
|
|
1101
1196
|
onClick: onSelectClick
|
|
1102
|
-
})), React__default
|
|
1197
|
+
})), React__default.createElement(OverlayInfoBottomMediaIcon$1, null, renderMediaBadge()))), asset.completed && React__default.createElement(OverlayCompleted, {
|
|
1103
1198
|
softSelected: softSelected
|
|
1104
|
-
}), asset.hasError && React__default
|
|
1199
|
+
}), asset.hasError && React__default.createElement(OverlayHasError, {
|
|
1105
1200
|
softSelected: softSelected
|
|
1106
|
-
}), selectable && React__default
|
|
1201
|
+
}), selectable && React__default.createElement(OverlaySelected$1, {
|
|
1107
1202
|
selected: selected,
|
|
1108
1203
|
softSelected: softSelected,
|
|
1109
1204
|
customSelectedBorder: customSelectedBorder
|
|
1110
|
-
}), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React__default
|
|
1205
|
+
}), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React__default.createElement("div", _extends$4({
|
|
1111
1206
|
ref: refs.setFloating,
|
|
1112
1207
|
style: floatingStyles
|
|
1113
|
-
}, getFloatingProps()), React__default
|
|
1208
|
+
}, getFloatingProps()), React__default.createElement("div", {
|
|
1114
1209
|
style: styles,
|
|
1115
1210
|
className: "floating"
|
|
1116
|
-
}, renderPopoverContent(), React__default
|
|
1211
|
+
}, renderPopoverContent(), React__default.createElement(StyledFloatingArrow$1, {
|
|
1117
1212
|
ref: arrowRef,
|
|
1118
1213
|
context: context,
|
|
1119
1214
|
width: ARROW_WIDTH,
|
|
1120
1215
|
height: ARROW_HEIGHT
|
|
1121
|
-
})))), asset.overlay && React__default
|
|
1216
|
+
})))), asset.overlay && React__default.createElement(ConsumerDefinedOverlay$1, null, asset.overlay)));
|
|
1122
1217
|
};
|
|
1123
1218
|
AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
1124
|
-
asset:
|
|
1125
|
-
hasHeightAndWidth:
|
|
1126
|
-
selectable:
|
|
1127
|
-
selected:
|
|
1128
|
-
customSelectedBorder:
|
|
1129
|
-
extendedSelectMode:
|
|
1130
|
-
onAssetSelected:
|
|
1131
|
-
onAssetUnselected:
|
|
1132
|
-
softSelected:
|
|
1133
|
-
component:
|
|
1134
|
-
scrollPosition:
|
|
1135
|
-
collapseExtraInfo:
|
|
1136
|
-
activeSummaryCard:
|
|
1137
|
-
displayIcon:
|
|
1219
|
+
asset: PropTypes.shape(assetShapeWithLayout).isRequired,
|
|
1220
|
+
hasHeightAndWidth: PropTypes.bool,
|
|
1221
|
+
selectable: PropTypes.bool,
|
|
1222
|
+
selected: PropTypes.bool,
|
|
1223
|
+
customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
|
|
1224
|
+
extendedSelectMode: PropTypes.bool,
|
|
1225
|
+
onAssetSelected: PropTypes.func.isRequired,
|
|
1226
|
+
onAssetUnselected: PropTypes.func.isRequired,
|
|
1227
|
+
softSelected: PropTypes.bool.isRequired,
|
|
1228
|
+
component: PropTypes.func,
|
|
1229
|
+
scrollPosition: PropTypes.number,
|
|
1230
|
+
collapseExtraInfo: PropTypes.bool,
|
|
1231
|
+
activeSummaryCard: PropTypes.bool,
|
|
1232
|
+
displayIcon: PropTypes.oneOf(['dynamic', 'versions', 'verifications', ''])
|
|
1138
1233
|
} : {};
|
|
1139
|
-
var AssetGalleryCompactCard$1 = build.exports.trackWindowScroll(React__default
|
|
1234
|
+
var AssetGalleryCompactCard$1 = build.exports.trackWindowScroll(React__default.memo(AssetGalleryCompactCard, (prevProps, nextProps) => {
|
|
1140
1235
|
const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];
|
|
1141
|
-
return reactiveProps.every(propKey =>
|
|
1236
|
+
return reactiveProps.every(propKey => get(prevProps, propKey) === get(nextProps, propKey));
|
|
1142
1237
|
}));
|
|
1143
1238
|
|
|
1144
|
-
const AssetGalleryWrapper =
|
|
1145
|
-
${props => props.disabled &&
|
|
1239
|
+
const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)`
|
|
1240
|
+
${props => props.disabled && css`
|
|
1146
1241
|
cursor: not-allowed;
|
|
1147
1242
|
`};
|
|
1148
1243
|
`;
|
|
1149
|
-
const AssetGalleryGridCard$2 =
|
|
1244
|
+
const AssetGalleryGridCard$2 = styled.div.attrs(applyDefaultTheme)`
|
|
1150
1245
|
display: block;
|
|
1151
1246
|
position: relative;
|
|
1152
1247
|
height: 100%;
|
|
@@ -1167,18 +1262,18 @@ const AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme
|
|
|
1167
1262
|
|
|
1168
1263
|
${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'))}
|
|
1169
1264
|
|
|
1170
|
-
${props => props.disabled &&
|
|
1265
|
+
${props => props.disabled && css`
|
|
1171
1266
|
pointer-events: none;
|
|
1172
1267
|
opacity: 0.4;
|
|
1173
1268
|
`};
|
|
1174
1269
|
|
|
1175
|
-
${props => props.extendedSelectMode &&
|
|
1270
|
+
${props => props.extendedSelectMode && css`
|
|
1176
1271
|
cursor: pointer;
|
|
1177
1272
|
`}
|
|
1178
1273
|
|
|
1179
1274
|
${props => {
|
|
1180
1275
|
if (props.$softSelected) {
|
|
1181
|
-
return props.theme.themeProp('border-color',
|
|
1276
|
+
return props.theme.themeProp('border-color', rgba(props.theme.getColor('gray-100'), 0.5), rgba(props.theme.getColor('gray-700'), 0.5));
|
|
1182
1277
|
}
|
|
1183
1278
|
if (props.selected) {
|
|
1184
1279
|
if (props.customSelectedBorder) {
|
|
@@ -1188,15 +1283,15 @@ const AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme
|
|
|
1188
1283
|
}
|
|
1189
1284
|
}
|
|
1190
1285
|
if (props.completed) {
|
|
1191
|
-
return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'),
|
|
1286
|
+
return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), rgba(props.theme.getColor('emerald-500'), 0.7));
|
|
1192
1287
|
}
|
|
1193
1288
|
if (props.hasError) {
|
|
1194
|
-
return props.theme.themeProp('border-color', props.theme.getColor('red-600'),
|
|
1289
|
+
return props.theme.themeProp('border-color', props.theme.getColor('red-600'), rgba(props.theme.getColor('red-500'), 0.7));
|
|
1195
1290
|
}
|
|
1196
1291
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
1197
1292
|
}};
|
|
1198
1293
|
`;
|
|
1199
|
-
const ContentWrapper =
|
|
1294
|
+
const ContentWrapper = styled.div.attrs(applyDefaultTheme)`
|
|
1200
1295
|
display: flex;
|
|
1201
1296
|
flex-direction: column;
|
|
1202
1297
|
box-sizing: border-box;
|
|
@@ -1204,7 +1299,7 @@ const ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDe
|
|
|
1204
1299
|
padding-top: 35px;
|
|
1205
1300
|
height: 100%;
|
|
1206
1301
|
`;
|
|
1207
|
-
const Asset =
|
|
1302
|
+
const Asset = styled.div`
|
|
1208
1303
|
display: flex;
|
|
1209
1304
|
flex-direction: column;
|
|
1210
1305
|
align-items: center;
|
|
@@ -1226,7 +1321,7 @@ const Asset = styled__default["default"].div`
|
|
|
1226
1321
|
}
|
|
1227
1322
|
}
|
|
1228
1323
|
`;
|
|
1229
|
-
const Figure =
|
|
1324
|
+
const Figure = styled.figure`
|
|
1230
1325
|
position: relative;
|
|
1231
1326
|
display: flex;
|
|
1232
1327
|
flex-direction: column;
|
|
@@ -1241,9 +1336,9 @@ const Figure = styled__default["default"].figure`
|
|
|
1241
1336
|
width: 100%;
|
|
1242
1337
|
box-sizing: border-box;
|
|
1243
1338
|
|
|
1244
|
-
${props => props.hasHeightAndWidth ?
|
|
1339
|
+
${props => props.hasHeightAndWidth ? css`
|
|
1245
1340
|
object-fit: cover;
|
|
1246
|
-
` :
|
|
1341
|
+
` : css`
|
|
1247
1342
|
object-fit: contain;
|
|
1248
1343
|
`}
|
|
1249
1344
|
}
|
|
@@ -1257,20 +1352,20 @@ const Figure = styled__default["default"].figure`
|
|
|
1257
1352
|
}
|
|
1258
1353
|
}
|
|
1259
1354
|
`;
|
|
1260
|
-
const FigureOverlayBackdrop =
|
|
1355
|
+
const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)`
|
|
1261
1356
|
position: absolute;
|
|
1262
1357
|
inset: 0;
|
|
1263
1358
|
opacity: ${props => props.selected ? 0.6 : 0};
|
|
1264
1359
|
background-color: ${props => props.selected ? '#ACCEF7' : 'transparent'};
|
|
1265
1360
|
`;
|
|
1266
|
-
const Overlay =
|
|
1361
|
+
const Overlay = styled.div.attrs(applyDefaultTheme)`
|
|
1267
1362
|
position: absolute;
|
|
1268
1363
|
top: 0;
|
|
1269
1364
|
bottom: 0;
|
|
1270
1365
|
left: 0;
|
|
1271
1366
|
right: 0;
|
|
1272
1367
|
`;
|
|
1273
|
-
const OverlayBackdrop =
|
|
1368
|
+
const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)`
|
|
1274
1369
|
position: absolute;
|
|
1275
1370
|
top: 0;
|
|
1276
1371
|
bottom: 0;
|
|
@@ -1278,7 +1373,7 @@ const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyD
|
|
|
1278
1373
|
right: 0;
|
|
1279
1374
|
opacity: 0;
|
|
1280
1375
|
transition: opacity 220ms;
|
|
1281
|
-
${props => !props.selected ?
|
|
1376
|
+
${props => !props.selected ? css`
|
|
1282
1377
|
background: radial-gradient(
|
|
1283
1378
|
ellipse at center,
|
|
1284
1379
|
rgba(0, 0, 0, 0.3) 27%,
|
|
@@ -1287,7 +1382,7 @@ const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyD
|
|
|
1287
1382
|
);
|
|
1288
1383
|
` : null}
|
|
1289
1384
|
|
|
1290
|
-
${props => (props.selected || props.softSelected) &&
|
|
1385
|
+
${props => (props.selected || props.softSelected) && css`
|
|
1291
1386
|
opacity: 1;
|
|
1292
1387
|
`}
|
|
1293
1388
|
|
|
@@ -1299,7 +1394,7 @@ const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyD
|
|
|
1299
1394
|
opacity: 1;
|
|
1300
1395
|
}
|
|
1301
1396
|
`;
|
|
1302
|
-
const OverlayInfo =
|
|
1397
|
+
const OverlayInfo = styled.div.attrs(applyDefaultTheme)`
|
|
1303
1398
|
position: absolute;
|
|
1304
1399
|
top: 0;
|
|
1305
1400
|
bottom: 0;
|
|
@@ -1311,7 +1406,7 @@ const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefau
|
|
|
1311
1406
|
padding: 15px 12px 10px;
|
|
1312
1407
|
color: ${props => props.theme.getColor('gray-100')};
|
|
1313
1408
|
`;
|
|
1314
|
-
const OverlaySelected =
|
|
1409
|
+
const OverlaySelected = styled.div.attrs(applyDefaultTheme)`
|
|
1315
1410
|
position: absolute;
|
|
1316
1411
|
top: 0;
|
|
1317
1412
|
bottom: 0;
|
|
@@ -1319,7 +1414,7 @@ const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyD
|
|
|
1319
1414
|
right: 0;
|
|
1320
1415
|
pointer-events: none;
|
|
1321
1416
|
`;
|
|
1322
|
-
const OverlayInfoTop =
|
|
1417
|
+
const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)`
|
|
1323
1418
|
position: absolute;
|
|
1324
1419
|
left: 0;
|
|
1325
1420
|
right: 0;
|
|
@@ -1327,14 +1422,14 @@ const OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDe
|
|
|
1327
1422
|
padding: 8px;
|
|
1328
1423
|
display: flex;
|
|
1329
1424
|
`;
|
|
1330
|
-
const OverlayInfoTopVersions =
|
|
1425
|
+
const OverlayInfoTopVersions = styled.div.attrs(applyDefaultTheme)`
|
|
1331
1426
|
opacity: 1;
|
|
1332
1427
|
|
|
1333
1428
|
${AssetGalleryGridCard$2}:hover & {
|
|
1334
1429
|
opacity: 0;
|
|
1335
1430
|
}
|
|
1336
1431
|
`;
|
|
1337
|
-
const OverlayInfoTopWarning =
|
|
1432
|
+
const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)`
|
|
1338
1433
|
margin-left: auto;
|
|
1339
1434
|
height: 24px;
|
|
1340
1435
|
width: 24px;
|
|
@@ -1353,7 +1448,7 @@ const OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.
|
|
|
1353
1448
|
opacity: 0;
|
|
1354
1449
|
}
|
|
1355
1450
|
`;
|
|
1356
|
-
const OverlayInfoTopActions =
|
|
1451
|
+
const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)`
|
|
1357
1452
|
position: absolute;
|
|
1358
1453
|
top: 0;
|
|
1359
1454
|
right: 0;
|
|
@@ -1367,7 +1462,7 @@ const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.
|
|
|
1367
1462
|
|
|
1368
1463
|
opacity: ${props => props.isCardHovered ? 1 : 0};
|
|
1369
1464
|
`;
|
|
1370
|
-
const OverlayInfoBottom =
|
|
1465
|
+
const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)`
|
|
1371
1466
|
position: absolute;
|
|
1372
1467
|
left: 0;
|
|
1373
1468
|
right: 0;
|
|
@@ -1375,7 +1470,7 @@ const OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.appl
|
|
|
1375
1470
|
padding: 8px;
|
|
1376
1471
|
display: flex;
|
|
1377
1472
|
`;
|
|
1378
|
-
const OverlayInfoBottomSelectButton =
|
|
1473
|
+
const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)`
|
|
1379
1474
|
opacity: ${props => props.selected ? 1 : 0};
|
|
1380
1475
|
flex-shrink: 0;
|
|
1381
1476
|
cursor: pointer;
|
|
@@ -1396,14 +1491,14 @@ const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defau
|
|
|
1396
1491
|
opacity: 1;
|
|
1397
1492
|
}
|
|
1398
1493
|
`;
|
|
1399
|
-
const OverlayInfoBottomMediaIcon =
|
|
1494
|
+
const OverlayInfoBottomMediaIcon = styled.div.attrs(applyDefaultTheme)`
|
|
1400
1495
|
margin-left: auto;
|
|
1401
1496
|
opacity: 1;
|
|
1402
1497
|
${AssetGalleryGridCard$2}:hover & {
|
|
1403
1498
|
opacity: 0;
|
|
1404
1499
|
}
|
|
1405
1500
|
`;
|
|
1406
|
-
const ConsumerDefinedOverlay =
|
|
1501
|
+
const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)`
|
|
1407
1502
|
position: absolute;
|
|
1408
1503
|
top: 0;
|
|
1409
1504
|
bottom: 0;
|
|
@@ -1411,7 +1506,7 @@ const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme
|
|
|
1411
1506
|
right: 0;
|
|
1412
1507
|
pointer-events: none;
|
|
1413
1508
|
`;
|
|
1414
|
-
const Fragment =
|
|
1509
|
+
const Fragment = styled.div`
|
|
1415
1510
|
margin: 4px;
|
|
1416
1511
|
`;
|
|
1417
1512
|
|
|
@@ -1420,18 +1515,18 @@ const ComputedRootComponent = ({
|
|
|
1420
1515
|
asset,
|
|
1421
1516
|
...props
|
|
1422
1517
|
}) => {
|
|
1423
|
-
const newProps =
|
|
1518
|
+
const newProps = mapKeys(omit(props, ['theme', 'extendedSelectMode']), (_, key) => key === 'innerRef' ? 'ref' : key);
|
|
1424
1519
|
if (component) {
|
|
1425
|
-
if (!
|
|
1426
|
-
if (React__default
|
|
1427
|
-
return React__default
|
|
1520
|
+
if (!isFunction(component)) throw Error('Expected a function in component-prop');
|
|
1521
|
+
if (React__default.isValidElement(component(asset, newProps.children))) {
|
|
1522
|
+
return React__default.cloneElement(component(asset, newProps.children), omit(newProps, ['children']));
|
|
1428
1523
|
}
|
|
1429
1524
|
}
|
|
1430
|
-
return React__default
|
|
1525
|
+
return React__default.createElement(AssetGalleryGridCard$2, _extends$4({
|
|
1431
1526
|
ref: newProps.ref
|
|
1432
1527
|
}, newProps));
|
|
1433
1528
|
};
|
|
1434
|
-
const ComputedActionButton = React__default
|
|
1529
|
+
const ComputedActionButton = React__default.forwardRef(function ComputedActionButton({
|
|
1435
1530
|
component,
|
|
1436
1531
|
className,
|
|
1437
1532
|
subActions = [],
|
|
@@ -1439,29 +1534,29 @@ const ComputedActionButton = React__default["default"].forwardRef(function Compu
|
|
|
1439
1534
|
...props
|
|
1440
1535
|
}, forwardedRef) {
|
|
1441
1536
|
const newProps = props;
|
|
1442
|
-
if (!
|
|
1537
|
+
if (!isEmpty(subActions)) {
|
|
1443
1538
|
const contextMenuItems = subActions.map((subAction, key) => {
|
|
1444
1539
|
const {
|
|
1445
1540
|
onClick,
|
|
1446
1541
|
title,
|
|
1447
1542
|
icon
|
|
1448
1543
|
} = subAction;
|
|
1449
|
-
return React__default
|
|
1544
|
+
return React__default.createElement(ContextMenuItem, {
|
|
1450
1545
|
key: key,
|
|
1451
1546
|
onClickEffect: onClick,
|
|
1452
1547
|
title: title,
|
|
1453
1548
|
icon: icon
|
|
1454
1549
|
});
|
|
1455
1550
|
});
|
|
1456
|
-
const contextMenu = React__default
|
|
1457
|
-
newProps.children = React__default
|
|
1551
|
+
const contextMenu = React__default.createElement(ContextMenu, null, contextMenuItems);
|
|
1552
|
+
newProps.children = React__default.createElement(Popover, {
|
|
1458
1553
|
contextMenu: true,
|
|
1459
1554
|
content: contextMenu,
|
|
1460
1555
|
placement: 'bottom-end',
|
|
1461
1556
|
visible: isSubActionsOpened,
|
|
1462
1557
|
zIndex: 10001,
|
|
1463
1558
|
offset: [0, -8]
|
|
1464
|
-
}, React__default
|
|
1559
|
+
}, React__default.createElement(ActionButton, {
|
|
1465
1560
|
useShadow: true,
|
|
1466
1561
|
active: true,
|
|
1467
1562
|
ref: forwardedRef,
|
|
@@ -1472,7 +1567,7 @@ const ComputedActionButton = React__default["default"].forwardRef(function Compu
|
|
|
1472
1567
|
actionWidthHeight: newProps.actionWidthHeight
|
|
1473
1568
|
}));
|
|
1474
1569
|
} else {
|
|
1475
|
-
newProps.children = React__default
|
|
1570
|
+
newProps.children = React__default.createElement(ActionButton, {
|
|
1476
1571
|
useShadow: true,
|
|
1477
1572
|
active: true,
|
|
1478
1573
|
ref: forwardedRef,
|
|
@@ -1484,14 +1579,14 @@ const ComputedActionButton = React__default["default"].forwardRef(function Compu
|
|
|
1484
1579
|
});
|
|
1485
1580
|
}
|
|
1486
1581
|
if (component) {
|
|
1487
|
-
if (!
|
|
1488
|
-
if (React__default
|
|
1489
|
-
return React__default
|
|
1490
|
-
...
|
|
1582
|
+
if (!isFunction(component)) throw Error('Expected a function in component-prop');
|
|
1583
|
+
if (React__default.isValidElement(component())) {
|
|
1584
|
+
return React__default.cloneElement(component(), {
|
|
1585
|
+
...omit(newProps, 'icon')
|
|
1491
1586
|
});
|
|
1492
1587
|
}
|
|
1493
1588
|
}
|
|
1494
|
-
return React__default
|
|
1589
|
+
return React__default.createElement(React__default.Fragment, null, newProps.children);
|
|
1495
1590
|
});
|
|
1496
1591
|
const AssetGalleryGridCard = props => {
|
|
1497
1592
|
const {
|
|
@@ -1506,24 +1601,24 @@ const AssetGalleryGridCard = props => {
|
|
|
1506
1601
|
component,
|
|
1507
1602
|
scrollPosition
|
|
1508
1603
|
} = props;
|
|
1509
|
-
const [isCardHovered, setIsCardHovered] = React__default
|
|
1510
|
-
const [openedSubActions, updateOpenedSubActions] = React__default
|
|
1511
|
-
|
|
1604
|
+
const [isCardHovered, setIsCardHovered] = React__default.useState(false);
|
|
1605
|
+
const [openedSubActions, updateOpenedSubActions] = React__default.useState([]);
|
|
1606
|
+
useEffect(() => {
|
|
1512
1607
|
const newOpenedSubActions = (asset?.actions ?? []).map(() => false);
|
|
1513
1608
|
updateOpenedSubActions(newOpenedSubActions);
|
|
1514
1609
|
}, [asset]);
|
|
1515
|
-
|
|
1610
|
+
useEffect(() => {
|
|
1516
1611
|
if (!isCardHovered && openedSubActions?.length) {
|
|
1517
1612
|
updateOpenedSubActions(openedSubActions.map(() => false));
|
|
1518
1613
|
}
|
|
1519
1614
|
}, [isCardHovered]);
|
|
1520
|
-
const mouseHasEnteredCard =
|
|
1615
|
+
const mouseHasEnteredCard = useCallback(() => {
|
|
1521
1616
|
setIsCardHovered(true);
|
|
1522
1617
|
}, []);
|
|
1523
|
-
const mouseHasLeftCard =
|
|
1618
|
+
const mouseHasLeftCard = useCallback(() => {
|
|
1524
1619
|
setIsCardHovered(false);
|
|
1525
1620
|
}, []);
|
|
1526
|
-
const onSubActionsViewToggle =
|
|
1621
|
+
const onSubActionsViewToggle = useCallback(actionIndex => {
|
|
1527
1622
|
const newOpenedSubActions = openedSubActions.map((isOpened, index) => {
|
|
1528
1623
|
if (index !== actionIndex) {
|
|
1529
1624
|
return false;
|
|
@@ -1532,9 +1627,9 @@ const AssetGalleryGridCard = props => {
|
|
|
1532
1627
|
});
|
|
1533
1628
|
updateOpenedSubActions(newOpenedSubActions);
|
|
1534
1629
|
}, [openedSubActions]);
|
|
1535
|
-
const videoPlayerRef =
|
|
1536
|
-
const cardRef =
|
|
1537
|
-
const dragRef =
|
|
1630
|
+
const videoPlayerRef = useRef();
|
|
1631
|
+
const cardRef = useRef();
|
|
1632
|
+
const dragRef = useRef(null);
|
|
1538
1633
|
function onMouseEnter(event) {
|
|
1539
1634
|
if (videoPlayerRef.current) {
|
|
1540
1635
|
const playPromise = videoPlayerRef.current.play();
|
|
@@ -1542,7 +1637,7 @@ const AssetGalleryGridCard = props => {
|
|
|
1542
1637
|
playPromise.then(() => {}).catch(() => {});
|
|
1543
1638
|
}
|
|
1544
1639
|
}
|
|
1545
|
-
if (
|
|
1640
|
+
if (isFunction(asset.onMouseEnter)) {
|
|
1546
1641
|
asset.onMouseEnter(event, asset);
|
|
1547
1642
|
}
|
|
1548
1643
|
mouseHasEnteredCard();
|
|
@@ -1557,7 +1652,7 @@ const AssetGalleryGridCard = props => {
|
|
|
1557
1652
|
if (extendedSelectMode) {
|
|
1558
1653
|
return onSelectClick(event);
|
|
1559
1654
|
}
|
|
1560
|
-
if (
|
|
1655
|
+
if (isFunction(asset.onClick)) {
|
|
1561
1656
|
asset.onClick(event, asset);
|
|
1562
1657
|
}
|
|
1563
1658
|
}
|
|
@@ -1569,17 +1664,17 @@ const AssetGalleryGridCard = props => {
|
|
|
1569
1664
|
}
|
|
1570
1665
|
return onAssetSelected(asset.key);
|
|
1571
1666
|
}
|
|
1572
|
-
const onActionClick =
|
|
1667
|
+
const onActionClick = useCallback((event, action, index) => {
|
|
1573
1668
|
event.preventDefault();
|
|
1574
1669
|
event.stopPropagation();
|
|
1575
|
-
if (
|
|
1670
|
+
if (isFunction(action?.onClick)) {
|
|
1576
1671
|
action.onClick(asset);
|
|
1577
1672
|
}
|
|
1578
|
-
if (!
|
|
1673
|
+
if (!isEmpty(action?.subActions)) {
|
|
1579
1674
|
onSubActionsViewToggle(index);
|
|
1580
1675
|
}
|
|
1581
1676
|
}, [onSubActionsViewToggle]);
|
|
1582
|
-
const shouldOpenSubActions =
|
|
1677
|
+
const shouldOpenSubActions = useCallback(actionIndex => openedSubActions[actionIndex], [openedSubActions]);
|
|
1583
1678
|
function onContextMenu(event) {
|
|
1584
1679
|
event.preventDefault();
|
|
1585
1680
|
asset.onContextMenu(event);
|
|
@@ -1587,24 +1682,24 @@ const AssetGalleryGridCard = props => {
|
|
|
1587
1682
|
function renderPreview(asset) {
|
|
1588
1683
|
let previewContent = null;
|
|
1589
1684
|
if (asset.fileType?.toLowerCase() === 'video') {
|
|
1590
|
-
previewContent = React__default
|
|
1685
|
+
previewContent = React__default.createElement(build.exports.LazyLoadComponent, {
|
|
1591
1686
|
scrollPosition: scrollPosition
|
|
1592
|
-
}, React__default
|
|
1687
|
+
}, React__default.createElement("video", {
|
|
1593
1688
|
ref: videoPlayerRef,
|
|
1594
1689
|
loop: true,
|
|
1595
1690
|
muted: true
|
|
1596
|
-
}, React__default
|
|
1691
|
+
}, React__default.createElement("source", {
|
|
1597
1692
|
src: asset.previewUrl,
|
|
1598
1693
|
type: "video/mp4"
|
|
1599
1694
|
})));
|
|
1600
1695
|
} else if (asset.fileType?.toLowerCase() === 'audio') {
|
|
1601
|
-
previewContent = React__default
|
|
1696
|
+
previewContent = React__default.createElement(build.exports.LazyLoadComponent, {
|
|
1602
1697
|
scrollPosition: scrollPosition
|
|
1603
|
-
}, React__default
|
|
1698
|
+
}, React__default.createElement("div", {
|
|
1604
1699
|
className: "audio"
|
|
1605
|
-
}, React__default
|
|
1700
|
+
}, React__default.createElement(SvgHeadset, null)));
|
|
1606
1701
|
} else {
|
|
1607
|
-
previewContent = React__default
|
|
1702
|
+
previewContent = React__default.createElement(build.exports.LazyLoadImage, {
|
|
1608
1703
|
alt: asset.title,
|
|
1609
1704
|
src: asset.previewUrl,
|
|
1610
1705
|
height: "100%",
|
|
@@ -1615,23 +1710,23 @@ const AssetGalleryGridCard = props => {
|
|
|
1615
1710
|
scrollPosition: scrollPosition
|
|
1616
1711
|
});
|
|
1617
1712
|
}
|
|
1618
|
-
return React__default
|
|
1713
|
+
return React__default.createElement(Figure, {
|
|
1619
1714
|
selected: selected
|
|
1620
|
-
}, previewContent, React__default
|
|
1715
|
+
}, previewContent, React__default.createElement(FigureOverlayBackdrop, {
|
|
1621
1716
|
selected: selected
|
|
1622
|
-
}), React__default
|
|
1717
|
+
}), React__default.createElement(Overlay, {
|
|
1623
1718
|
ref: cardRef
|
|
1624
|
-
}, React__default
|
|
1719
|
+
}, React__default.createElement(OverlayBackdrop, {
|
|
1625
1720
|
$softSelected: softSelected,
|
|
1626
1721
|
selected: selected
|
|
1627
|
-
}), React__default
|
|
1722
|
+
}), React__default.createElement(OverlayInfo, null, React__default.createElement(OverlayInfoTop, null, React__default.createElement(OverlayInfoTopVersions, null, renderVersionsBadge()), asset?.note?.title && React__default.createElement(OverlayInfoTopWarning, {
|
|
1628
1723
|
type: asset?.note?.type
|
|
1629
|
-
}, React__default
|
|
1724
|
+
}, React__default.createElement(SvgWarningCircle, null)), React__default.createElement(OverlayInfoTopActions, {
|
|
1630
1725
|
isCardHovered: isCardHovered
|
|
1631
|
-
}, asset.actions && asset.actions.map((action, index) => React__default
|
|
1726
|
+
}, asset.actions && asset.actions.map((action, index) => React__default.createElement(Tooltip, {
|
|
1632
1727
|
key: `${asset.key}-${action.title}`,
|
|
1633
1728
|
content: action.title
|
|
1634
|
-
}, React__default
|
|
1729
|
+
}, React__default.createElement(Fragment, {
|
|
1635
1730
|
key: `${asset.key}-${action.title}`,
|
|
1636
1731
|
as: ComputedActionButton,
|
|
1637
1732
|
component: action.component,
|
|
@@ -1642,18 +1737,18 @@ const AssetGalleryGridCard = props => {
|
|
|
1642
1737
|
onClick: event => onActionClick(event, action, index),
|
|
1643
1738
|
subActions: action?.subActions,
|
|
1644
1739
|
actionWidthHeight: action.actionWidthHeight
|
|
1645
|
-
}))))), React__default
|
|
1740
|
+
}))))), React__default.createElement(OverlayInfoBottom, null, selectable && React__default.createElement(OverlayInfoBottomSelectButton, {
|
|
1646
1741
|
selected: selected
|
|
1647
|
-
}, React__default
|
|
1742
|
+
}, React__default.createElement(SvgCheckRectangleFilled, {
|
|
1648
1743
|
onClick: onSelectClick
|
|
1649
|
-
})), React__default
|
|
1744
|
+
})), React__default.createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), selectable && React__default.createElement(OverlaySelected, {
|
|
1650
1745
|
selected: selected,
|
|
1651
1746
|
$softSelected: softSelected,
|
|
1652
1747
|
customSelectedBorder: customSelectedBorder
|
|
1653
|
-
})), asset.overlay && React__default
|
|
1748
|
+
})), asset.overlay && React__default.createElement(ConsumerDefinedOverlay, null, asset.overlay));
|
|
1654
1749
|
}
|
|
1655
|
-
|
|
1656
|
-
if (
|
|
1750
|
+
useEffect(() => {
|
|
1751
|
+
if (isFunction(asset.onContextMenu)) {
|
|
1657
1752
|
if (cardRef.current) {
|
|
1658
1753
|
cardRef.current.addEventListener('contextmenu', onContextMenu);
|
|
1659
1754
|
}
|
|
@@ -1667,8 +1762,8 @@ const AssetGalleryGridCard = props => {
|
|
|
1667
1762
|
function onDragstart(event) {
|
|
1668
1763
|
asset.onDragstart(event);
|
|
1669
1764
|
}
|
|
1670
|
-
|
|
1671
|
-
if (
|
|
1765
|
+
useEffect(() => {
|
|
1766
|
+
if (isFunction(asset.onDragstart)) {
|
|
1672
1767
|
if (dragRef.current) {
|
|
1673
1768
|
dragRef.current.addEventListener('dragstart', onDragstart);
|
|
1674
1769
|
}
|
|
@@ -1679,7 +1774,7 @@ const AssetGalleryGridCard = props => {
|
|
|
1679
1774
|
};
|
|
1680
1775
|
}
|
|
1681
1776
|
}, []);
|
|
1682
|
-
|
|
1777
|
+
useEffect(() => {
|
|
1683
1778
|
if (softSelected) {
|
|
1684
1779
|
cardRef.current.scrollIntoView({
|
|
1685
1780
|
behavior: 'smooth',
|
|
@@ -1687,10 +1782,10 @@ const AssetGalleryGridCard = props => {
|
|
|
1687
1782
|
});
|
|
1688
1783
|
}
|
|
1689
1784
|
}, [softSelected]);
|
|
1690
|
-
const renderVersionsBadge =
|
|
1785
|
+
const renderVersionsBadge = useCallback(() => {
|
|
1691
1786
|
if (!asset?.versions) return null;
|
|
1692
|
-
return React__default
|
|
1693
|
-
badgeIcon: React__default
|
|
1787
|
+
return React__default.createElement(Badge, {
|
|
1788
|
+
badgeIcon: React__default.createElement(SvgLayers, null),
|
|
1694
1789
|
badgeContent: asset.versions,
|
|
1695
1790
|
backgroundColors: ['black', 'black'],
|
|
1696
1791
|
colors: ['#f7f8f9', '#f7f8f9'],
|
|
@@ -1701,17 +1796,17 @@ const AssetGalleryGridCard = props => {
|
|
|
1701
1796
|
horizontalPadding: 8
|
|
1702
1797
|
});
|
|
1703
1798
|
}, [asset]);
|
|
1704
|
-
const renderMediaBadge =
|
|
1799
|
+
const renderMediaBadge = useCallback(() => {
|
|
1705
1800
|
let badgeIcon = null;
|
|
1706
1801
|
let badgeContent = null;
|
|
1707
1802
|
if (asset?.fileType === 'video') {
|
|
1708
|
-
badgeIcon = React__default
|
|
1803
|
+
badgeIcon = React__default.createElement(SvgPlay, null);
|
|
1709
1804
|
}
|
|
1710
1805
|
if (asset?.duration) {
|
|
1711
1806
|
badgeContent = convertMsToHMS(asset.duration);
|
|
1712
1807
|
}
|
|
1713
1808
|
if (!badgeIcon && !badgeContent) return null;
|
|
1714
|
-
return React__default
|
|
1809
|
+
return React__default.createElement(Badge, {
|
|
1715
1810
|
badgeIcon: badgeIcon,
|
|
1716
1811
|
badgeContent: badgeContent,
|
|
1717
1812
|
backgroundColors: ['black', 'black'],
|
|
@@ -1725,8 +1820,8 @@ const AssetGalleryGridCard = props => {
|
|
|
1725
1820
|
height: 24
|
|
1726
1821
|
});
|
|
1727
1822
|
}, [asset]);
|
|
1728
|
-
const renderSummary =
|
|
1729
|
-
return React__default
|
|
1823
|
+
const renderSummary = useCallback(() => {
|
|
1824
|
+
return React__default.createElement(SummaryCard, {
|
|
1730
1825
|
activeSummaryCard: true,
|
|
1731
1826
|
title: asset?.title || '',
|
|
1732
1827
|
description: asset?.description || '',
|
|
@@ -1737,9 +1832,9 @@ const AssetGalleryGridCard = props => {
|
|
|
1737
1832
|
compact: false
|
|
1738
1833
|
});
|
|
1739
1834
|
}, [asset]);
|
|
1740
|
-
return React__default
|
|
1835
|
+
return React__default.createElement(AssetGalleryWrapper, {
|
|
1741
1836
|
disabled: asset.disabled
|
|
1742
|
-
}, React__default
|
|
1837
|
+
}, React__default.createElement(AssetGalleryGridCard$2, {
|
|
1743
1838
|
as: ComputedRootComponent,
|
|
1744
1839
|
component: component,
|
|
1745
1840
|
asset: asset,
|
|
@@ -1755,36 +1850,36 @@ const AssetGalleryGridCard = props => {
|
|
|
1755
1850
|
completed: asset?.completed,
|
|
1756
1851
|
$hasError: asset?.hasError,
|
|
1757
1852
|
customSelectedBorder: customSelectedBorder
|
|
1758
|
-
}, React__default
|
|
1853
|
+
}, React__default.createElement(ContentWrapper, {
|
|
1759
1854
|
layout: asset.layout,
|
|
1760
1855
|
ref: cardRef,
|
|
1761
1856
|
$softSelected: softSelected,
|
|
1762
1857
|
selected: selected,
|
|
1763
1858
|
customSelectedBorder: customSelectedBorder
|
|
1764
|
-
}, React__default
|
|
1859
|
+
}, React__default.createElement(Asset, {
|
|
1765
1860
|
"data-id": "ss",
|
|
1766
1861
|
selected: selected
|
|
1767
1862
|
}, asset.previewUrl && renderPreview(asset)), renderSummary())));
|
|
1768
1863
|
};
|
|
1769
1864
|
AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
1770
|
-
asset:
|
|
1771
|
-
selectable:
|
|
1772
|
-
selected:
|
|
1773
|
-
customSelectedBorder:
|
|
1774
|
-
extendedSelectMode:
|
|
1775
|
-
onAssetSelected:
|
|
1776
|
-
onAssetUnselected:
|
|
1777
|
-
softSelected:
|
|
1778
|
-
component:
|
|
1779
|
-
scrollPosition:
|
|
1865
|
+
asset: PropTypes.shape(assetShapeWithLayout).isRequired,
|
|
1866
|
+
selectable: PropTypes.bool,
|
|
1867
|
+
selected: PropTypes.bool,
|
|
1868
|
+
customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
|
|
1869
|
+
extendedSelectMode: PropTypes.bool,
|
|
1870
|
+
onAssetSelected: PropTypes.func.isRequired,
|
|
1871
|
+
onAssetUnselected: PropTypes.func.isRequired,
|
|
1872
|
+
softSelected: PropTypes.bool.isRequired,
|
|
1873
|
+
component: PropTypes.func,
|
|
1874
|
+
scrollPosition: PropTypes.number
|
|
1780
1875
|
} : {};
|
|
1781
1876
|
AssetGalleryGridCard.defaultProps = {};
|
|
1782
|
-
var AssetGalleryGridCard$1 = build.exports.trackWindowScroll(React__default
|
|
1877
|
+
var AssetGalleryGridCard$1 = build.exports.trackWindowScroll(React__default.memo(AssetGalleryGridCard, (prevProps, nextProps) => {
|
|
1783
1878
|
const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
|
|
1784
|
-
return reactiveProps.every(propKey =>
|
|
1879
|
+
return reactiveProps.every(propKey => get(prevProps, propKey) === get(nextProps, propKey));
|
|
1785
1880
|
}));
|
|
1786
1881
|
|
|
1787
|
-
const AssetGalleryBase = React__default
|
|
1882
|
+
const AssetGalleryBase = React__default.forwardRef(function AssetGalleryBase({
|
|
1788
1883
|
assets: assetsProp,
|
|
1789
1884
|
activeSummaryCard,
|
|
1790
1885
|
displayIcon,
|
|
@@ -1802,13 +1897,13 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
1802
1897
|
component,
|
|
1803
1898
|
...props
|
|
1804
1899
|
}, forwardedRef) {
|
|
1805
|
-
const assetGalleryDOMNode =
|
|
1806
|
-
const assetGalleryCompactRef =
|
|
1807
|
-
const assetGalleryWidth =
|
|
1808
|
-
const minimumRowAspectRatio =
|
|
1809
|
-
const calculatedAssets =
|
|
1810
|
-
const [assets, setAssets] =
|
|
1811
|
-
const MAXIMUM_ROW_HEIGHT =
|
|
1900
|
+
const assetGalleryDOMNode = useRef();
|
|
1901
|
+
const assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
|
|
1902
|
+
const assetGalleryWidth = useRef(0);
|
|
1903
|
+
const minimumRowAspectRatio = useRef(0);
|
|
1904
|
+
const calculatedAssets = useRef([]);
|
|
1905
|
+
const [assets, setAssets] = useState([]);
|
|
1906
|
+
const MAXIMUM_ROW_HEIGHT = useMemo(() => viewMode === 'grid' ? 450 : thumbnailMaxHeight, [viewMode, thumbnailMaxHeight]);
|
|
1812
1907
|
const SPACE_BETWEEN_ASSETS = 8;
|
|
1813
1908
|
const SPACE_UNDER_ASSETS = 8;
|
|
1814
1909
|
const PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
|
|
@@ -1819,13 +1914,13 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
1819
1914
|
const MISSING_HEIGHT_PLACEHOLDER = 1080;
|
|
1820
1915
|
const isBrowser = typeof window !== 'undefined';
|
|
1821
1916
|
const scrollElement = scrollElementProp || window;
|
|
1822
|
-
const previousYOffset =
|
|
1823
|
-
const latestYOffset =
|
|
1824
|
-
const scrollDirection =
|
|
1825
|
-
|
|
1917
|
+
const previousYOffset = useRef(isBrowser ? scrollElement.pageYOffset : 0);
|
|
1918
|
+
const latestYOffset = useRef(isBrowser ? scrollElement.pageYOffset : 0);
|
|
1919
|
+
const scrollDirection = useRef('down');
|
|
1920
|
+
useIsomorphicLayoutEffect(() => {
|
|
1826
1921
|
if (!assetGalleryDOMNode.current) return;
|
|
1827
|
-
const throttledOnResize =
|
|
1828
|
-
const resizeObserver = new
|
|
1922
|
+
const throttledOnResize = throttle(onResize, 1);
|
|
1923
|
+
const resizeObserver = new ResizeObserver(throttledOnResize);
|
|
1829
1924
|
resizeObserver.observe(assetGalleryDOMNode.current);
|
|
1830
1925
|
function onResize(entries) {
|
|
1831
1926
|
entries.forEach(entry => {
|
|
@@ -1840,7 +1935,7 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
1840
1935
|
resizeObserver.unobserve(assetGalleryDOMNode.current);
|
|
1841
1936
|
};
|
|
1842
1937
|
}, [assetsProp, assetGalleryDOMNode, MAXIMUM_ROW_HEIGHT]);
|
|
1843
|
-
|
|
1938
|
+
useEffect(() => {
|
|
1844
1939
|
main();
|
|
1845
1940
|
}, [MAXIMUM_ROW_HEIGHT, assetsProp]);
|
|
1846
1941
|
const main = () => {
|
|
@@ -1960,7 +2055,7 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
1960
2055
|
function calculateAspectRatio(width, height) {
|
|
1961
2056
|
return width / height;
|
|
1962
2057
|
}
|
|
1963
|
-
const totalGalleryHeight =
|
|
2058
|
+
const totalGalleryHeight = useMemo(() => {
|
|
1964
2059
|
if (assets.length === 0) {
|
|
1965
2060
|
return 0;
|
|
1966
2061
|
}
|
|
@@ -1970,8 +2065,8 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
1970
2065
|
}
|
|
1971
2066
|
return lastAsset.layout.translateY + lastAsset.layout.height;
|
|
1972
2067
|
}, [assets]);
|
|
1973
|
-
|
|
1974
|
-
const throttledOnScroll =
|
|
2068
|
+
useEffect(() => {
|
|
2069
|
+
const throttledOnScroll = throttle(onScroll, 200);
|
|
1975
2070
|
scrollElement.addEventListener('scroll', throttledOnScroll, false);
|
|
1976
2071
|
return () => scrollElement.removeEventListener('scroll', throttledOnScroll, false);
|
|
1977
2072
|
}, [assetGalleryDOMNode, calculatedAssets]);
|
|
@@ -2014,7 +2109,7 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
2014
2109
|
} while (elem);
|
|
2015
2110
|
return offsetTop;
|
|
2016
2111
|
}
|
|
2017
|
-
const handleKeyPress =
|
|
2112
|
+
const handleKeyPress = useCallback(e => {
|
|
2018
2113
|
function isElementVisible(el) {
|
|
2019
2114
|
const rect = el.getBoundingClientRect(),
|
|
2020
2115
|
vWidth = scrollElement.innerWidth || document.documentElement.clientWidth,
|
|
@@ -2074,35 +2169,35 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
2074
2169
|
}
|
|
2075
2170
|
}
|
|
2076
2171
|
}, [assets, softSelectedAssetKey, onAssetSoftSelectedChanged, selectedAssetKeys, assetGalleryCompactRef]);
|
|
2077
|
-
const handleClick =
|
|
2172
|
+
const handleClick = useCallback(() => {
|
|
2078
2173
|
onAssetSoftSelectedChanged(null);
|
|
2079
2174
|
}, []);
|
|
2080
|
-
|
|
2175
|
+
useEffect(() => {
|
|
2081
2176
|
if (softSelectable) {
|
|
2082
2177
|
document.addEventListener('keydown', handleKeyPress);
|
|
2083
2178
|
}
|
|
2084
2179
|
return () => document.removeEventListener('keydown', handleKeyPress);
|
|
2085
2180
|
}, [softSelectable, handleKeyPress]);
|
|
2086
|
-
|
|
2181
|
+
useEffect(() => {
|
|
2087
2182
|
if (softSelectable && softSelectedAssetKey !== null) {
|
|
2088
2183
|
document.addEventListener('click', handleClick, true);
|
|
2089
2184
|
}
|
|
2090
2185
|
return () => document.removeEventListener('click', handleClick, true);
|
|
2091
2186
|
}, [softSelectable, softSelectedAssetKey, handleClick]);
|
|
2092
|
-
return React__default
|
|
2187
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(AssetGalleryBase$1, _extends$4({
|
|
2093
2188
|
ref: assetGalleryCompactRef,
|
|
2094
2189
|
style: {
|
|
2095
2190
|
height: `${totalGalleryHeight}px`
|
|
2096
2191
|
},
|
|
2097
2192
|
className: props.className
|
|
2098
|
-
}, props), assets.map(asset => asset.layout.show && React__default
|
|
2193
|
+
}, props), assets.map(asset => asset.layout.show && React__default.createElement(React__default.Fragment, {
|
|
2099
2194
|
key: `asset-gallery-${asset.layout.type}-${asset.key}`
|
|
2100
|
-
}, asset.layout.type === 'groupLabel' && React__default
|
|
2195
|
+
}, asset.layout.type === 'groupLabel' && React__default.createElement(GroupLabel, {
|
|
2101
2196
|
style: {
|
|
2102
2197
|
transform: `translate3d(${asset.layout.translateX}px,${asset.layout.translateY}px, 0)`,
|
|
2103
2198
|
height: `${asset.layout.height}px`
|
|
2104
2199
|
}
|
|
2105
|
-
}, asset.title), asset.layout.type === 'asset' && React__default
|
|
2200
|
+
}, asset.title), asset.layout.type === 'asset' && React__default.createElement(AssetGalleryCardBase, {
|
|
2106
2201
|
style: {
|
|
2107
2202
|
transform: `translate3d(${asset.layout.translateX}px, ${asset.layout.translateY}px, 0)`,
|
|
2108
2203
|
width: `${asset.layout.width}px`,
|
|
@@ -2110,7 +2205,7 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
2110
2205
|
display: 'flex',
|
|
2111
2206
|
justifyContent: 'center'
|
|
2112
2207
|
}
|
|
2113
|
-
}, viewMode === 'grid' ? React__default
|
|
2208
|
+
}, viewMode === 'grid' ? React__default.createElement(AssetGalleryGridCard$1, {
|
|
2114
2209
|
asset: asset,
|
|
2115
2210
|
selectable: 'selectable' in asset ? asset.selectable : selectable,
|
|
2116
2211
|
selected: selectedAssetKeys.includes(asset.key),
|
|
@@ -2120,7 +2215,7 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
2120
2215
|
onAssetUnselected: onAssetUnselected,
|
|
2121
2216
|
$softSelected: softSelectedAssetKey === asset.key,
|
|
2122
2217
|
component: component
|
|
2123
|
-
}) : React__default
|
|
2218
|
+
}) : React__default.createElement(AssetGalleryCompactCard$1, {
|
|
2124
2219
|
asset: asset,
|
|
2125
2220
|
activeSummaryCard: activeSummaryCard,
|
|
2126
2221
|
displayIcon: displayIcon,
|
|
@@ -2137,25 +2232,25 @@ const AssetGalleryBase = React__default["default"].forwardRef(function AssetGall
|
|
|
2137
2232
|
}))))));
|
|
2138
2233
|
});
|
|
2139
2234
|
AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
2140
|
-
assets:
|
|
2141
|
-
activeSummaryCard:
|
|
2142
|
-
displayIcon:
|
|
2143
|
-
viewMode:
|
|
2144
|
-
thumbnailMaxHeight:
|
|
2145
|
-
selectable:
|
|
2146
|
-
customSelectedBorder:
|
|
2147
|
-
selectedAssetKeys:
|
|
2148
|
-
scrollElement:
|
|
2149
|
-
onAssetSelected:
|
|
2150
|
-
onAssetUnselected:
|
|
2151
|
-
softSelectable:
|
|
2152
|
-
softSelectedAssetKey:
|
|
2153
|
-
onAssetSoftSelectedChanged:
|
|
2154
|
-
component:
|
|
2155
|
-
className:
|
|
2235
|
+
assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),
|
|
2236
|
+
activeSummaryCard: PropTypes.bool,
|
|
2237
|
+
displayIcon: PropTypes.string,
|
|
2238
|
+
viewMode: PropTypes.oneOf(['compact', 'grid']),
|
|
2239
|
+
thumbnailMaxHeight: PropTypes.number,
|
|
2240
|
+
selectable: PropTypes.bool,
|
|
2241
|
+
customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
|
|
2242
|
+
selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
|
|
2243
|
+
scrollElement: PropTypes.instanceOf(Element),
|
|
2244
|
+
onAssetSelected: PropTypes.func.isRequired,
|
|
2245
|
+
onAssetUnselected: PropTypes.func.isRequired,
|
|
2246
|
+
softSelectable: PropTypes.bool,
|
|
2247
|
+
softSelectedAssetKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
2248
|
+
onAssetSoftSelectedChanged: PropTypes.func.isRequired,
|
|
2249
|
+
component: PropTypes.func,
|
|
2250
|
+
className: PropTypes.string
|
|
2156
2251
|
} : {};
|
|
2157
2252
|
|
|
2158
|
-
const AssetGallery = React__default
|
|
2253
|
+
const AssetGallery = React__default.forwardRef(function AssetGallery({
|
|
2159
2254
|
assets,
|
|
2160
2255
|
activeSummaryCard,
|
|
2161
2256
|
viewMode,
|
|
@@ -2171,37 +2266,37 @@ const AssetGallery = React__default["default"].forwardRef(function AssetGallery(
|
|
|
2171
2266
|
displayIcon,
|
|
2172
2267
|
...props
|
|
2173
2268
|
}, forwardedRef) {
|
|
2174
|
-
const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] =
|
|
2175
|
-
const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] =
|
|
2176
|
-
|
|
2269
|
+
const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = useState(selectedAssetKeys || []);
|
|
2270
|
+
const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = useState(null);
|
|
2271
|
+
useEffect(() => {
|
|
2177
2272
|
setSelectedAssetKeysInternalState(selectedAssetKeys || []);
|
|
2178
2273
|
}, [selectedAssetKeys]);
|
|
2179
|
-
|
|
2274
|
+
useEffect(() => {
|
|
2180
2275
|
setSelectedAssetKeysInternalState(current => {
|
|
2181
2276
|
return current.filter(c => assets.some(a => a.key === c));
|
|
2182
2277
|
});
|
|
2183
2278
|
}, [assets.length]);
|
|
2184
|
-
|
|
2279
|
+
useEffect(() => {
|
|
2185
2280
|
if (selectedAssetKeys === selectedAssetKeysInternalState) return;
|
|
2186
|
-
if (
|
|
2281
|
+
if (isFunction(onSelectedChanged)) {
|
|
2187
2282
|
onSelectedChanged(selectedAssetKeysInternalState);
|
|
2188
2283
|
}
|
|
2189
2284
|
}, [selectedAssetKeysInternalState]);
|
|
2190
|
-
|
|
2191
|
-
if (
|
|
2285
|
+
useEffect(() => {
|
|
2286
|
+
if (isFunction(onSoftSelectedChanged)) {
|
|
2192
2287
|
onSoftSelectedChanged(softSelectedAssetKeyInternalState);
|
|
2193
2288
|
}
|
|
2194
2289
|
}, [softSelectedAssetKeyInternalState]);
|
|
2195
|
-
const onSelected =
|
|
2290
|
+
const onSelected = useCallback(assetKey => {
|
|
2196
2291
|
setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);
|
|
2197
2292
|
}, []);
|
|
2198
|
-
const onUnselected =
|
|
2293
|
+
const onUnselected = useCallback(assetKey => {
|
|
2199
2294
|
setSelectedAssetKeysInternalState(currentState => currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey));
|
|
2200
2295
|
}, []);
|
|
2201
|
-
const onAssetSoftSelectedChanged =
|
|
2296
|
+
const onAssetSoftSelectedChanged = useCallback((assetKey = null) => {
|
|
2202
2297
|
setSoftSelectedAssetKeyInternalState(assetKey);
|
|
2203
2298
|
}, []);
|
|
2204
|
-
return React__default
|
|
2299
|
+
return React__default.createElement(AssetGalleryBase, _extends$4({
|
|
2205
2300
|
ref: forwardedRef,
|
|
2206
2301
|
assets: assets,
|
|
2207
2302
|
activeSummaryCard: activeSummaryCard,
|
|
@@ -2221,19 +2316,19 @@ const AssetGallery = React__default["default"].forwardRef(function AssetGallery(
|
|
|
2221
2316
|
}, props));
|
|
2222
2317
|
});
|
|
2223
2318
|
AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
2224
|
-
assets:
|
|
2225
|
-
displayIcon:
|
|
2226
|
-
activeSummaryCard:
|
|
2227
|
-
viewMode:
|
|
2228
|
-
thumbnailMaxHeight:
|
|
2229
|
-
selectable:
|
|
2230
|
-
customSelectedBorder:
|
|
2231
|
-
selectedAssetKeys:
|
|
2232
|
-
onSelectedChanged:
|
|
2233
|
-
softSelectable:
|
|
2234
|
-
scrollElement:
|
|
2235
|
-
onSoftSelectedChanged:
|
|
2236
|
-
component:
|
|
2319
|
+
assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),
|
|
2320
|
+
displayIcon: PropTypes.string,
|
|
2321
|
+
activeSummaryCard: PropTypes.bool,
|
|
2322
|
+
viewMode: PropTypes.oneOf(['compact', 'grid']),
|
|
2323
|
+
thumbnailMaxHeight: PropTypes.number,
|
|
2324
|
+
selectable: PropTypes.bool,
|
|
2325
|
+
customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
|
|
2326
|
+
selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
|
|
2327
|
+
onSelectedChanged: PropTypes.func,
|
|
2328
|
+
softSelectable: PropTypes.bool,
|
|
2329
|
+
scrollElement: PropTypes.instanceOf(Element),
|
|
2330
|
+
onSoftSelectedChanged: PropTypes.func,
|
|
2331
|
+
component: PropTypes.func
|
|
2237
2332
|
} : {};
|
|
2238
2333
|
AssetGallery.defaultProps = {
|
|
2239
2334
|
assets: [],
|
|
@@ -2245,133 +2340,4 @@ AssetGallery.defaultProps = {
|
|
|
2245
2340
|
displayIcon: ''
|
|
2246
2341
|
};
|
|
2247
2342
|
|
|
2248
|
-
|
|
2249
|
-
font-family: ${props => props.theme.primaryFontFamily};
|
|
2250
|
-
`;
|
|
2251
|
-
const AssetActionButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
|
|
2252
|
-
border-radius: 50%;
|
|
2253
|
-
width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto'};
|
|
2254
|
-
height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto'};
|
|
2255
|
-
cursor: pointer;
|
|
2256
|
-
display: flex;
|
|
2257
|
-
justify-content: center;
|
|
2258
|
-
align-items: center;
|
|
2259
|
-
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
2260
|
-
${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
|
|
2261
|
-
svg {
|
|
2262
|
-
pointer-events: none;
|
|
2263
|
-
width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto'};
|
|
2264
|
-
height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto'};
|
|
2265
|
-
${props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
|
|
2266
|
-
}
|
|
2267
|
-
`;
|
|
2268
|
-
const ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
|
|
2269
|
-
font-size: 14px;
|
|
2270
|
-
border-radius: 4px;
|
|
2271
|
-
padding: 8px 12px;
|
|
2272
|
-
white-space: nowrap;
|
|
2273
|
-
color: white;
|
|
2274
|
-
background: ${props => props.theme.getColor('gray-700')};
|
|
2275
|
-
`;
|
|
2276
|
-
const StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)`
|
|
2277
|
-
fill: ${props => props.theme.getColor('gray-700')};
|
|
2278
|
-
`;
|
|
2279
|
-
const Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
|
|
2280
|
-
pointer-events: none;
|
|
2281
|
-
`;
|
|
2282
|
-
|
|
2283
|
-
const AssetAction = React__default["default"].forwardRef(function AssetAction({
|
|
2284
|
-
action,
|
|
2285
|
-
asset,
|
|
2286
|
-
itemKey,
|
|
2287
|
-
...props
|
|
2288
|
-
}, forwardedRef) {
|
|
2289
|
-
const ARROW_WIDTH = 10;
|
|
2290
|
-
const ARROW_HEIGHT = 5;
|
|
2291
|
-
const GAP = 3;
|
|
2292
|
-
const arrowRef = React.useRef(null);
|
|
2293
|
-
const [isOpen, setIsOpen] = React.useState(false);
|
|
2294
|
-
const [placement] = React.useState('bottom');
|
|
2295
|
-
const {
|
|
2296
|
-
refs,
|
|
2297
|
-
floatingStyles,
|
|
2298
|
-
context
|
|
2299
|
-
} = react.useFloating({
|
|
2300
|
-
placement,
|
|
2301
|
-
open: isOpen,
|
|
2302
|
-
onOpenChange: setIsOpen,
|
|
2303
|
-
whileElementsMounted: react.autoUpdate,
|
|
2304
|
-
middleware: [react.offset(ARROW_HEIGHT + GAP), react.flip({
|
|
2305
|
-
padding: 5
|
|
2306
|
-
}), react.shift({
|
|
2307
|
-
padding: 5
|
|
2308
|
-
}), react.arrow({
|
|
2309
|
-
element: arrowRef
|
|
2310
|
-
})]
|
|
2311
|
-
});
|
|
2312
|
-
const {
|
|
2313
|
-
isMounted,
|
|
2314
|
-
styles
|
|
2315
|
-
} = react.useTransitionStyles(context, {
|
|
2316
|
-
initial: {
|
|
2317
|
-
transform: 'translateY(-8px)',
|
|
2318
|
-
opacity: 0
|
|
2319
|
-
},
|
|
2320
|
-
duration: {
|
|
2321
|
-
open: 200,
|
|
2322
|
-
close: 100
|
|
2323
|
-
}
|
|
2324
|
-
});
|
|
2325
|
-
const hover = react.useHover(context);
|
|
2326
|
-
const dismiss = react.useDismiss(context, {
|
|
2327
|
-
referencePress: true
|
|
2328
|
-
});
|
|
2329
|
-
const {
|
|
2330
|
-
getReferenceProps,
|
|
2331
|
-
getFloatingProps
|
|
2332
|
-
} = react.useInteractions([dismiss, hover]);
|
|
2333
|
-
const onActionClick = React.useCallback((e, action) => {
|
|
2334
|
-
e.preventDefault();
|
|
2335
|
-
e.stopPropagation();
|
|
2336
|
-
if (lodash.isFunction(action?.onClick)) {
|
|
2337
|
-
action.onClick(asset);
|
|
2338
|
-
}
|
|
2339
|
-
}, [action]);
|
|
2340
|
-
return React__default["default"].createElement(AssetAction$2, _rollupPluginBabelHelpers._extends({
|
|
2341
|
-
ref: forwardedRef
|
|
2342
|
-
}, props), React__default["default"].createElement(AssetActionButton, _rollupPluginBabelHelpers._extends({
|
|
2343
|
-
key: itemKey,
|
|
2344
|
-
ref: refs.setReference
|
|
2345
|
-
}, getReferenceProps(), {
|
|
2346
|
-
onClick: e => onActionClick(e, action.onClick(asset), itemKey),
|
|
2347
|
-
actionWidthHeight: action.actionWidthHeight
|
|
2348
|
-
}), action.icon), isOpen && isMounted && React__default["default"].createElement(Floating, _rollupPluginBabelHelpers._extends({
|
|
2349
|
-
className: "floating",
|
|
2350
|
-
ref: refs.setFloating,
|
|
2351
|
-
style: floatingStyles
|
|
2352
|
-
}, getFloatingProps()), React__default["default"].createElement(ActionTitle, {
|
|
2353
|
-
style: styles
|
|
2354
|
-
}, action.title), React__default["default"].createElement(StyledFloatingArrow, {
|
|
2355
|
-
ref: arrowRef,
|
|
2356
|
-
context: context,
|
|
2357
|
-
width: ARROW_WIDTH,
|
|
2358
|
-
height: ARROW_HEIGHT
|
|
2359
|
-
})));
|
|
2360
|
-
});
|
|
2361
|
-
AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
2362
|
-
action: defaultTheme.PropTypes.shape({
|
|
2363
|
-
icon: defaultTheme.PropTypes.node,
|
|
2364
|
-
onClick: defaultTheme.PropTypes.func,
|
|
2365
|
-
actionWidthHeight: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
|
|
2366
|
-
title: defaultTheme.PropTypes.string
|
|
2367
|
-
}),
|
|
2368
|
-
asset: defaultTheme.PropTypes.object,
|
|
2369
|
-
itemKey: defaultTheme.PropTypes.string
|
|
2370
|
-
} : {};
|
|
2371
|
-
AssetAction.defaultProps = {};
|
|
2372
|
-
var AssetAction$1 = AssetAction;
|
|
2373
|
-
|
|
2374
|
-
exports.AssetAction = AssetAction$1;
|
|
2375
|
-
exports.AssetActionsBase = AssetActionsBase;
|
|
2376
|
-
exports.AssetGallery = AssetGallery;
|
|
2377
|
-
exports.SummaryCard = SummaryCard;
|
|
2343
|
+
export { AssetGallery as A, SummaryCard as S, AssetActionsBase as a, AssetAction as b };
|