[SSE mobile] Add dropdown list

apps/spreadsheeteditor/mobile/locale/en.json

@@ -154,7 +154,9 @@
       "warnLicenseUsersExceeded": "You've reached the user limit for %1 editors. Contact your administrator to learn more.",
       "warnNoLicense": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only. Contact %1 sales team for personal upgrade terms.",
       "warnNoLicenseUsers": "You've reached the user limit for %1 editors. Contact %1 sales team for personal upgrade terms.",
-      "warnProcessRightsChange": "You don't have permission to edit the file."
+      "warnProcessRightsChange": "You don't have permission to edit the file.",
+      "textNoChoices": "There are no choices for filling the cell.<br>Only text values from the column can be selected for replacement.",
+      "textOk": "Ok"
     }
   },
   "Error": {

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

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import { Device } from '../../../../common/mobile/utils/device';
+import { f7 } from "framework7-react";
+import { withTranslation } from "react-i18next";
+import DropdownList from "../view/DropdownList";
+
+class DropdownListController extends Component {
+    constructor(props) {
+        super(props);
+        this.onChangeItemList = this.onChangeItemList.bind(this);
+        
+        this.state = {
+            isOpen: false
+        };
+
+        Common.Notifications.on('openDropdownList', addArr => {
+            this.initDropdownList(addArr);
+        });
+    }
+
+    initDropdownList(addArr) {
+        this.listItems = addArr.map(item => {
+            return {
+                caption: item.getTextValue(), 
+                value: item
+            };
+        });
+
+        this.setState({
+            isOpen: true
+        });
+    }
+
+    closeModal() {
+        if(Device.isPhone) {
+            f7.sheet.close('#dropdown-list-sheet', true);
+        } else {
+            f7.popover.close('#dropdown-list-popover', true);
+        }
+
+        this.setState({isOpen: false});
+    }
+
+    onChangeItemList(value) {
+        const api = Common.EditorApi.get();
+
+        this.closeModal();
+        api.asc_insertInCell(value, Asc.c_oAscPopUpSelectorType.None, false);
+    }
+
+    render() {
+        return (
+            this.state.isOpen &&
+                <DropdownList 
+                    listItems={this.listItems}
+                    onChangeItemList={this.onChangeItemList}
+                    closeModal={this.closeModal}
+                /> 
+        );
+    }
+}
+
+export default withTranslation()(DropdownListController);

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

@@ -19,8 +19,10 @@ import app from "../page/app";
 import About from "../../../../common/mobile/lib/view/About";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
 import EncodingController from "./Encoding";
+import DropdownListController from "./DropdownList";
 import { StatusbarController } from "./Statusbar";
 import { useTranslation } from 'react-i18next';
+import { Device } from '../../../../common/mobile/utils/device';
 
 @inject(
     "users",
@@ -40,6 +42,7 @@ class MainController extends Component {
         super(props);
         window.editorType = 'sse';
 
+        this.boxSdk = $$('#editor_sdk');
         this.LoadingDocument = -256;
         this.ApplyEditRights = -255;
         this.InitApplication = -254;
@@ -414,7 +417,43 @@ class MainController extends Component {
         });
 
         this.api.asc_registerCallback('asc_onChangeProtectWorksheet', this.onChangeProtectSheet.bind(this));
-        this.api.asc_registerCallback('asc_onActiveSheetChanged', this.onChangeProtectSheet.bind(this));   
+        this.api.asc_registerCallback('asc_onActiveSheetChanged', this.onChangeProtectSheet.bind(this)); 
+        
+        this.api.asc_registerCallback('asc_onEntriesListMenu', this.onEntriesListMenu.bind(this, false));
+        this.api.asc_registerCallback('asc_onValidationListMenu', this.onEntriesListMenu.bind(this, true));
+    }
+
+    onEntriesListMenu(validation, textArr, addArr) {
+        const { t } = this.props;
+    
+        if (textArr && textArr.length) { 
+            if(!Device.isPhone) {
+                this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target');
+            
+                if (!this.dropdownListTarget.length) {
+                    this.dropdownListTarget = $$('<div id="dropdown-list-target" style="position: absolute;"></div>');
+                    this.boxSdk.append(this.dropdownListTarget);
+                }
+
+                let coord  = this.api.asc_getActiveCellCoord(),
+                    offset = {left: 0, top: 0},
+                    showPoint = [coord.asc_getX() + offset.left, (coord.asc_getY() < 0 ? 0 : coord.asc_getY()) + coord.asc_getHeight() + offset.top];
+            
+                this.dropdownListTarget.css({left: `${showPoint[0]}px`, top: `${showPoint[1]}px`});
+            }
+
+            Common.Notifications.trigger('openDropdownList', addArr);
+        } else {
+            !validation && f7.dialog.create({
+                title: t('Controller.Main.notcriticalErrorTitle'),
+                text: t('Controller.Main.textNoChoices'),
+                buttons: [
+                    {
+                        text: t('Controller.Main.textOk')
+                    }
+                ]
+            });
+        }
     }
 
     onChangeProtectSheet() {
@@ -902,6 +941,7 @@ class MainController extends Component {
                 <ViewCommentsSheetsController />
                 <PluginsController />
                 <EncodingController />
+                <DropdownListController />
             </Fragment>
         )
     }

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

@@ -0,0 +1,71 @@
+import React, {Component, useEffect, useState} from 'react';
+import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup, View, Link, Sheet } from "framework7-react";
+import { Device } from '../../../../common/mobile/utils/device';
+
+const PageDropdownList = props => {
+    const listItems = props.listItems;
+
+    return (
+        <View style={props.style}>
+            <Page>
+                <List>
+                    {listItems.length && listItems.map((elem, index) => (
+                        <ListItem key={index} className='no-indicator' title={elem.caption} onClick={() => props.onChangeItemList(elem.value)}></ListItem>
+                    ))} 
+                </List>
+            </Page>
+        </View>
+    );
+};
+
+class DropdownListView extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            Device.isPhone ? 
+                <Sheet id="dropdown-list-sheet" closeByOutsideClick={true} backdrop={false} closeByBackdropClick={false} swipeToClose={true}> 
+                    <PageDropdownList
+                        listItems={this.props.listItems}
+                        onChangeItemList={this.props.onChangeItemList}
+                        closeModal={this.props.closeModal}
+                    />
+                </Sheet>
+            : 
+                <Popover id="dropdown-list-popover" className="popover__titled" closeByOutsideClick={false}>
+                    <PageDropdownList
+                        listItems={this.props.listItems}
+                        onChangeItemList={this.props.onChangeItemList}
+                        closeModal={this.props.closeModal}
+                        style={{height: '410px'}}
+                    />
+                </Popover>
+            
+        );
+    }
+}
+
+
+const DropdownList = props => {
+    useEffect(() => {
+        if(Device.isPhone) {
+            f7.sheet.open('#dropdown-list-sheet', true);
+        } else {
+            f7.popover.open('#dropdown-list-popover', '#dropdown-list-target');
+        }
+    
+        return () => {}
+    });
+
+    return (
+        <DropdownListView 
+            listItems={props.listItems}
+            onChangeItemList={props.onChangeItemList}
+            closeModal={props.closeModal}
+        />
+    );
+};
+
+export default DropdownList;