m-pull-to-refresh icon indicating copy to clipboard operation
m-pull-to-refresh copied to clipboard

Does getScrollContainer should return type HTMLElement instead of ReactNode?

Open ndhungw opened this issue 3 years ago • 0 comments

When using this lib inside a tsx file, like the code below

// ...
import RMCPullToRefresh from "rmc-pull-to-refresh";

const PullToRefresh = ({ onRefresh, children }: IPullToRefreshProps) => {
  // my other logics

  return (
    <RMCPullToRefresh
      getScrollContainer={() => document.body}
      direction="down"
      scale={1}
      distanceToRefresh={REFRESH_DISTANCE}
      onRefresh={onRefresh}
      indicator={{
        activate: <ActivateIndicator />,
        deactivate: <DeactivateIndicator />,
        finish: <FinishIndicator />,
        release: <ReleaseIndicator />,
      }}
      damping={REFRESH_DISTANCE}
    >
      {children}
    </RMCPullToRefresh>
  );
};

I got into this issue:

Compiled with problems:

ERROR in src/components/PullToRefresh/PullToRefresh.tsx:128:7

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PropsType | Readonly<PropsType>): PullToRefresh', gave the following error.
    Type '() => HTMLElement' is not assignable to type '() => ReactNode'.
      Type 'HTMLElement' is not assignable to type 'ReactNode'.
        Type 'HTMLElement' is missing the following properties from type 'ReactPortal': key, type, props
  Overload 2 of 2, '(props: PropsType, context: any): PullToRefresh', gave the following error.
    Type '() => HTMLElement' is not assignable to type '() => ReactNode'.
    126 |   return (
    127 |     <RMCPullToRefresh
  > 128 |       getScrollContainer={() => document.body}
        |       ^^^^^^^^^^^^^^^^^^
    129 |       direction="down"
    130 |       scale={1}
    131 |       distanceToRefresh={REFRESH_DISTANCE}

I think the interface PropsType should be

export interface PropsType {
  getScrollContainer: () => HTMLElement;
  direction: "down" | "up";
  refreshing?: boolean;
  distanceToRefresh: number;
  onRefresh: () => void;
  indicator: Indicator;
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
  damping?: number;
  scale?: number;
  children?: ReactNode;
}

instead of

export interface PropsType {
  getScrollContainer: () => React.ReactNode;
  direction: 'down' | 'up';
  refreshing?: boolean;
  distanceToRefresh: number;
  onRefresh: () => void;
  indicator: Indicator;
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
  damping?: number;
  scale?: number;
}

Branch: master Commit: e60268f7ffe19b355482418f85fded80e8a78565 Parents: e96ce458f437a53b07f9a9268b5b0368753578f5 Author: duxiaodong <[email protected]> Committer: duxiaodong <[email protected]> Date: Mon Jun 15 2020 14:32:42 GMT+0700 (Indochina Time)

ndhungw avatar Sep 22 '22 06:09 ndhungw