Warn if children are disabled (#212)

* Add error message

* Add tests to make sure we are warned about disabled children

* Implement disabled children warning

* More descriptive test title

* Fix formating (curlies arount if)

* Add cross-env package so scripts can be executed on win machines

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 <[email protected]>",
   "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",

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<ConvertedProps, FlipMoveState> {
       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) {

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.
+`);

test/index.spec.js

@@ -408,6 +408,64 @@ Please wrap your value in a native element (eg. <span>), or a component.
         );
         expect(warnStub).to.not.have.been.called;
       });
+
+      it('warns when child has disabled attribute', () => {
+        const items = [
+          <button disabled key="1" />,
+          <button disabled key="2" />,
+        ];
+
+        class ButtonList extends Component {
+          state = {
+            items,
+          };
+
+          render() {
+            return <FlipMove>{this.state.items}</FlipMove>;
+          }
+        }
+
+        const component = mount(<ButtonList />);
+        component.setState({
+          items: [items[0]],
+        });
+        expect(warnStub).to.have.been.calledWith(`
+>> 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.
+`);
+      });
+
+      it("doesn't warn when child has disabled attribute if animations are disabled", () => {
+        const items = [
+          <button disabled key="1" />,
+          <button disabled key="2" />,
+        ];
+
+        class ButtonList extends Component {
+          state = {
+            items,
+          };
+
+          render() {
+            return <FlipMove disableAllAnimations>{this.state.items}</FlipMove>;
+          }
+        }
+
+        const component = mount(<ButtonList />);
+        component.setState({
+          items: [items[0]],
+        });
+        expect(warnStub).not.to.have.been.calledWith(`
+>> 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.
+`);
+      });
     });
 
     describe('falsy children', () => {

yarn.lock

@@ -2295,7 +2295,14 @@ [email protected]:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-cross-spawn@^5.0.1:
+cross-env@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.3.tgz#f8ae18faac87692b0a8b4d2f7000d4ec3a85dfd7"
+  dependencies:
+    cross-spawn "^5.1.0"
+    is-windows "^1.0.0"
+
+cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   dependencies:
@@ -4195,6 +4202,10 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
+is-windows@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"