[DE mobile] Change styles in table of contents

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

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {observer, inject} from "mobx-react";
-
 import { EditTableContents } from '../../view/edit/EditTableContents';
 
 class EditTableContentsController extends Component {
@@ -12,6 +11,21 @@ class EditTableContentsController extends Component {
         this.startLevel = 1;
         this.endLevel = 3;
         this.fillTOCProps = this.fillTOCProps.bind(this);
+        // this.getStylesImages = this.getStylesImages.bind(this);
+    }
+
+    getStylesImages(id, value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+        // const arrValuesStyles = [Asc.c_oAscTOCStylesType.Current, Asc.c_oAscTOCStylesType.Simple, Asc.c_oAscTOCStylesType.Web, Asc.c_oAscTOCStylesType.Standard, Asc.c_oAscTOCStylesType.Modern, Asc.c_oAscTOCStylesType.Classic];
+
+        propsTableContents.put_StylesType(value);
+        api.SetDrawImagePlaceContents(id, propsTableContents);
+
+        // arrValuesStyles.forEach((value, index) => {
+        //     propsTableContents.put_StylesType(value);
+        //     api.SetDrawImagePlaceContents(`image-style${index}`, propsTableContents);
+        // });
     }
 
     onStyle(value) {
@@ -244,6 +258,7 @@ class EditTableContentsController extends Component {
                 onLevelsChange={this.onLevelsChange}
                 fillTOCProps={this.fillTOCProps}
                 addStyles={this.addStyles}
+                getStylesImages={this.getStylesImages}
             />
         )
     }

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

@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+import StylesImages from '../../view/edit/StylesImages';
+
+class StylesImagesController extends Component {
+    constructor (props) {
+        super(props);
+        // this.getStylesImages = this.getStylesImages.bind(this);
+    }
+
+    getStylesImages() {
+        const api = Common.EditorApi.get();
+        // const propsTableContents = api.asc_GetTableOfContentsPr();
+        const arrValuesStyles = [Asc.c_oAscTOCStylesType.Current, Asc.c_oAscTOCStylesType.Simple, Asc.c_oAscTOCStylesType.Web, Asc.c_oAscTOCStylesType.Standard, Asc.c_oAscTOCStylesType.Modern, Asc.c_oAscTOCStylesType.Classic];
+
+        arrValuesStyles.forEach((value, index) => {
+            let propsTableContents = api.asc_GetTableOfContentsPr();
+            // let propsTableContents = new Asc.CTableOfContentsPr();
+            propsTableContents.put_StylesType(value);
+            api.SetDrawImagePlaceContents(`image-style${index}`, propsTableContents);
+        });
+    }
+
+    componentDidMount() {
+        console.log('mount');
+        // setTimeout(() => {
+        this.getStylesImages();
+        // }, 1000);
+    }
+
+    componentWillUnmount() {
+        console.log('unmount');
+    }
+
+    onStyle(value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+    
+        propsTableContents.put_StylesType(value);
+        api.asc_SetTableOfContentsPr(propsTableContents);
+    }
+
+    render () {
+        return (
+            <StylesImages 
+                onStyle={this.onStyle} 
+                getStylesImages={this.getStylesImages}
+            />
+        )
+    }
+}
+
+export default StylesImagesController;

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

@@ -22,6 +22,7 @@ import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} fro
 import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
 import {PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
 import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
+import StylesImagesController from '../../controller/edit/StylesImages';
 
 const routes = [
     //Edit text
@@ -189,9 +190,13 @@ const routes = [
 
     // Table Contents 
 
+    // {
+    //     path: '/edit-style-table-contents/',
+    //     component: PageEditStylesTableContents
+    // },
     {
         path: '/edit-style-table-contents/',
-        component: PageEditStylesTableContents
+        component: StylesImagesController
     },
     {
         path: '/edit-leader-table-contents/',

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

@@ -10,6 +10,7 @@ const EditTableContents = props => {
     const api = Common.EditorApi.get();
     const propsTableContents = api.asc_GetTableOfContentsPr();
     const stylesCount = propsTableContents.get_StylesCount();
+    console.log(propsTableContents);
     const [type, setType] = useState(0);
     const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
     const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers());
@@ -73,7 +74,8 @@ const EditTableContents = props => {
                     onStyle: props.onStyle, 
                     arrStyles,
                     setStyleValue,
-                    styleValue
+                    styleValue,
+                    getStylesImages: props.getStylesImages
                 }}></ListItem>
             </List>
             <List>
@@ -120,7 +122,19 @@ const EditTableContents = props => {
 const PageEditStylesTableContents = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
+    const arrValuesStyles = [Asc.c_oAscTOCStylesType.Current, Asc.c_oAscTOCStylesType.Simple, Asc.c_oAscTOCStylesType.Web, Asc.c_oAscTOCStylesType.Standard, Asc.c_oAscTOCStylesType.Modern, Asc.c_oAscTOCStylesType.Classic];
     const [styleValue, setStyleValue] = useState(props.styleValue);
+    // const arrStylesImages = [$$('#image-style0')[0], $$('#image-style1')[0], $$('#image-style2')[0], $$('#image-style3')[0], $$('#image-style4')[0], $$('#image-style5')[0]];
+    // console.log('render');
+
+    useEffect(() => {
+        setTimeout(() => {
+            console.log('ready');
+            arrValuesStyles.forEach((value, index) => {
+                props.getStylesImages(`image-style${index}`, value);
+            });
+        }, 1000);
+    }, []);
 
     return (
         <Page>
@@ -136,16 +150,21 @@ const PageEditStylesTableContents = props => {
             <List>
                 {props.arrStyles.map((style, index) => {
                     return (
-                        <ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {
+                        <Fragment key={index}>
-                            setStyleValue(style.value); 
+                            <BlockTitle>{style.displayValue}</BlockTitle>
-                            props.setStyleValue(style.value);
+                            <div id={`image-style${index}`}></div>
-                            props.onStyle(style.value)
+                        </Fragment>
-                        }}></ListItem>
                     )
                 })}
             </List>
         </Page>
     )
+
+       {/* <ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {
+                            setStyleValue(style.value); 
+                            props.setStyleValue(style.value);
+                            props.onStyle(style.value)
+                        }}></ListItem> */}
 }
 
 const PageEditLeaderTableContents = props => {

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

@@ -0,0 +1,62 @@
+import React, {Fragment, useEffect, useState } from 'react';
+import {observer, inject} from "mobx-react";
+import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+const StylesImages = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const api = Common.EditorApi.get();
+    const propsTableContents = api.asc_GetTableOfContentsPr();
+    const [type, setType] = useState(0);
+    const arrStyles = (type === 1) ? [
+        { displayValue: t('Edit.textCurrent'),     value: Asc.c_oAscTOFStylesType.Current },
+        { displayValue: t('Edit.textSimple'),     value: Asc.c_oAscTOFStylesType.Simple },
+        { displayValue: t('Edit.textOnline'),     value: Asc.c_oAscTOFStylesType.Web },
+        { displayValue: t('Edit.textClassic'),     value: Asc.c_oAscTOFStylesType.Classic },
+        { displayValue: t('Edit.textDistinctive'),     value: Asc.c_oAscTOFStylesType.Distinctive },
+        { displayValue: t('Edit.textCentered'),     value: Asc.c_oAscTOFStylesType.Centered },
+        { displayValue: t('Edit.textFormal'),     value: Asc.c_oAscTOFStylesType.Formal }
+    ] : [
+        { displayValue: t('Edit.textCurrent'),     value: Asc.c_oAscTOCStylesType.Current },
+        { displayValue: t('Edit.textSimple'),     value: Asc.c_oAscTOCStylesType.Simple },
+        { displayValue: t('Edit.textOnline'),     value: Asc.c_oAscTOCStylesType.Web },
+        { displayValue: t('Edit.textStandard'),     value: Asc.c_oAscTOCStylesType.Standard },
+        { displayValue: t('Edit.textModern'),     value: Asc.c_oAscTOCStylesType.Modern },
+        { displayValue: t('Edit.textClassic'),     value: Asc.c_oAscTOCStylesType.Classic }
+    ];
+    const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
+
+    return (
+        <Page>
+            <Navbar title={_t.textStyle} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            {/* <List> */}
+                {arrStyles.map((style, index) => {
+                    return (
+                        <div key={index}>
+                            <BlockTitle>{style.displayValue}</BlockTitle>
+                            <div id={`image-style${index}`}></div>
+                        </div>
+                    )
+                })}
+            {/* </List> */}
+        </Page>
+    )
+
+       {/* <ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {
+                            setStyleValue(style.value); 
+                            props.setStyleValue(style.value);
+                            props.onStyle(style.value)
+                        }}></ListItem> */}
+}
+
+export default StylesImages;