2021-10-15 07:07:15 +00:00
|
|
|
import React, { useCallback, useEffect } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import styled, { css } from 'styled-components';
|
|
|
|
|
|
|
|
import { VariableSizeList } from 'react-window';
|
|
|
|
import CustomScrollbarsVirtualList from '@appserver/components/scrollbar/custom-scrollbars-virtual-list';
|
|
|
|
|
|
|
|
import ArrowButton from './arrow-btn';
|
|
|
|
import Text from './text';
|
|
|
|
import ControlButtons from './control-btn';
|
|
|
|
import Item from './item';
|
|
|
|
|
|
|
|
import { isMobile, isMobileOnly } from 'react-device-detect';
|
|
|
|
import {
|
|
|
|
tablet,
|
|
|
|
mobile,
|
|
|
|
isMobile as IsMobileUtils,
|
|
|
|
isTablet as isTabletUtils,
|
|
|
|
} from '@appserver/components/utils/device';
|
|
|
|
|
|
|
|
const StyledBox = styled.div`
|
|
|
|
position: absolute;
|
|
|
|
top: 1px;
|
|
|
|
left: ${isMobile ? '-16px' : '-24px'};
|
|
|
|
${isMobile &&
|
|
|
|
css`
|
|
|
|
width: 100vw !important;
|
2021-11-03 07:49:15 +00:00
|
|
|
max-width: 100vw !important;
|
2021-10-15 07:07:15 +00:00
|
|
|
`}
|
|
|
|
height: fit-content;
|
|
|
|
min-width: 185px;
|
|
|
|
${(props) =>
|
|
|
|
props.changeWidth &&
|
|
|
|
!isMobile &&
|
|
|
|
css`
|
|
|
|
width: ${(props) => `calc(${props.width}px + 24px)`};
|
|
|
|
`}
|
|
|
|
z-index: 399;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
|
|
filter: drop-shadow(0px 12px 40px rgba(4, 15, 27, 0.12));
|
|
|
|
border-radius: 0px 0px 6px 6px;
|
|
|
|
|
|
|
|
@media ${tablet} {
|
|
|
|
left: -16px;
|
|
|
|
width: 100vw;
|
2021-11-03 07:49:15 +00:00
|
|
|
max-width: 100vw !important;
|
2021-10-15 07:07:15 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledContainer = styled.div`
|
2021-10-20 09:06:59 +00:00
|
|
|
margin: 14px 0 7px;
|
2021-10-15 07:07:15 +00:00
|
|
|
position: relative;
|
|
|
|
top: -1px;
|
|
|
|
align-items: center;
|
|
|
|
min-width: 100px;
|
|
|
|
max-width: calc(100vw - 32px);
|
|
|
|
padding: ${isMobile ? '0px 16px' : '0px 24px'};
|
2021-10-15 08:31:21 +00:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: ${(props) =>
|
|
|
|
props.canCreate ? 'auto auto auto auto 1fr' : 'auto auto auto 1fr'};
|
|
|
|
|
2021-10-15 07:07:15 +00:00
|
|
|
@media ${tablet} {
|
2021-10-15 08:31:21 +00:00
|
|
|
top: ${!isMobile && '0px'};
|
2021-10-15 07:07:15 +00:00
|
|
|
padding: 0px 16px;
|
2021-10-20 09:06:59 +00:00
|
|
|
|
2021-10-15 09:35:14 +00:00
|
|
|
grid-template-columns: ${(props) => (props.canCreate ? 'auto 1fr auto' : 'auto 1fr auto')};
|
2021-10-15 07:07:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media ${mobile} {
|
|
|
|
}
|
|
|
|
|
|
|
|
.arrow-button {
|
|
|
|
margin-right: 15px;
|
|
|
|
min-width: 17px;
|
2021-10-20 09:06:59 +00:00
|
|
|
|
2021-10-15 07:07:15 +00:00
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
@media ${tablet} {
|
2021-10-20 09:06:59 +00:00
|
|
|
padding: 0 0 0 8px;
|
2021-10-15 07:07:15 +00:00
|
|
|
margin-left: -8px;
|
|
|
|
margin-right: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.add-button {
|
|
|
|
margin-left: 16px;
|
|
|
|
|
|
|
|
@media ${tablet} {
|
|
|
|
margin-left: auto;
|
|
|
|
|
|
|
|
& > div:first-child {
|
2021-10-20 09:06:59 +00:00
|
|
|
padding: 0px 8px 8px 8px;
|
2021-10-15 07:07:15 +00:00
|
|
|
margin-right: -8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.option-button {
|
|
|
|
@media (min-width: 1024px) {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media ${tablet} {
|
|
|
|
& > div:first-child {
|
2021-10-20 09:06:59 +00:00
|
|
|
padding: 0px 8px 8px 8px;
|
2021-10-15 07:07:15 +00:00
|
|
|
margin-right: -8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Row = React.memo(({ data, index, style }) => {
|
|
|
|
const isRoot = index === data[0].length - 1;
|
|
|
|
return (
|
|
|
|
<Item
|
|
|
|
key={data[0][index].id}
|
|
|
|
id={data[0][index].id}
|
|
|
|
title={data[0][index].title}
|
|
|
|
isRoot={isRoot}
|
|
|
|
onClick={data[1]}
|
2021-10-20 09:06:59 +00:00
|
|
|
style={{ ...style }}
|
2021-10-15 07:07:15 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
const DropBox = React.forwardRef(
|
|
|
|
(
|
|
|
|
{
|
|
|
|
width,
|
|
|
|
changeWidth,
|
|
|
|
isRootFolder,
|
|
|
|
onBackToParentFolder,
|
|
|
|
title,
|
|
|
|
personal,
|
|
|
|
canCreate,
|
|
|
|
navigationItems,
|
|
|
|
getContextOptionsFolder,
|
|
|
|
getContextOptionsPlus,
|
|
|
|
toggleDropBox,
|
|
|
|
onClickAvailable,
|
|
|
|
},
|
|
|
|
ref,
|
|
|
|
) => {
|
2021-10-20 09:06:59 +00:00
|
|
|
const [dropBoxHeight, setDropBoxHeight] = React.useState(0);
|
2021-10-15 07:07:15 +00:00
|
|
|
const countItems = navigationItems.length;
|
|
|
|
|
|
|
|
const getItemSize = (index) => {
|
2021-10-20 09:06:59 +00:00
|
|
|
if (index === countItems - 1) return 51;
|
2021-10-15 07:07:15 +00:00
|
|
|
return isMobile || IsMobileUtils() || isTabletUtils() ? 36 : 30;
|
|
|
|
};
|
|
|
|
|
2021-10-20 09:06:59 +00:00
|
|
|
React.useEffect(() => {
|
2021-10-15 07:07:15 +00:00
|
|
|
const itemsHeight = navigationItems.map((item, index) => getItemSize(index));
|
|
|
|
|
|
|
|
const currentHeight = itemsHeight.reduce((a, b) => a + b);
|
2021-10-20 09:06:59 +00:00
|
|
|
|
|
|
|
setDropBoxHeight(
|
2021-11-03 07:52:10 +00:00
|
|
|
currentHeight > window.innerHeight - 99 ? window.innerHeight - 99 : currentHeight,
|
2021-10-20 09:06:59 +00:00
|
|
|
);
|
|
|
|
});
|
2021-10-15 07:07:15 +00:00
|
|
|
|
|
|
|
return (
|
2021-10-20 09:06:59 +00:00
|
|
|
<StyledBox ref={ref} width={width} changeWidth={changeWidth}>
|
2021-10-15 07:07:15 +00:00
|
|
|
<StyledContainer canCreate={canCreate}>
|
|
|
|
<ArrowButton isRootFolder={isRootFolder} onBackToParentFolder={onBackToParentFolder} />
|
|
|
|
<Text title={title} isOpen={true} onClick={toggleDropBox} />
|
|
|
|
<ControlButtons
|
|
|
|
personal={personal}
|
|
|
|
isRootFolder={isRootFolder}
|
|
|
|
canCreate={canCreate}
|
|
|
|
getContextOptionsFolder={getContextOptionsFolder}
|
|
|
|
getContextOptionsPlus={getContextOptionsPlus}
|
|
|
|
/>
|
|
|
|
</StyledContainer>
|
|
|
|
|
|
|
|
<VariableSizeList
|
2021-10-20 09:06:59 +00:00
|
|
|
height={dropBoxHeight}
|
2021-10-15 07:07:15 +00:00
|
|
|
width={'auto'}
|
|
|
|
itemCount={countItems}
|
|
|
|
itemSize={getItemSize}
|
|
|
|
itemData={[navigationItems, onClickAvailable]}
|
|
|
|
outerElementType={CustomScrollbarsVirtualList}>
|
|
|
|
{Row}
|
|
|
|
</VariableSizeList>
|
|
|
|
</StyledBox>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
DropBox.propTypes = {
|
|
|
|
width: PropTypes.number,
|
|
|
|
changeWidth: PropTypes.bool,
|
|
|
|
isRootFolder: PropTypes.bool,
|
|
|
|
onBackToParentFolder: PropTypes.func,
|
|
|
|
title: PropTypes.string,
|
|
|
|
personal: PropTypes.bool,
|
|
|
|
canCreate: PropTypes.bool,
|
|
|
|
navigationItems: PropTypes.arrayOf(PropTypes.object),
|
|
|
|
getContextOptionsFolder: PropTypes.func,
|
|
|
|
getContextOptionsPlus: PropTypes.func,
|
|
|
|
toggleDropBox: PropTypes.func,
|
|
|
|
onClickAvailable: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default React.memo(DropBox);
|