[DE PE] Refactoring TableStyles

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

@@ -9,9 +9,6 @@ class AddTableController extends Component {
     constructor (props) {
         super(props);
         this.onStyleClick = this.onStyleClick.bind(this);
-
-        const api = Common.EditorApi.get();
-        api.asc_GetDefaultTableStyles();
     }
 
     closeModal () {

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

@@ -11,6 +11,7 @@ class DocumentSettingsController extends Component {
         this.getMargins = this.getMargins.bind(this);
         this.applyMargins = this.applyMargins.bind(this);
         this.onFormatChange = this.onFormatChange.bind(this);
+        this.onColorSchemeChange = this.onColorSchemeChange.bind(this);
     }
 
     onPageOrientation (value){
@@ -107,6 +108,7 @@ class DocumentSettingsController extends Component {
     onColorSchemeChange(newScheme) {
         const api = Common.EditorApi.get();
         api.asc_ChangeColorSchemeByIdx(+newScheme);
+        this.props.storeTableSettings.setStyles([], 'default');
     }
 
     render () {
@@ -122,4 +124,4 @@ class DocumentSettingsController extends Component {
     }
 }
 
-export default inject("storeDocumentSettings")(observer(withTranslation()(DocumentSettingsController)));
+export default inject("storeDocumentSettings", 'storeTableSettings')(observer(withTranslation()(DocumentSettingsController)));

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

@@ -14,10 +14,12 @@ export class storeTableSettings {
             updateCellBorderColor: action,
             setAutoColor: action,
             colorAuto: observable,
+            arrayStylesDefault: observable,
         });
     }
 
     arrayStyles = [];
+    arrayStylesDefault = [];
     colorAuto = 'auto';
 
     setAutoColor(value) {
@@ -28,7 +30,7 @@ export class storeTableSettings {
         this.arrayStyles = [];
     }
 
-    setStyles (arrStyles) {
+    setStyles (arrStyles, typeStyles) {
         let styles = [];
         for (let template of arrStyles) {
             styles.push({
@@ -36,6 +38,10 @@ export class storeTableSettings {
                 templateId  : template.asc_getId()
             });
         }
+        
+        if(typeStyles === 'default') {
+           return this.arrayStylesDefault = styles;
+        } 
         return this.arrayStyles = styles;
     }
 

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

@@ -179,9 +179,12 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
             component: <AddLinkController noNavbar={true}/>
         });
     }
+
     const onGetTableStylesPreviews = () => {
-        const api = Common.EditorApi.get();
+        if(storeTableSettings.arrayStylesDefault.length == 0) {
-        setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
+            const api = Common.EditorApi.get();
+            setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true), 'default'), 1);
+        }
     }
 
     return (

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

@@ -6,7 +6,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 const AddTable = props => {
     const storeTableSettings = props.storeTableSettings;
-    const styles = storeTableSettings.arrayStyles;
+    const styles = storeTableSettings.arrayStylesDefault;
 
     return (
         <div className={'table-styles dataview'}>

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

@@ -226,11 +226,9 @@ const PageStyleOptions = props => {
         isBandVer = tableLook.get_BandVer();
     }
 
-    const openIndicator = () => props.onGetTableStylesPreviews();
-
     return (
         <Page>
-            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
+            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={props.onGetTableStylesPreviews}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>

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

@@ -10,10 +10,7 @@ class AddOtherController extends Component {
     constructor (props) {
         super(props);
         this.onStyleClick = this.onStyleClick.bind(this);
-        this.initStyleTable = this.initStyleTable.bind(this);
         this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
-
-        this.initTable = false;
     }
 
     closeModal () {
@@ -24,14 +21,6 @@ class AddOtherController extends Component {
         }
     }
 
-    initStyleTable () {
-        if (!this.initTable) {
-            const api = Common.EditorApi.get();
-            api.asc_GetDefaultTableStyles();
-            this.initTable = true;
-        }
-    }
-
     onStyleClick (type) {
         const api = Common.EditorApi.get();
 
@@ -93,8 +82,10 @@ class AddOtherController extends Component {
     }
 
     onGetTableStylesPreviews = () => {
-        const api = Common.EditorApi.get();
+        if(this.props.storeTableSettings.arrayStylesDefault.length == 0) {
-        setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
+            const api = Common.EditorApi.get();
+            setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true), 'default'), 1);
+        }
     }
 
     hideAddComment () {
@@ -127,7 +118,6 @@ class AddOtherController extends Component {
         return (
             <AddOther closeModal={this.closeModal}
                       onStyleClick={this.onStyleClick}
-                      initStyleTable={this.initStyleTable}
                       hideAddComment={this.hideAddComment}
                       onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
             />

apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx

@@ -7,6 +7,7 @@ class PresentationSettingsController extends Component {
         super(props);
         this.initSlideSize = this.initSlideSize.bind(this);
         this.onSlideSize = this.onSlideSize.bind(this);
+        this.onColorSchemeChange = this.onColorSchemeChange.bind(this);
         this.initSlideSize();
     }
 
@@ -47,6 +48,7 @@ class PresentationSettingsController extends Component {
     onColorSchemeChange(newScheme) {
         const api = Common.EditorApi.get();
         api.asc_ChangeColorSchemeByIdx(newScheme);
+        this.props.storeTableSettings.setStyles([], 'default');
     }
 
 
@@ -62,4 +64,4 @@ class PresentationSettingsController extends Component {
     }
 }
 
-export default inject("storePresentationSettings")(observer(PresentationSettingsController));
+export default inject("storePresentationSettings", "storeTableSettings")(observer(PresentationSettingsController));

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

@@ -14,10 +14,12 @@ export class storeTableSettings {
             updateCellBorderColor: action,
             setAutoColor: action,
             colorAuto: observable,
+            arrayStylesDefault: observable,
         });
     }
 
     arrayStyles = [];
+    arrayStylesDefault = [];
     colorAuto = 'auto';
 
     setAutoColor(value) {
@@ -28,7 +30,7 @@ export class storeTableSettings {
         this.arrayStyles = [];
     }
 
-    setStyles (arrStyles) {
+    setStyles (arrStyles, typeStyles) {
         let styles = [];
         for (let template of arrStyles) {
             styles.push({
@@ -36,6 +38,10 @@ export class storeTableSettings {
                 templateId  : template.asc_getId()
             });
         }
+
+        if(typeStyles === 'default') {
+            return this.arrayStylesDefault = styles;
+        } 
         return this.arrayStyles = styles;
     }
 

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

@@ -5,11 +5,10 @@ import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
 
 const PageTable = props => {
-    props.initStyleTable();
     const { t } = useTranslation();
     const _t = t('View.Add', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
-    const styles = storeTableSettings.arrayStyles;
+    const styles = storeTableSettings.arrayStylesDefault;
 
     return (
         <Page id={'add-table'}>
@@ -50,7 +49,6 @@ const AddOther = props => {
         <List>
             <ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{
                 onStyleClick: props.onStyleClick,
-                initStyleTable: props.initStyleTable
             }}>
                 <Icon slot="media" icon="icon-add-table"></Icon>
             </ListItem>

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

@@ -66,11 +66,9 @@ const PageStyleOptions = props => {
         isBandVer = tableLook.get_BandVer();
     }
 
-    const openIndicator = () => props.onGetTableStylesPreviews();
-
     return (
         <Page>
-            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
+            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={props.onGetTableStylesPreviews}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>