/* eslint array-callback-return: "off" */
/* eslint consistent-return: "off" */
import f7 from '../utils/f7';
import events from '../utils/events';
import Utils from '../utils/utils';
import Mixins from '../utils/mixins';
/* phenome-dts-imports
import { View as ViewNamespace } from 'framework7/components/view/view';
*/
/* phenome-dts-instance
f7View: ViewNamespace.View
*/
export default {
name: 'f7-view',
props: {
id: [String, Number],
className: String, // phenome-react-line
style: Object, // phenome-react-line
tab: Boolean,
tabActive: Boolean,
name: String,
router: Boolean,
linksView: [Object, String],
url: String,
main: Boolean,
stackPages: Boolean,
xhrCache: Boolean,
xhrCacheIgnore: Array,
xhrCacheIgnoreGetParameters: Boolean,
xhrCacheDuration: Number,
preloadPreviousPage: Boolean,
allowDuplicateUrls: Boolean,
reloadPages: Boolean,
removeElements: Boolean,
removeElementsWithTimeout: Boolean,
removeElementsTimeout: Number,
restoreScrollTopOnBack: Boolean,
// Swipe Back
iosSwipeBack: Boolean,
iosSwipeBackAnimateShadow: Boolean,
iosSwipeBackAnimateOpacity: Boolean,
iosSwipeBackActiveArea: Number,
iosSwipeBackThreshold: Number,
mdSwipeBack: Boolean,
mdSwipeBackAnimateShadow: Boolean,
mdSwipeBackAnimateOpacity: Boolean,
mdSwipeBackActiveArea: Number,
mdSwipeBackThreshold: Number,
// Push State
pushState: Boolean,
pushStateRoot: String,
pushStateAnimate: Boolean,
pushStateAnimateOnLoad: Boolean,
pushStateSeparator: String,
pushStateOnLoad: Boolean,
// Animate Pages
animate: Boolean,
// iOS Dynamic Navbar
iosDynamicNavbar: Boolean,
iosSeparateDynamicNavbar: Boolean,
// Animate iOS Navbar Back Icon
iosAnimateNavbarBackIcon: Boolean,
// MD Theme delay
materialPageLoadDelay: Number,
passRouteQueryToRequest: Boolean,
passRouteParamsToRequest: Boolean,
routes: Array,
routesAdd: Array,
// Routes hooks
routesBeforeEnter: [Function, Array],
routesBeforeLeave: [Function, Array],
init: {
type: Boolean,
default: true,
},
...Mixins.colorProps,
},
state() {
return {
pages: [],
};
},
render() {
const self = this;
const props = self.props;
const {
id,
style,
tab,
main,
tabActive,
className,
} = props;
const classes = Utils.classNames(
className,
'view',
{
'view-main': main,
'tab-active': tabActive,
tab,
},
Mixins.colorClasses(props),
);
return (
{self.state.pages.map((page) => {
const PageComponent = page.component;
if (process.env.COMPILER === 'react') {
return (
);
}
if (process.env.COMPILER === 'vue') {
return (
);
}
})}
);
},
componentDidCreate() {
const self = this;
self.onSwipeBackMoveBound = self.onSwipeBackMove.bind(self);
self.onSwipeBackBeforeChangeBound = self.onSwipeBackBeforeChange.bind(self);
self.onSwipeBackAfterChangeBound = self.onSwipeBackAfterChange.bind(self);
self.onSwipeBackBeforeResetBound = self.onSwipeBackBeforeReset.bind(self);
self.onSwipeBackAfterResetBound = self.onSwipeBackAfterReset.bind(self);
self.onTabShowBound = self.onTabShow.bind(self);
self.onTabHideBound = self.onTabHide.bind(self);
self.onViewInitBound = self.onViewInit.bind(self);
},
componentDidMount() {
const self = this;
const el = self.refs.el;
el.addEventListener('swipeback:move', self.onSwipeBackMoveBound);
el.addEventListener('swipeback:beforechange', self.onSwipeBackBeforeChangeBound);
el.addEventListener('swipeback:afterchange', self.onSwipeBackAfterChangeBound);
el.addEventListener('swipeback:beforereset', self.onSwipeBackBeforeResetBound);
el.addEventListener('swipeback:afterreset', self.onSwipeBackAfterResetBound);
el.addEventListener('tab:show', self.onTabShowBound);
el.addEventListener('tab:hide', self.onTabHideBound);
el.addEventListener('view:init', self.onViewInitBound);
self.setState({ pages: [] });
self.$f7ready((f7Instance) => {
self.routerData = {
el,
component: self,
instance: null,
};
f7.routers.views.push(self.routerData);
if (!self.props.init) return;
// phenome-vue-next-line
self.routerData.instance = f7Instance.views.create(el, Utils.noUndefinedProps(self.$options.propsData || {}));
// phenome-react-next-line
self.routerData.instance = f7Instance.views.create(el, Utils.noUndefinedProps(self.props));
self.f7View = self.routerData.instance;
});
},
componentWillUnmount() {
const self = this;
const el = self.refs.el;
el.removeEventListener('swipeback:move', self.onSwipeBackMoveBound);
el.removeEventListener('swipeback:beforechange', self.onSwipeBackBeforeChangeBound);
el.removeEventListener('swipeback:afterchange', self.onSwipeBackAfterChangeBound);
el.removeEventListener('swipeback:beforereset', self.onSwipeBackBeforeResetBound);
el.removeEventListener('swipeback:afterreset', self.onSwipeBackAfterResetBound);
el.removeEventListener('tab:show', self.onTabShowBound);
el.removeEventListener('tab:hide', self.onTabHideBound);
el.removeEventListener('view:init', self.onViewInitBound);
if (!self.props.init) return;
if (self.f7View && self.f7View.destroy) self.f7View.destroy();
f7.routers.views.splice(f7.routers.views.indexOf(self.routerData), 1);
self.routerData = null;
delete self.routerData;
},
componentDidUpdate() {
const self = this;
if (!self.routerData) return;
events.emit('viewRouterDidUpdate', self.routerData);
},
methods: {
onViewInit(event) {
const self = this;
const view = event.detail;
self.dispatchEvent('view:init viewInit', event, view);
if (!self.props.init) {
self.routerData.instance = view;
self.f7View = self.routerData.instance;
}
},
onSwipeBackMove(event) {
const swipeBackData = event.detail;
this.dispatchEvent('swipeback:move swipeBackMove', event, swipeBackData);
},
onSwipeBackBeforeChange(event) {
const swipeBackData = event.detail;
this.dispatchEvent('swipeback:beforechange swipeBackBeforeChange', event, swipeBackData);
},
onSwipeBackAfterChange(event) {
const swipeBackData = event.detail;
this.dispatchEvent('swipeback:afterchange swipeBackAfterChange', event, swipeBackData);
},
onSwipeBackBeforeReset(event) {
const swipeBackData = event.detail;
this.dispatchEvent('swipeback:beforereset swipeBackBeforeReset', event, swipeBackData);
},
onSwipeBackAfterReset(event) {
const swipeBackData = event.detail;
this.dispatchEvent('swipeback:afterreset swipeBackAfterReset', event, swipeBackData);
},
onTabShow(event) {
this.dispatchEvent('tab:show tabShow', event);
},
onTabHide(event) {
this.dispatchEvent('tab:hide tabHide', event);
},
},
};