/* eslint array-callback-return: "off" */ /* eslint consistent-return: "off" */ import events from '../utils/events'; import f7 from '../utils/f7'; import Utils from '../utils/utils'; import Mixins from '../utils/mixins'; export default { name: 'f7-tab', props: { id: [String, Number], className: String, // phenome-react-line style: Object, // phenome-react-line tabActive: Boolean, ...Mixins.colorProps, }, state() { return { tabContent: null, }; }, render() { const self = this; const props = self.props; const { tabActive, id, className, style } = props; const tabContent = self.state.tabContent; const classes = Utils.classNames( className, 'tab', { 'tab-active': tabActive, }, Mixins.colorClasses(props), ); let TabContent; if (tabContent) TabContent = tabContent.component; if (process.env.COMPILER === 'react') { return (
{tabContent ? ( ) : ( )}
); } if (process.env.COMPILER === 'vue') { return (
{tabContent ? ( ) : ( )}
); } }, componentDidCreate() { this.onTabShowBound = this.onTabShow.bind(this); this.onTabHideBound = this.onTabHide.bind(this); }, componentDidUpdate() { const self = this; if (!self.routerData) return; events.emit('tabRouterDidUpdate', self.routerData); }, componentWillUnmount() { const self = this; const el = self.refs.el; if (el) { el.removeEventListener('tab:show', self.onTabShowBound); el.removeEventListener('tab:hide', self.onTabHideBound); } if (!self.routerData) return; f7.routers.tabs.splice(f7.routers.tabs.indexOf(self.routerData), 1); self.routerData = null; delete self.routerData; }, componentDidMount() { const self = this; const el = self.refs.el; if (el) { el.addEventListener('tab:show', self.onTabShowBound); el.addEventListener('tab:hide', self.onTabHideBound); } self.setState({ tabContent: null }); self.$f7ready(() => { self.routerData = { el, component: self, }; f7.routers.tabs.push(self.routerData); }); }, methods: { show(animate) { if (!this.$f7) return; this.$f7.tab.show(this.refs.el, animate); }, onTabShow(event) { this.dispatchEvent('tab:show tabShow', event); }, onTabHide(event) { this.dispatchEvent('tab:hide tabHide', event); }, }, };