feat(Image): add prop filter (#8171)

* feat(Image): add prop filter * fix(Image): fix prettier
VKCOM · Jan 23, 2025 · bff743b · bff743b
1 parent 9205131
commit bff743b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/packages/vkui/src/components/Image/Image.stories.tsx b/packages/vkui/src/components/Image/Image.stories.tsx
@@ -7,6 +7,19 @@ const story: Meta<ImageProps> = {
   title: 'Blocks/Image',
   component: Image,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  argTypes: {
+    filter: {
+      control: { type: 'select' },
+      options: ['blur', 'contrast', 'grayscale', 'hue-rotate', 'drop-shadow'],
+      mapping: {
+        'blur': 'blur(5px)',
+        'contrast': 'contrast(200%)',
+        'grayscale': 'grayscale(80%)',
+        'hue-rotate': 'hue-rotate(90deg)',
+        'drop-shadow': 'drop-shadow(16px 16px 20px red) invert(75%)',
+      },
+    },
+  },
 };
 
 export default story;

diff --git a/packages/vkui/src/components/ImageBase/ImageBase.module.css b/packages/vkui/src/components/ImageBase/ImageBase.module.css
@@ -80,6 +80,15 @@
   );
 }
 
+.withFilter {
+  --vkui_internal--ImageBase_object_filter_default: none;
+
+  filter: var(
+    --vkui_internal--ImageBase_object_filter,
+    var(--vkui_internal--ImageBase_object_filter_default)
+  );
+}
+
 .loaded .img {
   visibility: visible;
 }

diff --git a/packages/vkui/src/components/ImageBase/ImageBase.test.tsx b/packages/vkui/src/components/ImageBase/ImageBase.test.tsx
@@ -223,6 +223,15 @@ describe(ImageBase, () => {
     });
   });
 
+  it('should apply custom filter style', () => {
+    render(<ImageBaseTest src="#" filter="blur(5px)" />);
+
+    expect(getImageBaseImgEl()).toHaveClass(styles.withFilter);
+    expect(getImageBaseImgEl()).toHaveStyle({
+      '--vkui_internal--ImageBase_object_filter': 'blur(5px)',
+    });
+  });
+
   describe('DEV errros', () => {
     beforeEach(() => setNodeEnv('development'));
     afterEach(() => setNodeEnv('test'));

diff --git a/packages/vkui/src/components/ImageBase/ImageBase.tsx b/packages/vkui/src/components/ImageBase/ImageBase.tsx
@@ -115,6 +115,11 @@ export interface ImageBaseProps
    * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming
    */
   elementTiming?: string;
+  /**
+   * Пользовательское значения стиля filter
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)
+   */
+  filter?: React.CSSProperties['filter'];
 }
 
 const getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {
@@ -177,6 +182,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   withTransparentBackground,
   objectFit = 'cover',
   objectPosition,
+  filter,
   keepAspectRatio = false,
   getRootRef,
   elementTiming,
@@ -256,11 +262,15 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     [size],
   );
 
-  const imgStyles: CSSCustomProperties<string | number> | undefined = objectPosition
-    ? {
-        '--vkui_internal--ImageBase_object_position': objectPosition,
-      }
-    : undefined;
+  const imgStyles:
+    | CSSCustomProperties<React.CSSProperties['objectPosition'] | React.CSSProperties['filter']>
+    | undefined =
+    objectPosition || filter
+      ? {
+          '--vkui_internal--ImageBase_object_position': objectPosition,
+          '--vkui_internal--ImageBase_object_filter': filter,
+        }
+      : undefined;
 
   const keepAspectRationStyles = keepAspectRatio
     ? {
@@ -291,6 +301,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
               styles.img,
               getObjectFitClassName(objectFit),
               objectPosition && styles.withObjectPosition,
+              filter && styles.withFilter,
               keepAspectRatio && styles.imgKeepRatio,
             )}
             crossOrigin={crossOrigin}