@weavy/uikit-react 11.0.1 → 12.1.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/.github/workflows/publish.yml +1 -1
- package/README.md +3 -4
- package/changelog.md +30 -0
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/client/WeavyClient.d.ts +1 -1
- package/dist/cjs/types/components/Image.d.ts +2 -0
- package/dist/cjs/types/components/PdfViewer.d.ts +6 -0
- package/dist/cjs/types/components/Preview.d.ts +58 -0
- package/dist/cjs/types/contexts/MessengerContext.d.ts +1 -2
- package/dist/cjs/types/hooks/useUser.d.ts +2 -1
- package/dist/cjs/types/types/Messenger.d.ts +0 -1
- package/dist/cjs/types/types/types.d.ts +11 -6
- package/dist/cjs/types/utils/fileUtilities.d.ts +16 -1
- package/dist/css/weavy-chat.css +2684 -0
- package/dist/css/weavy-messenger.css +3039 -0
- package/dist/css/weavy.css +3039 -0
- package/dist/esm/index.js +6 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/client/WeavyClient.d.ts +1 -1
- package/dist/esm/types/components/Image.d.ts +2 -0
- package/dist/esm/types/components/PdfViewer.d.ts +6 -0
- package/dist/esm/types/components/Preview.d.ts +58 -0
- package/dist/esm/types/contexts/MessengerContext.d.ts +1 -2
- package/dist/esm/types/hooks/useUser.d.ts +2 -1
- package/dist/esm/types/types/Messenger.d.ts +0 -1
- package/dist/esm/types/types/types.d.ts +11 -6
- package/dist/esm/types/utils/fileUtilities.d.ts +16 -1
- package/dist/index.d.ts +2 -3
- package/package.json +14 -4
- package/rollup.config.js +0 -2
- package/src/client/WeavyClient.ts +3 -3
- package/src/components/Attachment.tsx +5 -6
- package/src/components/Avatar.tsx +2 -3
- package/src/components/Chat.tsx +10 -14
- package/src/components/Conversation.tsx +21 -30
- package/src/components/ConversationBadge.tsx +1 -2
- package/src/components/ConversationForm.tsx +11 -18
- package/src/components/ConversationList.tsx +4 -5
- package/src/components/ConversationListItem.tsx +13 -15
- package/src/components/FileBrowser.tsx +2 -3
- package/src/components/Image.tsx +39 -7
- package/src/components/MeetingCard.tsx +7 -8
- package/src/components/Message.tsx +12 -13
- package/src/components/Messages.tsx +19 -19
- package/src/components/Messenger.tsx +5 -6
- package/src/components/NewConversation.tsx +5 -7
- package/src/components/PdfViewer.tsx +271 -0
- package/src/components/Presence.tsx +2 -2
- package/src/components/Preview.tsx +294 -0
- package/src/components/Reactions.tsx +8 -8
- package/src/components/SearchUsers.tsx +18 -17
- package/src/components/SeenBy.tsx +1 -2
- package/src/components/Typing.tsx +4 -4
- package/src/contexts/MessengerContext.tsx +4 -12
- package/src/contexts/PreviewContext.tsx +4 -6
- package/src/contexts/WeavyContext.tsx +8 -1
- package/src/hooks/useBadge.ts +1 -1
- package/src/hooks/useChat.ts +1 -1
- package/src/hooks/useConversation.ts +1 -2
- package/src/hooks/useConversations.ts +1 -1
- package/src/hooks/useFileUploader.ts +5 -1
- package/src/hooks/useMembers.ts +1 -1
- package/src/hooks/useMessages.ts +1 -1
- package/src/hooks/useMutateChat.ts +1 -1
- package/src/hooks/useMutateConversation.ts +1 -1
- package/src/hooks/useMutateConversationName.ts +1 -1
- package/src/hooks/useMutateDeleteReaction.ts +1 -1
- package/src/hooks/useMutateExternalBlobs.ts +1 -1
- package/src/hooks/useMutateMeeting.ts +1 -1
- package/src/hooks/useMutateMembers.ts +1 -1
- package/src/hooks/useMutateMessage.ts +2 -1
- package/src/hooks/useMutatePinned.ts +1 -1
- package/src/hooks/useMutateReaction.ts +1 -1
- package/src/hooks/useMutateRead.ts +1 -1
- package/src/hooks/useMutateRemoveMembers.ts +1 -1
- package/src/hooks/useMutateTyping.ts +1 -1
- package/src/hooks/usePresence.ts +8 -5
- package/src/hooks/useReactions.ts +0 -1
- package/src/hooks/useSearchUsers.ts +1 -1
- package/src/hooks/useUser.ts +4 -3
- package/src/index.ts +2 -2
- package/src/scss/theme/_alert.scss +73 -0
- package/src/scss/theme/_appbar.scss +112 -0
- package/src/scss/theme/_attachments.scss +74 -0
- package/src/scss/theme/_avatar.scss +54 -0
- package/src/scss/theme/_badge.scss +47 -0
- package/src/scss/theme/_buttons.scss +96 -0
- package/src/scss/theme/_card.scss +7 -0
- package/src/scss/theme/_checkbox.scss +56 -0
- package/src/scss/theme/_cm-editor.scss +42 -0
- package/src/scss/theme/_code.scss +115 -0
- package/src/scss/theme/_colors.scss +520 -0
- package/src/scss/theme/_config.scss +6 -0
- package/src/scss/theme/_content.scss +15 -0
- package/src/scss/theme/_conversations.scss +91 -0
- package/src/scss/theme/_dropdown.scss +86 -0
- package/src/scss/theme/_emoji.scss +5 -0
- package/src/scss/theme/_filebrowser.scss +26 -0
- package/src/scss/theme/_files.scss +140 -0
- package/src/scss/theme/_icons.scss +62 -0
- package/src/scss/theme/_image-grid.scss +63 -0
- package/src/scss/theme/_inputs.scss +28 -0
- package/src/scss/theme/_message-editor.scss +90 -0
- package/src/scss/theme/_messages.scss +238 -0
- package/src/scss/theme/_nav.scss +52 -0
- package/src/scss/theme/_overlays.scss +157 -0
- package/src/scss/theme/_pager.scss +19 -0
- package/src/scss/theme/_palette.scss +165 -0
- package/src/scss/theme/_pane.scss +16 -0
- package/src/scss/theme/_panels.scss +137 -0
- package/src/scss/theme/_picker-list.scss +37 -0
- package/src/scss/theme/_preview-embed.scss +38 -0
- package/src/scss/theme/_preview-html.scss +7 -0
- package/src/scss/theme/_preview-icon.scss +41 -0
- package/src/scss/theme/_preview-image.scss +86 -0
- package/src/scss/theme/_preview-media.scss +28 -0
- package/src/scss/theme/_preview-pdf.scss +838 -0
- package/src/scss/theme/_preview-text.scss +5 -0
- package/src/scss/theme/_preview.scss +105 -0
- package/src/scss/theme/_reactions.scss +58 -0
- package/src/scss/theme/_reboot.scss +41 -0
- package/src/scss/theme/_root.scss +2 -0
- package/src/scss/theme/_scroll.scss +55 -0
- package/src/scss/theme/_search.scss +68 -0
- package/src/scss/theme/_spinner.scss +63 -0
- package/src/scss/theme/_tables.scss +53 -0
- package/src/scss/theme/_toasts.scss +47 -0
- package/src/scss/theme/_turbo.scss +17 -0
- package/src/scss/theme/_typing.scss +26 -0
- package/src/scss/theme/_variables.scss +139 -0
- package/src/scss/theme/bootstrap/_accordion.scss +146 -0
- package/src/scss/theme/bootstrap/_alert.scss +71 -0
- package/src/scss/theme/bootstrap/_badge.scss +38 -0
- package/src/scss/theme/bootstrap/_breadcrumb.scss +40 -0
- package/src/scss/theme/bootstrap/_button-group.scss +142 -0
- package/src/scss/theme/bootstrap/_buttons.scss +186 -0
- package/src/scss/theme/bootstrap/_card.scss +234 -0
- package/src/scss/theme/bootstrap/_carousel.scss +229 -0
- package/src/scss/theme/bootstrap/_close.scss +40 -0
- package/src/scss/theme/bootstrap/_containers.scss +41 -0
- package/src/scss/theme/bootstrap/_dropdown.scss +248 -0
- package/src/scss/theme/bootstrap/_forms.scss +9 -0
- package/src/scss/theme/bootstrap/_functions.scss +302 -0
- package/src/scss/theme/bootstrap/_grid.scss +33 -0
- package/src/scss/theme/bootstrap/_helpers.scss +10 -0
- package/src/scss/theme/bootstrap/_images.scss +42 -0
- package/src/scss/theme/bootstrap/_list-group.scss +191 -0
- package/src/scss/theme/bootstrap/_maps.scss +54 -0
- package/src/scss/theme/bootstrap/_mixins.scss +43 -0
- package/src/scss/theme/bootstrap/_modal.scss +237 -0
- package/src/scss/theme/bootstrap/_nav.scss +172 -0
- package/src/scss/theme/bootstrap/_navbar.scss +276 -0
- package/src/scss/theme/bootstrap/_offcanvas.scss +143 -0
- package/src/scss/theme/bootstrap/_pagination.scss +109 -0
- package/src/scss/theme/bootstrap/_placeholders.scss +51 -0
- package/src/scss/theme/bootstrap/_popover.scss +196 -0
- package/src/scss/theme/bootstrap/_progress.scss +59 -0
- package/src/scss/theme/bootstrap/_reboot.scss +610 -0
- package/src/scss/theme/bootstrap/_root.scss +73 -0
- package/src/scss/theme/bootstrap/_spinners.scss +85 -0
- package/src/scss/theme/bootstrap/_tables.scss +164 -0
- package/src/scss/theme/bootstrap/_toasts.scss +70 -0
- package/src/scss/theme/bootstrap/_tooltip.scss +120 -0
- package/src/scss/theme/bootstrap/_transitions.scss +27 -0
- package/src/scss/theme/bootstrap/_type.scss +106 -0
- package/src/scss/theme/bootstrap/_utilities.scss +647 -0
- package/src/scss/theme/bootstrap/_variables.scss +1633 -0
- package/src/scss/theme/bootstrap/forms/_floating-labels.scss +74 -0
- package/src/scss/theme/bootstrap/forms/_form-check.scss +175 -0
- package/src/scss/theme/bootstrap/forms/_form-control.scss +194 -0
- package/src/scss/theme/bootstrap/forms/_form-range.scss +91 -0
- package/src/scss/theme/bootstrap/forms/_form-select.scss +71 -0
- package/src/scss/theme/bootstrap/forms/_form-text.scss +11 -0
- package/src/scss/theme/bootstrap/forms/_input-group.scss +129 -0
- package/src/scss/theme/bootstrap/forms/_labels.scss +36 -0
- package/src/scss/theme/bootstrap/forms/_validation.scss +12 -0
- package/src/scss/theme/bootstrap/helpers/_clearfix.scss +3 -0
- package/src/scss/theme/bootstrap/helpers/_color-bg.scss +10 -0
- package/src/scss/theme/bootstrap/helpers/_colored-links.scss +12 -0
- package/src/scss/theme/bootstrap/helpers/_position.scss +36 -0
- package/src/scss/theme/bootstrap/helpers/_ratio.scss +26 -0
- package/src/scss/theme/bootstrap/helpers/_stacks.scss +15 -0
- package/src/scss/theme/bootstrap/helpers/_stretched-link.scss +15 -0
- package/src/scss/theme/bootstrap/helpers/_text-truncation.scss +7 -0
- package/src/scss/theme/bootstrap/helpers/_visually-hidden.scss +8 -0
- package/src/scss/theme/bootstrap/helpers/_vr.scss +8 -0
- package/src/scss/theme/bootstrap/mixins/_alert.scss +15 -0
- package/src/scss/theme/bootstrap/mixins/_backdrop.scss +14 -0
- package/src/scss/theme/bootstrap/mixins/_banner.scss +9 -0
- package/src/scss/theme/bootstrap/mixins/_border-radius.scss +78 -0
- package/src/scss/theme/bootstrap/mixins/_box-shadow.scss +18 -0
- package/src/scss/theme/bootstrap/mixins/_breakpoints.scss +127 -0
- package/src/scss/theme/bootstrap/mixins/_buttons.scss +70 -0
- package/src/scss/theme/bootstrap/mixins/_caret.scss +64 -0
- package/src/scss/theme/bootstrap/mixins/_clearfix.scss +9 -0
- package/src/scss/theme/bootstrap/mixins/_color-scheme.scss +7 -0
- package/src/scss/theme/bootstrap/mixins/_container.scss +11 -0
- package/src/scss/theme/bootstrap/mixins/_deprecate.scss +10 -0
- package/src/scss/theme/bootstrap/mixins/_forms.scss +152 -0
- package/src/scss/theme/bootstrap/mixins/_gradients.scss +47 -0
- package/src/scss/theme/bootstrap/mixins/_grid.scss +151 -0
- package/src/scss/theme/bootstrap/mixins/_image.scss +16 -0
- package/src/scss/theme/bootstrap/mixins/_list-group.scss +24 -0
- package/src/scss/theme/bootstrap/mixins/_lists.scss +7 -0
- package/src/scss/theme/bootstrap/mixins/_pagination.scss +10 -0
- package/src/scss/theme/bootstrap/mixins/_reset-text.scss +17 -0
- package/src/scss/theme/bootstrap/mixins/_resize.scss +6 -0
- package/src/scss/theme/bootstrap/mixins/_table-variants.scss +24 -0
- package/src/scss/theme/bootstrap/mixins/_text-truncate.scss +8 -0
- package/src/scss/theme/bootstrap/mixins/_transition.scss +26 -0
- package/src/scss/theme/bootstrap/mixins/_utilities.scss +97 -0
- package/src/scss/theme/bootstrap/mixins/_visually-hidden.scss +29 -0
- package/src/scss/theme/bootstrap/utilities/_api.scss +47 -0
- package/src/scss/theme/bootstrap/vendor/_rfs.scss +354 -0
- package/src/scss/theme/bs/_badge.scss +20 -0
- package/src/scss/theme/bs/_buttons.scss +185 -0
- package/src/scss/theme/bs/_dropdown.scss +86 -0
- package/src/scss/theme/bs/_forms.scss +161 -0
- package/src/scss/theme/bs/_list-group.scss +73 -0
- package/src/scss/theme/bs/_tables.scss +46 -0
- package/src/scss/theme/fonts/_fontmapping-roboto.scss +129 -0
- package/src/scss/theme/fonts/_fontmapping-segoe-ui.scss +127 -0
- package/src/scss/theme/fonts/_index.scss +2 -0
- package/src/scss/theme/mixins/_backdrop.scss +13 -0
- package/src/scss/theme/mixins/_palette.scss +165 -0
- package/src/scss/theme/mixins/_position.scss +33 -0
- package/src/scss/theme/mixins/_scrollbar.scss +110 -0
- package/src/scss/weavy-chat.scss +31 -0
- package/src/scss/weavy-messenger.scss +60 -0
- package/src/scss/weavy.scss +2 -0
- package/src/types/Messenger.ts +1 -1
- package/src/types/types.ts +14 -9
- package/src/ui/Button.tsx +3 -4
- package/src/ui/Dropdown.tsx +4 -5
- package/src/ui/Icon.tsx +75 -39
- package/src/ui/Overlay.tsx +2 -3
- package/src/utils/fileUtilities.ts +280 -72
- package/src/utils/scrollbarDetection.js +48 -0
- package/dist/cjs/types/utils/styles.d.ts +0 -17
- package/dist/esm/types/utils/styles.d.ts +0 -17
- package/src/utils/styles.ts +0 -42
package/src/ui/Icon.tsx
CHANGED
|
@@ -1,6 +1,40 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
mdiArrowLeft,
|
|
4
|
+
mdiArrowRight,
|
|
5
|
+
mdiAttachment,
|
|
6
|
+
mdiBox,
|
|
7
|
+
mdiClose,
|
|
8
|
+
mdiCloseCircle,
|
|
9
|
+
mdiCloud,
|
|
10
|
+
mdiDotsVertical,
|
|
11
|
+
mdiDownload,
|
|
12
|
+
mdiDropbox,
|
|
13
|
+
mdiEmail,
|
|
14
|
+
mdiFile,
|
|
15
|
+
mdiFileCode,
|
|
16
|
+
mdiFileDocument,
|
|
17
|
+
mdiFileExcel,
|
|
18
|
+
mdiFileImage,
|
|
19
|
+
mdiFileMusic,
|
|
20
|
+
mdiFilePowerpoint,
|
|
21
|
+
mdiFileVideo,
|
|
22
|
+
mdiFileWord,
|
|
23
|
+
mdiFitToPage,
|
|
24
|
+
mdiFitToScreen,
|
|
25
|
+
mdiFolderZip,
|
|
26
|
+
mdiGoogleDrive,
|
|
27
|
+
mdiMagnify,
|
|
28
|
+
mdiMicrosoftOnedrive,
|
|
29
|
+
mdiMinus,
|
|
30
|
+
mdiOpenInNew,
|
|
31
|
+
mdiPin,
|
|
32
|
+
mdiPlus,
|
|
33
|
+
mdiPlusCircleOutline,
|
|
34
|
+
mdiSend,
|
|
35
|
+
mdiVideo
|
|
36
|
+
} from "@mdi/js";
|
|
37
|
+
import MdiIcon from '@mdi/react/Icon';
|
|
4
38
|
|
|
5
39
|
type Props = {
|
|
6
40
|
name: string,
|
|
@@ -10,44 +44,46 @@ type Props = {
|
|
|
10
44
|
|
|
11
45
|
// Custom mapping to MDI instead of symbols
|
|
12
46
|
const iconMapping: { [index: string]: string } = {
|
|
13
|
-
"attachment":
|
|
14
|
-
"back":
|
|
15
|
-
"close":
|
|
16
|
-
"close-circle":
|
|
17
|
-
"dots-vertical":
|
|
18
|
-
"download":
|
|
19
|
-
"emoticon-
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
47
|
+
"attachment": mdiAttachment,
|
|
48
|
+
"back": mdiArrowLeft,
|
|
49
|
+
"close": mdiClose,
|
|
50
|
+
"close-circle": mdiCloseCircle,
|
|
51
|
+
"dots-vertical": mdiDotsVertical,
|
|
52
|
+
"download": mdiDownload,
|
|
53
|
+
"emoticon-plus": "M 19 0 L 19 3 L 16 3 L 16 5 L 19 5 L 19 8 L 21 8 L 21 5 L 24 5 L 24 3 L 21 3 L 21 0 L 19 0 z M 12 2 C 6.5 2 2 6.5 2 12 C 2 17.5 6.5 22 12 22 C 17.5 22 22 17.5 22 12 L 20 12 C 20 16.4 16.4 20 12 20 C 7.6 20 4 16.4 4 12 C 4 7.6 7.6 4 12 4 L 12 2 z M 8.5 8 C 7.7 8 7 8.7 7 9.5 C 7 10.3 7.7 11 8.5 11 C 9.3 11 10 10.3 10 9.5 C 10 8.7 9.3 8 8.5 8 z M 15.5 8 C 14.7 8 14 8.7 14 9.5 C 14 10.3 14.7 11 15.5 11 C 16.3 11 17 10.3 17 9.5 C 17 8.7 16.3 8 15.5 8 z M 6.9 14 C 7.7 16 9.7 17.5 12 17.5 C 14.3 17.5 16.3 16 17.1 14 L 6.9 14 z",
|
|
54
|
+
"fit-screen": mdiFitToScreen,
|
|
55
|
+
"fit-width": mdiFitToPage,
|
|
56
|
+
"magnify": mdiMagnify,
|
|
57
|
+
"minus": mdiMinus,
|
|
58
|
+
"next": mdiArrowRight,
|
|
59
|
+
"open-in-new": mdiOpenInNew,
|
|
60
|
+
"pin": mdiPin,
|
|
61
|
+
"plus": mdiPlus,
|
|
62
|
+
"plus-circle-outline": mdiPlusCircleOutline,
|
|
63
|
+
"previous": mdiArrowLeft,
|
|
64
|
+
"send": mdiSend,
|
|
65
|
+
"video": mdiVideo,
|
|
28
66
|
// Files
|
|
29
|
-
"email":
|
|
30
|
-
"file":
|
|
31
|
-
"file-music":
|
|
32
|
-
"file-image":
|
|
33
|
-
"file-video":
|
|
34
|
-
"file-
|
|
35
|
-
"file-
|
|
36
|
-
"file-
|
|
37
|
-
"file-
|
|
38
|
-
"file-
|
|
39
|
-
"file-
|
|
40
|
-
"file-
|
|
41
|
-
"file-
|
|
42
|
-
"file-sheet-box": "M19 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.89 20.1 3 19 3M9 18H6V16H9V18M9 15H6V13H9V15M9 12H6V10H9V12M13 18H10V16H13V18M13 15H10V13H13V15M13 12H10V10H13V12Z",
|
|
43
|
-
"file-compressed": "M14,17H12V15H10V13H12V15H14M14,9H12V11H14V13H12V11H10V9H12V7H10V5H12V7H14M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z",
|
|
67
|
+
"email": mdiEmail,
|
|
68
|
+
"file": mdiFile,
|
|
69
|
+
"file-music": mdiFileMusic,
|
|
70
|
+
"file-image": mdiFileImage,
|
|
71
|
+
"file-video": mdiFileVideo,
|
|
72
|
+
"file-code": mdiFileCode,
|
|
73
|
+
"file-xml": mdiFileCode,
|
|
74
|
+
"file-document": mdiFileDocument,
|
|
75
|
+
"file-word": mdiFileWord,
|
|
76
|
+
"file-excel": mdiFileExcel,
|
|
77
|
+
"file-pdf": mdiFileDocument,
|
|
78
|
+
"file-powerpoint": mdiFilePowerpoint,
|
|
79
|
+
"file-compressed": mdiFolderZip,
|
|
44
80
|
// Providers
|
|
45
|
-
"dropbox":
|
|
46
|
-
"ondedrive":
|
|
47
|
-
"box":
|
|
48
|
-
"google-drive":
|
|
81
|
+
"dropbox": mdiDropbox,
|
|
82
|
+
"ondedrive": mdiMicrosoftOnedrive,
|
|
83
|
+
"box": mdiBox,
|
|
84
|
+
"google-drive": mdiGoogleDrive,
|
|
49
85
|
"zoom": "m12 2c-5.6 0-10 4.5-10 10 0 5.6 4.5 10 10 10 5.5 0 9.9-4.5 9.9-10 .1-5.6-4.4-10-9.9-10zm2.6 13.1c0 .2-.1.3-.3.3h-6.9c-1.1 0-1.9-.8-1.9-1.9v-4.6c0-.2.1-.3.3-.3h6.9c1 0 1.9.8 1.9 1.9zm3.8.1c0 .4-.2.4-.5.2l-2.8-2.1v-2.6l2.8-2.1c.2-.2.5-.1.5.2z",
|
|
50
|
-
"cloud":
|
|
86
|
+
"cloud": mdiCloud
|
|
51
87
|
}
|
|
52
88
|
|
|
53
89
|
|
|
@@ -67,9 +103,9 @@ const Icon = ({ name, color = "", size, ...props }: Props) => {
|
|
|
67
103
|
let overlayPath = getIconOverlay(name);
|
|
68
104
|
|
|
69
105
|
return (
|
|
70
|
-
<span className={wy
|
|
106
|
+
<span className={'wy-icon ' + color} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
|
|
71
107
|
{iconPath ? <MdiIcon.Icon color={color} path={iconPath} size={size} /> : name }
|
|
72
|
-
{overlayPath && <MdiIcon.Icon color={color} path={overlayPath} className=
|
|
108
|
+
{overlayPath && <MdiIcon.Icon color={color} path={overlayPath} className="wy-icon-overlay" size={(size || 1) / 2} /> }
|
|
73
109
|
</span>
|
|
74
110
|
);
|
|
75
111
|
}
|
package/src/ui/Overlay.tsx
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import Modal, { Styles } from 'react-modal';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import { prefix as wy } from "../utils/styles";
|
|
5
4
|
|
|
6
5
|
type OverlayProps = {
|
|
7
6
|
children: React.ReactNode,
|
|
@@ -26,8 +25,8 @@ const customStyles = {
|
|
|
26
25
|
ariaHideApp={false}
|
|
27
26
|
onAfterOpen={() => { setModalShowing(true)} }
|
|
28
27
|
onRequestClose={() => { setModalShowing(false)}}
|
|
29
|
-
className={classNames(wy
|
|
30
|
-
overlayClassName=
|
|
28
|
+
className={classNames("wy-panel wy-overlay wy-transition", className, {"wy-open": modalShowing})}
|
|
29
|
+
overlayClassName="wy-overlays wy-viewport"
|
|
31
30
|
contentLabel="Example Modal"
|
|
32
31
|
style={style}
|
|
33
32
|
>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { isConstructorDeclaration } from "typescript";
|
|
2
|
+
|
|
1
3
|
export const fileSizeAsString = (size: number) => {
|
|
2
4
|
var s = size;
|
|
3
5
|
var format = [" B", " KB", " MB", " GB", " TB", " PB", " EB", " ZB", " YB"];
|
|
@@ -9,7 +11,11 @@ export const fileSizeAsString = (size: number) => {
|
|
|
9
11
|
return s.toLocaleString() + format[i];
|
|
10
12
|
}
|
|
11
13
|
|
|
12
|
-
|
|
14
|
+
export function getExtension (name: string) {
|
|
15
|
+
return name.substring(name.lastIndexOf('.') , name.length) || name;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export function isAudio (ext: string) {
|
|
13
19
|
switch (ext) {
|
|
14
20
|
case ".aac":
|
|
15
21
|
case ".aif":
|
|
@@ -35,7 +41,7 @@ const isAudio = (ext: string) => {
|
|
|
35
41
|
}
|
|
36
42
|
}
|
|
37
43
|
|
|
38
|
-
|
|
44
|
+
export function isImage (ext: string) {
|
|
39
45
|
switch (ext) {
|
|
40
46
|
case ".ai":
|
|
41
47
|
case ".apng":
|
|
@@ -60,7 +66,54 @@ const isImage = (ext: string) => {
|
|
|
60
66
|
}
|
|
61
67
|
}
|
|
62
68
|
|
|
63
|
-
|
|
69
|
+
export function isWebImage (path: string) {
|
|
70
|
+
// see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
|
|
71
|
+
var ext = getExtension(path);
|
|
72
|
+
switch (ext) {
|
|
73
|
+
case ".apng":
|
|
74
|
+
case ".bmp":
|
|
75
|
+
case ".gif":
|
|
76
|
+
case ".ico":
|
|
77
|
+
case ".jpg":
|
|
78
|
+
case ".jpeg":
|
|
79
|
+
case ".png":
|
|
80
|
+
case ".svg":
|
|
81
|
+
case ".webp":
|
|
82
|
+
return true;
|
|
83
|
+
default:
|
|
84
|
+
return false;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export function isBitmap(path: string) {
|
|
89
|
+
var ext = getExtension(path);
|
|
90
|
+
switch (ext) {
|
|
91
|
+
case ".bmp":
|
|
92
|
+
case ".gif":
|
|
93
|
+
case ".ico":
|
|
94
|
+
case ".jpg":
|
|
95
|
+
case ".jpeg":
|
|
96
|
+
case ".png":
|
|
97
|
+
case ".tif":
|
|
98
|
+
case ".tiff":
|
|
99
|
+
return true;
|
|
100
|
+
default:
|
|
101
|
+
return false;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export function isMetaFile(path: string) {
|
|
106
|
+
var ext = getExtension(path);
|
|
107
|
+
switch (ext) {
|
|
108
|
+
case ".emf":
|
|
109
|
+
case ".wmf":
|
|
110
|
+
return true;
|
|
111
|
+
default:
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
export function isVideo (ext: string) {
|
|
64
117
|
switch (ext) {
|
|
65
118
|
case ".3g2":
|
|
66
119
|
case ".asx":
|
|
@@ -91,7 +144,7 @@ const isVideo = (ext: string) => {
|
|
|
91
144
|
}
|
|
92
145
|
}
|
|
93
146
|
|
|
94
|
-
|
|
147
|
+
export function isMarkup (ext: string) {
|
|
95
148
|
switch (ext) {
|
|
96
149
|
case ".htm":
|
|
97
150
|
case ".html":
|
|
@@ -103,91 +156,219 @@ const isMarkup = (ext: string) => {
|
|
|
103
156
|
}
|
|
104
157
|
}
|
|
105
158
|
|
|
106
|
-
|
|
159
|
+
export function isCode (ext: string) {
|
|
160
|
+
if (isMarkup(ext)) {
|
|
161
|
+
return true;
|
|
162
|
+
}
|
|
107
163
|
switch (ext) {
|
|
108
164
|
case ".as":
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
case ".xsd":
|
|
169
|
-
case ".xsl":
|
|
170
|
-
case ".yaml":
|
|
171
|
-
case ".yml":
|
|
165
|
+
case ".as3":
|
|
166
|
+
case ".asm":
|
|
167
|
+
case ".aspx":
|
|
168
|
+
case ".bat":
|
|
169
|
+
case ".c":
|
|
170
|
+
case ".cc":
|
|
171
|
+
case ".cmake":
|
|
172
|
+
case ".coffee":
|
|
173
|
+
case ".cpp":
|
|
174
|
+
case ".cs":
|
|
175
|
+
case ".css":
|
|
176
|
+
case ".cxx":
|
|
177
|
+
case ".diff":
|
|
178
|
+
case ".erb":
|
|
179
|
+
case ".erl":
|
|
180
|
+
case ".groovy":
|
|
181
|
+
case ".gvy":
|
|
182
|
+
case ".h":
|
|
183
|
+
case ".haml":
|
|
184
|
+
case ".hh":
|
|
185
|
+
case ".hpp":
|
|
186
|
+
case ".hxx":
|
|
187
|
+
case ".java":
|
|
188
|
+
case ".js":
|
|
189
|
+
case ".json":
|
|
190
|
+
case ".jsx":
|
|
191
|
+
case ".less":
|
|
192
|
+
case ".lst":
|
|
193
|
+
case ".m":
|
|
194
|
+
case ".make":
|
|
195
|
+
case ".markdown":
|
|
196
|
+
case ".md":
|
|
197
|
+
case ".mdown":
|
|
198
|
+
case ".mkdn":
|
|
199
|
+
case ".ml":
|
|
200
|
+
case ".mm":
|
|
201
|
+
case ".out":
|
|
202
|
+
case ".patch":
|
|
203
|
+
case ".php":
|
|
204
|
+
case ".pl":
|
|
205
|
+
case ".plist":
|
|
206
|
+
case ".properties":
|
|
207
|
+
case ".py":
|
|
208
|
+
case ".rb":
|
|
209
|
+
case ".sass":
|
|
210
|
+
case ".scala":
|
|
211
|
+
case ".scm":
|
|
212
|
+
case ".script":
|
|
213
|
+
case ".scss":
|
|
214
|
+
case ".sh":
|
|
215
|
+
case ".sml":
|
|
216
|
+
case ".sql":
|
|
217
|
+
case ".vb":
|
|
218
|
+
case ".vi":
|
|
219
|
+
case ".vim":
|
|
220
|
+
case ".xsd":
|
|
221
|
+
case ".xsl":
|
|
222
|
+
case ".yaml":
|
|
223
|
+
case ".yml":
|
|
172
224
|
return true;
|
|
173
225
|
default:
|
|
174
226
|
return false;
|
|
175
227
|
}
|
|
176
228
|
}
|
|
177
229
|
|
|
178
|
-
export
|
|
179
|
-
|
|
230
|
+
export function isText (ext: string) {
|
|
231
|
+
if (isCode(ext)) {
|
|
232
|
+
return true;
|
|
233
|
+
}
|
|
234
|
+
switch (ext) {
|
|
235
|
+
case ".txt":
|
|
236
|
+
return true;
|
|
237
|
+
default:
|
|
238
|
+
return false;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
}
|
|
242
|
+
export function isOfficeDocument(path: string) {
|
|
243
|
+
var ext = getExtension(path);
|
|
244
|
+
switch (ext) {
|
|
245
|
+
case ".doc":
|
|
246
|
+
case ".docm":
|
|
247
|
+
case ".docx":
|
|
248
|
+
case ".dotm":
|
|
249
|
+
case ".dotx":
|
|
250
|
+
case ".ppt":
|
|
251
|
+
case ".pptm":
|
|
252
|
+
case ".pptx":
|
|
253
|
+
case ".potx":
|
|
254
|
+
case ".xls":
|
|
255
|
+
case ".xlsm":
|
|
256
|
+
case ".xlsx":
|
|
257
|
+
case ".xltx":
|
|
258
|
+
return true;
|
|
259
|
+
default:
|
|
260
|
+
return false;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
export function canResize(path:string) {
|
|
265
|
+
return isBitmap(path) || isMetaFile(path);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
export function canConvertToImage (filename: string) {
|
|
269
|
+
var ext = getExtension(filename);
|
|
270
|
+
if (canResize(ext) || isText(ext)) {
|
|
271
|
+
return true;
|
|
272
|
+
}
|
|
273
|
+
switch (ext) {
|
|
274
|
+
case ".ai":
|
|
275
|
+
case ".csv":
|
|
276
|
+
case ".doc":
|
|
277
|
+
case ".docm":
|
|
278
|
+
case ".docx":
|
|
279
|
+
case ".dot":
|
|
280
|
+
case ".dotm":
|
|
281
|
+
case ".dotx":
|
|
282
|
+
case ".eml":
|
|
283
|
+
case ".eps":
|
|
284
|
+
case ".msg":
|
|
285
|
+
case ".odp":
|
|
286
|
+
case ".ods":
|
|
287
|
+
case ".odt":
|
|
288
|
+
case ".ott":
|
|
289
|
+
case ".pdf":
|
|
290
|
+
case ".potm":
|
|
291
|
+
case ".potx":
|
|
292
|
+
case ".ppt":
|
|
293
|
+
case ".pptx":
|
|
294
|
+
case ".pps":
|
|
295
|
+
case ".ppsx":
|
|
296
|
+
case ".pptm":
|
|
297
|
+
case ".ppsm":
|
|
298
|
+
case ".psd":
|
|
299
|
+
case ".rtf":
|
|
300
|
+
case ".svg":
|
|
301
|
+
case ".xls":
|
|
302
|
+
case ".xlsb":
|
|
303
|
+
case ".xlsm":
|
|
304
|
+
case ".xlsx":
|
|
305
|
+
case ".xltm":
|
|
306
|
+
case ".xltx":
|
|
307
|
+
case ".webp":
|
|
308
|
+
return true;
|
|
309
|
+
default:
|
|
310
|
+
return false;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
export function canConvertToPdf (filename: string) {
|
|
315
|
+
var ext = getExtension(filename);
|
|
316
|
+
switch (ext) {
|
|
317
|
+
case ".ai":
|
|
318
|
+
case ".doc":
|
|
319
|
+
case ".docm":
|
|
320
|
+
case ".docx":
|
|
321
|
+
case ".dot":
|
|
322
|
+
case ".dotm":
|
|
323
|
+
case ".dotx":
|
|
324
|
+
case ".eml":
|
|
325
|
+
case ".html":
|
|
326
|
+
case ".mhtml":
|
|
327
|
+
case ".msg":
|
|
328
|
+
case ".odt":
|
|
329
|
+
case ".ott":
|
|
330
|
+
case ".pdf":
|
|
331
|
+
case ".rtf":
|
|
332
|
+
case ".txt":
|
|
333
|
+
case ".xml":
|
|
334
|
+
case ".xls":
|
|
335
|
+
case ".xlsb":
|
|
336
|
+
case ".xlsm":
|
|
337
|
+
case ".xlsx":
|
|
338
|
+
case ".xltm":
|
|
339
|
+
case ".xltx":
|
|
340
|
+
case ".ods":
|
|
341
|
+
case ".csv":
|
|
342
|
+
case ".ppt":
|
|
343
|
+
case ".pptx":
|
|
344
|
+
case ".pps":
|
|
345
|
+
case ".ppsx":
|
|
346
|
+
case ".pptm":
|
|
347
|
+
case ".ppsm":
|
|
348
|
+
case ".potx":
|
|
349
|
+
case ".potm":
|
|
350
|
+
case ".odp":
|
|
351
|
+
return true;
|
|
352
|
+
default:
|
|
353
|
+
return false;
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
export function getIcon (name: string, mediaType?: string): { icon: string, color?: string } {
|
|
358
|
+
var ext = getExtension(name);
|
|
180
359
|
|
|
181
360
|
if (ext === "") return { icon: "file" };
|
|
182
361
|
|
|
183
362
|
if (isAudio(ext)) {
|
|
184
|
-
return { icon: "file", color: "indigo" };
|
|
363
|
+
return { icon: "file-music", color: "indigo" };
|
|
185
364
|
} else if (isImage(ext)) {
|
|
186
365
|
return { icon: "file-image", color: "cyan" };
|
|
187
366
|
} else if (isVideo(ext)) {
|
|
188
|
-
return { icon: "file-
|
|
367
|
+
return { icon: "file-video", color: "pink" };
|
|
189
368
|
} else if (isMarkup(ext)) {
|
|
190
369
|
return { icon: "file-xml", color: "purple" };
|
|
370
|
+
} else if (isCode(ext)) {
|
|
371
|
+
return { icon: "file-code", color: "purple" };
|
|
191
372
|
} else if (isText(ext)) {
|
|
192
373
|
return { icon: "file-document" };
|
|
193
374
|
} else{
|
|
@@ -227,4 +408,31 @@ export const getIcon = (name: string, mediaType?: string): { icon: string, color
|
|
|
227
408
|
|
|
228
409
|
// fallback
|
|
229
410
|
return { icon: "file" };
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
export function getPreviewFormat(filename:string): PreviewFormatType {
|
|
414
|
+
var ext = getExtension(filename);
|
|
415
|
+
if (isCode(ext)) {
|
|
416
|
+
//return "code";
|
|
417
|
+
}
|
|
418
|
+
if (isText(ext)) {
|
|
419
|
+
return "text";
|
|
420
|
+
}
|
|
421
|
+
if (isWebImage(ext)) {
|
|
422
|
+
return "image";
|
|
423
|
+
}
|
|
424
|
+
if (isVideo(ext)) {
|
|
425
|
+
return "video";
|
|
426
|
+
}
|
|
427
|
+
if (isAudio(ext)) {
|
|
428
|
+
return "audio";
|
|
429
|
+
}
|
|
430
|
+
if (canConvertToPdf(ext)) {
|
|
431
|
+
return "document";
|
|
432
|
+
}
|
|
433
|
+
if (canConvertToImage(ext)) {
|
|
434
|
+
return "image";
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
return "none";
|
|
230
438
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// SCROLLBAR DETECTION
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The target which the scrollbar classname will be applied to.
|
|
5
|
+
* @type Element
|
|
6
|
+
*/
|
|
7
|
+
export var scrollbarClassnameTarget = document.documentElement;
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* The callback function for the scrollbar observer.
|
|
11
|
+
* @param {ResizeObserverTarget[]} entries
|
|
12
|
+
*/
|
|
13
|
+
export function checkScrollbar(entries) {
|
|
14
|
+
var element, overflowWidth;
|
|
15
|
+
for (var entry in entries) {
|
|
16
|
+
element = entries[entry].target;
|
|
17
|
+
try {
|
|
18
|
+
overflowWidth = element === document.documentElement ? window.innerWidth : element.clientWidth;
|
|
19
|
+
if (overflowWidth !== element.offsetWidth) {
|
|
20
|
+
// we have visible scrollbars, add .scrollbar to html element
|
|
21
|
+
scrollbarClassnameTarget.classList.add("wy-scrollbars");
|
|
22
|
+
} else {
|
|
23
|
+
scrollbarClassnameTarget.classList.remove("wy-scrollbars");
|
|
24
|
+
}
|
|
25
|
+
} catch (e) {
|
|
26
|
+
console.warn("scrollbar detection failed", e);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Creates a scrollbar detection element and starts observing it.
|
|
33
|
+
*/
|
|
34
|
+
export default function observeScrollbars() {
|
|
35
|
+
// insert scrollbar detection element
|
|
36
|
+
var scrollCheck = document.getElementById("wy-scrollbar-detection");
|
|
37
|
+
|
|
38
|
+
if (!scrollCheck) {
|
|
39
|
+
scrollCheck = document.createElement("aside");
|
|
40
|
+
scrollCheck.id = "wy-scrollbar-detection";
|
|
41
|
+
scrollCheck.className = "wy-scrollbar-detection";
|
|
42
|
+
document.documentElement.insertBefore(scrollCheck, document.body);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
var scrollObserver = new ResizeObserver(checkScrollbar);
|
|
46
|
+
scrollObserver.observe(scrollCheck);
|
|
47
|
+
}
|
|
48
|
+
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Sets the prefix for CSS classes on the HTML element for usage in javascript.
|
|
3
|
-
* @param {string} prefix
|
|
4
|
-
*/
|
|
5
|
-
export declare function setPrefix(prefix: string): void;
|
|
6
|
-
/**
|
|
7
|
-
* Prefixes one or more classnames (with or without dot) using the themePrefix
|
|
8
|
-
* @param {...string} strs
|
|
9
|
-
* @returns string[]
|
|
10
|
-
*/
|
|
11
|
-
export declare function prefixes(...strs: string[]): string[];
|
|
12
|
-
/**
|
|
13
|
-
* Prefixes one classname (with or without dot) using the themePrefix
|
|
14
|
-
* @param {string} str
|
|
15
|
-
* @returns string
|
|
16
|
-
*/
|
|
17
|
-
export declare function prefix(str: string): string;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Sets the prefix for CSS classes on the HTML element for usage in javascript.
|
|
3
|
-
* @param {string} prefix
|
|
4
|
-
*/
|
|
5
|
-
export declare function setPrefix(prefix: string): void;
|
|
6
|
-
/**
|
|
7
|
-
* Prefixes one or more classnames (with or without dot) using the themePrefix
|
|
8
|
-
* @param {...string} strs
|
|
9
|
-
* @returns string[]
|
|
10
|
-
*/
|
|
11
|
-
export declare function prefixes(...strs: string[]): string[];
|
|
12
|
-
/**
|
|
13
|
-
* Prefixes one classname (with or without dot) using the themePrefix
|
|
14
|
-
* @param {string} str
|
|
15
|
-
* @returns string
|
|
16
|
-
*/
|
|
17
|
-
export declare function prefix(str: string): string;
|