From 95c56cde77ea103daf82a477be1375641dca25bc Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 24 Sep 2021 02:27:43 +0300 Subject: [PATCH] [DE mobile] Correct calendar and added dropdown list --- apps/documenteditor/mobile/locale/en.json | 21 ++- .../mobile/src/controller/DropdownList.jsx | 82 +++++++++++ .../mobile/src/controller/Main.jsx | 130 +++--------------- .../mobile/src/view/DropdownList.jsx | 73 ++++++++++ 4 files changed, 197 insertions(+), 109 deletions(-) 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/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 21a4728b3..30b7efda7 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/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.", diff --git a/apps/documenteditor/mobile/src/controller/DropdownList.jsx b/apps/documenteditor/mobile/src/controller/DropdownList.jsx new file mode 100644 index 000000000..4bc961b9c --- /dev/null +++ b/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 && + + ); + } +} + +export default 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 316ae4dd3..e3cb559b3 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/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 = $$('
'); - 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, - // backdrop: false, - // closeByBackdropClick: false, - // closeByOutsideClick: true, + dayNamesShort: [t('Edit.textSu'), t('Edit.textMo'), t('Edit.textTu'), t('Edit.textWe'), t('Edit.textTh'), t('Edit.textFr'), t('Edit.textSa')], + 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')], + backdrop: isPhone ? false : true, + closeByBackdropClick: isPhone ? false : true, value: [new Date(specProps ? specProps.get_FullDate() : undefined)], - openIn: 'sheet', - footer: true, + openIn: isPhone ? 'sheet' : 'popover', 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, - props = obj.pr, - specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr(), - isForm = !!props.get_FormPr(), - menu = this.listControlMenu, - 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('', 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([ - ' opacity: 0.6 <% } %>">', - '<%= caption %>', - '' - ].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([ - '', - '<%= Common.Utils.String.htmlEncode(caption) %>', - '' - ].join('')) - })); - } - - if (!isForm && menu.items.length < 1) { - menu.addItem(new Common.UI.MenuItem({ - caption: this.txtEmpty, - value: -1 - })); - } + this.dropdownListTarget = this.boxSdk.find('#dropdown-list-target'); + + if (this.dropdownListTarget.length < 1) { + this.dropdownListTarget = $$(''); + this.boxSdk.append(this.dropdownListTarget); } - menuContainer.css({left: x, top : y}); - menuContainer.attr('data-value', 'prevent-canvas-click'); - this._preventClick = true; - menu.show(); + this.dropdownListTarget.css({left: `${x}px`, top: `${y}px`}); - // _.delay(function() { - // menu.cmpEl.focus(); - // }, 10); - this._fromShowContentControls = false; + Common.Notifications.trigger('openDropdownList', obj, x, y); } onProcessSaveResult (data) { @@ -1024,6 +937,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..bd14d5b39 --- /dev/null +++ b/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 ( + + + + {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.popup.open('#dropdown-list-popup', true); + } else { + f7.popover.open('#dropdown-list-popover', '#dropdown-list-target'); + } + + return () => {} + }); + + return ( + + ); +}; + +export default DropdownList; \ No newline at end of file