Web:Common: added navigation components
This commit is contained in:
parent
30526a023d
commit
e144a27c07
155
packages/asc-web-common/components/Navigation/Navigation.js
Normal file
155
packages/asc-web-common/components/Navigation/Navigation.js
Normal file
@ -0,0 +1,155 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Loaders from '@appserver/common/components/Loaders';
|
||||
|
||||
import StyledContainer from './StyledNavigation';
|
||||
import ArrowButton from './sub-components/arrow-btn';
|
||||
import Text from './sub-components/text';
|
||||
import ControlButtons from './sub-components/control-btn';
|
||||
import DropBox from './sub-components/drop-box';
|
||||
|
||||
import { Consumer } from '@appserver/components/utils/context';
|
||||
|
||||
import DomHelpers from '@appserver/components/utils/domHelpers';
|
||||
|
||||
const Navigation = ({
|
||||
tReady,
|
||||
isRootFolder,
|
||||
title,
|
||||
canCreate,
|
||||
isDesktop,
|
||||
isTabletView,
|
||||
personal,
|
||||
onClickFolder,
|
||||
navigationItems,
|
||||
getContextOptionsPlus,
|
||||
getContextOptionsFolder,
|
||||
onBackToParentFolder,
|
||||
...rest
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const [firstClick, setFirstClick] = React.useState(true);
|
||||
const [changeWidth, setChangeWidth] = React.useState(false);
|
||||
const dropBoxRef = React.useRef(null);
|
||||
|
||||
const onMissClick = (e) => {
|
||||
e.preventDefault;
|
||||
const path = e.path || (e.composedPath && e.composedPath());
|
||||
if (!firstClick) {
|
||||
!path.includes(dropBoxRef.current) ? toggleDropBox() : null;
|
||||
} else {
|
||||
setFirstClick((prev) => !prev);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickAvailable = React.useCallback(
|
||||
(id) => {
|
||||
onClickFolder && onClickFolder(id);
|
||||
toggleDropBox();
|
||||
},
|
||||
[onClickFolder, toggleDropBox],
|
||||
);
|
||||
|
||||
const toggleDropBox = React.useCallback(() => {
|
||||
if (isRootFolder) return;
|
||||
setIsOpen((prev) => !prev);
|
||||
setFirstClick(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setChangeWidth(
|
||||
DomHelpers.getOuterWidth(dropBoxRef.current) + 24 ===
|
||||
DomHelpers.getOuterWidth(document.getElementById('section')),
|
||||
);
|
||||
}, 0);
|
||||
}, [setIsOpen, setFirstClick, setChangeWidth, isRootFolder]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
window.addEventListener('click', onMissClick);
|
||||
} else {
|
||||
window.removeEventListener('click', onMissClick);
|
||||
setFirstClick(true);
|
||||
}
|
||||
|
||||
return () => window.removeEventListener('click', onMissClick);
|
||||
}, [isOpen, onMissClick]);
|
||||
return (
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
<>
|
||||
{isOpen && (
|
||||
<DropBox
|
||||
{...rest}
|
||||
ref={dropBoxRef}
|
||||
changeWidth={changeWidth}
|
||||
width={context.sectionWidth}
|
||||
height={context.sectionHeight}
|
||||
isRootFolder={isRootFolder}
|
||||
onBackToParentFolder={onBackToParentFolder}
|
||||
title={title}
|
||||
personal={personal}
|
||||
isRootFolder={isRootFolder}
|
||||
canCreate={canCreate}
|
||||
navigationItems={navigationItems}
|
||||
getContextOptionsFolder={getContextOptionsFolder}
|
||||
getContextOptionsPlus={getContextOptionsPlus}
|
||||
toggleDropBox={toggleDropBox}
|
||||
onClickAvailable={onClickAvailable}
|
||||
/>
|
||||
)}
|
||||
<StyledContainer
|
||||
width={context.sectionWidth}
|
||||
isRootFolder={isRootFolder}
|
||||
canCreate={canCreate}
|
||||
title={title}
|
||||
isDesktop={isDesktop}
|
||||
isTabletView={isTabletView}>
|
||||
<div className="header-container">
|
||||
{!title || !tReady ? (
|
||||
<Loaders.SectionHeader />
|
||||
) : (
|
||||
<>
|
||||
<ArrowButton
|
||||
isRootFolder={isRootFolder}
|
||||
onBackToParentFolder={onBackToParentFolder}
|
||||
/>
|
||||
<Text
|
||||
title={title}
|
||||
isOpen={false}
|
||||
isRootFolder={isRootFolder}
|
||||
onClick={toggleDropBox}
|
||||
/>
|
||||
<ControlButtons
|
||||
personal={personal}
|
||||
isRootFolder={isRootFolder}
|
||||
canCreate={canCreate}
|
||||
getContextOptionsFolder={getContextOptionsFolder}
|
||||
getContextOptionsPlus={getContextOptionsPlus}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</StyledContainer>
|
||||
</>
|
||||
)}
|
||||
</Consumer>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
tReady: PropTypes.bool,
|
||||
isRootFolder: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
canCreate: PropTypes.bool,
|
||||
isDesktop: PropTypes.bool,
|
||||
isTabletView: PropTypes.bool,
|
||||
personal: PropTypes.bool,
|
||||
onClickFolder: PropTypes.func,
|
||||
navigationItems: PropTypes.arrayOf(PropTypes.object),
|
||||
getContextOptionsPlus: PropTypes.func,
|
||||
getContextOptionsFolder: PropTypes.func,
|
||||
onBackToParentFolder: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
@ -0,0 +1,83 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import { isMobile, isMobileOnly } from 'react-device-detect';
|
||||
import { tablet, desktop, mobile } from '@appserver/components/utils/device';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
.header-container {
|
||||
position: relative;
|
||||
height: ${isMobile ? (isMobileOnly ? '53px !important' : '61px !important') : '53px'};
|
||||
align-items: center;
|
||||
max-width: ${(props) => props.width}px;
|
||||
@media ${tablet} {
|
||||
height: 63px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 53px;
|
||||
}
|
||||
${(props) =>
|
||||
props.title &&
|
||||
css`
|
||||
display: grid;
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? 'auto auto 1fr'
|
||||
: props.canCreate
|
||||
? 'auto auto auto auto 1fr'
|
||||
: 'auto auto auto 1fr'};
|
||||
|
||||
@media ${tablet} {
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? '1fr auto'
|
||||
: props.canCreate
|
||||
? 'auto 1fr auto auto'
|
||||
: 'auto 1fr auto'};
|
||||
}
|
||||
`}
|
||||
|
||||
.arrow-button {
|
||||
margin-right: 15px;
|
||||
min-width: 17px;
|
||||
padding: 16px 0 12px;
|
||||
align-items: center;
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 20px 0 16px 8px;
|
||||
margin-left: -8px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-button {
|
||||
margin-bottom: -1px;
|
||||
margin-left: 16px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: auto;
|
||||
|
||||
& > div:first-child {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-button {
|
||||
margin-bottom: -1px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
& > div:first-child {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledContainer;
|
||||
1
packages/asc-web-common/components/Navigation/index.js
Normal file
1
packages/asc-web-common/components/Navigation/index.js
Normal file
@ -0,0 +1 @@
|
||||
export default from './Navigation';
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import IconButton from '@appserver/components/icon-button';
|
||||
|
||||
const ArrowButton = ({ isRootFolder, onBackToParentFolder }) => {
|
||||
return (
|
||||
!isRootFolder && (
|
||||
<IconButton
|
||||
iconName="/static/images/arrow.path.react.svg"
|
||||
size="17"
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill={true}
|
||||
onClick={onBackToParentFolder}
|
||||
className="arrow-button"
|
||||
/>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ArrowButton);
|
||||
@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import ContextMenuButton from '@appserver/components/context-menu-button';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
margin-left: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const ControlButtons = ({
|
||||
personal,
|
||||
isRootFolder,
|
||||
canCreate,
|
||||
getContextOptionsFolder,
|
||||
getContextOptionsPlus,
|
||||
}) => {
|
||||
return !isRootFolder && canCreate ? (
|
||||
<StyledContainer>
|
||||
<ContextMenuButton
|
||||
className="add-button"
|
||||
directionX="right"
|
||||
iconName="images/plus.svg"
|
||||
size={17}
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill
|
||||
getData={getContextOptionsPlus}
|
||||
isDisabled={false}
|
||||
/>
|
||||
{!personal && (
|
||||
<ContextMenuButton
|
||||
className="option-button"
|
||||
directionX="right"
|
||||
iconName="images/vertical-dots.react.svg"
|
||||
size={17}
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill
|
||||
getData={getContextOptionsFolder}
|
||||
isDisabled={false}
|
||||
/>
|
||||
)}
|
||||
</StyledContainer>
|
||||
) : (
|
||||
canCreate && (
|
||||
<ContextMenuButton
|
||||
className="add-button"
|
||||
directionX="right"
|
||||
iconName="images/plus.svg"
|
||||
size={17}
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill
|
||||
getData={getContextOptionsPlus}
|
||||
isDisabled={false}
|
||||
/>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ControlButtons);
|
||||
@ -0,0 +1,236 @@
|
||||
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;
|
||||
`}
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
position: relative;
|
||||
top: -1px;
|
||||
align-items: center;
|
||||
min-width: 100px;
|
||||
max-width: calc(100vw - 32px);
|
||||
height: ${isMobile ? (isMobileOnly ? '53px !important' : '61px !important') : '53px'};
|
||||
padding: ${isMobile ? '0px 16px' : '0px 24px'};
|
||||
@media ${tablet} {
|
||||
padding: 0px 16px;
|
||||
height: 61px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 53px;
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: ${(props) =>
|
||||
props.canCreate ? 'auto auto auto auto 1fr' : 'auto auto auto 1fr'};
|
||||
|
||||
@media ${tablet} {
|
||||
grid-template-columns: ${(props) => (props.canCreate ? 'auto 1fr auto auto' : 'auto 1fr auto')};
|
||||
}
|
||||
|
||||
.arrow-button {
|
||||
margin-right: 15px;
|
||||
min-width: 17px;
|
||||
padding: 16px 0 12px;
|
||||
align-items: center;
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 20px 0 16px 8px;
|
||||
margin-left: -8px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-button {
|
||||
margin-bottom: -1px;
|
||||
margin-left: 16px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: auto;
|
||||
|
||||
& > div:first-child {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-button {
|
||||
margin-bottom: -1px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
& > div:first-child {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Row = React.memo(({ data, index, style }) => {
|
||||
const isRoot = index === data[0].length - 1;
|
||||
const paddingBottom = isRoot ? '20px' : 0;
|
||||
return (
|
||||
<Item
|
||||
key={data[0][index].id}
|
||||
id={data[0][index].id}
|
||||
title={data[0][index].title}
|
||||
isRoot={isRoot}
|
||||
onClick={data[1]}
|
||||
style={{ ...style, paddingBottom: paddingBottom }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const DropBox = React.forwardRef(
|
||||
(
|
||||
{
|
||||
width,
|
||||
height,
|
||||
changeWidth,
|
||||
isRootFolder,
|
||||
onBackToParentFolder,
|
||||
title,
|
||||
personal,
|
||||
canCreate,
|
||||
navigationItems,
|
||||
getContextOptionsFolder,
|
||||
getContextOptionsPlus,
|
||||
toggleDropBox,
|
||||
onClickAvailable,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const countItems = navigationItems.length;
|
||||
|
||||
const getItemSize = (index) => {
|
||||
if (index === countItems - 1) return 29;
|
||||
return isMobile || IsMobileUtils() || isTabletUtils() ? 36 : 30;
|
||||
};
|
||||
|
||||
const getListHeight = useCallback(() => {
|
||||
const itemsHeight = navigationItems.map((item, index) => getItemSize(index));
|
||||
|
||||
const currentHeight = itemsHeight.reduce((a, b) => a + b);
|
||||
|
||||
if (isMobileOnly)
|
||||
return currentHeight + 30 > height - 109 ? height - 109 : currentHeight + 30;
|
||||
if (isMobile) return currentHeight + 30 > height - 120 ? height - 120 : currentHeight + 30;
|
||||
return currentHeight + 20 > height - 53 ? height - 53 : currentHeight + 20;
|
||||
}, [height]);
|
||||
|
||||
// useEffect(() => {
|
||||
// const items = [];
|
||||
// const itemsText = [];
|
||||
// const sectionWidth = document.getElementById('section').offsetWidth;
|
||||
// navigationItems.forEach((item) => {
|
||||
// items.push(document.getElementById(item.id));
|
||||
// itemsText.push(document.getElementById(`item-text-${item.id}`));
|
||||
// });
|
||||
// let maxTextWidth = 0;
|
||||
|
||||
// itemsText.forEach((item) => {
|
||||
// item.offsetWidth > maxTextWidth ? (maxTextWidth = item.offsetWidth) : null;
|
||||
// });
|
||||
|
||||
// if (sectionWidth < maxTextWidth + 57) {
|
||||
// setCurrentWidth(sectionWidth);
|
||||
// } else {
|
||||
// setCurrentWidth(maxTextWidth + 57);
|
||||
// }
|
||||
|
||||
// items.forEach((item, index) => {});
|
||||
// }, []);
|
||||
return (
|
||||
<StyledBox ref={ref} width={width} height={height + 20} changeWidth={changeWidth}>
|
||||
<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
|
||||
height={getListHeight()}
|
||||
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);
|
||||
@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import Text from '@appserver/components/text';
|
||||
|
||||
import DefaultIcon from '../svg/default.react.svg';
|
||||
import RootIcon from '../svg/root.react.svg';
|
||||
import DefaultTabletIcon from '../svg/default.tablet.react.svg';
|
||||
import RootTabletIcon from '../svg/root.tablet.react.svg';
|
||||
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import { tablet, isTablet, isMobile as IsMobileUtils } from '@appserver/components/utils/device';
|
||||
|
||||
const StyledItem = styled.div`
|
||||
height: auto;
|
||||
width: fit-content !important;
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
grid-template-columns: 17px auto;
|
||||
cursor: pointer;
|
||||
padding: ${isMobile ? '0px 16px' : '0px 24px'};
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledIconWrapper = styled.div`
|
||||
width: 19px;
|
||||
display: flex;
|
||||
align-items: ${(props) => (props.isRoot ? 'center' : 'flex-end')};
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const StyledText = styled(Text)`
|
||||
margin-left: 10px;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
`;
|
||||
|
||||
const Item = ({ id, title, isRoot, onClick, ...rest }) => {
|
||||
const onClickAvailable = () => {
|
||||
onClick && onClick(id);
|
||||
};
|
||||
|
||||
React;
|
||||
|
||||
return (
|
||||
<StyledItem id={id} isRoot={isRoot} onClick={onClickAvailable} {...rest}>
|
||||
<StyledIconWrapper isRoot={isRoot}>
|
||||
{isMobile || isTablet() || IsMobileUtils() ? (
|
||||
isRoot ? (
|
||||
<RootTabletIcon />
|
||||
) : (
|
||||
<DefaultTabletIcon />
|
||||
)
|
||||
) : isRoot ? (
|
||||
<RootIcon />
|
||||
) : (
|
||||
<DefaultIcon />
|
||||
)}
|
||||
</StyledIconWrapper>
|
||||
<StyledText
|
||||
isRoot={isRoot}
|
||||
fontWeight={isRoot ? '600' : '400'}
|
||||
isRoot={isRoot}
|
||||
fontSize={'15px'}
|
||||
truncate={true}>
|
||||
{title}
|
||||
</StyledText>
|
||||
</StyledItem>
|
||||
);
|
||||
};
|
||||
|
||||
Item.propTypes = {
|
||||
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
isRoot: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default React.memo(Item);
|
||||
@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import ExpanderDownIcon from '@appserver/components/public/static/images/expander-down.react.svg';
|
||||
import commonIconsStyles from '@appserver/components/utils/common-icons-style';
|
||||
|
||||
import Headline from '@appserver/common/components/Headline';
|
||||
|
||||
import { tablet } from '@appserver/components/utils/device';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
|
||||
const StyledTextContainer = styled.div`
|
||||
height: ${isMobile ? '21px !important' : '18px'};
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto 14px;
|
||||
|
||||
align-items: center;
|
||||
${(props) => !props.isRootFolder && 'cursor: pointer'};
|
||||
@media ${tablet} {
|
||||
height: 21px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeadline = styled(Headline)`
|
||||
min-width: 30px;
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
font-size: ${isMobile ? '21px !important' : '18px'};
|
||||
line-height: ${isMobile ? '28px !important' : '24px'};
|
||||
@media ${tablet} {
|
||||
font-size: 21px;
|
||||
line-height: 28px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
|
||||
min-width: 8px !important;
|
||||
width: 8px !important;
|
||||
min-height: 18px !important;
|
||||
padding-left: 6px;
|
||||
|
||||
${commonIconsStyles};
|
||||
`;
|
||||
|
||||
const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
|
||||
min-width: 8px !important;
|
||||
width: 8px !important;
|
||||
min-height: 18px !important;
|
||||
padding-right: 6px;
|
||||
transform: rotate(-180deg);
|
||||
|
||||
${commonIconsStyles};
|
||||
`;
|
||||
|
||||
const Text = ({ title, isRootFolder, isOpen, onClick, ...rest }) => {
|
||||
return (
|
||||
<StyledTextContainer isRootFolder={isRootFolder} onClick={onClick} {...rest}>
|
||||
<StyledHeadline type="content" truncate={true}>
|
||||
{title}
|
||||
</StyledHeadline>
|
||||
{!isRootFolder ? (
|
||||
isOpen ? (
|
||||
<StyledExpanderDownIconRotate />
|
||||
) : (
|
||||
<StyledExpanderDownIcon />
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</StyledTextContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Text.propTypes = {
|
||||
title: PropTypes.string,
|
||||
isOpen: PropTypes.bool,
|
||||
isRootFolder: PropTypes.bool,
|
||||
onCLick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default React.memo(Text);
|
||||
@ -0,0 +1,4 @@
|
||||
<svg width="19" height="30" viewBox="0 0 19 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.5 1V16" stroke="#DFE2E3" stroke-miterlimit="16" stroke-dasharray="2 2"/>
|
||||
<circle cx="9.5" cy="23.5" r="2.5" stroke="#316DAA" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@ -0,0 +1,4 @@
|
||||
<svg width="19" height="36" viewBox="0 0 19 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.5 1V22" stroke="#DFE2E3" stroke-miterlimit="16" stroke-dasharray="2 2"/>
|
||||
<circle cx="9.5" cy="29.5" r="2.5" stroke="#316DAA" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@ -0,0 +1,4 @@
|
||||
<svg width="19" height="31" viewBox="0 0 19 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.5 1L9.5 15" stroke="#DFE2E3" stroke-miterlimit="16" stroke-dasharray="2 2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 19L14 22.7386V27.5461C14 28.3491 13.3284 29 12.5 29H6.5C5.67157 29 5 28.3491 5 27.5461V22.7386L9.5 19ZM7 23.6302V27.0615H12V23.6302L9.5 21.5532L7 23.6302Z" fill="#316DAA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 419 B |
@ -0,0 +1,4 @@
|
||||
<svg width="19" height="36" viewBox="0 0 19 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.5 1L9.5 20" stroke="#DFE2E3" stroke-miterlimit="16" stroke-dasharray="2 2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 24L14 27.7386V32.5461C14 33.3491 13.3284 34 12.5 34H6.5C5.67157 34 5 33.3491 5 32.5461V27.7386L9.5 24ZM7 28.6302V32.0615H12V28.6302L9.5 26.5532L7 28.6302Z" fill="#316DAA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 419 B |
@ -1,13 +1,14 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import equal from "fast-deep-equal/react";
|
||||
import classnames from "classnames";
|
||||
import PropTypes from "prop-types";
|
||||
import { LayoutContextConsumer } from "studio/Layout/context";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
import NoUserSelect from "@appserver/components/utils/commonStyles";
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import equal from 'fast-deep-equal/react';
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import { LayoutContextConsumer } from 'studio/Layout/context';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import { tablet, desktop } from '@appserver/components/utils/device';
|
||||
import NoUserSelect from '@appserver/components/utils/commonStyles';
|
||||
const StyledSectionHeader = styled.div`
|
||||
position: relative;
|
||||
border-bottom: 1px solid #eceef1;
|
||||
height: 55px;
|
||||
margin-right: 24px;
|
||||
@ -19,7 +20,7 @@ const StyledSectionHeader = styled.div`
|
||||
height: 49px;
|
||||
min-height: 48px;
|
||||
max-height: 49px;
|
||||
width: ${(props) => !props.isLoaded && "100%"};
|
||||
width: ${(props) => !props.isLoaded && '100%'};
|
||||
margin-top: 64px;
|
||||
@media ${tablet} {
|
||||
margin-top: 55px;
|
||||
@ -44,8 +45,7 @@ const StyledSectionHeader = styled.div`
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
|
||||
width: ${(props) =>
|
||||
props.isArticlePinned ? `calc(100% - 272px)` : "100%"};
|
||||
width: ${(props) => (props.isArticlePinned ? `calc(100% - 272px)` : '100%')};
|
||||
|
||||
background-color: #fff;
|
||||
z-index: 149;
|
||||
@ -67,8 +67,7 @@ const StyledSectionHeader = styled.div`
|
||||
.group-button-menu-container {
|
||||
padding-bottom: 0 !important;
|
||||
> div:first-child {
|
||||
top: ${(props) =>
|
||||
!props.isSectionHeaderVisible ? "56px" : "0px"} !important;
|
||||
top: ${(props) => (!props.isSectionHeaderVisible ? '56px' : '0px')} !important;
|
||||
|
||||
@media ${desktop} {
|
||||
${isMobile &&
|
||||
@ -110,12 +109,10 @@ class SectionHeader extends React.Component {
|
||||
{(value) => (
|
||||
<StyledSectionHeader
|
||||
isArticlePinned={isArticlePinned}
|
||||
isSectionHeaderVisible={value.isVisible}
|
||||
>
|
||||
isSectionHeaderVisible={value.isVisible}>
|
||||
<div
|
||||
className={classnames("section-header hidingHeader", {
|
||||
"section-header--hidden":
|
||||
value.isVisible === undefined ? false : !value.isVisible,
|
||||
className={classnames('section-header hidingHeader', {
|
||||
'section-header--hidden': value.isVisible === undefined ? false : !value.isVisible,
|
||||
})}
|
||||
{...rest}
|
||||
/>
|
||||
@ -126,7 +123,7 @@ class SectionHeader extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
SectionHeader.displayName = "SectionHeader";
|
||||
SectionHeader.displayName = 'SectionHeader';
|
||||
|
||||
SectionHeader.propTypes = {
|
||||
isArticlePinned: PropTypes.bool,
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
import React from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { tablet, size } from "@appserver/components/utils/device";
|
||||
import {
|
||||
isIOS,
|
||||
isTablet,
|
||||
isSafari,
|
||||
isChrome,
|
||||
isMobile,
|
||||
} from "react-device-detect";
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { tablet, size } from '@appserver/components/utils/device';
|
||||
import { isIOS, isTablet, isSafari, isChrome, isMobile } from 'react-device-detect';
|
||||
|
||||
const tabletProps = css`
|
||||
.section-header_filter {
|
||||
@ -57,13 +51,11 @@ const StyledSection = styled.section`
|
||||
padding: 0 0 0 16px;
|
||||
${tabletProps};
|
||||
}
|
||||
${
|
||||
isMobile &&
|
||||
css`
|
||||
${tabletProps};
|
||||
min-width: 100px;
|
||||
`
|
||||
}
|
||||
${isMobile &&
|
||||
css`
|
||||
${tabletProps};
|
||||
min-width: 100px;
|
||||
`}
|
||||
`;
|
||||
|
||||
class Section extends React.Component {
|
||||
@ -86,7 +78,7 @@ class Section extends React.Component {
|
||||
render() {
|
||||
//console.log("PageLayout Section render");
|
||||
|
||||
return <StyledSection {...this.props} />;
|
||||
return <StyledSection id="section" {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,149 +1,151 @@
|
||||
import React from "react";
|
||||
import copy from "copy-to-clipboard";
|
||||
import styled, { css } from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import toastr from "studio/toastr";
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import Headline from "@appserver/common/components/Headline";
|
||||
import { FilterType, FileAction } from "@appserver/common/constants";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import ContextMenuButton from "@appserver/components/context-menu-button";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
import GroupButtonsMenu from "@appserver/components/group-buttons-menu";
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
import { Consumer } from "@appserver/components/utils/context";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import React from 'react';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { withRouter } from 'react-router';
|
||||
import toastr from 'studio/toastr';
|
||||
import Loaders from '@appserver/common/components/Loaders';
|
||||
import Headline from '@appserver/common/components/Headline';
|
||||
import { FilterType, FileAction } from '@appserver/common/constants';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import ContextMenuButton from '@appserver/components/context-menu-button';
|
||||
import DropDownItem from '@appserver/components/drop-down-item';
|
||||
import GroupButtonsMenu from '@appserver/components/group-buttons-menu';
|
||||
import IconButton from '@appserver/components/icon-button';
|
||||
import { tablet, desktop, isTablet } from '@appserver/components/utils/device';
|
||||
import { Consumer } from '@appserver/components/utils/context';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import Navigation from '@appserver/common/components/Navigation';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
.header-container {
|
||||
position: relative;
|
||||
${(props) =>
|
||||
props.title &&
|
||||
css`
|
||||
display: grid;
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? "auto auto 1fr"
|
||||
: props.canCreate
|
||||
? "auto auto auto auto 1fr"
|
||||
: "auto auto auto 1fr"};
|
||||
// const StyledContainer = styled.div`
|
||||
// .header-container {
|
||||
// position: relative;
|
||||
// ${(props) =>
|
||||
// props.title &&
|
||||
// css`
|
||||
// display: grid;
|
||||
// grid-template-columns: ${(props) =>
|
||||
// props.isRootFolder
|
||||
// ? 'auto auto 1fr'
|
||||
// : props.canCreate
|
||||
// ? 'auto auto auto auto 1fr'
|
||||
// : 'auto auto auto 1fr'};
|
||||
|
||||
@media ${tablet} {
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? "1fr auto"
|
||||
: props.canCreate
|
||||
? "auto 1fr auto auto"
|
||||
: "auto 1fr auto"};
|
||||
}
|
||||
`}
|
||||
align-items: center;
|
||||
max-width: calc(100vw - 32px);
|
||||
// @media ${tablet} {
|
||||
// grid-template-columns: ${(props) =>
|
||||
// props.isRootFolder
|
||||
// ? '1fr auto'
|
||||
// : props.canCreate
|
||||
// ? 'auto 1fr auto auto'
|
||||
// : 'auto 1fr auto'};
|
||||
// }
|
||||
// `}
|
||||
// align-items: center;
|
||||
// max-width: calc(100vw - 32px);
|
||||
|
||||
@media ${tablet} {
|
||||
.headline-header {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
.arrow-button {
|
||||
margin-right: 15px;
|
||||
min-width: 17px;
|
||||
// @media ${tablet} {
|
||||
// .headline-header {
|
||||
// margin-left: -1px;
|
||||
// }
|
||||
// }
|
||||
// .arrow-button {
|
||||
// margin-right: 15px;
|
||||
// min-width: 17px;
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 8px 0 8px 8px;
|
||||
margin-left: -8px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
// @media ${tablet} {
|
||||
// padding: 8px 0 8px 8px;
|
||||
// margin-left: -8px;
|
||||
// margin-right: 16px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.add-button {
|
||||
margin-bottom: -1px;
|
||||
margin-left: 16px;
|
||||
// .add-button {
|
||||
// margin-bottom: -1px;
|
||||
// margin-left: 16px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: auto;
|
||||
// @media ${tablet} {
|
||||
// margin-left: auto;
|
||||
|
||||
& > div:first-child {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// & > div:first-child {
|
||||
// padding: 8px 8px 8px 8px;
|
||||
// margin-right: -8px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.option-button {
|
||||
margin-bottom: -1px;
|
||||
// .option-button {
|
||||
// margin-bottom: -1px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
// @media (min-width: 1024px) {
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
|
||||
@media ${tablet} {
|
||||
& > div:first-child {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @media ${tablet} {
|
||||
// & > div:first-child {
|
||||
// padding: 8px 8px 8px 8px;
|
||||
// margin-right: -8px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.group-button-menu-container {
|
||||
margin: 0 -16px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
padding-bottom: 56px;
|
||||
// .group-button-menu-container {
|
||||
// margin: 0 -16px;
|
||||
// -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
// padding-bottom: 56px;
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
position: sticky;
|
||||
`}
|
||||
// ${isMobile &&
|
||||
// css`
|
||||
// position: sticky;
|
||||
// `}
|
||||
|
||||
${(props) =>
|
||||
!props.isTabletView
|
||||
? props.width &&
|
||||
isMobile &&
|
||||
css`
|
||||
width: ${props.width + 40 + "px"};
|
||||
`
|
||||
: props.width &&
|
||||
isMobile &&
|
||||
css`
|
||||
width: ${props.width + 32 + "px"};
|
||||
`}
|
||||
// ${(props) =>
|
||||
// !props.isTabletView
|
||||
// ? props.width &&
|
||||
// isMobile &&
|
||||
// css`
|
||||
// width: ${props.width + 40 + 'px'};
|
||||
// `
|
||||
// : props.width &&
|
||||
// isMobile &&
|
||||
// css`
|
||||
// width: ${props.width + 32 + 'px'};
|
||||
// `}
|
||||
|
||||
@media ${tablet} {
|
||||
padding-bottom: 0;
|
||||
${!isMobile &&
|
||||
css`
|
||||
height: 56px;
|
||||
`}
|
||||
& > div:first-child {
|
||||
${(props) =>
|
||||
!isMobile &&
|
||||
props.width &&
|
||||
css`
|
||||
width: ${props.width + 16 + "px"};
|
||||
`}
|
||||
// @media ${tablet} {
|
||||
// padding-bottom: 0;
|
||||
// ${!isMobile &&
|
||||
// css`
|
||||
// height: 56px;
|
||||
// `}
|
||||
// & > div:first-child {
|
||||
// ${(props) =>
|
||||
// !isMobile &&
|
||||
// props.width &&
|
||||
// css`
|
||||
// width: ${props.width + 16 + 'px'};
|
||||
// `}
|
||||
|
||||
position: absolute;
|
||||
${(props) =>
|
||||
!props.isDesktop &&
|
||||
css`
|
||||
top: 56px;
|
||||
`}
|
||||
z-index: 180;
|
||||
}
|
||||
}
|
||||
// position: absolute;
|
||||
// ${(props) =>
|
||||
// !props.isDesktop &&
|
||||
// css`
|
||||
// top: 56px;
|
||||
// `}
|
||||
// z-index: 180;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media ${desktop} {
|
||||
margin: 0 -24px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
// @media ${desktop} {
|
||||
// margin: 0 -24px;
|
||||
// }
|
||||
// }
|
||||
// `;
|
||||
|
||||
class SectionHeaderContent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { navigationItems: [] };
|
||||
}
|
||||
|
||||
onCreate = (format) => {
|
||||
@ -154,44 +156,44 @@ class SectionHeaderContent extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
createDocument = () => this.onCreate("docx");
|
||||
createDocument = () => this.onCreate('docx');
|
||||
|
||||
createSpreadsheet = () => this.onCreate("xlsx");
|
||||
createSpreadsheet = () => this.onCreate('xlsx');
|
||||
|
||||
createPresentation = () => this.onCreate("pptx");
|
||||
createPresentation = () => this.onCreate('pptx');
|
||||
|
||||
createFolder = () => this.onCreate();
|
||||
|
||||
uploadToFolder = () => console.log("Upload To Folder click");
|
||||
uploadToFolder = () => console.log('Upload To Folder click');
|
||||
|
||||
getContextOptionsPlus = () => {
|
||||
const { t } = this.props;
|
||||
|
||||
return [
|
||||
{
|
||||
key: "new-document",
|
||||
label: t("NewDocument"),
|
||||
key: 'new-document',
|
||||
label: t('NewDocument'),
|
||||
onClick: this.createDocument,
|
||||
},
|
||||
{
|
||||
key: "new-spreadsheet",
|
||||
label: t("NewSpreadsheet"),
|
||||
key: 'new-spreadsheet',
|
||||
label: t('NewSpreadsheet'),
|
||||
onClick: this.createSpreadsheet,
|
||||
},
|
||||
{
|
||||
key: "new-presentation",
|
||||
label: t("NewPresentation"),
|
||||
key: 'new-presentation',
|
||||
label: t('NewPresentation'),
|
||||
onClick: this.createPresentation,
|
||||
},
|
||||
{
|
||||
key: "new-folder",
|
||||
label: t("NewFolder"),
|
||||
key: 'new-folder',
|
||||
label: t('NewFolder'),
|
||||
onClick: this.createFolder,
|
||||
},
|
||||
{ key: "separator", isSeparator: true },
|
||||
{ key: 'separator', isSeparator: true },
|
||||
{
|
||||
key: "make-invitation-link",
|
||||
label: t("UploadToFolder"),
|
||||
key: 'make-invitation-link',
|
||||
label: t('UploadToFolder'),
|
||||
onClick: this.uploadToFolder,
|
||||
disabled: true,
|
||||
},
|
||||
@ -202,21 +204,19 @@ class SectionHeaderContent extends React.Component {
|
||||
const { currentFolderId } = this.props;
|
||||
const { t } = this.props;
|
||||
|
||||
copy(
|
||||
`${window.location.origin}/products/files/filter?folder=${currentFolderId}`
|
||||
);
|
||||
copy(`${window.location.origin}/products/files/filter?folder=${currentFolderId}`);
|
||||
|
||||
toastr.success(t("Translations:LinkCopySuccess"));
|
||||
toastr.success(t('Translations:LinkCopySuccess'));
|
||||
};
|
||||
|
||||
onMoveAction = () => this.props.setMoveToPanelVisible(true);
|
||||
onCopyAction = () => this.props.setCopyPanelVisible(true);
|
||||
downloadAction = () =>
|
||||
this.props
|
||||
.downloadAction(this.props.t("Translations:ArchivingData"))
|
||||
.downloadAction(this.props.t('Translations:ArchivingData'))
|
||||
.catch((err) => toastr.error(err));
|
||||
|
||||
renameAction = () => console.log("renameAction click");
|
||||
renameAction = () => console.log('renameAction click');
|
||||
onOpenSharingPanel = () => this.props.setSharingPanelVisible(true);
|
||||
|
||||
onDeleteAction = () => {
|
||||
@ -232,9 +232,9 @@ class SectionHeaderContent extends React.Component {
|
||||
setDeleteDialogVisible(true);
|
||||
} else {
|
||||
const translations = {
|
||||
deleteOperation: t("Translations:DeleteOperation"),
|
||||
deleteFromTrash: t("Translations:DeleteFromTrash"),
|
||||
deleteSelectedElem: t("Translations:DeleteSelectedElem"),
|
||||
deleteOperation: t('Translations:DeleteOperation'),
|
||||
deleteFromTrash: t('Translations:DeleteFromTrash'),
|
||||
deleteSelectedElem: t('Translations:DeleteSelectedElem'),
|
||||
};
|
||||
|
||||
deleteAction(translations).catch((err) => toastr.error(err));
|
||||
@ -247,45 +247,45 @@ class SectionHeaderContent extends React.Component {
|
||||
const { t } = this.props;
|
||||
return [
|
||||
{
|
||||
key: "sharing-settings",
|
||||
label: t("SharingSettings"),
|
||||
key: 'sharing-settings',
|
||||
label: t('SharingSettings'),
|
||||
onClick: this.onOpenSharingPanel,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: "link-portal-users",
|
||||
label: t("LinkForPortalUsers"),
|
||||
key: 'link-portal-users',
|
||||
label: t('LinkForPortalUsers'),
|
||||
onClick: this.createLinkForPortalUsers,
|
||||
disabled: false,
|
||||
},
|
||||
{ key: "separator-2", isSeparator: true },
|
||||
{ key: 'separator-2', isSeparator: true },
|
||||
{
|
||||
key: "move-to",
|
||||
label: t("MoveTo"),
|
||||
key: 'move-to',
|
||||
label: t('MoveTo'),
|
||||
onClick: this.onMoveAction,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: "copy",
|
||||
label: t("Translations:Copy"),
|
||||
key: 'copy',
|
||||
label: t('Translations:Copy'),
|
||||
onClick: this.onCopyAction,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: "download",
|
||||
label: t("Common:Download"),
|
||||
key: 'download',
|
||||
label: t('Common:Download'),
|
||||
onClick: this.downloadAction,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: "rename",
|
||||
label: t("Rename"),
|
||||
key: 'rename',
|
||||
label: t('Rename'),
|
||||
onClick: this.renameAction,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: "delete",
|
||||
label: t("Common:Delete"),
|
||||
key: 'delete',
|
||||
label: t('Common:Delete'),
|
||||
onClick: this.onDeleteAction,
|
||||
disabled: true,
|
||||
},
|
||||
@ -299,7 +299,7 @@ class SectionHeaderContent extends React.Component {
|
||||
};
|
||||
|
||||
onCheck = (checked) => {
|
||||
this.props.setSelected(checked ? "all" : "none");
|
||||
this.props.setSelected(checked ? 'all' : 'none');
|
||||
};
|
||||
|
||||
onSelect = (item) => {
|
||||
@ -307,7 +307,7 @@ class SectionHeaderContent extends React.Component {
|
||||
};
|
||||
|
||||
onClose = () => {
|
||||
this.props.setSelected("close");
|
||||
this.props.setSelected('close');
|
||||
};
|
||||
|
||||
getMenuItems = () => {
|
||||
@ -321,11 +321,11 @@ class SectionHeaderContent extends React.Component {
|
||||
|
||||
let menu = [
|
||||
{
|
||||
label: t("Common:Select"),
|
||||
label: t('Common:Select'),
|
||||
isDropdown: true,
|
||||
isSeparator: true,
|
||||
isSelect: true,
|
||||
fontWeight: "bold",
|
||||
fontWeight: 'bold',
|
||||
children,
|
||||
onSelect: this.onSelect,
|
||||
},
|
||||
@ -336,125 +336,146 @@ class SectionHeaderContent extends React.Component {
|
||||
return menu;
|
||||
};
|
||||
|
||||
onClickFolder = (data) => {
|
||||
const { setSelectedNode, setIsLoading, fetchFiles } = this.props;
|
||||
setSelectedNode(data);
|
||||
setIsLoading(true);
|
||||
fetchFiles(data, null, true, false)
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
render() {
|
||||
//console.log("Body header render");
|
||||
|
||||
const {
|
||||
t,
|
||||
tReady,
|
||||
isHeaderVisible,
|
||||
isHeaderChecked,
|
||||
isHeaderIndeterminate,
|
||||
isRootFolder,
|
||||
title,
|
||||
canCreate,
|
||||
isDesktop,
|
||||
isTabletView,
|
||||
personal,
|
||||
viewAs,
|
||||
navigationPath,
|
||||
} = this.props;
|
||||
|
||||
const menuItems = this.getMenuItems();
|
||||
|
||||
return (
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
<StyledContainer
|
||||
width={context.sectionWidth}
|
||||
isRootFolder={isRootFolder}
|
||||
canCreate={canCreate}
|
||||
title={title}
|
||||
isDesktop={isDesktop}
|
||||
isTabletView={isTabletView}
|
||||
>
|
||||
{isHeaderVisible && viewAs !== "table" ? (
|
||||
<div className="group-button-menu-container">
|
||||
<GroupButtonsMenu
|
||||
checked={isHeaderChecked}
|
||||
isIndeterminate={isHeaderIndeterminate}
|
||||
onChange={this.onCheck}
|
||||
menuItems={menuItems}
|
||||
visible={isHeaderVisible}
|
||||
moreLabel={t("Common:More")}
|
||||
closeTitle={t("Common:CloseButton")}
|
||||
onClose={this.onClose}
|
||||
selected={menuItems[0].label}
|
||||
sectionWidth={context.sectionWidth}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="header-container">
|
||||
{!title || !tReady ? (
|
||||
<Loaders.SectionHeader />
|
||||
) : (
|
||||
<>
|
||||
{!isRootFolder && (
|
||||
<IconButton
|
||||
iconName="/static/images/arrow.path.react.svg"
|
||||
size="17"
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill={true}
|
||||
onClick={this.onBackToParentFolder}
|
||||
className="arrow-button"
|
||||
/>
|
||||
)}
|
||||
<Headline
|
||||
className="headline-header"
|
||||
type="content"
|
||||
truncate={true}
|
||||
>
|
||||
{title}
|
||||
</Headline>
|
||||
{!isRootFolder && canCreate ? (
|
||||
<>
|
||||
<ContextMenuButton
|
||||
className="add-button"
|
||||
directionX="right"
|
||||
iconName="images/plus.svg"
|
||||
size={17}
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill
|
||||
getData={this.getContextOptionsPlus}
|
||||
isDisabled={false}
|
||||
/>
|
||||
{!personal && (
|
||||
<ContextMenuButton
|
||||
className="option-button"
|
||||
directionX="right"
|
||||
iconName="images/vertical-dots.react.svg"
|
||||
size={17}
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill
|
||||
getData={this.getContextOptionsFolder}
|
||||
isDisabled={false}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
canCreate && (
|
||||
<ContextMenuButton
|
||||
className="add-button"
|
||||
directionX="right"
|
||||
iconName="images/plus.svg"
|
||||
size={17}
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill
|
||||
getData={this.getContextOptionsPlus}
|
||||
isDisabled={false}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</StyledContainer>
|
||||
)}
|
||||
</Consumer>
|
||||
<Navigation
|
||||
isRootFolder={isRootFolder}
|
||||
canCreate={canCreate}
|
||||
title={title}
|
||||
isDesktop={isDesktop}
|
||||
isTabletView={isTabletView}
|
||||
personal={personal}
|
||||
tReady={tReady}
|
||||
menuItems={menuItems}
|
||||
navigationItems={navigationPath}
|
||||
getContextOptionsPlus={this.getContextOptionsPlus}
|
||||
getContextOptionsFolder={this.getContextOptionsFolder}
|
||||
onClose={this.onClose}
|
||||
onClick={this.onCheck}
|
||||
onClickFolder={this.onClickFolder}
|
||||
onBackToParentFolder={this.onBackToParentFolder}
|
||||
/>
|
||||
// <Consumer>
|
||||
// {(context) => (
|
||||
// <StyledContainer
|
||||
// width={context.sectionWidth}
|
||||
// isRootFolder={isRootFolder}
|
||||
// canCreate={canCreate}
|
||||
// title={title}
|
||||
// isDesktop={isDesktop}
|
||||
// isTabletView={isTabletView}
|
||||
// >
|
||||
// {isHeaderVisible && viewAs !== "table" ? (
|
||||
// <div className="group-button-menu-container">
|
||||
// <GroupButtonsMenu
|
||||
// checked={isHeaderChecked}
|
||||
// isIndeterminate={isHeaderIndeterminate}
|
||||
// onChange={this.onCheck}
|
||||
// menuItems={menuItems}
|
||||
// visible={isHeaderVisible}
|
||||
// moreLabel={t("Common:More")}
|
||||
// closeTitle={t("Common:CloseButton")}
|
||||
// onClose={this.onClose}
|
||||
// selected={menuItems[0].label}
|
||||
// sectionWidth={context.sectionWidth}
|
||||
// />
|
||||
// </div>
|
||||
// ) : (
|
||||
// <div className="header-container">
|
||||
// {!title || !tReady ? (
|
||||
// <Loaders.SectionHeader />
|
||||
// ) : (
|
||||
// <>
|
||||
// {!isRootFolder && (
|
||||
// <IconButton
|
||||
// iconName="/static/images/arrow.path.react.svg"
|
||||
// size="17"
|
||||
// color="#A3A9AE"
|
||||
// hoverColor="#657077"
|
||||
// isFill={true}
|
||||
// onClick={this.onBackToParentFolder}
|
||||
// className="arrow-button"
|
||||
// />
|
||||
// )}
|
||||
// <Headline
|
||||
// className="headline-header"
|
||||
// type="content"
|
||||
// truncate={true}
|
||||
// >
|
||||
// {title}
|
||||
// </Headline>
|
||||
// {!isRootFolder && canCreate ? (
|
||||
// <>
|
||||
// <ContextMenuButton
|
||||
// className="add-button"
|
||||
// directionX="right"
|
||||
// iconName="images/plus.svg"
|
||||
// size={17}
|
||||
// color="#A3A9AE"
|
||||
// hoverColor="#657077"
|
||||
// isFill
|
||||
// getData={this.getContextOptionsPlus}
|
||||
// isDisabled={false}
|
||||
// />
|
||||
// {!personal && (
|
||||
// <ContextMenuButton
|
||||
// className="option-button"
|
||||
// directionX="right"
|
||||
// iconName="images/vertical-dots.react.svg"
|
||||
// size={17}
|
||||
// color="#A3A9AE"
|
||||
// hoverColor="#657077"
|
||||
// isFill
|
||||
// getData={this.getContextOptionsFolder}
|
||||
// isDisabled={false}
|
||||
// />
|
||||
// )}
|
||||
// </>
|
||||
// ) : (
|
||||
// canCreate && (
|
||||
// <ContextMenuButton
|
||||
// className="add-button"
|
||||
// directionX="right"
|
||||
// iconName="images/plus.svg"
|
||||
// size={17}
|
||||
// color="#A3A9AE"
|
||||
// hoverColor="#657077"
|
||||
// isFill
|
||||
// getData={this.getContextOptionsPlus}
|
||||
// isDisabled={false}
|
||||
// />
|
||||
// )
|
||||
// )}
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
// )}
|
||||
// </StyledContainer>
|
||||
// )}
|
||||
// </Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -465,6 +486,7 @@ export default inject(
|
||||
filesStore,
|
||||
dialogsStore,
|
||||
selectedFolderStore,
|
||||
treeFoldersStore,
|
||||
filesActionsStore,
|
||||
settingsStore,
|
||||
}) => {
|
||||
@ -499,6 +521,8 @@ export default inject(
|
||||
title: selectedFolderStore.title,
|
||||
parentId: selectedFolderStore.parentId,
|
||||
currentFolderId: selectedFolderStore.id,
|
||||
pathParts: selectedFolderStore.pathParts,
|
||||
navigationPath: selectedFolderStore.navigationPath,
|
||||
filter,
|
||||
canCreate,
|
||||
isHeaderVisible,
|
||||
@ -510,6 +534,8 @@ export default inject(
|
||||
personal: auth.settingsStore.personal,
|
||||
viewAs,
|
||||
cbMenuItems,
|
||||
setSelectedNode: treeFoldersStore.setSelectedNode,
|
||||
getFolderInfo: treeFoldersStore.getFolderInfo,
|
||||
|
||||
setSelected,
|
||||
setAction,
|
||||
@ -524,9 +550,5 @@ export default inject(
|
||||
getHeaderMenu,
|
||||
getCheckboxItemLabel,
|
||||
};
|
||||
}
|
||||
)(
|
||||
withTranslation(["Home", "Common", "Translations"])(
|
||||
withRouter(observer(SectionHeaderContent))
|
||||
)
|
||||
);
|
||||
},
|
||||
)(withTranslation(['Home', 'Common', 'Translations'])(withRouter(observer(SectionHeaderContent))));
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
import React from "react";
|
||||
import React from 'react';
|
||||
//import PropTypes from "prop-types";
|
||||
import { withRouter } from "react-router";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import axios from "axios";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import { showLoader, hideLoader } from "@appserver/common/utils";
|
||||
import FilesFilter from "@appserver/common/api/files/filter";
|
||||
import { getGroup } from "@appserver/common/api/groups";
|
||||
import { getUserById } from "@appserver/common/api/people";
|
||||
import { withTranslation, Trans } from "react-i18next";
|
||||
import { withRouter } from 'react-router';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import axios from 'axios';
|
||||
import toastr from '@appserver/components/toast/toastr';
|
||||
import PageLayout from '@appserver/common/components/PageLayout';
|
||||
import { showLoader, hideLoader } from '@appserver/common/utils';
|
||||
import FilesFilter from '@appserver/common/api/files/filter';
|
||||
import { getGroup } from '@appserver/common/api/groups';
|
||||
import { getUserById } from '@appserver/common/api/people';
|
||||
import { withTranslation, Trans } from 'react-i18next';
|
||||
import {
|
||||
ArticleBodyContent,
|
||||
ArticleHeaderContent,
|
||||
ArticleMainButtonContent,
|
||||
} from "../../components/Article";
|
||||
} from '../../components/Article';
|
||||
import {
|
||||
SectionBodyContent,
|
||||
SectionFilterContent,
|
||||
SectionHeaderContent,
|
||||
SectionPagingContent,
|
||||
} from "./Section";
|
||||
} from './Section';
|
||||
|
||||
import { createTreeFolders } from "../../helpers/files-helpers";
|
||||
import MediaViewer from "./MediaViewer";
|
||||
import DragTooltip from "../../components/DragTooltip";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import config from "../../../package.json";
|
||||
import { createTreeFolders } from '../../helpers/files-helpers';
|
||||
import MediaViewer from './MediaViewer';
|
||||
import DragTooltip from '../../components/DragTooltip';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import config from '../../../package.json';
|
||||
|
||||
class PureHome extends React.Component {
|
||||
componentDidMount() {
|
||||
@ -42,19 +42,17 @@ class PureHome extends React.Component {
|
||||
getFileInfo,
|
||||
} = this.props;
|
||||
|
||||
const reg = new RegExp(`${homepage}((/?)$|/filter)`, "gm"); //TODO: Always find?
|
||||
const reg = new RegExp(`${homepage}((/?)$|/filter)`, 'gm'); //TODO: Always find?
|
||||
const match = window.location.pathname.match(reg);
|
||||
let filterObj = null;
|
||||
|
||||
if (window.location.href.indexOf("/files/#preview") > 1) {
|
||||
if (window.location.href.indexOf('/files/#preview') > 1) {
|
||||
const pathname = window.location.href;
|
||||
const fileId = pathname.slice(pathname.indexOf("#preview") + 9);
|
||||
const fileId = pathname.slice(pathname.indexOf('#preview') + 9);
|
||||
|
||||
getFileInfo(fileId)
|
||||
.then((data) => {
|
||||
const canOpenPlayer = mediaViewersFormatsStore.isMediaOrImage(
|
||||
data.fileExst
|
||||
);
|
||||
const canOpenPlayer = mediaViewersFormatsStore.isMediaOrImage(data.fileExst);
|
||||
const file = { ...data, canOpenPlayer };
|
||||
setToPreviewFile(file, true);
|
||||
})
|
||||
@ -83,7 +81,7 @@ class PureHome extends React.Component {
|
||||
|
||||
if (filterObj && filterObj.authorType) {
|
||||
const authorType = filterObj.authorType;
|
||||
const indexOfUnderscore = authorType.indexOf("_");
|
||||
const indexOfUnderscore = authorType.indexOf('_');
|
||||
const type = authorType.slice(0, indexOfUnderscore);
|
||||
const itemId = authorType.slice(indexOfUnderscore + 1);
|
||||
|
||||
@ -105,9 +103,9 @@ class PureHome extends React.Component {
|
||||
const newFilter = filter ? filter.clone() : FilesFilter.getDefault();
|
||||
const requests = [Promise.resolve(newFilter)];
|
||||
|
||||
if (type === "group") {
|
||||
if (type === 'group') {
|
||||
requests.push(getGroup(itemId));
|
||||
} else if (type === "user") {
|
||||
} else if (type === 'user') {
|
||||
requests.push(getUserById(itemId));
|
||||
}
|
||||
|
||||
@ -117,16 +115,16 @@ class PureHome extends React.Component {
|
||||
.all(requests)
|
||||
.catch((err) => {
|
||||
Promise.resolve(FilesFilter.getDefault());
|
||||
console.warn("Filter restored by default", err);
|
||||
console.warn('Filter restored by default', err);
|
||||
})
|
||||
.then((data) => {
|
||||
const filter = data[0];
|
||||
const result = data[1];
|
||||
if (result) {
|
||||
const type = result.displayName ? "user" : "group";
|
||||
const type = result.displayName ? 'user' : 'group';
|
||||
const selectedItem = {
|
||||
key: result.id,
|
||||
label: type === "user" ? result.displayName : result.name,
|
||||
label: type === 'user' ? result.displayName : result.name,
|
||||
type,
|
||||
};
|
||||
filter.selectedItem = selectedItem;
|
||||
@ -154,7 +152,7 @@ class PureHome extends React.Component {
|
||||
fetchDefaultFiles = () => {
|
||||
const { isVisitor, fetchFiles, setIsLoading, setFirstLoad } = this.props;
|
||||
const filterObj = FilesFilter.getDefault();
|
||||
const folderId = isVisitor ? "@common" : filterObj.folder;
|
||||
const folderId = isVisitor ? '@common' : filterObj.folder;
|
||||
|
||||
fetchFiles(folderId).finally(() => {
|
||||
setIsLoading(false);
|
||||
@ -171,31 +169,31 @@ class PureHome extends React.Component {
|
||||
showOperationToast = (type, qty, title) => {
|
||||
const { t } = this.props;
|
||||
switch (type) {
|
||||
case "move":
|
||||
case 'move':
|
||||
if (qty > 1) {
|
||||
return toastr.success(
|
||||
<Trans t={t} i18nKey="MoveItems" ns="Home">
|
||||
{{ qty }} elements has been moved
|
||||
</Trans>
|
||||
</Trans>,
|
||||
);
|
||||
}
|
||||
return toastr.success(
|
||||
<Trans t={t} i18nKey="MoveItem" ns="Home">
|
||||
{{ title }} moved
|
||||
</Trans>
|
||||
</Trans>,
|
||||
);
|
||||
case "duplicate":
|
||||
case 'duplicate':
|
||||
if (qty > 1) {
|
||||
return toastr.success(
|
||||
<Trans t={t} i18nKey="CopyItems" ns="Home">
|
||||
{{ qty }} elements copied
|
||||
</Trans>
|
||||
</Trans>,
|
||||
);
|
||||
}
|
||||
return toastr.success(
|
||||
<Trans t={t} i18nKey="CopyItem" ns="Home">
|
||||
{{ title }} copied
|
||||
</Trans>
|
||||
</Trans>,
|
||||
);
|
||||
default:
|
||||
break;
|
||||
@ -213,8 +211,7 @@ class PureHome extends React.Component {
|
||||
} = this.props;
|
||||
setUploadPanelVisible(!uploadPanelVisible);
|
||||
|
||||
if (primaryProgressDataVisible && uploaded && converted)
|
||||
clearPrimaryProgressData();
|
||||
if (primaryProgressDataVisible && uploaded && converted) clearPrimaryProgressData();
|
||||
};
|
||||
componentDidUpdate(prevProps) {
|
||||
const {
|
||||
@ -227,15 +224,8 @@ class PureHome extends React.Component {
|
||||
if (this.props.isHeaderVisible !== prevProps.isHeaderVisible) {
|
||||
this.props.setHeaderVisible(this.props.isHeaderVisible);
|
||||
}
|
||||
if (
|
||||
isProgressFinished &&
|
||||
isProgressFinished !== prevProps.isProgressFinished
|
||||
) {
|
||||
this.showOperationToast(
|
||||
secondaryProgressDataStoreIcon,
|
||||
selectionLength,
|
||||
selectionTitle
|
||||
);
|
||||
if (isProgressFinished && isProgressFinished !== prevProps.isProgressFinished) {
|
||||
this.showOperationToast(secondaryProgressDataStoreIcon, selectionLength, selectionTitle);
|
||||
}
|
||||
}
|
||||
|
||||
@ -283,16 +273,13 @@ class PureHome extends React.Component {
|
||||
showSecondaryButtonAlert={secondaryProgressDataStoreAlert}
|
||||
viewAs={viewAs}
|
||||
hideAside={
|
||||
!!fileActionId ||
|
||||
primaryProgressDataVisible ||
|
||||
secondaryProgressDataStoreVisible
|
||||
!!fileActionId || primaryProgressDataVisible || secondaryProgressDataStoreVisible
|
||||
}
|
||||
isLoaded={!firstLoad}
|
||||
isHeaderVisible={isHeaderVisible}
|
||||
onOpenUploadPanel={this.showUploadPanel}
|
||||
firstLoad={firstLoad}
|
||||
dragging={dragging}
|
||||
>
|
||||
dragging={dragging}>
|
||||
<PageLayout.ArticleHeader>
|
||||
<ArticleHeaderContent />
|
||||
</PageLayout.ArticleHeader>
|
||||
@ -325,21 +312,11 @@ class PureHome extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
const Home = withTranslation("Home")(PureHome);
|
||||
const Home = withTranslation('Home')(PureHome);
|
||||
|
||||
export default inject(
|
||||
({
|
||||
auth,
|
||||
filesStore,
|
||||
uploadDataStore,
|
||||
treeFoldersStore,
|
||||
mediaViewerDataStore,
|
||||
formatsStore,
|
||||
}) => {
|
||||
const {
|
||||
secondaryProgressDataStore,
|
||||
primaryProgressDataStore,
|
||||
} = uploadDataStore;
|
||||
({ auth, filesStore, uploadDataStore, treeFoldersStore, mediaViewerDataStore, formatsStore }) => {
|
||||
const { secondaryProgressDataStore, primaryProgressDataStore } = uploadDataStore;
|
||||
const {
|
||||
firstLoad,
|
||||
setFirstLoad,
|
||||
@ -358,12 +335,7 @@ export default inject(
|
||||
const { mediaViewersFormatsStore } = formatsStore;
|
||||
|
||||
const { id } = fileActionStore;
|
||||
const {
|
||||
isRecycleBinFolder,
|
||||
isPrivacyFolder,
|
||||
expandedKeys,
|
||||
setExpandedKeys,
|
||||
} = treeFoldersStore;
|
||||
const { isRecycleBinFolder, isPrivacyFolder, expandedKeys, setExpandedKeys } = treeFoldersStore;
|
||||
|
||||
const {
|
||||
visible: primaryProgressDataVisible,
|
||||
@ -381,17 +353,10 @@ export default inject(
|
||||
isSecondaryProgressFinished: isProgressFinished,
|
||||
} = secondaryProgressDataStore;
|
||||
|
||||
const {
|
||||
setUploadPanelVisible,
|
||||
startUpload,
|
||||
uploaded,
|
||||
converted,
|
||||
} = uploadDataStore;
|
||||
const { setUploadPanelVisible, startUpload, uploaded, converted } = uploadDataStore;
|
||||
|
||||
const selectionLength = isProgressFinished ? selection.length : null;
|
||||
const selectionTitle = isProgressFinished
|
||||
? filesStore.selectionTitle
|
||||
: null;
|
||||
const selectionTitle = isProgressFinished ? filesStore.selectionTitle : null;
|
||||
|
||||
const { setToPreviewFile } = mediaViewerDataStore;
|
||||
if (!firstLoad) {
|
||||
@ -444,5 +409,5 @@ export default inject(
|
||||
mediaViewersFormatsStore,
|
||||
getFileInfo,
|
||||
};
|
||||
}
|
||||
},
|
||||
)(withRouter(observer(Home)));
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,4 @@
|
||||
import { makeAutoObservable } from "mobx";
|
||||
import { makeAutoObservable } from 'mobx';
|
||||
|
||||
class SelectedFolderStore {
|
||||
folders = null;
|
||||
@ -17,6 +17,7 @@ class SelectedFolderStore {
|
||||
updatedBy = null;
|
||||
rootFolderType = null;
|
||||
pathParts = null;
|
||||
navigationPath = null;
|
||||
providerItem = null;
|
||||
|
||||
constructor() {
|
||||
@ -44,6 +45,7 @@ class SelectedFolderStore {
|
||||
this.updatedBy = null;
|
||||
this.rootFolderType = null;
|
||||
this.pathParts = null;
|
||||
this.navigationPath = null;
|
||||
this.providerItem = null;
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user