IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Components: Added change DropDownItem height for touch devices for DropDown and DropDownItem components

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-18 14:05:13 +03:00
parent 73fe4b1082
commit b34fc62c69
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/ASC.Web.Components/src/components/drop-down-item/index.js
View File

@ -2,6 +2,7 @@ import React from 'react'
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
import { Icons } from '../icons'
import { tablet } from '../../utils/device'
const itemTruncate = css`
white-space: nowrap;
@ -83,6 +84,10 @@ const StyledDropdownItem = styled.div`
text-transform: uppercase;
`
}
@media ${ tablet } {
line-height: 40px;
}
${props => props.disabled && disabledAndHeaderStyle }
`;

8
web/ASC.Web.Components/src/components/drop-down/index.js
View File

@ -113,13 +113,15 @@ class DropDown extends React.PureComponent {
render() {
const { maxHeight, withArrow, withBackdrop, children, open } = this.props;
const { directionX, directionY } = this.state;
const fullHeight = children && children.length * 36;
const isTablet = window.innerWidth <= 1024; //TODO: Make some better
const itemHeight = isTablet ? 40 : 36;
const fullHeight = children && children.length * itemHeight;
const calculatedHeight = ((fullHeight > 0) && (fullHeight < maxHeight)) ? fullHeight : maxHeight;
const dropDownMaxHeightProp = maxHeight ? { height: calculatedHeight + 'px' } : {};
//console.log("DropDown render");
return (
<>
{(withBackdrop && open) && <Backdrop visible zIndex={149} onClick={this.toggleDropDown} />}
{(withBackdrop && open && isTablet) && <Backdrop visible zIndex={149} onClick={this.toggleDropDown} />}
<StyledDropdown
ref={this.dropDownRef}
{...this.props}
@ -133,7 +135,7 @@ class DropDown extends React.PureComponent {
? <FixedSizeList
height={calculatedHeight}
width={this.state.width}
itemSize={36}
itemSize={itemHeight}
itemCount={children.length}
itemData={children}
outerElementType={CustomScrollbarsVirtualList}