@weavy/uikit-react 11.1.0 → 13.0.0

package/src/ui/Icon.tsx

@@ -1,6 +1,40 @@
 import React from "react";
-const MdiIcon = require('@mdi/react/Icon')
-import { prefix as wy } from "../utils/styles";
+import { 
+    mdiArrowLeft, 
+    mdiArrowRight, 
+    mdiAttachment, 
+    mdiBox, 
+    mdiClose, 
+    mdiCloseCircle, 
+    mdiCloud, 
+    mdiDotsVertical, 
+    mdiDownload, 
+    mdiDropbox, 
+    mdiEmail, 
+    mdiFile, 
+    mdiFileCode, 
+    mdiFileDocument, 
+    mdiFileExcel, 
+    mdiFileImage, 
+    mdiFileMusic, 
+    mdiFilePowerpoint, 
+    mdiFileVideo, 
+    mdiFileWord, 
+    mdiFitToPage, 
+    mdiFitToScreen, 
+    mdiFolderZip, 
+    mdiGoogleDrive, 
+    mdiMagnify, 
+    mdiMicrosoftOnedrive, 
+    mdiMinus, 
+    mdiOpenInNew, 
+    mdiPin, 
+    mdiPlus, 
+    mdiPlusCircleOutline, 
+    mdiSend, 
+    mdiVideo 
+} from "@mdi/js";
+import MdiIcon from '@mdi/react/Icon';
 
 type Props = {
     name: string,
@@ -10,44 +44,46 @@ type Props = {
 
 // Custom mapping to MDI instead of symbols
 const iconMapping: { [index: string]: string } = {
-    "attachment": "M7.5,18A5.5,5.5 0 0,1 2,12.5A5.5,5.5 0 0,1 7.5,7H18A4,4 0 0,1 22,11A4,4 0 0,1 18,15H9.5A2.5,2.5 0 0,1 7,12.5A2.5,2.5 0 0,1 9.5,10H17V11.5H9.5A1,1 0 0,0 8.5,12.5A1,1 0 0,0 9.5,13.5H18A2.5,2.5 0 0,0 20.5,11A2.5,2.5 0 0,0 18,8.5H7.5A4,4 0 0,0 3.5,12.5A4,4 0 0,0 7.5,16.5H17V18H7.5Z",
-    "back": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z",
-    "close": "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",
-    "close-circle": "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z",
-    "dots-vertical": "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z",
-    "download": "M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z",
-    "emoticon-outline": "M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
-    "magnify": "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z",
-    "next": "M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z",
-    "pin": "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z",
-    "plus": "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z",
-    "plus-circle-outline": "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z",
-    "previous": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z",
-    "send": "M2,21L23,12L2,3V10L17,12L2,14V21Z",
-    "video": "M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z",
+    "attachment": mdiAttachment,
+    "back": mdiArrowLeft,
+    "close": mdiClose,
+    "close-circle": mdiCloseCircle,
+    "dots-vertical": mdiDotsVertical,
+    "download": mdiDownload,
+    "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",
+    "fit-screen": mdiFitToScreen,
+    "fit-width": mdiFitToPage,
+    "magnify": mdiMagnify,
+    "minus": mdiMinus,
+    "next": mdiArrowRight,
+    "open-in-new": mdiOpenInNew,
+    "pin": mdiPin,
+    "plus": mdiPlus,
+    "plus-circle-outline": mdiPlusCircleOutline,
+    "previous": mdiArrowLeft,
+    "send": mdiSend,
+    "video": mdiVideo,
     // Files
-    "email": "M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z",
-    "file": "M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z",
-    "file-music": "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M13,13H11V18A2,2 0 0,1 9,20A2,2 0 0,1 7,18A2,2 0 0,1 9,16C9.4,16 9.7,16.1 10,16.3V11H13V13M13,9V3.5L18.5,9H13Z",
-    "file-image": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z",
-    "file-video": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M17,19V13L14,15.2V13H7V19H14V16.8L17,19Z",
-    "file-xml": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6.12,15.5L9.86,19.24L11.28,17.83L8.95,15.5L11.28,13.17L9.86,11.76L6.12,15.5M17.28,15.5L13.54,11.76L12.12,13.17L14.45,15.5L12.12,17.83L13.54,19.24L17.28,15.5Z",
-    "file-document": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z",
-    "file-word": "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M15.2,20H13.8L12,13.2L10.2,20H8.8L6.6,11H8.1L9.5,17.8L11.3,11H12.6L14.4,17.8L15.8,11H17.3L15.2,20M13,9V3.5L18.5,9H13Z",
-    "file-excel": "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M15.8,20H14L12,16.6L10,20H8.2L11.1,15.5L8.2,11H10L12,14.4L14,11H15.8L12.9,15.5L15.8,20M13,9V3.5L18.5,9H13Z",
-    "file-pdf": "M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z",
-    "file-powerpoint": "M12.6,12.3H10.6V15.5H12.7C13.3,15.5 13.6,15.3 13.9,15C14.2,14.7 14.3,14.4 14.3,13.9C14.3,13.4 14.2,13.1 13.9,12.8C13.6,12.5 13.2,12.3 12.6,12.3M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M15.2,16C14.6,16.5 14.1,16.7 12.8,16.7H10.6V20H9V11H12.8C14.1,11 14.7,11.3 15.2,11.8C15.8,12.4 16,13 16,13.9C16,14.8 15.8,15.5 15.2,16M13,9V3.5L18.5,9H13Z",
-    "file-document-box": "M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,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",
-    "file-slide-box": "M19,16H5V8H19M19,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",
-    "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",
-    "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",
+    "email": mdiEmail,
+    "file": mdiFile,
+    "file-music": mdiFileMusic,
+    "file-image": mdiFileImage,
+    "file-video": mdiFileVideo,
+    "file-code": mdiFileCode,
+    "file-xml": mdiFileCode,
+    "file-document": mdiFileDocument,
+    "file-word": mdiFileWord,
+    "file-excel": mdiFileExcel,
+    "file-pdf": mdiFileDocument,
+    "file-powerpoint": mdiFilePowerpoint,
+    "file-compressed": mdiFolderZip,
     // Providers
-    "dropbox": "M3 6.2L8 9.39L13 6.2L8 3L3 6.2M13 6.2L18 9.39L23 6.2L18 3L13 6.2M3 12.55L8 15.74L13 12.55L8 9.35L3 12.55M18 9.35L13 12.55L18 15.74L23 12.55L18 9.35M8.03 16.8L13.04 20L18.04 16.8L13.04 13.61L8.03 16.8Z",
-    "ondedrive": "M18.21 10.29Q19 10.34 19.7 10.68 20.39 11 20.9 11.57 21.41 12.12 21.71 12.83 22 13.54 22 14.34 22 15.18 21.68 15.92 21.36 16.66 20.8 17.21 20.25 17.76 19.5 18.08 18.78 18.41 17.94 18.41H7Q5.97 18.41 5.06 18 4.15 17.61 3.47 16.94 2.79 16.26 2.4 15.35 2 14.44 2 13.41 2 12.59 2.26 11.83 2.5 11.08 3 10.45 3.44 9.82 4.08 9.35 4.72 8.88 5.5 8.63 5.87 8.5 6.21 8.5 6.56 8.43 6.93 8.41H6.94Q7.37 7.75 7.95 7.23 8.5 6.71 9.2 6.34 9.87 6 10.62 5.78 11.37 5.59 12.16 5.59 13.22 5.59 14.2 5.94 15.18 6.29 16 6.91 16.8 7.53 17.37 8.39 17.95 9.26 18.21 10.29M12.16 6.84Q11.05 6.84 10.06 7.3 9.06 7.75 8.36 8.6 8.73 8.7 9.07 8.85 9.4 9 9.73 9.2L13.71 11.58L16 10.62Q16.21 10.53 16.44 10.45 16.67 10.38 16.92 10.33 16.68 9.55 16.21 8.91 15.74 8.27 15.11 7.81 14.5 7.35 13.73 7.1 13 6.84 12.16 6.84M4 15.66L12.27 12.18L9.08 10.26Q8.59 9.97 8.06 9.81 7.5 9.66 6.95 9.66 6.19 9.66 5.5 9.96 4.84 10.26 4.34 10.77 3.84 11.29 3.54 11.97 3.25 12.65 3.25 13.41 3.25 14 3.45 14.59 3.64 15.19 4 15.66M17.94 17.16Q18.41 17.16 18.84 17 19.27 16.86 19.64 16.58L13.61 13L5.03 16.59Q5.47 16.86 5.97 17 6.47 17.16 7 17.16M20.45 15.61Q20.75 15 20.75 14.34 20.75 13.7 20.5 13.17 20.26 12.65 19.85 12.28 19.43 11.91 18.88 11.71 18.32 11.5 17.7 11.5 17.35 11.5 17 11.6 16.66 11.68 16.33 11.81 16 11.93 15.67 12.08 15.35 12.23 15.04 12.37Z",
-    "box": "M15.39,14.04V14.04C15.39,12.62 14.24,11.47 12.82,11.47C11.41,11.47 10.26,12.62 10.26,14.04V14.04C10.26,15.45 11.41,16.6 12.82,16.6C14.24,16.6 15.39,15.45 15.39,14.04M17.1,14.04C17.1,16.4 15.18,18.31 12.82,18.31C11.19,18.31 9.77,17.39 9.05,16.04C8.33,17.39 6.91,18.31 5.28,18.31C2.94,18.31 1.04,16.43 1,14.11V14.11H1V7H1V7C1,6.56 1.39,6.18 1.86,6.18C2.33,6.18 2.7,6.56 2.71,7V7H2.71V10.62C3.43,10.08 4.32,9.76 5.28,9.76C6.91,9.76 8.33,10.68 9.05,12.03C9.77,10.68 11.19,9.76 12.82,9.76C15.18,9.76 17.1,11.68 17.1,14.04V14.04M7.84,14.04V14.04C7.84,12.62 6.69,11.47 5.28,11.47C3.86,11.47 2.71,12.62 2.71,14.04V14.04C2.71,15.45 3.86,16.6 5.28,16.6C6.69,16.6 7.84,15.45 7.84,14.04M22.84,16.96V16.96C22.95,17.12 23,17.3 23,17.47C23,17.73 22.88,18 22.66,18.15C22.5,18.26 22.33,18.32 22.15,18.32C21.9,18.32 21.65,18.21 21.5,18L19.59,15.47L17.7,18V18C17.53,18.21 17.28,18.32 17.03,18.32C16.85,18.32 16.67,18.26 16.5,18.15C16.29,18 16.17,17.72 16.17,17.46C16.17,17.29 16.23,17.11 16.33,16.96V16.96H16.33V16.96L18.5,14.04L16.33,11.11V11.11H16.33V11.11C16.22,10.96 16.17,10.79 16.17,10.61C16.17,10.35 16.29,10.1 16.5,9.93C16.89,9.65 17.41,9.72 17.7,10.09V10.09L19.59,12.61L21.5,10.09C21.76,9.72 22.29,9.65 22.66,9.93C22.89,10.1 23,10.36 23,10.63C23,10.8 22.95,10.97 22.84,11.11V11.11H22.84V11.11L20.66,14.04L22.84,16.96V16.96H22.84Z",
-    "google-drive": "M7.71,3.5L1.15,15L4.58,21L11.13,9.5M9.73,15L6.3,21H19.42L22.85,15M22.28,14L15.42,2H8.58L8.57,2L15.43,14H22.28Z",
+    "dropbox": mdiDropbox,
+    "ondedrive": mdiMicrosoftOnedrive,
+    "box": mdiBox,
+    "google-drive": mdiGoogleDrive,
     "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",
-    "cloud": "M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z"
+    "cloud": mdiCloud
 }
 
 
@@ -67,9 +103,9 @@ const Icon = ({ name, color = "", size, ...props }: Props) => {
     let overlayPath = getIconOverlay(name);
 
     return (
-        <span className={wy('icon ' + color)} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
+        <span className={'wy-icon ' + color} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
             {iconPath ? <MdiIcon.Icon color={color} path={iconPath} size={size} /> : name }
-            {overlayPath && <MdiIcon.Icon color={color} path={overlayPath} className={wy('icon-overlay')} size={(size || 1) / 2} /> }
+            {overlayPath && <MdiIcon.Icon color={color} path={overlayPath} className="wy-icon-overlay" size={(size || 1) / 2} /> }
         </span>
     );
 }

package/src/ui/Overlay.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import Modal, { Styles } from 'react-modal';
 import classNames from 'classnames';
-import { prefix as wy } from "../utils/styles";
 
 type OverlayProps = {
     children: React.ReactNode,
@@ -26,8 +25,8 @@ const customStyles = {
             ariaHideApp={false}
             onAfterOpen={() => { setModalShowing(true)} }
             onRequestClose={() => { setModalShowing(false)}}
-            className={classNames(wy("panel overlay transition"), className, {[wy("open")]: modalShowing})}
-            overlayClassName={wy('overlays viewport')}
+            className={classNames("wy-panel wy-overlay wy-transition", className, {"wy-open": modalShowing})}
+            overlayClassName="wy-overlays wy-viewport"
             contentLabel="Example Modal"
             style={style}
         >

package/src/ui/Spinner.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type SpinnerProps = {
+    size?: number,
+    spin?: boolean,
+}
+  
+const SpinnerImpl = ({ spin = true, size = 24 }: SpinnerProps) => {
+ 
+    return (
+      <svg className={classNames("wy-spinner", {"wy-spin" : spin })} width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2" /></svg>
+    )
+}
+
+// Export as replacable UI component
+const UISpinner = { UI: SpinnerImpl };
+export default UISpinner;

package/src/utils/fileUtilities.ts

@@ -1,3 +1,5 @@
+import { isConstructorDeclaration } from "typescript";
+
 export const fileSizeAsString = (size: number) => {
     var s = size;
     var format = [" B", " KB", " MB", " GB", " TB", " PB", " EB", " ZB", " YB"];
@@ -9,7 +11,11 @@ export const fileSizeAsString = (size: number) => {
     return s.toLocaleString() + format[i];
 }
 
-const isAudio = (ext: string) => {
+export function getExtension (name: string) {
+    return name.substring(name.lastIndexOf('.') , name.length) || name;
+}
+
+export function isAudio (ext: string) {
     switch (ext) {
         case ".aac":
         case ".aif":
@@ -35,7 +41,7 @@ const isAudio = (ext: string) => {
     }
 }
 
-const isImage = (ext: string) => {
+export function isImage (ext: string) {
     switch (ext) {
         case ".ai":
         case ".apng":
@@ -60,7 +66,54 @@ const isImage = (ext: string) => {
     }
 }
 
-const isVideo = (ext: string) => {
+export function isWebImage (path: string) {
+    // see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+    var ext = getExtension(path);
+    switch (ext) {
+        case ".apng":
+        case ".bmp":
+        case ".gif":
+        case ".ico":
+        case ".jpg":
+        case ".jpeg":
+        case ".png":
+        case ".svg":
+        case ".webp":
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isBitmap(path: string) {
+    var ext = getExtension(path);
+    switch (ext) {
+        case ".bmp":
+        case ".gif":
+        case ".ico":
+        case ".jpg":
+        case ".jpeg":
+        case ".png":
+        case ".tif":
+        case ".tiff":
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isMetaFile(path: string) {
+    var ext = getExtension(path);
+    switch (ext) {
+        case ".emf":
+        case ".wmf":
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isVideo (ext: string) {
     switch (ext) {
         case ".3g2":
         case ".asx":
@@ -91,7 +144,17 @@ const isVideo = (ext: string) => {
     }
 }
 
-const isMarkup = (ext: string) => {
+export function isMarkdown (ext: string) {
+    switch (ext) {
+        case ".markdown":
+        case ".md":
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isMarkup (ext: string) {
     switch (ext) {
         case ".htm":
         case ".html":
@@ -103,91 +166,122 @@ const isMarkup = (ext: string) => {
     }
 }
 
-const isText = (ext: string) => {
+export function isCode (ext: string) {
+    if (isMarkup(ext)) {
+        return true;
+    }
     switch (ext) {
         case ".as":
-            case ".as3":
-            case ".asm":
-            case ".aspx":
-            case ".bat":
-            case ".c":
-            case ".cc":
-            case ".cmake":
-            case ".coffee":
-            case ".cpp":
-            case ".cs":
-            case ".css":
-            case ".cxx":
-            case ".diff":
-            case ".erb":
-            case ".erl":
-            case ".groovy":
-            case ".gvy":
-            case ".h":
-            case ".haml":
-            case ".hh":
-            case ".hpp":
-            case ".html":
-            case ".hxx":
-            case ".java":
-            case ".js":
-            case ".json":
-            case ".jsx":
-            case ".less":
-            case ".lst":
-            case ".m":
-            case ".make":
-            case ".markdown":
-            case ".md":
-            case ".mdown":
-            case ".mkdn":
-            case ".ml":
-            case ".mm":
-            case ".out":
-            case ".patch":
-            case ".php":
-            case ".pl":
-            case ".plist":
-            case ".properties":
-            case ".py":
-            case ".rb":
-            case ".sass":
-            case ".scala":
-            case ".scm":
-            case ".script":
-            case ".scss":
-            case ".sh":
-            case ".sml":
-            case ".sql":
-            case ".txt":
-            case ".vb":
-            case ".vi":
-            case ".vim":
-            case ".xhtml":
-            case ".xml":
-            case ".xsd":
-            case ".xsl":
-            case ".yaml":
-            case ".yml":
+        case ".as3":
+        case ".asm":
+        case ".aspx":
+        case ".bat":
+        case ".c":
+        case ".cc":
+        case ".cmake":
+        case ".coffee":
+        case ".cpp":
+        case ".cs":
+        case ".css":
+        case ".cxx":
+        case ".diff":
+        case ".erb":
+        case ".erl":
+        case ".groovy":
+        case ".gvy":
+        case ".h":
+        case ".haml":
+        case ".hh":
+        case ".hpp":
+        case ".hxx":
+        case ".java":
+        case ".js":
+        case ".json":
+        case ".jsx":
+        case ".less":
+        case ".lst":
+        case ".m":
+        case ".make":
+        case ".ml":
+        case ".mm":
+        case ".out":
+        case ".patch":
+        case ".php":
+        case ".pl":
+        case ".plist":
+        case ".properties":
+        case ".py":
+        case ".rb":
+        case ".sass":
+        case ".scala":
+        case ".scm":
+        case ".script":
+        case ".scss":
+        case ".sh":
+        case ".sml":
+        case ".sql":
+        case ".vb":
+        case ".vi":
+        case ".vim":
+        case ".xsd":
+        case ".xsl":
+        case ".yaml":
+        case ".yml":
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isText (ext: string) {
+    if (isCode(ext) || isMarkdown(ext)) {
+        return true;
+    }
+    switch (ext) {
+        case ".txt":
+            return true;
+        default:
+            return false;
+    }
+
+}
+export function isOfficeDocument(path: string) {
+    var ext = getExtension(path);
+    switch (ext) {
+        case ".doc":
+        case ".docm":
+        case ".docx":
+        case ".dotm":
+        case ".dotx":
+        case ".ppt":
+        case ".pptm":
+        case ".pptx":
+        case ".potx":
+        case ".xls":
+        case ".xlsm":
+        case ".xlsx":
+        case ".xltx":
             return true;
         default:
             return false;
     }
 }
 
-export const getIcon = (name: string, mediaType?: string): { icon: string, color?: string } => {
-    var ext = name.substring(name.lastIndexOf('.') , name.length) || name;
+export function getIcon (name: string, mediaType?: string): { icon: string, color?: string } {
+    var ext = getExtension(name);
 
     if (ext === "") return { icon: "file" };
 
     if (isAudio(ext)) {
-        return { icon: "file", color: "indigo" };
+        return { icon: "file-music", color: "indigo" };
     } else if (isImage(ext)) {
         return { icon: "file-image", color: "cyan" };
     } else if (isVideo(ext)) {
-        return { icon: "file-image", color: "pink" };
+        return { icon: "file-video", color: "pink" };
     } else if (isMarkup(ext)) {
         return { icon: "file-xml", color: "purple" };
+    } else if (isCode(ext)) {
+        return { icon: "file-code", color: "purple" };
     } else if (isText(ext)) {
         return { icon: "file-document" };
     } else{

package/src/utils/scrollbarDetection.js

@@ -0,0 +1,48 @@
+// SCROLLBAR DETECTION
+
+/**
+ * The target which the scrollbar classname will be applied to.
+ * @type Element
+ */
+export var scrollbarClassnameTarget = document.documentElement;
+
+/**
+ * The callback function for the scrollbar observer.
+ * @param {ResizeObserverTarget[]} entries 
+ */
+export function checkScrollbar(entries) {
+  var element, overflowWidth;
+  for (var entry in entries) {
+    element = entries[entry].target;
+    try {
+      overflowWidth = element === document.documentElement ? window.innerWidth : element.clientWidth;
+      if (overflowWidth !== element.offsetWidth) {
+        // we have visible scrollbars, add .scrollbar to html element
+        scrollbarClassnameTarget.classList.add("wy-scrollbars");
+      } else {
+        scrollbarClassnameTarget.classList.remove("wy-scrollbars");
+      }
+    } catch (e) {
+      console.warn("scrollbar detection failed", e);
+    }
+  }
+}
+
+/**
+ * Creates a scrollbar detection element and starts observing it.
+ */
+export default function observeScrollbars() {
+  // insert scrollbar detection element
+  var scrollCheck = document.getElementById("wy-scrollbar-detection");
+
+  if (!scrollCheck) {
+    scrollCheck = document.createElement("aside");
+    scrollCheck.id = "wy-scrollbar-detection";
+    scrollCheck.className = "wy-scrollbar-detection";
+    document.documentElement.insertBefore(scrollCheck, document.body);
+  }
+
+  var scrollObserver = new ResizeObserver(checkScrollbar);
+  scrollObserver.observe(scrollCheck);
+}
+

package/dist/cjs/types/utils/styles.d.ts

@@ -1,17 +0,0 @@
-/**
- * Sets the prefix for CSS classes on the HTML element for usage in javascript.
- * @param {string} prefix
- */
-export declare function setPrefix(prefix: string): void;
-/**
- * Prefixes one or more classnames (with or without dot) using the themePrefix
- * @param {...string} strs
- * @returns string[]
- */
-export declare function prefixes(...strs: string[]): string[];
-/**
- * Prefixes one classname (with or without dot) using the themePrefix
- * @param {string} str
- * @returns string
- */
-export declare function prefix(str: string): string;

package/dist/esm/types/utils/styles.d.ts

@@ -1,17 +0,0 @@
-/**
- * Sets the prefix for CSS classes on the HTML element for usage in javascript.
- * @param {string} prefix
- */
-export declare function setPrefix(prefix: string): void;
-/**
- * Prefixes one or more classnames (with or without dot) using the themePrefix
- * @param {...string} strs
- * @returns string[]
- */
-export declare function prefixes(...strs: string[]): string[];
-/**
- * Prefixes one classname (with or without dot) using the themePrefix
- * @param {string} str
- * @returns string
- */
-export declare function prefix(str: string): string;

package/src/utils/styles.ts

@@ -1,42 +0,0 @@
-
-var themePrefix = "wy";
-
-/**
- * Sets the prefix for CSS classes on the HTML element for usage in javascript.
- * @param {string} prefix
- */
- export function setPrefix(prefix:string) {
-    if (typeof prefix === "string") {
-        themePrefix = prefix;
-    }
-  }
-  
-  
-  /**
-   * Prefixes one or more classnames (with or without dot) using the themePrefix
-   * @param {...string} strs 
-   * @returns string[]
-   */
-  export function prefixes(...strs:string[]) {
-    const _prefix = themePrefix || '';
-    if (_prefix) {
-      strs = strs.map((str) => {
-        str ??= '';
-        if (str[0] === '.') {
-          return `.${_prefix}-${str.substring(1)}`;
-        } else {
-          return `${_prefix}-${str}`;
-        }
-      })
-    }
-    return strs;
-  }
-
-  /**
-   * Prefixes one classname (with or without dot) using the themePrefix
-   * @param {string} str 
-   * @returns string
-   */
-  export function prefix(str:string) {
-    return prefixes(...(str.split(" "))).join(" ");
-  }