{
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/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 28f29a5..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": "cross-env NODE_ENV=development father doc dev --storybook",
- "build": "father doc build --storybook",
+ "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",
"coverage": "father test --coverage",
- "now-build": "npm run build"
- },
- "peerDependencies": {
- "react": ">=16.9.0",
- "react-dom": ">=16.9.0"
+ "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",
+ "tsc": "tsc --noEmit"
},
"dependencies": {
"@babel/runtime": "^7.10.1",
@@ -48,17 +44,23 @@
"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/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
"@types/warning": "^3.0.0",
"cross-env": "^7.0.3",
- "enzyme": "^3.3.0",
- "enzyme-adapter-react-16": "^1.14.0",
- "enzyme-to-json": "^3.4.0",
+ "dumi": "^2.0.15",
"eslint": "^7.1.0",
- "father": "^2.13.2",
+ "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/src/Align.tsx b/src/Align.tsx
index 234800f..d8b4048 100644
--- a/src/Align.tsx
+++ b/src/Align.tsx
@@ -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/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/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/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.
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);
};
});
diff --git a/tsconfig.json b/tsconfig.json
index f6d9605..9e4d9bf 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-align": [
+ "src/index.ts"
+ ]
}
}
-}
+}
\ No newline at end of file