From 74835308dea3c78cad8ce65f7d5ee1eb0c6b4319 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 26 Jan 2021 14:49:24 +0300
Subject: [PATCH] [PE mobile] Added the ability to inser shapes

---
 .../mobile/src/controller/add/AddShape.jsx    | 20 ++++++++++++++--
 .../mobile/src/view/add/AddShape.jsx          | 23 +++++++++++++++----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/apps/presentationeditor/mobile/src/controller/add/AddShape.jsx b/apps/presentationeditor/mobile/src/controller/add/AddShape.jsx
index bf649dc1d..74d3cdd5d 100644
--- a/apps/presentationeditor/mobile/src/controller/add/AddShape.jsx
+++ b/apps/presentationeditor/mobile/src/controller/add/AddShape.jsx
@@ -3,15 +3,31 @@ import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {observer, inject} from "mobx-react";
 
-import { AddShape } from '../../view/add/AddShape';
+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.AddShapeOnCurrentPage(type);
+        this.closeModal();
+    }
+
     render () {
         return (
-            <AddShape
+            <AddShape onShapeClick={this.onShapeClick}
             />
         )
     }
diff --git a/apps/presentationeditor/mobile/src/view/add/AddShape.jsx b/apps/presentationeditor/mobile/src/view/add/AddShape.jsx
index bf408d896..e5910762b 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddShape.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddShape.jsx
@@ -5,11 +5,26 @@ import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
 const AddShape = props => {
+    const shapes = props.storeShapeSettings.getStyleGroups();
     return (
-        <Fragment>
-
-        </Fragment>
+        <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 {AddShape};
\ No newline at end of file
+export default inject("storeShapeSettings")(observer(AddShape));
\ No newline at end of file