@ntbjs/react-components 0.0.1-beta.43 → 0.0.1-beta.45
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/{ActionButton-10a681b9.js → ActionButton-9e502e55.js} +9 -9
- package/{AssetGallery-514bef11.js → AssetGallery-de336893.js} +324 -378
- package/{Button-6f6b4ed4.js → Button-191167c8.js} +28 -36
- package/{Checkbox-791a409f.js → Checkbox-25c75a7c.js} +27 -35
- package/{Popover-0ff13419.js → Popover-6ca643ba.js} +15 -15
- package/{Radio-9271a4b6.js → Radio-1521b33c.js} +14 -17
- package/{TextArea-70a74014.js → TextArea-a73b1729.js} +23 -30
- package/{TextInput-770f2416.js → TextInput-143d6346.js} +25 -32
- package/{Tooltip-85e7d561.js → Tooltip-25b6f5fa.js} +11 -11
- package/data/Popover/index.js +2 -2
- package/data/index.js +3 -3
- package/{defaultTheme-18d7c1ee.js → defaultTheme-d8298500.js} +94 -105
- package/icons/audio.svg +3 -0
- package/icons/headset.svg +1 -0
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/Button/index.js +2 -2
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/Radio/index.js +2 -2
- package/inputs/TextArea/index.js +2 -2
- package/inputs/TextInput/index.js +2 -2
- package/inputs/index.js +7 -7
- package/package.json +10 -8
- package/ssr/index.js +1 -3
- package/widgets/AssetGallery/index.js +10 -10
- package/widgets/index.js +10 -10
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-d8298500.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var lodash = require('lodash');
|
|
6
6
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
7
7
|
var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
8
|
-
var ActionButton = require('./ActionButton-
|
|
9
|
-
require('./Button-
|
|
10
|
-
require('./Checkbox-
|
|
11
|
-
require('./Radio-
|
|
12
|
-
require('./TextArea-
|
|
13
|
-
require('./TextInput-
|
|
14
|
-
require('./Popover-
|
|
15
|
-
var Tooltip = require('./Tooltip-
|
|
8
|
+
var ActionButton = require('./ActionButton-9e502e55.js');
|
|
9
|
+
require('./Button-191167c8.js');
|
|
10
|
+
require('./Checkbox-25c75a7c.js');
|
|
11
|
+
require('./Radio-1521b33c.js');
|
|
12
|
+
require('./TextArea-a73b1729.js');
|
|
13
|
+
require('./TextInput-143d6346.js');
|
|
14
|
+
require('./Popover-6ca643ba.js');
|
|
15
|
+
var Tooltip = require('./Tooltip-25b6f5fa.js');
|
|
16
16
|
var styled = require('styled-components');
|
|
17
17
|
var polished = require('polished');
|
|
18
18
|
|
|
@@ -27,14 +27,12 @@ function _interopNamespace(e) {
|
|
|
27
27
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
28
28
|
Object.defineProperty(n, k, d.get ? d : {
|
|
29
29
|
enumerable: true,
|
|
30
|
-
get: function () {
|
|
31
|
-
return e[k];
|
|
32
|
-
}
|
|
30
|
+
get: function () { return e[k]; }
|
|
33
31
|
});
|
|
34
32
|
}
|
|
35
33
|
});
|
|
36
34
|
}
|
|
37
|
-
n[
|
|
35
|
+
n["default"] = e;
|
|
38
36
|
return Object.freeze(n);
|
|
39
37
|
}
|
|
40
38
|
|
|
@@ -92,7 +90,7 @@ var assetShape = {
|
|
|
92
90
|
}),
|
|
93
91
|
width: defaultTheme.PropTypes.number,
|
|
94
92
|
height: defaultTheme.PropTypes.number,
|
|
95
|
-
fileType: defaultTheme.PropTypes.oneOf(['image', 'video', 'pdf', 'file']).isRequired,
|
|
93
|
+
fileType: defaultTheme.PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,
|
|
96
94
|
fileTypeIconPosition: defaultTheme.PropTypes.oneOf(['top-left', 'top-right']),
|
|
97
95
|
group: defaultTheme.PropTypes.string,
|
|
98
96
|
actions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
|
|
@@ -125,232 +123,226 @@ var css_248z = ".lazy-load-image-background.opacity {\n opacity: 0;\n}\n\n.lazy
|
|
|
125
123
|
defaultTheme.styleInject(css_248z);
|
|
126
124
|
|
|
127
125
|
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
|
|
128
|
-
var AssetGalleryCompactCard$2 = styled__default[
|
|
126
|
+
var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 100%;\n svg {\n width: 25%;\n }\n }\n"])), function (props) {
|
|
129
127
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
130
128
|
}, function (props) {
|
|
131
129
|
return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
|
|
132
130
|
}, function (props) {
|
|
133
131
|
return props.extendedSelectMode && styled.css(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
|
|
134
132
|
});
|
|
135
|
-
var Figure = styled__default[
|
|
133
|
+
var Figure = styled__default["default"].figure(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n height: 100%;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
|
|
136
134
|
return props.hasHeightAndWidth ? styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
|
|
137
135
|
});
|
|
138
|
-
var Overlay = styled__default[
|
|
139
|
-
var OverlayBackdrop = styled__default[
|
|
136
|
+
var Overlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
|
|
137
|
+
var OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
140
138
|
return props.softSelected && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
141
139
|
}, Overlay);
|
|
142
|
-
var OverlayInfo = styled__default[
|
|
140
|
+
var OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
|
|
143
141
|
return props.theme.getColor('gray-100');
|
|
144
142
|
});
|
|
145
|
-
var OverlayInfoTopTitleAndFileType = styled__default[
|
|
146
|
-
var OverlayInfoTopTitle = styled__default[
|
|
143
|
+
var OverlayInfoTopTitleAndFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
144
|
+
var OverlayInfoTopTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-right: 20px;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
147
145
|
return props.theme.primaryFontFamily;
|
|
148
146
|
}, function (props) {
|
|
149
147
|
return props.softSelected && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
150
148
|
}, Overlay);
|
|
151
|
-
var OverlayInfoTopFileType = styled__default[
|
|
152
|
-
var OverlayInfoTopNoteAndFileType = styled__default[
|
|
153
|
-
var OverlayInfoTopNote = styled__default[
|
|
149
|
+
var OverlayInfoTopFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 19px;\n max-height: 19px;\n"])));
|
|
150
|
+
var OverlayInfoTopNoteAndFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
151
|
+
var OverlayInfoTopNote = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
|
|
154
152
|
var _props$assetTitle;
|
|
155
|
-
|
|
156
153
|
return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? styled.css(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
|
|
157
154
|
});
|
|
158
|
-
var OverlayInfoTopFileTypeTopLeft = styled__default[
|
|
155
|
+
var OverlayInfoTopFileTypeTopLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n margin-right: 5px;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
|
|
159
156
|
var _props$assetTitle2;
|
|
160
|
-
|
|
161
157
|
return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
|
|
162
158
|
});
|
|
163
|
-
var OverlayInfoTopNoteTitle = styled__default[
|
|
159
|
+
var OverlayInfoTopNoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 250ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
164
160
|
return props.theme.primaryFontFamily;
|
|
165
161
|
}, Overlay);
|
|
166
|
-
var OverlayCompleted$1 = styled__default[
|
|
162
|
+
var OverlayCompleted$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
167
163
|
return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
168
164
|
});
|
|
169
|
-
var OverlayHasError$1 = styled__default[
|
|
165
|
+
var OverlayHasError$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
|
|
170
166
|
return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
171
167
|
});
|
|
172
|
-
var OverlaySelected$1 = styled__default[
|
|
168
|
+
var OverlaySelected$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
173
169
|
return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
174
170
|
});
|
|
175
|
-
var OverlayInfoBottom = styled__default[
|
|
176
|
-
var OverlayInfoBottomSelectButton = styled__default[
|
|
171
|
+
var OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
172
|
+
var OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
177
173
|
return props.selected ? 1 : 0;
|
|
178
174
|
}, function (props) {
|
|
179
175
|
return props.selected ? props.theme.getColor('orange-500') : 'inherit';
|
|
180
176
|
}, Overlay);
|
|
181
|
-
var OverlayInfoBottomActions = styled__default[
|
|
182
|
-
var ConsumerDefinedOverlay$1 = styled__default[
|
|
183
|
-
var Fragment$1 = styled__default[
|
|
184
|
-
|
|
185
|
-
function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
|
|
186
|
-
|
|
187
|
-
var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
188
|
-
fill: "currentColor",
|
|
189
|
-
d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
|
|
190
|
-
fillOpacity: 0.9
|
|
191
|
-
});
|
|
177
|
+
var OverlayInfoBottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), Overlay);
|
|
178
|
+
var ConsumerDefinedOverlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
179
|
+
var Fragment$1 = styled__default["default"].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
|
|
192
180
|
|
|
181
|
+
var _path$6;
|
|
182
|
+
function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
|
|
193
183
|
function SvgCheckCircleFilled(props) {
|
|
194
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
184
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
195
185
|
xmlns: "http://www.w3.org/2000/svg",
|
|
196
186
|
viewBox: "0 0 24 24"
|
|
197
|
-
}, props),
|
|
187
|
+
}, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
188
|
+
fill: "currentColor",
|
|
189
|
+
d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
|
|
190
|
+
fillOpacity: 0.9
|
|
191
|
+
})));
|
|
198
192
|
}
|
|
199
193
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
var _ref$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
203
|
-
fill: "currentColor",
|
|
204
|
-
d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
|
|
205
|
-
});
|
|
206
|
-
|
|
194
|
+
var _path$5;
|
|
195
|
+
function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
|
|
207
196
|
function SvgWarningCircle(props) {
|
|
208
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
197
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
209
198
|
xmlns: "http://www.w3.org/2000/svg",
|
|
210
199
|
viewBox: "0 0 24 24"
|
|
211
|
-
}, props),
|
|
200
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
201
|
+
fill: "currentColor",
|
|
202
|
+
d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
|
|
203
|
+
})));
|
|
212
204
|
}
|
|
213
205
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
217
|
-
fill: "currentColor",
|
|
218
|
-
d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
|
|
219
|
-
});
|
|
220
|
-
|
|
206
|
+
var _path$4;
|
|
207
|
+
function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
|
|
221
208
|
function SvgPlay(props) {
|
|
222
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
209
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
223
210
|
xmlns: "http://www.w3.org/2000/svg",
|
|
224
211
|
viewBox: "0 0 18.86 24"
|
|
225
|
-
}, props),
|
|
212
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
213
|
+
fill: "currentColor",
|
|
214
|
+
d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
|
|
215
|
+
})));
|
|
226
216
|
}
|
|
227
217
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
231
|
-
fill: "currentColor",
|
|
232
|
-
d: "M21 0H3A3 3 0 00.05 2.9V21A3 3 0 003 24h18.1a3 3 0 002.95-3V3A3.11 3.11 0 0021 0zm0 21H3V3h18.1v18zm-6-6v-4.52a1.56 1.56 0 00-1.55-1.55h-3.01v7.58h2.94A1.47 1.47 0 0014.93 15zm-3-4.52h1.54V15H12zm6 3.08h1.55V12H18v-1.52h1.55V9.07h-2.94v7.58h1.55v-3.09zm-12.07 0h1.56A1.55 1.55 0 009 12v-1.52a1.56 1.56 0 00-1.51-1.55H4.4v7.58h1.54zm0-3.08h1.56V12H5.94z"
|
|
233
|
-
});
|
|
234
|
-
|
|
218
|
+
var _path$3;
|
|
219
|
+
function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
|
|
235
220
|
function SvgPdf(props) {
|
|
236
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
221
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
237
222
|
xmlns: "http://www.w3.org/2000/svg",
|
|
238
223
|
viewBox: "0 0 24 24"
|
|
239
|
-
}, props),
|
|
224
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
225
|
+
fill: "currentColor",
|
|
226
|
+
d: "M21 0H3A3 3 0 00.05 2.9V21A3 3 0 003 24h18.1a3 3 0 002.95-3V3A3.11 3.11 0 0021 0zm0 21H3V3h18.1v18zm-6-6v-4.52a1.56 1.56 0 00-1.55-1.55h-3.01v7.58h2.94A1.47 1.47 0 0014.93 15zm-3-4.52h1.54V15H12zm6 3.08h1.55V12H18v-1.52h1.55V9.07h-2.94v7.58h1.55v-3.09zm-12.07 0h1.56A1.55 1.55 0 009 12v-1.52a1.56 1.56 0 00-1.51-1.55H4.4v7.58h1.54zm0-3.08h1.56V12H5.94z"
|
|
227
|
+
})));
|
|
240
228
|
}
|
|
241
229
|
|
|
242
|
-
|
|
230
|
+
var _path$2;
|
|
231
|
+
function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
|
|
232
|
+
function SvgFile(props) {
|
|
233
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
234
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
235
|
+
viewBox: "0 0 19.2 24"
|
|
236
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
237
|
+
fill: "currentColor",
|
|
238
|
+
d: "M12 0H2.4A2.4 2.4 0 000 2.4v19.2A2.4 2.4 0 002.39 24H16.8a2.41 2.41 0 002.4-2.4V7.2zM2.4 21.6V2.4h8.4v6h6v13.2z"
|
|
239
|
+
})));
|
|
240
|
+
}
|
|
243
241
|
|
|
244
|
-
var
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
242
|
+
var _path$1;
|
|
243
|
+
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
244
|
+
function SvgAudio(props) {
|
|
245
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
246
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
247
|
+
viewBox: "0 0 18.86 24"
|
|
248
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
249
|
+
fill: "currentColor",
|
|
250
|
+
d: "M10 21q-1.65 0-2.825-1.175Q6 18.65 6 17q0-1.65 1.175-2.825Q8.35 13 10 13q.575 0 1.062.137.488.138.938.413V3h6v4h-4v10q0 1.65-1.175 2.825Q11.65 21 10 21z"
|
|
251
|
+
})));
|
|
252
|
+
}
|
|
248
253
|
|
|
249
|
-
|
|
254
|
+
var _path;
|
|
255
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
256
|
+
function SvgHeadset(props) {
|
|
250
257
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
251
258
|
xmlns: "http://www.w3.org/2000/svg",
|
|
252
|
-
|
|
253
|
-
|
|
259
|
+
fill: "currentColor",
|
|
260
|
+
viewBox: "0 0 24 24"
|
|
261
|
+
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
262
|
+
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"
|
|
263
|
+
})));
|
|
254
264
|
}
|
|
255
265
|
|
|
266
|
+
var _excluded$3 = ["component", "asset"],
|
|
267
|
+
_excluded2$1 = ["component", "className"];
|
|
256
268
|
var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
|
|
257
269
|
var component = _ref.component,
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
270
|
+
asset = _ref.asset,
|
|
271
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded$3);
|
|
261
272
|
var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
|
|
262
|
-
|
|
263
273
|
if (component) {
|
|
264
274
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
|
|
275
|
+
if (React__default["default"].isValidElement(component(asset, newProps.children))) {
|
|
276
|
+
return React__default["default"].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
|
|
268
277
|
}
|
|
269
278
|
}
|
|
270
|
-
|
|
271
|
-
return React__default['default'].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
|
|
279
|
+
return React__default["default"].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
|
|
272
280
|
ref: newProps.innerRef
|
|
273
281
|
}, newProps));
|
|
274
282
|
};
|
|
275
|
-
|
|
276
|
-
var ComputedActionButton$1 = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
|
|
283
|
+
var ComputedActionButton$1 = React__default["default"].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
|
|
277
284
|
var component = _ref2.component,
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
285
|
+
className = _ref2.className,
|
|
286
|
+
props = defaultTheme._objectWithoutProperties(_ref2, _excluded2$1);
|
|
281
287
|
var newProps = props;
|
|
282
|
-
newProps.children = React__default[
|
|
288
|
+
newProps.children = React__default["default"].createElement(ActionButton.ActionButton, {
|
|
283
289
|
ref: forwardedRef,
|
|
284
290
|
className: className,
|
|
285
291
|
icon: newProps.icon,
|
|
286
292
|
onClick: newProps.onClick
|
|
287
293
|
});
|
|
288
|
-
|
|
289
294
|
if (component) {
|
|
290
295
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
|
|
296
|
+
if (React__default["default"].isValidElement(component())) {
|
|
297
|
+
return React__default["default"].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
|
|
294
298
|
}
|
|
295
299
|
}
|
|
296
|
-
|
|
297
|
-
return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
|
|
300
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, newProps.children);
|
|
298
301
|
});
|
|
299
|
-
|
|
300
302
|
var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
301
303
|
var _asset$note;
|
|
302
|
-
|
|
303
304
|
var asset = props.asset,
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
305
|
+
selectable = props.selectable,
|
|
306
|
+
hasHeightAndWidth = props.hasHeightAndWidth,
|
|
307
|
+
selected = props.selected,
|
|
308
|
+
extendedSelectMode = props.extendedSelectMode,
|
|
309
|
+
onAssetSelected = props.onAssetSelected,
|
|
310
|
+
onAssetUnselected = props.onAssetUnselected,
|
|
311
|
+
softSelected = props.softSelected,
|
|
312
|
+
component = props.component,
|
|
313
|
+
scrollPosition = props.scrollPosition;
|
|
314
314
|
function onClick(event) {
|
|
315
315
|
if (extendedSelectMode) {
|
|
316
316
|
return onSelectClick(event);
|
|
317
317
|
}
|
|
318
|
-
|
|
319
318
|
if (lodash.isFunction(asset.onClick)) {
|
|
320
319
|
asset.onClick(event, asset);
|
|
321
320
|
}
|
|
322
321
|
}
|
|
323
|
-
|
|
324
322
|
function onSelectClick(event) {
|
|
325
323
|
event.preventDefault();
|
|
326
324
|
event.stopPropagation();
|
|
327
|
-
|
|
328
325
|
if (selected) {
|
|
329
326
|
return onAssetUnselected(asset.key);
|
|
330
327
|
}
|
|
331
|
-
|
|
332
328
|
if (selectable) {
|
|
333
329
|
return onAssetSelected(asset.key);
|
|
334
330
|
}
|
|
335
331
|
}
|
|
336
|
-
|
|
337
332
|
function onActionClick(event, action) {
|
|
338
333
|
event.preventDefault();
|
|
339
334
|
event.stopPropagation();
|
|
340
335
|
action.onClick(asset);
|
|
341
336
|
}
|
|
342
|
-
|
|
343
337
|
function onContextMenu(event) {
|
|
344
338
|
event.preventDefault();
|
|
345
339
|
asset.onContextMenu(event);
|
|
346
340
|
}
|
|
347
|
-
|
|
348
341
|
React.useEffect(function () {
|
|
349
342
|
if (lodash.isFunction(asset.onContextMenu)) {
|
|
350
343
|
if (cardRef.current) {
|
|
351
344
|
cardRef.current.addEventListener('contextmenu', onContextMenu);
|
|
352
345
|
}
|
|
353
|
-
|
|
354
346
|
return function () {
|
|
355
347
|
if (cardRef.current) {
|
|
356
348
|
cardRef.current.removeEventListener('contextmenu', onContextMenu);
|
|
@@ -358,17 +350,14 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
358
350
|
};
|
|
359
351
|
}
|
|
360
352
|
}, []);
|
|
361
|
-
|
|
362
353
|
function onDragstart(event) {
|
|
363
354
|
asset.onDragstart(event);
|
|
364
355
|
}
|
|
365
|
-
|
|
366
356
|
React.useEffect(function () {
|
|
367
357
|
if (lodash.isFunction(asset.onDragstart)) {
|
|
368
358
|
if (dragRef.current) {
|
|
369
359
|
dragRef.current.addEventListener('dragstart', onDragstart);
|
|
370
360
|
}
|
|
371
|
-
|
|
372
361
|
return function () {
|
|
373
362
|
if (dragRef.current) {
|
|
374
363
|
dragRef.current.removeEventListener('dragstart', onDragstart);
|
|
@@ -379,60 +368,89 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
379
368
|
var videoPlayerRef = React.useRef();
|
|
380
369
|
var cardRef = React.useRef();
|
|
381
370
|
var dragRef = React.useRef(null);
|
|
382
|
-
|
|
383
371
|
function onMouseEnter(event) {
|
|
384
372
|
event.stopPropagation();
|
|
385
|
-
|
|
386
373
|
if (videoPlayerRef.current) {
|
|
387
374
|
var playPromise = videoPlayerRef.current.play();
|
|
388
|
-
|
|
389
375
|
if (playPromise !== undefined) {
|
|
390
376
|
playPromise.then(function () {})["catch"](function () {});
|
|
391
377
|
}
|
|
392
378
|
}
|
|
393
|
-
|
|
394
379
|
if (lodash.isFunction(asset.onMouseEnter)) {
|
|
395
380
|
asset.onMouseEnter(event, asset);
|
|
396
381
|
}
|
|
397
382
|
}
|
|
398
|
-
|
|
399
383
|
function onMouseLeave(event) {
|
|
400
384
|
event.stopPropagation();
|
|
401
|
-
|
|
402
385
|
if (videoPlayerRef.current) {
|
|
403
386
|
videoPlayerRef.current.pause();
|
|
404
387
|
}
|
|
405
388
|
}
|
|
406
|
-
|
|
407
389
|
var typeIcon = React.useMemo(function () {
|
|
408
390
|
switch (asset.fileType) {
|
|
409
391
|
case 'video':
|
|
410
392
|
{
|
|
411
|
-
return React__default[
|
|
393
|
+
return React__default["default"].createElement(OverlayInfoTopFileType, {
|
|
412
394
|
as: SvgPlay
|
|
413
395
|
});
|
|
414
396
|
}
|
|
415
|
-
|
|
416
397
|
case 'pdf':
|
|
417
398
|
{
|
|
418
|
-
return React__default[
|
|
399
|
+
return React__default["default"].createElement(OverlayInfoTopFileType, {
|
|
419
400
|
as: SvgPdf
|
|
420
401
|
});
|
|
421
402
|
}
|
|
422
|
-
|
|
403
|
+
case 'audio':
|
|
404
|
+
{
|
|
405
|
+
return React__default["default"].createElement(OverlayInfoTopFileType, {
|
|
406
|
+
as: SvgAudio
|
|
407
|
+
});
|
|
408
|
+
}
|
|
423
409
|
case 'file':
|
|
424
410
|
{
|
|
425
|
-
return React__default[
|
|
411
|
+
return React__default["default"].createElement(OverlayInfoTopFileType, {
|
|
426
412
|
as: SvgFile
|
|
427
413
|
});
|
|
428
414
|
}
|
|
429
|
-
|
|
430
415
|
default:
|
|
431
416
|
{
|
|
432
417
|
return null;
|
|
433
418
|
}
|
|
434
419
|
}
|
|
435
420
|
}, [asset.fileType]);
|
|
421
|
+
var renderPreview = function renderPreview(asset) {
|
|
422
|
+
if (['video'].includes(asset.fileType)) {
|
|
423
|
+
return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
424
|
+
scrollPosition: scrollPosition
|
|
425
|
+
}, React__default["default"].createElement("video", {
|
|
426
|
+
ref: videoPlayerRef,
|
|
427
|
+
loop: true,
|
|
428
|
+
muted: true
|
|
429
|
+
}, React__default["default"].createElement("source", {
|
|
430
|
+
src: asset.previewUrl,
|
|
431
|
+
type: "video/mp4"
|
|
432
|
+
})));
|
|
433
|
+
}
|
|
434
|
+
if (['audio'].includes(asset.fileType)) {
|
|
435
|
+
return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
436
|
+
scrollPosition: scrollPosition
|
|
437
|
+
}, React__default["default"].createElement("div", {
|
|
438
|
+
className: "audio"
|
|
439
|
+
}, React__default["default"].createElement(SvgHeadset, null)));
|
|
440
|
+
}
|
|
441
|
+
return React__default["default"].createElement(Figure, {
|
|
442
|
+
hasHeightAndWidth: hasHeightAndWidth
|
|
443
|
+
}, React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
|
|
444
|
+
alt: asset.title,
|
|
445
|
+
src: asset.previewUrl,
|
|
446
|
+
height: "100%",
|
|
447
|
+
width: "100%",
|
|
448
|
+
delayMethod: "debounce",
|
|
449
|
+
delayTime: 0,
|
|
450
|
+
threshold: 1500,
|
|
451
|
+
scrollPosition: scrollPosition
|
|
452
|
+
}));
|
|
453
|
+
};
|
|
436
454
|
React.useEffect(function () {
|
|
437
455
|
if (softSelected) {
|
|
438
456
|
cardRef.current.scrollIntoView({
|
|
@@ -441,7 +459,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
441
459
|
});
|
|
442
460
|
}
|
|
443
461
|
}, [softSelected]);
|
|
444
|
-
return React__default[
|
|
462
|
+
return React__default["default"].createElement(AssetGalleryCompactCard$2, {
|
|
445
463
|
as: ComputedRootComponent$1,
|
|
446
464
|
component: component,
|
|
447
465
|
disabled: asset.disabled,
|
|
@@ -452,47 +470,27 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
452
470
|
onMouseLeave: onMouseLeave,
|
|
453
471
|
draggable: asset.draggable,
|
|
454
472
|
innerRef: dragRef
|
|
455
|
-
}, asset.previewUrl && (
|
|
456
|
-
scrollPosition: scrollPosition
|
|
457
|
-
}, React__default['default'].createElement("video", {
|
|
458
|
-
ref: videoPlayerRef,
|
|
459
|
-
loop: true,
|
|
460
|
-
muted: true
|
|
461
|
-
}, React__default['default'].createElement("source", {
|
|
462
|
-
src: asset.previewUrl,
|
|
463
|
-
type: "video/mp4"
|
|
464
|
-
}))) : React__default['default'].createElement(Figure, {
|
|
465
|
-
hasHeightAndWidth: hasHeightAndWidth
|
|
466
|
-
}, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
|
|
467
|
-
alt: asset.title,
|
|
468
|
-
src: asset.previewUrl,
|
|
469
|
-
height: "100%",
|
|
470
|
-
width: "100%",
|
|
471
|
-
delayMethod: "debounce",
|
|
472
|
-
delayTime: 0,
|
|
473
|
-
threshold: 1500,
|
|
474
|
-
scrollPosition: scrollPosition
|
|
475
|
-
}))), React__default['default'].createElement(Overlay, {
|
|
473
|
+
}, asset.previewUrl && renderPreview(asset), React__default["default"].createElement(Overlay, {
|
|
476
474
|
ref: cardRef
|
|
477
|
-
}, React__default[
|
|
475
|
+
}, React__default["default"].createElement(OverlayBackdrop, {
|
|
478
476
|
softSelected: softSelected
|
|
479
|
-
}), React__default[
|
|
477
|
+
}), React__default["default"].createElement(OverlayInfo, null, React__default["default"].createElement("div", null, React__default["default"].createElement(OverlayInfoTopTitleAndFileType, null, React__default["default"].createElement(OverlayInfoTopTitle, {
|
|
480
478
|
title: asset.title,
|
|
481
479
|
softSelected: softSelected
|
|
482
|
-
}, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default[
|
|
480
|
+
}, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default["default"].createElement(OverlayInfoTopNoteAndFileType, null, asset.fileTypeIconPosition === 'top-left' && React__default["default"].createElement(OverlayInfoTopFileTypeTopLeft, {
|
|
483
481
|
assetTitle: asset.title
|
|
484
|
-
}, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default[
|
|
482
|
+
}, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(OverlayInfoTopNote, {
|
|
485
483
|
title: asset.note.title,
|
|
486
484
|
assetTitle: asset.title
|
|
487
|
-
}, asset.note.icon ? asset.note.icon : React__default[
|
|
485
|
+
}, asset.note.icon ? asset.note.icon : React__default["default"].createElement(SvgWarningCircle, null), React__default["default"].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default["default"].createElement(OverlayInfoBottom, null, selectable && React__default["default"].createElement(OverlayInfoBottomSelectButton, {
|
|
488
486
|
selected: selected
|
|
489
|
-
}, React__default[
|
|
487
|
+
}, React__default["default"].createElement(SvgCheckCircleFilled, {
|
|
490
488
|
onClick: onSelectClick
|
|
491
|
-
})), React__default[
|
|
492
|
-
return React__default[
|
|
489
|
+
})), React__default["default"].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
490
|
+
return React__default["default"].createElement(Tooltip.Tooltip, {
|
|
493
491
|
key: "".concat(asset.key, "-").concat(action.title),
|
|
494
492
|
content: action.title
|
|
495
|
-
}, React__default[
|
|
493
|
+
}, React__default["default"].createElement(Fragment$1, {
|
|
496
494
|
as: ComputedActionButton$1,
|
|
497
495
|
component: action.component,
|
|
498
496
|
className: action.className,
|
|
@@ -501,16 +499,15 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
501
499
|
return onActionClick(event, action);
|
|
502
500
|
}
|
|
503
501
|
}));
|
|
504
|
-
})))), asset.completed && React__default[
|
|
502
|
+
})))), asset.completed && React__default["default"].createElement(OverlayCompleted$1, {
|
|
505
503
|
softSelected: softSelected
|
|
506
|
-
}), asset.hasError && React__default[
|
|
504
|
+
}), asset.hasError && React__default["default"].createElement(OverlayHasError$1, {
|
|
507
505
|
softSelected: softSelected
|
|
508
|
-
}), selectable && React__default[
|
|
506
|
+
}), selectable && React__default["default"].createElement(OverlaySelected$1, {
|
|
509
507
|
selected: selected,
|
|
510
508
|
softSelected: softSelected
|
|
511
|
-
})), asset.overlay && React__default[
|
|
509
|
+
})), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
|
|
512
510
|
};
|
|
513
|
-
|
|
514
511
|
AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
515
512
|
asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
|
|
516
513
|
hasHeightAndWidth: defaultTheme.PropTypes.bool.isRequired,
|
|
@@ -524,7 +521,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
524
521
|
scrollPosition: defaultTheme.PropTypes.number
|
|
525
522
|
} : {};
|
|
526
523
|
AssetGalleryCompactCard.defaultProps = {};
|
|
527
|
-
var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default[
|
|
524
|
+
var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
|
|
528
525
|
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
|
|
529
526
|
return reactiveProps.every(function (propKey) {
|
|
530
527
|
return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
|
|
@@ -532,170 +529,177 @@ var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(Re
|
|
|
532
529
|
}));
|
|
533
530
|
|
|
534
531
|
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
535
|
-
var AssetGalleryGridCard$2 = styled__default[
|
|
532
|
+
var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n margin: 0;\n ", "\n border: 1px solid;\n ", ";\n ", "\n box-sizing: border-box;\n text-decoration: none;\n"])), function (props) {
|
|
536
533
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
|
|
537
534
|
}, function (props) {
|
|
538
535
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
539
536
|
}, function (props) {
|
|
540
537
|
return props.extendedSelectMode && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
|
|
541
538
|
});
|
|
542
|
-
var ContentWrapper = styled__default[
|
|
539
|
+
var ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: ", "px;\n"])), function (props) {
|
|
543
540
|
return props.layout.height;
|
|
544
541
|
});
|
|
545
|
-
var Note = styled__default[
|
|
546
|
-
var NoteTitle = styled__default[
|
|
542
|
+
var Note = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 9px 15px 7px;\n\n svg {\n max-width: 18px;\n max-height: 18px;\n width: auto;\n flex-shrink: 0;\n }\n"])));
|
|
543
|
+
var NoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n"])), function (props) {
|
|
547
544
|
return props.theme.secondaryFontFamily;
|
|
548
545
|
});
|
|
549
|
-
var Asset = styled__default[
|
|
550
|
-
var AssetFigure = styled__default[
|
|
551
|
-
var Info = styled__default[
|
|
546
|
+
var Asset = styled__default["default"].div(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding-top: 35px;\n padding-left: 8px;\n padding-right: 8px;\n\n video {\n display: block;\n width: 100%;\n height: 200px;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 200px;\n svg {\n width: 25%;\n }\n }\n"])));
|
|
547
|
+
var AssetFigure = styled__default["default"].figure(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n height: 200px;\n\n img {\n object-fit: contain;\n height: 100%;\n width: 100%;\n }\n"])));
|
|
548
|
+
var Info = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.7;\n padding: 15px 15px 5px;\n"])), function (props) {
|
|
552
549
|
return props.theme.primaryFontFamily;
|
|
553
550
|
});
|
|
554
|
-
var InfoTitle = styled__default[
|
|
555
|
-
var InfoFileType = styled__default[
|
|
556
|
-
var InfoDescription = styled__default[
|
|
557
|
-
var Bottom = styled__default[
|
|
558
|
-
var BottomSelectButton = styled__default[
|
|
551
|
+
var InfoTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n margin-bottom: 4px;\n"])));
|
|
552
|
+
var InfoFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 18px;\n max-height: 18px;\n"])));
|
|
553
|
+
var InfoDescription = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n"])));
|
|
554
|
+
var Bottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-top: auto;\n padding: 0 10px 10px;\n"])));
|
|
555
|
+
var BottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
559
556
|
return props.selected ? 1 : 0;
|
|
560
557
|
}, function (props) {
|
|
561
558
|
return props.selected ? props.theme.getColor('orange-500') : 'inherit';
|
|
562
559
|
}, AssetGalleryGridCard$2);
|
|
563
|
-
var BottomActions = styled__default[
|
|
564
|
-
var OverlayCompleted = styled__default[
|
|
560
|
+
var BottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), AssetGalleryGridCard$2);
|
|
561
|
+
var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
565
562
|
return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
566
563
|
});
|
|
567
|
-
var OverlayHasError = styled__default[
|
|
564
|
+
var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
|
|
568
565
|
return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
569
566
|
});
|
|
570
|
-
var OverlaySelected = styled__default[
|
|
567
|
+
var OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
571
568
|
return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
572
569
|
});
|
|
573
|
-
var ConsumerDefinedOverlay = styled__default[
|
|
574
|
-
var Fragment = styled__default[
|
|
570
|
+
var ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
571
|
+
var Fragment = styled__default["default"].div(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral([""])));
|
|
575
572
|
|
|
573
|
+
var _excluded$2 = ["component", "asset"],
|
|
574
|
+
_excluded2 = ["component", "className"];
|
|
576
575
|
var ComputedRootComponent = function ComputedRootComponent(_ref) {
|
|
577
576
|
var component = _ref.component,
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
577
|
+
asset = _ref.asset,
|
|
578
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded$2);
|
|
581
579
|
var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
|
|
582
|
-
|
|
583
580
|
if (component) {
|
|
584
581
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
|
|
582
|
+
if (React__default["default"].isValidElement(component(asset, newProps.children))) {
|
|
583
|
+
return React__default["default"].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
|
|
588
584
|
}
|
|
589
585
|
}
|
|
590
|
-
|
|
591
|
-
return React__default['default'].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
|
|
586
|
+
return React__default["default"].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
|
|
592
587
|
ref: newProps.innerRef
|
|
593
588
|
}, newProps));
|
|
594
589
|
};
|
|
595
|
-
|
|
596
590
|
ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
|
|
597
|
-
var ComputedActionButton = React__default[
|
|
591
|
+
var ComputedActionButton = React__default["default"].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
|
|
598
592
|
var component = _ref2.component,
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
593
|
+
className = _ref2.className,
|
|
594
|
+
props = defaultTheme._objectWithoutProperties(_ref2, _excluded2);
|
|
602
595
|
var newProps = props;
|
|
603
|
-
newProps.children = React__default[
|
|
596
|
+
newProps.children = React__default["default"].createElement(ActionButton.ActionButton, {
|
|
604
597
|
ref: forwardedRef,
|
|
605
598
|
className: className,
|
|
606
599
|
icon: newProps.icon,
|
|
607
600
|
onClick: newProps.onClick
|
|
608
601
|
});
|
|
609
|
-
|
|
610
602
|
if (component) {
|
|
611
603
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
|
|
604
|
+
if (React__default["default"].isValidElement(component())) {
|
|
605
|
+
return React__default["default"].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
|
|
615
606
|
}
|
|
616
607
|
}
|
|
617
|
-
|
|
618
|
-
return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
|
|
608
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, newProps.children);
|
|
619
609
|
});
|
|
620
|
-
|
|
621
610
|
var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
622
611
|
var _asset$note;
|
|
623
|
-
|
|
624
612
|
var asset = props.asset,
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
613
|
+
selectable = props.selectable,
|
|
614
|
+
selected = props.selected,
|
|
615
|
+
extendedSelectMode = props.extendedSelectMode,
|
|
616
|
+
onAssetSelected = props.onAssetSelected,
|
|
617
|
+
onAssetUnselected = props.onAssetUnselected,
|
|
618
|
+
softSelected = props.softSelected,
|
|
619
|
+
component = props.component,
|
|
620
|
+
scrollPosition = props.scrollPosition;
|
|
633
621
|
var videoPlayerRef = React.useRef();
|
|
634
622
|
var cardRef = React.useRef();
|
|
635
623
|
var dragRef = React.useRef(null);
|
|
636
|
-
|
|
637
624
|
function onMouseEnter(event) {
|
|
638
625
|
event.stopPropagation();
|
|
639
|
-
|
|
640
626
|
if (videoPlayerRef.current) {
|
|
641
627
|
var playPromise = videoPlayerRef.current.play();
|
|
642
|
-
|
|
643
628
|
if (playPromise !== undefined) {
|
|
644
629
|
playPromise.then(function () {})["catch"](function () {});
|
|
645
630
|
}
|
|
646
631
|
}
|
|
647
|
-
|
|
648
632
|
if (lodash.isFunction(asset.onMouseEnter)) {
|
|
649
633
|
asset.onMouseEnter(event, asset);
|
|
650
634
|
}
|
|
651
635
|
}
|
|
652
|
-
|
|
653
636
|
function onMouseLeave(event) {
|
|
654
637
|
event.stopPropagation();
|
|
655
|
-
|
|
656
638
|
if (videoPlayerRef.current) {
|
|
657
639
|
videoPlayerRef.current.pause();
|
|
658
640
|
}
|
|
659
641
|
}
|
|
660
|
-
|
|
661
642
|
function onClick(event) {
|
|
662
643
|
if (extendedSelectMode) {
|
|
663
644
|
return onSelectClick(event);
|
|
664
645
|
}
|
|
665
|
-
|
|
666
646
|
if (lodash.isFunction(asset.onClick)) {
|
|
667
647
|
asset.onClick(event, asset);
|
|
668
648
|
}
|
|
669
649
|
}
|
|
670
|
-
|
|
671
650
|
function onSelectClick(event) {
|
|
672
651
|
event.preventDefault();
|
|
673
652
|
event.stopPropagation();
|
|
674
|
-
|
|
675
653
|
if (selected) {
|
|
676
654
|
return onAssetUnselected(asset.key);
|
|
677
655
|
}
|
|
678
|
-
|
|
679
656
|
return onAssetSelected(asset.key);
|
|
680
657
|
}
|
|
681
|
-
|
|
682
658
|
function onActionClick(event, action) {
|
|
683
659
|
event.preventDefault();
|
|
684
660
|
event.stopPropagation();
|
|
685
661
|
action.onClick(asset);
|
|
686
662
|
}
|
|
687
|
-
|
|
688
663
|
function onContextMenu(event) {
|
|
689
664
|
event.preventDefault();
|
|
690
665
|
asset.onContextMenu(event);
|
|
691
666
|
}
|
|
692
|
-
|
|
667
|
+
function renderPreview(asset) {
|
|
668
|
+
if (['video'].includes(asset.fileType)) {
|
|
669
|
+
return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
670
|
+
scrollPosition: scrollPosition
|
|
671
|
+
}, React__default["default"].createElement("video", {
|
|
672
|
+
ref: videoPlayerRef,
|
|
673
|
+
loop: true,
|
|
674
|
+
muted: true
|
|
675
|
+
}, React__default["default"].createElement("source", {
|
|
676
|
+
src: asset.previewUrl,
|
|
677
|
+
type: "video/mp4"
|
|
678
|
+
})));
|
|
679
|
+
}
|
|
680
|
+
if (['audio'].includes(asset.fileType)) {
|
|
681
|
+
return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
682
|
+
scrollPosition: scrollPosition
|
|
683
|
+
}, React__default["default"].createElement("div", {
|
|
684
|
+
className: "audio"
|
|
685
|
+
}, React__default["default"].createElement(SvgHeadset, null)));
|
|
686
|
+
}
|
|
687
|
+
return React__default["default"].createElement(AssetFigure, null, React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
|
|
688
|
+
alt: asset.title,
|
|
689
|
+
src: asset.previewUrl,
|
|
690
|
+
height: "100%",
|
|
691
|
+
width: "100%",
|
|
692
|
+
delayMethod: "debounce",
|
|
693
|
+
delayTime: 0,
|
|
694
|
+
threshold: 1500,
|
|
695
|
+
scrollPosition: scrollPosition
|
|
696
|
+
}));
|
|
697
|
+
}
|
|
693
698
|
React.useEffect(function () {
|
|
694
699
|
if (lodash.isFunction(asset.onContextMenu)) {
|
|
695
700
|
if (cardRef.current) {
|
|
696
701
|
cardRef.current.addEventListener('contextmenu', onContextMenu);
|
|
697
702
|
}
|
|
698
|
-
|
|
699
703
|
return function () {
|
|
700
704
|
if (cardRef.current) {
|
|
701
705
|
cardRef.current.removeEventListener('contextmenu', onContextMenu);
|
|
@@ -703,17 +707,14 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
703
707
|
};
|
|
704
708
|
}
|
|
705
709
|
}, []);
|
|
706
|
-
|
|
707
710
|
function onDragstart(event) {
|
|
708
711
|
asset.onDragstart(event);
|
|
709
712
|
}
|
|
710
|
-
|
|
711
713
|
React.useEffect(function () {
|
|
712
714
|
if (lodash.isFunction(asset.onDragstart)) {
|
|
713
715
|
if (dragRef.current) {
|
|
714
716
|
dragRef.current.addEventListener('dragstart', onDragstart);
|
|
715
717
|
}
|
|
716
|
-
|
|
717
718
|
return function () {
|
|
718
719
|
if (dragRef.current) {
|
|
719
720
|
dragRef.current.removeEventListener('dragstart', onDragstart);
|
|
@@ -729,7 +730,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
729
730
|
});
|
|
730
731
|
}
|
|
731
732
|
}, [softSelected]);
|
|
732
|
-
return React__default[
|
|
733
|
+
return React__default["default"].createElement(AssetGalleryGridCard$2, {
|
|
733
734
|
as: ComputedRootComponent,
|
|
734
735
|
component: component,
|
|
735
736
|
asset: asset,
|
|
@@ -741,52 +742,36 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
741
742
|
onMouseLeave: onMouseLeave,
|
|
742
743
|
draggable: asset.draggable,
|
|
743
744
|
innerRef: dragRef
|
|
744
|
-
}, React__default[
|
|
745
|
+
}, React__default["default"].createElement(ContentWrapper, {
|
|
745
746
|
layout: asset.layout,
|
|
746
747
|
ref: cardRef
|
|
747
|
-
}, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default[
|
|
748
|
+
}, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(Note, {
|
|
748
749
|
title: asset.note.title
|
|
749
|
-
}, asset.note.icon ? asset.note.icon : React__default[
|
|
750
|
+
}, asset.note.icon ? asset.note.icon : React__default["default"].createElement(SvgWarningCircle, null), React__default["default"].createElement(NoteTitle, null, asset.note.title)), React__default["default"].createElement(Asset, {
|
|
750
751
|
"data-id": "ss"
|
|
751
|
-
}, asset.previewUrl && ([
|
|
752
|
-
scrollPosition: scrollPosition
|
|
753
|
-
}, React__default['default'].createElement("video", {
|
|
754
|
-
ref: videoPlayerRef,
|
|
755
|
-
loop: true,
|
|
756
|
-
muted: true
|
|
757
|
-
}, React__default['default'].createElement("source", {
|
|
758
|
-
src: asset.previewUrl,
|
|
759
|
-
type: "video/mp4"
|
|
760
|
-
}))) : React__default['default'].createElement(AssetFigure, null, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
|
|
761
|
-
alt: asset.title,
|
|
762
|
-
src: asset.previewUrl,
|
|
763
|
-
height: "100%",
|
|
764
|
-
width: "100%",
|
|
765
|
-
delayMethod: "debounce",
|
|
766
|
-
delayTime: 0,
|
|
767
|
-
threshold: 1500,
|
|
768
|
-
scrollPosition: scrollPosition
|
|
769
|
-
})))), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
|
|
752
|
+
}, asset.previewUrl && renderPreview(asset)), React__default["default"].createElement(Info, null, React__default["default"].createElement("div", {
|
|
770
753
|
style: {
|
|
771
754
|
display: 'flex'
|
|
772
755
|
}
|
|
773
|
-
}, React__default[
|
|
756
|
+
}, React__default["default"].createElement(InfoTitle, {
|
|
774
757
|
title: asset.title
|
|
775
|
-
}, asset.title || '—'), asset.fileType === 'video' && React__default[
|
|
758
|
+
}, asset.title || '—'), asset.fileType === 'video' && React__default["default"].createElement(InfoFileType, {
|
|
776
759
|
as: SvgPlay
|
|
777
|
-
}), asset.fileType === '
|
|
760
|
+
}), asset.fileType === 'audio' && React__default["default"].createElement(InfoFileType, {
|
|
761
|
+
as: SvgAudio
|
|
762
|
+
}), asset.fileType === 'pdf' && React__default["default"].createElement(InfoFileType, {
|
|
778
763
|
as: SvgPdf
|
|
779
|
-
}), asset.fileType === 'file' && React__default[
|
|
764
|
+
}), asset.fileType === 'file' && React__default["default"].createElement(InfoFileType, {
|
|
780
765
|
as: SvgFile
|
|
781
|
-
})), React__default[
|
|
766
|
+
})), React__default["default"].createElement(InfoDescription, null, asset.description)), React__default["default"].createElement(Bottom, null, selectable && React__default["default"].createElement(BottomSelectButton, {
|
|
782
767
|
selected: selected
|
|
783
|
-
}, React__default[
|
|
768
|
+
}, React__default["default"].createElement(SvgCheckCircleFilled, {
|
|
784
769
|
onClick: onSelectClick
|
|
785
|
-
})), React__default[
|
|
786
|
-
return React__default[
|
|
770
|
+
})), React__default["default"].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
771
|
+
return React__default["default"].createElement(Tooltip.Tooltip, {
|
|
787
772
|
key: "".concat(asset.key, "-").concat(action.title),
|
|
788
773
|
content: action.title
|
|
789
|
-
}, React__default[
|
|
774
|
+
}, React__default["default"].createElement(Fragment, {
|
|
790
775
|
as: ComputedActionButton,
|
|
791
776
|
component: action.component,
|
|
792
777
|
className: action.className,
|
|
@@ -795,16 +780,15 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
795
780
|
return onActionClick(event, action);
|
|
796
781
|
}
|
|
797
782
|
}));
|
|
798
|
-
})))), asset.completed && React__default[
|
|
783
|
+
})))), asset.completed && React__default["default"].createElement(OverlayCompleted, {
|
|
799
784
|
softSelected: softSelected
|
|
800
|
-
}), asset.hasError && React__default[
|
|
785
|
+
}), asset.hasError && React__default["default"].createElement(OverlayHasError, {
|
|
801
786
|
softSelected: softSelected
|
|
802
|
-
}), selectable && React__default[
|
|
787
|
+
}), selectable && React__default["default"].createElement(OverlaySelected, {
|
|
803
788
|
selected: selected,
|
|
804
789
|
softSelected: softSelected
|
|
805
|
-
}), asset.overlay && React__default[
|
|
790
|
+
}), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay, null, asset.overlay));
|
|
806
791
|
};
|
|
807
|
-
|
|
808
792
|
AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
809
793
|
asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
|
|
810
794
|
selectable: defaultTheme.PropTypes.bool,
|
|
@@ -817,7 +801,7 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
817
801
|
scrollPosition: defaultTheme.PropTypes.number
|
|
818
802
|
} : {};
|
|
819
803
|
AssetGalleryGridCard.defaultProps = {};
|
|
820
|
-
var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default[
|
|
804
|
+
var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
|
|
821
805
|
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
|
|
822
806
|
return reactiveProps.every(function (propKey) {
|
|
823
807
|
return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
|
|
@@ -825,39 +809,37 @@ var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React
|
|
|
825
809
|
}));
|
|
826
810
|
|
|
827
811
|
var _templateObject, _templateObject2, _templateObject3;
|
|
828
|
-
var AssetGalleryBase$1 = styled__default[
|
|
829
|
-
var GroupLabel = styled__default[
|
|
812
|
+
var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
813
|
+
var GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n ", "\n display: flex;\n align-items: flex-end;\n position: absolute;\n padding-bottom: 4px;\n box-sizing: border-box;\n"])), function (props) {
|
|
830
814
|
return props.theme.primaryFontFamily;
|
|
831
815
|
}, function (props) {
|
|
832
816
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
833
817
|
});
|
|
834
|
-
var AssetGalleryCardBase = styled__default[
|
|
818
|
+
var AssetGalleryCardBase = styled__default["default"].div(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n overflow: hidden;\n will-change: transform, width, height;\n"])));
|
|
835
819
|
|
|
836
|
-
var
|
|
820
|
+
var _excluded$1 = ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"];
|
|
821
|
+
var AssetGalleryBase = React__default["default"].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
|
|
837
822
|
var assetsProp = _ref.assets,
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
823
|
+
viewMode = _ref.viewMode,
|
|
824
|
+
thumbnailMaxHeight = _ref.thumbnailMaxHeight,
|
|
825
|
+
selectable = _ref.selectable,
|
|
826
|
+
selectedAssetKeys = _ref.selectedAssetKeys,
|
|
827
|
+
onAssetSelected = _ref.onAssetSelected,
|
|
828
|
+
onAssetUnselected = _ref.onAssetUnselected,
|
|
829
|
+
softSelectable = _ref.softSelectable,
|
|
830
|
+
softSelectedAssetKey = _ref.softSelectedAssetKey,
|
|
831
|
+
onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
|
|
832
|
+
component = _ref.component,
|
|
833
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded$1);
|
|
850
834
|
var assetGalleryDOMNode = React.useRef();
|
|
851
835
|
var assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
|
|
852
836
|
var assetGalleryWidth = React.useRef(0);
|
|
853
837
|
var minimumRowAspectRatio = React.useRef(0);
|
|
854
838
|
var calculatedAssets = React.useRef([]);
|
|
855
|
-
|
|
856
839
|
var _useState = React.useState([]),
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
840
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
841
|
+
assets = _useState2[0],
|
|
842
|
+
setAssets = _useState2[1];
|
|
861
843
|
var MAXIMUM_ROW_HEIGHT = React.useMemo(function () {
|
|
862
844
|
return viewMode === 'grid' ? 450 : thumbnailMaxHeight;
|
|
863
845
|
}, [viewMode, thumbnailMaxHeight]);
|
|
@@ -876,9 +858,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
876
858
|
useIsomorphicLayoutEffect(function () {
|
|
877
859
|
if (!assetGalleryDOMNode.current) return;
|
|
878
860
|
var throttledOnResize = lodash.throttle(onResize, 1);
|
|
879
|
-
var resizeObserver = new ResizeObserver__default[
|
|
861
|
+
var resizeObserver = new ResizeObserver__default["default"](throttledOnResize);
|
|
880
862
|
resizeObserver.observe(assetGalleryDOMNode.current);
|
|
881
|
-
|
|
882
863
|
function onResize(entries) {
|
|
883
864
|
entries.forEach(function (entry) {
|
|
884
865
|
if (assetGalleryWidth.current === entry.contentRect.width) return;
|
|
@@ -888,7 +869,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
888
869
|
});
|
|
889
870
|
});
|
|
890
871
|
}
|
|
891
|
-
|
|
892
872
|
return function () {
|
|
893
873
|
resizeObserver.unobserve(assetGalleryDOMNode.current);
|
|
894
874
|
};
|
|
@@ -896,20 +876,28 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
896
876
|
React.useEffect(function () {
|
|
897
877
|
main();
|
|
898
878
|
}, [MAXIMUM_ROW_HEIGHT, assetsProp]);
|
|
899
|
-
|
|
900
879
|
var main = function main() {
|
|
901
880
|
calculateAssetGalleryAspectRatio();
|
|
902
881
|
calculateLayout();
|
|
903
882
|
calculateVisibility();
|
|
904
883
|
};
|
|
905
|
-
|
|
906
884
|
var calculateAssetGalleryAspectRatio = function calculateAssetGalleryAspectRatio() {
|
|
907
885
|
if (assetGalleryWidth.current > 0) {
|
|
908
886
|
minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
|
|
909
887
|
}
|
|
910
888
|
};
|
|
911
|
-
|
|
912
889
|
var calculateLayout = function calculateLayout() {
|
|
890
|
+
var assetsWithoutAKey = assetsProp.filter(function (a) {
|
|
891
|
+
return !a.key;
|
|
892
|
+
});
|
|
893
|
+
if (assetsWithoutAKey.length > 0) {
|
|
894
|
+
assetsProp = assetsProp.filter(function (a) {
|
|
895
|
+
return a.key;
|
|
896
|
+
});
|
|
897
|
+
assetsWithoutAKey.forEach(function (a) {
|
|
898
|
+
return console.warn("Omitted asset from the gallery because it was missing the unique `key` property.", a);
|
|
899
|
+
});
|
|
900
|
+
}
|
|
913
901
|
if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
|
|
914
902
|
var row = [];
|
|
915
903
|
var translateX = 0;
|
|
@@ -920,7 +908,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
920
908
|
var desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
|
|
921
909
|
assetsProp.forEach(function (asset, index) {
|
|
922
910
|
var _assetsProp;
|
|
923
|
-
|
|
924
911
|
if (asset.group && asset.group !== lastGroup) {
|
|
925
912
|
computedAssets.push({
|
|
926
913
|
title: asset.group,
|
|
@@ -935,9 +922,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
935
922
|
lastGroup = asset.group;
|
|
936
923
|
translateY += 50 + SPACE_UNDER_ASSETS;
|
|
937
924
|
}
|
|
938
|
-
|
|
939
925
|
row.push(asset);
|
|
940
|
-
|
|
941
926
|
if (row.length === desiredAssetCountInRow || index + 1 === assetsProp.length || (_assetsProp = assetsProp[index + 1]) !== null && _assetsProp !== void 0 && _assetsProp.group && assetsProp[index + 1].group !== asset.group) {
|
|
942
927
|
row.forEach(function (rowAsset) {
|
|
943
928
|
computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
|
|
@@ -967,7 +952,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
967
952
|
var _computedAssets = [];
|
|
968
953
|
assetsProp.forEach(function (asset, index) {
|
|
969
954
|
var _assetsProp2;
|
|
970
|
-
|
|
971
955
|
if (asset.group && asset.group !== _lastGroup) {
|
|
972
956
|
_computedAssets.push({
|
|
973
957
|
title: asset.group,
|
|
@@ -979,23 +963,17 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
979
963
|
translateY: Math.round(_translateY)
|
|
980
964
|
}
|
|
981
965
|
});
|
|
982
|
-
|
|
983
966
|
_lastGroup = asset.group;
|
|
984
967
|
_translateY += 50 + SPACE_UNDER_ASSETS;
|
|
985
968
|
}
|
|
986
|
-
|
|
987
969
|
rowAspectRatio += calculateAspectRatio(asset.width || MISSING_WIDTH_PLACEHOLDER, asset.height || MISSING_HEIGHT_PLACEHOLDER);
|
|
988
|
-
|
|
989
970
|
_row.push(asset);
|
|
990
|
-
|
|
991
971
|
if (rowAspectRatio >= minimumRowAspectRatio.current || index + 1 === assetsProp.length || (_assetsProp2 = assetsProp[index + 1]) !== null && _assetsProp2 !== void 0 && _assetsProp2.group && assetsProp[index + 1].group !== asset.group) {
|
|
992
972
|
rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
|
|
993
973
|
var totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (_row.length - 1);
|
|
994
974
|
var rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
|
|
995
|
-
|
|
996
975
|
_row.forEach(function (rowAsset) {
|
|
997
976
|
var assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
|
|
998
|
-
|
|
999
977
|
_computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
|
|
1000
978
|
layout: {
|
|
1001
979
|
type: 'asset',
|
|
@@ -1006,10 +984,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1006
984
|
hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
|
|
1007
985
|
}
|
|
1008
986
|
}));
|
|
1009
|
-
|
|
1010
987
|
_translateX += assetWidth + SPACE_BETWEEN_ASSETS;
|
|
1011
988
|
});
|
|
1012
|
-
|
|
1013
989
|
_row = [];
|
|
1014
990
|
rowAspectRatio = 0;
|
|
1015
991
|
_translateY += rowHeight + SPACE_UNDER_ASSETS;
|
|
@@ -1020,16 +996,13 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1020
996
|
}
|
|
1021
997
|
}
|
|
1022
998
|
};
|
|
1023
|
-
|
|
1024
999
|
function calculateAspectRatio(width, height) {
|
|
1025
1000
|
return width / height;
|
|
1026
1001
|
}
|
|
1027
|
-
|
|
1028
1002
|
var totalGalleryHeight = React.useMemo(function () {
|
|
1029
1003
|
if (assets.length === 0) {
|
|
1030
1004
|
return 0;
|
|
1031
1005
|
}
|
|
1032
|
-
|
|
1033
1006
|
var lastAsset = assets[assets.length - 1];
|
|
1034
1007
|
return lastAsset.layout.translateY + lastAsset.layout.height;
|
|
1035
1008
|
}, [assets]);
|
|
@@ -1040,19 +1013,16 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1040
1013
|
return window.removeEventListener('scroll', throttledOnScroll, false);
|
|
1041
1014
|
};
|
|
1042
1015
|
}, [assetGalleryDOMNode, calculatedAssets]);
|
|
1043
|
-
|
|
1044
1016
|
function onScroll() {
|
|
1045
1017
|
setScrollPositionAndDirection();
|
|
1046
1018
|
calculateVisibility();
|
|
1047
1019
|
}
|
|
1048
|
-
|
|
1049
1020
|
function setScrollPositionAndDirection() {
|
|
1050
1021
|
var newYOffset = window.pageYOffset;
|
|
1051
1022
|
previousYOffset.current = latestYOffset.current;
|
|
1052
1023
|
latestYOffset.current = newYOffset;
|
|
1053
1024
|
scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
|
|
1054
1025
|
}
|
|
1055
|
-
|
|
1056
1026
|
var calculateVisibility = function calculateVisibility() {
|
|
1057
1027
|
if (!assetGalleryDOMNode.current) return;
|
|
1058
1028
|
var bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
|
|
@@ -1068,44 +1038,35 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1068
1038
|
} else {
|
|
1069
1039
|
asset.layout.show = true;
|
|
1070
1040
|
}
|
|
1071
|
-
|
|
1072
1041
|
return asset;
|
|
1073
1042
|
});
|
|
1074
1043
|
setAssets(finalizedAssets);
|
|
1075
1044
|
};
|
|
1076
|
-
|
|
1077
1045
|
function getOffsetTop(elem) {
|
|
1078
1046
|
var offsetTop = 0;
|
|
1079
|
-
|
|
1080
1047
|
do {
|
|
1081
1048
|
if (!isNaN(elem.offsetTop)) {
|
|
1082
1049
|
offsetTop += elem.offsetTop;
|
|
1083
1050
|
}
|
|
1084
|
-
|
|
1085
1051
|
elem = elem.offsetParent;
|
|
1086
1052
|
} while (elem);
|
|
1087
|
-
|
|
1088
1053
|
return offsetTop;
|
|
1089
1054
|
}
|
|
1090
|
-
|
|
1091
1055
|
var handleKeyPress = React.useCallback(function (e) {
|
|
1092
1056
|
function isElementVisible(el) {
|
|
1093
1057
|
var rect = el.getBoundingClientRect(),
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1058
|
+
vWidth = window.innerWidth || document.documentElement.clientWidth,
|
|
1059
|
+
vHeight = window.innerHeight || document.documentElement.clientHeight,
|
|
1060
|
+
efp = function efp(x, y) {
|
|
1061
|
+
return document.elementFromPoint(x, y);
|
|
1062
|
+
};
|
|
1100
1063
|
if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
|
|
1101
1064
|
return el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom));
|
|
1102
1065
|
}
|
|
1103
|
-
|
|
1104
1066
|
function softSelectFirstVisibleAsset() {
|
|
1105
1067
|
var visibleAssets = assets.filter(function (asset) {
|
|
1106
1068
|
return asset.layout.show;
|
|
1107
1069
|
});
|
|
1108
|
-
|
|
1109
1070
|
for (var i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
|
|
1110
1071
|
if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
|
|
1111
1072
|
onAssetSoftSelectedChanged(visibleAssets[i].key);
|
|
@@ -1113,22 +1074,18 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1113
1074
|
}
|
|
1114
1075
|
}
|
|
1115
1076
|
}
|
|
1116
|
-
|
|
1117
1077
|
if (assets.length === 0) return;
|
|
1118
|
-
|
|
1119
1078
|
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
1120
1079
|
if (softSelectedAssetKey === null) {
|
|
1121
1080
|
softSelectFirstVisibleAsset();
|
|
1122
1081
|
return;
|
|
1123
1082
|
}
|
|
1124
1083
|
}
|
|
1125
|
-
|
|
1126
1084
|
if (e.key === 'ArrowLeft') {
|
|
1127
1085
|
var previousAssetIndex = assets.findIndex(function (asset) {
|
|
1128
1086
|
return asset.key === softSelectedAssetKey;
|
|
1129
1087
|
}) - 1;
|
|
1130
1088
|
var previousAsset = assets[previousAssetIndex];
|
|
1131
|
-
|
|
1132
1089
|
if (previousAsset) {
|
|
1133
1090
|
if (previousAsset.layout.show) {
|
|
1134
1091
|
onAssetSoftSelectedChanged(previousAsset.key);
|
|
@@ -1136,16 +1093,13 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1136
1093
|
softSelectFirstVisibleAsset();
|
|
1137
1094
|
}
|
|
1138
1095
|
}
|
|
1139
|
-
|
|
1140
1096
|
return;
|
|
1141
1097
|
}
|
|
1142
|
-
|
|
1143
1098
|
if (e.key === 'ArrowRight') {
|
|
1144
1099
|
var nextAssetIndex = assets.findIndex(function (asset) {
|
|
1145
1100
|
return asset.key === softSelectedAssetKey;
|
|
1146
1101
|
}) + 1;
|
|
1147
1102
|
var nextAsset = assets[nextAssetIndex];
|
|
1148
|
-
|
|
1149
1103
|
if (nextAsset) {
|
|
1150
1104
|
if (nextAsset.layout.show) {
|
|
1151
1105
|
onAssetSoftSelectedChanged(nextAsset.key);
|
|
@@ -1153,13 +1107,10 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1153
1107
|
softSelectFirstVisibleAsset();
|
|
1154
1108
|
}
|
|
1155
1109
|
}
|
|
1156
|
-
|
|
1157
1110
|
return;
|
|
1158
1111
|
}
|
|
1159
|
-
|
|
1160
1112
|
if (e.key === 'Enter') {
|
|
1161
1113
|
if (softSelectedAssetKey === null) return;
|
|
1162
|
-
|
|
1163
1114
|
if (selectedAssetKeys.includes(softSelectedAssetKey)) {
|
|
1164
1115
|
onAssetUnselected(softSelectedAssetKey);
|
|
1165
1116
|
} else {
|
|
@@ -1174,7 +1125,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1174
1125
|
if (softSelectable) {
|
|
1175
1126
|
document.addEventListener('keydown', handleKeyPress);
|
|
1176
1127
|
}
|
|
1177
|
-
|
|
1178
1128
|
return function () {
|
|
1179
1129
|
return document.removeEventListener('keydown', handleKeyPress);
|
|
1180
1130
|
};
|
|
@@ -1183,32 +1133,31 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1183
1133
|
if (softSelectable && softSelectedAssetKey !== null) {
|
|
1184
1134
|
document.addEventListener('click', handleClick, true);
|
|
1185
1135
|
}
|
|
1186
|
-
|
|
1187
1136
|
return function () {
|
|
1188
1137
|
return document.removeEventListener('click', handleClick, true);
|
|
1189
1138
|
};
|
|
1190
1139
|
}, [softSelectable, softSelectedAssetKey, handleClick]);
|
|
1191
|
-
return React__default[
|
|
1140
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(AssetGalleryBase$1, defaultTheme._extends({
|
|
1192
1141
|
ref: assetGalleryCompactRef,
|
|
1193
1142
|
style: {
|
|
1194
1143
|
height: "".concat(totalGalleryHeight, "px")
|
|
1195
1144
|
},
|
|
1196
1145
|
className: props.className
|
|
1197
1146
|
}, props), assets.map(function (asset) {
|
|
1198
|
-
return asset.layout.show && React__default[
|
|
1147
|
+
return asset.layout.show && React__default["default"].createElement(React__default["default"].Fragment, {
|
|
1199
1148
|
key: "asset-gallery-".concat(asset.layout.type, "-").concat(asset.key)
|
|
1200
|
-
}, asset.layout.type === 'groupLabel' && React__default[
|
|
1149
|
+
}, asset.layout.type === 'groupLabel' && React__default["default"].createElement(GroupLabel, {
|
|
1201
1150
|
style: {
|
|
1202
1151
|
transform: "translate3d(".concat(asset.layout.translateX, "px,").concat(asset.layout.translateY, "px, 0)"),
|
|
1203
1152
|
height: "".concat(asset.layout.height, "px")
|
|
1204
1153
|
}
|
|
1205
|
-
}, asset.title), asset.layout.type === 'asset' && React__default[
|
|
1154
|
+
}, asset.title), asset.layout.type === 'asset' && React__default["default"].createElement(AssetGalleryCardBase, {
|
|
1206
1155
|
style: {
|
|
1207
1156
|
transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
|
|
1208
1157
|
width: "".concat(asset.layout.width, "px"),
|
|
1209
1158
|
height: "".concat(asset.layout.height, "px")
|
|
1210
1159
|
}
|
|
1211
|
-
}, viewMode === 'grid' ? React__default[
|
|
1160
|
+
}, viewMode === 'grid' ? React__default["default"].createElement(AssetGalleryGridCard$1, {
|
|
1212
1161
|
asset: asset,
|
|
1213
1162
|
selectable: 'selectable' in asset ? asset.selectable : selectable,
|
|
1214
1163
|
selected: selectedAssetKeys.includes(asset.key),
|
|
@@ -1217,7 +1166,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1217
1166
|
onAssetUnselected: onAssetUnselected,
|
|
1218
1167
|
softSelected: softSelectedAssetKey === asset.key,
|
|
1219
1168
|
component: component
|
|
1220
|
-
}) : React__default[
|
|
1169
|
+
}) : React__default["default"].createElement(AssetGalleryCompactCard$1, {
|
|
1221
1170
|
asset: asset,
|
|
1222
1171
|
hasHeightAndWidth: asset.layout.hasHeightAndWidth,
|
|
1223
1172
|
selectable: 'selectable' in asset ? asset.selectable : selectable,
|
|
@@ -1245,34 +1194,31 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1245
1194
|
className: defaultTheme.PropTypes.string
|
|
1246
1195
|
} : {};
|
|
1247
1196
|
|
|
1248
|
-
var
|
|
1197
|
+
var _excluded = ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"];
|
|
1198
|
+
var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
|
|
1249
1199
|
var assets = _ref.assets,
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1200
|
+
viewMode = _ref.viewMode,
|
|
1201
|
+
thumbnailMaxHeight = _ref.thumbnailMaxHeight,
|
|
1202
|
+
selectable = _ref.selectable,
|
|
1203
|
+
selectedAssetKeys = _ref.selectedAssetKeys,
|
|
1204
|
+
onSelectedChanged = _ref.onSelectedChanged,
|
|
1205
|
+
softSelectable = _ref.softSelectable,
|
|
1206
|
+
onSoftSelectedChanged = _ref.onSoftSelectedChanged,
|
|
1207
|
+
component = _ref.component,
|
|
1208
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
1260
1209
|
var _useState = React.useState(selectedAssetKeys || []),
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1210
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
1211
|
+
selectedAssetKeysInternalState = _useState2[0],
|
|
1212
|
+
setSelectedAssetKeysInternalState = _useState2[1];
|
|
1265
1213
|
var _useState3 = React.useState(null),
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1214
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
1215
|
+
softSelectedAssetKeyInternalState = _useState4[0],
|
|
1216
|
+
setSoftSelectedAssetKeyInternalState = _useState4[1];
|
|
1270
1217
|
React.useEffect(function () {
|
|
1271
1218
|
setSelectedAssetKeysInternalState(selectedAssetKeys || []);
|
|
1272
1219
|
}, [selectedAssetKeys]);
|
|
1273
1220
|
React.useEffect(function () {
|
|
1274
1221
|
if (selectedAssetKeys === selectedAssetKeysInternalState) return;
|
|
1275
|
-
|
|
1276
1222
|
if (lodash.isFunction(onSelectedChanged)) {
|
|
1277
1223
|
onSelectedChanged(selectedAssetKeysInternalState);
|
|
1278
1224
|
}
|
|
@@ -1298,7 +1244,7 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
|
|
|
1298
1244
|
var assetKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1299
1245
|
setSoftSelectedAssetKeyInternalState(assetKey);
|
|
1300
1246
|
}, []);
|
|
1301
|
-
return React__default[
|
|
1247
|
+
return React__default["default"].createElement(AssetGalleryBase, defaultTheme._extends({
|
|
1302
1248
|
ref: forwardedRef,
|
|
1303
1249
|
assets: assets,
|
|
1304
1250
|
thumbnailMaxHeight: thumbnailMaxHeight,
|