fix: 修复 Image 在预览大图时的鼠标手势不正确问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.8-beta.8",
+  "version": "3.5.8-beta.9",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

packages/base/src/icons/config.tsx

@@ -26,14 +26,14 @@ const config = {
   cascader: {
     More: icons.ArrowDown,
     DropdownArrow: icons.ArrowDown,
-    Close: icons.Close,
+    Close: icons.CloseFill,
     CollapseArrow: icons.ArrowRight,
   },
   collapse: {
     collapseArrow: icons.ArrowRight,
   },
   datepicker: {
-    Close: icons.Close,
+    Close: icons.CloseFill,
     Time: icons.Time,
     Calendar: icons.Calendar,
     ArrowDoubleLeft: icons.ArrowLeftDouble,
@@ -45,10 +45,10 @@ const config = {
     DropdownArrow: icons.ArrowDown,
   },
   editableArea: {
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   image: {
-    Close: icons.Close,
+    Close: icons.CloseFill,
     Pics: icons.ImageCount,
     Download: icons.Download,
     Preview: icons.Preview,
@@ -59,7 +59,7 @@ const config = {
     ArrowLeft: icons.ArrowLeft,
     Hide: icons.Hide,
     Show: icons.Display,
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   link: {
     prefixIcon: icons.Link,
@@ -96,7 +96,7 @@ const config = {
     Check: icons.Check,
     More: icons.More,
     DropdownArrow: icons.ArrowDown,
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   steps: {
     Finish: icons.Check,
@@ -128,15 +128,15 @@ const config = {
   treeSelect: {
     More: icons.More,
     DropdownArrow: icons.ArrowDown,
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   upload: {
     File: icons.File,
     Success: icons.CheckCircleFill,
     Warning: icons.WarningCircleFill,
     Recover: icons.Return,
     Delete: icons.Delete,
-    DeleteImage: icons.Close,
+    DeleteImage: icons.CloseFill,
     RecoverImage: icons.RecoverCircle,
     PreviewImage: icons.Preview,
     AddImage: icons.Add,

packages/base/src/icons/icons.tsx

@@ -46,10 +46,19 @@ const clock = [
   'M12 23C5.925 23 1 18.075 1 12C1 5.925 5.925 1 12 1C18.075 1 23 5.925 23 12C23 18.075 18.075 23 12 23ZM12 21C15.2154 21 18.1865 19.2846 19.7942 16.5C21.4019 13.7154 21.4019 10.2846 19.7942 7.5C18.1865 4.71539 15.2154 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM13 11H18C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13H12C11.4477 13 11 12.5523 11 12V6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V11Z',
 ];
 
-
 const recoverCircle = [
-<path key="1" d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z" fill='currentColor'></path>,
-<path key="2" fillRule="evenodd" clipRule="evenodd" d="M10.1967 6.28261C10.5929 6.66737 10.6022 7.30046 10.2174 7.69667L9.39504 8.54349H13.3752C15.8901 8.54349 18 10.51 18 13.0217C18 15.5335 15.8901 17.5 13.3752 17.5H8.84425C8.29196 17.5 7.84425 17.0523 7.84425 16.5C7.84425 15.9477 8.29196 15.5 8.84425 15.5H13.3752C14.8641 15.5 16 14.352 16 13.0217C16 11.6915 14.8641 10.5435 13.3752 10.5435H9.43488L10.1964 11.2823C10.5927 11.6669 10.6023 12.3 10.2177 12.6964C9.83312 13.0927 9.20003 13.1023 8.80365 12.7177L6.30365 10.2921C6.11325 10.1073 6.00406 9.85452 6.00011 9.58925C5.99616 9.32399 6.09779 9.06803 6.28261 8.87771L8.78261 6.30333C9.16737 5.90713 9.80046 5.89785 10.1967 6.28261Z" fill="white"></path>
+  <path
+    key='1'
+    d='M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z'
+    fill='currentColor'
+  ></path>,
+  <path
+    key='2'
+    fillRule='evenodd'
+    clipRule='evenodd'
+    d='M10.1967 6.28261C10.5929 6.66737 10.6022 7.30046 10.2174 7.69667L9.39504 8.54349H13.3752C15.8901 8.54349 18 10.51 18 13.0217C18 15.5335 15.8901 17.5 13.3752 17.5H8.84425C8.29196 17.5 7.84425 17.0523 7.84425 16.5C7.84425 15.9477 8.29196 15.5 8.84425 15.5H13.3752C14.8641 15.5 16 14.352 16 13.0217C16 11.6915 14.8641 10.5435 13.3752 10.5435H9.43488L10.1964 11.2823C10.5927 11.6669 10.6023 12.3 10.2177 12.6964C9.83312 13.0927 9.20003 13.1023 8.80365 12.7177L6.30365 10.2921C6.11325 10.1073 6.00406 9.85452 6.00011 9.58925C5.99616 9.32399 6.09779 9.06803 6.28261 8.87771L8.78261 6.30333C9.16737 5.90713 9.80046 5.89785 10.1967 6.28261Z'
+    fill='white'
+  ></path>,
   // <path
   //   key={'1'}
   //   d='M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z'
@@ -152,8 +161,24 @@ const calendar1 = [
 ];
 
 const close = (
+  <svg viewBox='0 0 16 16' focusable='false' fill='currentColor' aria-hidden='true'>
+    <path
+      d='M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z'
+      fill='currentColor'
+    />
+  </svg>
+);
+
+const closeFill = (
   <svg viewBox='0 0 24 24' focusable='false' fill='currentColor' aria-hidden='true'>
-    <path d='M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z'></path>
+    <path
+      d='M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z'
+      fill='currentColor'
+    ></path>
+    <path
+      d='M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z'
+      fill='white'
+    ></path>
   </svg>
 );
 
@@ -306,6 +331,7 @@ const Icons = {
   Warning: icon(warningSimple),
   Check: icon(check),
   Close: close,
+  CloseFill: closeFill,
 
   ImageCount: icon(imageCount),
   ImageError: icon(imageError),

packages/base/src/image/image-gallery.tsx

@@ -28,7 +28,6 @@ const ImageModal = (props: ImageGalleryProps) => {
 
 
   const overlayClass = classNames(galleryStyle?.overlay);
-  const magnifyClass = classNames(galleryStyle?.magnify);
   const closeClass = classNames(galleryStyle?.close);
 
   const closeIconProps = getCloseIconProps();
@@ -59,7 +58,7 @@ const ImageModal = (props: ImageGalleryProps) => {
     });
 
     const magnifyProps = getMaginfyProps(position, {
-      className: magnifyClass,
+      jssStyle,
       src: image.src,
     });
 

packages/base/src/image/image-magnify.tsx

@@ -1,12 +1,15 @@
 import { useImageMagnify } from '@sheinx/hooks';
 import { ImageMagnifyProps } from './image.type';
+import classNames from 'classnames';
 
 const ImageMagnify = (props: ImageMagnifyProps) => {
-  const { className, ...rest } = props;
+  const { jssStyle, ...rest } = props;
   const { loading, status, src, maxWidth, maxHeight, getRootProps } = useImageMagnify(rest);
 
   const rootProps = getRootProps();
 
+  const galleryStyle = jssStyle?.image?.()
+
   const renderLoading = () => {
     return <div></div>;
   };
@@ -22,8 +25,10 @@ const ImageMagnify = (props: ImageMagnifyProps) => {
     maxHeight: status === 1 ? undefined : maxHeight,
   };
 
+
+
   return (
-    <div className={className} style={rootStyle} {...rootProps}>
+    <div className={classNames(galleryStyle?.magnify, status === 1 && galleryStyle?.magnifyZoomOut)} style={rootStyle} {...rootProps}>
       <img style={imgStyle} src={src} alt='' />
       {loading && renderLoading()}
     </div>

packages/base/src/image/image.type.ts

@@ -28,6 +28,7 @@ export interface ImageClasses {
 
   overlay: string;
   magnify: string;
+  magnifyZoomOut: string;
   close: string;
 
   gallery: string;
@@ -70,6 +71,7 @@ export interface ImageMagnifyProps {
   maxHeight: number;
   lockScroll: (isLock: boolean) => void;
   className?: string;
+  jssStyle?: ImageJssStyleType;
 }
 export interface ImageBaseProps
   extends BaseImageProps,

packages/shineout-style/src/image/image.ts

@@ -255,6 +255,9 @@ const ImageStyle: JsStyles<ImageClass> = {
       borderStyle: 'none',
     },
   },
+  magnifyZoomOut: {
+    cursor: 'zoom-out',
+  },
 
   close: {
     position: 'absolute',

packages/shineout/src/alert/__test__/__snapshots__/alert.spec.tsx.snap

@@ -102,10 +102,11 @@ exports[`Alert[Base] should render correctly about closeable 1`] = `
           aria-hidden="true"
           fill="currentColor"
           focusable="false"
-          viewBox="0 0 24 24"
+          viewBox="0 0 16 16"
         >
           <path
-            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+            d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+            fill="currentColor"
           />
         </svg>
       </div>
@@ -173,10 +174,11 @@ exports[`Alert[Base] should render correctly about title 1`] = `
         aria-hidden="true"
         fill="currentColor"
         focusable="false"
-        viewBox="0 0 24 24"
+        viewBox="0 0 16 16"
       >
         <path
-          d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+          d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+          fill="currentColor"
         />
       </svg>
     </div>

packages/shineout/src/cascader/__test__/__snapshots__/cascader.spec.tsx.snap

@@ -96,7 +96,12 @@ exports[`Cascader[Base] should render correctly about compressed 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+              fill="currentColor"
+            />
+            <path
+              d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+              fill="white"
             />
           </svg>
         </span>