From 72adea8d7fe120eac0b50bacac047ac31c324821 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 16 Dec 2022 10:53:05 +0800 Subject: [PATCH 1/5] docs: use dumi --- .fatherrc.js | 14 +++++--------- docs/demo/follow.md | 3 +++ docs/demo/point.md | 3 +++ docs/demo/simple.md | 3 +++ {examples => docs/examples}/follow.tsx | 0 {examples => docs/examples}/point.js | 0 {examples => docs/examples}/simple.js | 0 package.json | 13 ++++++++----- src/Align.tsx | 2 +- src/hooks/useBuffer.tsx | 4 ++-- tsconfig.json | 16 +++++++++++----- 11 files changed, 36 insertions(+), 22 deletions(-) create mode 100644 docs/demo/follow.md create mode 100644 docs/demo/point.md create mode 100644 docs/demo/simple.md rename {examples => docs/examples}/follow.tsx (100%) rename {examples => docs/examples}/point.js (100%) rename {examples => docs/examples}/simple.js (100%) diff --git a/.fatherrc.js b/.fatherrc.js index 912aa0a..4ddbafd 100644 --- a/.fatherrc.js +++ b/.fatherrc.js @@ -1,9 +1,5 @@ -export default { - cjs: 'babel', - esm: { type: 'babel', importLibToEs: true }, - preCommit: { - eslint: true, - prettier: true, - }, - runtimeHelpers: true, -}; +import { defineConfig } from 'father'; + +export default defineConfig({ + plugins: ['@rc-component/father-plugin'], +}); \ No newline at end of file diff --git a/docs/demo/follow.md b/docs/demo/follow.md new file mode 100644 index 0000000..eb13ac0 --- /dev/null +++ b/docs/demo/follow.md @@ -0,0 +1,3 @@ +## Follow + + \ No newline at end of file diff --git a/docs/demo/point.md b/docs/demo/point.md new file mode 100644 index 0000000..1cea61d --- /dev/null +++ b/docs/demo/point.md @@ -0,0 +1,3 @@ +## Point + + \ No newline at end of file diff --git a/docs/demo/simple.md b/docs/demo/simple.md new file mode 100644 index 0000000..4ddd2a9 --- /dev/null +++ b/docs/demo/simple.md @@ -0,0 +1,3 @@ +## Simple + + \ No newline at end of file diff --git a/examples/follow.tsx b/docs/examples/follow.tsx similarity index 100% rename from examples/follow.tsx rename to docs/examples/follow.tsx diff --git a/examples/point.js b/docs/examples/point.js similarity index 100% rename from examples/point.js rename to docs/examples/point.js diff --git a/examples/simple.js b/docs/examples/simple.js similarity index 100% rename from examples/simple.js rename to docs/examples/simple.js diff --git a/package.json b/package.json index 28f29a5..2495e98 100644 --- a/package.json +++ b/package.json @@ -25,13 +25,13 @@ "main": "./lib/index", "module": "./es/index", "scripts": { - "start": "cross-env NODE_ENV=development father doc dev --storybook", - "build": "father doc build --storybook", + "start": "dumi dev", + "build": "dumi build", "compile": "father build", "tsc": "tsc --noEmit", "prepublishOnly": "npm run compile && np --yolo --no-publish", "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js", - "test": "father test", + "test": "rc-test", "coverage": "father test --coverage", "now-build": "npm run build" }, @@ -48,17 +48,20 @@ "resize-observer-polyfill": "^1.5.1" }, "devDependencies": { + "@rc-component/father-plugin": "^1.0.0", "@types/jest": "^24.0.18", "@types/react": "^16.8.19", "@types/react-dom": "^16.8.4", "@types/warning": "^3.0.0", "cross-env": "^7.0.3", + "dumi": "^2.0.15", "enzyme": "^3.3.0", - "enzyme-adapter-react-16": "^1.14.0", + "enzyme-adapter-react-16": "^1.15.6", "enzyme-to-json": "^3.4.0", "eslint": "^7.1.0", - "father": "^2.13.2", + "father": "^4.0.0", "np": "^5.0.3", + "rc-test": "^7.0.14", "typescript": "^4.0.3" } } diff --git a/src/Align.tsx b/src/Align.tsx index 234800f..9ce0e96 100644 --- a/src/Align.tsx +++ b/src/Align.tsx @@ -68,7 +68,7 @@ const Align: React.ForwardRefRenderFunction = ( forceAlignPropsRef.current.align = align; forceAlignPropsRef.current.onAlign = onAlign; - const [forceAlign, cancelForceAlign] = useBuffer(() => { + const [forceAlign, cancelForceAlign] = useBuffer((force) => { const { disabled: latestDisabled, target: latestTarget, diff --git a/src/hooks/useBuffer.tsx b/src/hooks/useBuffer.tsx index e024e03..72cc711 100644 --- a/src/hooks/useBuffer.tsx +++ b/src/hooks/useBuffer.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export default (callback: () => boolean, buffer: number) => { +export default (callback: (force?: boolean) => boolean, buffer: number) => { const calledRef = React.useRef(false); const timeoutRef = React.useRef(null); @@ -12,7 +12,7 @@ export default (callback: () => boolean, buffer: number) => { cancelTrigger(); if (!calledRef.current || force === true) { - if (callback() === false) { + if (callback(force) === false) { // Not delay since callback cancelled self return; } diff --git a/tsconfig.json b/tsconfig.json index f6d9605..c5bb831 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,14 +3,20 @@ "target": "esnext", "moduleResolution": "node", "baseUrl": "./", - "jsx": "preserve", + "jsx": "react", "declaration": true, "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": ["src/.umi/*"], - "rc-dialog": ["src/index.ts"] + "@/*": [ + "src/*" + ], + "@@/*": [ + "src/.umi/*" + ], + "rc-dialog": [ + "src/index.ts" + ] } } -} +} \ No newline at end of file From 7c04d36532e2acf03b8c35e7360f1ea2713e786f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 16 Dec 2022 11:30:48 +0800 Subject: [PATCH 2/5] docs: use dumi --- .dumirc.ts | 8 ++++++++ .gitignore | 1 + docs/demo/follow.md | 9 +++++++-- docs/demo/point.md | 9 +++++++-- docs/demo/simple.md | 9 +++++++-- docs/examples/follow.tsx | 3 +-- docs/examples/{point.js => point.tsx} | 2 +- docs/examples/{simple.js => simple.tsx} | 17 +++++++++++++++-- docs/index.md | 7 +++++++ package.json | 4 ++-- src/Align.tsx | 4 ++-- src/index.ts | 2 ++ tsconfig.json | 2 +- 13 files changed, 61 insertions(+), 16 deletions(-) create mode 100644 .dumirc.ts rename docs/examples/{point.js => point.tsx} (96%) rename docs/examples/{simple.js => simple.tsx} (92%) create mode 100644 docs/index.md diff --git a/.dumirc.ts b/.dumirc.ts new file mode 100644 index 0000000..6d269dd --- /dev/null +++ b/.dumirc.ts @@ -0,0 +1,8 @@ +import { defineConfig } from 'dumi'; + +export default defineConfig({ + themeConfig: { + name: 'Align', + }, + mfsu: false, +}); \ No newline at end of file diff --git a/.gitignore b/.gitignore index 36d90d8..64757d7 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,4 @@ es coverage package-lock.json yarn.lock +.dumi \ No newline at end of file diff --git a/docs/demo/follow.md b/docs/demo/follow.md index eb13ac0..c75cf5b 100644 --- a/docs/demo/follow.md +++ b/docs/demo/follow.md @@ -1,3 +1,8 @@ -## Follow +--- +title: Follow +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/demo/point.md b/docs/demo/point.md index 1cea61d..1a62de8 100644 --- a/docs/demo/point.md +++ b/docs/demo/point.md @@ -1,3 +1,8 @@ -## Point +--- +title: Point +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/demo/simple.md b/docs/demo/simple.md index 4ddd2a9..4f6d599 100644 --- a/docs/demo/simple.md +++ b/docs/demo/simple.md @@ -1,3 +1,8 @@ -## Simple +--- +title: Simple +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/examples/follow.tsx b/docs/examples/follow.tsx index d20358b..63928d5 100644 --- a/docs/examples/follow.tsx +++ b/docs/examples/follow.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Align from '../src'; +import Align from '../../src'; const Demo = () => { const [width, setWidth] = React.useState(100); @@ -51,7 +51,6 @@ const Demo = () => {
{ state = { monitor: true, random: false, @@ -15,6 +24,10 @@ class Test extends Component { sourceWidth: 50, }; + id: NodeJS.Timer; + $container: HTMLElement; + $align: RefAlign; + componentDidMount() { this.id = setInterval(() => { const { random } = this.state; diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..59385d5 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,7 @@ +--- +hero: + title: rc-align + description: align ui component for react +--- + + \ No newline at end of file diff --git a/package.json b/package.json index 2495e98..8ed3f9e 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,8 @@ "devDependencies": { "@rc-component/father-plugin": "^1.0.0", "@types/jest": "^24.0.18", - "@types/react": "^16.8.19", - "@types/react-dom": "^16.8.4", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", "@types/warning": "^3.0.0", "cross-env": "^7.0.3", "dumi": "^2.0.15", diff --git a/src/Align.tsx b/src/Align.tsx index 9ce0e96..d8b4048 100644 --- a/src/Align.tsx +++ b/src/Align.tsx @@ -68,7 +68,7 @@ const Align: React.ForwardRefRenderFunction = ( forceAlignPropsRef.current.align = align; forceAlignPropsRef.current.onAlign = onAlign; - const [forceAlign, cancelForceAlign] = useBuffer((force) => { + const [forceAlign, cancelForceAlign] = useBuffer(() => { const { disabled: latestDisabled, target: latestTarget, @@ -184,7 +184,7 @@ const Align: React.ForwardRefRenderFunction = ( // ===================== Render ===================== if (React.isValidElement(childNode)) { - childNode = React.cloneElement(childNode, { + childNode = React.cloneElement(childNode, { ref: composeRef((childNode as any).ref, nodeRef), }); } diff --git a/src/index.ts b/src/index.ts index cbb33dc..020f8e8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,6 @@ // export this package's api import Align from './Align'; +export type { RefAlign } from './Align'; + export default Align; diff --git a/tsconfig.json b/tsconfig.json index c5bb831..9e4d9bf 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,7 @@ "@@/*": [ "src/.umi/*" ], - "rc-dialog": [ + "rc-align": [ "src/index.ts" ] } From eb4585b4346d9e020a44c33c69497ac860b20977 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 16 Dec 2022 12:10:43 +0800 Subject: [PATCH 3/5] chore: adjust --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8ed3f9e..fc9791f 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "compile": "father build", "tsc": "tsc --noEmit", "prepublishOnly": "npm run compile && np --yolo --no-publish", - "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js", + "lint": "eslint src/ docs/ --ext .tsx,.ts,.jsx,.js", "test": "rc-test", "coverage": "father test --coverage", "now-build": "npm run build" From c97b389088998f0ee9d02b6722680700adc7c252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 16 Dec 2022 14:44:03 +0800 Subject: [PATCH 4/5] test: mig test --- jest.config.js | 1 - package.json | 39 ++++++++++----------- tests/{element.test.js => element.test.tsx} | 27 +++++++------- 3 files changed, 34 insertions(+), 33 deletions(-) rename tests/{element.test.js => element.test.tsx} (81%) diff --git a/jest.config.js b/jest.config.js index 61d0430..e180b24 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,2 @@ module.exports = { - snapshotSerializers: [require.resolve('enzyme-to-json/serializer')], }; \ No newline at end of file diff --git a/package.json b/package.json index fc9791f..0fa7d36 100644 --- a/package.json +++ b/package.json @@ -8,36 +8,32 @@ "react-align", "align" ], - "files": [ - "lib", - "es" - ], "homepage": "http://github.com/react-component/align", - "author": "", + "bugs": { + "url": "http://github.com/react-component/align/issues" + }, "repository": { "type": "git", "url": "git@github.com:react-component/align.git" }, - "bugs": { - "url": "http://github.com/react-component/align/issues" - }, "license": "MIT", + "author": "", "main": "./lib/index", "module": "./es/index", + "files": [ + "lib", + "es" + ], "scripts": { - "start": "dumi dev", "build": "dumi build", "compile": "father build", - "tsc": "tsc --noEmit", - "prepublishOnly": "npm run compile && np --yolo --no-publish", + "coverage": "father test --coverage", "lint": "eslint src/ docs/ --ext .tsx,.ts,.jsx,.js", + "now-build": "npm run build", + "prepublishOnly": "npm run compile && np --yolo --no-publish", + "start": "dumi dev", "test": "rc-test", - "coverage": "father test --coverage", - "now-build": "npm run build" - }, - "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0" + "tsc": "tsc --noEmit" }, "dependencies": { "@babel/runtime": "^7.10.1", @@ -55,13 +51,16 @@ "@types/warning": "^3.0.0", "cross-env": "^7.0.3", "dumi": "^2.0.15", - "enzyme": "^3.3.0", - "enzyme-adapter-react-16": "^1.15.6", - "enzyme-to-json": "^3.4.0", "eslint": "^7.1.0", "father": "^4.0.0", "np": "^5.0.3", "rc-test": "^7.0.14", + "react": "^18.0.0", + "react-dom": "^18.0.0", "typescript": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" } } diff --git a/tests/element.test.js b/tests/element.test.tsx similarity index 81% rename from tests/element.test.js rename to tests/element.test.tsx index 29064cc..742761c 100644 --- a/tests/element.test.js +++ b/tests/element.test.tsx @@ -1,6 +1,6 @@ /* eslint-disable class-methods-use-this */ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import Align from '../src'; @@ -23,7 +23,9 @@ describe('element align', () => { points: ['bc', 'tc'], }; - class Test extends React.Component { + class Test extends React.Component { + $target: any; + getTarget = () => this.$target; targetRef = ele => { @@ -56,7 +58,7 @@ describe('element align', () => { it('resize', () => { const onAlign = jest.fn(); - const wrapper = mount(); + const { unmount, rerender } = render(); expect(onAlign).toHaveBeenCalled(); // Window resize @@ -67,23 +69,23 @@ describe('element align', () => { // Not listen resize onAlign.mockReset(); - wrapper.setProps({ monitorWindowResize: false }); + rerender(); window.dispatchEvent(new Event('resize')); jest.runAllTimers(); expect(onAlign).not.toHaveBeenCalled(); // Remove should not crash - wrapper.setProps({ monitorWindowResize: true }); - wrapper.unmount(); + rerender(); + unmount(); }); it('disabled should trigger align', () => { const onAlign = jest.fn(); - const wrapper = mount(); + const { rerender } = render(); expect(onAlign).not.toHaveBeenCalled(); - wrapper.setProps({ disabled: false }); + rerender(); jest.runAllTimers(); expect(onAlign).toHaveBeenCalled(); }); @@ -91,13 +93,14 @@ describe('element align', () => { // https://github.com/ant-design/ant-design/issues/31717 it('changing align should trigger onAlign', () => { const onAlign = jest.fn(); - const wrapper = mount(); + const { rerender } = render(); expect(onAlign).toHaveBeenCalledTimes(1); expect(onAlign).toHaveBeenLastCalledWith( expect.any(HTMLElement), expect.objectContaining({ points: ['cc', 'cc'] }), ); - wrapper.setProps({ align: { points: ['cc', 'tl'] } }); + // wrapper.setProps({ align: { points: ['cc', 'tl'] } }); + rerender(); jest.runAllTimers(); expect(onAlign).toHaveBeenCalledTimes(2); expect(onAlign).toHaveBeenLastCalledWith( @@ -124,7 +127,7 @@ describe('element align', () => { const onAlign1 = jest.fn(); const onAlign2 = jest.fn(); - const wrapper = mount(); + const { rerender } = render(); // Make sure the initial render's call to onAlign does not matter. onAlign1.mockReset(); @@ -132,7 +135,7 @@ describe('element align', () => { // Re-render the component with the new callback. Expect from here on all // callbacks to call the new onAlign2. - wrapper.setProps({ onAlign: onAlign2 }); + rerender(); // Now the timeout is executed, and we expect the onAlign2 callback to // receive the call, not onAlign1. From 00e6bbb99b9d2ceda49a81b75e06f0afdf6d7fd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 16 Dec 2022 14:48:41 +0800 Subject: [PATCH 5/5] test: all test case --- tests/point.test.js | 33 ++++++++++++++++++--------- tests/{util.test.js => util.test.tsx} | 25 +++++++++----------- 2 files changed, 33 insertions(+), 25 deletions(-) rename tests/{util.test.js => util.test.tsx} (86%) diff --git a/tests/point.test.js b/tests/point.test.js index 3bf020a..19ae99b 100644 --- a/tests/point.test.js +++ b/tests/point.test.js @@ -1,25 +1,27 @@ /* eslint-disable class-methods-use-this */ +import { render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; import Align from '../src'; describe('point align', () => { function createAlign(props) { - return mount( + return (
- , + ); } it('not pass point', () => { const onAlign = jest.fn(); - createAlign({ - align: { points: ['cc'] }, - target: null, - onAlign, - }); + render( + createAlign({ + align: { points: ['cc'] }, + target: null, + onAlign, + }), + ); expect(onAlign).not.toHaveBeenCalled(); }); @@ -27,15 +29,24 @@ describe('point align', () => { it('pass point', () => { jest.useFakeTimers(); const onAlign = jest.fn(); - const wrapper = createAlign({ + + const sharedProps = { align: { points: ['tc'] }, target: null, onAlign, - }); + }; + + const { rerender } = render(createAlign(sharedProps)); expect(onAlign).not.toHaveBeenCalled(); - wrapper.setProps({ target: { pageX: 1128, pageY: 903 } }); + rerender( + createAlign({ + ...sharedProps, + target: { pageX: 1128, pageY: 903 }, + }), + ); + jest.runAllTimers(); expect(onAlign).toHaveBeenCalled(); diff --git a/tests/util.test.js b/tests/util.test.tsx similarity index 86% rename from tests/util.test.js rename to tests/util.test.tsx index f1d4795..86c415b 100644 --- a/tests/util.test.js +++ b/tests/util.test.tsx @@ -1,11 +1,15 @@ -import { isSamePoint, monitorResize } from '../src/util'; +/* eslint-disable @typescript-eslint/no-this-alias */ import 'resize-observer-polyfill'; +import { isSamePoint, monitorResize } from '../src/util'; + +let observer: any; -let observer; -// eslint-disable-next-line arrow-body-style jest.mock('resize-observer-polyfill', () => { return class ResizeObserverMock { + onResize: any; + element: any; + constructor(onResize) { this.onResize = onResize; observer = this; @@ -51,20 +55,13 @@ describe('util', () => { ), ).toBeTruthy(); expect( - isSamePoint( - { pageX: 0, pageY: 2, clientX: 3, clientY: 4 }, - { clientX: 5, clientY: 4 }, - ), + isSamePoint({ pageX: 0, pageY: 2, clientX: 3, clientY: 4 }, { clientX: 5, clientY: 4 }), ).toBeFalsy(); }); it('null should be false', () => { - expect( - isSamePoint({ pageX: 0, pageY: 2, clientX: 3, clientY: 4 }, null), - ).toBeFalsy(); - expect( - isSamePoint(null, { pageX: 0, pageY: 2, clientX: 3, clientY: 4 }), - ).toBeFalsy(); + expect(isSamePoint({ pageX: 0, pageY: 2, clientX: 3, clientY: 4 }, null)).toBeFalsy(); + expect(isSamePoint(null, { pageX: 0, pageY: 2, clientX: 3, clientY: 4 })).toBeFalsy(); }); it('2 empty should be false', () => { expect(isSamePoint({}, {})).toBeFalsy(); @@ -82,7 +79,7 @@ describe('util', () => { }); document.body.appendChild(element); jest.useFakeTimers(); - global.requestAnimationFrame = fn => { + (global as any).requestAnimationFrame = fn => { setTimeout(fn, 16); }; });