Skip to content

Does getScrollContainer should return type HTMLElement instead of ReactNode? #243

@ndhungw

Description

@ndhungw

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: e60268f
Parents: e96ce45
Author: duxiaodong <duxiaodong@darlin.me>
Committer: duxiaodong <duxiaodong@darlin.me>
Date: Mon Jun 15 2020 14:32:42 GMT+0700 (Indochina Time)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions