Merge pull request #1343 from ONLYOFFICE/feature/dropdown-list

[DE mobile] Added dropdown list and combobox

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

@@ -0,0 +1,98 @@
+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', obj => {
+            this.initDropdownList(obj);
+        });
+    }
+
+    initDropdownList(obj) {
+        let type = obj.type;
+
+        this.propsObj = obj.pr;
+        this.specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.propsObj.get_ComboBoxPr() : this.propsObj.get_DropDownListPr();
+        this.isForm = !!this.propsObj.get_FormPr();
+        this.listItems = [];
+
+        this.initListItems();
+
+        this.setState({
+            isOpen: true
+        });
+    }
+
+    initListItems() {
+        const { t } = this.props;
+        const count = this.specProps.get_ItemsCount();
+
+        if(this.isForm) {
+            let text = this.propsObj.get_PlaceholderText();
+
+            this.listItems.push({
+                caption: text.trim() !== '' ? text : t('Edit.textEmpty'),
+                value: ''
+            });
+        }
+
+        for (let i = 0; i < count; i++) {
+            if(this.specProps.get_ItemValue(i) || !this.isForm) {
+                this.listItems.push({
+                    caption: this.specProps.get_ItemDisplayText(i), 
+                    value: this.specProps.get_ItemValue(i)
+                });
+            }
+        }
+
+        if (!this.isForm && this.listItems.length < 1) {
+            this.listItems.push({
+                caption: t('Edit.textEmpty'),
+                value: -1
+            });
+        }
+    }
+
+    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();
+        // const internalId = this.propsObj.get_InternalId;
+
+        if(value !== -1) {
+            this.closeModal();
+            api.asc_SelectContentControlListItem(value);
+        }
+    }
+
+    render() {
+        return (
+            this.state.isOpen &&
+                <DropdownList 
+                    listItems={this.listItems}
+                    onChangeItemList={this.onChangeItemList}
+                    closeModal={this.closeModal}
+                /> 
+        );
+    }
+}
+
+export default withTranslation()(DropdownListController);

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

@@ -17,6 +17,8 @@ import ErrorController from "./Error";
 import LongActionsController from "./LongActions";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
 import EncodingController from "./Encoding";
+import DropdownListController from "./DropdownList";
+import { Device } from '../../../../common/mobile/utils/device';
 @inject(
     "users",
     "storeAppOptions",
@@ -38,6 +40,7 @@ class MainController extends Component {
 
         this.LoadingDocument = -256;
         this.ApplyEditRights = -255;
+        this.boxSdk = $$('#editor_sdk');
 
         this._state = {
             licenseType: false,
@@ -548,6 +551,29 @@ class MainController extends Component {
             storeDocumentSettings.changeDocSize(w, h);
         });
 
+        this.api.asc_registerCallback('asc_onShowContentControlsActions', (obj, x, y) => {
+            switch (obj.type) {
+                // case Asc.c_oAscContentControlSpecificType.DateTime:
+                //     this.onShowDateActions(obj, x, y);
+                //     break;
+                case Asc.c_oAscContentControlSpecificType.Picture:
+                    if (obj.pr && obj.pr.get_Lock) {
+                        let lock = obj.pr.get_Lock();
+                        if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock == Asc.c_oAscSdtLockType.ContentLocked)
+                            return;
+                    }
+                    this.api.asc_addImage(obj);
+                    setTimeout(() => {
+                        this.api.asc_UncheckContentControlButtons();
+                    }, 500);
+                    break;
+                case Asc.c_oAscContentControlSpecificType.DropDownList:
+                case Asc.c_oAscContentControlSpecificType.ComboBox:
+                    this.onShowListActions(obj, x, y);
+                    break;
+            }
+        });
+
         //text settings
         const storeTextSettings = this.props.storeTextSettings;
         storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts'));
@@ -655,6 +681,21 @@ class MainController extends Component {
         });
     }
 
+    onShowListActions(obj, x, y) {
+        if(!Device.isPhone) {
+            this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target');
+        
+            if (this.dropdownListTarget.length < 1) {
+                this.dropdownListTarget = $$('<div id="dropdown-list-target" style="position: absolute;"></div>');
+                this.boxSdk.append(this.dropdownListTarget);
+            }
+        
+            this.dropdownListTarget.css({left: `${x}px`, top: `${y}px`});
+        }
+
+        Common.Notifications.trigger('openDropdownList', obj);
+    }
+
     onProcessSaveResult (data) {
         this.api.asc_OnSaveEnd(data.result);
 
@@ -858,6 +899,7 @@ class MainController extends Component {
                 <ViewCommentsController />
                 <PluginsController />
                 <EncodingController />
+                <DropdownListController />
             </Fragment>
             )
     }

apps/documenteditor/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} swipeToStep={true} 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;