Merge pull request #1136 from ONLYOFFICE/feature/Bug_52141

[SSE mobile] Added functions list

apps/common/mobile/resources/less/common.less

@@ -871,6 +871,38 @@ input[type="number"]::-webkit-inner-spin-button {
     }
 }
 
+// Functions List 
+
+.cell-editor {
+    overflow: initial;
+}
+
+.functions-list {
+    width: 100%;
+    height: 150px;
+    overflow-y: auto;
+    position: absolute;
+    top: 30px;
+    left: 0;
+    right: 0;
+    background-color: @white;
+    .list {
+        margin: 0;
+        ul:before {
+            display: none;
+        }
+        .item-content {
+            padding-left: 0;
+        }
+        .item-inner {
+            padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
+        }
+        .item-title {
+            font-size: 14px;
+        }
+    }
+}
+
 
 
 

apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx

@@ -1,17 +1,20 @@
 
 import React, { useEffect, useState } from 'react';
 import CellEditorView from '../view/CellEditor';
+import { f7 } from 'framework7-react';
 
 const CellEditor = props => {
     useEffect(() => {
         Common.Notifications.on('engineCreated', api => {
             api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection.bind(this));
             api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged.bind(this));
+            api.asc_registerCallback('asc_onFormulaCompleteMenu', onFormulaCompleteMenu.bind(this));
         });
     }, []);
 
     const [cellName, setCellName] = useState('');
     const [stateCoauth, setCoauthDisabled] = useState(null);
+    const [stateFuncArr, setFuncArr] = useState('');
 
     const onApiCellSelection = info => {
         setCellName(typeof(info)=='string' ? info : info.asc_getName());
@@ -20,10 +23,23 @@ const CellEditor = props => {
     const onApiSelectionChanged = info => {
         setCoauthDisabled(info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true);
     }
+
+    const onFormulaCompleteMenu = funcArr => setFuncArr(funcArr);
+
+    const insertFormula = (name, type) => {
+        const api = Common.EditorApi.get();
+        api.asc_insertInCell(name, type, false);
+    }
     
-    return <CellEditorView cellName={cellName}
-                           stateCoauth = {stateCoauth}
-                           onClickToOpenAddOptions={props.onClickToOpenAddOptions}/>
+    return (
+        <CellEditorView 
+            cellName={cellName}
+            stateCoauth={stateCoauth}
+            onClickToOpenAddOptions={props.onClickToOpenAddOptions} 
+            funcArr={stateFuncArr}
+            insertFormula={insertFormula}
+        />
+    )
 };
 
 export default CellEditor;

apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx

@@ -1,6 +1,6 @@
 
 import React, { useState } from 'react';
-import { Input, View, Button, Link } from 'framework7-react';
+import { Input, View, Button, Link, Popover, ListItem, List } from 'framework7-react';
 import {observer, inject} from "mobx-react";
 
 const viewStyle = {
@@ -15,12 +15,13 @@ const CellEditorView = props => {
     const [expanded, setExpanded] = useState(false);
     const storeAppOptions = props.storeAppOptions;
     const isEdit = storeAppOptions.isEdit;
+    const funcArr = props.funcArr;
 
     const expandClick = e => {
         setExpanded(!expanded);
     };
 
-    return <View id="idx-celleditor" style={viewStyle} className={expanded?'expanded':'collapsed'}>
+    return <View id="idx-celleditor" style={viewStyle} className={expanded ? 'cell-editor expanded' : 'cell-editor collapsed'}>
                 <div id="box-cell-name" className="ce-group">
                     <span id="idx-cell-name">{props.cellName}</span>
                     <a href="#" id="idx-btn-function" className='link icon-only' disabled={(!isEdit && true) || props.stateCoauth} onClick={() => {props.onClickToOpenAddOptions('function', '#idx-btn-function');}}>
@@ -33,6 +34,17 @@ const CellEditorView = props => {
                 <div className="ce-group">
                     <Link icon="caret" onClick={expandClick} />
                 </div>
+                {funcArr && funcArr.length &&
+                    <div id="idx-functions-list" className="functions-list">
+                        <List>
+                            {funcArr.map((elem, index) => {
+                                return (
+                                    <ListItem key={index} title={elem.name} onClick={() => props.insertFormula(elem.name, elem.type)}></ListItem>
+                                )
+                            })}
+                        </List>
+                    </div>
+                }
             </View>;
 };