@webiny/app-file-manager 5.36.0-beta.1 → 5.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -12
- package/components/FileDetails.d.ts +0 -20
- package/components/FileDetails.js +0 -243
- package/components/FileDetails.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/app-file-manager",
|
|
3
|
-
"version": "5.36.0
|
|
3
|
+
"version": "5.36.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
"@emotion/styled": "11.10.6",
|
|
18
18
|
"@material-design-icons/svg": "0.14.3",
|
|
19
19
|
"@types/react": "17.0.39",
|
|
20
|
-
"@webiny/app": "5.36.0
|
|
21
|
-
"@webiny/app-aco": "5.36.0
|
|
22
|
-
"@webiny/app-admin": "5.36.0
|
|
23
|
-
"@webiny/app-security": "5.36.0
|
|
24
|
-
"@webiny/form": "5.36.0
|
|
25
|
-
"@webiny/plugins": "5.36.0
|
|
26
|
-
"@webiny/ui": "5.36.0
|
|
27
|
-
"@webiny/validation": "5.36.0
|
|
20
|
+
"@webiny/app": "5.36.0",
|
|
21
|
+
"@webiny/app-aco": "5.36.0",
|
|
22
|
+
"@webiny/app-admin": "5.36.0",
|
|
23
|
+
"@webiny/app-security": "5.36.0",
|
|
24
|
+
"@webiny/form": "5.36.0",
|
|
25
|
+
"@webiny/plugins": "5.36.0",
|
|
26
|
+
"@webiny/ui": "5.36.0",
|
|
27
|
+
"@webiny/validation": "5.36.0",
|
|
28
28
|
"apollo-cache": "1.3.5",
|
|
29
29
|
"apollo-client": "2.6.10",
|
|
30
30
|
"apollo-link": "1.2.14",
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
"@babel/preset-react": "7.18.6",
|
|
60
60
|
"@babel/preset-typescript": "7.18.6",
|
|
61
61
|
"@svgr/webpack": "6.5.1",
|
|
62
|
-
"@webiny/cli": "5.36.0
|
|
63
|
-
"@webiny/project-utils": "5.36.0
|
|
62
|
+
"@webiny/cli": "5.36.0",
|
|
63
|
+
"@webiny/project-utils": "5.36.0",
|
|
64
64
|
"rimraf": "3.0.2",
|
|
65
65
|
"ttypescript": "1.5.15",
|
|
66
66
|
"typescript": "4.7.4"
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"build": "yarn webiny run build",
|
|
74
74
|
"watch": "yarn webiny run watch"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "5c435f437b9f0fe8b4dbf65528aed985ee8d0ff1"
|
|
77
77
|
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export { useFile } from "./FileDetails/FileProvider";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { FileItem } from "@webiny/app-admin/types";
|
|
4
|
-
declare global {
|
|
5
|
-
namespace JSX {
|
|
6
|
-
interface IntrinsicElements {
|
|
7
|
-
"li-title": {
|
|
8
|
-
children?: React.ReactNode;
|
|
9
|
-
};
|
|
10
|
-
"li-content": {
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
export interface FileDetailsProps {
|
|
17
|
-
file: FileItem;
|
|
18
|
-
onClose: () => void;
|
|
19
|
-
}
|
|
20
|
-
export declare const FileDetails: React.FC<FileDetailsProps>;
|
|
@@ -1,243 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.FileDetails = void 0;
|
|
9
|
-
Object.defineProperty(exports, "useFile", {
|
|
10
|
-
enumerable: true,
|
|
11
|
-
get: function get() {
|
|
12
|
-
return _FileProvider.useFile;
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
16
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
-
var _FileProvider = require("./FileDetails/FileProvider");
|
|
18
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
var _bytes = _interopRequireDefault(require("bytes"));
|
|
20
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
|
-
var _emotion = require("emotion");
|
|
22
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
23
|
-
var _Drawer = require("@webiny/ui/Drawer");
|
|
24
|
-
var _Button = require("@webiny/ui/Button");
|
|
25
|
-
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
26
|
-
var _get = _interopRequireDefault(require("lodash/get"));
|
|
27
|
-
var _Tags = _interopRequireDefault(require("./FileDetails/Tags"));
|
|
28
|
-
var _Name = _interopRequireDefault(require("./FileDetails/Name"));
|
|
29
|
-
var _Aliases = require("./FileDetails/Aliases");
|
|
30
|
-
var _Tooltip = require("@webiny/ui/Tooltip");
|
|
31
|
-
var _Icon = require("@webiny/ui/Icon");
|
|
32
|
-
var _Typography = require("@webiny/ui/Typography");
|
|
33
|
-
var _reactHotkeyz = require("react-hotkeyz");
|
|
34
|
-
var _close = require("@material-design-icons/svg/outlined/close.svg");
|
|
35
|
-
var _content_copy = require("@material-design-icons/svg/outlined/content_copy.svg");
|
|
36
|
-
var _insert_photo = require("@material-design-icons/svg/outlined/insert_photo.svg");
|
|
37
|
-
var _insert_drive_file = require("@material-design-icons/svg/outlined/insert_drive_file.svg");
|
|
38
|
-
var _today = require("@material-design-icons/svg/outlined/today.svg");
|
|
39
|
-
var _highlight = require("@material-design-icons/svg/outlined/highlight.svg");
|
|
40
|
-
var _i18n = require("@webiny/app/i18n");
|
|
41
|
-
var _DeleteImageAction = require("./FileDetails/DeleteImageAction");
|
|
42
|
-
var _appAdmin = require("@webiny/app-admin");
|
|
43
|
-
var _getFileTypePlugin = _interopRequireDefault(require("../getFileTypePlugin"));
|
|
44
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
45
|
-
var t = _i18n.i18n.ns("app-admin/file-manager/file-details");
|
|
46
|
-
var fileDetailsSidebar = /*#__PURE__*/(0, _emotion.css)({
|
|
47
|
-
"&.mdc-drawer": {
|
|
48
|
-
width: 360
|
|
49
|
-
}
|
|
50
|
-
}, "label:fileDetailsSidebar;");
|
|
51
|
-
var CloseButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
|
|
52
|
-
label: "CloseButton",
|
|
53
|
-
target: "e19slrb30"
|
|
54
|
-
})("position:absolute;right:10px;top:8px;");
|
|
55
|
-
var style = {
|
|
56
|
-
wrapper: /*#__PURE__*/(0, _emotion.css)({
|
|
57
|
-
height: "100vh",
|
|
58
|
-
overflowY: "auto"
|
|
59
|
-
}, "label:wrapper;"),
|
|
60
|
-
header: /*#__PURE__*/(0, _emotion.css)({
|
|
61
|
-
textAlign: "center",
|
|
62
|
-
marginBottom: 24,
|
|
63
|
-
paddingTop: 16,
|
|
64
|
-
"& span": {
|
|
65
|
-
textTransform: "capitalize",
|
|
66
|
-
color: "var(--mdc-theme-on-surface)",
|
|
67
|
-
fontWeight: 600
|
|
68
|
-
}
|
|
69
|
-
}, "label:header;"),
|
|
70
|
-
preview: /*#__PURE__*/(0, _emotion.css)({
|
|
71
|
-
boxSizing: "border-box",
|
|
72
|
-
display: "flex",
|
|
73
|
-
justifyContent: "center",
|
|
74
|
-
alignItems: "center",
|
|
75
|
-
position: "relative",
|
|
76
|
-
width: "100%",
|
|
77
|
-
height: 300,
|
|
78
|
-
margin: "0 auto 24px",
|
|
79
|
-
img: {
|
|
80
|
-
objectFit: "contain",
|
|
81
|
-
maxHeight: 300,
|
|
82
|
-
maxWidth: 300,
|
|
83
|
-
width: "100%",
|
|
84
|
-
position: "static",
|
|
85
|
-
transform: "none"
|
|
86
|
-
},
|
|
87
|
-
"&.dark": {
|
|
88
|
-
backgroundColor: "var(--mdc-theme-background)"
|
|
89
|
-
}
|
|
90
|
-
}, "label:preview;"),
|
|
91
|
-
download: /*#__PURE__*/(0, _emotion.css)({
|
|
92
|
-
textAlign: "center",
|
|
93
|
-
margin: "0 auto",
|
|
94
|
-
width: "100%",
|
|
95
|
-
"& .icon--active": {
|
|
96
|
-
"&.mdc-icon-button": {
|
|
97
|
-
color: "var(--mdc-theme-text-on-primary)"
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}, "label:download;"),
|
|
101
|
-
list: /*#__PURE__*/(0, _emotion.css)({
|
|
102
|
-
textAlign: "left",
|
|
103
|
-
color: "var(--mdc-theme-on-surface)",
|
|
104
|
-
li: {
|
|
105
|
-
padding: "12px 16px",
|
|
106
|
-
lineHeight: "22px",
|
|
107
|
-
"li-title": {
|
|
108
|
-
display: "flex",
|
|
109
|
-
alignItems: "center",
|
|
110
|
-
justifyContent: "flex-start",
|
|
111
|
-
minHeight: 48,
|
|
112
|
-
"& .list-item__title": {
|
|
113
|
-
fontWeight: 600
|
|
114
|
-
},
|
|
115
|
-
"& .list-item__icon": {
|
|
116
|
-
marginRight: 24
|
|
117
|
-
},
|
|
118
|
-
"& .list-item__content": {
|
|
119
|
-
flex: "1 0 200px"
|
|
120
|
-
}
|
|
121
|
-
},
|
|
122
|
-
"li-content": {
|
|
123
|
-
width: "100%",
|
|
124
|
-
display: "block",
|
|
125
|
-
"& .list-item__truncate": {
|
|
126
|
-
display: "block",
|
|
127
|
-
width: "100%",
|
|
128
|
-
whiteSpace: "nowrap",
|
|
129
|
-
overflow: "hidden",
|
|
130
|
-
textOverflow: "ellipsis"
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
}, "label:list;"),
|
|
135
|
-
drawerContent: /*#__PURE__*/(0, _emotion.css)({
|
|
136
|
-
"&.mdc-drawer__content": {
|
|
137
|
-
height: "auto",
|
|
138
|
-
overflowY: "inherit"
|
|
139
|
-
}
|
|
140
|
-
}, "label:drawerContent;")
|
|
141
|
-
};
|
|
142
|
-
var FileDetails = function FileDetails(_ref) {
|
|
143
|
-
var file = _ref.file,
|
|
144
|
-
onClose = _ref.onClose;
|
|
145
|
-
var filePlugin = (0, _getFileTypePlugin.default)(file);
|
|
146
|
-
var _useState = (0, _react.useState)(false),
|
|
147
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
148
|
-
darkImageBackground = _useState2[0],
|
|
149
|
-
setDarkImageBackground = _useState2[1];
|
|
150
|
-
var _useSnackbar = (0, _appAdmin.useSnackbar)(),
|
|
151
|
-
showSnackbar = _useSnackbar.showSnackbar;
|
|
152
|
-
(0, _reactHotkeyz.useHotkeys)({
|
|
153
|
-
zIndex: 55,
|
|
154
|
-
disabled: !file,
|
|
155
|
-
keys: {
|
|
156
|
-
esc: onClose
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
var actions = (0, _get.default)(filePlugin, "fileDetails.actions") || (0, _get.default)(filePlugin, "actions") || [];
|
|
160
|
-
var fileTypeIcon = (0, _react.useMemo)(function () {
|
|
161
|
-
if (file && typeof file.type === "string") {
|
|
162
|
-
return file.type.includes("image") ? /*#__PURE__*/_react.default.createElement(_insert_photo.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_insert_drive_file.ReactComponent, null);
|
|
163
|
-
}
|
|
164
|
-
return /*#__PURE__*/_react.default.createElement(_insert_photo.ReactComponent, null);
|
|
165
|
-
}, [file]);
|
|
166
|
-
return /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
|
|
167
|
-
className: fileDetailsSidebar,
|
|
168
|
-
dir: "rtl",
|
|
169
|
-
modal: true,
|
|
170
|
-
open: Boolean(file),
|
|
171
|
-
onClose: onClose,
|
|
172
|
-
"data-testid": "fm.file-details.drawer"
|
|
173
|
-
}, file && /*#__PURE__*/_react.default.createElement(_FileProvider.FileProvider, {
|
|
174
|
-
file: file
|
|
175
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
176
|
-
className: style.wrapper,
|
|
177
|
-
dir: "ltr"
|
|
178
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
179
|
-
className: style.header
|
|
180
|
-
}, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
|
|
181
|
-
use: "headline5"
|
|
182
|
-
}, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["File details"])))), /*#__PURE__*/_react.default.createElement(CloseButton, {
|
|
183
|
-
icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
|
|
184
|
-
onClick: onClose
|
|
185
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
186
|
-
className: (0, _classnames.default)(style.preview, {
|
|
187
|
-
dark: darkImageBackground
|
|
188
|
-
})
|
|
189
|
-
}, filePlugin && filePlugin.render({
|
|
190
|
-
file: file
|
|
191
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
192
|
-
className: style.download
|
|
193
|
-
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
194
|
-
content: /*#__PURE__*/_react.default.createElement("span", null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Copy URL"])))),
|
|
195
|
-
placement: "bottom"
|
|
196
|
-
}, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
|
|
197
|
-
onClick: function onClick() {
|
|
198
|
-
navigator.clipboard.writeText(file.src);
|
|
199
|
-
showSnackbar(t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["URL copied successfully."]))));
|
|
200
|
-
},
|
|
201
|
-
icon: /*#__PURE__*/_react.default.createElement(_content_copy.ReactComponent, {
|
|
202
|
-
style: {
|
|
203
|
-
margin: "0 8px 0 0"
|
|
204
|
-
}
|
|
205
|
-
})
|
|
206
|
-
})), actions.map(function (Component, index) {
|
|
207
|
-
return /*#__PURE__*/_react.default.createElement(Component, {
|
|
208
|
-
key: index,
|
|
209
|
-
file: file
|
|
210
|
-
});
|
|
211
|
-
}), /*#__PURE__*/_react.default.createElement(_DeleteImageAction.DeleteImageAction, null), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
212
|
-
content: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Toggle background"]))),
|
|
213
|
-
placement: "bottom"
|
|
214
|
-
}, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
|
|
215
|
-
icon: /*#__PURE__*/_react.default.createElement(_highlight.ReactComponent, null),
|
|
216
|
-
onClick: function onClick() {
|
|
217
|
-
return setDarkImageBackground(!darkImageBackground);
|
|
218
|
-
},
|
|
219
|
-
className: (0, _classnames.default)({
|
|
220
|
-
"icon--active": darkImageBackground
|
|
221
|
-
})
|
|
222
|
-
})))), /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, {
|
|
223
|
-
dir: "ltr",
|
|
224
|
-
className: style.drawerContent
|
|
225
|
-
}, /*#__PURE__*/_react.default.createElement("ul", {
|
|
226
|
-
className: style.list
|
|
227
|
-
}, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Name.default, null)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
|
|
228
|
-
className: "list-item__icon",
|
|
229
|
-
icon: fileTypeIcon
|
|
230
|
-
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
|
|
231
|
-
use: "subtitle1"
|
|
232
|
-
}, file.type), " ", " - ", /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
|
|
233
|
-
use: "subtitle1"
|
|
234
|
-
}, _bytes.default.format(file.size, {
|
|
235
|
-
unitSeparator: " "
|
|
236
|
-
}))))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
|
|
237
|
-
className: "list-item__icon",
|
|
238
|
-
icon: /*#__PURE__*/_react.default.createElement(_today.ReactComponent, null)
|
|
239
|
-
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
|
|
240
|
-
use: "subtitle1"
|
|
241
|
-
}, (0, _dayjs.default)(file.createdOn).format("DD MMM YYYY [at] HH:mm"))))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Tags.default, null)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Aliases.Aliases, null)))))));
|
|
242
|
-
};
|
|
243
|
-
exports.FileDetails = FileDetails;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["t","i18n","ns","fileDetailsSidebar","css","width","CloseButton","styled","IconButton","style","wrapper","height","overflowY","header","textAlign","marginBottom","paddingTop","textTransform","color","fontWeight","preview","boxSizing","display","justifyContent","alignItems","position","margin","img","objectFit","maxHeight","maxWidth","transform","backgroundColor","download","list","li","padding","lineHeight","minHeight","marginRight","flex","whiteSpace","overflow","textOverflow","drawerContent","FileDetails","file","onClose","filePlugin","getFileTypePlugin","useState","darkImageBackground","setDarkImageBackground","useSnackbar","showSnackbar","useHotkeys","zIndex","disabled","keys","esc","actions","get","fileTypeIcon","useMemo","type","includes","Boolean","classNames","dark","render","navigator","clipboard","writeText","src","map","Component","index","bytes","format","size","unitSeparator","dayjs","createdOn"],"sources":["FileDetails.tsx"],"sourcesContent":["export { useFile } from \"./FileDetails/FileProvider\";\nimport React, { useMemo, useState } from \"react\";\nimport bytes from \"bytes\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { Drawer, DrawerContent } from \"@webiny/ui/Drawer\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport dayjs from \"dayjs\";\nimport get from \"lodash/get\";\nimport Tags from \"./FileDetails/Tags\";\nimport Name from \"./FileDetails/Name\";\nimport { Aliases } from \"./FileDetails/Aliases\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { ReactComponent as CloseIcon } from \"@material-design-icons/svg/outlined/close.svg\";\nimport { ReactComponent as CopyContentIcon } from \"@material-design-icons/svg/outlined/content_copy.svg\";\nimport { ReactComponent as ImageIcon } from \"@material-design-icons/svg/outlined/insert_photo.svg\";\nimport { ReactComponent as FileIcon } from \"@material-design-icons/svg/outlined/insert_drive_file.svg\";\nimport { ReactComponent as CalendarIcon } from \"@material-design-icons/svg/outlined/today.svg\";\nimport { ReactComponent as HighlightIcon } from \"@material-design-icons/svg/outlined/highlight.svg\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { FileProvider } from \"./FileDetails/FileProvider\";\nimport { DeleteImageAction } from \"./FileDetails/DeleteImageAction\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport getFileTypePlugin from \"~/getFileTypePlugin\";\n\nconst t = i18n.ns(\"app-admin/file-manager/file-details\");\n\nconst fileDetailsSidebar = css({\n \"&.mdc-drawer\": {\n width: 360\n }\n});\n\ndeclare global {\n // eslint-disable-next-line\n namespace JSX {\n interface IntrinsicElements {\n \"li-title\": {\n children?: React.ReactNode;\n };\n\n \"li-content\": {\n children?: React.ReactNode;\n };\n }\n }\n}\n\nconst CloseButton = styled(IconButton)`\n position: absolute;\n right: 10px;\n top: 8px;\n`;\n\nconst style: any = {\n wrapper: css({\n height: \"100vh\",\n overflowY: \"auto\"\n }),\n header: css({\n textAlign: \"center\",\n marginBottom: 24,\n paddingTop: 16,\n \"& span\": {\n textTransform: \"capitalize\",\n color: \"var(--mdc-theme-on-surface)\",\n fontWeight: 600\n }\n }),\n preview: css({\n boxSizing: \"border-box\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"relative\",\n width: \"100%\",\n height: 300,\n margin: \"0 auto 24px\",\n img: {\n objectFit: \"contain\",\n maxHeight: 300,\n maxWidth: 300,\n width: \"100%\",\n position: \"static\",\n transform: \"none\"\n },\n \"&.dark\": {\n backgroundColor: \"var(--mdc-theme-background)\"\n }\n }),\n download: css({\n textAlign: \"center\",\n margin: \"0 auto\",\n width: \"100%\",\n \"& .icon--active\": {\n \"&.mdc-icon-button\": {\n color: \"var(--mdc-theme-text-on-primary)\"\n }\n }\n }),\n list: css({\n textAlign: \"left\",\n color: \"var(--mdc-theme-on-surface)\",\n li: {\n padding: \"12px 16px\",\n lineHeight: \"22px\",\n \"li-title\": {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n minHeight: 48,\n \"& .list-item__title\": {\n fontWeight: 600\n },\n \"& .list-item__icon\": {\n marginRight: 24\n },\n \"& .list-item__content\": {\n flex: \"1 0 200px\"\n }\n },\n \"li-content\": {\n width: \"100%\",\n display: \"block\",\n \"& .list-item__truncate\": {\n display: \"block\",\n width: \"100%\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\"\n }\n }\n }\n }),\n drawerContent: css({\n \"&.mdc-drawer__content\": {\n height: \"auto\",\n overflowY: \"inherit\"\n }\n })\n};\n\nexport interface FileDetailsProps {\n file: FileItem;\n onClose: () => void;\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = ({ file, onClose }) => {\n const filePlugin = getFileTypePlugin(file);\n\n const [darkImageBackground, setDarkImageBackground] = useState(false);\n const { showSnackbar } = useSnackbar();\n\n useHotkeys({\n zIndex: 55,\n disabled: !file,\n keys: {\n esc: onClose\n }\n });\n\n const actions: React.FC[] =\n get(filePlugin, \"fileDetails.actions\") || get(filePlugin, \"actions\") || [];\n\n const fileTypeIcon = useMemo(() => {\n if (file && typeof file.type === \"string\") {\n return file.type.includes(\"image\") ? <ImageIcon /> : <FileIcon />;\n }\n return <ImageIcon />;\n }, [file]);\n\n return (\n <Drawer\n className={fileDetailsSidebar}\n dir=\"rtl\"\n modal\n open={Boolean(file)}\n onClose={onClose}\n data-testid={\"fm.file-details.drawer\"}\n >\n {file && (\n <FileProvider file={file}>\n <div className={style.wrapper} dir=\"ltr\">\n <div className={style.header}>\n <Typography use={\"headline5\"}>{t`File details`}</Typography>\n <CloseButton icon={<CloseIcon />} onClick={onClose} />\n </div>\n\n <div\n className={classNames(style.preview, {\n dark: darkImageBackground\n })}\n >\n {filePlugin && filePlugin.render({ file })}\n </div>\n <div className={style.download}>\n <>\n <Tooltip content={<span>{t`Copy URL`}</span>} placement={\"bottom\"}>\n <IconButton\n onClick={() => {\n navigator.clipboard.writeText(file.src);\n showSnackbar(t`URL copied successfully.`);\n }}\n icon={<CopyContentIcon style={{ margin: \"0 8px 0 0\" }} />}\n />\n </Tooltip>\n\n {actions.map(\n (Component: React.FC<{ file: FileItem }>, index: number) => (\n <Component key={index} file={file} />\n )\n )}\n <DeleteImageAction />\n {/* Render background switcher */}\n <Tooltip content={t`Toggle background`} placement={\"bottom\"}>\n <IconButton\n icon={<HighlightIcon />}\n onClick={() => setDarkImageBackground(!darkImageBackground)}\n className={classNames({\n \"icon--active\": darkImageBackground\n })}\n />\n </Tooltip>\n </>\n </div>\n <DrawerContent dir=\"ltr\" className={style.drawerContent}>\n <ul className={style.list}>\n <li>\n <Name />\n </li>\n <li>\n <li-title>\n <Icon className={\"list-item__icon\"} icon={fileTypeIcon} />\n <div>\n <Typography use={\"subtitle1\"}>{file.type}</Typography>{\" \"}\n {\" - \"}\n <Typography use={\"subtitle1\"}>\n {bytes.format(file.size, { unitSeparator: \" \" })}\n </Typography>\n </div>\n </li-title>\n </li>\n <li>\n <li-title>\n <Icon\n className={\"list-item__icon\"}\n icon={<CalendarIcon />}\n />\n <div>\n <Typography use={\"subtitle1\"}>\n {dayjs(file.createdOn).format(\n \"DD MMM YYYY [at] HH:mm\"\n )}\n </Typography>\n </div>\n </li-title>\n </li>\n <li>\n <Tags />\n </li>\n <li>\n <Aliases />\n </li>\n </ul>\n </DrawerContent>\n </div>\n </FileProvider>\n )}\n </Drawer>\n );\n};\n"],"mappings":"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"}
|