Skip to content

Commit

Permalink
feat(list): add support for interactive prop, default to non-interactive
Browse files Browse the repository at this point in the history
closes #224
  • Loading branch information
stasson committed Jan 23, 2018
1 parent 44b8711 commit d3b9edb
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 9 deletions.
2 changes: 1 addition & 1 deletion components/list/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
|`bordered`|Boolean|| bordered style |
|`two-line`|Boolean|| two-line style |
|`avatar-list`|Boolean|| set avatar style list |

|`interactive`|Boolean|| set interactive style for hover, focus, and press states |

### Dense List

Expand Down
2 changes: 1 addition & 1 deletion components/list/demo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</mdc-layout-cell>

<mdc-layout-cell>
<mdc-list dense bordered >
<mdc-list dense bordered>
<mdc-list-item>
<i slot="start-detail" class="material-icons">favorite_border</i>
start details
Expand Down
27 changes: 26 additions & 1 deletion components/list/mdc-list-item.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<li class="mdc-list-item">
<li class="mdc-list-item"
:class="classes" :style="styles"
:tabindex="isInteractive ? '0' : undefined">

<span class="mdc-list-item__graphic" v-if="hasStartDetail">
<slot name="start-detail"></slot>
Expand All @@ -21,9 +23,21 @@
</template>

<script>
import {RippleBase} from '../ripple'
export default {
name: 'mdc-list-item',
inject: ['mdcList'],
data () {
return {
classes: {},
styles: {}
}
},
computed: {
isInteractive () {
return this.mdcList && this.mdcList.interactive
},
hasSecondary () {
return !!this.$slots['secondary']
},
Expand All @@ -33,6 +47,17 @@ export default {
hasStartDetail () {
return !!this.$slots['start-detail']
}
},
mounted () {
if (this.isInteractive) {
this.ripple = new RippleBase(this)
this.ripple.init()
}
},
beforeDestroy () {
this.ripple && this.ripple.destroy()
this.ripple = null
}
}
</script>

17 changes: 11 additions & 6 deletions components/list/mdc-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,24 @@
export default {
name: 'mdc-list',
props: {
'dense': Boolean,
'avatar-list': Boolean,
'two-line': Boolean,
'bordered': Boolean
dense: Boolean,
avatarList: Boolean,
twoLine: Boolean,
bordered: Boolean,
interactive: Boolean
},
provide () {
return { mdcList: this }
},
data () {
return {
classes: {
'mdc-list--dense': this.dense,
'mdc-list--avatar-list': this.avatarList,
'mdc-list--two-line': this.twoLine,
'mdc-list--bordered': this.bordered
}
'mdc-list--bordered': this.bordered,
'mdc-list--non-interactive': !this.interactive
}
}
}
}
Expand Down

0 comments on commit d3b9edb

Please sign in to comment.