feat: support themed media in LayoutItem (#867)

* feat: support themed media in LayoutItem
gravity-ui · Mar 20, 2024 · 46db9f5 · 46db9f5
1 parent 094c6e5
commit 46db9f5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx b/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx
@@ -60,3 +60,9 @@ WithDefaultAllTag.args = createArgs({allTag: true});
 
 export const WithCustomAllTag = DefaultTemplate.bind({});
 WithCustomAllTag.args = createArgs({allTag: 'Custom All Tag Label'});
+
+export const WithThemedMedia = DefaultTemplate.bind({});
+WithThemedMedia.args = createArgs({
+    allTag: false,
+    items: createItemList(6, data.themed.card as LayoutItemProps, data.default.filters),
+});
diff --git a/src/blocks/FilterBlock/__stories__/data.json b/src/blocks/FilterBlock/__stories__/data.json
@@ -29,5 +29,22 @@
         "label": "Third very long label"
       }
     ]
+  },
+  "themed": {
+    "card": {
+      "type": "layout-item",
+      "media": {
+        "light": {
+          "image": "/story-assets/img-mini_4-12_light.png"
+        },
+        "dark": {
+          "image": "/story-assets/img-mini_4-12_dark.png"
+        }
+      },
+      "content": {
+        "title": "Lorem&nbsp;ipsum",
+        "text": "Dolor sit amet"
+      }
+    }
   }
 }
diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx
@@ -3,8 +3,9 @@ import React, {useMemo} from 'react';
 import {useUniqId} from '@gravity-ui/uikit';
 
 import {Buttons, FullscreenMedia, IconWrapper, Links, Media, MetaInfo} from '../../components';
+import {useTheme} from '../../context/theme';
 import {ContentBlockProps, LayoutItemProps} from '../../models';
-import {block} from '../../utils';
+import {block, getThemedValue} from '../../utils';
 import Content from '../Content/Content';
 
 import {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils';
@@ -26,6 +27,7 @@ const LayoutItem = ({
 }: LayoutItemProps) => {
     const normalizedLinks = useMemo(() => getLayoutItemLinks(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
+    const theme = useTheme();
 
     const contentProps: ContentBlockProps = {
         ...content,
@@ -38,23 +40,29 @@ const LayoutItem = ({
         if (!media) {
             return null;
         }
-        return fullscreen && hasFullscreen(media) ? (
-            <FullscreenMedia showFullscreenIcon={showFullscreenIcon(media)}>
+        const themedMedia = getThemedValue(media, theme);
+
+        return fullscreen && hasFullscreen(themedMedia) ? (
+            <FullscreenMedia showFullscreenIcon={showFullscreenIcon(themedMedia)}>
                 {({
                     className: mediaClassName,
                     fullscreen: _fullscreen,
                     ...fullscreenMediaProps
                 } = {}) => (
                     <Media
-                        {...media}
+                        {...themedMedia}
                         {...fullscreenMediaProps}
                         className={b('media', {border}, mediaClassName)}
                         analyticsEvents={analyticsEvents}
                     />
                 )}
             </FullscreenMedia>
         ) : (
-            <Media {...media} className={b('media', {border})} analyticsEvents={analyticsEvents} />
+            <Media
+                {...themedMedia}
+                className={b('media', {border})}
+                analyticsEvents={analyticsEvents}
+            />
         );
     };
     return (