[SSE mobile] Fix Bug 58279
This commit is contained in:
SergeyEzhin
parent
e0e426d40e
commit
cc74ab53e1
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import CellEditorView from '../view/CellEditor';
|
||||
import { f7 } from 'framework7-react';
|
||||
|
|
@ -39,7 +38,7 @@ const CellEditor = inject("storeFunctions")(observer(props => {
|
|||
setFunctionshDisabled(is_image || is_mode_2 || coauth_disable);
|
||||
}
|
||||
|
||||
const onFormulaCompleteMenu = funcArr => {
|
||||
const onFormulaCompleteMenu = async funcArr => {
|
||||
const api = Common.EditorApi.get();
|
||||
const storeFunctions = props.storeFunctions;
|
||||
const functions = storeFunctions.functions;
|
||||
|
|
@ -94,21 +93,14 @@ const CellEditor = inject("storeFunctions")(observer(props => {
|
|||
return {name, type, descr, caption, args};
|
||||
});
|
||||
|
||||
setFuncArr(funcArr);
|
||||
setHintArr(hintArr);
|
||||
await setFuncArr(funcArr);
|
||||
await setHintArr(hintArr);
|
||||
|
||||
f7.popover.open('#idx-functions-list', '#idx-list-target');
|
||||
|
||||
const listTarget = document.querySelector('#idx-list-target');
|
||||
const rect = listTarget.getBoundingClientRect();
|
||||
const popoverList = document.querySelector('#idx-functions-list');
|
||||
|
||||
popoverList.style.top = `${rect.bottom}px`;
|
||||
popoverList.style.left = `${rect.left}px`;
|
||||
await f7.popover.open('#idx-functions-list', '#idx-list-target');
|
||||
} else {
|
||||
f7.popover.close('#idx-functions-list');
|
||||
setFuncArr('');
|
||||
setHintArr('');
|
||||
await f7.popover.close('#idx-functions-list');
|
||||
await setFuncArr('');
|
||||
await setHintArr('');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,78 +14,6 @@ const contentStyle = {
|
|||
flexGrow: 1
|
||||
};
|
||||
|
||||
const FunctionInfo = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const functionObj = props.functionObj;
|
||||
const functionInfo = props.functionInfo;
|
||||
|
||||
useEffect(() => {
|
||||
const functionsList = document.querySelector('#functions-list');
|
||||
const height = functionsList.offsetHeight + 'px';
|
||||
|
||||
functionsList.closest('.view').style.height = '200px';
|
||||
|
||||
return () => {
|
||||
functionsList.closest('.view').style.height = height;
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Page className='page-function-info'>
|
||||
<Navbar title={functionInfo.caption} backLink={_t.textBack} backLinkUrl='/functions-list/'>
|
||||
<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 ? `${functionInfo.caption} ${functionInfo.args}` : functionInfo.name}</h3>
|
||||
<p>{functionInfo.descr}</p>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionsList = props => {
|
||||
const isPhone = Device.isPhone;
|
||||
const functions = props.functions;
|
||||
const funcArr = props.funcArr;
|
||||
const hintArr = props.hintArr;
|
||||
|
||||
useEffect(() => {
|
||||
const functionsList = document.querySelector('#functions-list');
|
||||
const height = functionsList.offsetHeight + 'px';
|
||||
|
||||
functionsList.closest('.view').style.height = height;
|
||||
}, [funcArr]);
|
||||
|
||||
return (
|
||||
<div id="functions-list" className={isPhone ? 'functions-list functions-list__mobile' : 'functions-list'}>
|
||||
<List>
|
||||
{funcArr && funcArr.length && funcArr.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
|
||||
{(functions[elem.name] || hintArr[index]?.descr) &&
|
||||
<div slot='after'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
let functionInfo = functions[elem.name] || hintArr[index];
|
||||
|
||||
if(functionInfo) {
|
||||
f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
|
||||
}
|
||||
}}>
|
||||
<Icon icon='icon-info'/>
|
||||
</div>
|
||||
}
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const CellEditorView = props => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const isPhone = Device.isPhone;
|
||||
|
|
@ -132,9 +60,9 @@ const CellEditorView = props => {
|
|||
<View style={{height: '200px'}} routes={routes}>
|
||||
<Page pageContent={false}>
|
||||
<Navbar className="navbar-hidden" />
|
||||
<FunctionsList
|
||||
<FunctionsList
|
||||
functions={functions}
|
||||
funcArr={funcArr}
|
||||
funcArr={funcArr}
|
||||
hintArr={hintArr}
|
||||
insertFormula={props.insertFormula}
|
||||
/>
|
||||
|
|
@ -147,6 +75,80 @@ const CellEditorView = props => {
|
|||
);
|
||||
};
|
||||
|
||||
const FunctionsList = props => {
|
||||
const isPhone = Device.isPhone;
|
||||
const functions = props.functions;
|
||||
const funcArr = props.funcArr;
|
||||
const hintArr = props.hintArr;
|
||||
const functionsList = document.querySelector('#functions-list');
|
||||
|
||||
useEffect(() => {
|
||||
if(functionsList) {
|
||||
const height = functionsList.offsetHeight + 'px';
|
||||
functionsList.closest('.view').style.height = height;
|
||||
}
|
||||
}, [funcArr]);
|
||||
|
||||
return (
|
||||
<div id="functions-list" className={isPhone ? 'functions-list functions-list__mobile' : 'functions-list'}>
|
||||
<List>
|
||||
{funcArr && funcArr.length && funcArr.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
|
||||
{(functions[elem.name] || hintArr[index]?.descr) &&
|
||||
<div slot='after'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
let functionInfo = functions[elem.name] || hintArr[index];
|
||||
|
||||
if(functionInfo) {
|
||||
f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
|
||||
}
|
||||
}}>
|
||||
<Icon icon='icon-info'/>
|
||||
</div>
|
||||
}
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionInfo = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const functionObj = props.functionObj;
|
||||
const functionInfo = props.functionInfo;
|
||||
const functionsList = document.querySelector('#functions-list');
|
||||
|
||||
useEffect(() => {
|
||||
if(functionsList) {
|
||||
const height = functionsList.offsetHeight + 'px';
|
||||
functionsList.closest('.view').style.height = '200px';
|
||||
|
||||
return () => {
|
||||
functionsList.closest('.view').style.height = height;
|
||||
}
|
||||
}
|
||||
}, [functionsList]);
|
||||
|
||||
return (
|
||||
<Page className='page-function-info'>
|
||||
<Navbar title={functionInfo.caption} backLink={_t.textBack} backLinkUrl='/functions-list/'>
|
||||
<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 ? `${functionInfo.caption} ${functionInfo.args}` : functionInfo.name}</h3>
|
||||
<p>{functionInfo.descr}</p>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/function-info/',
|
||||
|
|
|
|||
Loading…
Reference in a new issue