[DE mobile] Correct calendar and added dropdown list

apps/documenteditor/mobile/locale/en.json

@@ -307,7 +307,26 @@
     "textTopAndBottom": "Top and Bottom",
     "textTotalRow": "Total Row",
     "textType": "Type",
-    "textWrap": "Wrap"
+    "textWrap": "Wrap",
+    "textSu": "Su",
+    "textMo": "Mo",
+    "textTu": "Tu",
+    "textWe": "We",
+    "textTh": "Th",
+    "textFr": "Fr",
+    "textSa": "Sa",
+    "textJanuary": "January",
+    "textFebruary": "February",
+    "textMarch": "March",
+    "textApril": "April",
+    "textMay": "May",
+    "textJune": "June",
+    "textJuly": "July",
+    "textAugust": "August",
+    "textSeptember": "September",
+    "textOctober": "October",
+    "textNovember": "November",
+    "textDecember": "December"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",

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

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import { Device } from '../../../../common/mobile/utils/device';
+import { f7 } from "framework7-react";
+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, x, y) => {
+            this.initDropdownList(obj, x, y);
+        });
+    }
+
+    initDropdownList(obj, x, y) {
+        let type = obj.type;
+
+        this.left = x;
+        this.top = y;
+        this.props = obj.pr;
+        this.specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? this.props.get_ComboBoxPr() : this.props.get_DropDownListPr();
+        this.isForm = !!this.props.get_FormPr();
+        this.listItems = [];
+
+        this.initListItems();
+
+        this.setState({
+            isOpen: true
+        });
+    }
+
+    initListItems() {
+        let count = this.specProps.get_ItemsCount();
+
+        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)
+                });
+            }
+        }
+    }
+
+    closeModal() {
+        if(Device.isPhone) {
+            f7.popup.close('#dropdown-list-popup', true);
+        } else {
+            f7.popover.close('#dropdown-list-popover', true);
+        }
+
+        this.setState({isOpen: false});
+    }
+
+    onChangeItemList(value) {
+        const api = Common.EditorApi.get();
+        // const internalId = this.props.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 DropdownListController;

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

@@ -17,6 +17,7 @@ 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",
@@ -538,11 +539,7 @@ class MainController extends Component {
             storeDocumentSettings.changeDocSize(w, h);
         });
 
-        const storeAppOptions = this.props.storeAppOptions;
-
-        // if (storeAppOptions.isEdit) {
         this.api.asc_registerCallback('asc_onShowContentControlsActions', (obj, x, y) => {
-            console.log(obj, x, y);
             switch (obj.type) {
                 case Asc.c_oAscContentControlSpecificType.DateTime:
                     this.onShowDateActions(obj, x, y);
@@ -567,19 +564,8 @@ class MainController extends Component {
 
         this.api.asc_registerCallback('asc_onHideContentControlsActions', () => {
             console.log(true);
-            // console.log(this.cmpCalendar);
-            // if (this.cmpCalendar) {
-            //     console.log(1);
-            //     // this.controlsContainer.remove();
-            //     $$('#calendar-target-element').remove();
-            //     this.cmpCalendar.destroy();
-            //     console.log(this.cmpCalendar);
-            // }
         });
 
-        // this.api.asc_SetHighlightRequiredFields(true);
-        // }
-
         // text settings
         const storeTextSettings = this.props.storeTextSettings;
         storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts'));
@@ -693,6 +679,7 @@ class MainController extends Component {
     }
 
     onShowDateActions(obj, x, y) {
+        const { t } = this.props;
         let props = obj.pr,
             specProps = props.get_DateTimePr(),
             isPhone = Device.isPhone;
@@ -702,123 +689,49 @@ class MainController extends Component {
 
         if (this.controlsContainer.length < 1) {
             this.controlsContainer = $$('<div id="calendar-target-element" style="position: absolute;"></div>');
-            this.controlsContainer.css({left: `${x}px`, top: `${y}px`});
             this.boxSdk.append(this.controlsContainer);
         }
-       
+
+        this.controlsContainer.css({left: `${x}px`, top: `${y}px`});
+
         this.cmpCalendar = f7.calendar.create({
             inputEl: '#calendar-target-element',
-            firstDay: 0,
+            dayNamesShort: [t('Edit.textSu'), t('Edit.textMo'), t('Edit.textTu'), t('Edit.textWe'), t('Edit.textTh'), t('Edit.textFr'), t('Edit.textSa')],
-            // backdrop: false,
+            monthNames: [t('Edit.textJanuary'), t('Edit.textFebruary'), t('Edit.textMarch'), t('Edit.textApril'), t('Edit.textMay'), t('Edit.textJune'), t('Edit.textJuly'), t('Edit.textAugust'), t('Edit.textSeptember'), t('Edit.textOctober'), t('Edit.textNovember'), t('Edit.textDecember')],
-            // closeByBackdropClick: false,
+            backdrop: isPhone ? false : true,
-            // closeByOutsideClick: true,
+            closeByBackdropClick: isPhone ? false : true,
             value: [new Date(specProps ? specProps.get_FullDate() : undefined)],
-            openIn: 'sheet',
+            openIn: isPhone ? 'sheet' : 'popover',
-            footer: true,
             on: {
                 change: (calendar, value) => {
                     if(calendar.initialized && value[0]) {
                         let specProps = this._dateObj.get_DateTimePr();
-                        console.log(value[0]);
                         specProps.put_FullDate(new Date(value[0]));
                         this.api.asc_SetContentControlDatePickerDate(specProps);
+                        calendar.close();
                         this.api.asc_UncheckContentControlButtons();
                     }
                 }
             }
         });
 
-        this.cmpCalendar.open();
+        setTimeout(() => {
+            this.cmpCalendar.open();
+        }, 100)
     }
     
         
     onShowListActions(obj, x, y) {
-        let type = obj.type,
+        this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target');
-            props = obj.pr,
+       
-            specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr(),
+        if (this.dropdownListTarget.length < 1) {
-            isForm = !!props.get_FormPr(),
+            this.dropdownListTarget = $$('<div id="dropdown-list-target" style="position: absolute;"></div>');
-            menu = this.listControlMenu,
+            this.boxSdk.append(this.dropdownListTarget);
-            menuContainer = menu ? this.boxSdk.find(Common.Utils.String.format('#menu-container-{0}', menu.id)) : null;
-
-        this._listObj = props;
-
-        this._fromShowContentControls = true;
-
-        if (!menu) {
-            this.listControlMenu = menu = new Common.UI.Menu({
-                maxHeight: 207,
-                menuAlign: 'tr-bl',
-                items: []
-            });
-
-            menu.on('item:click', (menu, item) => {
-                setTimeout(() => {
-                    (item.value !== -1) && this.api.asc_SelectContentControlListItem(item.value, this._listObj.get_InternalId());
-                }, 1);
-            });
-
-            // Prepare menu container
-
-            if (!menuContainer || menuContainer.length < 1) {
-                menuContainer = $$(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id));
-                this.boxSdk.append(menuContainer);
-            }
-
-            menu.render(menuContainer);
-            menu.cmpEl.attr({tabindex: "-1"});
-
-            menu.on('hide:after', () => {
-                this.listControlMenu.removeAll();
-                if (!this._fromShowContentControls)
-                    this.api.asc_UncheckContentControlButtons();
-            });
-        }
-        if (specProps) {
-            if (isForm) { // for dropdown and combobox form control always add placeholder item
-                let text = props.get_PlaceholderText();
-
-                menu.addItem(new Common.UI.MenuItem({
-                    caption: (text.trim()!=='') ? text : this.txtEmpty,
-                    value: '',
-                    template: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="<% if (options.value=="") { %> opacity: 0.6 <% } %>">',
-                        '<%= caption %>',
-                        '</a>'
-                    ].join(''))
-                }));
-            }
-
-            let count = specProps.get_ItemsCount();
-
-            for (let i=0; i < count; i++) {
-                (specProps.get_ItemValue(i)!=='' || !isForm) && menu.addItem(new Common.UI.MenuItem({
-                    caption: specProps.get_ItemDisplayText(i),
-                    value: specProps.get_ItemValue(i),
-                    template: _.template([
-                        '<a id="<%= id %>" style="<%= style %>" tabindex="-1" type="menuitem">',
-                        '<%= Common.Utils.String.htmlEncode(caption) %>',
-                        '</a>'
-                    ].join(''))
-                }));
-            }
-
-            if (!isForm && menu.items.length < 1) {
-                menu.addItem(new Common.UI.MenuItem({
-                    caption: this.txtEmpty,
-                    value: -1
-                }));
-            }
         }
 
-        menuContainer.css({left: x, top : y});
+        this.dropdownListTarget.css({left: `${x}px`, top: `${y}px`});
-        menuContainer.attr('data-value', 'prevent-canvas-click');
-        this._preventClick = true;
-        menu.show();
 
-        // _.delay(function() {
+        Common.Notifications.trigger('openDropdownList', obj, x, y);
-        //     menu.cmpEl.focus();
-        // }, 10);
-        this._fromShowContentControls = false;
     }
 
     onProcessSaveResult (data) {
@@ -1024,6 +937,7 @@ class MainController extends Component {
                 <ViewCommentsController />
                 <PluginsController />
                 <EncodingController />
+                <DropdownListController />
             </Fragment>
             )
     }

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

@@ -0,0 +1,73 @@
+import React, {Component, useEffect, useState} from 'react';
+import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup, View, Link, Actions, ActionsGroup } from "framework7-react";
+import { useTranslation } from "react-i18next";
+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 ? 
+                <Popup id="dropdown-list-popup" style={{height: '410px'}}> 
+                    <PageDropdownList
+                        listItems={this.props.listItems}
+                        onChangeItemList={this.props.onChangeItemList}
+                        closeModal={this.props.closeModal}
+                        style={{height: '100%'}}
+                    />
+                </Popup>
+            : 
+                <Popover id="dropdown-list-popover" closeByOutsideClick={false} closeByBackdropClick={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.popup.open('#dropdown-list-popup', 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;