Web: Components: Changed DropDown dynamic container from FixedSizeList to VariableSizeList.
This commit is contained in:
parent
7dd736eb19
commit
d986751205
@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
|
|||||||
import CustomScrollbarsVirtualList from '../scrollbar/custom-scrollbars-virtual-list'
|
import CustomScrollbarsVirtualList from '../scrollbar/custom-scrollbars-virtual-list'
|
||||||
import DropDownItem from '../drop-down-item'
|
import DropDownItem from '../drop-down-item'
|
||||||
import Backdrop from '../backdrop'
|
import Backdrop from '../backdrop'
|
||||||
import { FixedSizeList } from "react-window"
|
import { VariableSizeList } from "react-window"
|
||||||
import onClickOutside from "react-onclickoutside";
|
import onClickOutside from "react-onclickoutside";
|
||||||
|
|
||||||
const StyledDropdown = styled.div`
|
const StyledDropdown = styled.div`
|
||||||
@ -43,12 +43,14 @@ const StyledDropdown = styled.div`
|
|||||||
// eslint-disable-next-line react/display-name, react/prop-types
|
// eslint-disable-next-line react/display-name, react/prop-types
|
||||||
const Row = memo(({ data, index, style }) => {
|
const Row = memo(({ data, index, style }) => {
|
||||||
const option = data[index];
|
const option = data[index];
|
||||||
|
const separator = option.props.isSeparator ? { width: `calc(100% - 32px)`, height: `1px` } : {}
|
||||||
|
const newStyle = {...style, ...separator};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropDownItem
|
<DropDownItem
|
||||||
// eslint-disable-next-line react/prop-types
|
// eslint-disable-next-line react/prop-types
|
||||||
{...option.props}
|
{...option.props}
|
||||||
style={style} />
|
style={newStyle} />
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -115,12 +117,21 @@ class DropDown extends React.PureComponent {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getItemHeight = (item) => {
|
||||||
|
const isTablet = window.innerWidth < 1024; //TODO: Make some better
|
||||||
|
|
||||||
|
if (item && item.props.isSeparator)
|
||||||
|
return isTablet ? 16 : 12;
|
||||||
|
|
||||||
|
return isTablet ? 36 : 32;
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { maxHeight, children } = this.props;
|
const { maxHeight, children } = this.props;
|
||||||
const { directionX, directionY, width } = this.state;
|
const { directionX, directionY, width } = this.state;
|
||||||
const isTablet = window.innerWidth < 1024; //TODO: Make some better
|
const rowHeights = React.Children.map(children, child => this.getItemHeight(child));
|
||||||
const itemHeight = isTablet ? 36 : 32;
|
const getItemSize = index => rowHeights[index];
|
||||||
const fullHeight = children && children.length * itemHeight;
|
const fullHeight = children && rowHeights.reduce((a, b) => a + b, 0);
|
||||||
const calculatedHeight = ((fullHeight > 0) && (fullHeight < maxHeight)) ? fullHeight : maxHeight;
|
const calculatedHeight = ((fullHeight > 0) && (fullHeight < maxHeight)) ? fullHeight : maxHeight;
|
||||||
const dropDownMaxHeightProp = maxHeight ? { height: calculatedHeight + 'px' } : {};
|
const dropDownMaxHeightProp = maxHeight ? { height: calculatedHeight + 'px' } : {};
|
||||||
//console.log("DropDown render", this.props);
|
//console.log("DropDown render", this.props);
|
||||||
@ -133,16 +144,16 @@ class DropDown extends React.PureComponent {
|
|||||||
{...dropDownMaxHeightProp}
|
{...dropDownMaxHeightProp}
|
||||||
>
|
>
|
||||||
{maxHeight
|
{maxHeight
|
||||||
? <FixedSizeList
|
? <VariableSizeList
|
||||||
height={calculatedHeight}
|
height={calculatedHeight}
|
||||||
width={width}
|
width={width}
|
||||||
itemSize={itemHeight}
|
itemSize={getItemSize}
|
||||||
itemCount={children.length}
|
itemCount={children.length}
|
||||||
itemData={children}
|
itemData={children}
|
||||||
outerElementType={CustomScrollbarsVirtualList}
|
outerElementType={CustomScrollbarsVirtualList}
|
||||||
>
|
>
|
||||||
{Row}
|
{Row}
|
||||||
</FixedSizeList>
|
</VariableSizeList>
|
||||||
: children}
|
: children}
|
||||||
</StyledDropdown>
|
</StyledDropdown>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user