From 003fe4386eed12e76d70c1acc678138049fe5a3e Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 25 Jan 2021 00:30:49 +0300 Subject: [PATCH] [mobile] update version for Framework7 --- apps/common/mobile/utils/device.jsx | 2 +- .../documenteditor/mobile/src/view/Search.jsx | 4 +- .../mobile/src/view/add/Add.jsx | 2 +- apps/documenteditor/mobile/src/view/app.jsx | 45 +++++++------ .../documenteditor/mobile/src/view/search.jsx | 4 +- .../mobile/src/view/settings/Settings.jsx | 2 +- apps/presentationeditor/mobile/src/app.js | 4 +- .../mobile/src/page/app.jsx | 45 +++++++------ .../mobile/src/view/add/Add.jsx | 2 +- .../mobile/src/view/settings/Settings.jsx | 2 +- apps/spreadsheeteditor/mobile/src/app.js | 4 +- .../spreadsheeteditor/mobile/src/page/app.jsx | 23 +++---- .../mobile/src/view/settings/Settings.jsx | 2 +- vendor/framework7-react/package.json | 63 ++++++++++--------- 14 files changed, 99 insertions(+), 105 deletions(-) diff --git a/apps/common/mobile/utils/device.jsx b/apps/common/mobile/utils/device.jsx index 72f0cd09f..fe22cbfe7 100644 --- a/apps/common/mobile/utils/device.jsx +++ b/apps/common/mobile/utils/device.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { f7 } from 'framework7-react'; -import { Dom7, Device } from 'framework7' +import { Dom7 } from 'framework7' class WrapDevice { constructor(){ diff --git a/apps/documenteditor/mobile/src/view/Search.jsx b/apps/documenteditor/mobile/src/view/Search.jsx index dcbcb6de2..c5c01ac65 100644 --- a/apps/documenteditor/mobile/src/view/Search.jsx +++ b/apps/documenteditor/mobile/src/view/Search.jsx @@ -57,7 +57,7 @@ class SearchView extends Component { $$(document).on('page:init', (e, page) => { if ( page.name == 'home' ) { - this.$f7.searchbar.create({ + f7.searchbar.create({ el: '.searchbar', customSearch: true, expandable: true, @@ -80,7 +80,7 @@ class SearchView extends Component { onSettingsClick(e) { if ( Device.phone ) { // 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() { diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx index 0e5088920..486c57dd3 100644 --- a/apps/documenteditor/mobile/src/view/add/Add.jsx +++ b/apps/documenteditor/mobile/src/view/add/Add.jsx @@ -115,7 +115,7 @@ class AddView extends Component { this.onoptionclick = this.onoptionclick.bind(this); } onoptionclick(page){ - this.$f7.views.current.router.navigate(page); + f7.views.current.router.navigate(page); } render() { const show_popover = this.props.usePopover; diff --git a/apps/documenteditor/mobile/src/view/app.jsx b/apps/documenteditor/mobile/src/view/app.jsx index 23137afc5..c6537de1d 100644 --- a/apps/documenteditor/mobile/src/view/app.jsx +++ b/apps/documenteditor/mobile/src/view/app.jsx @@ -1,6 +1,7 @@ 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 { f7, f7ready } from 'framework7-react'; import '../../../../common/Gateway.js'; import '../../../../common/main/lib/util/utils.js'; @@ -11,36 +12,32 @@ import Notifications from '../../../../common/mobile/utils/notifications.js' import {MainController} from '../controller/Main'; import {Device} from '../../../../common/mobile/utils/device' +const f7params = { + name: 'Desktop Editor', // App name + theme: 'auto', // Automatic theme detection + + routes: routes, // App routes +}; + export default class extends React.Component { - constructor() { - super(); + constructor(props) { + super(props); - this.state = { - // Framework7 Parameters - f7params: { - name: 'Desktop Editor', // App name - theme: 'auto', // Automatic theme detection - - // App routes - routes: routes, - }, + Common.Notifications = new Notifications(); } - Common.Notifications = new Notifications(); - } - render() { - return ( - - - {/* Your main view, should have "view-main" class */} - - - - ) - } + render() { + return ( + + {/* Your main view, should have "view-main" class */} + + + + ) + } componentDidMount() { - this.$f7ready((f7) => { + f7ready(f7 => { // Call F7 APIs here Device.initDom(); }); diff --git a/apps/documenteditor/mobile/src/view/search.jsx b/apps/documenteditor/mobile/src/view/search.jsx index dcbcb6de2..c5c01ac65 100644 --- a/apps/documenteditor/mobile/src/view/search.jsx +++ b/apps/documenteditor/mobile/src/view/search.jsx @@ -57,7 +57,7 @@ class SearchView extends Component { $$(document).on('page:init', (e, page) => { if ( page.name == 'home' ) { - this.$f7.searchbar.create({ + f7.searchbar.create({ el: '.searchbar', customSearch: true, expandable: true, @@ -80,7 +80,7 @@ class SearchView extends Component { onSettingsClick(e) { if ( Device.phone ) { // 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() { diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index e23076893..8d74639b9 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -161,7 +161,7 @@ class SettingsView extends Component { } onoptionclick(page){ - this.$f7.views.current.router.navigate(page); + f7.views.current.router.navigate(page); } render() { diff --git a/apps/presentationeditor/mobile/src/app.js b/apps/presentationeditor/mobile/src/app.js index 048ac06ae..3ea2811b7 100644 --- a/apps/presentationeditor/mobile/src/app.js +++ b/apps/presentationeditor/mobile/src/app.js @@ -3,7 +3,7 @@ import React, { Suspense } from 'react'; import ReactDOM from 'react-dom'; // Import Framework7 -import Framework7 from 'framework7/framework7-lite.esm.bundle.js'; +import Framework7 from 'framework7/lite-bundle'; // Import Framework7-React Plugin import Framework7React from 'framework7-react'; @@ -13,7 +13,7 @@ window.jQuery = jQuery; window.$ = jQuery; // Import Framework7 Styles -import 'framework7/css/framework7.bundle.css'; +import 'framework7/framework7-bundle.css'; // Import App Custom Styles import './less/app.less'; diff --git a/apps/presentationeditor/mobile/src/page/app.jsx b/apps/presentationeditor/mobile/src/page/app.jsx index c1349b71d..f9ce61c9b 100644 --- a/apps/presentationeditor/mobile/src/page/app.jsx +++ b/apps/presentationeditor/mobile/src/page/app.jsx @@ -1,6 +1,7 @@ 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 { f7ready } from 'framework7-react'; import routes from '../router/routes.js'; @@ -10,35 +11,33 @@ import Notifications from '../../../../common/mobile/utils/notifications.js' import {MainController} from '../controller/Main'; 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 { - constructor() { - super(); + constructor() { + 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() { - return ( - - {/* Your main view, should have "view-main" class */} - - - - ) - } + render() { + return ( + + {/* Your main view, should have "view-main" class */} + + + + ) + } componentDidMount() { - this.$f7ready((f7) => { + f7ready(f7 => { Device.initDom(); }); } diff --git a/apps/presentationeditor/mobile/src/view/add/Add.jsx b/apps/presentationeditor/mobile/src/view/add/Add.jsx index d8de0afec..07d98fa64 100644 --- a/apps/presentationeditor/mobile/src/view/add/Add.jsx +++ b/apps/presentationeditor/mobile/src/view/add/Add.jsx @@ -87,7 +87,7 @@ class AddView extends Component { this.onoptionclick = this.onoptionclick.bind(this); } onoptionclick(page){ - this.$f7.views.current.router.navigate(page); + f7.views.current.router.navigate(page); } render() { const show_popover = this.props.usePopover; diff --git a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx index 294a80ee9..094ecb6cf 100644 --- a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx @@ -145,7 +145,7 @@ class SettingsView extends Component { } onoptionclick(page){ - this.$f7.views.current.router.navigate(page); + f7.views.current.router.navigate(page); } render() { diff --git a/apps/spreadsheeteditor/mobile/src/app.js b/apps/spreadsheeteditor/mobile/src/app.js index c9bacb2e6..8d55619f5 100644 --- a/apps/spreadsheeteditor/mobile/src/app.js +++ b/apps/spreadsheeteditor/mobile/src/app.js @@ -3,7 +3,7 @@ import React, { Suspense } from 'react'; import ReactDOM from 'react-dom'; // Import Framework7 -import Framework7 from 'framework7/framework7-lite.esm.bundle.js'; +import Framework7 from 'framework7/lite-bundle'; // Import Framework7-React Plugin import Framework7React from 'framework7-react'; @@ -13,7 +13,7 @@ window.jQuery = jQuery; window.$ = jQuery; // Import Framework7 Styles -import 'framework7/css/framework7.bundle.css'; +import 'framework7/framework7-bundle.css'; // Import App Custom Styles import './less/app.less'; diff --git a/apps/spreadsheeteditor/mobile/src/page/app.jsx b/apps/spreadsheeteditor/mobile/src/page/app.jsx index 73d2b5329..80f710df8 100644 --- a/apps/spreadsheeteditor/mobile/src/page/app.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/app.jsx @@ -1,6 +1,7 @@ import React from 'react'; import {App,Views,View,Navbar,NavLeft,NavRight,Link} from 'framework7-react'; +import { f7ready } from 'framework7-react'; import routes from '../router/routes.js'; @@ -11,27 +12,23 @@ import {MainController} from '../controller/Main'; import {Device} from '../../../../common/mobile/utils/device' import CellEditor from '../controller/CellEditor'; +const f7params = { + name: 'Spreadsheet Editor', // App name + theme: 'auto', // Automatic theme detection + + routes: routes, // App routes +}; + export default class extends React.Component { constructor() { super(); - this.state = { - // Framework7 Parameters - f7params: { - name: 'Spreadsheet Editor', // App name - theme: 'auto', // Automatic theme detection - - // App routes - routes: routes, - }, - } - Common.Notifications = new Notifications(); } render() { return ( - + {/* Your main view, should have "view-main" class */} @@ -41,7 +38,7 @@ export default class extends React.Component { } componentDidMount() { - this.$f7ready((f7) => { + f7ready(f7 => { Device.initDom(); }); } diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 47dcc250c..4a4ee90c4 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -77,7 +77,7 @@ class SettingsView extends Component { } onoptionclick(page){ - this.$f7.views.current.router.navigate(page); + f7.views.current.router.navigate(page); } render() { diff --git a/vendor/framework7-react/package.json b/vendor/framework7-react/package.json index 443fd9fc6..2cfa15418 100644 --- a/vendor/framework7-react/package.json +++ b/vendor/framework7-react/package.json @@ -24,55 +24,56 @@ "Samsung >= 5" ], "dependencies": { - "dom7": "^2.1.5", - "framework7": "^5.7.10", + "dom7": "^3.0.0", + "framework7": "^6.0.4", "framework7-icons": "^3.0.1", - "framework7-react": "^5.7.10", - "i18next": "^19.6.3", + "framework7-react": "^6.0.4", + "i18next": "^19.8.4", "i18next-fetch-backend": "^3.0.0", "prop-types": "^15.7.2", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-i18next": "^11.7.0", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "react-i18next": "^11.8.5", + "swiper": "^6.4.8", "template7": "^1.4.2" }, "devDependencies": { - "@babel/core": "^7.11.0", - "@babel/plugin-proposal-class-properties": "^7.10.4", - "@babel/plugin-proposal-decorators": "^7.10.5", + "@babel/core": "^7.12.10", + "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-proposal-decorators": "^7.12.12", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-transform-runtime": "^7.11.0", - "@babel/preset-env": "^7.11.0", - "@babel/preset-react": "^7.10.4", - "@babel/runtime": "^7.11.0", - "babel-loader": "^8.1.0", + "@babel/plugin-transform-runtime": "^7.12.10", + "@babel/preset-env": "^7.12.11", + "@babel/preset-react": "^7.12.10", + "@babel/runtime": "^7.12.5", + "babel-loader": "^8.2.2", "chalk": "^4.1.0", "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^6.0.3", + "copy-webpack-plugin": "^6.4.1", "cpy-cli": "^3.1.1", - "cross-env": "^7.0.2", - "css-loader": "^4.2.0", - "file-loader": "^6.0.0", - "html-webpack-plugin": "^4.3.0", - "less": "^3.12.2", + "cross-env": "^7.0.3", + "css-loader": "^4.3.0", + "file-loader": "^6.2.0", + "html-webpack-plugin": "^4.5.1", + "less": "^3.13.1", "less-loader": "^6.2.0", "mini-css-extract-plugin": "^0.9.0", "mobx": "^5.15.7", - "mobx-react": "^6.3.0", - "optimize-css-assets-webpack-plugin": "^5.0.3", - "ora": "^4.0.5", + "mobx-react": "^6.3.1", + "optimize-css-assets-webpack-plugin": "^5.0.4", + "ora": "^4.1.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", - "react-redux": "^7.2.1", + "react-redux": "^7.2.2", "redux": "^4.0.5", + "redux-thunk": "^2.3.0", "rimraf": "^3.0.2", - "style-loader": "^1.2.1", + "style-loader": "^1.3.0", "terser-webpack-plugin": "^3.1.0", - "url-loader": "^4.1.0", - "webpack": "^4.44.1", + "url-loader": "^4.1.1", + "webpack": "^4.46.0", "webpack-cli": "^3.3.12", - "webpack-dev-server": "^3.11.0", - "workbox-webpack-plugin": "^5.1.3", - "redux-thunk": "^2.3.0" + "webpack-dev-server": "^3.11.2", + "workbox-webpack-plugin": "^5.1.4" } }