add d.ts and svg strokeDasharray

Author: jljsj33

README.md

@@ -100,7 +100,7 @@ React.render(<TweenOneGroup>
 | reverseDelay | number       | 0       | animate revers start delay |
 | repeat     |  number        | 0       | `animation` all data repeat, To repeat indefinitely, use  -1 |
 | yoyo       | boolean        | false   | `animation` all data alternating backward and forward on each repeat. |
-| onChange   | func           | null    | when the animation change called, callback({ moment, item, tween, index, mode, timelineMode }) |
+| onChange   | func           | null    | when the animation change called, callback({ moment, target, index, mode, timelineMode }) |
 | moment     | number         | null    | set the current frame    |
 | attr       | string         | `style` | `style` or `attr`, `attr` is tag attribute. when morph SVG must be `attr`.  |
 | resetStyle | boolean    | false   | update animation data, reset init style |

package.json

@@ -33,7 +33,8 @@
     "lib",
     "assets/*.css",
     "dist",
-    "es"
+    "es",
+    "index.d.ts"
   ],
   "licenses": "MIT",
   "main": "./lib/index",
@@ -62,15 +63,18 @@
     "coverage": "rc-test run coverage"
   },
   "devDependencies": {
+    "@types/react": "^16.0.0",
     "core-js": "^2.5.7",
     "expect.js": "0.3.x",
     "pre-commit": "1.x",
+    "precommit-hook": "1.x",
     "rc-test": "6.x",
     "rc-tools": "8.x",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "rc-queue-anim": "^1.6.1",
-    "rc-scroll-anim": "2.x"
+    "rc-scroll-anim": "2.x",
+    "typescript": "3.x"
   },
   "pre-commit": [
     "lint"
@@ -82,5 +86,6 @@
     "raf": "~3.4.0",
     "style-utils": "~0.1.13",
     "tween-functions": "~1.2.0"
-  }
+  },
+  "types": "typeings/index.d.ts"
 }

src/plugin/StylePlugin.jsx

@@ -37,6 +37,9 @@ p.getTweenData = function (key, vars) {
   if (key.match(/colo|fill|storker/i)) {
     data.data[key] = parseColor(vars);
     data.dataType[key] = 'color';
+  } else if (key === 'strokeDasharray'){
+    data.data[key] = vars.split(',');
+    data.dataType[key] = 'strokeDasharray';
   } else if (key.match(/shadow/i)) {
     data.data[key] = parseShadow(vars);
     data.dataType[key] = 'shadow';
@@ -155,7 +158,7 @@ p.getAnimStart = function (computedStyle, tween, isSvg) {
       startData = startData.map(this.convertToMarksArray.bind(this, computedStyle, endUnit, key));
       style[cssName] = startData;
     } else if (Array.isArray(this.propsData.data[key])) {
-      startData = startData.split(/[\s|,]/);
+      startData = startData.split(/[\s|,]/).filter(c => (c || c === 0));
       endUnit = this.propsData.dataUnit[key];
       startData = startData.map(this.convertToMarksArray.bind(this, computedStyle, endUnit, key));
       style[cssName] = startData;

tests/index.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import TweenOne from '../typings';
+
+const path = 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0';
+const ease = TweenOne.easing.path(path, { rect: 100, lengthPixel: 200 });
+const Group = TweenOne.TweenOneGroup;
+export default () => (
+  <div>
+    <TweenOne
+      animation={{
+        x: 100,
+        ease: 'easeInBounce',
+        onStart: ({ index, target }) => { },
+      }}
+    >
+      test
+    </TweenOne>
+    <TweenOne
+      animation={[{
+        x: 100,
+        ease,
+        onStart: ({ index, target }) => { },
+      }, {
+        x: 200,
+        ease,
+        onComplete: ({ index, target }) => { },
+      }]}
+    >
+      test
+    </TweenOne>
+    <Group enter={{ x: 100, opacity: 0, type: 'from' }} leave={[{ y: 100, opacity: 0 }]} appear={false}>
+      <div key="0">test</div>
+    </Group>
+  </div>
+);

tsconfig.json

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

typings/AnimObject.d.ts

@@ -0,0 +1,130 @@
+type IEaseCallBack = ((t: number, b: number, c: number, d: number) => number);
+
+export declare type IAnimTyope = 'to' | 'from';
+
+export declare type IEaseType = 'linear' |
+  'easeInSine' | 'easeOutSine' | 'easeInOutSine' |
+  'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' |
+  'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' |
+  'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' |
+  'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' |
+  'easeInExpo' | 'easeInOutExpo' | 'easeInOutExpo' |
+  'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' |
+  'easeInBack' | 'easeOutBack' | 'easeInOutBack' |
+  'easeInElastic' | 'easeOutElastic' | 'easeInOutElastic' |
+  'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce' |
+  IEaseCallBack; // TweenOne ease path;
+
+export interface IBezier {
+  type?: string;
+  autoRotate?: boolean;
+  vars: { x: number, y: number }[];
+}
+
+export interface IChildrenProps {
+  value: number;
+  floatLength?: number;
+  formatMoney?: { thousand: string, decimal: string };
+}
+
+export interface IStyleAnimProps {
+  [key: string]: any;
+  bezier?: IBezier;
+  SVGDraw?: number | string;// DrawPlugin
+  // Children
+  Children?: IChildrenProps;
+  // path
+  path?: string;
+  // transform
+  x?: number | string;
+  y?: number | string;
+  z?: number | string;
+  translateX?: number | string;
+  translateY?: number | string;
+  translateZ?: number | string;
+  rotate?: number | string;
+  rotateX?: number | string;
+  rotateY?: number | string;
+  scale?: number | string;
+  scaleX?: number | string;
+  scaleY?: number | string;
+  transformOrigin?: number | string;
+  // filter
+  grayScale?: number;
+  sepia?: number;
+  hueRotate?: string;
+  invert?: number;
+  brightness?: number;
+  contrast?: number;
+  saturate?: number;
+  blur?: string;
+  // basic
+  width?: number | string;
+  maxWidth?: number | string;
+  minWidth?: number | string;
+  height?: number | string;
+  maxHeight?: number | string;
+  minHeight?: number | string;
+  lineHeight?: number | string;
+  opacity?: number | string;
+  top?: number | string;
+  right?: number | string;
+  bottom?: number | string;
+  left?: number | string;
+  marginTop?: number | string;
+  marginRight?: number | string;
+  marginBottom?: number | string;
+  marginLeft?: number | string;
+  paddingTop?: number | string;
+  paddingRight?: number | string;
+  paddingBottom?: number | string;
+  paddingLeft?: number | string;
+  color?: string;
+  backgroundColor?: string;
+  borderWidth?: number | string;
+  borderRadius?: number | string;
+  borderColor?: string;
+  boxShadow?: string;
+  textShadow?: string;
+  // svg style
+  storkeWidth?: number;
+  fill?: string;
+  stroke?: string;
+  strokeDashoffset?: number;
+  strokeDasharray?: string;
+}
+
+export interface IAnimObject extends IStyleAnimProps {
+  type?: IAnimTyope;
+  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?: (e: { index: number, target: HTMLElement }) => void;
+  onUpdate?: (e: { index: number, target: HTMLElement, ratio: number }) => void;
+  onComplete?: (e: { index: number, target: HTMLElement }) => void;
+  onRepeat?: (e: { index: number, target: HTMLElement }) => void;
+}

typings/TweenOneGroup.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { IAnimObject, IEaseCallBack } from './AnimObject';
+
+export interface IGroupProps {
+  appear?: boolean;
+  enter?: IAnimObject | IAnimObject[] | ((key: string, index: number) => IAnimObject);
+  leave?: IAnimObject | IAnimObject[] | ((key: string, index: number) => IAnimObject);
+  animatingClassName?: [string, string];
+  exclusive?: boolean;
+  onEnd?: (e: { key: string, type: string }) => void;
+  component?: string | React.ReactNode;
+  componentProps?: {};
+}
+
+export default class RcTweenOneGroup extends React.Component<IGroupProps>{ }

typings/index.d.ts

@@ -0,0 +1,45 @@
+// Type definitions for rc-tween-one 2.2
+// Project: https://github.com/react-component/tween-one
+// Definitions by: jljsj33 <https://github.com/jljsj33>
+// Definitions: https://github.com/react-component/tween-one
+import * as React from 'react';
+
+import Group from './TweenOneGroup';
+import { IAnimObject, IEaseCallBack } from './AnimObject';
+
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export declare type IAttrType = 'style' | 'attr';
+
+export interface IChangeProps {
+  moment?: number;
+  target?: HTMLElement;
+  index?: number;
+  mode?: string;
+  timelineMode?: string;
+}
+
+export interface IProps<T> extends Omit<React.HTMLAttributes<T>, 'onChange'> {
+  animation?: IAnimObject | IAnimObject[];
+  paused?: boolean;
+  reverse?: boolean;
+  reverseDelay?: number;
+  repeat?: number;
+  yoyo?: boolean;
+  onChange?: (e: IChangeProps) => void;
+  moment?: number;
+  attr?: IAttrType,
+  resetStyle?: boolean,
+  component?: string | React.ReactNode;
+  componentProps?: {};
+}
+
+export default class RcTweenOne<T> extends React.Component<IProps<T>> {
+  static easing: {
+    path(path: string, parame?: { rect?: number, lengthPixel?: number }): IEaseCallBack;
+  };
+  static plugins: {
+    push(plugin: any): void;
+  }
+  static TweenOneGroup: typeof Group;
+}