refactor: Wrap affix with FC (#34254)

* test: fix * chore: ts fix * chore: update ts def * test: fix test
ant-design · Mar 2, 2022 · a05a867 · a05a867
1 parent cfca106
commit a05a867
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx
@@ -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 () => {

diff --git a/components/affix/index.tsx b/components/affix/index.tsx
@@ -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;
diff --git a/components/affix/utils.ts b/components/affix/utils.ts
@@ -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) {