diff --git a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx index 8069098d0..2b075ff27 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx +++ b/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} /> ) } diff --git a/apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx b/apps/documenteditor/mobile/src/controller/edit/StylesImages.jsx new file mode 100644 index 000000000..a70f1f45e --- /dev/null +++ b/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 ( + + ) + } +} + +export default StylesImagesController; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 0a06b8f18..0179d5b7e 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/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/', diff --git a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx index 1bd1900cd..c13b6490c 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx +++ b/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 }}> @@ -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 ( @@ -136,16 +150,21 @@ const PageEditStylesTableContents = props => { {props.arrStyles.map((style, index) => { return ( - { - setStyleValue(style.value); - props.setStyleValue(style.value); - props.onStyle(style.value) - }}> + + {style.displayValue} +
+
) })}
) + + {/* { + setStyleValue(style.value); + props.setStyleValue(style.value); + props.onStyle(style.value) + }}> */} } const PageEditLeaderTableContents = props => { diff --git a/apps/documenteditor/mobile/src/view/edit/StylesImages.jsx b/apps/documenteditor/mobile/src/view/edit/StylesImages.jsx new file mode 100644 index 000000000..f79ccf5cf --- /dev/null +++ b/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 ( + + + {Device.phone && + + + + + + } + + {/* */} + {arrStyles.map((style, index) => { + return ( +
+ {style.displayValue} +
+
+ ) + })} + {/*
*/} +
+ ) + + {/* { + setStyleValue(style.value); + props.setStyleValue(style.value); + props.onStyle(style.value) + }}> */} +} + +export default StylesImages; \ No newline at end of file