Media preview now renders document icon + fix overflow styling issue

tinloof · Mar 29, 2024 · 663bb7a · 663bb7a
1 parent e88990d
commit 663bb7a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 39 deletions.
diff --git a/packages/sanity-studio/src/plugins/navigator/components/List.tsx b/packages/sanity-studio/src/plugins/navigator/components/List.tsx
@@ -30,11 +30,11 @@ const ListWrapper = styled(Box)`
   border: 2px solid transparent;
   padding: 2px;
   border-radius: 8px;
-  width: 100%;
   height: 88vh;
   overflow-y: auto;
   margin: 0;
   display: flex;
+  gap: 0.25rem;
   flex-direction: column;
 `;
 
@@ -174,39 +174,25 @@ const List = ({ loading }: { loading: boolean }) => {
         aria-label="Pages and folders"
         aria-activedescendant={`item-${activeDescendant}`}
       >
-        <div
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-            width: "100%",
-            position: "relative",
-          }}
-        >
-          {virtualizer.getVirtualItems().map((virtualChild) => {
-            const item = items[virtualChild.index];
-            return (
-              <ListItem
-                key={virtualChild.index}
-                item={item}
-                active={activeDescendant}
-                setActive={setActiveDescendant}
-                idx={virtualChild.index}
-                virtualChild={virtualChild}
-              />
-            );
-          })}
-        </div>
+        {virtualizer.getVirtualItems().map((virtualChild) => {
+          const item = items[virtualChild.index];
+          return (
+            <ListItem
+              key={virtualChild.index}
+              item={item}
+              active={activeDescendant}
+              setActive={setActiveDescendant}
+              idx={virtualChild.index}
+              virtualChild={virtualChild}
+            />
+          );
+        })}
       </ListWrapper>
     </Card>
   );
 };
 
-const ListItem = ({
-  item,
-  active,
-  setActive,
-  idx,
-  virtualChild,
-}: ListItemProps) => {
+const ListItem = ({ item, active, setActive, idx }: ListItemProps) => {
   const { defaultLocaleId, setCurrentDir, currentDir } = useNavigator();
   const innerRef = useRef<HTMLLIElement>(null);
   const listItemId = `item-${idx}`;
@@ -278,14 +264,6 @@ const ListItem = ({
       aria-selected={listItemId === active}
       currentScheme={scheme}
       isPreviewed={previewed}
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: `${virtualChild?.size}px`,
-        transform: `translateY(${virtualChild?.start}px)`,
-      }}
     >
       <Flex align="center" gap={2} flex={1}>
         <Flex

diff --git a/packages/sanity-studio/src/plugins/navigator/components/Preview.tsx b/packages/sanity-studio/src/plugins/navigator/components/Preview.tsx
@@ -44,15 +44,16 @@ const PreviewElement = ({
   });
 
   const showPreview =
-    typeof schemaType?.preview?.prepare === "function" && !isLoading;
+    schemaType?.icon ||
+    (typeof schemaType?.preview?.prepare === "function" && !isLoading);
 
   if (type === "media") {
     return showPreview ? (
       <PreviewMedia
         {...previewValues}
         isPlaceholder={isLoading ?? true}
         layout="default"
-        icon={schemaType.icon}
+        icon={schemaType?.icon}
       />
     ) : (
       <>{!isLoading ? fallback : null}</>