From 45eccd9689b222291d534d98a68d45f9938c84ff Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 May 2020 17:14:54 +0800 Subject: [PATCH 1/4] css-animation => @ant-design/css-animation --- package.json | 2 +- src/AnimateChild.js | 2 +- tests/multiple.spec.js | 2 +- tests/single.spec.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 4d08de9..4e0ba9b 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "dependencies": { "babel-runtime": "6.x", "classnames": "^2.2.6", - "css-animation": "^1.3.2", + "@ant-design/css-animation": "^1.7.2", "prop-types": "15.x", "raf": "^3.4.0", "rc-util": "^4.15.3", diff --git a/src/AnimateChild.js b/src/AnimateChild.js index c4c24ba..807113d 100644 --- a/src/AnimateChild.js +++ b/src/AnimateChild.js @@ -1,7 +1,7 @@ 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 = { diff --git a/tests/multiple.spec.js b/tests/multiple.spec.js index ad4150d..dd22ec7 100644 --- a/tests/multiple.spec.js +++ b/tests/multiple.spec.js @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import TestUtils from 'react-dom/test-utils'; import expect from 'expect.js'; -import CssAnimation from 'css-animation'; +import CssAnimation from '@ant-design/css-animation'; import Animate from '../'; import './index.spec.css'; diff --git a/tests/single.spec.js b/tests/single.spec.js index 26f66b5..a125160 100644 --- a/tests/single.spec.js +++ b/tests/single.spec.js @@ -1,7 +1,7 @@ /* eslint no-console:0, react/no-multi-comp:0, react/no-string-refs:0 */ import React from 'react'; -import CssAnimation from 'css-animation'; +import CssAnimation from '@ant-design/css-animation'; import Animate from '../index'; import single from './single-common.spec'; From a1703a274ed5f145da7546ad937145af8fd7aa78 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 May 2020 17:23:06 +0800 Subject: [PATCH 2/4] remove react-lifecycles-compat/babel-runtime/prop-types --- examples/CSSMotion.js | 5 ++--- examples/CSSMotionDeadline.js | 3 +-- examples/alert.js | 11 +---------- examples/hide-todo.js | 10 +--------- examples/simple-animation.js | 7 +------ examples/simple.js | 9 +-------- examples/todo-animation.js | 9 +-------- examples/todo.js | 9 +-------- examples/transitionAppear.js | 7 +------ package.json | 7 ++----- src/Animate.js | 24 +----------------------- src/AnimateChild.js | 8 +------- src/CSSMotion.js | 35 +---------------------------------- src/CSSMotionList.jsx | 11 +---------- tests/multiple.spec.js | 9 +-------- 15 files changed, 17 insertions(+), 147 deletions(-) diff --git a/examples/CSSMotion.js b/examples/CSSMotion.js index 8e32ca4..af637c8 100644 --- a/examples/CSSMotion.js +++ b/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(, document.getElementById('__react-content')); // Remove for IE9 test // const aaa = document.getElementsByClassName('navbar')[0]; -// aaa.parentNode.removeChild(aaa); \ No newline at end of file +// aaa.parentNode.removeChild(aaa); diff --git a/examples/CSSMotionDeadline.js b/examples/CSSMotionDeadline.js index a5270d7..3394ad3 100644 --- a/examples/CSSMotionDeadline.js +++ b/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'; diff --git a/examples/alert.js b/examples/alert.js index 0c8c0cb..b583b36 100644 --- a/examples/alert.js +++ b/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, diff --git a/examples/hide-todo.js b/examples/hide-todo.js index 70f104c..0077617 100644 --- a/examples/hide-todo.js +++ b/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() {}, diff --git a/examples/simple-animation.js b/examples/simple-animation.js index a207aba..6d127a4 100644 --- a/examples/simple-animation.js +++ b/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 (
); }; -Box.propTypes = { - visible: PropTypes.bool, -} - class Demo extends React.Component { state = { destroyed: false, diff --git a/examples/simple.js b/examples/simple.js index 39445b7..cc78d01 100644 --- a/examples/simple.js +++ b/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.propTypes = { - style: PropTypes.object, - show: PropTypes.bool, -}; - class Demo extends Component { - constructor(props) { super(props); this.state = { diff --git a/examples/todo-animation.js b/examples/todo-animation.js index 1271865..559a2cc 100644 --- a/examples/todo-animation.js +++ b/examples/todo-animation.js @@ -1,7 +1,6 @@ -/* 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'; @@ -9,12 +8,6 @@ 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() {}, } diff --git a/examples/todo.js b/examples/todo.js index 5796eb9..bb98a28 100644 --- a/examples/todo.js +++ b/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() {}, } diff --git a/examples/transitionAppear.js b/examples/transitionAppear.js index 6b0ae71..b90d00d 100644 --- a/examples/transitionAppear.js +++ b/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 (
); }; -Box.propTypes = { - visible: PropTypes.bool, -} - class Demo extends React.Component { state = { visible: true, diff --git a/package.json b/package.json index 4e0ba9b..054ff42 100644 --- a/package.json +++ b/package.json @@ -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", "@ant-design/css-animation": "^1.7.2", - "prop-types": "15.x", "raf": "^3.4.0", - "rc-util": "^4.15.3", - "react-lifecycles-compat": "^3.0.4" + "rc-util": "^4.15.3" } } diff --git a/src/Animate.js b/src/Animate.js index 515abbd..50c8871 100644 --- a/src/Animate.js +++ b/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', diff --git a/src/AnimateChild.js b/src/AnimateChild.js index 807113d..f6342e1 100644 --- a/src/AnimateChild.js +++ b/src/AnimateChild.js @@ -1,6 +1,6 @@ +/* eslint react/prop-types: 0 */ import React from 'react'; import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; import cssAnimate, { isCssAnimationSupported } from '@ant-design/css-animation'; import animUtil from './util/animate'; @@ -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(); } diff --git a/src/CSSMotion.js b/src/CSSMotion.js index f3f4512..29c8ae1 100644 --- a/src/CSSMotion.js +++ b/src/CSSMotion.js @@ -1,7 +1,5 @@ -/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp */ +/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */ import React from 'react'; -import PropTypes from 'prop-types'; -import { polyfill } from 'react-lifecycles-compat'; import findDOMNode from 'rc-util/lib/Dom/findDOMNode'; import classNames from 'classnames'; import raf from 'raf'; @@ -17,29 +15,6 @@ const STATUS_APPEAR = 'appear'; const STATUS_ENTER = 'enter'; const STATUS_LEAVE = 'leave'; -export const MotionPropTypes = { - eventProps: PropTypes.object, // Internal usage. Only pass by CSSMotionList - visible: PropTypes.bool, - children: PropTypes.func, - motionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - motionAppear: PropTypes.bool, - motionEnter: PropTypes.bool, - motionLeave: PropTypes.bool, - motionLeaveImmediately: PropTypes.bool, // Trigger leave motion immediately - motionDeadline: PropTypes.number, - removeOnLeave: PropTypes.bool, - leavedClassName: PropTypes.string, - onAppearStart: PropTypes.func, - onAppearActive: PropTypes.func, - onAppearEnd: PropTypes.func, - onEnterStart: PropTypes.func, - onEnterActive: PropTypes.func, - onEnterEnd: PropTypes.func, - onLeaveStart: PropTypes.func, - onLeaveActive: PropTypes.func, - onLeaveEnd: PropTypes.func, -}; - /** * `transitionSupport` is used for none transition test case. * Default we use browser transition event support check. @@ -58,12 +33,6 @@ export function genCSSMotion(config) { } class CSSMotion extends React.Component { - static propTypes = { - ...MotionPropTypes, - - internalRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - }; - static defaultProps = { visible: true, motionEnter: true, @@ -341,8 +310,6 @@ export function genCSSMotion(config) { } } - polyfill(CSSMotion); - if (!forwardRef) { return CSSMotion; } diff --git a/src/CSSMotionList.jsx b/src/CSSMotionList.jsx index b50dded..1e8a06a 100644 --- a/src/CSSMotionList.jsx +++ b/src/CSSMotionList.jsx @@ -1,6 +1,5 @@ +/* eslint react/prop-types: 0 */ import React from 'react'; -import { polyfill } from 'react-lifecycles-compat'; -import PropTypes from 'prop-types'; import OriginCSSMotion, { MotionPropTypes } from './CSSMotion'; import { supportTransition } from './util/motion'; import { @@ -16,12 +15,6 @@ const MOTION_PROP_NAMES = Object.keys(MotionPropTypes); export function genCSSMotionList(transitionSupport, CSSMotion = OriginCSSMotion) { class CSSMotionList extends React.Component { - static propTypes = { - ...CSSMotion.propTypes, - component: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - keys: PropTypes.array, - }; - static defaultProps = { component: 'div', }; @@ -119,8 +112,6 @@ export function genCSSMotionList(transitionSupport, CSSMotion = OriginCSSMotion) } } - polyfill(CSSMotionList); - return CSSMotionList; } diff --git a/tests/multiple.spec.js b/tests/multiple.spec.js index dd22ec7..231bec5 100644 --- a/tests/multiple.spec.js +++ b/tests/multiple.spec.js @@ -1,7 +1,6 @@ -/* 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 ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; import TestUtils from 'react-dom/test-utils'; import expect from 'expect.js'; import CssAnimation from '@ant-design/css-animation'; @@ -9,12 +8,6 @@ import Animate from '../'; import './index.spec.css'; class Todo extends React.Component { - static propTypes = { - end: PropTypes.func, - onClick: PropTypes.func, - children: PropTypes.node, - } - static defaultProps = { end() {}, } From 11c18e51c00bd73b4d289e4450fd1f82617b1508 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 May 2020 17:25:37 +0800 Subject: [PATCH 3/4] restore MOTION_PROP_NAMES --- src/CSSMotionList.jsx | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/CSSMotionList.jsx b/src/CSSMotionList.jsx index 1e8a06a..33ef826 100644 --- a/src/CSSMotionList.jsx +++ b/src/CSSMotionList.jsx @@ -1,6 +1,6 @@ /* eslint react/prop-types: 0 */ import React from 'react'; -import OriginCSSMotion, { MotionPropTypes } from './CSSMotion'; +import OriginCSSMotion from './CSSMotion'; import { supportTransition } from './util/motion'; import { STATUS_ADD, @@ -11,7 +11,28 @@ import { parseKeys, } from './util/diff'; -const MOTION_PROP_NAMES = Object.keys(MotionPropTypes); +const MOTION_PROP_NAMES = [ + 'eventProps', + 'visible', + 'children', + 'motionName', + 'motionAppear', + 'motionEnter', + 'motionLeave', + 'motionLeaveImmediately', + 'motionDeadline', + 'removeOnLeave', + 'leavedClassName', + 'onAppearStart', + 'onAppearActive', + 'onAppearEnd', + 'onEnterStart', + 'onEnterActive', + 'onEnterEnd', + 'onLeaveStart', + 'onLeaveActive', + 'onLeaveEnd', +]; export function genCSSMotionList(transitionSupport, CSSMotion = OriginCSSMotion) { class CSSMotionList extends React.Component { From ca070572154ddfa78a82ff52d77bbb9dcb1dbd04 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 May 2020 17:31:26 +0800 Subject: [PATCH 4/4] :zap: 3.0.0 --- README.md | 59 ++++++++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index ceb066c..b88cbc3 100644 --- a/README.md +++ b/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 () => (

1

2

 -, mountNode); +); ``` +## Compatibility + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | +| --- | --- | --- | --- | --- | +| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + ## API ### props diff --git a/package.json b/package.json index 054ff42..73621ae 100644 --- a/package.json +++ b/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",