@liveblocks/react-ui 2.7.0-beta2 → 2.7.0-versions
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/_private/README.md +5 -0
- package/_private/package.json +4 -0
- package/dist/_private/index.d.mts +72 -0
- package/dist/_private/index.d.ts +72 -0
- package/dist/_private/index.js +46 -0
- package/dist/_private/index.js.map +1 -0
- package/dist/_private/index.mjs +21 -0
- package/dist/_private/index.mjs.map +1 -0
- package/dist/components/Comment.js +7 -65
- package/dist/components/Comment.js.map +1 -1
- package/dist/components/Comment.mjs +9 -66
- package/dist/components/Comment.mjs.map +1 -1
- package/dist/components/Composer.js +101 -217
- package/dist/components/Composer.js.map +1 -1
- package/dist/components/Composer.mjs +104 -220
- package/dist/components/Composer.mjs.map +1 -1
- package/dist/components/HistoryVersionSummary.js +42 -0
- package/dist/components/HistoryVersionSummary.js.map +1 -0
- package/dist/components/HistoryVersionSummary.mjs +40 -0
- package/dist/components/HistoryVersionSummary.mjs.map +1 -0
- package/dist/components/HistoryVersionSummaryList.js +22 -0
- package/dist/components/HistoryVersionSummaryList.js.map +1 -0
- package/dist/components/HistoryVersionSummaryList.mjs +20 -0
- package/dist/components/HistoryVersionSummaryList.mjs.map +1 -0
- package/dist/components/InboxNotification.js +10 -28
- package/dist/components/InboxNotification.js.map +1 -1
- package/dist/components/InboxNotification.mjs +10 -28
- package/dist/components/InboxNotification.mjs.map +1 -1
- package/dist/components/Thread.js +0 -2
- package/dist/components/Thread.js.map +1 -1
- package/dist/components/Thread.mjs +0 -2
- package/dist/components/Thread.mjs.map +1 -1
- package/dist/components/internal/Button.js +8 -1
- package/dist/components/internal/Button.js.map +1 -1
- package/dist/components/internal/Button.mjs +8 -1
- package/dist/components/internal/Button.mjs.map +1 -1
- package/dist/components/internal/EmojiPicker.js +3 -3
- package/dist/components/internal/EmojiPicker.js.map +1 -1
- package/dist/components/internal/EmojiPicker.mjs +3 -3
- package/dist/components/internal/EmojiPicker.mjs.map +1 -1
- package/dist/components/internal/InboxNotificationThread.js +2 -10
- package/dist/components/internal/InboxNotificationThread.js.map +1 -1
- package/dist/components/internal/InboxNotificationThread.mjs +3 -11
- package/dist/components/internal/InboxNotificationThread.mjs.map +1 -1
- package/dist/components/internal/User.js +3 -19
- package/dist/components/internal/User.js.map +1 -1
- package/dist/components/internal/User.mjs +3 -19
- package/dist/components/internal/User.mjs.map +1 -1
- package/dist/icons/ArrowUp.js +15 -0
- package/dist/icons/ArrowUp.js.map +1 -0
- package/dist/icons/ArrowUp.mjs +13 -0
- package/dist/icons/ArrowUp.mjs.map +1 -0
- package/dist/icons/{Warning.js → Missing.js} +3 -3
- package/dist/icons/{Warning.js.map → Missing.js.map} +1 -1
- package/dist/icons/{Warning.mjs → Missing.mjs} +3 -3
- package/dist/icons/{Warning.mjs.map → Missing.mjs.map} +1 -1
- package/dist/icons/Restore.js +17 -0
- package/dist/icons/Restore.js.map +1 -0
- package/dist/icons/Restore.mjs +15 -0
- package/dist/icons/Restore.mjs.map +1 -0
- package/dist/icons/Spinner.js +9 -3
- package/dist/icons/Spinner.js.map +1 -1
- package/dist/icons/Spinner.mjs +10 -4
- package/dist/icons/Spinner.mjs.map +1 -1
- package/dist/index.d.mts +74 -70
- package/dist/index.d.ts +74 -70
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -0
- package/dist/index.mjs.map +1 -1
- package/dist/overrides.js +5 -6
- package/dist/overrides.js.map +1 -1
- package/dist/overrides.mjs +5 -6
- package/dist/overrides.mjs.map +1 -1
- package/dist/primitives/Composer/contexts.js +3 -17
- package/dist/primitives/Composer/contexts.js.map +1 -1
- package/dist/primitives/Composer/contexts.mjs +4 -15
- package/dist/primitives/Composer/contexts.mjs.map +1 -1
- package/dist/primitives/Composer/index.js +26 -185
- package/dist/primitives/Composer/index.js.map +1 -1
- package/dist/primitives/Composer/index.mjs +31 -188
- package/dist/primitives/Composer/index.mjs.map +1 -1
- package/dist/primitives/Composer/utils.js +0 -224
- package/dist/primitives/Composer/utils.js.map +1 -1
- package/dist/primitives/Composer/utils.mjs +1 -222
- package/dist/primitives/Composer/utils.mjs.map +1 -1
- package/dist/primitives/EmojiPicker/utils.js +2 -2
- package/dist/primitives/EmojiPicker/utils.js.map +1 -1
- package/dist/primitives/EmojiPicker/utils.mjs +1 -1
- package/dist/primitives/EmojiPicker/utils.mjs.map +1 -1
- package/dist/primitives/index.d.mts +3 -83
- package/dist/primitives/index.d.ts +3 -83
- package/dist/primitives/index.js +0 -4
- package/dist/primitives/index.js.map +1 -1
- package/dist/primitives/index.mjs +0 -2
- package/dist/primitives/index.mjs.map +1 -1
- package/dist/utils/chunk.js +12 -0
- package/dist/utils/chunk.js.map +1 -0
- package/dist/utils/chunk.mjs +10 -0
- package/dist/utils/chunk.mjs.map +1 -0
- package/dist/utils/intl.js +0 -6
- package/dist/utils/intl.js.map +1 -1
- package/dist/utils/intl.mjs +1 -6
- package/dist/utils/intl.mjs.map +1 -1
- package/dist/utils/use-initial.js +1 -2
- package/dist/utils/use-initial.js.map +1 -1
- package/dist/utils/use-initial.mjs +2 -3
- package/dist/utils/use-initial.mjs.map +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/dist/version.mjs +1 -1
- package/dist/version.mjs.map +1 -1
- package/package.json +16 -4
- package/src/styles/dark/index.css +0 -1
- package/src/styles/index.css +219 -325
- package/src/styles/utils.css +6 -44
- package/styles/dark/attributes.css +1 -1
- package/styles/dark/attributes.css.map +1 -1
- package/styles/dark/media-query.css +1 -1
- package/styles/dark/media-query.css.map +1 -1
- package/styles.css +1 -1
- package/styles.css.map +1 -1
- package/dist/components/internal/Attachment.js +0 -207
- package/dist/components/internal/Attachment.js.map +0 -1
- package/dist/components/internal/Attachment.mjs +0 -205
- package/dist/components/internal/Attachment.mjs.map +0 -1
- package/dist/icons/Attachment.js +0 -15
- package/dist/icons/Attachment.js.map +0 -1
- package/dist/icons/Attachment.mjs +0 -13
- package/dist/icons/Attachment.mjs.map +0 -1
- package/dist/primitives/FileSize.js +0 -33
- package/dist/primitives/FileSize.js.map +0 -1
- package/dist/primitives/FileSize.mjs +0 -31
- package/dist/primitives/FileSize.mjs.map +0 -1
- package/dist/utils/download.js +0 -14
- package/dist/utils/download.js.map +0 -1
- package/dist/utils/download.mjs +0 -12
- package/dist/utils/download.mjs.map +0 -1
- package/dist/utils/format-file-size.js +0 -45
- package/dist/utils/format-file-size.js.map +0 -1
- package/dist/utils/format-file-size.mjs +0 -43
- package/dist/utils/format-file-size.mjs.map +0 -1
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var react = require('@liveblocks/react');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var Cross = require('../../icons/Cross.js');
|
|
7
|
-
var Spinner = require('../../icons/Spinner.js');
|
|
8
|
-
var Warning = require('../../icons/Warning.js');
|
|
9
|
-
var overrides = require('../../overrides.js');
|
|
10
|
-
require('../../primitives/Comment/index.js');
|
|
11
|
-
require('../../primitives/Composer/index.js');
|
|
12
|
-
var contexts = require('../../primitives/Composer/contexts.js');
|
|
13
|
-
var utils = require('../../primitives/Composer/utils.js');
|
|
14
|
-
require('../../primitives/EmojiPicker/index.js');
|
|
15
|
-
require('../../primitives/FileSize.js');
|
|
16
|
-
require('../../primitives/Timestamp.js');
|
|
17
|
-
var classNames = require('../../utils/class-names.js');
|
|
18
|
-
var formatFileSize = require('../../utils/format-file-size.js');
|
|
19
|
-
var Tooltip = require('./Tooltip.js');
|
|
20
|
-
|
|
21
|
-
const IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024;
|
|
22
|
-
const fileExtensionRegex = /^(.+?)(\.[^.]+)?$/;
|
|
23
|
-
function splitFileName(name) {
|
|
24
|
-
const match = name.match(fileExtensionRegex);
|
|
25
|
-
return { base: match?.[1] ?? name, extension: match?.[2] };
|
|
26
|
-
}
|
|
27
|
-
function getFileAttachmentIconGlyph(mimeType) {
|
|
28
|
-
if (mimeType === "application/zip" || mimeType === "application/gzip" || mimeType === "application/vnd.rar" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/x-bzip" || mimeType === "application/x-bzip2") {
|
|
29
|
-
return /* @__PURE__ */ React.createElement("path", {
|
|
30
|
-
d: "M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z"
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
if (mimeType.startsWith("text/") || mimeType.startsWith("font/") || mimeType.startsWith("application/")) {
|
|
34
|
-
return /* @__PURE__ */ React.createElement("path", {
|
|
35
|
-
d: "M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z"
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
if (mimeType.startsWith("image/")) {
|
|
39
|
-
return /* @__PURE__ */ React.createElement("path", {
|
|
40
|
-
d: "M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
if (mimeType.startsWith("video/")) {
|
|
44
|
-
return /* @__PURE__ */ React.createElement("path", {
|
|
45
|
-
d: "M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z"
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
if (mimeType.startsWith("audio/")) {
|
|
49
|
-
return /* @__PURE__ */ React.createElement("path", {
|
|
50
|
-
d: "M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z"
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
return null;
|
|
54
|
-
}
|
|
55
|
-
const FileAttachmentIcon = React.memo(({ mimeType }) => {
|
|
56
|
-
const iconGlyph = React.useMemo(
|
|
57
|
-
() => getFileAttachmentIconGlyph(mimeType),
|
|
58
|
-
[mimeType]
|
|
59
|
-
);
|
|
60
|
-
return /* @__PURE__ */ React.createElement("svg", {
|
|
61
|
-
className: "lb-attachment-icon",
|
|
62
|
-
width: 30,
|
|
63
|
-
height: 30,
|
|
64
|
-
viewBox: "0 0 30 30",
|
|
65
|
-
fill: "currentColor",
|
|
66
|
-
fillRule: "evenodd",
|
|
67
|
-
clipRule: "evenodd",
|
|
68
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
69
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
70
|
-
d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
|
|
71
|
-
className: "lb-attachment-icon-shadow"
|
|
72
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
73
|
-
d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
|
|
74
|
-
className: "lb-attachment-icon-background"
|
|
75
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
76
|
-
d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
|
|
77
|
-
className: "lb-attachment-icon-fold"
|
|
78
|
-
}), iconGlyph && /* @__PURE__ */ React.createElement("g", {
|
|
79
|
-
className: "lb-attachment-icon-glyph"
|
|
80
|
-
}, iconGlyph));
|
|
81
|
-
});
|
|
82
|
-
function FileAttachmentImagePreview({ url }) {
|
|
83
|
-
const [isLoaded, setLoaded] = React.useState(false);
|
|
84
|
-
const handleLoad = React.useCallback(() => {
|
|
85
|
-
setLoaded(true);
|
|
86
|
-
}, []);
|
|
87
|
-
return url ? /* @__PURE__ */ React.createElement("div", {
|
|
88
|
-
className: "lb-attachment-preview-image",
|
|
89
|
-
"data-hidden": !isLoaded ? "" : void 0
|
|
90
|
-
}, /* @__PURE__ */ React.createElement("img", {
|
|
91
|
-
src: url,
|
|
92
|
-
loading: "lazy",
|
|
93
|
-
onLoad: handleLoad
|
|
94
|
-
})) : null;
|
|
95
|
-
}
|
|
96
|
-
function FileAttachmentRemoteImagePreview({
|
|
97
|
-
attachment
|
|
98
|
-
}) {
|
|
99
|
-
const { url } = react.useAttachmentUrl(attachment.id);
|
|
100
|
-
return /* @__PURE__ */ React.createElement(FileAttachmentImagePreview, {
|
|
101
|
-
url
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
function FileAttachmentPreview({
|
|
105
|
-
attachment
|
|
106
|
-
}) {
|
|
107
|
-
const isInsideRoom = react.useIsInsideRoom();
|
|
108
|
-
const isUploaded = attachment.type === "attachment" || attachment.status === "uploaded";
|
|
109
|
-
if (attachment.mimeType.startsWith("image/") && attachment.size < IMAGE_PREVIEW_MAX_SIZE) {
|
|
110
|
-
if (isUploaded && isInsideRoom) {
|
|
111
|
-
return /* @__PURE__ */ React.createElement(FileAttachmentRemoteImagePreview, {
|
|
112
|
-
attachment
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
return null;
|
|
117
|
-
}
|
|
118
|
-
function FileAttachment({
|
|
119
|
-
attachment,
|
|
120
|
-
overrides: overrides$1,
|
|
121
|
-
onClick,
|
|
122
|
-
onDeleteClick,
|
|
123
|
-
preventFocusOnDelete,
|
|
124
|
-
className,
|
|
125
|
-
...props
|
|
126
|
-
}) {
|
|
127
|
-
const $ = overrides.useOverrides(overrides$1);
|
|
128
|
-
const composerAttachmentsContext = contexts.useComposerAttachmentsContextOrNull();
|
|
129
|
-
const isInComposer = Boolean(composerAttachmentsContext);
|
|
130
|
-
const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;
|
|
131
|
-
const { base: fileBaseName, extension: fileExtension } = React.useMemo(() => {
|
|
132
|
-
return splitFileName(attachment.name);
|
|
133
|
-
}, [attachment.name]);
|
|
134
|
-
const status = attachment.type === "localAttachment" ? attachment.status : void 0;
|
|
135
|
-
const isUploading = status === "uploading";
|
|
136
|
-
const isError = status === "error";
|
|
137
|
-
let description;
|
|
138
|
-
if (attachment.type === "localAttachment" && attachment.status === "error") {
|
|
139
|
-
if (attachment.error instanceof utils.AttachmentTooLargeError) {
|
|
140
|
-
description = $.ATTACHMENT_TOO_LARGE(
|
|
141
|
-
maxAttachmentSize ? formatFileSize.formatFileSize(maxAttachmentSize, $.locale) : void 0
|
|
142
|
-
);
|
|
143
|
-
} else {
|
|
144
|
-
description = $.ATTACHMENT_ERROR(attachment.error);
|
|
145
|
-
}
|
|
146
|
-
} else {
|
|
147
|
-
description = formatFileSize.formatFileSize(attachment.size, $.locale);
|
|
148
|
-
}
|
|
149
|
-
const deleteLabel = isInComposer ? $.COMPOSER_REMOVE_ATTACHMENT : $.COMMENT_DELETE_ATTACHMENT;
|
|
150
|
-
const handleDeletePointerDown = React.useCallback(
|
|
151
|
-
(event) => {
|
|
152
|
-
if (preventFocusOnDelete) {
|
|
153
|
-
event.preventDefault();
|
|
154
|
-
}
|
|
155
|
-
},
|
|
156
|
-
[preventFocusOnDelete]
|
|
157
|
-
);
|
|
158
|
-
const handleKeyDown = React.useCallback((event) => {
|
|
159
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
160
|
-
event.preventDefault();
|
|
161
|
-
const clickEvent = new MouseEvent("click", {
|
|
162
|
-
bubbles: true,
|
|
163
|
-
cancelable: true,
|
|
164
|
-
view: window
|
|
165
|
-
});
|
|
166
|
-
event.target.dispatchEvent(clickEvent);
|
|
167
|
-
}
|
|
168
|
-
}, []);
|
|
169
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
170
|
-
className: classNames.classNames("lb-attachment lb-file-attachment", className),
|
|
171
|
-
"data-error": isError ? "" : void 0,
|
|
172
|
-
...props,
|
|
173
|
-
role: onClick ? "button" : void 0,
|
|
174
|
-
onClick,
|
|
175
|
-
tabIndex: onClick ? 0 : -1,
|
|
176
|
-
onKeyDown: onClick ? handleKeyDown : void 0
|
|
177
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
178
|
-
className: "lb-attachment-preview"
|
|
179
|
-
}, isUploading ? /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null) : isError ? /* @__PURE__ */ React.createElement(Warning.WarningIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, !isError ? /* @__PURE__ */ React.createElement(FileAttachmentPreview, {
|
|
180
|
-
attachment
|
|
181
|
-
}) : null, /* @__PURE__ */ React.createElement(FileAttachmentIcon, {
|
|
182
|
-
mimeType: attachment.mimeType
|
|
183
|
-
}))), /* @__PURE__ */ React.createElement("div", {
|
|
184
|
-
className: "lb-attachment-details"
|
|
185
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
186
|
-
className: "lb-attachment-name",
|
|
187
|
-
title: attachment.name
|
|
188
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
189
|
-
className: "lb-attachment-name-base"
|
|
190
|
-
}, fileBaseName), fileExtension && /* @__PURE__ */ React.createElement("span", {
|
|
191
|
-
className: "lb-attachment-name-extension"
|
|
192
|
-
}, fileExtension)), /* @__PURE__ */ React.createElement("span", {
|
|
193
|
-
className: "lb-attachment-description",
|
|
194
|
-
title: description
|
|
195
|
-
}, description)), onDeleteClick && /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
|
|
196
|
-
content: deleteLabel
|
|
197
|
-
}, /* @__PURE__ */ React.createElement("button", {
|
|
198
|
-
type: "button",
|
|
199
|
-
className: "lb-attachment-delete",
|
|
200
|
-
onClick: onDeleteClick,
|
|
201
|
-
onPointerDown: handleDeletePointerDown,
|
|
202
|
-
"aria-label": deleteLabel
|
|
203
|
-
}, /* @__PURE__ */ React.createElement(Cross.CrossIcon, null))));
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
exports.FileAttachment = FileAttachment;
|
|
207
|
-
//# sourceMappingURL=Attachment.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n ComponentPropsWithoutRef,\n KeyboardEvent,\n MouseEventHandler,\n PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\ninterface FileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n attachment: CommentMixedAttachment;\n onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n preventFocusOnDelete?: boolean;\n overrides?: Partial<GlobalOverrides>;\n}\n\nconst IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024; // 50 MB\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n const match = name.match(fileExtensionRegex);\n\n return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getFileAttachmentIconGlyph(mimeType: string) {\n if (\n mimeType === \"application/zip\" ||\n mimeType === \"application/gzip\" ||\n mimeType === \"application/vnd.rar\" ||\n mimeType === \"application/x-rar-compressed\" ||\n mimeType === \"application/x-7z-compressed\" ||\n mimeType === \"application/x-zip-compressed\" ||\n mimeType === \"application/x-tar\" ||\n mimeType === \"application/x-bzip\" ||\n mimeType === \"application/x-bzip2\"\n ) {\n return (\n <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n );\n }\n\n if (\n mimeType.startsWith(\"text/\") ||\n mimeType.startsWith(\"font/\") ||\n mimeType.startsWith(\"application/\")\n ) {\n return (\n <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n );\n }\n\n if (mimeType.startsWith(\"image/\")) {\n return (\n <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n );\n }\n\n if (mimeType.startsWith(\"video/\")) {\n return (\n <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n );\n }\n\n if (mimeType.startsWith(\"audio/\")) {\n return (\n <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n );\n }\n\n return null;\n}\n\nconst FileAttachmentIcon = memo(({ mimeType }: { mimeType: string }) => {\n const iconGlyph = useMemo(\n () => getFileAttachmentIconGlyph(mimeType),\n [mimeType]\n );\n\n return (\n <svg\n className=\"lb-attachment-icon\"\n width={30}\n height={30}\n viewBox=\"0 0 30 30\"\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n className=\"lb-attachment-icon-shadow\"\n />\n <path\n d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n className=\"lb-attachment-icon-background\"\n />\n <path\n d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n className=\"lb-attachment-icon-fold\"\n />\n\n {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n </svg>\n );\n});\n\nfunction FileAttachmentImagePreview({ url }: { url?: string }) {\n const [isLoaded, setLoaded] = useState(false);\n\n const handleLoad = useCallback(() => {\n setLoaded(true);\n }, []);\n\n return url ? (\n <div\n className=\"lb-attachment-preview-image\"\n data-hidden={!isLoaded ? \"\" : undefined}\n >\n <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n </div>\n ) : null;\n}\n\nfunction FileAttachmentRemoteImagePreview({\n attachment,\n}: {\n attachment: CommentMixedAttachment;\n}) {\n const { url } = useAttachmentUrl(attachment.id);\n\n return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentPreview({\n attachment,\n}: {\n attachment: CommentMixedAttachment;\n}) {\n const isInsideRoom = useIsInsideRoom();\n const isUploaded =\n attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n if (\n attachment.mimeType.startsWith(\"image/\") &&\n attachment.size < IMAGE_PREVIEW_MAX_SIZE\n ) {\n if (isUploaded && isInsideRoom) {\n return <FileAttachmentRemoteImagePreview attachment={attachment} />;\n }\n }\n\n return null;\n}\n\nexport function FileAttachment({\n attachment,\n overrides,\n onClick,\n onDeleteClick,\n preventFocusOnDelete,\n className,\n ...props\n}: FileAttachmentProps) {\n const $ = useOverrides(overrides);\n const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n const isInComposer = Boolean(composerAttachmentsContext);\n const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n return splitFileName(attachment.name);\n }, [attachment.name]);\n const status =\n attachment.type === \"localAttachment\" ? attachment.status : undefined;\n const isUploading = status === \"uploading\";\n const isError = status === \"error\";\n\n let description: string;\n\n if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n if (attachment.error instanceof AttachmentTooLargeError) {\n description = $.ATTACHMENT_TOO_LARGE(\n maxAttachmentSize\n ? formatFileSize(maxAttachmentSize, $.locale)\n : undefined\n );\n } else {\n description = $.ATTACHMENT_ERROR(attachment.error);\n }\n } else {\n description = formatFileSize(attachment.size, $.locale);\n }\n\n const deleteLabel = isInComposer\n ? $.COMPOSER_REMOVE_ATTACHMENT\n : $.COMMENT_DELETE_ATTACHMENT;\n\n const handleDeletePointerDown = useCallback(\n (event: PointerEvent<HTMLButtonElement>) => {\n if (preventFocusOnDelete) {\n event.preventDefault();\n }\n },\n [preventFocusOnDelete]\n );\n\n const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n // Simulate a click event on Enter or Space because it's a div\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n const clickEvent = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n view: window,\n });\n event.target.dispatchEvent(clickEvent);\n }\n }, []);\n\n return (\n <div\n className={classNames(\"lb-attachment lb-file-attachment\", className)}\n data-error={isError ? \"\" : undefined}\n {...props}\n role={onClick ? \"button\" : undefined}\n onClick={onClick}\n tabIndex={onClick ? 0 : -1}\n onKeyDown={onClick ? handleKeyDown : undefined}\n >\n <div className=\"lb-attachment-preview\">\n {isUploading ? (\n <SpinnerIcon />\n ) : isError ? (\n <WarningIcon />\n ) : (\n <>\n {!isError ? (\n <FileAttachmentPreview attachment={attachment} />\n ) : null}\n <FileAttachmentIcon mimeType={attachment.mimeType} />\n </>\n )}\n </div>\n <div className=\"lb-attachment-details\">\n <span className=\"lb-attachment-name\" title={attachment.name}>\n <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n {fileExtension && (\n <span className=\"lb-attachment-name-extension\">\n {fileExtension}\n </span>\n )}\n </span>\n <span className=\"lb-attachment-description\" title={description}>\n {description}\n </span>\n </div>\n {onDeleteClick && (\n <Tooltip content={deleteLabel}>\n <button\n type=\"button\"\n className=\"lb-attachment-delete\"\n onClick={onDeleteClick}\n onPointerDown={handleDeletePointerDown}\n aria-label={deleteLabel}\n >\n <CrossIcon />\n </button>\n </Tooltip>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA;AAEA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAAkB;AACyB;AAChC;AAGX;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AACE;AAEA;AACE;AAAc;AAGhB;AACG;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAG5C;AAEA;AAA0C;AAE1C;AAGE;AAEA;AAAQ;AAA2B;AACrC;AAEA;AAA+B;AAE/B;AAGE;AACA;AAGA;AAIE;AACE;AAAQ;AAAiC;AAAwB;AACnE;AAGF;AACF;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACE;AAAoC;AAEtC;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEE;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AAGF;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAQN;AAAsB;AAExB;AAAwC;AAI9C;AAAc;AACZ;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAKnB;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;;"}
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { useIsInsideRoom, useAttachmentUrl } from '@liveblocks/react';
|
|
3
|
-
import React__default, { memo, useMemo, useCallback, useState } from 'react';
|
|
4
|
-
import { CrossIcon } from '../../icons/Cross.mjs';
|
|
5
|
-
import { SpinnerIcon } from '../../icons/Spinner.mjs';
|
|
6
|
-
import { WarningIcon } from '../../icons/Warning.mjs';
|
|
7
|
-
import { useOverrides } from '../../overrides.mjs';
|
|
8
|
-
import '../../primitives/Comment/index.mjs';
|
|
9
|
-
import '../../primitives/Composer/index.mjs';
|
|
10
|
-
import { useComposerAttachmentsContextOrNull } from '../../primitives/Composer/contexts.mjs';
|
|
11
|
-
import { AttachmentTooLargeError } from '../../primitives/Composer/utils.mjs';
|
|
12
|
-
import '../../primitives/EmojiPicker/index.mjs';
|
|
13
|
-
import '../../primitives/FileSize.mjs';
|
|
14
|
-
import '../../primitives/Timestamp.mjs';
|
|
15
|
-
import { classNames } from '../../utils/class-names.mjs';
|
|
16
|
-
import { formatFileSize } from '../../utils/format-file-size.mjs';
|
|
17
|
-
import { Tooltip } from './Tooltip.mjs';
|
|
18
|
-
|
|
19
|
-
const IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024;
|
|
20
|
-
const fileExtensionRegex = /^(.+?)(\.[^.]+)?$/;
|
|
21
|
-
function splitFileName(name) {
|
|
22
|
-
const match = name.match(fileExtensionRegex);
|
|
23
|
-
return { base: match?.[1] ?? name, extension: match?.[2] };
|
|
24
|
-
}
|
|
25
|
-
function getFileAttachmentIconGlyph(mimeType) {
|
|
26
|
-
if (mimeType === "application/zip" || mimeType === "application/gzip" || mimeType === "application/vnd.rar" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/x-bzip" || mimeType === "application/x-bzip2") {
|
|
27
|
-
return /* @__PURE__ */ React__default.createElement("path", {
|
|
28
|
-
d: "M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z"
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
if (mimeType.startsWith("text/") || mimeType.startsWith("font/") || mimeType.startsWith("application/")) {
|
|
32
|
-
return /* @__PURE__ */ React__default.createElement("path", {
|
|
33
|
-
d: "M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z"
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
if (mimeType.startsWith("image/")) {
|
|
37
|
-
return /* @__PURE__ */ React__default.createElement("path", {
|
|
38
|
-
d: "M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
if (mimeType.startsWith("video/")) {
|
|
42
|
-
return /* @__PURE__ */ React__default.createElement("path", {
|
|
43
|
-
d: "M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z"
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
if (mimeType.startsWith("audio/")) {
|
|
47
|
-
return /* @__PURE__ */ React__default.createElement("path", {
|
|
48
|
-
d: "M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z"
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
return null;
|
|
52
|
-
}
|
|
53
|
-
const FileAttachmentIcon = memo(({ mimeType }) => {
|
|
54
|
-
const iconGlyph = useMemo(
|
|
55
|
-
() => getFileAttachmentIconGlyph(mimeType),
|
|
56
|
-
[mimeType]
|
|
57
|
-
);
|
|
58
|
-
return /* @__PURE__ */ React__default.createElement("svg", {
|
|
59
|
-
className: "lb-attachment-icon",
|
|
60
|
-
width: 30,
|
|
61
|
-
height: 30,
|
|
62
|
-
viewBox: "0 0 30 30",
|
|
63
|
-
fill: "currentColor",
|
|
64
|
-
fillRule: "evenodd",
|
|
65
|
-
clipRule: "evenodd",
|
|
66
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
67
|
-
}, /* @__PURE__ */ React__default.createElement("path", {
|
|
68
|
-
d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
|
|
69
|
-
className: "lb-attachment-icon-shadow"
|
|
70
|
-
}), /* @__PURE__ */ React__default.createElement("path", {
|
|
71
|
-
d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
|
|
72
|
-
className: "lb-attachment-icon-background"
|
|
73
|
-
}), /* @__PURE__ */ React__default.createElement("path", {
|
|
74
|
-
d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
|
|
75
|
-
className: "lb-attachment-icon-fold"
|
|
76
|
-
}), iconGlyph && /* @__PURE__ */ React__default.createElement("g", {
|
|
77
|
-
className: "lb-attachment-icon-glyph"
|
|
78
|
-
}, iconGlyph));
|
|
79
|
-
});
|
|
80
|
-
function FileAttachmentImagePreview({ url }) {
|
|
81
|
-
const [isLoaded, setLoaded] = useState(false);
|
|
82
|
-
const handleLoad = useCallback(() => {
|
|
83
|
-
setLoaded(true);
|
|
84
|
-
}, []);
|
|
85
|
-
return url ? /* @__PURE__ */ React__default.createElement("div", {
|
|
86
|
-
className: "lb-attachment-preview-image",
|
|
87
|
-
"data-hidden": !isLoaded ? "" : void 0
|
|
88
|
-
}, /* @__PURE__ */ React__default.createElement("img", {
|
|
89
|
-
src: url,
|
|
90
|
-
loading: "lazy",
|
|
91
|
-
onLoad: handleLoad
|
|
92
|
-
})) : null;
|
|
93
|
-
}
|
|
94
|
-
function FileAttachmentRemoteImagePreview({
|
|
95
|
-
attachment
|
|
96
|
-
}) {
|
|
97
|
-
const { url } = useAttachmentUrl(attachment.id);
|
|
98
|
-
return /* @__PURE__ */ React__default.createElement(FileAttachmentImagePreview, {
|
|
99
|
-
url
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
function FileAttachmentPreview({
|
|
103
|
-
attachment
|
|
104
|
-
}) {
|
|
105
|
-
const isInsideRoom = useIsInsideRoom();
|
|
106
|
-
const isUploaded = attachment.type === "attachment" || attachment.status === "uploaded";
|
|
107
|
-
if (attachment.mimeType.startsWith("image/") && attachment.size < IMAGE_PREVIEW_MAX_SIZE) {
|
|
108
|
-
if (isUploaded && isInsideRoom) {
|
|
109
|
-
return /* @__PURE__ */ React__default.createElement(FileAttachmentRemoteImagePreview, {
|
|
110
|
-
attachment
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
return null;
|
|
115
|
-
}
|
|
116
|
-
function FileAttachment({
|
|
117
|
-
attachment,
|
|
118
|
-
overrides,
|
|
119
|
-
onClick,
|
|
120
|
-
onDeleteClick,
|
|
121
|
-
preventFocusOnDelete,
|
|
122
|
-
className,
|
|
123
|
-
...props
|
|
124
|
-
}) {
|
|
125
|
-
const $ = useOverrides(overrides);
|
|
126
|
-
const composerAttachmentsContext = useComposerAttachmentsContextOrNull();
|
|
127
|
-
const isInComposer = Boolean(composerAttachmentsContext);
|
|
128
|
-
const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;
|
|
129
|
-
const { base: fileBaseName, extension: fileExtension } = useMemo(() => {
|
|
130
|
-
return splitFileName(attachment.name);
|
|
131
|
-
}, [attachment.name]);
|
|
132
|
-
const status = attachment.type === "localAttachment" ? attachment.status : void 0;
|
|
133
|
-
const isUploading = status === "uploading";
|
|
134
|
-
const isError = status === "error";
|
|
135
|
-
let description;
|
|
136
|
-
if (attachment.type === "localAttachment" && attachment.status === "error") {
|
|
137
|
-
if (attachment.error instanceof AttachmentTooLargeError) {
|
|
138
|
-
description = $.ATTACHMENT_TOO_LARGE(
|
|
139
|
-
maxAttachmentSize ? formatFileSize(maxAttachmentSize, $.locale) : void 0
|
|
140
|
-
);
|
|
141
|
-
} else {
|
|
142
|
-
description = $.ATTACHMENT_ERROR(attachment.error);
|
|
143
|
-
}
|
|
144
|
-
} else {
|
|
145
|
-
description = formatFileSize(attachment.size, $.locale);
|
|
146
|
-
}
|
|
147
|
-
const deleteLabel = isInComposer ? $.COMPOSER_REMOVE_ATTACHMENT : $.COMMENT_DELETE_ATTACHMENT;
|
|
148
|
-
const handleDeletePointerDown = useCallback(
|
|
149
|
-
(event) => {
|
|
150
|
-
if (preventFocusOnDelete) {
|
|
151
|
-
event.preventDefault();
|
|
152
|
-
}
|
|
153
|
-
},
|
|
154
|
-
[preventFocusOnDelete]
|
|
155
|
-
);
|
|
156
|
-
const handleKeyDown = useCallback((event) => {
|
|
157
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
158
|
-
event.preventDefault();
|
|
159
|
-
const clickEvent = new MouseEvent("click", {
|
|
160
|
-
bubbles: true,
|
|
161
|
-
cancelable: true,
|
|
162
|
-
view: window
|
|
163
|
-
});
|
|
164
|
-
event.target.dispatchEvent(clickEvent);
|
|
165
|
-
}
|
|
166
|
-
}, []);
|
|
167
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
|
168
|
-
className: classNames("lb-attachment lb-file-attachment", className),
|
|
169
|
-
"data-error": isError ? "" : void 0,
|
|
170
|
-
...props,
|
|
171
|
-
role: onClick ? "button" : void 0,
|
|
172
|
-
onClick,
|
|
173
|
-
tabIndex: onClick ? 0 : -1,
|
|
174
|
-
onKeyDown: onClick ? handleKeyDown : void 0
|
|
175
|
-
}, /* @__PURE__ */ React__default.createElement("div", {
|
|
176
|
-
className: "lb-attachment-preview"
|
|
177
|
-
}, isUploading ? /* @__PURE__ */ React__default.createElement(SpinnerIcon, null) : isError ? /* @__PURE__ */ React__default.createElement(WarningIcon, null) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !isError ? /* @__PURE__ */ React__default.createElement(FileAttachmentPreview, {
|
|
178
|
-
attachment
|
|
179
|
-
}) : null, /* @__PURE__ */ React__default.createElement(FileAttachmentIcon, {
|
|
180
|
-
mimeType: attachment.mimeType
|
|
181
|
-
}))), /* @__PURE__ */ React__default.createElement("div", {
|
|
182
|
-
className: "lb-attachment-details"
|
|
183
|
-
}, /* @__PURE__ */ React__default.createElement("span", {
|
|
184
|
-
className: "lb-attachment-name",
|
|
185
|
-
title: attachment.name
|
|
186
|
-
}, /* @__PURE__ */ React__default.createElement("span", {
|
|
187
|
-
className: "lb-attachment-name-base"
|
|
188
|
-
}, fileBaseName), fileExtension && /* @__PURE__ */ React__default.createElement("span", {
|
|
189
|
-
className: "lb-attachment-name-extension"
|
|
190
|
-
}, fileExtension)), /* @__PURE__ */ React__default.createElement("span", {
|
|
191
|
-
className: "lb-attachment-description",
|
|
192
|
-
title: description
|
|
193
|
-
}, description)), onDeleteClick && /* @__PURE__ */ React__default.createElement(Tooltip, {
|
|
194
|
-
content: deleteLabel
|
|
195
|
-
}, /* @__PURE__ */ React__default.createElement("button", {
|
|
196
|
-
type: "button",
|
|
197
|
-
className: "lb-attachment-delete",
|
|
198
|
-
onClick: onDeleteClick,
|
|
199
|
-
onPointerDown: handleDeletePointerDown,
|
|
200
|
-
"aria-label": deleteLabel
|
|
201
|
-
}, /* @__PURE__ */ React__default.createElement(CrossIcon, null))));
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
export { FileAttachment };
|
|
205
|
-
//# sourceMappingURL=Attachment.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Attachment.mjs","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n ComponentPropsWithoutRef,\n KeyboardEvent,\n MouseEventHandler,\n PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\ninterface FileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n attachment: CommentMixedAttachment;\n onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n preventFocusOnDelete?: boolean;\n overrides?: Partial<GlobalOverrides>;\n}\n\nconst IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024; // 50 MB\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n const match = name.match(fileExtensionRegex);\n\n return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getFileAttachmentIconGlyph(mimeType: string) {\n if (\n mimeType === \"application/zip\" ||\n mimeType === \"application/gzip\" ||\n mimeType === \"application/vnd.rar\" ||\n mimeType === \"application/x-rar-compressed\" ||\n mimeType === \"application/x-7z-compressed\" ||\n mimeType === \"application/x-zip-compressed\" ||\n mimeType === \"application/x-tar\" ||\n mimeType === \"application/x-bzip\" ||\n mimeType === \"application/x-bzip2\"\n ) {\n return (\n <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n );\n }\n\n if (\n mimeType.startsWith(\"text/\") ||\n mimeType.startsWith(\"font/\") ||\n mimeType.startsWith(\"application/\")\n ) {\n return (\n <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n );\n }\n\n if (mimeType.startsWith(\"image/\")) {\n return (\n <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n );\n }\n\n if (mimeType.startsWith(\"video/\")) {\n return (\n <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n );\n }\n\n if (mimeType.startsWith(\"audio/\")) {\n return (\n <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n );\n }\n\n return null;\n}\n\nconst FileAttachmentIcon = memo(({ mimeType }: { mimeType: string }) => {\n const iconGlyph = useMemo(\n () => getFileAttachmentIconGlyph(mimeType),\n [mimeType]\n );\n\n return (\n <svg\n className=\"lb-attachment-icon\"\n width={30}\n height={30}\n viewBox=\"0 0 30 30\"\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n className=\"lb-attachment-icon-shadow\"\n />\n <path\n d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n className=\"lb-attachment-icon-background\"\n />\n <path\n d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n className=\"lb-attachment-icon-fold\"\n />\n\n {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n </svg>\n );\n});\n\nfunction FileAttachmentImagePreview({ url }: { url?: string }) {\n const [isLoaded, setLoaded] = useState(false);\n\n const handleLoad = useCallback(() => {\n setLoaded(true);\n }, []);\n\n return url ? (\n <div\n className=\"lb-attachment-preview-image\"\n data-hidden={!isLoaded ? \"\" : undefined}\n >\n <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n </div>\n ) : null;\n}\n\nfunction FileAttachmentRemoteImagePreview({\n attachment,\n}: {\n attachment: CommentMixedAttachment;\n}) {\n const { url } = useAttachmentUrl(attachment.id);\n\n return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentPreview({\n attachment,\n}: {\n attachment: CommentMixedAttachment;\n}) {\n const isInsideRoom = useIsInsideRoom();\n const isUploaded =\n attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n if (\n attachment.mimeType.startsWith(\"image/\") &&\n attachment.size < IMAGE_PREVIEW_MAX_SIZE\n ) {\n if (isUploaded && isInsideRoom) {\n return <FileAttachmentRemoteImagePreview attachment={attachment} />;\n }\n }\n\n return null;\n}\n\nexport function FileAttachment({\n attachment,\n overrides,\n onClick,\n onDeleteClick,\n preventFocusOnDelete,\n className,\n ...props\n}: FileAttachmentProps) {\n const $ = useOverrides(overrides);\n const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n const isInComposer = Boolean(composerAttachmentsContext);\n const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n return splitFileName(attachment.name);\n }, [attachment.name]);\n const status =\n attachment.type === \"localAttachment\" ? attachment.status : undefined;\n const isUploading = status === \"uploading\";\n const isError = status === \"error\";\n\n let description: string;\n\n if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n if (attachment.error instanceof AttachmentTooLargeError) {\n description = $.ATTACHMENT_TOO_LARGE(\n maxAttachmentSize\n ? formatFileSize(maxAttachmentSize, $.locale)\n : undefined\n );\n } else {\n description = $.ATTACHMENT_ERROR(attachment.error);\n }\n } else {\n description = formatFileSize(attachment.size, $.locale);\n }\n\n const deleteLabel = isInComposer\n ? $.COMPOSER_REMOVE_ATTACHMENT\n : $.COMMENT_DELETE_ATTACHMENT;\n\n const handleDeletePointerDown = useCallback(\n (event: PointerEvent<HTMLButtonElement>) => {\n if (preventFocusOnDelete) {\n event.preventDefault();\n }\n },\n [preventFocusOnDelete]\n );\n\n const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n // Simulate a click event on Enter or Space because it's a div\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n const clickEvent = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n view: window,\n });\n event.target.dispatchEvent(clickEvent);\n }\n }, []);\n\n return (\n <div\n className={classNames(\"lb-attachment lb-file-attachment\", className)}\n data-error={isError ? \"\" : undefined}\n {...props}\n role={onClick ? \"button\" : undefined}\n onClick={onClick}\n tabIndex={onClick ? 0 : -1}\n onKeyDown={onClick ? handleKeyDown : undefined}\n >\n <div className=\"lb-attachment-preview\">\n {isUploading ? (\n <SpinnerIcon />\n ) : isError ? (\n <WarningIcon />\n ) : (\n <>\n {!isError ? (\n <FileAttachmentPreview attachment={attachment} />\n ) : null}\n <FileAttachmentIcon mimeType={attachment.mimeType} />\n </>\n )}\n </div>\n <div className=\"lb-attachment-details\">\n <span className=\"lb-attachment-name\" title={attachment.name}>\n <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n {fileExtension && (\n <span className=\"lb-attachment-name-extension\">\n {fileExtension}\n </span>\n )}\n </span>\n <span className=\"lb-attachment-description\" title={description}>\n {description}\n </span>\n </div>\n {onDeleteClick && (\n <Tooltip content={deleteLabel}>\n <button\n type=\"button\"\n className=\"lb-attachment-delete\"\n onClick={onDeleteClick}\n onPointerDown={handleDeletePointerDown}\n aria-label={deleteLabel}\n >\n <CrossIcon />\n </button>\n </Tooltip>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8BA;AAEA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAAkB;AACyB;AAChC;AAGX;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AACE;AAEA;AACE;AAAc;AAGhB;AACG;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAG5C;AAEA;AAA0C;AAE1C;AAGE;AAEA;AAAQ;AAA2B;AACrC;AAEA;AAA+B;AAE/B;AAGE;AACA;AAGA;AAIE;AACE;AAAQ;AAAiC;AAAwB;AACnE;AAGF;AACF;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACE;AAAoC;AAEtC;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEE;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AAGF;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAQN;AAAsB;AAExB;AAAwC;AAI9C;AAAc;AACZ;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAKnB;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;;"}
|
package/dist/icons/Attachment.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var Icon = require('../components/internal/Icon.js');
|
|
5
|
-
|
|
6
|
-
function AttachmentIcon(props) {
|
|
7
|
-
return /* @__PURE__ */ React.createElement(Icon.Icon, {
|
|
8
|
-
...props
|
|
9
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
10
|
-
d: "m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8"
|
|
11
|
-
}));
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
exports.AttachmentIcon = AttachmentIcon;
|
|
15
|
-
//# sourceMappingURL=Attachment.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Attachment.js","sources":["../../src/icons/Attachment.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function AttachmentIcon(props: ComponentProps<\"svg\">) {\n return (\n <Icon {...props}>\n <path d=\"m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8\" />\n </Icon>\n );\n}\n"],"names":["Icon"],"mappings":";;;;;AAKO,SAAS,eAAe,KAA8B,EAAA;AAC3D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,SAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,qQAAA;AAAA,GAAsQ,CAChR,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { Icon } from '../components/internal/Icon.mjs';
|
|
3
|
-
|
|
4
|
-
function AttachmentIcon(props) {
|
|
5
|
-
return /* @__PURE__ */ React__default.createElement(Icon, {
|
|
6
|
-
...props
|
|
7
|
-
}, /* @__PURE__ */ React__default.createElement("path", {
|
|
8
|
-
d: "m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8"
|
|
9
|
-
}));
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export { AttachmentIcon };
|
|
13
|
-
//# sourceMappingURL=Attachment.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Attachment.mjs","sources":["../../src/icons/Attachment.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function AttachmentIcon(props: ComponentProps<\"svg\">) {\n return (\n <Icon {...props}>\n <path d=\"m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8\" />\n </Icon>\n );\n}\n"],"names":["React"],"mappings":";;;AAKO,SAAS,eAAe,KAA8B,EAAA;AAC3D,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACPA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,qQAAA;AAAA,GAAsQ,CAChR,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var reactSlot = require('@radix-ui/react-slot');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var formatFileSize = require('../utils/format-file-size.js');
|
|
7
|
-
|
|
8
|
-
const FILE_SIZE_NAME = "FileSize";
|
|
9
|
-
const FileSize = React.forwardRef(
|
|
10
|
-
({
|
|
11
|
-
size,
|
|
12
|
-
locale,
|
|
13
|
-
children: renderChildren = formatFileSize.formatFileSize,
|
|
14
|
-
asChild,
|
|
15
|
-
...props
|
|
16
|
-
}, forwardedRef) => {
|
|
17
|
-
const Component = asChild ? reactSlot.Slot : "span";
|
|
18
|
-
const children = React.useMemo(
|
|
19
|
-
() => typeof renderChildren === "function" ? renderChildren(size, locale) : renderChildren,
|
|
20
|
-
[renderChildren, size]
|
|
21
|
-
);
|
|
22
|
-
return /* @__PURE__ */ React.createElement(Component, {
|
|
23
|
-
...props,
|
|
24
|
-
ref: forwardedRef
|
|
25
|
-
}, children);
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
if (process.env.NODE_ENV !== "production") {
|
|
29
|
-
FileSize.displayName = FILE_SIZE_NAME;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
exports.FileSize = FileSize;
|
|
33
|
-
//# sourceMappingURL=FileSize.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileSize.js","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n /**\n * The file size to display.\n */\n size: number;\n\n /**\n * A function to format the displayed file size.\n */\n children?: (size: number, locale?: string) => ReactNode;\n\n /**\n * The locale used when formatting the file size.\n */\n locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n (\n {\n size,\n locale,\n children: renderChildren = formatFileSize,\n asChild,\n ...props\n },\n forwardedRef\n ) => {\n const Component = asChild ? Slot : \"span\";\n const children = useMemo(\n () =>\n typeof renderChildren === \"function\"\n ? renderChildren(size, locale)\n : renderChildren,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [renderChildren, size]\n );\n\n return (\n <Component {...props} ref={forwardedRef}>\n {children}\n </Component>\n );\n }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAEe;AAGvB;AACG;AAAc;AAAY;AAE3B;AAGN;AAEA;AACE;AACF;;"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
-
import React__default, { forwardRef, useMemo } from 'react';
|
|
4
|
-
import { formatFileSize } from '../utils/format-file-size.mjs';
|
|
5
|
-
|
|
6
|
-
const FILE_SIZE_NAME = "FileSize";
|
|
7
|
-
const FileSize = forwardRef(
|
|
8
|
-
({
|
|
9
|
-
size,
|
|
10
|
-
locale,
|
|
11
|
-
children: renderChildren = formatFileSize,
|
|
12
|
-
asChild,
|
|
13
|
-
...props
|
|
14
|
-
}, forwardedRef) => {
|
|
15
|
-
const Component = asChild ? Slot : "span";
|
|
16
|
-
const children = useMemo(
|
|
17
|
-
() => typeof renderChildren === "function" ? renderChildren(size, locale) : renderChildren,
|
|
18
|
-
[renderChildren, size]
|
|
19
|
-
);
|
|
20
|
-
return /* @__PURE__ */ React__default.createElement(Component, {
|
|
21
|
-
...props,
|
|
22
|
-
ref: forwardedRef
|
|
23
|
-
}, children);
|
|
24
|
-
}
|
|
25
|
-
);
|
|
26
|
-
if (process.env.NODE_ENV !== "production") {
|
|
27
|
-
FileSize.displayName = FILE_SIZE_NAME;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { FileSize };
|
|
31
|
-
//# sourceMappingURL=FileSize.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileSize.mjs","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n /**\n * The file size to display.\n */\n size: number;\n\n /**\n * A function to format the displayed file size.\n */\n children?: (size: number, locale?: string) => ReactNode;\n\n /**\n * The locale used when formatting the file size.\n */\n locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n (\n {\n size,\n locale,\n children: renderChildren = formatFileSize,\n asChild,\n ...props\n },\n forwardedRef\n ) => {\n const Component = asChild ? Slot : \"span\";\n const children = useMemo(\n () =>\n typeof renderChildren === \"function\"\n ? renderChildren(size, locale)\n : renderChildren,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [renderChildren, size]\n );\n\n return (\n <Component {...props} ref={forwardedRef}>\n {children}\n </Component>\n );\n }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAEe;AAGvB;AACG;AAAc;AAAY;AAE3B;AAGN;AAEA;AACE;AACF;;"}
|
package/dist/utils/download.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
function download(url, name) {
|
|
4
|
-
const a = document.createElement("a");
|
|
5
|
-
a.href = url;
|
|
6
|
-
a.download = name;
|
|
7
|
-
a.style.display = "none";
|
|
8
|
-
document.body.appendChild(a);
|
|
9
|
-
a.click();
|
|
10
|
-
document.body.removeChild(a);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
exports.download = download;
|
|
14
|
-
//# sourceMappingURL=download.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"download.js","sources":["../../src/utils/download.ts"],"sourcesContent":["export function download(url: string, name: string) {\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = name;\n a.style.display = \"none\";\n\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n}\n"],"names":[],"mappings":";;AAAgB,SAAA,QAAA,CAAS,KAAa,IAAc,EAAA;AAClD,EAAM,MAAA,CAAA,GAAI,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AACpC,EAAA,CAAA,CAAE,IAAO,GAAA,GAAA,CAAA;AACT,EAAA,CAAA,CAAE,QAAW,GAAA,IAAA,CAAA;AACb,EAAA,CAAA,CAAE,MAAM,OAAU,GAAA,MAAA,CAAA;AAElB,EAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA,CAAA;AAC3B,EAAA,CAAA,CAAE,KAAM,EAAA,CAAA;AACR,EAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA,CAAA;AAC7B;;;;"}
|
package/dist/utils/download.mjs
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
function download(url, name) {
|
|
2
|
-
const a = document.createElement("a");
|
|
3
|
-
a.href = url;
|
|
4
|
-
a.download = name;
|
|
5
|
-
a.style.display = "none";
|
|
6
|
-
document.body.appendChild(a);
|
|
7
|
-
a.click();
|
|
8
|
-
document.body.removeChild(a);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export { download };
|
|
12
|
-
//# sourceMappingURL=download.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"download.mjs","sources":["../../src/utils/download.ts"],"sourcesContent":["export function download(url: string, name: string) {\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = name;\n a.style.display = \"none\";\n\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n}\n"],"names":[],"mappings":"AAAgB,SAAA,QAAA,CAAS,KAAa,IAAc,EAAA;AAClD,EAAM,MAAA,CAAA,GAAI,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AACpC,EAAA,CAAA,CAAE,IAAO,GAAA,GAAA,CAAA;AACT,EAAA,CAAA,CAAE,QAAW,GAAA,IAAA,CAAA;AACb,EAAA,CAAA,CAAE,MAAM,OAAU,GAAA,MAAA,CAAA;AAElB,EAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA,CAAA;AAC3B,EAAA,CAAA,CAAE,KAAM,EAAA,CAAA;AACR,EAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA,CAAA;AAC7B;;;;"}
|