Merge pull request #1252 from ONLYOFFICE/feature/fix-bug-reactjs

Feature/fix bug reactjs

apps/common/mobile/resources/less/common-material.less

@@ -74,7 +74,7 @@
                 margin-top: 8px;
             }
             .add-image, .inputs-list {
-                ul:after, :before{
+                ul:after {
                     display: none;
                 }
             }
@@ -427,9 +427,11 @@
     .searchbar .input-clear-button {
         width: 18px;
         height: 18px;
+        margin-top: -8px;
         &:after {
             color: @white;
             font-size: 19px;
+            line-height: 19px;
         }
     }
 

apps/common/mobile/resources/less/common.less

@@ -908,6 +908,14 @@ input[type="number"]::-webkit-inner-spin-button {
     }
 }
 
+#idx-celleditor.expanded {
+    .functions-list {
+        &__mobile {
+            top: 70px;
+        }
+    }
+}
+
 .popover__functions {
     box-shadow: 0px 10px 100px rgba(0, 0, 0, 0.3);
 }

apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {observer, inject} from "mobx-react";
 import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, ListButton} from 'framework7-react';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@@ -208,21 +208,25 @@ const PageTransition = props => {
     const storeFocusObjects = props.storeFocusObjects;
     const transitionObj = storeFocusObjects.slideObject.get_transition();
 
-    const [_effect, setEffect] = useState(transitionObj.get_TransitionType());
-    const valueEffectTypes = fillEffectTypes(_effect);
-    const [type, setType] = useState(valueEffectTypes);
-
     let _effectDelay = transitionObj.get_SlideAdvanceDuration();
 
     const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
     const isDelay = transitionObj.get_SlideAdvanceAfter();
     const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
+
+    const _effect = transitionObj.get_TransitionType();
     const nameEffect = getEffectName(_effect);
+    if(_effect != Asc.c_oAscSlideTransitionTypes.None) fillEffectTypes(_effect);
 
     const _effectType = transitionObj.get_TransitionOption();
     const nameEffectType = getEffectTypeName(_effectType);
+
     const _effectDuration = transitionObj.get_TransitionDuration();
 
+    useEffect(() => {
+        changeRange((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
+    }, [_effectDelay])
+
     return (
         <Page className="slide-transition">
             <Navbar title={t('View.Edit.textTransitions')} backLink={_t.textBack}>
@@ -240,8 +244,6 @@ const PageTransition = props => {
                     onEffectClick: props.onEffectClick,
                     fillEffectTypes,
                     _effect,
-                    setEffect,
-                    setType
                 }}></ListItem>
                 <ListItem link="/type/" title={_t.textType} 
                     after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''} 
@@ -249,8 +251,7 @@ const PageTransition = props => {
                         _arrCurrentEffectTypes, 
                         onEffectTypeClick: props.onEffectTypeClick,
                         _effect,
-                        type,
+                        _effectType,
-                        setType
                     }}>
                 </ListItem>
                 <ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
@@ -312,8 +313,7 @@ const PageTransition = props => {
 const PageEffect = props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
-    const _effect = props._effect;
+    const [currentEffect, setEffect] = useState(props._effect);
-    const [currentEffect, setEffect] = useState(_effect);
     const _arrEffect = props._arrEffect;
 
     return (
@@ -334,9 +334,7 @@ const PageEffect = props => {
                             <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
                                 checked={elem.value === currentEffect} onChange={() => {
                                     setEffect(elem.value);
-                                    props.setEffect(elem.value);
                                     let valueEffectTypes = props.fillEffectTypes(elem.value);
-                                    props.setType(valueEffectTypes);
                                     props.onEffectClick(elem.value, valueEffectTypes);
                                 }}></ListItem>
                         )
@@ -351,9 +349,7 @@ const PageType= props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
     const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
-    const _effect = props._effect;
+    const [currentType, setType] = useState(props._effectType);
-    const type = props.type;
-    const [currentType, setType] = useState(type);
 
     return (
         <Page className="style-type">
@@ -373,8 +369,7 @@ const PageType= props => {
                             <ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
                                 checked={elem.value === currentType} onChange={() => {
                                     setType(elem.value);
-                                    props.setType(elem.value);
+                                    props.onEffectTypeClick(elem.value, props._effect);
-                                    props.onEffectTypeClick(elem.value, _effect);
                                 }}>
                             </ListItem>
                         )

apps/spreadsheeteditor/mobile/locale/en.json

@@ -41,6 +41,7 @@
   },
   "ContextMenu": {
     "errorCopyCutPaste": "Copy, cut, and paste actions using the context menu will be performed within the current file only.",
+    "errorInvalidLink": "The link reference does not exist. Please correct the link or delete it.",
     "menuAddComment": "Add Comment",
     "menuAddLink": "Add Link",
     "menuCancel": "Cancel",

apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx

@@ -28,6 +28,7 @@ class ContextMenu extends ContextMenuController {
         this.onApiShowComment = this.onApiShowComment.bind(this);
         this.onApiHideComment = this.onApiHideComment.bind(this);
         this.getUserName = this.getUserName.bind(this);
+        this.onApiHyperlinkClick = this.onApiHyperlinkClick.bind(this);
     }
 
     static closeContextMenu() {
@@ -45,6 +46,7 @@ class ContextMenu extends ContextMenuController {
         const api = Common.EditorApi.get();
         api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+        api.asc_unregisterCallback('asc_onHyperlinkClick', this.onApiHyperlinkClick);
     }
 
 
@@ -60,6 +62,20 @@ class ContextMenu extends ContextMenuController {
     //     super.onMenuClosed();
     // }
 
+    onApiHyperlinkClick(url) {
+        const { t } = this.props;
+
+        if(!url) {
+            f7.dialog.create({
+                title: t('ContextMenu.notcriticalErrorTitle'),
+                text: t('ContextMenu.errorInvalidLink'),
+                buttons:[
+                    {text: 'OK'}
+                ] 
+            }).open();
+        }
+    }
+
     onMenuItemClick(action) {
         const { t } = this.props;
         const _t = t("ContextMenu", { returnObjects: true });
@@ -177,6 +193,7 @@ class ContextMenu extends ContextMenuController {
         const api = Common.EditorApi.get();
         api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
         api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
+        api.asc_registerCallback('asc_onHyperlinkClick', this.onApiHyperlinkClick);
     }
 
     initMenuItems() {

apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx

@@ -107,7 +107,7 @@ const EditLink = props => {
     };
 
     const valueRange = linkInfo.asc_getRange();
-    const [range, setRange] = useState(valueRange || '');
+    const [range, setRange] = useState(valueRange || 'A1');
 
     return (
         <Fragment>
@@ -138,7 +138,7 @@ const EditLink = props => {
                                placeholder={_t.textRequired}
                                value={range}
                                onChange={(event) => {setRange(event.target.value)}}
-                               className={isIos ? 'list-input-right' : ''}
+                               className={[isIos ? 'list-input-right' : '', curSheet === '' && 'disabled'].join(' ')}
                     />
                 }
                 <ListInput label={_t.textDisplay}