[SSE mobile] Bug 50044

apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react';
+import {f7, List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@@ -130,33 +130,42 @@ const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeChartSettings = props.storeChartSettings;
-    const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties();
+    const storeFocusObjects = props.storeFocusObjects;
-    const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties();
+    const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
+    const shapeProperties = storeFocusObjects.shapeObject && storeFocusObjects.shapeObject.get_ShapeProperties();
 
     const styles = storeChartSettings.styles;
     const types = storeChartSettings.types;
-    const curType = chartProperties.getType();
+    const curType = chartProperties && chartProperties.getType();
 
     // Init border size
 
+    let borderSize, borderType;
+    if (shapeProperties) {
         const shapeStroke = shapeProperties.get_stroke();
+        borderSize = shapeStroke.get_width() * 72.0 / 25.4;
+        borderType = shapeStroke.get_type();
+    }
     const borderSizeTransform = storeChartSettings.borderSizeTransform();
-    const borderSize = shapeStroke.get_width() * 72.0 / 25.4;
+    const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
-    const borderType = shapeStroke.get_type();
+    const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize);
-    const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
-    const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
     const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
     const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
 
     // Init border color
 
-    if(!storeChartSettings.borderColor) {
+    if(!storeChartSettings.borderColor && shapeProperties) {
         storeChartSettings.initBorderColor(shapeProperties);
     }
 
     const borderColor = storeChartSettings.borderColor;
     const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`;
 
+    if ((!chartProperties || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
@@ -242,7 +251,10 @@ const PageStyle = props => {
 const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-
+    if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
@@ -269,16 +281,27 @@ const PageLayout = props => {
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
     const chartObject = storeFocusObjects.chartObject;
-    const chartProperties = chartObject.get_ChartProperties();
+    const chartProperties = chartObject && chartObject.get_ChartProperties();
-    const chartType = chartProperties.getType();
+    const chartType = chartProperties && chartProperties.getType();
 
-    const [chartTitle, setTitle] = useState(chartProperties.getTitle());
+    let title, legend, axisHorTitle, axisVertTitle, horGridlines, vertGridlines, dataLabel;
-    const [chartLegend, setLegend] = useState(chartProperties.getLegendPos());
+    if (chartProperties) {
-    const [chartAxisHorTitle, setAxisHorTitle] = useState(chartProperties.getHorAxisLabel());
+        title = chartProperties.getTitle();
-    const [chartAxisVertTitle, setAxisVertTitle] = useState(chartProperties.getVertAxisLabel());
+        legend = chartProperties.getLegendPos();
-    const [chartHorGridlines, setHorGridlines] = useState(chartProperties.getHorGridLines());
+        axisHorTitle = chartProperties.getHorAxisLabel();
-    const [chartVertGridlines, setVertGridlines] = useState(chartProperties.getVertGridLines());
+        axisVertTitle = chartProperties.getVertAxisLabel();
-    const [chartDataLabel, setDataLabel] = useState(chartProperties.getDataLabelsPos());
+        horGridlines = chartProperties.getHorGridLines();
+        vertGridlines = chartProperties.getVertGridLines();
+        dataLabel = chartProperties.getDataLabelsPos();
+    }
+
+    const [chartTitle, setTitle] = useState(title);
+    const [chartLegend, setLegend] = useState(legend);
+    const [chartAxisHorTitle, setAxisHorTitle] = useState(axisHorTitle);
+    const [chartAxisVertTitle, setAxisVertTitle] = useState(axisVertTitle);
+    const [chartHorGridlines, setHorGridlines] = useState(horGridlines);
+    const [chartVertGridlines, setVertGridlines] = useState(vertGridlines);
+    const [chartDataLabel, setDataLabel] = useState(dataLabel);
 
     let dataLabelPos = [
         { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone },
@@ -369,6 +392,11 @@ const PageLayout = props => {
         7: `${_t.textOuterTop}`
     };
 
+    if ((!chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textLayout} backLink={_t.textBack} />
@@ -620,7 +648,7 @@ const PageVerticalAxis = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const api = Common.EditorApi.get();
-    const chartProperty = api.asc_getChartObject();
+    const chartProperty = api.asc_getChartObject(true);
     const isIos = Device.ios;
     const verAxisProps = chartProperty.getVertAxisProps();
     const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps();
@@ -684,6 +712,11 @@ const PageVerticalAxis = props => {
     const currentCrossesValue = axisProps.getCrosses();
     const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
 
+    if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
@@ -917,7 +950,7 @@ const PageHorizontalAxis = props => {
     const _t = t('View.Edit', {returnObjects: true});
     const api = Common.EditorApi.get();
     const isIos = Device.ios;
-    const chartProperty = api.asc_getChartObject();
+    const chartProperty = api.asc_getChartObject(true);
     const horAxisProps = chartProperty.getHorAxisProps();
     const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps;
     const crossValue = axisProps.getCrossesRule();
@@ -970,6 +1003,11 @@ const PageHorizontalAxis = props => {
     const currentCrossesValue = axisProps.getCrosses();
     const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
 
+    if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
@@ -1181,8 +1219,8 @@ const EditChart = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
-    const chartProperties = storeFocusObjects.chartObject.get_ChartProperties();
+    const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
-    const chartType = chartProperties.getType();
+    const chartType = chartProperties && chartProperties.getType();
 
     const disableSetting = (
         chartType == Asc.c_oAscChartTypeSettings.pie ||
@@ -1244,6 +1282,7 @@ const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(
 const PageChartLayout = inject("storeFocusObjects")(observer(PageLayout));
 const PageChartVerticalAxis = inject("storeFocusObjects")(observer(PageVerticalAxis));
 const PageChartHorizontalAxis = inject("storeFocusObjects")(observer(PageHorizontalAxis));
+const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
 
 export {
     PageEditChart as EditChart,
@@ -1251,7 +1290,7 @@ export {
     PageChartCustomFillColor,
     PageChartBorderColor,
     PageChartCustomBorderColor,
-    PageReorder as PageChartReorder,
+    PageChartReorder,
     PageChartLayout,
     PageLegend,
     PageChartTitle,

apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx

@@ -32,6 +32,12 @@ const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
@@ -58,6 +64,12 @@ const PageReplace = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page className="images">
             <Navbar title={_t.textReplace} backLink={_t.textBack} />

apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx

@@ -9,10 +9,8 @@ const EditShape = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
-    // const selections = storeFocusObjects.selections;
-    // console.log(selections);
     const shapeObject = storeFocusObjects.shapeObject;
-    const canFill = shapeObject.get_ShapeProperties().asc_getCanFill();
+    const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill();
 
     return (
         <Fragment>
@@ -84,7 +82,8 @@ const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeShapeSettings = props.storeShapeSettings;
-    const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties();
+    const storeFocusObjects = props.storeFocusObjects;
+    const shapeObject = storeFocusObjects.shapeObject.get_ShapeProperties();
     const stroke = shapeObject.get_stroke();
     
     // Init border size
@@ -108,6 +107,11 @@ const PageStyle = props => {
     const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100;
     const [stateOpacity, setOpacity] = useState(Math.round(opacity));
 
+    if ((!shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+   
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
@@ -248,6 +252,12 @@ const PageReplace = props => {
     let shapes = storeShapeSettings.getStyleGroups();
     shapes.splice(0, 1); // Remove line shapes
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page className="shapes dataview">
             <Navbar title={_t.textReplace} backLink={_t.textBack} />
@@ -274,6 +284,12 @@ const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />