diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 1a609b498..7746f5945 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -948,6 +948,9 @@ input[type="number"]::-webkit-inner-spin-button { .popover__functions { box-shadow: 0px 10px 100px rgba(0, 0, 0, 0.3); + .view { + transition: .2s height; + } } .target-function-list { diff --git a/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx b/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx index 66b83692e..3b7b4de63 100644 --- a/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx @@ -1,5 +1,5 @@ -import React, { Fragment, useState } from 'react'; +import React, { Fragment, useState, useEffect } from 'react'; import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7, Page, Navbar, NavRight } from 'framework7-react'; import {observer, inject} from "mobx-react"; import { __interactionsRef } from 'scheduler/tracing'; @@ -20,9 +20,20 @@ const FunctionInfo = props => { 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 ( - + props.insertFormula(functionObj.name, functionObj.type)}> @@ -41,10 +52,17 @@ const FunctionsList = props => { 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 ( -
+
- {funcArr.map((elem, index) => { + {funcArr && funcArr.length && funcArr.map((elem, index) => { return ( props.insertFormula(elem.name, elem.type)}> {(functions[elem.name] || hintArr[index]?.descr) && @@ -133,6 +151,10 @@ const routes = [ { path: '/function-info/', component: FunctionInfo + }, + { + path: '/functions-list/', + component: FunctionsList } ];