@ntbjs/react-components 0.0.1-beta.47 → 0.0.1-beta.48
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-d56265bd.js → ActionButton-90485300.js} +9 -9
- package/{AssetGallery-a5a6d3ee.js → AssetGallery-4c4801e3.js} +379 -279
- package/{Button-2ae8c0dc.js → Button-0d728b52.js} +36 -28
- package/{Checkbox-4037e160.js → Checkbox-5a78a73e.js} +33 -28
- package/{Popover-b16a26a5.js → Popover-d3e2f6c0.js} +15 -15
- package/{Radio-96f0bc13.js → Radio-73a1a897.js} +21 -20
- package/{Switch-7b696313.js → Switch-fcbf628c.js} +26 -24
- package/{TextArea-4be7199f.js → TextArea-167d2528.js} +37 -31
- package/TextInput-b61b7333.js +247 -0
- package/{Tooltip-a9271ef2.js → Tooltip-f95a39f4.js} +11 -11
- package/data/Popover/index.js +2 -2
- package/data/index.js +3 -3
- package/{defaultTheme-38b83bb5.js → defaultTheme-870f7df1.js} +105 -94
- 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/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +2 -2
- package/inputs/TextInput/index.js +2 -2
- package/inputs/index.js +8 -8
- package/package.json +1 -1
- package/ssr/index.js +3 -1
- package/widgets/AssetGallery/index.js +12 -12
- package/widgets/index.js +12 -12
- package/TextInput-4deb971c.js +0 -163
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var lodash = require('lodash');
|
|
6
|
+
var TextInput = require('./TextInput-b61b7333.js');
|
|
6
7
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
7
8
|
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('./
|
|
14
|
-
require('./
|
|
15
|
-
require('./
|
|
16
|
-
var Tooltip = require('./Tooltip-a9271ef2.js');
|
|
9
|
+
var ActionButton = require('./ActionButton-90485300.js');
|
|
10
|
+
require('./Button-0d728b52.js');
|
|
11
|
+
require('./Checkbox-5a78a73e.js');
|
|
12
|
+
require('./Radio-73a1a897.js');
|
|
13
|
+
require('./TextArea-167d2528.js');
|
|
14
|
+
require('./Switch-fcbf628c.js');
|
|
15
|
+
require('./Popover-d3e2f6c0.js');
|
|
16
|
+
var Tooltip = require('./Tooltip-f95a39f4.js');
|
|
17
17
|
var styled = require('styled-components');
|
|
18
18
|
var polished = require('polished');
|
|
19
19
|
|
|
@@ -28,12 +28,14 @@ function _interopNamespace(e) {
|
|
|
28
28
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
29
29
|
Object.defineProperty(n, k, d.get ? d : {
|
|
30
30
|
enumerable: true,
|
|
31
|
-
get: function () {
|
|
31
|
+
get: function () {
|
|
32
|
+
return e[k];
|
|
33
|
+
}
|
|
32
34
|
});
|
|
33
35
|
}
|
|
34
36
|
});
|
|
35
37
|
}
|
|
36
|
-
n[
|
|
38
|
+
n['default'] = e;
|
|
37
39
|
return Object.freeze(n);
|
|
38
40
|
}
|
|
39
41
|
|
|
@@ -44,43 +46,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
44
46
|
|
|
45
47
|
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
46
48
|
|
|
47
|
-
var toFnRef = function toFnRef(ref) {
|
|
48
|
-
return !ref || typeof ref === 'function' ? ref : function (value) {
|
|
49
|
-
ref.current = value;
|
|
50
|
-
};
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
function mergeRefs(refA, refB) {
|
|
54
|
-
var a = toFnRef(refA);
|
|
55
|
-
var b = toFnRef(refB);
|
|
56
|
-
return function (value) {
|
|
57
|
-
if (a) a(value);
|
|
58
|
-
if (b) b(value);
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Create and returns a single callback ref composed from two other Refs.
|
|
63
|
-
*
|
|
64
|
-
* ```tsx
|
|
65
|
-
* const Button = React.forwardRef((props, ref) => {
|
|
66
|
-
* const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
|
|
67
|
-
* const mergedRef = useMergedRefs(ref, attachRef);
|
|
68
|
-
*
|
|
69
|
-
* return <button ref={mergedRef} {...props}/>
|
|
70
|
-
* })
|
|
71
|
-
* ```
|
|
72
|
-
*
|
|
73
|
-
* @param refA A Callback or mutable Ref
|
|
74
|
-
* @param refB A Callback or mutable Ref
|
|
75
|
-
* @category refs
|
|
76
|
-
*/
|
|
77
|
-
|
|
78
|
-
function useMergedRefs(refA, refB) {
|
|
79
|
-
return React.useMemo(function () {
|
|
80
|
-
return mergeRefs(refA, refB);
|
|
81
|
-
}, [refA, refB]);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
49
|
var assetShape = {
|
|
85
50
|
key: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]).isRequired,
|
|
86
51
|
previewUrl: defaultTheme.PropTypes.string,
|
|
@@ -124,226 +89,260 @@ var css_248z = ".lazy-load-image-background.opacity {\n opacity: 0;\n}\n\n.lazy
|
|
|
124
89
|
defaultTheme.styleInject(css_248z);
|
|
125
90
|
|
|
126
91
|
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$1, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
|
|
127
|
-
var AssetGalleryCompactCard$2 = styled__default[
|
|
92
|
+
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) {
|
|
128
93
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
129
94
|
}, function (props) {
|
|
130
95
|
return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
|
|
131
96
|
}, function (props) {
|
|
132
97
|
return props.extendedSelectMode && styled.css(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
|
|
133
98
|
});
|
|
134
|
-
var Figure = styled__default[
|
|
99
|
+
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) {
|
|
135
100
|
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 "])));
|
|
136
101
|
});
|
|
137
|
-
var Overlay = styled__default[
|
|
138
|
-
var OverlayBackdrop = styled__default[
|
|
102
|
+
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"])));
|
|
103
|
+
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) {
|
|
139
104
|
return props.softSelected && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
140
105
|
}, Overlay);
|
|
141
|
-
var OverlayInfo = styled__default[
|
|
106
|
+
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) {
|
|
142
107
|
return props.theme.getColor('gray-100');
|
|
143
108
|
});
|
|
144
|
-
var OverlayInfoTopTitleAndFileType = styled__default[
|
|
145
|
-
var OverlayInfoTopTitle = styled__default[
|
|
109
|
+
var OverlayInfoTopTitleAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
110
|
+
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) {
|
|
146
111
|
return props.theme.primaryFontFamily;
|
|
147
112
|
}, function (props) {
|
|
148
113
|
return props.softSelected && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
149
114
|
}, Overlay);
|
|
150
|
-
var OverlayInfoTopFileType = styled__default[
|
|
151
|
-
var OverlayInfoTopNoteAndFileType = styled__default[
|
|
152
|
-
var OverlayInfoTopNote = styled__default[
|
|
115
|
+
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"])));
|
|
116
|
+
var OverlayInfoTopNoteAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
117
|
+
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) {
|
|
153
118
|
var _props$assetTitle;
|
|
119
|
+
|
|
154
120
|
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 "])));
|
|
155
121
|
});
|
|
156
|
-
var OverlayInfoTopFileTypeTopLeft = styled__default[
|
|
122
|
+
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) {
|
|
157
123
|
var _props$assetTitle2;
|
|
124
|
+
|
|
158
125
|
return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
|
|
159
126
|
});
|
|
160
|
-
var OverlayInfoTopNoteTitle = styled__default[
|
|
127
|
+
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) {
|
|
161
128
|
return props.theme.primaryFontFamily;
|
|
162
129
|
}, Overlay);
|
|
163
|
-
var OverlayCompleted$1 = styled__default[
|
|
130
|
+
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) {
|
|
164
131
|
return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
165
132
|
});
|
|
166
|
-
var OverlayHasError$1 = styled__default[
|
|
133
|
+
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) {
|
|
167
134
|
return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
168
135
|
});
|
|
169
|
-
var OverlaySelected$1 = styled__default[
|
|
136
|
+
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) {
|
|
170
137
|
return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
171
138
|
});
|
|
172
|
-
var OverlayInfoBottom = styled__default[
|
|
173
|
-
var OverlayInfoBottomSelectButton = styled__default[
|
|
139
|
+
var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
140
|
+
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) {
|
|
174
141
|
return props.selected ? 1 : 0;
|
|
175
142
|
}, function (props) {
|
|
176
143
|
return props.selected ? props.theme.getColor('orange-500') : 'inherit';
|
|
177
144
|
}, Overlay);
|
|
178
|
-
var OverlayInfoBottomActions = styled__default[
|
|
179
|
-
var ConsumerDefinedOverlay$1 = styled__default[
|
|
180
|
-
var Fragment$1 = styled__default[
|
|
145
|
+
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);
|
|
146
|
+
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"])));
|
|
147
|
+
var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
|
|
148
|
+
|
|
149
|
+
function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
|
|
150
|
+
|
|
151
|
+
var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
152
|
+
fill: "currentColor",
|
|
153
|
+
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",
|
|
154
|
+
fillOpacity: 0.9
|
|
155
|
+
});
|
|
181
156
|
|
|
182
|
-
var _path$6;
|
|
183
|
-
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); }
|
|
184
157
|
function SvgCheckCircleFilled(props) {
|
|
185
158
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
186
159
|
xmlns: "http://www.w3.org/2000/svg",
|
|
187
160
|
viewBox: "0 0 24 24"
|
|
188
|
-
}, props),
|
|
189
|
-
fill: "currentColor",
|
|
190
|
-
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",
|
|
191
|
-
fillOpacity: 0.9
|
|
192
|
-
})));
|
|
161
|
+
}, props), _ref$6);
|
|
193
162
|
}
|
|
194
163
|
|
|
195
|
-
var
|
|
196
|
-
|
|
164
|
+
function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
|
|
165
|
+
|
|
166
|
+
var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
167
|
+
fill: "currentColor",
|
|
168
|
+
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"
|
|
169
|
+
});
|
|
170
|
+
|
|
197
171
|
function SvgWarningCircle(props) {
|
|
198
172
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
199
173
|
xmlns: "http://www.w3.org/2000/svg",
|
|
200
174
|
viewBox: "0 0 24 24"
|
|
201
|
-
}, props),
|
|
202
|
-
fill: "currentColor",
|
|
203
|
-
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"
|
|
204
|
-
})));
|
|
175
|
+
}, props), _ref$5);
|
|
205
176
|
}
|
|
206
177
|
|
|
207
|
-
var
|
|
208
|
-
|
|
178
|
+
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); }
|
|
179
|
+
|
|
180
|
+
var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
181
|
+
fill: "currentColor",
|
|
182
|
+
d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
|
|
183
|
+
});
|
|
184
|
+
|
|
209
185
|
function SvgPlay(props) {
|
|
210
186
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
211
187
|
xmlns: "http://www.w3.org/2000/svg",
|
|
212
188
|
viewBox: "0 0 18.86 24"
|
|
213
|
-
}, props),
|
|
214
|
-
fill: "currentColor",
|
|
215
|
-
d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
|
|
216
|
-
})));
|
|
189
|
+
}, props), _ref$4);
|
|
217
190
|
}
|
|
218
191
|
|
|
219
|
-
var
|
|
220
|
-
|
|
192
|
+
function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
|
|
193
|
+
|
|
194
|
+
var _ref$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
195
|
+
fill: "currentColor",
|
|
196
|
+
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"
|
|
197
|
+
});
|
|
198
|
+
|
|
221
199
|
function SvgPdf(props) {
|
|
222
200
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
223
201
|
xmlns: "http://www.w3.org/2000/svg",
|
|
224
202
|
viewBox: "0 0 24 24"
|
|
225
|
-
}, props),
|
|
226
|
-
fill: "currentColor",
|
|
227
|
-
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"
|
|
228
|
-
})));
|
|
203
|
+
}, props), _ref$3);
|
|
229
204
|
}
|
|
230
205
|
|
|
231
|
-
var
|
|
232
|
-
|
|
206
|
+
function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
|
|
207
|
+
|
|
208
|
+
var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
209
|
+
fill: "currentColor",
|
|
210
|
+
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"
|
|
211
|
+
});
|
|
212
|
+
|
|
233
213
|
function SvgFile(props) {
|
|
234
214
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
235
215
|
xmlns: "http://www.w3.org/2000/svg",
|
|
236
216
|
viewBox: "0 0 19.2 24"
|
|
237
|
-
}, props),
|
|
238
|
-
fill: "currentColor",
|
|
239
|
-
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"
|
|
240
|
-
})));
|
|
217
|
+
}, props), _ref$2);
|
|
241
218
|
}
|
|
242
219
|
|
|
243
|
-
var
|
|
244
|
-
|
|
220
|
+
function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
|
|
221
|
+
|
|
222
|
+
var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
223
|
+
fill: "currentColor",
|
|
224
|
+
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"
|
|
225
|
+
});
|
|
226
|
+
|
|
245
227
|
function SvgAudio(props) {
|
|
246
228
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
247
229
|
xmlns: "http://www.w3.org/2000/svg",
|
|
248
230
|
viewBox: "0 0 18.86 24"
|
|
249
|
-
}, props),
|
|
250
|
-
fill: "currentColor",
|
|
251
|
-
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"
|
|
252
|
-
})));
|
|
231
|
+
}, props), _ref$1);
|
|
253
232
|
}
|
|
254
233
|
|
|
255
|
-
var
|
|
256
|
-
|
|
234
|
+
function _extends() { _extends = 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.apply(this, arguments); }
|
|
235
|
+
|
|
236
|
+
var _ref = /*#__PURE__*/React__namespace.createElement("path", {
|
|
237
|
+
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"
|
|
238
|
+
});
|
|
239
|
+
|
|
257
240
|
function SvgHeadset(props) {
|
|
258
241
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
259
242
|
xmlns: "http://www.w3.org/2000/svg",
|
|
260
243
|
fill: "currentColor",
|
|
261
244
|
viewBox: "0 0 24 24"
|
|
262
|
-
}, props),
|
|
263
|
-
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"
|
|
264
|
-
})));
|
|
245
|
+
}, props), _ref);
|
|
265
246
|
}
|
|
266
247
|
|
|
267
|
-
var _excluded$3 = ["component", "asset"],
|
|
268
|
-
_excluded2$1 = ["component", "className"];
|
|
269
248
|
var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
|
|
270
249
|
var component = _ref.component,
|
|
271
|
-
|
|
272
|
-
|
|
250
|
+
asset = _ref.asset,
|
|
251
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
|
|
252
|
+
|
|
273
253
|
var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
|
|
254
|
+
|
|
274
255
|
if (component) {
|
|
275
256
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
276
|
-
|
|
277
|
-
|
|
257
|
+
|
|
258
|
+
if (React__default['default'].isValidElement(component(asset, newProps.children))) {
|
|
259
|
+
return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
|
|
278
260
|
}
|
|
279
261
|
}
|
|
280
|
-
|
|
262
|
+
|
|
263
|
+
return React__default['default'].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
|
|
281
264
|
ref: newProps.innerRef
|
|
282
265
|
}, newProps));
|
|
283
266
|
};
|
|
284
|
-
|
|
267
|
+
|
|
268
|
+
var ComputedActionButton$1 = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
|
|
285
269
|
var component = _ref2.component,
|
|
286
|
-
|
|
287
|
-
|
|
270
|
+
className = _ref2.className,
|
|
271
|
+
props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className"]);
|
|
272
|
+
|
|
288
273
|
var newProps = props;
|
|
289
|
-
newProps.children = React__default[
|
|
274
|
+
newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
|
|
290
275
|
ref: forwardedRef,
|
|
291
276
|
className: className,
|
|
292
277
|
icon: newProps.icon,
|
|
293
278
|
onClick: newProps.onClick
|
|
294
279
|
});
|
|
280
|
+
|
|
295
281
|
if (component) {
|
|
296
282
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
297
|
-
|
|
298
|
-
|
|
283
|
+
|
|
284
|
+
if (React__default['default'].isValidElement(component())) {
|
|
285
|
+
return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
|
|
299
286
|
}
|
|
300
287
|
}
|
|
301
|
-
|
|
288
|
+
|
|
289
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
|
|
302
290
|
});
|
|
291
|
+
|
|
303
292
|
var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
304
293
|
var _asset$note;
|
|
294
|
+
|
|
305
295
|
var asset = props.asset,
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
296
|
+
selectable = props.selectable,
|
|
297
|
+
hasHeightAndWidth = props.hasHeightAndWidth,
|
|
298
|
+
selected = props.selected,
|
|
299
|
+
extendedSelectMode = props.extendedSelectMode,
|
|
300
|
+
onAssetSelected = props.onAssetSelected,
|
|
301
|
+
onAssetUnselected = props.onAssetUnselected,
|
|
302
|
+
softSelected = props.softSelected,
|
|
303
|
+
component = props.component,
|
|
304
|
+
scrollPosition = props.scrollPosition;
|
|
305
|
+
|
|
315
306
|
function onClick(event) {
|
|
316
307
|
if (extendedSelectMode) {
|
|
317
308
|
return onSelectClick(event);
|
|
318
309
|
}
|
|
310
|
+
|
|
319
311
|
if (lodash.isFunction(asset.onClick)) {
|
|
320
312
|
asset.onClick(event, asset);
|
|
321
313
|
}
|
|
322
314
|
}
|
|
315
|
+
|
|
323
316
|
function onSelectClick(event) {
|
|
324
317
|
event.preventDefault();
|
|
325
318
|
event.stopPropagation();
|
|
319
|
+
|
|
326
320
|
if (selected) {
|
|
327
321
|
return onAssetUnselected(asset.key);
|
|
328
322
|
}
|
|
323
|
+
|
|
329
324
|
if (selectable) {
|
|
330
325
|
return onAssetSelected(asset.key);
|
|
331
326
|
}
|
|
332
327
|
}
|
|
328
|
+
|
|
333
329
|
function onActionClick(event, action) {
|
|
334
330
|
event.preventDefault();
|
|
335
331
|
event.stopPropagation();
|
|
336
332
|
action.onClick(asset);
|
|
337
333
|
}
|
|
334
|
+
|
|
338
335
|
function onContextMenu(event) {
|
|
339
336
|
event.preventDefault();
|
|
340
337
|
asset.onContextMenu(event);
|
|
341
338
|
}
|
|
339
|
+
|
|
342
340
|
React.useEffect(function () {
|
|
343
341
|
if (lodash.isFunction(asset.onContextMenu)) {
|
|
344
342
|
if (cardRef.current) {
|
|
345
343
|
cardRef.current.addEventListener('contextmenu', onContextMenu);
|
|
346
344
|
}
|
|
345
|
+
|
|
347
346
|
return function () {
|
|
348
347
|
if (cardRef.current) {
|
|
349
348
|
cardRef.current.removeEventListener('contextmenu', onContextMenu);
|
|
@@ -351,14 +350,17 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
351
350
|
};
|
|
352
351
|
}
|
|
353
352
|
}, []);
|
|
353
|
+
|
|
354
354
|
function onDragstart(event) {
|
|
355
355
|
asset.onDragstart(event);
|
|
356
356
|
}
|
|
357
|
+
|
|
357
358
|
React.useEffect(function () {
|
|
358
359
|
if (lodash.isFunction(asset.onDragstart)) {
|
|
359
360
|
if (dragRef.current) {
|
|
360
361
|
dragRef.current.addEventListener('dragstart', onDragstart);
|
|
361
362
|
}
|
|
363
|
+
|
|
362
364
|
return function () {
|
|
363
365
|
if (dragRef.current) {
|
|
364
366
|
dragRef.current.removeEventListener('dragstart', onDragstart);
|
|
@@ -369,79 +371,93 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
369
371
|
var videoPlayerRef = React.useRef();
|
|
370
372
|
var cardRef = React.useRef();
|
|
371
373
|
var dragRef = React.useRef(null);
|
|
374
|
+
|
|
372
375
|
function onMouseEnter(event) {
|
|
373
376
|
event.stopPropagation();
|
|
377
|
+
|
|
374
378
|
if (videoPlayerRef.current) {
|
|
375
379
|
var playPromise = videoPlayerRef.current.play();
|
|
380
|
+
|
|
376
381
|
if (playPromise !== undefined) {
|
|
377
382
|
playPromise.then(function () {})["catch"](function () {});
|
|
378
383
|
}
|
|
379
384
|
}
|
|
385
|
+
|
|
380
386
|
if (lodash.isFunction(asset.onMouseEnter)) {
|
|
381
387
|
asset.onMouseEnter(event, asset);
|
|
382
388
|
}
|
|
383
389
|
}
|
|
390
|
+
|
|
384
391
|
function onMouseLeave(event) {
|
|
385
392
|
event.stopPropagation();
|
|
393
|
+
|
|
386
394
|
if (videoPlayerRef.current) {
|
|
387
395
|
videoPlayerRef.current.pause();
|
|
388
396
|
}
|
|
389
397
|
}
|
|
398
|
+
|
|
390
399
|
var typeIcon = React.useMemo(function () {
|
|
391
400
|
switch (asset.fileType) {
|
|
392
401
|
case 'video':
|
|
393
402
|
{
|
|
394
|
-
return React__default[
|
|
403
|
+
return React__default['default'].createElement(OverlayInfoTopFileType, {
|
|
395
404
|
as: SvgPlay
|
|
396
405
|
});
|
|
397
406
|
}
|
|
407
|
+
|
|
398
408
|
case 'pdf':
|
|
399
409
|
{
|
|
400
|
-
return React__default[
|
|
410
|
+
return React__default['default'].createElement(OverlayInfoTopFileType, {
|
|
401
411
|
as: SvgPdf
|
|
402
412
|
});
|
|
403
413
|
}
|
|
414
|
+
|
|
404
415
|
case 'audio':
|
|
405
416
|
{
|
|
406
|
-
return React__default[
|
|
417
|
+
return React__default['default'].createElement(OverlayInfoTopFileType, {
|
|
407
418
|
as: SvgAudio
|
|
408
419
|
});
|
|
409
420
|
}
|
|
421
|
+
|
|
410
422
|
case 'file':
|
|
411
423
|
{
|
|
412
|
-
return React__default[
|
|
424
|
+
return React__default['default'].createElement(OverlayInfoTopFileType, {
|
|
413
425
|
as: SvgFile
|
|
414
426
|
});
|
|
415
427
|
}
|
|
428
|
+
|
|
416
429
|
default:
|
|
417
430
|
{
|
|
418
431
|
return null;
|
|
419
432
|
}
|
|
420
433
|
}
|
|
421
434
|
}, [asset.fileType]);
|
|
435
|
+
|
|
422
436
|
var renderPreview = function renderPreview(asset) {
|
|
423
437
|
if (['video'].includes(asset.fileType)) {
|
|
424
|
-
return React__default[
|
|
438
|
+
return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
425
439
|
scrollPosition: scrollPosition
|
|
426
|
-
}, React__default[
|
|
440
|
+
}, React__default['default'].createElement("video", {
|
|
427
441
|
ref: videoPlayerRef,
|
|
428
442
|
loop: true,
|
|
429
443
|
muted: true
|
|
430
|
-
}, React__default[
|
|
444
|
+
}, React__default['default'].createElement("source", {
|
|
431
445
|
src: asset.previewUrl,
|
|
432
446
|
type: "video/mp4"
|
|
433
447
|
})));
|
|
434
448
|
}
|
|
449
|
+
|
|
435
450
|
if (['audio'].includes(asset.fileType)) {
|
|
436
|
-
return React__default[
|
|
451
|
+
return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
437
452
|
scrollPosition: scrollPosition
|
|
438
|
-
}, React__default[
|
|
453
|
+
}, React__default['default'].createElement("div", {
|
|
439
454
|
className: "audio"
|
|
440
|
-
}, React__default[
|
|
455
|
+
}, React__default['default'].createElement(SvgHeadset, null)));
|
|
441
456
|
}
|
|
442
|
-
|
|
457
|
+
|
|
458
|
+
return React__default['default'].createElement(Figure, {
|
|
443
459
|
hasHeightAndWidth: hasHeightAndWidth
|
|
444
|
-
}, React__default[
|
|
460
|
+
}, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
|
|
445
461
|
alt: asset.title,
|
|
446
462
|
src: asset.previewUrl,
|
|
447
463
|
height: "100%",
|
|
@@ -452,6 +468,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
452
468
|
scrollPosition: scrollPosition
|
|
453
469
|
}));
|
|
454
470
|
};
|
|
471
|
+
|
|
455
472
|
React.useEffect(function () {
|
|
456
473
|
if (softSelected) {
|
|
457
474
|
cardRef.current.scrollIntoView({
|
|
@@ -460,7 +477,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
460
477
|
});
|
|
461
478
|
}
|
|
462
479
|
}, [softSelected]);
|
|
463
|
-
return React__default[
|
|
480
|
+
return React__default['default'].createElement(AssetGalleryCompactCard$2, {
|
|
464
481
|
as: ComputedRootComponent$1,
|
|
465
482
|
component: component,
|
|
466
483
|
disabled: asset.disabled,
|
|
@@ -471,27 +488,27 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
471
488
|
onMouseLeave: onMouseLeave,
|
|
472
489
|
draggable: asset.draggable,
|
|
473
490
|
innerRef: dragRef
|
|
474
|
-
}, asset.previewUrl && renderPreview(asset), React__default[
|
|
491
|
+
}, asset.previewUrl && renderPreview(asset), React__default['default'].createElement(Overlay, {
|
|
475
492
|
ref: cardRef
|
|
476
|
-
}, React__default[
|
|
493
|
+
}, React__default['default'].createElement(OverlayBackdrop, {
|
|
477
494
|
softSelected: softSelected
|
|
478
|
-
}), React__default[
|
|
495
|
+
}), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
|
|
479
496
|
title: asset.title,
|
|
480
497
|
softSelected: softSelected
|
|
481
|
-
}, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default[
|
|
498
|
+
}, 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, {
|
|
482
499
|
assetTitle: asset.title
|
|
483
|
-
}, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default[
|
|
500
|
+
}, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
|
|
484
501
|
title: asset.note.title,
|
|
485
502
|
assetTitle: asset.title
|
|
486
|
-
}, asset.note.icon ? asset.note.icon : React__default[
|
|
503
|
+
}, 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, {
|
|
487
504
|
selected: selected
|
|
488
|
-
}, React__default[
|
|
505
|
+
}, React__default['default'].createElement(SvgCheckCircleFilled, {
|
|
489
506
|
onClick: onSelectClick
|
|
490
|
-
})), React__default[
|
|
491
|
-
return React__default[
|
|
507
|
+
})), React__default['default'].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
508
|
+
return React__default['default'].createElement(Tooltip.Tooltip, {
|
|
492
509
|
key: "".concat(asset.key, "-").concat(action.title),
|
|
493
510
|
content: action.title
|
|
494
|
-
}, React__default[
|
|
511
|
+
}, React__default['default'].createElement(Fragment$1, {
|
|
495
512
|
as: ComputedActionButton$1,
|
|
496
513
|
component: action.component,
|
|
497
514
|
className: action.className,
|
|
@@ -500,15 +517,16 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
500
517
|
return onActionClick(event, action);
|
|
501
518
|
}
|
|
502
519
|
}));
|
|
503
|
-
})))), asset.completed && React__default[
|
|
520
|
+
})))), asset.completed && React__default['default'].createElement(OverlayCompleted$1, {
|
|
504
521
|
softSelected: softSelected
|
|
505
|
-
}), asset.hasError && React__default[
|
|
522
|
+
}), asset.hasError && React__default['default'].createElement(OverlayHasError$1, {
|
|
506
523
|
softSelected: softSelected
|
|
507
|
-
}), selectable && React__default[
|
|
524
|
+
}), selectable && React__default['default'].createElement(OverlaySelected$1, {
|
|
508
525
|
selected: selected,
|
|
509
526
|
softSelected: softSelected
|
|
510
|
-
})), asset.overlay && React__default[
|
|
527
|
+
})), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
|
|
511
528
|
};
|
|
529
|
+
|
|
512
530
|
AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
513
531
|
asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
|
|
514
532
|
hasHeightAndWidth: defaultTheme.PropTypes.bool.isRequired,
|
|
@@ -522,7 +540,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
522
540
|
scrollPosition: defaultTheme.PropTypes.number
|
|
523
541
|
} : {};
|
|
524
542
|
AssetGalleryCompactCard.defaultProps = {};
|
|
525
|
-
var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default[
|
|
543
|
+
var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
|
|
526
544
|
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
|
|
527
545
|
return reactiveProps.every(function (propKey) {
|
|
528
546
|
return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
|
|
@@ -530,7 +548,7 @@ var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(Re
|
|
|
530
548
|
}));
|
|
531
549
|
|
|
532
550
|
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
533
|
-
var AssetGalleryGridCard$2 = styled__default[
|
|
551
|
+
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 ", "\n box-sizing: border-box;\n text-decoration: none;\n"])), function (props) {
|
|
534
552
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
|
|
535
553
|
}, function (props) {
|
|
536
554
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
@@ -539,155 +557,180 @@ var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.a
|
|
|
539
557
|
}, function (props) {
|
|
540
558
|
return props.extendedSelectMode && styled.css(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
|
|
541
559
|
});
|
|
542
|
-
var ContentWrapper = styled__default[
|
|
560
|
+
var ContentWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: ", "px;\n"])), function (props) {
|
|
543
561
|
return props.layout.height;
|
|
544
562
|
});
|
|
545
|
-
var Note = styled__default[
|
|
546
|
-
var NoteTitle = styled__default[
|
|
563
|
+
var Note = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = 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"])));
|
|
564
|
+
var NoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = 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
565
|
return props.theme.secondaryFontFamily;
|
|
548
566
|
});
|
|
549
|
-
var Asset = styled__default[
|
|
550
|
-
var AssetFigure = styled__default[
|
|
551
|
-
var Info = styled__default[
|
|
567
|
+
var Asset = styled__default['default'].div(_templateObject7 || (_templateObject7 = 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"])));
|
|
568
|
+
var AssetFigure = styled__default['default'].figure(_templateObject8 || (_templateObject8 = 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"])));
|
|
569
|
+
var Info = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = 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
570
|
return props.theme.primaryFontFamily;
|
|
553
571
|
});
|
|
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[
|
|
572
|
+
var InfoTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = 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"])));
|
|
573
|
+
var InfoFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 18px;\n max-height: 18px;\n"])));
|
|
574
|
+
var InfoDescription = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n"])));
|
|
575
|
+
var Bottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-top: auto;\n padding: 0 10px 10px;\n"])));
|
|
576
|
+
var BottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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
577
|
return props.selected ? 1 : 0;
|
|
560
578
|
}, function (props) {
|
|
561
579
|
return props.selected ? props.theme.getColor('orange-500') : 'inherit';
|
|
562
580
|
}, AssetGalleryGridCard$2);
|
|
563
|
-
var BottomActions = styled__default[
|
|
564
|
-
var OverlayCompleted = styled__default[
|
|
581
|
+
var BottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = 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);
|
|
582
|
+
var OverlayCompleted = 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 ", ";\n"])), function (props) {
|
|
565
583
|
return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
566
584
|
});
|
|
567
|
-
var OverlayHasError = styled__default[
|
|
585
|
+
var OverlayHasError = 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"])), function (props) {
|
|
568
586
|
return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
569
587
|
});
|
|
570
|
-
var OverlaySelected = styled__default[
|
|
588
|
+
var OverlaySelected = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = 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
589
|
return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
572
590
|
});
|
|
573
|
-
var ConsumerDefinedOverlay = styled__default[
|
|
574
|
-
var Fragment = styled__default[
|
|
591
|
+
var ConsumerDefinedOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
592
|
+
var Fragment = styled__default['default'].div(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral([""])));
|
|
575
593
|
|
|
576
|
-
var _excluded$2 = ["component", "asset"],
|
|
577
|
-
_excluded2 = ["component", "className"];
|
|
578
594
|
var ComputedRootComponent = function ComputedRootComponent(_ref) {
|
|
579
595
|
var component = _ref.component,
|
|
580
|
-
|
|
581
|
-
|
|
596
|
+
asset = _ref.asset,
|
|
597
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
|
|
598
|
+
|
|
582
599
|
var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
|
|
600
|
+
|
|
583
601
|
if (component) {
|
|
584
602
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
585
|
-
|
|
586
|
-
|
|
603
|
+
|
|
604
|
+
if (React__default['default'].isValidElement(component(asset, newProps.children))) {
|
|
605
|
+
return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
|
|
587
606
|
}
|
|
588
607
|
}
|
|
589
|
-
|
|
608
|
+
|
|
609
|
+
return React__default['default'].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
|
|
590
610
|
ref: newProps.innerRef
|
|
591
611
|
}, newProps));
|
|
592
612
|
};
|
|
613
|
+
|
|
593
614
|
ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
|
|
594
|
-
var ComputedActionButton = React__default[
|
|
615
|
+
var ComputedActionButton = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
|
|
595
616
|
var component = _ref2.component,
|
|
596
|
-
|
|
597
|
-
|
|
617
|
+
className = _ref2.className,
|
|
618
|
+
props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className"]);
|
|
619
|
+
|
|
598
620
|
var newProps = props;
|
|
599
|
-
newProps.children = React__default[
|
|
621
|
+
newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
|
|
600
622
|
ref: forwardedRef,
|
|
601
623
|
className: className,
|
|
602
624
|
icon: newProps.icon,
|
|
603
625
|
onClick: newProps.onClick
|
|
604
626
|
});
|
|
627
|
+
|
|
605
628
|
if (component) {
|
|
606
629
|
if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
|
|
607
|
-
|
|
608
|
-
|
|
630
|
+
|
|
631
|
+
if (React__default['default'].isValidElement(component())) {
|
|
632
|
+
return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
|
|
609
633
|
}
|
|
610
634
|
}
|
|
611
|
-
|
|
635
|
+
|
|
636
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
|
|
612
637
|
});
|
|
638
|
+
|
|
613
639
|
var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
614
640
|
var _asset$note;
|
|
641
|
+
|
|
615
642
|
var asset = props.asset,
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
643
|
+
selectable = props.selectable,
|
|
644
|
+
selected = props.selected,
|
|
645
|
+
extendedSelectMode = props.extendedSelectMode,
|
|
646
|
+
onAssetSelected = props.onAssetSelected,
|
|
647
|
+
onAssetUnselected = props.onAssetUnselected,
|
|
648
|
+
softSelected = props.softSelected,
|
|
649
|
+
component = props.component,
|
|
650
|
+
scrollPosition = props.scrollPosition;
|
|
624
651
|
var videoPlayerRef = React.useRef();
|
|
625
652
|
var cardRef = React.useRef();
|
|
626
653
|
var dragRef = React.useRef(null);
|
|
654
|
+
|
|
627
655
|
function onMouseEnter(event) {
|
|
628
656
|
event.stopPropagation();
|
|
657
|
+
|
|
629
658
|
if (videoPlayerRef.current) {
|
|
630
659
|
var playPromise = videoPlayerRef.current.play();
|
|
660
|
+
|
|
631
661
|
if (playPromise !== undefined) {
|
|
632
662
|
playPromise.then(function () {})["catch"](function () {});
|
|
633
663
|
}
|
|
634
664
|
}
|
|
665
|
+
|
|
635
666
|
if (lodash.isFunction(asset.onMouseEnter)) {
|
|
636
667
|
asset.onMouseEnter(event, asset);
|
|
637
668
|
}
|
|
638
669
|
}
|
|
670
|
+
|
|
639
671
|
function onMouseLeave(event) {
|
|
640
672
|
event.stopPropagation();
|
|
673
|
+
|
|
641
674
|
if (videoPlayerRef.current) {
|
|
642
675
|
videoPlayerRef.current.pause();
|
|
643
676
|
}
|
|
644
677
|
}
|
|
678
|
+
|
|
645
679
|
function onClick(event) {
|
|
646
680
|
if (extendedSelectMode) {
|
|
647
681
|
return onSelectClick(event);
|
|
648
682
|
}
|
|
683
|
+
|
|
649
684
|
if (lodash.isFunction(asset.onClick)) {
|
|
650
685
|
asset.onClick(event, asset);
|
|
651
686
|
}
|
|
652
687
|
}
|
|
688
|
+
|
|
653
689
|
function onSelectClick(event) {
|
|
654
690
|
event.preventDefault();
|
|
655
691
|
event.stopPropagation();
|
|
692
|
+
|
|
656
693
|
if (selected) {
|
|
657
694
|
return onAssetUnselected(asset.key);
|
|
658
695
|
}
|
|
696
|
+
|
|
659
697
|
return onAssetSelected(asset.key);
|
|
660
698
|
}
|
|
699
|
+
|
|
661
700
|
function onActionClick(event, action) {
|
|
662
701
|
event.preventDefault();
|
|
663
702
|
event.stopPropagation();
|
|
664
703
|
action.onClick(asset);
|
|
665
704
|
}
|
|
705
|
+
|
|
666
706
|
function onContextMenu(event) {
|
|
667
707
|
event.preventDefault();
|
|
668
708
|
asset.onContextMenu(event);
|
|
669
709
|
}
|
|
710
|
+
|
|
670
711
|
function renderPreview(asset) {
|
|
671
712
|
if (['video'].includes(asset.fileType)) {
|
|
672
|
-
return React__default[
|
|
713
|
+
return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
673
714
|
scrollPosition: scrollPosition
|
|
674
|
-
}, React__default[
|
|
715
|
+
}, React__default['default'].createElement("video", {
|
|
675
716
|
ref: videoPlayerRef,
|
|
676
717
|
loop: true,
|
|
677
718
|
muted: true
|
|
678
|
-
}, React__default[
|
|
719
|
+
}, React__default['default'].createElement("source", {
|
|
679
720
|
src: asset.previewUrl,
|
|
680
721
|
type: "video/mp4"
|
|
681
722
|
})));
|
|
682
723
|
}
|
|
724
|
+
|
|
683
725
|
if (['audio'].includes(asset.fileType)) {
|
|
684
|
-
return React__default[
|
|
726
|
+
return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
685
727
|
scrollPosition: scrollPosition
|
|
686
|
-
}, React__default[
|
|
728
|
+
}, React__default['default'].createElement("div", {
|
|
687
729
|
className: "audio"
|
|
688
|
-
}, React__default[
|
|
730
|
+
}, React__default['default'].createElement(SvgHeadset, null)));
|
|
689
731
|
}
|
|
690
|
-
|
|
732
|
+
|
|
733
|
+
return React__default['default'].createElement(AssetFigure, null, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
|
|
691
734
|
alt: asset.title,
|
|
692
735
|
src: asset.previewUrl,
|
|
693
736
|
height: "100%",
|
|
@@ -698,11 +741,13 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
698
741
|
scrollPosition: scrollPosition
|
|
699
742
|
}));
|
|
700
743
|
}
|
|
744
|
+
|
|
701
745
|
React.useEffect(function () {
|
|
702
746
|
if (lodash.isFunction(asset.onContextMenu)) {
|
|
703
747
|
if (cardRef.current) {
|
|
704
748
|
cardRef.current.addEventListener('contextmenu', onContextMenu);
|
|
705
749
|
}
|
|
750
|
+
|
|
706
751
|
return function () {
|
|
707
752
|
if (cardRef.current) {
|
|
708
753
|
cardRef.current.removeEventListener('contextmenu', onContextMenu);
|
|
@@ -710,14 +755,17 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
710
755
|
};
|
|
711
756
|
}
|
|
712
757
|
}, []);
|
|
758
|
+
|
|
713
759
|
function onDragstart(event) {
|
|
714
760
|
asset.onDragstart(event);
|
|
715
761
|
}
|
|
762
|
+
|
|
716
763
|
React.useEffect(function () {
|
|
717
764
|
if (lodash.isFunction(asset.onDragstart)) {
|
|
718
765
|
if (dragRef.current) {
|
|
719
766
|
dragRef.current.addEventListener('dragstart', onDragstart);
|
|
720
767
|
}
|
|
768
|
+
|
|
721
769
|
return function () {
|
|
722
770
|
if (dragRef.current) {
|
|
723
771
|
dragRef.current.removeEventListener('dragstart', onDragstart);
|
|
@@ -733,7 +781,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
733
781
|
});
|
|
734
782
|
}
|
|
735
783
|
}, [softSelected]);
|
|
736
|
-
return React__default[
|
|
784
|
+
return React__default['default'].createElement(AssetGalleryGridCard$2, {
|
|
737
785
|
as: ComputedRootComponent,
|
|
738
786
|
component: component,
|
|
739
787
|
asset: asset,
|
|
@@ -745,36 +793,36 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
745
793
|
onMouseLeave: onMouseLeave,
|
|
746
794
|
draggable: asset.draggable,
|
|
747
795
|
innerRef: dragRef
|
|
748
|
-
}, React__default[
|
|
796
|
+
}, React__default['default'].createElement(ContentWrapper, {
|
|
749
797
|
layout: asset.layout,
|
|
750
798
|
ref: cardRef
|
|
751
|
-
}, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default[
|
|
799
|
+
}, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
|
|
752
800
|
title: asset.note.title
|
|
753
|
-
}, asset.note.icon ? asset.note.icon : React__default[
|
|
801
|
+
}, 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, {
|
|
754
802
|
"data-id": "ss"
|
|
755
|
-
}, asset.previewUrl && renderPreview(asset)), React__default[
|
|
803
|
+
}, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
|
|
756
804
|
style: {
|
|
757
805
|
display: 'flex'
|
|
758
806
|
}
|
|
759
|
-
}, React__default[
|
|
807
|
+
}, React__default['default'].createElement(InfoTitle, {
|
|
760
808
|
title: asset.title
|
|
761
|
-
}, asset.title || '—'), asset.fileType === 'video' && React__default[
|
|
809
|
+
}, asset.title || '—'), asset.fileType === 'video' && React__default['default'].createElement(InfoFileType, {
|
|
762
810
|
as: SvgPlay
|
|
763
|
-
}), asset.fileType === 'audio' && React__default[
|
|
811
|
+
}), asset.fileType === 'audio' && React__default['default'].createElement(InfoFileType, {
|
|
764
812
|
as: SvgAudio
|
|
765
|
-
}), asset.fileType === 'pdf' && React__default[
|
|
813
|
+
}), asset.fileType === 'pdf' && React__default['default'].createElement(InfoFileType, {
|
|
766
814
|
as: SvgPdf
|
|
767
|
-
}), asset.fileType === 'file' && React__default[
|
|
815
|
+
}), asset.fileType === 'file' && React__default['default'].createElement(InfoFileType, {
|
|
768
816
|
as: SvgFile
|
|
769
|
-
})), React__default[
|
|
817
|
+
})), React__default['default'].createElement(InfoDescription, null, asset.description)), React__default['default'].createElement(Bottom, null, selectable && React__default['default'].createElement(BottomSelectButton, {
|
|
770
818
|
selected: selected
|
|
771
|
-
}, React__default[
|
|
819
|
+
}, React__default['default'].createElement(SvgCheckCircleFilled, {
|
|
772
820
|
onClick: onSelectClick
|
|
773
|
-
})), React__default[
|
|
774
|
-
return React__default[
|
|
821
|
+
})), React__default['default'].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
|
|
822
|
+
return React__default['default'].createElement(Tooltip.Tooltip, {
|
|
775
823
|
key: "".concat(asset.key, "-").concat(action.title),
|
|
776
824
|
content: action.title
|
|
777
|
-
}, React__default[
|
|
825
|
+
}, React__default['default'].createElement(Fragment, {
|
|
778
826
|
as: ComputedActionButton,
|
|
779
827
|
component: action.component,
|
|
780
828
|
className: action.className,
|
|
@@ -783,15 +831,16 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
783
831
|
return onActionClick(event, action);
|
|
784
832
|
}
|
|
785
833
|
}));
|
|
786
|
-
})))), asset.completed && React__default[
|
|
834
|
+
})))), asset.completed && React__default['default'].createElement(OverlayCompleted, {
|
|
787
835
|
softSelected: softSelected
|
|
788
|
-
}), asset.hasError && React__default[
|
|
836
|
+
}), asset.hasError && React__default['default'].createElement(OverlayHasError, {
|
|
789
837
|
softSelected: softSelected
|
|
790
|
-
}), selectable && React__default[
|
|
838
|
+
}), selectable && React__default['default'].createElement(OverlaySelected, {
|
|
791
839
|
selected: selected,
|
|
792
840
|
softSelected: softSelected
|
|
793
|
-
}), asset.overlay && React__default[
|
|
841
|
+
}), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay, null, asset.overlay));
|
|
794
842
|
};
|
|
843
|
+
|
|
795
844
|
AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
796
845
|
asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
|
|
797
846
|
selectable: defaultTheme.PropTypes.bool,
|
|
@@ -804,7 +853,7 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
804
853
|
scrollPosition: defaultTheme.PropTypes.number
|
|
805
854
|
} : {};
|
|
806
855
|
AssetGalleryGridCard.defaultProps = {};
|
|
807
|
-
var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default[
|
|
856
|
+
var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
|
|
808
857
|
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
|
|
809
858
|
return reactiveProps.every(function (propKey) {
|
|
810
859
|
return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
|
|
@@ -812,37 +861,39 @@ var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React
|
|
|
812
861
|
}));
|
|
813
862
|
|
|
814
863
|
var _templateObject, _templateObject2, _templateObject3;
|
|
815
|
-
var AssetGalleryBase$1 = styled__default[
|
|
816
|
-
var GroupLabel = styled__default[
|
|
864
|
+
var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
865
|
+
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) {
|
|
817
866
|
return props.theme.primaryFontFamily;
|
|
818
867
|
}, function (props) {
|
|
819
868
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
820
869
|
});
|
|
821
|
-
var AssetGalleryCardBase = styled__default[
|
|
870
|
+
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"])));
|
|
822
871
|
|
|
823
|
-
var
|
|
824
|
-
var AssetGalleryBase = React__default["default"].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
|
|
872
|
+
var AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
|
|
825
873
|
var assetsProp = _ref.assets,
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
874
|
+
viewMode = _ref.viewMode,
|
|
875
|
+
thumbnailMaxHeight = _ref.thumbnailMaxHeight,
|
|
876
|
+
selectable = _ref.selectable,
|
|
877
|
+
selectedAssetKeys = _ref.selectedAssetKeys,
|
|
878
|
+
onAssetSelected = _ref.onAssetSelected,
|
|
879
|
+
onAssetUnselected = _ref.onAssetUnselected,
|
|
880
|
+
softSelectable = _ref.softSelectable,
|
|
881
|
+
softSelectedAssetKey = _ref.softSelectedAssetKey,
|
|
882
|
+
onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
|
|
883
|
+
component = _ref.component,
|
|
884
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"]);
|
|
885
|
+
|
|
837
886
|
var assetGalleryDOMNode = React.useRef();
|
|
838
|
-
var assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
|
|
887
|
+
var assetGalleryCompactRef = TextInput.useMergedRefs(forwardedRef, assetGalleryDOMNode);
|
|
839
888
|
var assetGalleryWidth = React.useRef(0);
|
|
840
889
|
var minimumRowAspectRatio = React.useRef(0);
|
|
841
890
|
var calculatedAssets = React.useRef([]);
|
|
891
|
+
|
|
842
892
|
var _useState = React.useState([]),
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
893
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
894
|
+
assets = _useState2[0],
|
|
895
|
+
setAssets = _useState2[1];
|
|
896
|
+
|
|
846
897
|
var MAXIMUM_ROW_HEIGHT = React.useMemo(function () {
|
|
847
898
|
return viewMode === 'grid' ? 450 : thumbnailMaxHeight;
|
|
848
899
|
}, [viewMode, thumbnailMaxHeight]);
|
|
@@ -861,8 +912,9 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
861
912
|
useIsomorphicLayoutEffect(function () {
|
|
862
913
|
if (!assetGalleryDOMNode.current) return;
|
|
863
914
|
var throttledOnResize = lodash.throttle(onResize, 1);
|
|
864
|
-
var resizeObserver = new ResizeObserver__default[
|
|
915
|
+
var resizeObserver = new ResizeObserver__default['default'](throttledOnResize);
|
|
865
916
|
resizeObserver.observe(assetGalleryDOMNode.current);
|
|
917
|
+
|
|
866
918
|
function onResize(entries) {
|
|
867
919
|
entries.forEach(function (entry) {
|
|
868
920
|
if (assetGalleryWidth.current === entry.contentRect.width) return;
|
|
@@ -872,6 +924,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
872
924
|
});
|
|
873
925
|
});
|
|
874
926
|
}
|
|
927
|
+
|
|
875
928
|
return function () {
|
|
876
929
|
resizeObserver.unobserve(assetGalleryDOMNode.current);
|
|
877
930
|
};
|
|
@@ -879,20 +932,24 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
879
932
|
React.useEffect(function () {
|
|
880
933
|
main();
|
|
881
934
|
}, [MAXIMUM_ROW_HEIGHT, assetsProp]);
|
|
935
|
+
|
|
882
936
|
var main = function main() {
|
|
883
937
|
calculateAssetGalleryAspectRatio();
|
|
884
938
|
calculateLayout();
|
|
885
939
|
calculateVisibility();
|
|
886
940
|
};
|
|
941
|
+
|
|
887
942
|
var calculateAssetGalleryAspectRatio = function calculateAssetGalleryAspectRatio() {
|
|
888
943
|
if (assetGalleryWidth.current > 0) {
|
|
889
944
|
minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
|
|
890
945
|
}
|
|
891
946
|
};
|
|
947
|
+
|
|
892
948
|
var calculateLayout = function calculateLayout() {
|
|
893
949
|
var assetsWithoutAKey = assetsProp.filter(function (a) {
|
|
894
950
|
return !a.key;
|
|
895
951
|
});
|
|
952
|
+
|
|
896
953
|
if (assetsWithoutAKey.length > 0) {
|
|
897
954
|
assetsProp = assetsProp.filter(function (a) {
|
|
898
955
|
return a.key;
|
|
@@ -901,6 +958,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
901
958
|
return console.warn("Omitted asset from the gallery because it was missing the unique `key` property.", a);
|
|
902
959
|
});
|
|
903
960
|
}
|
|
961
|
+
|
|
904
962
|
if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
|
|
905
963
|
var row = [];
|
|
906
964
|
var translateX = 0;
|
|
@@ -911,6 +969,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
911
969
|
var desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
|
|
912
970
|
assetsProp.forEach(function (asset, index) {
|
|
913
971
|
var _assetsProp;
|
|
972
|
+
|
|
914
973
|
if (asset.group && asset.group !== lastGroup) {
|
|
915
974
|
computedAssets.push({
|
|
916
975
|
title: asset.group,
|
|
@@ -925,7 +984,9 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
925
984
|
lastGroup = asset.group;
|
|
926
985
|
translateY += 50 + SPACE_UNDER_ASSETS;
|
|
927
986
|
}
|
|
987
|
+
|
|
928
988
|
row.push(asset);
|
|
989
|
+
|
|
929
990
|
if (row.length === desiredAssetCountInRow || index + 1 === assetsProp.length || (_assetsProp = assetsProp[index + 1]) !== null && _assetsProp !== void 0 && _assetsProp.group && assetsProp[index + 1].group !== asset.group) {
|
|
930
991
|
row.forEach(function (rowAsset) {
|
|
931
992
|
computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
|
|
@@ -955,6 +1016,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
955
1016
|
var _computedAssets = [];
|
|
956
1017
|
assetsProp.forEach(function (asset, index) {
|
|
957
1018
|
var _assetsProp2;
|
|
1019
|
+
|
|
958
1020
|
if (asset.group && asset.group !== _lastGroup) {
|
|
959
1021
|
_computedAssets.push({
|
|
960
1022
|
title: asset.group,
|
|
@@ -966,17 +1028,23 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
966
1028
|
translateY: Math.round(_translateY)
|
|
967
1029
|
}
|
|
968
1030
|
});
|
|
1031
|
+
|
|
969
1032
|
_lastGroup = asset.group;
|
|
970
1033
|
_translateY += 50 + SPACE_UNDER_ASSETS;
|
|
971
1034
|
}
|
|
1035
|
+
|
|
972
1036
|
rowAspectRatio += calculateAspectRatio(asset.width || MISSING_WIDTH_PLACEHOLDER, asset.height || MISSING_HEIGHT_PLACEHOLDER);
|
|
1037
|
+
|
|
973
1038
|
_row.push(asset);
|
|
1039
|
+
|
|
974
1040
|
if (rowAspectRatio >= minimumRowAspectRatio.current || index + 1 === assetsProp.length || (_assetsProp2 = assetsProp[index + 1]) !== null && _assetsProp2 !== void 0 && _assetsProp2.group && assetsProp[index + 1].group !== asset.group) {
|
|
975
1041
|
rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
|
|
976
1042
|
var totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (_row.length - 1);
|
|
977
1043
|
var rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
|
|
1044
|
+
|
|
978
1045
|
_row.forEach(function (rowAsset) {
|
|
979
1046
|
var assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
|
|
1047
|
+
|
|
980
1048
|
_computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
|
|
981
1049
|
layout: {
|
|
982
1050
|
type: 'asset',
|
|
@@ -987,8 +1055,10 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
987
1055
|
hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
|
|
988
1056
|
}
|
|
989
1057
|
}));
|
|
1058
|
+
|
|
990
1059
|
_translateX += assetWidth + SPACE_BETWEEN_ASSETS;
|
|
991
1060
|
});
|
|
1061
|
+
|
|
992
1062
|
_row = [];
|
|
993
1063
|
rowAspectRatio = 0;
|
|
994
1064
|
_translateY += rowHeight + SPACE_UNDER_ASSETS;
|
|
@@ -999,13 +1069,16 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
999
1069
|
}
|
|
1000
1070
|
}
|
|
1001
1071
|
};
|
|
1072
|
+
|
|
1002
1073
|
function calculateAspectRatio(width, height) {
|
|
1003
1074
|
return width / height;
|
|
1004
1075
|
}
|
|
1076
|
+
|
|
1005
1077
|
var totalGalleryHeight = React.useMemo(function () {
|
|
1006
1078
|
if (assets.length === 0) {
|
|
1007
1079
|
return 0;
|
|
1008
1080
|
}
|
|
1081
|
+
|
|
1009
1082
|
var lastAsset = assets[assets.length - 1];
|
|
1010
1083
|
return lastAsset.layout.translateY + lastAsset.layout.height;
|
|
1011
1084
|
}, [assets]);
|
|
@@ -1016,16 +1089,19 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1016
1089
|
return window.removeEventListener('scroll', throttledOnScroll, false);
|
|
1017
1090
|
};
|
|
1018
1091
|
}, [assetGalleryDOMNode, calculatedAssets]);
|
|
1092
|
+
|
|
1019
1093
|
function onScroll() {
|
|
1020
1094
|
setScrollPositionAndDirection();
|
|
1021
1095
|
calculateVisibility();
|
|
1022
1096
|
}
|
|
1097
|
+
|
|
1023
1098
|
function setScrollPositionAndDirection() {
|
|
1024
1099
|
var newYOffset = window.pageYOffset;
|
|
1025
1100
|
previousYOffset.current = latestYOffset.current;
|
|
1026
1101
|
latestYOffset.current = newYOffset;
|
|
1027
1102
|
scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
|
|
1028
1103
|
}
|
|
1104
|
+
|
|
1029
1105
|
var calculateVisibility = function calculateVisibility() {
|
|
1030
1106
|
if (!assetGalleryDOMNode.current) return;
|
|
1031
1107
|
var bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
|
|
@@ -1041,35 +1117,44 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1041
1117
|
} else {
|
|
1042
1118
|
asset.layout.show = true;
|
|
1043
1119
|
}
|
|
1120
|
+
|
|
1044
1121
|
return asset;
|
|
1045
1122
|
});
|
|
1046
1123
|
setAssets(finalizedAssets);
|
|
1047
1124
|
};
|
|
1125
|
+
|
|
1048
1126
|
function getOffsetTop(elem) {
|
|
1049
1127
|
var offsetTop = 0;
|
|
1128
|
+
|
|
1050
1129
|
do {
|
|
1051
1130
|
if (!isNaN(elem.offsetTop)) {
|
|
1052
1131
|
offsetTop += elem.offsetTop;
|
|
1053
1132
|
}
|
|
1133
|
+
|
|
1054
1134
|
elem = elem.offsetParent;
|
|
1055
1135
|
} while (elem);
|
|
1136
|
+
|
|
1056
1137
|
return offsetTop;
|
|
1057
1138
|
}
|
|
1139
|
+
|
|
1058
1140
|
var handleKeyPress = React.useCallback(function (e) {
|
|
1059
1141
|
function isElementVisible(el) {
|
|
1060
1142
|
var rect = el.getBoundingClientRect(),
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1143
|
+
vWidth = window.innerWidth || document.documentElement.clientWidth,
|
|
1144
|
+
vHeight = window.innerHeight || document.documentElement.clientHeight,
|
|
1145
|
+
efp = function efp(x, y) {
|
|
1146
|
+
return document.elementFromPoint(x, y);
|
|
1147
|
+
};
|
|
1148
|
+
|
|
1066
1149
|
if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
|
|
1067
1150
|
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));
|
|
1068
1151
|
}
|
|
1152
|
+
|
|
1069
1153
|
function softSelectFirstVisibleAsset() {
|
|
1070
1154
|
var visibleAssets = assets.filter(function (asset) {
|
|
1071
1155
|
return asset.layout.show;
|
|
1072
1156
|
});
|
|
1157
|
+
|
|
1073
1158
|
for (var i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
|
|
1074
1159
|
if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
|
|
1075
1160
|
onAssetSoftSelectedChanged(visibleAssets[i].key);
|
|
@@ -1077,18 +1162,22 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1077
1162
|
}
|
|
1078
1163
|
}
|
|
1079
1164
|
}
|
|
1165
|
+
|
|
1080
1166
|
if (assets.length === 0) return;
|
|
1167
|
+
|
|
1081
1168
|
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
1082
1169
|
if (softSelectedAssetKey === null) {
|
|
1083
1170
|
softSelectFirstVisibleAsset();
|
|
1084
1171
|
return;
|
|
1085
1172
|
}
|
|
1086
1173
|
}
|
|
1174
|
+
|
|
1087
1175
|
if (e.key === 'ArrowLeft') {
|
|
1088
1176
|
var previousAssetIndex = assets.findIndex(function (asset) {
|
|
1089
1177
|
return asset.key === softSelectedAssetKey;
|
|
1090
1178
|
}) - 1;
|
|
1091
1179
|
var previousAsset = assets[previousAssetIndex];
|
|
1180
|
+
|
|
1092
1181
|
if (previousAsset) {
|
|
1093
1182
|
if (previousAsset.layout.show) {
|
|
1094
1183
|
onAssetSoftSelectedChanged(previousAsset.key);
|
|
@@ -1096,13 +1185,16 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1096
1185
|
softSelectFirstVisibleAsset();
|
|
1097
1186
|
}
|
|
1098
1187
|
}
|
|
1188
|
+
|
|
1099
1189
|
return;
|
|
1100
1190
|
}
|
|
1191
|
+
|
|
1101
1192
|
if (e.key === 'ArrowRight') {
|
|
1102
1193
|
var nextAssetIndex = assets.findIndex(function (asset) {
|
|
1103
1194
|
return asset.key === softSelectedAssetKey;
|
|
1104
1195
|
}) + 1;
|
|
1105
1196
|
var nextAsset = assets[nextAssetIndex];
|
|
1197
|
+
|
|
1106
1198
|
if (nextAsset) {
|
|
1107
1199
|
if (nextAsset.layout.show) {
|
|
1108
1200
|
onAssetSoftSelectedChanged(nextAsset.key);
|
|
@@ -1110,10 +1202,13 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1110
1202
|
softSelectFirstVisibleAsset();
|
|
1111
1203
|
}
|
|
1112
1204
|
}
|
|
1205
|
+
|
|
1113
1206
|
return;
|
|
1114
1207
|
}
|
|
1208
|
+
|
|
1115
1209
|
if (e.key === 'Enter') {
|
|
1116
1210
|
if (softSelectedAssetKey === null) return;
|
|
1211
|
+
|
|
1117
1212
|
if (selectedAssetKeys.includes(softSelectedAssetKey)) {
|
|
1118
1213
|
onAssetUnselected(softSelectedAssetKey);
|
|
1119
1214
|
} else {
|
|
@@ -1128,6 +1223,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1128
1223
|
if (softSelectable) {
|
|
1129
1224
|
document.addEventListener('keydown', handleKeyPress);
|
|
1130
1225
|
}
|
|
1226
|
+
|
|
1131
1227
|
return function () {
|
|
1132
1228
|
return document.removeEventListener('keydown', handleKeyPress);
|
|
1133
1229
|
};
|
|
@@ -1136,31 +1232,32 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1136
1232
|
if (softSelectable && softSelectedAssetKey !== null) {
|
|
1137
1233
|
document.addEventListener('click', handleClick, true);
|
|
1138
1234
|
}
|
|
1235
|
+
|
|
1139
1236
|
return function () {
|
|
1140
1237
|
return document.removeEventListener('click', handleClick, true);
|
|
1141
1238
|
};
|
|
1142
1239
|
}, [softSelectable, softSelectedAssetKey, handleClick]);
|
|
1143
|
-
return React__default[
|
|
1240
|
+
return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(AssetGalleryBase$1, defaultTheme._extends({
|
|
1144
1241
|
ref: assetGalleryCompactRef,
|
|
1145
1242
|
style: {
|
|
1146
1243
|
height: "".concat(totalGalleryHeight, "px")
|
|
1147
1244
|
},
|
|
1148
1245
|
className: props.className
|
|
1149
1246
|
}, props), assets.map(function (asset) {
|
|
1150
|
-
return asset.layout.show && React__default[
|
|
1247
|
+
return asset.layout.show && React__default['default'].createElement(React__default['default'].Fragment, {
|
|
1151
1248
|
key: "asset-gallery-".concat(asset.layout.type, "-").concat(asset.key)
|
|
1152
|
-
}, asset.layout.type === 'groupLabel' && React__default[
|
|
1249
|
+
}, asset.layout.type === 'groupLabel' && React__default['default'].createElement(GroupLabel, {
|
|
1153
1250
|
style: {
|
|
1154
1251
|
transform: "translate3d(".concat(asset.layout.translateX, "px,").concat(asset.layout.translateY, "px, 0)"),
|
|
1155
1252
|
height: "".concat(asset.layout.height, "px")
|
|
1156
1253
|
}
|
|
1157
|
-
}, asset.title), asset.layout.type === 'asset' && React__default[
|
|
1254
|
+
}, asset.title), asset.layout.type === 'asset' && React__default['default'].createElement(AssetGalleryCardBase, {
|
|
1158
1255
|
style: {
|
|
1159
1256
|
transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
|
|
1160
1257
|
width: "".concat(asset.layout.width, "px"),
|
|
1161
1258
|
height: "".concat(asset.layout.height, "px")
|
|
1162
1259
|
}
|
|
1163
|
-
}, viewMode === 'grid' ? React__default[
|
|
1260
|
+
}, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
|
|
1164
1261
|
asset: asset,
|
|
1165
1262
|
selectable: 'selectable' in asset ? asset.selectable : selectable,
|
|
1166
1263
|
selected: selectedAssetKeys.includes(asset.key),
|
|
@@ -1169,7 +1266,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
|
|
|
1169
1266
|
onAssetUnselected: onAssetUnselected,
|
|
1170
1267
|
softSelected: softSelectedAssetKey === asset.key,
|
|
1171
1268
|
component: component
|
|
1172
|
-
}) : React__default[
|
|
1269
|
+
}) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
|
|
1173
1270
|
asset: asset,
|
|
1174
1271
|
hasHeightAndWidth: asset.layout.hasHeightAndWidth,
|
|
1175
1272
|
selectable: 'selectable' in asset ? asset.selectable : selectable,
|
|
@@ -1197,31 +1294,34 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1197
1294
|
className: defaultTheme.PropTypes.string
|
|
1198
1295
|
} : {};
|
|
1199
1296
|
|
|
1200
|
-
var
|
|
1201
|
-
var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
|
|
1297
|
+
var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_ref, forwardedRef) {
|
|
1202
1298
|
var assets = _ref.assets,
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1299
|
+
viewMode = _ref.viewMode,
|
|
1300
|
+
thumbnailMaxHeight = _ref.thumbnailMaxHeight,
|
|
1301
|
+
selectable = _ref.selectable,
|
|
1302
|
+
selectedAssetKeys = _ref.selectedAssetKeys,
|
|
1303
|
+
onSelectedChanged = _ref.onSelectedChanged,
|
|
1304
|
+
softSelectable = _ref.softSelectable,
|
|
1305
|
+
onSoftSelectedChanged = _ref.onSoftSelectedChanged,
|
|
1306
|
+
component = _ref.component,
|
|
1307
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"]);
|
|
1308
|
+
|
|
1212
1309
|
var _useState = React.useState(selectedAssetKeys || []),
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1310
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
1311
|
+
selectedAssetKeysInternalState = _useState2[0],
|
|
1312
|
+
setSelectedAssetKeysInternalState = _useState2[1];
|
|
1313
|
+
|
|
1216
1314
|
var _useState3 = React.useState(null),
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1315
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
1316
|
+
softSelectedAssetKeyInternalState = _useState4[0],
|
|
1317
|
+
setSoftSelectedAssetKeyInternalState = _useState4[1];
|
|
1318
|
+
|
|
1220
1319
|
React.useEffect(function () {
|
|
1221
1320
|
setSelectedAssetKeysInternalState(selectedAssetKeys || []);
|
|
1222
1321
|
}, [selectedAssetKeys]);
|
|
1223
1322
|
React.useEffect(function () {
|
|
1224
1323
|
if (selectedAssetKeys === selectedAssetKeysInternalState) return;
|
|
1324
|
+
|
|
1225
1325
|
if (lodash.isFunction(onSelectedChanged)) {
|
|
1226
1326
|
onSelectedChanged(selectedAssetKeysInternalState);
|
|
1227
1327
|
}
|
|
@@ -1247,7 +1347,7 @@ var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_r
|
|
|
1247
1347
|
var assetKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1248
1348
|
setSoftSelectedAssetKeyInternalState(assetKey);
|
|
1249
1349
|
}, []);
|
|
1250
|
-
return React__default[
|
|
1350
|
+
return React__default['default'].createElement(AssetGalleryBase, defaultTheme._extends({
|
|
1251
1351
|
ref: forwardedRef,
|
|
1252
1352
|
assets: assets,
|
|
1253
1353
|
thumbnailMaxHeight: thumbnailMaxHeight,
|