use better name of controlled prop
This commit is contained in:
parent
eafd53f994
commit
6e51774ccb
2 changed files with 10 additions and 10 deletions
|
@ -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"
|
||||||
|
|
|
@ -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)}
|
||||||
|
|
Loading…
Reference in a new issue