feat: Image add preview style (#28235)

* feat: Add preview mask * feat: Preview support locale * test: Update snapshot * fix lint * fix lint
2024-11-27 20:49:53 +08:00 · 2020-12-07 17:08:48 +08:00 · 2020-12-07 17:08:48 +08:00 · 9cd4fab604
commit 9cd4fab604
parent f3ff21eca6
12 changed files with 265 additions and 7 deletions
--- a/components/avatar/tests/snapshots/demo.test.js.snap
+++ b/components/avatar/tests/snapshots/demo.test.js.snap
@ -793,6 +793,34 @@ Array [
        class="ant-image-img"
        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
      />
+      <div
+        class="ant-image-mask"
+      >
+        <div
+          class="ant-image-mask-info"
+        >
+          <span
+            aria-label="eye"
+            class="anticon anticon-eye"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="eye"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+              />
+            </svg>
+          </span>
+          Preview
+        </div>
+      </div>
    </div>
  </span>,
  <span
--- a/components/image/tests/snapshots/demo.test.js.snap
+++ b/components/image/tests/snapshots/demo.test.js.snap
@ -9,6 +9,34 @@ exports[`renders ./components/image/demo/basic.md correctly 1`] = `
    class="ant-image-img"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  />
+  <div
+    class="ant-image-mask"
+  >
+    <div
+      class="ant-image-mask-info"
+    >
+      <span
+        aria-label="eye"
+        class="anticon anticon-eye"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="eye"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+          />
+        </svg>
+      </span>
+      Preview
+    </div>
+  </div>
 </div>
 `;

@ -22,6 +50,34 @@ exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
    src="error"
    style="height:200px"
  />
+  <div
+    class="ant-image-mask"
+  >
+    <div
+      class="ant-image-mask-info"
+    >
+      <span
+        aria-label="eye"
+        class="anticon anticon-eye"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="eye"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+          />
+        </svg>
+      </span>
+      Preview
+    </div>
+  </div>
 </div>
 `;

@ -55,6 +111,34 @@ exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
          />
        </div>
      </div>
+      <div
+        class="ant-image-mask"
+      >
+        <div
+          class="ant-image-mask-info"
+        >
+          <span
+            aria-label="eye"
+            class="anticon anticon-eye"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="eye"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+              />
+            </svg>
+          </span>
+          Preview
+        </div>
+      </div>
    </div>
  </div>
  <div
@ -82,6 +166,34 @@ Array [
      class="ant-image-img"
      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
  </div>,
  <div
    class="ant-image"
@ -91,6 +203,34 @@ Array [
      class="ant-image-img"
      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
    />
+    <div
+      class="ant-image-mask"
+    >
+      <div
+        class="ant-image-mask-info"
+      >
+        <span
+          aria-label="eye"
+          class="anticon anticon-eye"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="eye"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+            />
+          </svg>
+        </span>
+        Preview
+      </div>
+    </div>
  </div>,
 ]
 `;
--- a/components/image/tests/snapshots/index.test.js.snap
+++ b/components/image/tests/snapshots/index.test.js.snap
@ -7,5 +7,33 @@ exports[`Image rtl render component should be rendered correctly in RTL directio
  <img
    class="ant-image-img"
  />
+  <div
+    class="ant-image-mask"
+  >
+    <div
+      class="ant-image-mask-info"
+    >
+      <span
+        aria-label="eye"
+        class="anticon anticon-eye"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="eye"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+          />
+        </svg>
+      </span>
+      Preview
+    </div>
+  </div>
 </div>
 `;
--- a/components/image/demo/placeholder.md
+++ b/components/image/demo/placeholder.md
@ -26,7 +26,7 @@ function ImageDemo() {
        src={`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`}
        placeholder={
          <Image
-            preivew={false}
+            preview={false}
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
            width={200}
          />
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@ -1,5 +1,8 @@
 import * as React from 'react';
+import { useContext } from 'react';
+import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import RcImage, { ImageProps } from 'rc-image';
+import defaultLocale from '../locale/en_US';
 import PreviewGroup from './PreviewGroup';
 import { ConfigContext } from '../config-provider';

@ -7,11 +10,34 @@ export interface CompositionImage<P> extends React.FC<P> {
  PreviewGroup: typeof PreviewGroup;
 }

-const Image: CompositionImage<ImageProps> = ({ prefixCls: customizePrefixCls, ...otherProps }) => {
-  const { getPrefixCls } = React.useContext(ConfigContext);
+const Image: CompositionImage<ImageProps> = ({
+  prefixCls: customizePrefixCls,
+  preview,
+  ...otherProps
+}) => {
+  const { getPrefixCls } = useContext(ConfigContext);
  const prefixCls = getPrefixCls('image', customizePrefixCls);

-  return <RcImage prefixCls={prefixCls} {...otherProps} />;
+  const { locale: contextLocale = defaultLocale } = useContext(ConfigContext);
+  const imageLocale = contextLocale.Image || defaultLocale.Image;
+
+  const mergedPreview = React.useMemo(() => {
+    if (preview === false) {
+      return preview;
+    }
+
+    return {
+      mask: (
+        <div className={`${prefixCls}-mask-info`}>
+          <EyeOutlined />
+          {imageLocale?.preview}
+        </div>
+      ),
+      ...(typeof preview === 'object' ? preview : null),
+    };
+  }, [preview, imageLocale]);
+
+  return <RcImage prefixCls={prefixCls} preview={mergedPreview} {...otherProps} />;
 };

 export { ImageProps };
--- a/components/image/style/index.less
+++ b/components/image/style/index.less
@ -19,6 +19,32 @@
    }
  }

+  &-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @text-color-inverse;
+    background: fade(@black, 50%);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity @animation-duration-slow;
+
+    &-info {
+      .@{iconfont-css-prefix} {
+        margin-inline-end: @margin-xss;
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
  &-placeholder {
    .box;
  }
--- a/components/locale-provider/index.tsx
+++ b/components/locale-provider/index.tsx
@ -35,6 +35,9 @@ export interface Locale {
    optional?: string;
    defaultValidateMessages: ValidateMessages;
  };
+  Image?: {
+    preview: string;
+  };
 }

 export interface LocaleProviderProps {
--- a/components/locale/default.tsx
+++ b/components/locale/default.tsx
@ -125,6 +125,9 @@ const localeValues: Locale = {
      },
    },
  },
+  Image: {
+    preview: 'Preview',
+  },
 };

 export default localeValues;
--- a/components/locale/zh_CN.tsx
+++ b/components/locale/zh_CN.tsx
@ -13,7 +13,7 @@ const localeValues: Locale = {
  DatePicker,
  TimePicker,
  Calendar,
-  // locales for all comoponents
+  // locales for all components
  global: {
    placeholder: '请选择',
  },
@ -124,6 +124,9 @@ const localeValues: Locale = {
      },
    },
  },
+  Image: {
+    preview: '预览',
+  },
 };

 export default localeValues;
--- a/components/message/tests/index.test.js
+++ b/components/message/tests/index.test.js
@ -70,7 +70,7 @@ describe('message', () => {
    class Test extends React.Component {
      componentDidMount() {
        message.info({
-          onClick: onClick,
+          onClick,
          duration: 0,
          content: 'message info',
        });
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -1003,6 +1003,7 @@
@image-font-size-base: 24px;
@image-bg: #f5f5f5;
@image-color: #fff;
+@image-mask-font-size: 16px;
@image-preview-operation-size: 18px;
@image-preview-operation-color: @text-color-dark;
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
--- a/package.json
+++ b/package.json
@ -124,7 +124,7 @@
    "rc-drawer": "~4.1.0",
    "rc-dropdown": "~3.2.0",
    "rc-field-form": "~1.17.0",
-    "rc-image": "~4.2.0",
+    "rc-image": "~4.3.1",
    "rc-input-number": "~6.1.0",
    "rc-mentions": "~1.5.0",
    "rc-menu": "~8.10.0",