fix(MdRipple): improve ripple performance

Author: marcosmoura

package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "deepmerge": "^1.5.1",
     "popper.js": "^1.12.5",
+    "raf": "^3.3.2",
     "vue": "^2.4.3"
   },
   "devDependencies": {

src/components/MdList/MdListItem/MdListItem.vue

@@ -7,8 +7,12 @@
   import MdListItemExpand from './MdListItemExpand'
   import MdButton from 'components/MdButton/MdButton'
 
-  function resolveScopedSlot (hasExpand, children) {
-    if (hasExpand) {
+  function hasExpansion (props) {
+    return props.hasOwnProperty('mdExpand') && props.mdExpand !== false
+  }
+
+  function resolveScopedSlot (props, children) {
+    if (hasExpansion(props)) {
       return {
         'md-expand': () => {
           return children['md-expand'][0]
@@ -23,9 +27,6 @@
     components: {
       MdButton
     },
-    props: {
-      mdExpand: Boolean
-    },
     render (createElement, { parent, props, listeners, data, slots }) {
       const interactionEvents = [
         'click',
@@ -38,7 +39,7 @@
       let listComponent = MdListItemDefault
       let staticClass = 'md-list-item'
 
-      if (props.mdExpand) {
+      if (hasExpansion(props)) {
         listComponent = MdListItemExpand
       } else if (parent && parent.$router && props.to) {
         listComponent = MdListItemRouter
@@ -68,7 +69,7 @@
       }, [
         createElement(listComponent, {
           props,
-          scopedSlots: resolveScopedSlot(props.mdExpand, children),
+          scopedSlots: resolveScopedSlot(props, children),
           staticClass: 'md-list-item-container md-button-clean'
         }, children.default)
       ])

src/components/MdList/MdListItem/MdListItemExpand.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+  import raf from 'raf'
   import MdArrowDownIcon from 'core/icons/MdArrowDownIcon'
   import MdListItemMixin from './MdListItemMixin'
 
@@ -45,7 +46,7 @@
         return size
       },
       toggleExpand () {
-        window.requestAnimationFrame(() => {
+        raf(() => {
           let fullHeight = 0
 
           if (!this.showContent) {
@@ -56,6 +57,9 @@
           this.showContent = !this.showContent
         })
       }
+    },
+    created () {
+      console.log(this.$slots)
     }
   }
 </script>

src/components/MdRipple/MdRipple.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script>
+  import raf from 'raf'
   import MdComponent from 'core/MdComponent'
 
   export default new MdComponent({
@@ -70,7 +71,7 @@
         }, 100)
       },
       startRipple ($event) {
-        window.requestAnimationFrame(async () => {
+        raf(async () => {
           const { eventType, isDisabled, mdCentered } = this
 
           if (!isDisabled && (!eventType || eventType === $event.type)) {

yarn.lock

@@ -5350,6 +5350,12 @@ querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
+raf@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27"
+  dependencies:
+    performance-now "^2.1.0"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"