add d.ts

Author: jljsj33

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",
@@ -31,7 +31,8 @@
     "lib",
     "assets/*.css",
     "dist",
-    "es"
+    "es",
+    "typings"
   ],
   "licenses": "MIT",
   "main": "./lib/index",
@@ -60,15 +61,18 @@
     "coverage": "rc-test run coverage"
   },
   "devDependencies": {
+    "@types/react": "^16.0.0",
     "core-js": "^2.5.1",
     "expect.js": "0.3.x",
     "pre-commit": "1.x",
+    "precommit-hook": "1.x",
     "rc-test": "6.x",
     "rc-tools": "6.x",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "rc-animate": "2.x",
-    "rc-queue-anim": "^1.3.0"
+    "rc-queue-anim": "^1.3.0",
+    "typescript": "3.x"
   },
   "pre-commit": [
     "lint"
@@ -77,7 +81,8 @@
     "babel-runtime": "6.x",
     "prop-types": "^15.6.0",
     "raf": "3.x",
-    "rc-tween-one": "^2.1.0",
+    "rc-tween-one": "^2.2.0",
     "tween-functions": "1.x"
-  }
+  },
+  "types": "typings/index.d.ts"
 }

src/EventDispatcher.d.ts

@@ -0,0 +1,16 @@
+type ICallback = (e?: { type: string, target: HTMLElement }) => void;
+export default class EventDispatcher {
+  static addEventListener(
+    type: string,
+    callback: ICallback,
+    target: HTMLElement
+  ): void;
+  static removeEventListener(
+    type: string, 
+    callback: ICallback, 
+    target: HTMLElement, 
+    force?: boolean
+  ): void;
+  static removeAllType(type: string, target: HTMLElement): void;
+  static reAllType(type: string, target: HTMLElement): void
+}

src/ScrollElement.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export declare type IPlayScaleType = number | string | [number | string, number | string];
+
+export declare type IChangeCallBackype = { mode: 'enter' | 'leave', id: string };
+
+export declare type IScrollCallBackype = { id: string, domEvent: Event, scrollTop: number, offsetTop: number, showHeight: number };
+
+export interface IProps<T> extends Omit<React.HTMLAttributes<T>, 'onChange' | 'onScroll'> {
+  targetId?: string;
+  playScale?: IPlayScaleType;
+  replay?: boolean;
+  location?: string;
+  onChange?: (e: IChangeCallBackype) => void;
+  onScroll?: (e: IScrollCallBackype) => void;
+  component?: string | React.ReactNode;
+  componentProps?: {};
+}
+
+export default class RcScrollElement<T> extends React.Component<IProps<T>> {
+
+}

src/ScrollLink.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Omit } from './ScrollElement';
+import { IEaseType } from 'rc-tween-one/typings/AnimObject';
+
+export interface IProps<T> extends Omit<React.HTMLAttributes<T>, 'onFocus'> {
+  to: string
+  toHash?: boolean;
+  duration?: number;
+  ease?: IEaseType;
+  active?: string;
+  showHeightActive?: string | number | [string | number, string | number];
+  toShowHeight?: boolean;
+  offsetTop?: number;
+  targetId?: string;
+  onFocus?: (e: { target: HTMLElement, to: string }) => void;
+  onBlur?: () => void;
+  component?: string | React.ReactNode;
+  componentProps?: {};
+}
+
+export default class RcScrollLink<T> extends React.Component<IProps<T>> {
+
+}

src/ScrollOverPack.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import ScrollElement from './ScrollElement';
+
+export interface IProps {
+  always?: boolean;
+  appear?: boolean;
+}
+
+export default class RcScrollOverPack extends ScrollElement<IProps> {
+}

src/ScrollParallax.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { IEaseCallBack, IAnimType, IEaseType, IBezierProps, IChildrenProps, IStyleAnimProps } from 'rc-tween-one/typings/AnimObject';
+
+export interface IAnimProps extends IStyleAnimProps {
+  playScale?: number[];
+  type?: IAnimType;
+  duration?: number;
+  delay?: number;
+  // repeat?: number;
+  // repeatDelay?: number;
+  appearTo?: number;
+  // yoyo?: boolean;
+  ease?: IEaseType;
+  style?: IStyleAnimProps;
+  // morphPlugin
+  points?: string;
+  d?: string;
+  // attr svg
+  cx?: number;
+  cy?: number;
+  r?: number;
+  x1?: number;
+  y1?: number;
+  x2?: number;
+  y2?: number;
+  rx?: number;
+  ry?: number;
+  dx?: number;
+  dy?: number;
+  offset?: number | string;
+  stdDeviation?: number | string;
+  stopColor?: string;
+  stopOpacity?: number;
+  onStart?: () => void;
+  onStartBack?: () => void;
+  onUpdate?: (e: number) => void;
+  onComplete?: () => void;
+  onCompleteBack?: () => void;
+}
+export declare type IAnimationType = IAnimProps | IAnimProps[];
+
+export interface IProps<T> extends React.HTMLAttributes<T> {
+  animation: IAnimationType
+  location?: string;
+  always?: boolean;
+  targetId?: string;
+  component?: string | React.ReactNode;
+  componentProps?: {};
+}
+
+export default class RcScrollParallax<T> extends React.Component<IProps<T>> {
+
+}

src/ScrollScreen.d.ts

@@ -0,0 +1,14 @@
+import { IEaseType } from 'rc-tween-one/typings/AnimObject';
+
+export interface IVarsProps {
+  duration?: number;
+  ease?: IEaseType;
+  docHeight?: number;
+  loop?: boolean;
+  scrollInterval?: number;
+}
+
+export default class RcSCrollScreen {
+  static init: (vars?: IVarsProps) => void;
+  static unMount: () => void;
+}

tests/test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+// import { Parallax, Element, OverPack, Link, scrollScreen, Event } from '../typings';
+import Element from '../src/ScrollElement';
+import OverPack from '../src/ScrollOverPack';
+import Parallax from '../src/ScrollParallax';
+import Link from '../src/ScrollLink';
+import Event from '../src/EventDispatcher';
+import scrollScreen from '../src/ScrollScreen';
+
+function TCompoent(props: { a?: string, b?: number }) {
+  return (
+    <div>
+      {props.a}
+      {props.b}
+    </div>
+  );
+}
+
+function Text() {
+  scrollScreen.init();
+  Event.addEventListener('r', () => { }, document.body);
+  return (
+    <div>
+      <Element targetId="a"><div key="1">test</div></Element>
+      <Parallax
+        animation={{ x: 100 }}
+        component={TCompoent}
+        componentProps={{ a: 'number', b: 100 }}
+        always
+      >
+        abc
+      </Parallax>
+      <OverPack playScale={[0, 1]} id="abc"><div key="abc">test</div></OverPack>
+      <Link to="abc">link</Link>
+    </div>
+  );
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "target": "es6",
+    "noImplicitAny": true
+  }
+}

typings/index.d.ts

@@ -0,0 +1,26 @@
+// Type definitions for rc-scroll-anim 2.5
+// Project: https://github.com/react-component/scroll-anim
+// Definitions by: jljsj33 <https://github.com/jljsj33>
+// Definitions: https://github.com/react-component/scroll-anim
+import ScrollElement from '../src/ScrollElement';
+import ScrollOverPack from '../src/ScrollOverPack';
+import ScrollParallax from '../src/ScrollParallax';
+import ScrollLink from '../src/ScrollLink';
+import Screen from '../src/ScrollScreen';
+import ScrollEvent from '../src/EventDispatcher';
+
+export const Element: typeof ScrollElement;
+export const OverPack: typeof ScrollOverPack;
+export const Parallax: typeof ScrollParallax;
+export const Link: typeof ScrollLink;
+export const scrollScreen: typeof Screen;
+export const Event: typeof ScrollEvent;
+
+export default interface RcScrollAnim {
+  Element: typeof ScrollElement;
+  OverPack: typeof ScrollOverPack;
+  Parallax: typeof ScrollOverPack;
+  Link: typeof ScrollLink;
+  scrollScreen: typeof Screen;
+  Event: typeof ScrollEvent;
+}