[DE] added 'DocumentSettings' controller

apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx

@@ -9,7 +9,8 @@ class DocumentSettingsController extends Component {
     }
 
     onPageOrientation(value){
-        console.log(`changed page orientation: ${value}`);
+        const api = Common.EditorApi.get();
+        api.change_PageOrient(value=='portrait');
     }
 
     render() {

apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import { connect } from 'react-redux';
 import {
     Page,
     Navbar,
@@ -7,36 +8,37 @@ import {
     BlockTitle
 } from 'framework7-react';
 
-export default class DocumentSettings extends Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const textDocumentSettings = "Document Settings";
-        const textBack = "Back";
-        const textOrientation = "Orientation";
-        const textPortrait = "Portrait";
-        const textLandscape = "Landscape";
-        const textFormat = "Format";
-        const textMargins = "Margins";
+const DocumentSettings = props => {
+    const textDocumentSettings = "Document Settings";
+    const textBack = "Back";
+    const textOrientation = "Orientation";
+    const textPortrait = "Portrait";
+    const textLandscape = "Landscape";
+    const textFormat = "Format";
+    const textMargins = "Margins";
 
-        const format = "A4";
-        const formatSize = "21 cm x 29.7 cm";
+    const format = "A4";
+    const formatSize = "21 cm x 29.7 cm";
 
-        return (
-            <Page>
-                <Navbar title={textDocumentSettings} backLink={textBack} />
-                <BlockTitle>{textOrientation}</BlockTitle>
-                <List>
-                    <ListItem radio title={textPortrait} name="orientation-checkbox" defaultChecked onChange={e => this.props.onPageOrientation('portrait')}></ListItem>
-                    <ListItem radio title={textLandscape} name="orientation-checkbox" onChange={e => this.props.onPageOrientation('landscape')}></ListItem>
-                </List>
-                <BlockTitle>{textFormat}</BlockTitle>
-                <List mediaList>
-                    <ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
-                    <ListItem checkbox title={textMargins} link="/margins/"></ListItem>
-                </List>
-            </Page>
-        )
-    }
-};
+    return (
+        <Page>
+            <Navbar title={textDocumentSettings} backLink={textBack} />
+            <BlockTitle>{textOrientation}</BlockTitle>
+            <List>
+                <ListItem radio title={textPortrait} name="orientation-checkbox" checked={props.isPortrait} onClick={e => props.onPageOrientation('portrait')}></ListItem>
+                <ListItem radio title={textLandscape} name="orientation-checkbox" checked={!props.isPortrait} onClick={e => props.onPageOrientation('landscape')}></ListItem>
+            </List>
+            <BlockTitle>{textFormat}</BlockTitle>
+            <List mediaList>
+                <ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
+                <ListItem checkbox title={textMargins} link="/margins/"></ListItem>
+            </List>
+        </Page>
+     )
+};
+
+const mapStateToProps = (state) => {
+    return state.settings;
+};
+
+export default connect(mapStateToProps)(DocumentSettings);

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -1,5 +1,7 @@
 
 import {Component} from 'react'
+import {connect} from 'react-redux'
+import * as Actions from '../store/actions/actions'
 
 class MainController extends Component {
     constructor(props) {
@@ -133,6 +135,7 @@ class MainController extends Component {
                     });
 
                     this.appOptions   = {};
+                    this.bindEvents();
 
                     Common.Gateway.on('init',           loadConfig);
                     // Common.Gateway.on('showmessage',    _.bind(me.onExternalMessage, me));
@@ -140,6 +143,7 @@ class MainController extends Component {
                     Common.Gateway.appReady();
 
                     Common.Notifications.trigger('engineCreated', this.api);
+                    Common.EditorApi = {get: () => this.api};
                 }, error => {
                     console.log('promise failed ' + error);
                 });
@@ -152,9 +156,16 @@ class MainController extends Component {
         document.body.appendChild(script);
     }
 
+    bindEvents() {
+        const {dispatch} = this.props;
+        this.api.asc_registerCallback('asc_onPageOrient', isPortrait => {
+            dispatch(Actions.changePageOrientation(isPortrait === true));
+        });
+    }
+
     render() {
         return null
     }
 }
 
-export default MainController;
+export default connect(null,null,null,{forwardRef:true})(MainController);

apps/documenteditor/mobile/src/store/actions/actions.js

@@ -0,0 +1,9 @@
+
+export const SETTINGS_PAGE_ORIENTATION_CHANGED = 'PAGE_ORIENTATION_CHANGED';
+
+export const changePageOrientation = isPortrait => {
+    return {
+        type: SETTINGS_PAGE_ORIENTATION_CHANGED,
+        isPortrait: isPortrait
+    }
+};

apps/documenteditor/mobile/src/store/reducers/root.js

@@ -1,10 +1,15 @@
 import { combineReducers } from 'redux';
+import settingsReducer from './settings'
 import usersReducer from '../../../../../common/mobile/lib/store/users'
 
 export const initialState = {
+    settings: {
+        isPortrait: true
+    },
     users: []
 };
 
 export const rootReducer = combineReducers({
+    settings: settingsReducer,
     users: usersReducer
 });

apps/documenteditor/mobile/src/store/reducers/settings.js

@@ -0,0 +1,12 @@
+
+import * as actionTypes from '../actions/actions'
+
+const settingsReducer = (state = [], action) => {
+    if (action.type == actionTypes.SETTINGS_PAGE_ORIENTATION_CHANGED) {
+        return {isPortrait: action.isPortrait};
+    }
+
+    return state;
+};
+
+export default settingsReducer;

vendor/framework7-react/babel.config.js

@@ -8,5 +8,6 @@ module.exports = {
   plugins: [
     '@babel/plugin-transform-runtime',
     '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-class-properties',
   ],
 };

vendor/framework7-react/package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.0",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.11.0",