feat: Image add preview style (ant-design#28235)

* feat: Add preview mask * feat: Preview support locale * test: Update snapshot * fix lint * fix lint
pasinter · Dec 7, 2020 · 9cd4fab · 9cd4fab
1 parent f3ff21e
commit 9cd4fab
Show file tree

Hide file tree

Showing 12 changed files with 265 additions and 7 deletions.
diff --git 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

diff --git 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>,
 ]
 `;
diff --git 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>
 `;
diff --git 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}
           />

diff --git a/components/image/index.tsx b/components/image/index.tsx
@@ -1,17 +1,43 @@
 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';
 
 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 };

diff --git 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;
   }

diff --git 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 {

diff --git a/components/locale/default.tsx b/components/locale/default.tsx
@@ -125,6 +125,9 @@ const localeValues: Locale = {
       },
     },
   },
+  Image: {
+    preview: 'Preview',
+  },
 };
 
 export default localeValues;
diff --git 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;
diff --git 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',
         });

diff --git 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%);
diff --git 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",