diff --git a/package.json b/package.json index 3e6f254..6ad4b49 100644 --- a/package.json +++ b/package.json @@ -22,12 +22,12 @@ "prebuild": "npm run lint && flow check && npm run typescript && npm run test", "prepublishOnly": "npm run build", "prepush": "npm run prebuild", - "test": "NODE_ENV=test ./node_modules/.bin/karma start --single-run", + "test": "cross-env NODE_ENV=test ./node_modules/.bin/karma start --single-run", "test:dev": "karma start karma.conf.js", "tslint": "tslint typings/*.tsx typings/*.ts", "typescript": "npm run tslint && tsc typings/test.tsx --noEmit --jsx react --target es6 --module es2015 --moduleResolution node", "storybook": "start-storybook -p 9001", - "storybook:preact": "REACT_IMPL=preact npm run storybook" + "storybook:preact": "cross-env REACT_IMPL=preact npm run storybook" }, "author": "Joshua Comeau ", "license": "MIT", @@ -67,6 +67,7 @@ "babel-preset-stage-0": "6.24.1", "chai": "4.1.2", "create-react-class": "15.6.2", + "cross-env": "^5.1.3", "enzyme": "3.0.0", "enzyme-adapter-react-16": "^1.0.0", "eslint": "3.10.0", diff --git a/src/FlipMove.js b/src/FlipMove.js index 7e1305e..588b9d5 100644 --- a/src/FlipMove.js +++ b/src/FlipMove.js @@ -13,7 +13,7 @@ import ReactDOM from 'react-dom'; // eslint-disable-next-line no-duplicate-imports import type { Element, ElementRef, Key, ChildrenArray } from 'react'; -import { parentNodePositionStatic } from './error-messages'; +import { parentNodePositionStatic, childIsDisabled } from './error-messages'; import './polyfills'; import propConverter from './prop-converter'; import { @@ -348,6 +348,15 @@ class FlipMove extends Component { leavingChildren.forEach(leavingChild => { const childData = this.getChildData(getKey(leavingChild)); + // Warn if child is disabled + if ( + !this.isAnimationDisabled(this.props) && + childData.domNode && + childData.domNode.disabled + ) { + childIsDisabled(); + } + // We need to take the items out of the "flow" of the document, so that // its siblings can move to take its place. if (childData.boundingBox) { diff --git a/src/error-messages.js b/src/error-messages.js index 44956c1..6e2e36c 100644 --- a/src/error-messages.js +++ b/src/error-messages.js @@ -72,3 +72,11 @@ FlipMove has added 'position: relative' to this node, to ensure Flip Move animat To avoid seeing this warning, simply apply a non-static position to that parent node. `); + +export const childIsDisabled = warnOnce(` +>> Warning, via react-flip-move << + +One or more of Flip Move's child elements have the html attribute 'disabled' set to true. + +Please note that this will cause animations to break in Internet Explorer 11 and below. Either remove the disabled attribute or set 'animation' to false. +`); diff --git a/test/index.spec.js b/test/index.spec.js index baecd85..be13e23 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -408,6 +408,64 @@ Please wrap your value in a native element (eg. ), or a component. ); expect(warnStub).to.not.have.been.called; }); + + it('warns when child has disabled attribute', () => { + const items = [ +