Merge pull request #103 from react-component/refactor

Refactor

README.md

@@ -1,49 +1,54 @@
 # rc-animate
 ---
 
-animate react element easily
+Animate React Component easily.
 
 [![NPM version][npm-image]][npm-url]
 [![build status][travis-image]][travis-url]
 [![Test coverage][coveralls-image]][coveralls-url]
-[![gemnasium deps][gemnasium-image]][gemnasium-url]
-[![node version][node-image]][node-url]
+[![Dependencies][david-image]][david-url]
+[![DevDependencies][david-dev-image]][david-dev-url]
 [![npm download][download-image]][download-url]
-
-[npm-image]: http://img.shields.io/npm/v/rc-animate.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-animate
-[travis-image]: https://img.shields.io/travis/react-component/animate.svg?style=flat-square
-[travis-url]: https://travis-ci.org/react-component/animate
-[coveralls-image]: https://img.shields.io/coveralls/react-component/animate.svg?style=flat-square
-[coveralls-url]: https://coveralls.io/r/react-component/animate?branch=master
-[gemnasium-image]: http://img.shields.io/gemnasium/react-component/animate.svg?style=flat-square
-[gemnasium-url]: https://gemnasium.com/react-component/animate
-[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
-[node-url]: http://nodejs.org/download/
-[download-image]: https://img.shields.io/npm/dm/rc-animate.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-animate
-
-## Feature
-
-* support ie8,ie8+,chrome,firefox,safari
-
-## install
-
-[![rc-animate](https://nodei.co/npm/rc-animate.png)](https://npmjs.org/package/rc-animate)
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+
+[npm-image]: http://img.shields.io/npm/v/rc-animation.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-animation
+[travis-image]: https://img.shields.io/travis/react-component/animation.svg?style=flat-square
+[travis-url]: https://travis-ci.org/react-component/animation
+[coveralls-image]: https://img.shields.io/coveralls/react-component/animation.svg?style=flat-square
+[coveralls-url]: https://coveralls.io/r/react-component/animation?branch=master
+[david-url]: https://david-dm.org/react-component/animation
+[david-image]: https://david-dm.org/react-component/animation/status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/react-component/animation?type=dev
+[david-dev-image]: https://david-dm.org/react-component/animation/dev-status.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/rc-animation.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-animation
+[bundlephobia-url]: https://bundlephobia.com/result?p=rc-animation
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-animation
+
+## Install
+
+[![rc-animation](https://nodei.co/npm/rc-animation.png)](https://npmjs.org/package/rc-animation)
 
 ## Usage
 
-```jsx
+```js
 import Animate from 'rc-animate';
 
-ReactDOM.render(
+export default () => (
   <Animate animation={{ ... }}>
     <p key="1">1</p>
     <p key="2">2</p>
   </Animate>
-, mountNode);
+);
 ```
 
+## Compatibility
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
 ## API
 
 ### props

examples/CSSMotion.js

@@ -1,7 +1,6 @@
-/* eslint no-console:0, react/no-multi-comp:0 */
+/* eslint no-console:0, react/no-multi-comp:0, react/prop-types: 0 */
 
 import React from 'react';
-// import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { CSSMotion } from 'rc-animate';
 import classNames from 'classnames';
@@ -155,4 +154,4 @@ ReactDOM.render(<Demo />, document.getElementById('__react-content'));
 
 // Remove for IE9 test
 // const aaa = document.getElementsByClassName('navbar')[0];
-// aaa.parentNode.removeChild(aaa);
+// aaa.parentNode.removeChild(aaa);

examples/CSSMotionDeadline.js

@@ -1,7 +1,6 @@
-/* eslint no-console:0, react/no-multi-comp:0 */
+/* eslint no-console:0, react/no-multi-comp:0, react/prop-types: 0 */
 
 import React from 'react';
-// import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { CSSMotion } from 'rc-animate';
 import classNames from 'classnames';

examples/alert.js

@@ -1,7 +1,5 @@
-/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0 */
-
+/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0, react/prop-types: 0 */
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 
@@ -10,13 +8,6 @@ import './assets/index.less';
 let seed = 0;
 
 class Alert extends React.Component {
-  static propTypes = {
-    time: PropTypes.number,
-    type: PropTypes.string,
-    str: PropTypes.string,
-    onEnd: PropTypes.func,
-  }
-
   static defaultProps = {
     onEnd() {},
     time: 2000,

examples/hide-todo.js

@@ -1,20 +1,12 @@
-/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0 */
+/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0, react/prop-types: 0 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 
 import './assets/index.less';
 
 class Todo extends React.Component {
-  static propTypes = {
-    children: PropTypes.any,
-    end: PropTypes.func,
-    onClick: PropTypes.func,
-    visible: PropTypes.bool,
-  }
-
   static defaultProps = {
     visible: true,
     end() {},

examples/simple-animation.js

@@ -1,8 +1,7 @@
-/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0 */
+/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0, react/prop-types: 0 */
 
 import Animate from 'rc-animate';
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import velocity from 'velocity-animate';
 
@@ -18,10 +17,6 @@ const Box = props => {
   return (<div style={style} />);
 };
 
-Box.propTypes = {
-  visible: PropTypes.bool,
-}
-
 class Demo extends React.Component {
   state = {
     destroyed: false,

examples/simple.js

@@ -1,8 +1,7 @@
-/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0 */
+/* eslint no-console:0, react/no-multi-comp:0, react/jsx-no-bind:0, react/prop-types: 0 */
 
 import Animate from 'rc-animate';
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
 import './assets/slow.less';
@@ -13,13 +12,7 @@ const Div = (props) => {
   return <div {...restProps} style={newStyle}/>;
 };
 
-Div.propTypes = {
-  style: PropTypes.object,
-  show: PropTypes.bool,
-};
-
 class Demo extends Component {
-
   constructor(props) {
     super(props);
     this.state = {

examples/todo-animation.js

@@ -1,20 +1,13 @@
-/* eslint no-console:0, react/no-multi-comp:0, no-alert:0, no-undef:0, react/jsx-no-bind:0 */
+/* eslint no-console:0, react/no-multi-comp:0, no-alert:0, no-undef:0, react/jsx-no-bind:0, react/prop-types: 0 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import velocity from 'velocity-animate';
 
 import './assets/index.less';
 
 class Todo extends React.Component {
-  static propTypes = {
-    children: PropTypes.any,
-    end: PropTypes.func,
-    onClick: PropTypes.func,
-  }
-
   static defaultProps = {
     end() {},
   }

examples/todo.js

@@ -1,19 +1,12 @@
-/* eslint no-console:0, react/no-multi-comp:0, no-alert:0, no-undef:0, react/jsx-no-bind:0 */
+/* eslint no-console:0, react/no-multi-comp:0, no-alert:0, no-undef:0, react/jsx-no-bind:0, react/prop-types: 0 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 
 import './assets/index.less';
 
 class Todo extends React.Component {
-  static propTypes = {
-    children: PropTypes.any,
-    end: PropTypes.func,
-    onClick: PropTypes.func,
-  }
-
   static defaultProps = {
     end() {},
   }

examples/transitionAppear.js

@@ -1,8 +1,7 @@
-/* eslint no-console:0, react/no-multi-comp:0 */
+/* eslint no-console:0, react/no-multi-comp:0, react/prop-types: 0 */
 
 import Animate from 'rc-animate';
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
 import './assets/slow.less';
@@ -19,10 +18,6 @@ const Box = props => {
   return (<div style={style}/>);
 };
 
-Box.propTypes = {
-  visible: PropTypes.bool,
-}
-
 class Demo extends React.Component {
   state = {
     visible: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-animate",
-  "version": "2.11.1",
+  "version": "3.0.0",
   "description": "css-transition ui component for react",
   "keywords": [
     "react",
@@ -31,7 +31,7 @@
     "build": "rc-tools run build",
     "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run server",
-    "pub": "rc-tools run pub --babel-runtime",
+    "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
     "karma": "rc-test run karma",
     "saucelabs": "rc-test run saucelabs",
@@ -56,12 +56,9 @@
     "lint"
   ],
   "dependencies": {
-    "babel-runtime": "6.x",
     "classnames": "^2.2.6",
-    "css-animation": "^1.3.2",
-    "prop-types": "15.x",
+    "@ant-design/css-animation": "^1.7.2",
     "raf": "^3.4.0",
-    "rc-util": "^4.15.3",
-    "react-lifecycles-compat": "^3.0.4"
+    "rc-util": "^4.15.3"
   }
 }

src/Animate.js

@@ -1,5 +1,5 @@
+/* eslint react/prop-types: 0 */
 import React from 'react';
-import PropTypes from 'prop-types';
 import unsafeLifecyclesPolyfill from 'rc-util/lib/unsafeLifecyclesPolyfill';
 import {
   toArrayChildren,
@@ -31,28 +31,6 @@ function noop() {
 class Animate extends React.Component {
   static isAnimate = true; // eslint-disable-line
 
-  static propTypes = {
-    className: PropTypes.string,
-    style: PropTypes.object,
-    component: PropTypes.any,
-    componentProps: PropTypes.object,
-    animation: PropTypes.object,
-    transitionName: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-    ]),
-    transitionEnter: PropTypes.bool,
-    transitionAppear: PropTypes.bool,
-    exclusive: PropTypes.bool,
-    transitionLeave: PropTypes.bool,
-    onEnd: PropTypes.func,
-    onEnter: PropTypes.func,
-    onLeave: PropTypes.func,
-    onAppear: PropTypes.func,
-    showProp: PropTypes.string,
-    children: PropTypes.node,
-  }
-
   static defaultProps = {
     animation: {},
     component: 'span',

src/AnimateChild.js

@@ -1,7 +1,7 @@
+/* eslint react/prop-types: 0 */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import cssAnimate, { isCssAnimationSupported } from 'css-animation';
+import cssAnimate, { isCssAnimationSupported } from '@ant-design/css-animation';
 import animUtil from './util/animate';
 
 const transitionMap = {
@@ -11,12 +11,6 @@ const transitionMap = {
 };
 
 export default class AnimateChild extends React.Component {
-  static propTypes = {
-    children: PropTypes.any,
-    animation: PropTypes.any,
-    transitionName: PropTypes.any,
-  }
-
   componentWillUnmount() {
     this.stop();
   }