[DE PE] Fix Bug 49364

apps/documenteditor/mobile/src/controller/edit/EditTable.jsx

@@ -17,7 +17,9 @@ class EditTableController extends Component {
         this.onRemoveColumn = this.onRemoveColumn.bind(this);
         this.onRemoveRow = this.onRemoveRow.bind(this);
         this.onWrapMoveText = this.onWrapMoveText.bind(this);
+        this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
     }
+
     closeIfNeed () {
         if (!this.props.storeFocusObjects.isTableInStack) {
             if ( Device.phone ) {
@@ -160,6 +162,7 @@ class EditTableController extends Component {
     onCheckTemplateChange (tableLook, type, isChecked) {
         const api = Common.EditorApi.get();
         const properties = new Asc.CTableProp();
+        
         switch (type) {
             case 0:
                 tableLook.put_FirstRow(isChecked);
@@ -184,6 +187,11 @@ class EditTableController extends Component {
         api.tblApply(properties);
     }
 
+    onGetTableStylesPreviews() {
+        const api = Common.EditorApi.get();
+        setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()),10);
+    }
+
     onFillColor (color) {
         const api = Common.EditorApi.get();
         const properties = new Asc.CTableProp();
@@ -228,9 +236,10 @@ class EditTableController extends Component {
                        onCheckTemplateChange={this.onCheckTemplateChange}
                        onFillColor={this.onFillColor}
                        onBorderTypeClick={this.onBorderTypeClick}
+                       onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
             />
         )
     }
 }
 
-export default inject("storeFocusObjects")(observer(EditTableController));
+export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController));

apps/documenteditor/mobile/src/less/app.less

@@ -46,6 +46,7 @@
     }
 }
 
+
 // Review
 .page-review {
     --f7-toolbar-link-color: @themeColor;
@@ -96,6 +97,15 @@
     }
 }
 
+#edit-table-style, #add-table {
+    .preloader-modal {
+        background-color: transparent;
+        .preloader {
+            --f7-preloader-color: var(--f7-theme-color-shade);
+        }
+    }
+}
+
 .item-content {
     .preview{
         color: @gray;

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

@@ -8,29 +8,39 @@ export class storeTableSettings {
             cellBorders: observable,
             cellBorderWidth: observable,
             cellBorderColor: observable,
+            arrayStyles: observable,
+            isRenderStyles:observable,
             initTableTemplates: action,
-            styles: computed,
+            resetFlagRender: action,
+            setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
         });
     }
 
     _templates = [];
+    arrayStyles = [];
+    isRenderStyles;
 
-    initTableTemplates (templates) {
+    resetFlagRender (bool) {
-        this._templates = templates;
+        this.isRenderStyles = bool;
     }
     
-    get styles () {
+    initTableTemplates () {
+        this.isRenderStyles = true;
+    }
+
+    setStyles (arrStyles) {
         let styles = [];
-        for (let template of this._templates) {
+        for (let template of arrStyles) {
             styles.push({
                         imageUrl    : template.asc_getImage(),
                         templateId  : template.asc_getId()
                     });
                 }
-        return styles;
+        return this.arrayStyles = styles;
     }
+    
     getTableLook (tableObject) {
         return tableObject.get_TableLook()
     }

apps/documenteditor/mobile/src/view/add/Add.jsx

@@ -47,6 +47,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
+
     return (
         <Navbar>
             {tabs.length > 1 ?
@@ -64,11 +65,12 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
     )
 };
 
-const AddLayoutContent = ({ tabs }) => {
+const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => {
+
     return (
         <Tabs animated>
             {tabs.map((item, index) =>
-                <Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                <Tab key={"de-tab-" + item.id} onTabShow={(e) => {e.id === 'add-table' && onGetTableStylesPreviews()}}  id={item.id} className="page-content" tabActive={index === 0}>
                     {item.component}
                 </Tab>
             )}
@@ -76,7 +78,7 @@ const AddLayoutContent = ({ tabs }) => {
     )
 };
 
-const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPanels, style, inPopover}) => {
+const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover}) => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
     const api = Common.EditorApi.get();
@@ -179,11 +181,21 @@ const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPa
             component: <AddLinkController noNavbar={true}/>
         });
     }
+
+    const onGetTableStylesPreviews = () => {
+        const api = Common.EditorApi.get();
+        if(storeTableSettings.isRenderStyles) {
+            f7.preloader.showIn('.preload');
+            setTimeout( () => storeTableSettings.setStyles(api.asc_getTableStylesPreviews()), 10);
+            storeTableSettings.resetFlagRender(false);
+        }
+    }
+
     return (
         <View style={style} stackPages={true} routes={routes}>
             <Page pageContent={false}>
                 <AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
-                <AddLayoutContent tabs={tabs} />
+                <AddLayoutContent tabs={tabs} onGetTableStylesPreviews={onGetTableStylesPreviews}/>
             </Page>
         </View>
     )

apps/documenteditor/mobile/src/view/add/AddTable.jsx

@@ -1,14 +1,23 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
+import { f7 } from 'framework7-react';
 import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
 const AddTable = props => {
+
     const storeTableSettings = props.storeTableSettings;
-    const styles = storeTableSettings.styles;
+    const styles = storeTableSettings.arrayStyles;
+
+    const onReadyStyles = () => {
+        f7.preloader.hideIn('.preload');
+    }
+
     return (
+        
         <div className={'table-styles dataview'}>
+            <div className="preload"></div>
             <ul className="row">
                 {styles.map((style, index) => {
                     return (
@@ -19,6 +28,7 @@ const AddTable = props => {
                     )
                 })}
             </ul>
+            {onReadyStyles()}
         </div>
     )
 };

apps/documenteditor/mobile/src/view/edit/EditTable.jsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
 import {observer, inject} from "mobx-react";
 import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
 import { f7 } from 'framework7-react';
@@ -173,12 +173,18 @@ const PageWrap = props => {
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,onReadyStyles, onGetTableStylesPreviews,storeFocusObjects}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject && tableObject.get_TableStyle();
     const [stateId, setId] = useState(styleId);
-    const styles =  storeTableSettings.styles;
+    const styles =  storeTableSettings.arrayStyles;
     
+    useEffect(() => {
+        if (storeTableSettings.isRenderStyles) onGetTableStylesPreviews();
+        return () => {
+            storeTableSettings.resetFlagRender(false);
+        }
+    }, []);
     return (
         <div className="dataview table-styles">
             <ul className="row">
@@ -192,6 +198,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
                         )
                     })}
             </ul>
+            {storeTableSettings.isRenderStyles && onReadyStyles()}
         </div>
     )
 }));
@@ -200,6 +207,9 @@ const PageStyleOptions = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const tableObject = props.storeFocusObjects.tableObject;
+    const nextStateRef = useRef();
+    const prevStateRef = useRef();
+
     let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
     if (tableObject) {
         tableLook = tableObject.get_TableLook();
@@ -210,9 +220,30 @@ const PageStyleOptions = props => {
         isLastCol = tableLook.get_LastCol();
         isBandVer = tableLook.get_BandVer();
     }
+    
+    nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer];
+
+    useEffect(() => {
+        props.storeTableSettings.resetFlagRender(false);
+        prevStateRef.current = [...nextStateRef.current];
+
+        return () => {
+            if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
+                props.onGetTableStylesPreviews();
+            } 
+        }
+    }, []);
+
+    const openIndicator = () => {
+        if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
+            $$('.table-styles').hide();
+            f7.preloader.showIn('.preload');
+        }
+    }
+
     return (
         <Page>
-            <Navbar title={_t.textOptions} backLink={_t.textBack}>
+            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -464,8 +495,6 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
 const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
-    const storeTableSettings = props.storeTableSettings;
-    const templates = storeTableSettings.styles;
     const isAndroid = Device.android;
 
     const tableObject = props.storeFocusObjects.tableObject;
@@ -474,6 +503,11 @@ const PageStyle = props => {
         return null;
     }
 
+    const onReadyStyles = () => {
+        f7.preloader.hideIn('.preload');
+        $$('.table-styles').show();
+    }
+
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
@@ -495,12 +529,14 @@ const PageStyle = props => {
                 <Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
                     <List>
                         <ListItem>
-                            <StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
+                            <div className="preload"></div>
+                            <StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
                         </ListItem>
                     </List>
                     <List>
                         <ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
-                            onCheckTemplateChange: props.onCheckTemplateChange
+                            onCheckTemplateChange: props.onCheckTemplateChange,
+                            onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                         }}/>
                     </List>
                 </Tab>
@@ -560,6 +596,7 @@ const EditTable = props => {
                 <ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
                     onStyleClick: props.onStyleClick,
                     onCheckTemplateChange: props.onCheckTemplateChange,
+                    onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                     onFillColor: props.onFillColor,
                     onBorderTypeClick: props.onBorderTypeClick
                 }}></ListItem>

apps/presentationeditor/mobile/src/controller/add/AddOther.jsx

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import { f7 } from 'framework7-react';
+import {observer, inject} from "mobx-react";
 import {Device} from '../../../../../common/mobile/utils/device';
 import { withTranslation} from 'react-i18next';
 
@@ -10,6 +11,7 @@ class AddOtherController extends Component {
         super(props);
         this.onStyleClick = this.onStyleClick.bind(this);
         this.initStyleTable = this.initStyleTable.bind(this);
+        this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
 
         this.initTable = false;
     }
@@ -90,6 +92,15 @@ class AddOtherController extends Component {
         }).open();
     }
 
+    onGetTableStylesPreviews = () => {
+        const api = Common.EditorApi.get();
+        if (this.props.storeTableSettings.isRenderStyles) {
+            f7.preloader.showIn('.preload');
+            setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()) , 10);
+            this.props.storeTableSettings.resetFlagRender(false);
+        }
+    }
+
     hideAddComment () {
         const api = Common.EditorApi.get();
         const stack = api.getSelectedElements();
@@ -122,11 +133,12 @@ class AddOtherController extends Component {
                       onStyleClick={this.onStyleClick}
                       initStyleTable={this.initStyleTable}
                       hideAddComment={this.hideAddComment}
+                      onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
             />
         )
     }
 }
 
-const AddOtherWithTranslation = withTranslation()(AddOtherController);
+const AddOtherWithTranslation =  inject("storeTableSettings")(withTranslation()(AddOtherController));
 
 export {AddOtherWithTranslation as AddOtherController};

apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx

@@ -16,6 +16,7 @@ class EditTableController extends Component {
         this.onAddRowBelow = this.onAddRowBelow.bind(this);
         this.onRemoveColumn = this.onRemoveColumn.bind(this);
         this.onRemoveRow = this.onRemoveRow.bind(this);
+        this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
     }
 
     closeIfNeed () {
@@ -120,6 +121,11 @@ class EditTableController extends Component {
         api.tblApply(properties);
     }
 
+    onGetTableStylesPreviews() {
+        const api = Common.EditorApi.get();
+        this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews());
+    }
+
     onFillColor (color) {
         const api = Common.EditorApi.get();
         const properties = new Asc.CTableProp();
@@ -213,9 +219,10 @@ class EditTableController extends Component {
                        onBorderTypeClick={this.onBorderTypeClick}
                        onReorder={this.onReorder}
                        onAlign={this.onAlign}
+                       onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
             />
         )
     }
 }
 
-export default inject("storeFocusObjects")(observer(EditTableController));
+export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController));

apps/presentationeditor/mobile/src/less/app.less

@@ -84,6 +84,15 @@
     }
 }
 
+#edit-table-style, #add-table {
+    .preloader-modal {
+        background-color: transparent;
+        .preloader {
+            --f7-preloader-color: var(--f7-theme-color-shade);
+        }
+    }
+}
+
 .item-content {
     .preview{
         color: @gray;

apps/presentationeditor/mobile/src/store/tableSettings.js

@@ -8,28 +8,37 @@ export class storeTableSettings {
             cellBorders: observable,
             cellBorderWidth: observable,
             cellBorderColor: observable,
+            arrayStyles: observable,
+            isRenderStyles:observable,
             initTableTemplates: action,
-            styles: computed,
+            resetFlagRender: action,
+            setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
         });
     }
 
     _templates = [];
+    arrayStyles = [];
+    isRenderStyles;
 
-    initTableTemplates (templates) {
+    resetFlagRender (bool) {
-        this._templates = templates;
+        this.isRenderStyles = bool;
     }
     
-    get styles () {
+    initTableTemplates () {
+        this.isRenderStyles = true;
+    }
+
+    setStyles (arrStyles) {
         let styles = [];
-        for (let template of this._templates) {
+        for (let template of arrStyles) {
             styles.push({
                         imageUrl    : template.asc_getImage(),
                         templateId  : template.asc_getId()
                     });
                 }
-        return styles;
+        return this.arrayStyles = styles;
     }
 
     getTableLook (tableObject) {

apps/presentationeditor/mobile/src/view/add/AddOther.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react';
+import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
 
@@ -9,10 +9,16 @@ const PageTable = props => {
     const { t } = useTranslation();
     const _t = t('View.Add', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
-    const styles = storeTableSettings.styles;
+    const styles = storeTableSettings.arrayStyles;
+
+    const onReadyStyles = () => {
+        f7.preloader.hideIn('.preload');
+    }
+
     return (
         <Page id={'add-table'}>
             <Navbar title={_t.textTable} backLink={_t.textBack}/>
+            <div className="preload"></div>
             <div className={'table-styles dataview'}>
                 <ul className="row">
                     {styles.map((style, index) => {
@@ -24,6 +30,7 @@ const PageTable = props => {
                         )
                     })}
                 </ul>
+                {onReadyStyles()}
             </div>
         </Page>
     )
@@ -36,7 +43,7 @@ const AddOther = props => {
     const hideAddComment = props.hideAddComment();
     return (
         <List>
-            <ListItem title={_t.textTable} link={'/add-table/'} routeProps={{
+            <ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{
                 onStyleClick: props.onStyleClick,
                 initStyleTable: props.initStyleTable
             }}>

apps/presentationeditor/mobile/src/view/edit/EditTable.jsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useState, useEffect, useRef} from 'react';
 import {observer, inject} from "mobx-react";
 import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
@@ -7,11 +7,18 @@ import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, onReadyStyles, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject ? tableObject.get_TableStyle() : null;
     const [stateId, setId] = useState(styleId);
-    const styles =  storeTableSettings.styles;
+    const styles =  storeTableSettings.arrayStyles;
+    
+    useEffect(() => {
+        if (storeTableSettings.isRenderStyles) onGetTableStylesPreviews();
+        return () => {
+            storeTableSettings.resetFlagRender(false);
+        }
+    }, []);
 
     if (!tableObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@@ -31,6 +38,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
                         )
                     })}
                 </ul>
+            {storeTableSettings.isRenderStyles && onReadyStyles()}
         </div>
     )
 }));
@@ -38,8 +46,10 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
 const PageStyleOptions = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-
     const tableObject = props.storeFocusObjects.tableObject;
+    const nextStateRef = useRef();
+    const prevStateRef = useRef();
+
     let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
     if (tableObject) {
         tableLook = tableObject.get_TableLook();
@@ -51,9 +61,29 @@ const PageStyleOptions = props => {
         isBandVer = tableLook.get_BandVer();
     }
 
+    nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer];
+
+    useEffect(() => {
+        props.storeTableSettings.resetFlagRender(false);
+        prevStateRef.current = [...nextStateRef.current];
+
+        return () => {
+            if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
+                props.onGetTableStylesPreviews();
+            }
+        }
+    }, []);
+
+    const openIndicator = () => {
+        if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
+            $$('.table-styles').hide();
+            f7.preloader.showIn('.preload');
+        }
+    }
+
     return (
         <Page>
-            <Navbar title={_t.textOptions} backLink={_t.textBack}>
+            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -311,10 +341,13 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
 const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-    const storeTableSettings = props.storeTableSettings;
-    const templates = storeTableSettings.styles;
     const isAndroid = Device.android;
 
+    const onReadyStyles = () => {
+        f7.preloader.hideIn('.preload');
+        $$('.table-styles').show();
+    }
+
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
@@ -336,12 +369,14 @@ const PageStyle = props => {
                 <Tab key={"pe-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
                     <List>
                         <ListItem>
-                            <StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
+                        <div className="preload"></div>
+                            <StyleTemplates onReadyStyles={onReadyStyles} onGetTableStylesPreviews={props.onGetTableStylesPreviews} onStyleClick={props.onStyleClick}/>
                         </ListItem>
                     </List>
                     <List>
                         <ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
-                            onCheckTemplateChange: props.onCheckTemplateChange
+                            onCheckTemplateChange: props.onCheckTemplateChange,
+                            onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                         }}/>
                     </List>
                 </Tab>
@@ -495,6 +530,7 @@ const EditTable = props => {
                 <ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
                     onStyleClick: props.onStyleClick,
                     onCheckTemplateChange: props.onCheckTemplateChange,
+                    onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                     onFillColor: props.onFillColor,
                     onBorderTypeClick: props.onBorderTypeClick
                 }}></ListItem>