feat: support preview - dragRebound control and add refresh operation (…

…react-component#216)

docs/examples/basic.tsx

@@ -35,6 +35,10 @@ export default function Base() {
  style={{
  marginRight: 24,
  }}
+ preview={{
+ dragRebound: false,
+ mask: 'close drag rebound'
+ }}
  />
  <Image
  src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ"

src/Image.tsx

@@ -22,6 +22,7 @@ export interface ImagePreviewType
  maskClassName?: string;
  icons?: PreviewProps['icons'];
  scaleStep?: number;
+ dragRebound?: boolean;
 }
 
 let uuid = 0;
@@ -101,6 +102,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
  maskClassName,
  icons,
  scaleStep,
+ dragRebound,
  ...dialogProps
  }: ImagePreviewType = typeof preview === 'object' ? preview : {};
  const src = previewSrc ?? imgSrc;
@@ -282,6 +284,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
  mousePosition={mousePosition}
  src={mergedSrc}
  alt={alt}
+ dragRebound={dragRebound}
  getContainer={getPreviewContainer}
  icons={icons}
  scaleStep={scaleStep}

src/Operations.tsx

@@ -24,6 +24,7 @@ interface OperationsProps
  scale: number;
  onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
  onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
+ onRefresh: ()=> void;
  onZoomIn: () => void;
  onZoomOut: () => void;
  onRotateRight: () => void;
@@ -49,14 +50,15 @@ const Operations: React.FC<OperationsProps> = (props) => {
  onSwitchLeft,
  onSwitchRight,
  onClose,
+ onRefresh,
  onZoomIn,
  onZoomOut,
  onRotateRight,
  onRotateLeft,
  onFlipX,
  onFlipY
  } = props;
- const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
+ const { rotateLeft, rotateRight, refresh, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
  const toolClassName = `${prefixCls}-operations-operation`;
  const iconClassName = `${prefixCls}-operations-icon`;
  const tools = [
@@ -65,6 +67,11 @@ const Operations: React.FC<OperationsProps> = (props) => {
  onClick: onClose,
  type: 'close',
  },
+ {
+ icon: refresh,
+ onClick: onRefresh,
+ type: 'refresh',
+ },
  {
  icon: zoomIn,
  onClick: onZoomIn,

src/Preview.tsx

@@ -21,6 +21,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
  rotateRight?: React.ReactNode;
  zoomIn?: React.ReactNode;
  zoomOut?: React.ReactNode;
+ refresh?: React.ReactNode;
  close?: React.ReactNode;
  left?: React.ReactNode;
  right?: React.ReactNode;
@@ -29,6 +30,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
  };
  countRender?: (current: number, total: number) => string;
  scaleStep?: number;
+ dragRebound?: boolean;
 }
 
 const Preview: React.FC<PreviewProps> = (props) => {
@@ -45,6 +47,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
  scaleStep = 0.5,
  transitionName = 'zoom',
  maskTransitionName = 'fade',
+ dragRebound = true,
  ...restProps
  } = props;
 
@@ -74,6 +77,16 @@ const Preview: React.FC<PreviewProps> = (props) => {
  resetTransform();
  };
 
+ const onRefresh = ()=> {
+ console.log('refresh');
+ updateTransform({
+ rotate: 0,
+ x: 0,
+ y: 0,
+ scale: 1,
+ })
+ }
+
  const onZoomIn = () => {
  dispatchZoomChange(BASE_SCALE_RATIO + scaleStep);
  };
@@ -117,6 +130,9 @@ const Preview: React.FC<PreviewProps> = (props) => {
  const onMouseUp: React.MouseEventHandler<HTMLBodyElement> = () => {
  if (visible && isMoving) {
  setMoving(false);
+ if (!dragRebound) {
+ return
+ }
 
  /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
  const { transformX, transformY } = downPositionRef.current;
@@ -298,6 +314,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
  onRotateLeft={onRotateLeft}
  onFlipX={onFlipX}
  onFlipY={onFlipY}
+ onRefresh={onRefresh}
  onClose={onClose}
  />
  </>