pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-04-07 14:06:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove swipe functionality and add down string

Browse Source
This commit is contained in:
Polina
2026-01-28 17:32:44 +03:00
parent 4b814607ae
commit 2eca603225
1 changed files with 16 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
apps/documenteditor/mobile/src/view/settings/Navigation.jsx
View File

@ -1,9 +1,12 @@
import React, { useState, useEffect, useContext, Fragment } from "react"; import React, { useState, useEffect, useContext, Fragment } from "react";
import { Device } from '../../../../../common/mobile/utils/device'; import { Device } from '../../../../../common/mobile/utils/device';
import {f7, List, ListItem, Page, Navbar, Sheet, NavTitle} from 'framework7-react'; import {f7, List, ListItem, Page, Navbar, Sheet, NavRight, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { MainContext } from "../../page/main"; import { MainContext } from "../../page/main";
import SvgIcon from '@common/lib/component/SvgIcon';
import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg?ios';
import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
const NavigationPopover = inject('storeNavigation')(observer(props => { const NavigationPopover = inject('storeNavigation')(observer(props => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -86,66 +89,25 @@ const NavigationList = inject('storeNavigation')(observer(props => {
const NavigationSheet = inject('storeNavigation')(observer(props => { const NavigationSheet = inject('storeNavigation')(observer(props => {
const mainContext = useContext(MainContext); const mainContext = useContext(MainContext);
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true});
const [stateHeight, setHeight] = useState('45%');
const [stateOpacity, setOpacity] = useState(1);
const [stateStartY, setStartY] = useState();
const [isNeedClose, setNeedClose] = useState(false);
const handleBack = () => {
f7.sheet.close('#view-navigation-sheet');
};
const handleTouchStart = (event) => {
const touchObj = event.changedTouches[0];
setStartY(parseInt(touchObj.clientY));
};
const handleTouchMove = (event) => {
const touchObj = event.changedTouches[0];
const dist = parseInt(touchObj.clientY) - stateStartY;
if (dist < 0) {
setHeight('90%');
setOpacity(1);
setNeedClose(false);
} else if (dist < 80) {
setHeight('45%');
setOpacity(1);
setNeedClose(false);
} else {
setNeedClose(true);
setOpacity(0.6);
}
};
const handleTouchEnd = (event) => {
const touchObj = event.changedTouches[0];
const swipeEnd = parseInt(touchObj.clientY);
const dist = swipeEnd - stateStartY;
if (isNeedClose) {
f7.sheet.close('#view-navigation-sheet');
} else if (stateHeight === '90%' && dist > 20) {
setHeight('45%');
}
};
useEffect(() => { useEffect(() => {
f7.sheet.open('#view-navigation-sheet', true); f7.sheet.open('#view-navigation-sheet', true);
}, []); }, []);
return ( return (
<Sheet id="view-navigation-sheet" className="navigation-sheet" backdrop={true} closeByBackdropClick={true} onSheetClosed={() => {mainContext.closeOptions('navigation')}} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}> <Sheet id="view-navigation-sheet" className="navigation-sheet" backdrop={true} closeByBackdropClick={true} onSheetClosed={() => {mainContext.closeOptions('navigation')}} style={{height: '45%', opacity: '1'}}>
<Page> <Page>
<Navbar backLink={_t.textBack} onBackClick={handleBack}> <Navbar title={t('Settings.textNavigation')}>
<NavTitle> {Device.phone &&
<div id='swipe-handler' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} > <NavRight>
{t('Settings.textNavigation')} <Link sheetClose="#view-navigation-sheet">
</div> {Device.ios ?
</NavTitle> <SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
<SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
}
</Link>
</NavRight>
}
</Navbar> </Navbar>
<NavigationList <NavigationList
onSelectItem={props.onSelectItem} onSelectItem={props.onSelectItem}