From 23f93d97b108fe6ae65ac6e572c987fd7500d43b Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 23 Nov 2021 16:29:43 +0400 Subject: [PATCH] [DE mobile] Added dropdown list and combobox --- .../mobile/src/controller/DropdownList.jsx | 98 +++++++++++++++++++ .../mobile/src/controller/Main.jsx | 42 ++++++++ .../mobile/src/view/DropdownList.jsx | 71 ++++++++++++++ 3 files changed, 211 insertions(+) create mode 100644 apps/documenteditor/mobile/src/controller/DropdownList.jsx create mode 100644 apps/documenteditor/mobile/src/view/DropdownList.jsx diff --git a/apps/documenteditor/mobile/src/controller/DropdownList.jsx b/apps/documenteditor/mobile/src/controller/DropdownList.jsx new file mode 100644 index 000000000..4d3913dd3 --- /dev/null +++ b/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 && + + ); + } +} + +export default withTranslation()(DropdownListController); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index f151d2599..eeb873483 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/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 = $$(''); + 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 { + ) } diff --git a/apps/documenteditor/mobile/src/view/DropdownList.jsx b/apps/documenteditor/mobile/src/view/DropdownList.jsx new file mode 100644 index 000000000..9f9d978a8 --- /dev/null +++ b/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 ( + + + + {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