use better name of controlled prop

This commit is contained in:
taehoon 2019-08-10 00:26:29 -04:00
parent eafd53f994
commit 6e51774ccb
2 changed files with 10 additions and 10 deletions

View File

@ -31,7 +31,7 @@
<tab-switcher <tab-switcher
ref="tabSwitcher" ref="tabSwitcher"
:on-switch="onResultTabSwitch" :on-switch="onResultTabSwitch"
:custom-active="currenResultTab" :active-tab="currenResultTab"
> >
<span <span
key="statuses" key="statuses"

View File

@ -4,7 +4,7 @@ import './tab_switcher.scss'
export default Vue.component('tab-switcher', { export default Vue.component('tab-switcher', {
name: 'TabSwitcher', name: 'TabSwitcher',
props: ['renderOnlyFocused', 'onSwitch', 'customActive'], props: ['renderOnlyFocused', 'onSwitch', 'activeTab'],
data () { data () {
return { return {
active: this.$slots.default.findIndex(_ => _.tag) active: this.$slots.default.findIndex(_ => _.tag)
@ -26,12 +26,12 @@ export default Vue.component('tab-switcher', {
} }
}, },
isActiveTab (index) { isActiveTab (index) {
const customActiveIndex = this.$slots.default.findIndex(slot => { // In case of controlled component
const dataFilter = slot.data && slot.data.attrs && slot.data.attrs['data-filter'] if (this.activeTab) {
return this.customActive && this.customActive === dataFilter return this.$slots.default.findIndex(slot => this.activeTab === slot.key) === index
}) } else {
return this.active === index
return customActiveIndex > -1 ? customActiveIndex === index : index === this.active }
} }
}, },
render (h) { render (h) {
@ -47,7 +47,7 @@ export default Vue.component('tab-switcher', {
} }
if (slot.data.attrs.image) { if (slot.data.attrs.image) {
return ( return (
<div class={ classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)} onClick={this.activateTab(index)}
@ -59,7 +59,7 @@ export default Vue.component('tab-switcher', {
) )
} }
return ( return (
<div class={ classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)} onClick={this.activateTab(index)}