feat: modify layout and support closeIcon (#267)

* feat: modify layout and support closeIcon * fix: closeIcon * demo: adjust style * refactor: adjust dom layout * demo: updated * refactor: remove iconClassName
react-component · Jun 29, 2023 · 9b25d8c · 9b25d8c · vercel · Jun 29, 2023
1 parent 58519e4
commit 9b25d8c
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 145 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 
 React Image.
 
+<!-- prettier-ignore -->
 [![NPM version][npm-image]][npm-url]
 [![npm download][download-image]][download-url]
 [![build status][github-actions-image]][github-actions-url]
@@ -77,10 +78,11 @@ export default () => (
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | visible | boolean | - | Whether the preview is open or not |
-| src | string | - | customize preview src |
+| closeIcon | React.ReactNode | - | Custom close icon |
+| src | string | - | Customize preview src |
 | scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
-| minScale | number | 1 | min scale |
-| maxScale | number | 50 | max scale |
+| minScale | number | 1 | Min scale |
+| maxScale | number | 50 | Max scale |
 | forceRender | boolean | - | Force render preview |
 | getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
 | imageRender | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | Customize image |
@@ -116,14 +118,15 @@ export default () => (
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | visible | boolean | - | Whether the preview is open or not |
-| current | number | - | current index |
+| current | number | - | Current index |
+| closeIcon | React.ReactNode | - | Custom close icon |
 | scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
-| minScale | number | 1 | min scale |
-| maxScale | number | 50 | max scale |
+| minScale | number | 1 | Min scale |
+| maxScale | number | 50 | Max scale |
 | forceRender | boolean | - | Force render preview |
 | getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
 | items | (string \| { src: string, alt: string, crossOrigin: string, ... })[] | - | preview group |
-| countRender | (current: number, total: number) => string | - | Customize count |
+| countRender | (current: number, total: number) => React.ReactNode | - | Customize count |
 | imageRender | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | Customize image |
 | toolbarRender | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | Customize toolbar |
 | onVisibleChange | (visible: boolean, prevVisible: boolean, current: number) => void | - | Callback when visible is changed |
@@ -173,7 +176,6 @@ type TransformAction =
     rotateRightIcon: React.ReactNode;
     zoomOutIcon: React.ReactNode;
     zoomInIcon: React.ReactNode;
-    closeIcon: React.ReactNode;
   };
   actions: {
     onFlipY: () => void;
@@ -182,7 +184,6 @@ type TransformAction =
     onRotateRight: () => void;
     onZoomOut: () => void;
     onZoomIn: () => void;
-    onClose: () => void;
   };
   transform: {
     x: number;

diff --git a/assets/index.less b/assets/index.less
@@ -98,22 +98,17 @@
       user-select: none;
       vertical-align: middle;
       max-width: 100%;
-      max-height: 100%;
+      max-height: 70%;
 
       &-wrapper {
         .box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         & > * {
           pointer-events: auto;
         }
-
-        &::before {
-          content: '';
-          display: inline-block;
-          height: 50%;
-          width: 1px;
-          margin-right: -1px;
-        }
       }
     }
 
@@ -138,36 +133,56 @@
       -webkit-overflow-scrolling: touch;
     }
 
+    &-close {
+      position: fixed;
+      top: 32px;
+      right: 32px;
+      display: flex;
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      padding: 15px;
+      outline: 0;
+      border: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.3;
+      }
+    }
+
     &-operations-wrapper {
       position: fixed;
       z-index: @zindex-preview-mask + 1;
     }
 
-    &-operations {
-      .reset;
-      pointer-events: auto;
-      list-style: none;
+    &-footer {
       position: fixed;
-      display: flex;
-      top: 0;
-      right: 0;
+      z-index: @zindex-preview-mask + 1;
+      bottom: 32px;
+      left: 0;
       width: 100%;
+      display: flex;
+      flex-direction: column;
       align-items: center;
-      justify-content: flex-end;
-      z-index: @zindex-preview-mask + 1;
+    }
+
+    &-progress {
+      margin-bottom: 20px;
+    }
+
+    &-operations {
+      display: flex;
       color: @text-color;
       background: fade(@preview-mask-bg, 45%);
-
-      &-progress {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-      }
+      border-radius: 100px;
+      padding: 0 20px;
 
       &-operation {
         padding: 10px;
         cursor: pointer;
         margin-left: 10px;
+        font-size: 18px;
         &-disabled {
           pointer-events: none;
           color: @text-color-disabled;
@@ -176,9 +191,6 @@
           margin-left: 0;
         }
       }
-      &-icon {
-        font-size: 18px;
-      }
     }
 
     &-switch-left {
@@ -194,7 +206,6 @@
       align-items: center;
       justify-content: center;
       z-index: @zindex-preview-mask + 1;
-      pointer-events: auto;
       cursor: pointer;
       color: @text-color;
       &-disabled {
@@ -223,7 +234,6 @@
       align-items: center;
       justify-content: center;
       z-index: @zindex-preview-mask + 1;
-      pointer-events: auto;
       cursor: pointer;
       color: @text-color;
       &-disabled {

diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
@@ -1,7 +1,29 @@
+import {
+  CloseOutlined,
+  LeftOutlined,
+  RightOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons';
 import Image from 'rc-image';
 import * as React from 'react';
 import '../../assets/index.less';
 
+const icons = {
+  rotateLeft: <RotateLeftOutlined />,
+  rotateRight: <RotateRightOutlined />,
+  zoomIn: <ZoomInOutlined />,
+  zoomOut: <ZoomOutOutlined />,
+  close: <CloseOutlined />,
+  left: <LeftOutlined />,
+  right: <RightOutlined />,
+  flipX: <SwapOutlined />,
+  flipY: <SwapOutlined rotate={90} />,
+};
+
 export default function Base() {
   return (
     <div>
@@ -15,6 +37,7 @@ export default function Base() {
           console.log('click');
         }}
         preview={{
+          icons,
           onVisibleChange: visible => {
             console.log('visible', visible);
           },

diff --git a/docs/examples/previewgroup.tsx b/docs/examples/previewgroup.tsx
@@ -1,11 +1,34 @@
+import {
+  CloseOutlined,
+  LeftOutlined,
+  RightOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons';
 import Image from 'rc-image';
 import React from 'react';
 import '../../assets/index.less';
 
+const icons = {
+  rotateLeft: <RotateLeftOutlined />,
+  rotateRight: <RotateRightOutlined />,
+  zoomIn: <ZoomInOutlined />,
+  zoomOut: <ZoomOutOutlined />,
+  close: <CloseOutlined />,
+  left: <LeftOutlined />,
+  right: <RightOutlined />,
+  flipX: <SwapOutlined />,
+  flipY: <SwapOutlined rotate={90} />,
+};
+
 export default function PreviewGroup() {
   return (
     <div>
       <Image.PreviewGroup
+        icons={icons}
         preview={{
           countRender: (current, total) => `第${current}张 / 总共${total}张`,
           onChange: (current, prev) =>