Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Add function info for tablet

Browse source
This commit is contained in:
SergeyEzhin 2021-09-07 15:22:37 +03:00
parent f1421ac2ed
commit ccec4e0933
1 changed files with 73 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx
View file

@ -1,10 +1,10 @@
import React, { Fragment, useState } from 'react'; import React, { Fragment, useState } from 'react';
import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7 } from 'framework7-react'; import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7, Page, Navbar, NavRight } from 'framework7-react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
// import {PageFunctionInfo} from "./add/AddFunction";
import { __interactionsRef } from 'scheduler/tracing'; import { __interactionsRef } from 'scheduler/tracing';
import { Device } from '../../../../common/mobile/utils/device'; import { Device } from '../../../../common/mobile/utils/device';
import { useTranslation } from 'react-i18next';
const viewStyle = { const viewStyle = {
height: 30 height: 30
@ -14,45 +14,78 @@ const contentStyle = {
flexGrow: 1 flexGrow: 1
}; };
const FunctionInfo = props => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const functionObj = props.functionObj;
const functionInfo = props.functionInfo;
return (
<Page className='page-function-info'>
<Navbar title={functionInfo.caption} backLink={_t.textBack}>
<NavRight>
<Link text={t('View.Add.textInsert')} onClick={() => props.insertFormula(functionObj.name, functionObj.type)}></Link>
</NavRight>
</Navbar>
<div className='function-info'>
<h3>{`${functionInfo.caption} ${functionInfo.args}`}</h3>
<p>{functionInfo.descr}</p>
</div>
</Page>
)
}
const FunctionsList = props => { const FunctionsList = props => {
const { t } = useTranslation();
const isPhone = Device.isPhone; const isPhone = Device.isPhone;
const functions = props.functions; const functions = props.functions;
const funcArr = props.funcArr; const funcArr = props.funcArr;
return ( return (
<div className="functions-list" style={{width: isPhone ? '100%' : '360px'}}> <Page>
<List> <View routes={routes}>
{funcArr.map((elem, index) => { <div className="functions-list" style={{width: isPhone ? '100%' : '360px'}}>
return ( <List>
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}> {funcArr.map((elem, index) => {
<div slot='after' return (
onClick={(e) => { <ListItem key={index} title={elem.name} href="#" routeProps={{functionInfo: functions[elem.name], functionObj: elem}} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
e.stopPropagation(); <div slot='after'
let functionInfo = functions[elem.name]; onClick={(e) => {
e.stopPropagation();
if(functionInfo) { let functionInfo = functions[elem.name];
if(isPhone) {
f7.dialog.create({ if(functionInfo) {
title: functionInfo.caption, if(isPhone) {
content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3> f7.dialog.create({
<p>${functionInfo.descr}</p>`, title: functionInfo.caption,
buttons: [{text: 'Ok'}] content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3><p>${functionInfo.descr}</p>`,
}).open(); buttons: [
} else { {text: t('View.Add.textCancel')},
console.log('other'); {
} text: t('View.Add.textInsert'),
} onClick: () => props.insertFormula(elem.name, elem.type)
}}> }
<Icon icon='icon-info'/> ]
</div> }).open();
</ListItem> } else {
) f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
})} }
</List> }
</div> }}>
<Icon icon='icon-info'/>
</div>
</ListItem>
)
})}
</List>
</div>
</View>
</Page>
) )
} }
const CellEditorView = props => { const CellEditorView = props => {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const isPhone = Device.isPhone; const isPhone = Device.isPhone;
@ -97,6 +130,7 @@ const CellEditorView = props => {
closeByBackdropClick={false} closeByBackdropClick={false}
backdrop={false} backdrop={false}
closeByOutsideClick={true} closeByOutsideClick={true}
style={{height: '175px'}}
> >
{funcArr && funcArr.length ? {funcArr && funcArr.length ?
<FunctionsList <FunctionsList
@ -110,5 +144,12 @@ const CellEditorView = props => {
); );
}; };
const routes = [
{
path: '/function-info/',
component: FunctionInfo
}
];
export default inject("storeAppOptions", "storeFunctions")(observer(CellEditorView)); export default inject("storeAppOptions", "storeFunctions")(observer(CellEditorView));