From 366f1db1de82b0241bb7f3356e5c6f01ad575cad Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 4 Feb 2021 15:29:33 +0300
Subject: [PATCH] [SSE mobile] Added the ability to insert shape

---
 .../mobile/src/controller/add/AddShape.jsx    | 35 +++++++++++++++++++
 .../mobile/src/view/add/Add.jsx               | 16 +++++----
 .../mobile/src/view/add/AddShape.jsx          | 27 ++++++++++++++
 3 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx
 create mode 100644 apps/spreadsheeteditor/mobile/src/view/add/AddShape.jsx

diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx
new file mode 100644
index 000000000..0c7209c53
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx
@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import AddShape from '../../view/add/AddShape';
+
+class AddShapeController extends Component {
+    constructor (props) {
+        super(props);
+        this.onShapeClick = this.onShapeClick.bind(this);
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    onShapeClick (type) {
+        const api = Common.EditorApi.get();
+        api.asc_addShapeOnSheet(type);
+        this.closeModal();
+    }
+
+    render () {
+        return (
+            <AddShape onShapeClick={this.onShapeClick}
+            />
+        )
+    }
+}
+
+export default AddShapeController;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
index 27046c42e..b7d538e29 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
@@ -8,7 +8,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 import AddChartController from "../../controller/add/AddChart";
 import {AddFunctionController} from "../../controller/add/AddFunction";
 import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
-//import AddShapeController from "../../controller/add/AddShape";
+import AddShapeController from "../../controller/add/AddShape";
 //import {AddOtherController} from "../../controller/add/AddOther";
 
 const routes = [
@@ -75,13 +75,15 @@ const AddTabs = props => {
             component: <AddFunctionController onOptionClick={props.onOptionClick}/>
         });
     }
+    if (!showPanels || showPanels.indexOf('shape') > 0) {
+        tabs.push({
+            caption: _t.textShape,
+            id: 'add-shape',
+            icon: 'icon-add-shape',
+            component: <AddShapeController/>
+        });
+    }
     /*tabs.push({
-        caption: _t.textShape,
-        id: 'add-shape',
-        icon: 'icon-add-shape',
-        component: <AddShapeController />
-    });
-    tabs.push({
         caption: _t.textOther,
         id: 'add-other',
         icon: 'icon-add-other',
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddShape.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddShape.jsx
new file mode 100644
index 000000000..7b10af93d
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddShape.jsx
@@ -0,0 +1,27 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+
+const AddShape = props => {
+    const shapes = props.storeShapeSettings.getStyleGroups();
+    return (
+        <div className={'dataview shapes'}>
+            {shapes.map((row, indexRow) => {
+                return (
+                    <ul className="row" key={'shape-row-' + indexRow}>
+                        {row.map((shape, index) => {
+                            return (
+                                <li key={'shape-' + indexRow + '-' + index} onClick={() => {props.onShapeClick(shape.type)}}>
+                                    <div className="thumb"
+                                         style={{WebkitMaskImage: `url('resources/img/shapes/${shape.thumb}')`}}>
+                                    </div>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                )
+            })}
+        </div>
+    )
+};
+
+export default inject("storeShapeSettings")(observer(AddShape));
\ No newline at end of file