remove raf

Author: jljsj33

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-drawer-menu",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "drawer menu animation component for react",
   "keywords": [
     "react",

src/Drawer.jsx

@@ -2,9 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { dataToArray, transitionEnd, getRequestAnimationFrame } from './utils';
-
-const raf = getRequestAnimationFrame();
+import { dataToArray, transitionEnd } from './utils';
 
 class Drawer extends React.PureComponent {
   static propTypes = {
@@ -50,11 +48,9 @@ class Drawer extends React.PureComponent {
   }
 
   componentDidMount() {
-    raf(() => {
-      this.getParentAndLevelDom();
-      this.container = this.defaultGetContainer();
-      this.componentDidUpdate();
-    });
+    this.getParentAndLevelDom();
+    this.container = this.defaultGetContainer();
+    this.componentDidUpdate();
   }
 
   componentWillReceiveProps(nextProps) {

src/utils.js

@@ -17,31 +17,3 @@ const trnasitionStr = Object.keys(trnasitionEndObject).filter(key =>
   key in (document && document.body.style)
 )[0];
 export const transitionEnd = trnasitionEndObject[trnasitionStr];
-
-const availablePrefixs = ['moz', 'ms', 'webkit'];
-
-function requestAnimationFramePolyfill() {
-  let lastTime = 0;
-  return function (callback) {
-    const currTime = new Date().getTime();
-    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
-    const id = window.setTimeout(() => {
-      callback(currTime + timeToCall);
-    }, timeToCall);
-    lastTime = currTime + timeToCall;
-    return id;
-  };
-}
-
-export function getRequestAnimationFrame() {
-  if (typeof window === 'undefined') {
-    return () => { };
-  }
-  if (window.requestAnimationFrame) {
-    return window.requestAnimationFrame.bind(window);
-  }
-  const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0];
-  return prefix
-    ? window[`${prefix}RequestAnimationFrame`]
-    : requestAnimationFramePolyfill();
-}

tests/index.js

@@ -4,12 +4,8 @@ import React from 'react';
 import ReactDom from 'react-dom';
 import expect from 'expect.js';
 import Drawer from '../src';
-import { getRequestAnimationFrame } from '../src/utils';
-
 import '../assets/index.less';
 
-const raf = getRequestAnimationFrame();
-
 describe('rc-drawer-menu', () => {
   let div;
   let instance;
@@ -64,68 +60,58 @@ describe('rc-drawer-menu', () => {
     return parseFloat(str);
   }
 
-  it('single drawer', (done) => {
+  it('single drawer', () => {
     instance = createDrawerInstance({
       width: '200px',
     });
-    raf(() => {
-      const drawer = document.getElementsByClassName('drawer');
-      console.log(drawer.length);
-      expect(drawer.length).to.be(1);
-      const drawerDom = drawer[0].children[1];
-      console.log(drawerDom.style.left);
-      expect(getFloat(drawerDom.style.left)).to.be(-200);
-      done();
-    });
+    const drawer = document.getElementsByClassName('drawer');
+    console.log(drawer.length);
+    expect(drawer.length).to.be(1);
+    const drawerDom = drawer[0].children[1];
+    console.log(drawerDom.style.left);
+    expect(getFloat(drawerDom.style.left)).to.be(-200);
   });
 
-  it('default open drawer', (done) => {
+  it('default open drawer', () => {
     instance = createDrawerInstance({
       defaultOpen: true,
       level: [],
       iconChild: (<i className="a">a</i>),
     });
-    raf(() => {
-      const drawer = document.getElementsByClassName('drawer-content-wrapper')[0];
-      expect(drawer.style.transform).to.eql('translateX(60vw)');
-      done();
-    });
+    const drawer = document.getElementsByClassName('drawer-content-wrapper')[0];
+    expect(drawer.style.transform).to.eql('translateX(60vw)');
   });
 
   it('switch open drawer', (done) => {
     instance = createDrawerInstance({});
-    raf(() => {
-      const drawer = document.getElementsByClassName('drawer-content-wrapper')[0];
+    const drawer = document.getElementsByClassName('drawer-content-wrapper')[0];
+    console.log(drawer.style.transform);
+    expect(drawer.style.transform).to.eql('');
+    instance.switchMenu();
+    setTimeout(() => {
       console.log(drawer.style.transform);
-      expect(drawer.style.transform).to.eql('');
+      expect(drawer.style.transform).to.eql('translateX(60vw)');
       instance.switchMenu();
       setTimeout(() => {
         console.log(drawer.style.transform);
-        expect(drawer.style.transform).to.eql('translateX(60vw)');
-        instance.switchMenu();
-        setTimeout(() => {
-          console.log(drawer.style.transform);
-          expect(drawer.style.transform).to.eql('');
-          done();
-        }, 500);
+        expect(drawer.style.transform).to.eql('');
+        done();
       }, 500);
-    });
+    }, 500);
   });
 
   it('icon child is array', (done) => {
     instance = createDrawerInstance({
       iconChild: [<i className="a">a</i>, <i className="b">b</i>],
     });
-    raf(() => {
-      const icon = document.getElementsByClassName('drawer-button')[0];
-      const iconChild = icon.children[0];
-      expect(iconChild.className).to.eql('a');
+    const icon = document.getElementsByClassName('drawer-button')[0];
+    const iconChild = icon.children[0];
+    expect(iconChild.className).to.eql('a');
+    instance.switchMenu();
+    setTimeout(() => {
+      expect(iconChild.className).to.eql('b');
       instance.switchMenu();
-      raf(() => {
-        expect(iconChild.className).to.eql('b');
-        instance.switchMenu();
-        done();
-      });
+      done();
     });
   });
 });