diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 3490e5eea..87898d22f 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/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.
Only text values from the column can be selected for replacement.", + "textOk": "Ok" } }, "Error": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/DropdownList.jsx b/apps/spreadsheeteditor/mobile/src/controller/DropdownList.jsx new file mode 100644 index 000000000..13aa8701e --- /dev/null +++ b/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 && + + ); + } +} + +export default withTranslation()(DropdownListController); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 2cbfa430b..ac1ec88fa 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/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 = $$(''); + 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 { + ) } diff --git a/apps/spreadsheeteditor/mobile/src/view/DropdownList.jsx b/apps/spreadsheeteditor/mobile/src/view/DropdownList.jsx new file mode 100644 index 000000000..17ea0cb0b --- /dev/null +++ b/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 ( + + + + {listItems.length && listItems.map((elem, index) => ( + props.onChangeItemList(elem.value)}> + ))} + + + + ); +}; + +class DropdownListView extends Component { + constructor(props) { + super(props); + } + + render() { + return ( + Device.isPhone ? + + + + : + + + + + ); + } +} + + +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 ( + + ); +}; + +export default DropdownList; \ No newline at end of file