refactor: Wrap affix with FC (#34254)

* test: fix

* chore: ts fix

* chore: update ts def

* test: fix test
This commit is contained in:
二货机器人 2022-03-02 17:05:59 +08:00 committed by GitHub
parent cfca106c4a
commit a05a8674e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 11 deletions

View File

@ -17,7 +17,7 @@ class AffixMounter extends React.Component<{
}> {
private container: HTMLDivElement;
public affix: Affix;
public affix: React.Component<AffixProps, AffixState>;
componentDidMount() {
this.container.addEventListener = jest
@ -58,7 +58,7 @@ describe('Affix Render', () => {
const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
let affixMounterWrapper: ReactWrapper<unknown, unknown, AffixMounter>;
let affixWrapper: ReactWrapper<AffixProps, AffixState, Affix>;
let affixWrapper: ReactWrapper<AffixProps, AffixState, React.Component<AffixProps, AffixState>>;
const classRect: Record<string, DOMRect> = {
container: {
@ -157,9 +157,9 @@ describe('Affix Render', () => {
const getTarget = () => container;
affixWrapper = mount(<Affix target={getTarget}>{null}</Affix>);
affixWrapper.setProps({ target: () => null });
expect(affixWrapper.instance().state.status).toBe(0);
expect(affixWrapper.instance().state.affixStyle).toBe(undefined);
expect(affixWrapper.instance().state.placeholderStyle).toBe(undefined);
expect(affixWrapper.find('Affix').last().state().status).toBe(0);
expect(affixWrapper.find('Affix').last().state().affixStyle).toBe(undefined);
expect(affixWrapper.find('Affix').last().state().placeholderStyle).toBe(undefined);
});
it('instance change', async () => {

View File

@ -126,7 +126,7 @@ class Affix extends React.Component<AffixProps, AffixState> {
getOffsetTop = () => {
const { offsetBottom, offsetTop } = this.props;
return (offsetBottom === undefined && offsetTop === undefined) ? 0 : offsetTop;
return offsetBottom === undefined && offsetTop === undefined ? 0 : offsetTop;
};
getOffsetBottom = () => this.props.offsetBottom;
@ -286,4 +286,10 @@ class Affix extends React.Component<AffixProps, AffixState> {
}
}
export default Affix;
const AffixFC = React.forwardRef<Affix, AffixProps>((props, ref) => <Affix {...props} ref={ref} />);
if (process.env.NODE_ENV !== 'production') {
AffixFC.displayName = 'Affix';
}
export default AffixFC;

View File

@ -1,5 +1,4 @@
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import Affix from '.';
export type BindElement = HTMLElement | Window | null | undefined;
@ -41,7 +40,7 @@ const TRIGGER_EVENTS = [
interface ObserverEntity {
target: HTMLElement | Window;
affixList: Affix[];
affixList: any[];
eventHandlers: { [eventName: string]: any };
}
@ -52,7 +51,7 @@ export function getObserverEntities() {
return observerEntities;
}
export function addObserveTarget(target: HTMLElement | Window | null, affix: Affix): void {
export function addObserveTarget<T>(target: HTMLElement | Window | null, affix: T): void {
if (!target) return;
let entity: ObserverEntity | undefined = observerEntities.find(item => item.target === target);
@ -78,7 +77,7 @@ export function addObserveTarget(target: HTMLElement | Window | null, affix: Aff
}
}
export function removeObserveTarget(affix: Affix): void {
export function removeObserveTarget<T>(affix: T): void {
const observerEntity = observerEntities.find(oriObserverEntity => {
const hasAffix = oriObserverEntity.affixList.some(item => item === affix);
if (hasAffix) {