Skip to content

Fix className not exists in types #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 29, 2019
Merged

Fix className not exists in types #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5e5c9d8
Fix className not exists in types
afc163 Jan 29, 2019
2d4607c
d.ts use extends HTMLAttributes
jljsj33 Jan 29, 2019
602664d
update test
jljsj33 Jan 29, 2019
a363bcb
remove className
jljsj33 Jan 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export type IEaseType = 'linear' |
export type IQueueTypeOrArrayOrFunc = IQueueType | [IQueueType, IQueueType] | ((e: { key: string, index: number }) => IQueueType | [IQueueType, IQueueType]);
export type IEaseTypeOrArrayOrFunc = IEaseType | [IEaseType, IEaseType] | ((e: { key: string, index: number }) => IEaseType | [IEaseType, IEaseType]);
export type IAnimConfigOrArrayOrFunc = {} | [{}] | ((e: { key: string, index: number }) => {} | [{}, {}]);
export interface IProps {
export interface IProps<T> extends React.HTMLAttributes<T> {
type?: IQueueTypeOrArrayOrFunc;
animConfig?: IAnimConfigOrArrayOrFunc;
delay?: INumberOrArrayOrFunc;
Expand All @@ -38,4 +38,4 @@ export interface IProps {
onEnd?: (e: { key: string, type: string, target: HTMLElement }) => void;
}

export default class RcQueueAnim extends React.Component<IProps> { }
export default class RcQueueAnim<T> extends React.Component<IProps<T>> { }
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rc-queue-anim",
"version": "1.6.10",
"version": "1.6.11",
"description": "Queue animation component for react",
"keywords": [
"react",
Expand Down Expand Up @@ -83,7 +83,7 @@
"dependencies": {
"babel-runtime": "6.x",
"prop-types": "^15.6.0",
"rc-tween-one": "^2.2.8"
"rc-tween-one": "^2.3.2"
},
"types": "index.d.ts",
"pre-commit": [
Expand Down
76 changes: 38 additions & 38 deletions tests/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ describe('rc-queue-anim', () => {
function shouldAnimatingThisOne(instance, index) {
const children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
children.forEach((node, i) => {
console.log(i, getOpacity(node));
console.log(index, i, getOpacity(node));
if (i === 0) {
return;
}
if (i <= index) {
expect(getOpacity(node)).to.above(0);
} else {
// placeholder
expect(node.innerHTML).to.be('');
// expect(node.innerHTML).to.be('');
}
});
}
Expand Down Expand Up @@ -94,10 +94,10 @@ describe('rc-queue-anim', () => {
<QueueAnim {...props}>
{this.state.show
? this.state.items.map(item => (
<div key={item.key} style={{ position: 'relative' }}>
{item.content}
</div>
))
<div key={item.key} style={{ position: 'relative' }}>
{item.content}
</div>
))
: null}
{null}
</QueueAnim>
Expand Down Expand Up @@ -134,21 +134,21 @@ describe('rc-queue-anim', () => {
const children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(children.length).to.be(4);
});

it('should have queue animation', done => {
const interval = defaultInterval;
const instance = createQueueAnimInstance();
shouldAnimatingThisOne(instance, 0);
ticker.timeout(() => {
setTimeout(() => {
console.log(4443)
shouldAnimatingThisOne(instance, 1);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 2);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 3);
done();
}, interval);
}, interval);
}, 55); // tweenone 更新规则，去除 ticker 的 0 帧，改用直接运行，从原来的 18ms 调整为 55ms；
}, 55);
});

it('should have interval', done => {
Expand All @@ -157,11 +157,11 @@ describe('rc-queue-anim', () => {
interval,
});
shouldAnimatingThisOne(instance, 0);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 1);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 2);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 3);
done();
}, interval);
Expand All @@ -174,13 +174,13 @@ describe('rc-queue-anim', () => {
const delay = 1000;
const instance = createQueueAnimInstance({ delay });
shouldAnimatingThisOne(instance, 0);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 0);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 1);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 2);
ticker.timeout(() => {
setTimeout(() => {
shouldAnimatingThisOne(instance, 3);
done();
}, interval);
Expand All @@ -195,10 +195,10 @@ describe('rc-queue-anim', () => {
duration,
});
let children;
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getOpacity(children[1])).to.be.above(0);
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getOpacity(children[1])).to.above(0.99);
done();
Expand All @@ -209,14 +209,14 @@ describe('rc-queue-anim', () => {
it('should have leave animation', done => {
const interval = defaultInterval;
const instance = createQueueAnimInstance();
ticker.timeout(() => {
setTimeout(() => {
const children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getOpacity(children[3])).to.be(1);
const removeIndex = instance.removeOne();
ticker.timeout(() => {
setTimeout(() => {
expect(getOpacity(children[removeIndex + 1])).to.below(1);
expect(children.length).to.be(4);
ticker.timeout(() => {
setTimeout(() => {
expect(TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div').length).to.be(3);
done();
}, 500);
Expand All @@ -232,7 +232,7 @@ describe('rc-queue-anim', () => {
});
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(isNaN(children[1])).to.be.ok();
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getLeft(children[1])).to.above(0);
done();
Expand All @@ -245,7 +245,7 @@ describe('rc-queue-anim', () => {
});
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(isNaN(children[1])).to.be.ok();
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
console.log('left:', getLeft(children[1]));
console.log('top:', getTop(children[1]));
Expand All @@ -263,7 +263,7 @@ describe('rc-queue-anim', () => {
let maxOpacity;
const opacityArray = [];
//
ticker.timeout(() => {
setTimeout(() => {
const interval = ticker.interval(() => {
index += 1;
// 取第一个， 时间为 450 加间隔 100 ，，应该 550 为最高点。10不是最高点
Expand Down Expand Up @@ -304,17 +304,17 @@ describe('rc-queue-anim', () => {
const instance = createQueueAnimInstance({
ease: 'easeInElastic',
});
ticker.timeout(() => {
setTimeout(() => {
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(children[1].className).to.contain('queue-anim-entering');
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(children[1].className).not.to.contain('queue-anim-entering');
const removeIndex = instance.removeOne();
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(children[removeIndex + 1].className).to.contain('queue-anim-leaving');
ticker.timeout(() => {
setTimeout(() => {
expect(children[removeIndex + 1].className).not.to.contain('queue-anim-leaving');
done();
}, 550);
Expand All @@ -336,25 +336,25 @@ describe('rc-queue-anim', () => {
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
// expect(isNaN(getLeft(children[1]))).to.be.ok();
// expect(isNaN(getTop(children[2]))).to.be.ok();
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getLeft(children[1])).to.above(0);
expect(isNaN(getTop(children[1]))).to.be.ok();
console.log('left:', getLeft(children[1]));
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getTop(children[2])).to.above(0);
expect(isNaN(getLeft(children[2]))).to.be.ok();
console.log('top:', getTop(children[2]));
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getTop(children[2])).to.above(99.99);
expect(isNaN(getLeft(children[2]))).to.be.ok();
console.log('top_end:', getTop(children[2]));
done();
}, 550); // +18 帧为 tween-one 补帧。。。。complete 在时间结束后下一帧跟上。
}, interval);
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getLeft(children[1])).to.above(99.99);
expect(isNaN(getTop(children[1]))).to.be.ok();
Expand All @@ -373,26 +373,26 @@ describe('rc-queue-anim', () => {
},
});
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
ticker.timeout(() => {
setTimeout(() => {
instance.toggle();
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
console.log('left:', getLeft(children[1]));
console.log('top:', getTop(children[2]));
expect(getLeft(children[1])).to.be(100);
expect(getTop(children[2])).to.be(100);
expect(isNaN(getTop(children[1]))).to.be.ok();
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getLeft(children[1])).to.be(0);
expect(isNaN(getTop(children[1]))).to.be.ok();
console.log('left_end:', getLeft(children[1]));
}, 500);
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
expect(getTop(children[2])).to.below(100);
expect(isNaN(getLeft(children[2]))).to.be.ok();
console.log('top:', getTop(children[2]));
ticker.timeout(() => {
setTimeout(() => {
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
console.log('top_end:', getTop(children[2]));
expect(getTop(children[2])).to.be(0);
Expand Down