diff --git a/.dumirc.ts b/.dumirc.ts index 756c2777..67ace038 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -3,8 +3,8 @@ import path from 'path'; export default defineConfig({ alias: { - 'rc-image$': path.resolve('src'), - 'rc-image/es': path.resolve('src'), + '@rc-component/image$': path.resolve('src'), + '@rc-component/image/es': path.resolve('src'), }, favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], themeConfig: { diff --git a/README.md b/README.md index 58b7b9c8..9c6d4fdf 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ npm start ``` ```js -import Image from 'rc-image'; +import Image from '@rc-component/image'; export default () => ( @@ -96,7 +96,7 @@ export default () => ( preview the merged src ```js -import Image from 'rc-image'; +import Image from '@rc-component/image'; export default () => ( diff --git a/docs/examples/album.tsx b/docs/examples/album.tsx index d4430cd2..b4867525 100644 --- a/docs/examples/album.tsx +++ b/docs/examples/album.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index bf557994..ff690afd 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import * as React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx index 71fce6b0..25359b2b 100644 --- a/docs/examples/controlled.tsx +++ b/docs/examples/controlled.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import * as React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/controlledWithGroup.tsx b/docs/examples/controlledWithGroup.tsx index 0d205f60..9799eece 100644 --- a/docs/examples/controlledWithGroup.tsx +++ b/docs/examples/controlledWithGroup.tsx @@ -1,5 +1,5 @@ /* eslint-disable global-require */ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import * as React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/fallback.tsx b/docs/examples/fallback.tsx index eaf56c4b..36317362 100644 --- a/docs/examples/fallback.tsx +++ b/docs/examples/fallback.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import * as React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/imageRender.tsx b/docs/examples/imageRender.tsx index e7d7a61a..afea3c05 100644 --- a/docs/examples/imageRender.tsx +++ b/docs/examples/imageRender.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/placeholder.tsx b/docs/examples/placeholder.tsx index 591bbc98..421fa974 100644 --- a/docs/examples/placeholder.tsx +++ b/docs/examples/placeholder.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import * as React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/previewgroup-items.tsx b/docs/examples/previewgroup-items.tsx index d836ae4a..f463e6cd 100644 --- a/docs/examples/previewgroup-items.tsx +++ b/docs/examples/previewgroup-items.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import * as React from 'react'; import '../../assets/index.less'; diff --git a/docs/examples/previewgroup.tsx b/docs/examples/previewgroup.tsx index 4941ebaa..01527bdc 100644 --- a/docs/examples/previewgroup.tsx +++ b/docs/examples/previewgroup.tsx @@ -8,7 +8,7 @@ import { ZoomInOutlined, ZoomOutOutlined, } from '@ant-design/icons'; -import Image from 'rc-image'; +import Image from '@rc-component/image'; import React from 'react'; import '../../assets/index.less'; diff --git a/docs/examples/thumbnail.tsx b/docs/examples/thumbnail.tsx index 417908fb..2ffd90a7 100644 --- a/docs/examples/thumbnail.tsx +++ b/docs/examples/thumbnail.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import * as React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; diff --git a/docs/examples/toolbarRender.tsx b/docs/examples/toolbarRender.tsx index 6fb1de04..8ee8214f 100644 --- a/docs/examples/toolbarRender.tsx +++ b/docs/examples/toolbarRender.tsx @@ -1,4 +1,4 @@ -import Image from 'rc-image'; +import Image from '@rc-component/image'; import React from 'react'; import '../../assets/index.less'; import { defaultIcons } from './common'; @@ -38,7 +38,7 @@ export default function ToolbarRender() { - + ); }, diff --git a/package.json b/package.json index 29ec5f8c..de1f28fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "rc-image", - "version": "7.11.0", + "name": "@rc-component/image", + "version": "1.0.0", "description": "React easy to use image component", "keywords": [ "react", @@ -32,22 +32,23 @@ "docs:deploy": "gh-pages -d docs-dist", "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", "now-build": "npm run docs:build", - "prepublishOnly": "npm run compile && np --yolo --no-publish --any-branch", + "prepublishOnly": "npm run compile && rc-np", "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", "start": "dumi dev", - "test": "rc-test" + "test": "rc-test", + "tsc": "bunx tsc --noEmit" }, "dependencies": { - "@babel/runtime": "^7.11.2", - "@rc-component/portal": "^1.0.2", - "classnames": "^2.2.6", - "rc-dialog": "~9.6.0", - "rc-motion": "^2.6.2", - "rc-util": "^5.34.1" + "@rc-component/portal": "^2.0.0", + "@rc-component/motion": "^1.0.0", + "@rc-component/util": "^1.0.0", + "@rc-component/dialog": "~1.2.0", + "classnames": "^2.2.6" }, "devDependencies": { "@ant-design/icons": "^5.0.1", - "@rc-component/father-plugin": "^1.0.2", + "@rc-component/father-plugin": "^2.0.2", + "@rc-component/np": "^1.0.0", "@testing-library/jest-dom": "^6.4.0", "@testing-library/react": "^15.0.6", "@types/classnames": "^2.2.10", @@ -61,7 +62,6 @@ "father": "^4.0.0", "glob": "^7.1.6", "less": "^4.1.3", - "np": "^7.0.0", "rc-test": "^7.0.3", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/Image.tsx b/src/Image.tsx index 71e2e1f2..868eec71 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -1,8 +1,7 @@ +import type { IDialogPropTypes } from '@rc-component/dialog/lib/IDialogPropTypes'; +import type { GetContainer } from '@rc-component/util/lib/PortalWrapper'; +import useMergedState from '@rc-component/util/lib/hooks/useMergedState'; import cn from 'classnames'; -import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes'; -import { getOffset } from 'rc-util/lib/Dom/css'; -import type { GetContainer } from 'rc-util/lib/PortalWrapper'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; import * as React from 'react'; import { useContext, useMemo, useState } from 'react'; import type { PreviewProps, ToolbarRenderInfoType } from './Preview'; @@ -14,6 +13,7 @@ import type { TransformType } from './hooks/useImageTransform'; import useRegisterImage from './hooks/useRegisterImage'; import useStatus from './hooks/useStatus'; import type { ImageElementProps } from './interface'; +import { getOffset } from './util'; export interface ImgInfo { url: string; @@ -166,7 +166,7 @@ const ImageInternal: CompoundedComponent = props => { // ========================== Preview =========================== const onPreview: React.MouseEventHandler = e => { - const { left, top } = getOffset(e.target); + const { left, top } = getOffset(e.target as HTMLDivElement); if (groupContext) { groupContext.onPreview(imageId, src, left, top); } else { diff --git a/src/Operations.tsx b/src/Operations.tsx index e7091c17..b84af602 100644 --- a/src/Operations.tsx +++ b/src/Operations.tsx @@ -1,7 +1,7 @@ import Portal from '@rc-component/portal'; import classnames from 'classnames'; -import CSSMotion from 'rc-motion'; -import KeyCode from 'rc-util/lib/KeyCode'; +import CSSMotion from '@rc-component/motion'; +import KeyCode from '@rc-component/util/lib/KeyCode'; import * as React from 'react'; import { useContext } from 'react'; import type { ImgInfo } from './Image'; @@ -140,20 +140,20 @@ const Operations: React.FC = props => { const switchPrevNode = showSwitch ? renderOperation({ - icon: left, - onClick: e => handleActive(e, -1), - type: 'prev', - disabled: current === 0, - }) + icon: left, + onClick: e => handleActive(e, -1), + type: 'prev', + disabled: current === 0, + }) : undefined; const switchNextNode = showSwitch ? renderOperation({ - icon: right, - onClick: e => handleActive(e, 1), - type: 'next', - disabled: current === count - 1, - }) + icon: right, + onClick: e => handleActive(e, 1), + type: 'next', + disabled: current === count - 1, + }) : undefined; const flipYNode = renderOperation({ @@ -252,31 +252,31 @@ const Operations: React.FC = props => { {toolbarRender ? toolbarRender(toolbarNode, { - icons: { - prevIcon: switchPrevNode, - nextIcon: switchNextNode, - flipYIcon: flipYNode, - flipXIcon: flipXNode, - rotateLeftIcon: rotateLeftNode, - rotateRightIcon: rotateRightNode, - zoomOutIcon: zoomOutNode, - zoomInIcon: zoomInNode, - }, - actions: { - onActive, - onFlipY, - onFlipX, - onRotateLeft, - onRotateRight, - onZoomOut, - onZoomIn, - onReset, - onClose, - }, - transform, - ...(groupContext ? { current, total: count } : {}), - image, - }) + icons: { + prevIcon: switchPrevNode, + nextIcon: switchNextNode, + flipYIcon: flipYNode, + flipXIcon: flipXNode, + rotateLeftIcon: rotateLeftNode, + rotateRightIcon: rotateRightNode, + zoomOutIcon: zoomOutNode, + zoomInIcon: zoomInNode, + }, + actions: { + onActive, + onFlipY, + onFlipX, + onRotateLeft, + onRotateRight, + onZoomOut, + onZoomIn, + onReset, + onClose, + }, + transform, + ...(groupContext ? { current, total: count } : {}), + image, + }) : toolbarNode} diff --git a/src/Preview.tsx b/src/Preview.tsx index 42e2b400..f1671d23 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -1,8 +1,7 @@ +import type { DialogProps as IDialogPropTypes } from '@rc-component/dialog'; +import Dialog from '@rc-component/dialog'; +import KeyCode from '@rc-component/util/lib/KeyCode'; import classnames from 'classnames'; -import type { DialogProps as IDialogPropTypes } from 'rc-dialog'; -import Dialog from 'rc-dialog'; -import addEventListener from 'rc-util/lib/Dom/addEventListener'; -import KeyCode from 'rc-util/lib/KeyCode'; import React, { useContext, useEffect, useRef, useState } from 'react'; import type { ImgInfo } from './Image'; import Operations from './Operations'; @@ -220,7 +219,7 @@ const Preview: React.FC = props => { setEnableTransition(false); resetTransform(offset < 0 ? 'prev' : 'next'); onChange?.(position, current); - } + }; const onKeyDown = (event: KeyboardEvent) => { if (!visible || !showLeftOrRightSwitches) return; @@ -248,10 +247,10 @@ const Preview: React.FC = props => { }; useEffect(() => { - const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false); + window.addEventListener('keydown', onKeyDown, false); return () => { - onKeyDownListener.remove(); + window.removeEventListener('keydown', onKeyDown); }; }, [visible, showLeftOrRightSwitches, current]); @@ -264,8 +263,9 @@ const Preview: React.FC = props => { className={`${prefixCls}-img`} alt={alt} style={{ - transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale3d(${transform.flipX ? '-' : '' - }${scale}, ${transform.flipY ? '-' : ''}${scale}, 1) rotate(${rotate}deg)`, + transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale3d(${ + transform.flipX ? '-' : '' + }${scale}, ${transform.flipY ? '-' : ''}${scale}, 1) rotate(${rotate}deg)`, transitionDuration: (!enableTransition || isTouching) && '0s', }} fallback={fallback} diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx index d209f2e2..5fc0bc90 100644 --- a/src/PreviewGroup.tsx +++ b/src/PreviewGroup.tsx @@ -1,4 +1,4 @@ -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from '@rc-component/util/lib/hooks/useMergedState'; import * as React from 'react'; import { useState } from 'react'; import type { ImgInfo, ImagePreviewType } from './Image'; diff --git a/src/getFixScaleEleTransPosition.ts b/src/getFixScaleEleTransPosition.ts index 30ade27c..5933714b 100644 --- a/src/getFixScaleEleTransPosition.ts +++ b/src/getFixScaleEleTransPosition.ts @@ -1,4 +1,4 @@ -import { getClientSize } from 'rc-util/lib/Dom/css'; +import { getClientSize } from "./util"; function fixPoint(key: 'x' | 'y', start: number, width: number, clientWidth: number) { const startAddWidth = start + width; diff --git a/src/hooks/useImageTransform.ts b/src/hooks/useImageTransform.ts index fbada917..be119576 100644 --- a/src/hooks/useImageTransform.ts +++ b/src/hooks/useImageTransform.ts @@ -1,6 +1,6 @@ -import { getClientSize } from 'rc-util/lib/Dom/css'; -import isEqual from 'rc-util/lib/isEqual'; -import raf from 'rc-util/lib/raf'; +import { getClientSize } from '../util'; +import isEqual from '@rc-component/util/lib/isEqual'; +import raf from '@rc-component/util/lib/raf'; import { useRef, useState } from 'react'; export type TransformType = { diff --git a/src/hooks/useMouseEvent.ts b/src/hooks/useMouseEvent.ts index 624e52c4..7a2f6278 100644 --- a/src/hooks/useMouseEvent.ts +++ b/src/hooks/useMouseEvent.ts @@ -1,5 +1,4 @@ -import addEventListener from 'rc-util/lib/Dom/addEventListener'; -import { warning } from 'rc-util/lib/warning'; +import { warning } from '@rc-component/util/lib/warning'; import type React from 'react'; import { useEffect, useRef, useState } from 'react'; import getFixScaleEleTransPosition from '../getFixScaleEleTransPosition'; @@ -43,7 +42,7 @@ export default function useMouseEvent( setMoving(true); }; - const onMouseMove: React.MouseEventHandler = event => { + const onMouseMove = (event: MouseEvent) => { if (visible && isMoving) { updateTransform( { @@ -55,7 +54,7 @@ export default function useMouseEvent( } }; - const onMouseUp: React.MouseEventHandler = () => { + const onMouseUp = () => { if (visible && isMoving) { setMoving(false); @@ -98,21 +97,16 @@ export default function useMouseEvent( }; useEffect(() => { - let onTopMouseUpListener; - let onTopMouseMoveListener; - let onMouseUpListener; - let onMouseMoveListener; - if (movable) { - onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false); - onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false); + window.addEventListener('mouseup', onMouseUp, false); + window.addEventListener('mousemove', onMouseMove, false); try { // Resolve if in iframe lost event /* istanbul ignore next */ if (window.top !== window.self) { - onTopMouseUpListener = addEventListener(window.top, 'mouseup', onMouseUp, false); - onTopMouseMoveListener = addEventListener(window.top, 'mousemove', onMouseMove, false); + window.top.addEventListener('mouseup', onMouseUp, false); + window.top.addEventListener('mousemove', onMouseMove, false); } } catch (error) { /* istanbul ignore next */ @@ -121,12 +115,12 @@ export default function useMouseEvent( } return () => { - onMouseUpListener?.remove(); - onMouseMoveListener?.remove(); - /* istanbul ignore next */ - onTopMouseUpListener?.remove(); - /* istanbul ignore next */ - onTopMouseMoveListener?.remove(); + window.removeEventListener('mouseup', onMouseUp); + window.removeEventListener('mousemove', onMouseMove); + // /* istanbul ignore next */ + window.top?.removeEventListener('mouseup', onMouseUp); + // /* istanbul ignore next */ + window.top?.removeEventListener('mousemove', onMouseMove); }; }, [visible, isMoving, x, y, rotate, movable]); diff --git a/src/hooks/useTouchEvent.ts b/src/hooks/useTouchEvent.ts index b89960ba..8d17a45b 100644 --- a/src/hooks/useTouchEvent.ts +++ b/src/hooks/useTouchEvent.ts @@ -1,4 +1,3 @@ -import addEventListener from 'rc-util/lib/Dom/addEventListener'; import type React from 'react'; import { useEffect, useRef, useState } from 'react'; import getFixScaleEleTransPosition from '../getFixScaleEleTransPosition'; @@ -164,14 +163,17 @@ export default function useTouchEvent( }; useEffect(() => { - let onTouchMoveListener; + const preventDefault = (e: TouchEvent) => { + e.preventDefault(); + }; + if (visible && movable) { - onTouchMoveListener = addEventListener(window, 'touchmove', e => e.preventDefault(), { + window.addEventListener('touchmove', preventDefault, { passive: false, }); } return () => { - onTouchMoveListener?.remove(); + window.removeEventListener('touchmove', preventDefault); }; }, [visible, movable]); diff --git a/src/util.ts b/src/util.ts index c841a112..8a407809 100644 --- a/src/util.ts +++ b/src/util.ts @@ -6,3 +6,31 @@ export function isImageValid(src: string) { img.src = src; }); } + +// ============================= Legacy ============================= +// TODO: Remove this. It's copy directly from legacy `rc-util` package +export function getOffset(node: HTMLElement) { + const box = node.getBoundingClientRect(); + const docElem = document.documentElement; + + // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft + return { + left: + box.left + + (window.pageXOffset || docElem.scrollLeft) - + (docElem.clientLeft || document.body.clientLeft || 0), + top: + box.top + + (window.pageYOffset || docElem.scrollTop) - + (docElem.clientTop || document.body.clientTop || 0), + }; +} + +export function getClientSize() { + const width = document.documentElement.clientWidth; + const height = window.innerHeight || document.documentElement.clientHeight; + return { + width, + height, + }; +} diff --git a/tests/__snapshots__/controlled.test.tsx.snap b/tests/__snapshots__/controlled.test.tsx.snap index 528ae1ba..4fec6b2a 100644 --- a/tests/__snapshots__/controlled.test.tsx.snap +++ b/tests/__snapshots__/controlled.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Controlled With previewVisible 1`] = ` tabindex="0" >
{ diff --git a/tests/previewGroup.test.tsx b/tests/previewGroup.test.tsx index 883d4c6a..ad38e78e 100644 --- a/tests/previewGroup.test.tsx +++ b/tests/previewGroup.test.tsx @@ -1,5 +1,5 @@ import { act, fireEvent, render } from '@testing-library/react'; -import KeyCode from 'rc-util/lib/KeyCode'; +import KeyCode from '@rc-component/util/lib/KeyCode'; import React from 'react'; import Image from '../src'; diff --git a/tests/previewTouch.test.tsx b/tests/previewTouch.test.tsx index aa4ede5a..0d63553f 100644 --- a/tests/previewTouch.test.tsx +++ b/tests/previewTouch.test.tsx @@ -1,5 +1,5 @@ import { act, fireEvent, render } from '@testing-library/react'; -import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; +import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; import React from 'react'; import Image from '../src'; diff --git a/tsconfig.json b/tsconfig.json index d754de4d..4a350877 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "paths": { "@/*": ["src/*"], "@@/*": [".dumi/tmp/*"], - "rc-image": ["src/index.ts"] + "@rc-component/image": ["src/index.ts"] } } }