[mobile] update version for Framework7

This commit is contained in:
Maxim Kadushkin 2021-01-25 00:30:49 +03:00
parent a97c7fc4da
commit 003fe4386e
14 changed files with 99 additions and 105 deletions

View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import { Dom7, Device } from 'framework7' import { Dom7 } from 'framework7'
class WrapDevice { class WrapDevice {
constructor(){ constructor(){

View file

@ -57,7 +57,7 @@ class SearchView extends Component {
$$(document).on('page:init', (e, page) => { $$(document).on('page:init', (e, page) => {
if ( page.name == 'home' ) { if ( page.name == 'home' ) {
this.$f7.searchbar.create({ f7.searchbar.create({
el: '.searchbar', el: '.searchbar',
customSearch: true, customSearch: true,
expandable: true, expandable: true,
@ -80,7 +80,7 @@ class SearchView extends Component {
onSettingsClick(e) { onSettingsClick(e) {
if ( Device.phone ) { if ( Device.phone ) {
// f7.popup.open('.settings-popup'); // f7.popup.open('.settings-popup');
} else this.$f7.popover.open('#idx-search-settings', '#idx-btn-search-settings'); } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
} }
render() { render() {

View file

@ -115,7 +115,7 @@ class AddView extends Component {
this.onoptionclick = this.onoptionclick.bind(this); this.onoptionclick = this.onoptionclick.bind(this);
} }
onoptionclick(page){ onoptionclick(page){
this.$f7.views.current.router.navigate(page); f7.views.current.router.navigate(page);
} }
render() { render() {
const show_popover = this.props.usePopover; const show_popover = this.props.usePopover;

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react'; import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react';
import { f7, f7ready } from 'framework7-react';
import '../../../../common/Gateway.js'; import '../../../../common/Gateway.js';
import '../../../../common/main/lib/util/utils.js'; import '../../../../common/main/lib/util/utils.js';
@ -11,27 +12,23 @@ import Notifications from '../../../../common/mobile/utils/notifications.js'
import {MainController} from '../controller/Main'; import {MainController} from '../controller/Main';
import {Device} from '../../../../common/mobile/utils/device' import {Device} from '../../../../common/mobile/utils/device'
export default class extends React.Component { const f7params = {
constructor() {
super();
this.state = {
// Framework7 Parameters
f7params: {
name: 'Desktop Editor', // App name name: 'Desktop Editor', // App name
theme: 'auto', // Automatic theme detection theme: 'auto', // Automatic theme detection
// App routes routes: routes, // App routes
routes: routes, };
},
} export default class extends React.Component {
constructor(props) {
super(props);
Common.Notifications = new Notifications(); Common.Notifications = new Notifications();
} }
render() { render() {
return ( return (
<App params={ this.state.f7params } > <App { ...f7params } >
{/* Your main view, should have "view-main" class */} {/* Your main view, should have "view-main" class */}
<View main className="safe-areas" url="/" /> <View main className="safe-areas" url="/" />
<MainController /> <MainController />
@ -40,7 +37,7 @@ export default class extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.$f7ready((f7) => { f7ready(f7 => {
// Call F7 APIs here // Call F7 APIs here
Device.initDom(); Device.initDom();
}); });

View file

@ -57,7 +57,7 @@ class SearchView extends Component {
$$(document).on('page:init', (e, page) => { $$(document).on('page:init', (e, page) => {
if ( page.name == 'home' ) { if ( page.name == 'home' ) {
this.$f7.searchbar.create({ f7.searchbar.create({
el: '.searchbar', el: '.searchbar',
customSearch: true, customSearch: true,
expandable: true, expandable: true,
@ -80,7 +80,7 @@ class SearchView extends Component {
onSettingsClick(e) { onSettingsClick(e) {
if ( Device.phone ) { if ( Device.phone ) {
// f7.popup.open('.settings-popup'); // f7.popup.open('.settings-popup');
} else this.$f7.popover.open('#idx-search-settings', '#idx-btn-search-settings'); } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
} }
render() { render() {

View file

@ -161,7 +161,7 @@ class SettingsView extends Component {
} }
onoptionclick(page){ onoptionclick(page){
this.$f7.views.current.router.navigate(page); f7.views.current.router.navigate(page);
} }
render() { render() {

View file

@ -3,7 +3,7 @@ import React, { Suspense } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
// Import Framework7 // Import Framework7
import Framework7 from 'framework7/framework7-lite.esm.bundle.js'; import Framework7 from 'framework7/lite-bundle';
// Import Framework7-React Plugin // Import Framework7-React Plugin
import Framework7React from 'framework7-react'; import Framework7React from 'framework7-react';
@ -13,7 +13,7 @@ window.jQuery = jQuery;
window.$ = jQuery; window.$ = jQuery;
// Import Framework7 Styles // Import Framework7 Styles
import 'framework7/css/framework7.bundle.css'; import 'framework7/framework7-bundle.css';
// Import App Custom Styles // Import App Custom Styles
import './less/app.less'; import './less/app.less';

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react'; import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react';
import { f7ready } from 'framework7-react';
import routes from '../router/routes.js'; import routes from '../router/routes.js';
@ -10,26 +11,24 @@ import Notifications from '../../../../common/mobile/utils/notifications.js'
import {MainController} from '../controller/Main'; import {MainController} from '../controller/Main';
import {Device} from '../../../../common/mobile/utils/device' import {Device} from '../../../../common/mobile/utils/device'
// Framework7 Parameters
const f7params = {
name: 'Presentation Editor', // App name
theme: 'auto', // Automatic theme detection
routes: routes, // App routes
};
export default class extends React.Component { export default class extends React.Component {
constructor() { constructor() {
super(); super();
this.state = {
// Framework7 Parameters
f7params: {
name: 'Presentation Editor', // App name
theme: 'auto', // Automatic theme detection
// App routes
routes: routes,
},
}
Common.Notifications = new Notifications(); Common.Notifications = new Notifications();
} }
render() { render() {
return ( return (
<App params={ this.state.f7params } > <App { ...f7params } >
{/* Your main view, should have "view-main" class */} {/* Your main view, should have "view-main" class */}
<View main className="safe-areas" url="/" /> <View main className="safe-areas" url="/" />
<MainController /> <MainController />
@ -38,7 +37,7 @@ export default class extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.$f7ready((f7) => { f7ready(f7 => {
Device.initDom(); Device.initDom();
}); });
} }

View file

@ -87,7 +87,7 @@ class AddView extends Component {
this.onoptionclick = this.onoptionclick.bind(this); this.onoptionclick = this.onoptionclick.bind(this);
} }
onoptionclick(page){ onoptionclick(page){
this.$f7.views.current.router.navigate(page); f7.views.current.router.navigate(page);
} }
render() { render() {
const show_popover = this.props.usePopover; const show_popover = this.props.usePopover;

View file

@ -145,7 +145,7 @@ class SettingsView extends Component {
} }
onoptionclick(page){ onoptionclick(page){
this.$f7.views.current.router.navigate(page); f7.views.current.router.navigate(page);
} }
render() { render() {

View file

@ -3,7 +3,7 @@ import React, { Suspense } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
// Import Framework7 // Import Framework7
import Framework7 from 'framework7/framework7-lite.esm.bundle.js'; import Framework7 from 'framework7/lite-bundle';
// Import Framework7-React Plugin // Import Framework7-React Plugin
import Framework7React from 'framework7-react'; import Framework7React from 'framework7-react';
@ -13,7 +13,7 @@ window.jQuery = jQuery;
window.$ = jQuery; window.$ = jQuery;
// Import Framework7 Styles // Import Framework7 Styles
import 'framework7/css/framework7.bundle.css'; import 'framework7/framework7-bundle.css';
// Import App Custom Styles // Import App Custom Styles
import './less/app.less'; import './less/app.less';

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import {App,Views,View,Navbar,NavLeft,NavRight,Link} from 'framework7-react'; import {App,Views,View,Navbar,NavLeft,NavRight,Link} from 'framework7-react';
import { f7ready } from 'framework7-react';
import routes from '../router/routes.js'; import routes from '../router/routes.js';
@ -11,27 +12,23 @@ import {MainController} from '../controller/Main';
import {Device} from '../../../../common/mobile/utils/device' import {Device} from '../../../../common/mobile/utils/device'
import CellEditor from '../controller/CellEditor'; import CellEditor from '../controller/CellEditor';
export default class extends React.Component { const f7params = {
constructor() {
super();
this.state = {
// Framework7 Parameters
f7params: {
name: 'Spreadsheet Editor', // App name name: 'Spreadsheet Editor', // App name
theme: 'auto', // Automatic theme detection theme: 'auto', // Automatic theme detection
// App routes routes: routes, // App routes
routes: routes, };
},
} export default class extends React.Component {
constructor() {
super();
Common.Notifications = new Notifications(); Common.Notifications = new Notifications();
} }
render() { render() {
return ( return (
<App params={ this.state.f7params } > <App { ...f7params } >
{/* Your main view, should have "view-main" class */} {/* Your main view, should have "view-main" class */}
<View main className="safe-areas" url="/"> <View main className="safe-areas" url="/">
<MainController /> <MainController />
@ -41,7 +38,7 @@ export default class extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.$f7ready((f7) => { f7ready(f7 => {
Device.initDom(); Device.initDom();
}); });
} }

View file

@ -77,7 +77,7 @@ class SettingsView extends Component {
} }
onoptionclick(page){ onoptionclick(page){
this.$f7.views.current.router.navigate(page); f7.views.current.router.navigate(page);
} }
render() { render() {

View file

@ -24,55 +24,56 @@
"Samsung >= 5" "Samsung >= 5"
], ],
"dependencies": { "dependencies": {
"dom7": "^2.1.5", "dom7": "^3.0.0",
"framework7": "^5.7.10", "framework7": "^6.0.4",
"framework7-icons": "^3.0.1", "framework7-icons": "^3.0.1",
"framework7-react": "^5.7.10", "framework7-react": "^6.0.4",
"i18next": "^19.6.3", "i18next": "^19.8.4",
"i18next-fetch-backend": "^3.0.0", "i18next-fetch-backend": "^3.0.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^17.0.1",
"react-dom": "^16.13.1", "react-dom": "^17.0.1",
"react-i18next": "^11.7.0", "react-i18next": "^11.8.5",
"swiper": "^6.4.8",
"template7": "^1.4.2" "template7": "^1.4.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.11.0", "@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.10.5", "@babel/plugin-proposal-decorators": "^7.12.12",
"@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.11.0", "@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.11.0", "@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.10.4", "@babel/preset-react": "^7.12.10",
"@babel/runtime": "^7.11.0", "@babel/runtime": "^7.12.5",
"babel-loader": "^8.1.0", "babel-loader": "^8.2.2",
"chalk": "^4.1.0", "chalk": "^4.1.0",
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.0.3", "copy-webpack-plugin": "^6.4.1",
"cpy-cli": "^3.1.1", "cpy-cli": "^3.1.1",
"cross-env": "^7.0.2", "cross-env": "^7.0.3",
"css-loader": "^4.2.0", "css-loader": "^4.3.0",
"file-loader": "^6.0.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.5.1",
"less": "^3.12.2", "less": "^3.13.1",
"less-loader": "^6.2.0", "less-loader": "^6.2.0",
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^0.9.0",
"mobx": "^5.15.7", "mobx": "^5.15.7",
"mobx-react": "^6.3.0", "mobx-react": "^6.3.1",
"optimize-css-assets-webpack-plugin": "^5.0.3", "optimize-css-assets-webpack-plugin": "^5.0.4",
"ora": "^4.0.5", "ora": "^4.1.1",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0", "postcss-preset-env": "^6.7.0",
"react-redux": "^7.2.1", "react-redux": "^7.2.2",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"style-loader": "^1.2.1", "style-loader": "^1.3.0",
"terser-webpack-plugin": "^3.1.0", "terser-webpack-plugin": "^3.1.0",
"url-loader": "^4.1.0", "url-loader": "^4.1.1",
"webpack": "^4.44.1", "webpack": "^4.46.0",
"webpack-cli": "^3.3.12", "webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.2",
"workbox-webpack-plugin": "^5.1.3", "workbox-webpack-plugin": "^5.1.4"
"redux-thunk": "^2.3.0"
} }
} }