addoed structure

This commit is contained in:
mushka 2022-02-08 15:11:31 +03:00
parent e16d75839a
commit be1277d8b4
11 changed files with 1866 additions and 1665 deletions

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,11 @@
import { inject, observer } from "mobx-react";
import React from "react";
const SubNotificationsBody = ({ children }) => {
console.log("SNB - ", children);
return <span>{children}</span>;
};
export default inject(() => {
return {};
})(observer(SubNotificationsBody));

View File

@ -0,0 +1,16 @@
import React from "react";
import styled from "styled-components";
const Notifications = ({ children }) => {
const StyledNotifications = styled.div`
height: 100%;
width: 400px;
background-color: red;
`;
console.log("N - ", children);
return <StyledNotifications>{children}</StyledNotifications>;
};
export default Notifications;

View File

@ -1,152 +1,165 @@
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`
height: 42px;
margin-right: 24px;
${NoUserSelect}
${isMobile &&
css`
height: 20px;
width: ${(props) => !props.isLoaded && "100%"};
import { desktop, tablet } from "@appserver/components/utils/device";
import classnames from "classnames";
import equal from "fast-deep-equal/react";
import PropTypes from "prop-types";
import React from "react";
import { isMobile } from "react-device-detect";
import { LayoutContextConsumer } from "studio/Layout/context";
import styled, { css } from "styled-components";
margin-top: 62px;
@media ${tablet} {
margin-top: 48px;
}
`}
const StyledSectionHeader = styled.div`
height: 42px;
margin-right: 24px;
${NoUserSelect}
${isMobile &&
css`
height: 20px;
width: ${(props) => !props.isLoaded && "100%"};
margin-top: 62px;
@media ${tablet} {
margin-top: 48px;
}
`}
@media ${desktop} {
${(props) =>
(props.viewAs === "table" || props.viewAs === "tile") &&
"margin-left: -4px"};
}
@media ${tablet} {
${(props) =>
props.viewAs !== "tablet" &&
css`
height: 49px;
.arrow-button {
svg {
width: 14px !important;
}
margin-right: 10px !important;
}
`}
}
@media ${tablet} {
margin-right: 16px;
}
.section-header {
height: 50px;
${isMobile &&
css`
max-width: calc(100vw - 32px);
width: 100%;
`}
${isMobile &&
css`
position: fixed;
top: 48px;
width: ${(props) =>
props.isArticlePinned ? `calc(100% - 272px)` : "100%"};
background-color: #fff;
z-index: 149;
padding-right: 16px;
`}
}
${isMobile &&
css`
.section-header,
.section-header--hidden {
&,
.group-button-menu-container > div:first-child {
transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
}
.group-button-menu-container {
padding-bottom: 0 !important;
> div:first-child {
top: ${(props) =>
!props.isSectionHeaderVisible ? "56px" : "0px"} !important;
@media ${desktop} {
${isMobile &&
css`
position: absolute;
`}
}
}
}
${(props) =>
(props.viewAs === "table" || props.viewAs === "tile") &&
"margin-left: -4px"};
}
@media ${tablet} {
${(props) =>
props.viewAs !== "tablet" &&
css`
height: 49px;
.arrow-button {
svg {
width: 14px !important;
}
margin-right: 10px !important;
}
`}
}
@media ${tablet} {
margin-right: 16px;
}
.section-header {
height: 50px;
${isMobile &&
css`
max-width: calc(100vw - 32px);
width: 100%;
`}
${isMobile &&
css`
position: fixed;
top: 48px;
width: ${(props) =>
props.isArticlePinned ? `calc(100% - 272px)` : "100%"};
background-color: #fff;
z-index: 149;
padding-right: 16px;
`}
}
`}
.section-header--hidden {
${isMobile &&
css`
top: -61px;
.section-header,
.section-header--hidden {
&,
.group-button-menu-container > div:first-child {
transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
}
.group-button-menu-container {
padding-bottom: 0 !important;
> div:first-child {
top: ${(props) =>
!props.isSectionHeaderVisible
? "56px"
: "0px"} !important;
@media ${desktop} {
${isMobile &&
css`
position: absolute;
`}
}
}
}
}
`}
}
.section-header--hidden {
${isMobile &&
css`
top: -61px;
`}
}
`;
class SectionHeader extends React.Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.focusRef = React.createRef();
}
this.focusRef = React.createRef();
}
shouldComponentUpdate(nextProps) {
return !equal(this.props, nextProps);
}
shouldComponentUpdate(nextProps) {
return !equal(this.props, nextProps);
}
render() {
//console.log("PageLayout SectionHeader render");
// eslint-disable-next-line react/prop-types
render() {
//console.log("PageLayout SectionHeader render");
// eslint-disable-next-line react/prop-types
const { isArticlePinned, isHeaderVisible, viewAs, ...rest } = this.props;
const {
isArticlePinned,
isHeaderVisible,
viewAs,
...rest
} = this.props;
return (
<LayoutContextConsumer>
{(value) => (
<StyledSectionHeader
isArticlePinned={isArticlePinned}
isSectionHeaderVisible={value.isVisible}
viewAs={viewAs}
>
<div
className={classnames("section-header hidingHeader", {
"section-header--hidden":
value.isVisible === undefined ? false : !value.isVisible,
})}
{...rest}
/>
</StyledSectionHeader>
)}
</LayoutContextConsumer>
);
}
return (
<LayoutContextConsumer>
{(value) => (
<StyledSectionHeader
isArticlePinned={isArticlePinned}
isSectionHeaderVisible={value.isVisible}
viewAs={viewAs}
>
<div
className={classnames(
"section-header hidingHeader",
{
"section-header--hidden":
value.isVisible === undefined
? false
: !value.isVisible,
}
)}
{...rest}
/>
</StyledSectionHeader>
)}
</LayoutContextConsumer>
);
}
}
SectionHeader.displayName = "SectionHeader";
SectionHeader.propTypes = {
isArticlePinned: PropTypes.bool,
isHeaderVisible: PropTypes.bool,
isArticlePinned: PropTypes.bool,
isHeaderVisible: PropTypes.bool,
};
export default SectionHeader;

View File

@ -0,0 +1,3 @@
<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 2.5H13.5C14.0523 2.5 14.5 2.94772 14.5 3.5V11.5C14.5 12.0523 14.0523 12.5 13.5 12.5H11.5V2.5ZM9 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5V11.5C2.5 12.0523 2.94772 12.5 3.5 12.5H9V2.5ZM17 1.5C17 0.671573 16.3284 0 15.5 0H14.5H2.5H1.5C0.671573 0 0 0.671573 0 1.5V2.88462V12.1154V13.5C0 14.3284 0.671573 15 1.5 15H2.5H14.5H15.5C16.3284 15 17 14.3284 17 13.5V12.1154V2.88462V1.5Z" fill="#A3A9AE"/>
</svg>

After

Width:  |  Height:  |  Size: 550 B

View File

@ -0,0 +1,12 @@
import { inject, observer } from "mobx-react";
import React from "react";
import { withTranslation } from "react-i18next";
import { withRouter } from "react-router";
const NotificationsBodyContent = () => {
return <div>NOTIFICATION BODY CONTENT</div>;
};
export default inject(({}) => {
return {};
})(withTranslation()(withRouter(observer(NotificationsBodyContent))));

View File

@ -0,0 +1 @@
export { default as NotificationsBodyContent } from "./Body";

View File

@ -1,447 +1,469 @@
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 {
ArticleBodyContent,
ArticleHeaderContent,
ArticleMainButtonContent,
} from "../../components/Article";
import {
SectionBodyContent,
SectionFilterContent,
SectionHeaderContent,
SectionPagingContent,
} from "./Section";
import PageLayout from "@appserver/common/components/PageLayout";
import { hideLoader, showLoader } from "@appserver/common/utils";
import toastr from "@appserver/components/toast/toastr";
import axios from "axios";
import { inject, observer } from "mobx-react";
import React from "react";
import { isMobile } from "react-device-detect";
import { Trans, withTranslation } from "react-i18next";
//import PropTypes from "prop-types";
import { withRouter } from "react-router";
import config from "../../../package.json";
import {
ArticleBodyContent,
ArticleHeaderContent,
ArticleMainButtonContent,
} from "../../components/Article";
import DragTooltip from "../../components/DragTooltip";
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 { NotificationsBodyContent } from "./Notifications";
import {
SectionBodyContent,
SectionFilterContent,
SectionHeaderContent,
SectionPagingContent,
} from "./Section";
class PureHome extends React.Component {
componentDidMount() {
const {
fetchFiles,
homepage,
setIsLoading,
setFirstLoad,
expandedKeys,
setExpandedKeys,
setToPreviewFile,
mediaViewersFormatsStore,
getFileInfo,
} = this.props;
componentDidMount() {
const {
fetchFiles,
homepage,
setIsLoading,
setFirstLoad,
expandedKeys,
setExpandedKeys,
setToPreviewFile,
mediaViewersFormatsStore,
getFileInfo,
} = this.props;
const reg = new RegExp(`${homepage}((/?)$|/filter)`, "gmi"); //TODO: Always find?
const match = window.location.pathname.match(reg);
let filterObj = null;
const reg = new RegExp(`${homepage}((/?)$|/filter)`, "gmi"); //TODO: Always find?
const match = window.location.pathname.match(reg);
let filterObj = null;
if (window.location.href.indexOf("/files/#preview") > 1) {
const pathname = window.location.href;
const fileId = pathname.slice(pathname.indexOf("#preview") + 9);
if (window.location.href.indexOf("/files/#preview") > 1) {
const pathname = window.location.href;
const fileId = pathname.slice(pathname.indexOf("#preview") + 9);
getFileInfo(fileId)
.then((data) => {
const canOpenPlayer = mediaViewersFormatsStore.isMediaOrImage(
data.fileExst
);
const file = { ...data, canOpenPlayer };
setToPreviewFile(file, true);
})
.catch((err) => {
toastr.error(err);
this.fetchDefaultFiles();
});
getFileInfo(fileId)
.then((data) => {
const canOpenPlayer = mediaViewersFormatsStore.isMediaOrImage(
data.fileExst
);
const file = { ...data, canOpenPlayer };
setToPreviewFile(file, true);
})
.catch((err) => {
toastr.error(err);
this.fetchDefaultFiles();
});
return;
}
return;
}
if (match && match.length > 0) {
filterObj = FilesFilter.getFilter(window.location);
if (match && match.length > 0) {
filterObj = FilesFilter.getFilter(window.location);
if (!filterObj) {
setIsLoading(true);
this.fetchDefaultFiles();
return;
}
}
if (!filterObj) return;
let dataObj = { filter: filterObj };
if (filterObj && filterObj.authorType) {
const authorType = filterObj.authorType;
const indexOfUnderscore = authorType.indexOf("_");
const type = authorType.slice(0, indexOfUnderscore);
const itemId = authorType.slice(indexOfUnderscore + 1);
if (itemId) {
dataObj = {
type,
itemId,
filter: filterObj,
};
} else {
filterObj.authorType = null;
dataObj = { filter: filterObj };
}
}
if (!dataObj) return;
const { filter, itemId, type } = dataObj;
const newFilter = filter ? filter.clone() : FilesFilter.getDefault();
const requests = [Promise.resolve(newFilter)];
if (type === "group") {
requests.push(getGroup(itemId));
} else if (type === "user") {
requests.push(getUserById(itemId));
}
if (!filterObj) {
setIsLoading(true);
this.fetchDefaultFiles();
return;
}
axios
.all(requests)
.catch((err) => {
Promise.resolve(FilesFilter.getDefault());
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 selectedItem = {
key: result.id,
label:
type === "user" ? result.displayName : result.name,
type,
};
filter.selectedItem = selectedItem;
}
if (filter) {
const folderId = filter.folder;
//console.log("filter", filter);
return fetchFiles(folderId, filter).then((data) => {
const pathParts = data.selectedFolder.pathParts;
const newExpandedKeys = createTreeFolders(
pathParts,
expandedKeys
);
setExpandedKeys(newExpandedKeys);
});
}
return Promise.resolve();
})
.finally(() => {
setIsLoading(false);
setFirstLoad(false);
});
}
if (!filterObj) return;
fetchDefaultFiles = () => {
const {
isVisitor,
fetchFiles,
setIsLoading,
setFirstLoad,
} = this.props;
const filterObj = FilesFilter.getDefault();
const folderId = isVisitor ? "@common" : filterObj.folder;
let dataObj = { filter: filterObj };
fetchFiles(folderId).finally(() => {
setIsLoading(false);
setFirstLoad(false);
});
};
if (filterObj && filterObj.authorType) {
const authorType = filterObj.authorType;
const indexOfUnderscore = authorType.indexOf("_");
const type = authorType.slice(0, indexOfUnderscore);
const itemId = authorType.slice(indexOfUnderscore + 1);
onDrop = (files, uploadToFolder) => {
const { t, startUpload, setDragging, dragging } = this.props;
dragging && setDragging(false);
startUpload(files, uploadToFolder, t);
};
if (itemId) {
dataObj = {
type,
itemId,
filter: filterObj,
};
} else {
filterObj.authorType = null;
dataObj = { filter: filterObj };
}
showOperationToast = (type, qty, title) => {
const { t } = this.props;
switch (type) {
case "move":
if (qty > 1) {
return toastr.success(
<Trans t={t} i18nKey="MoveItems" ns="Home">
{{ qty }} elements has been moved
</Trans>
);
}
return toastr.success(
<Trans t={t} i18nKey="MoveItem" ns="Home">
{{ title }} moved
</Trans>
);
case "duplicate":
if (qty > 1) {
return toastr.success(
<Trans t={t} i18nKey="CopyItems" ns="Home">
{{ qty }} elements copied
</Trans>
);
}
return toastr.success(
<Trans t={t} i18nKey="CopyItem" ns="Home">
{{ title }} copied
</Trans>
);
default:
break;
}
};
showUploadPanel = () => {
const {
uploaded,
converted,
uploadPanelVisible,
setUploadPanelVisible,
clearPrimaryProgressData,
primaryProgressDataVisible,
} = this.props;
setUploadPanelVisible(!uploadPanelVisible);
if (primaryProgressDataVisible && uploaded && converted)
clearPrimaryProgressData();
};
componentDidUpdate(prevProps) {
const {
isProgressFinished,
secondaryProgressDataStoreIcon,
selectionLength,
selectionTitle,
} = this.props;
if (this.props.isHeaderVisible !== prevProps.isHeaderVisible) {
this.props.setHeaderVisible(this.props.isHeaderVisible);
}
if (
isProgressFinished &&
isProgressFinished !== prevProps.isProgressFinished
) {
this.showOperationToast(
secondaryProgressDataStoreIcon,
selectionLength,
selectionTitle
);
}
}
if (!dataObj) return;
render() {
//console.log("Home render");
const {
viewAs,
fileActionId,
firstLoad,
isHeaderVisible,
isPrivacyFolder,
isRecycleBinFolder,
const { filter, itemId, type } = dataObj;
const newFilter = filter ? filter.clone() : FilesFilter.getDefault();
const requests = [Promise.resolve(newFilter)];
primaryProgressDataVisible,
primaryProgressDataPercent,
primaryProgressDataIcon,
primaryProgressDataAlert,
if (type === "group") {
requests.push(getGroup(itemId));
} else if (type === "user") {
requests.push(getUserById(itemId));
}
secondaryProgressDataStoreVisible,
secondaryProgressDataStorePercent,
secondaryProgressDataStoreIcon,
secondaryProgressDataStoreAlert,
setIsLoading(true);
dragging,
tReady,
} = this.props;
axios
.all(requests)
.catch((err) => {
Promise.resolve(FilesFilter.getDefault());
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 selectedItem = {
key: result.id,
label: type === "user" ? result.displayName : result.name,
type,
};
filter.selectedItem = selectedItem;
}
return (
<>
<MediaViewer />
<DragTooltip />
<PageLayout
dragging={dragging}
withBodyScroll
withBodyAutoFocus={!isMobile}
uploadFiles
onDrop={
isRecycleBinFolder || isPrivacyFolder
? null
: this.onDrop
}
setSelections={this.props.setSelections}
showPrimaryProgressBar={primaryProgressDataVisible}
primaryProgressBarValue={primaryProgressDataPercent}
primaryProgressBarIcon={primaryProgressDataIcon}
showPrimaryButtonAlert={primaryProgressDataAlert}
showSecondaryProgressBar={secondaryProgressDataStoreVisible}
secondaryProgressBarValue={
secondaryProgressDataStorePercent
}
secondaryProgressBarIcon={secondaryProgressDataStoreIcon}
showSecondaryButtonAlert={secondaryProgressDataStoreAlert}
viewAs={viewAs}
hideAside={
!!fileActionId ||
primaryProgressDataVisible ||
secondaryProgressDataStoreVisible //TODO: use hideArticle action
}
isLoaded={!firstLoad}
isHeaderVisible={isHeaderVisible}
onOpenUploadPanel={this.showUploadPanel}
firstLoad={firstLoad}
>
<PageLayout.ArticleHeader>
<ArticleHeaderContent />
</PageLayout.ArticleHeader>
if (filter) {
const folderId = filter.folder;
//console.log("filter", filter);
<PageLayout.ArticleMainButton>
<ArticleMainButtonContent />
</PageLayout.ArticleMainButton>
return fetchFiles(folderId, filter).then((data) => {
const pathParts = data.selectedFolder.pathParts;
const newExpandedKeys = createTreeFolders(pathParts, expandedKeys);
setExpandedKeys(newExpandedKeys);
});
}
<PageLayout.ArticleBody>
<ArticleBodyContent onTreeDrop={this.onDrop} />
</PageLayout.ArticleBody>
return Promise.resolve();
})
.finally(() => {
setIsLoading(false);
setFirstLoad(false);
});
}
<PageLayout.SectionHeader>
<SectionHeaderContent />
</PageLayout.SectionHeader>
fetchDefaultFiles = () => {
const { isVisitor, fetchFiles, setIsLoading, setFirstLoad } = this.props;
const filterObj = FilesFilter.getDefault();
const folderId = isVisitor ? "@common" : filterObj.folder;
<PageLayout.SectionFilter>
<SectionFilterContent />
</PageLayout.SectionFilter>
fetchFiles(folderId).finally(() => {
setIsLoading(false);
setFirstLoad(false);
});
};
<PageLayout.SectionBody>
<SectionBodyContent />
</PageLayout.SectionBody>
onDrop = (files, uploadToFolder) => {
const { t, startUpload, setDragging, dragging } = this.props;
dragging && setDragging(false);
startUpload(files, uploadToFolder, t);
};
<PageLayout.NotificationsBody>
<NotificationsBodyContent />
</PageLayout.NotificationsBody>
showOperationToast = (type, qty, title) => {
const { t } = this.props;
switch (type) {
case "move":
if (qty > 1) {
return toastr.success(
<Trans t={t} i18nKey="MoveItems" ns="Home">
{{ qty }} elements has been moved
</Trans>
);
}
return toastr.success(
<Trans t={t} i18nKey="MoveItem" ns="Home">
{{ title }} moved
</Trans>
<PageLayout.SectionPaging>
<SectionPagingContent tReady={tReady} />
</PageLayout.SectionPaging>
</PageLayout>
</>
);
case "duplicate":
if (qty > 1) {
return toastr.success(
<Trans t={t} i18nKey="CopyItems" ns="Home">
{{ qty }} elements copied
</Trans>
);
}
return toastr.success(
<Trans t={t} i18nKey="CopyItem" ns="Home">
{{ title }} copied
</Trans>
);
default:
break;
}
};
showUploadPanel = () => {
const {
uploaded,
converted,
uploadPanelVisible,
setUploadPanelVisible,
clearPrimaryProgressData,
primaryProgressDataVisible,
} = this.props;
setUploadPanelVisible(!uploadPanelVisible);
if (primaryProgressDataVisible && uploaded && converted)
clearPrimaryProgressData();
};
componentDidUpdate(prevProps) {
const {
isProgressFinished,
secondaryProgressDataStoreIcon,
selectionLength,
selectionTitle,
} = this.props;
if (this.props.isHeaderVisible !== prevProps.isHeaderVisible) {
this.props.setHeaderVisible(this.props.isHeaderVisible);
}
if (
isProgressFinished &&
isProgressFinished !== prevProps.isProgressFinished
) {
this.showOperationToast(
secondaryProgressDataStoreIcon,
selectionLength,
selectionTitle
);
}
}
render() {
//console.log("Home render");
const {
viewAs,
fileActionId,
firstLoad,
isHeaderVisible,
isPrivacyFolder,
isRecycleBinFolder,
primaryProgressDataVisible,
primaryProgressDataPercent,
primaryProgressDataIcon,
primaryProgressDataAlert,
secondaryProgressDataStoreVisible,
secondaryProgressDataStorePercent,
secondaryProgressDataStoreIcon,
secondaryProgressDataStoreAlert,
dragging,
tReady,
} = this.props;
return (
<>
<MediaViewer />
<DragTooltip />
<PageLayout
dragging={dragging}
withBodyScroll
withBodyAutoFocus={!isMobile}
uploadFiles
onDrop={isRecycleBinFolder || isPrivacyFolder ? null : this.onDrop}
setSelections={this.props.setSelections}
showPrimaryProgressBar={primaryProgressDataVisible}
primaryProgressBarValue={primaryProgressDataPercent}
primaryProgressBarIcon={primaryProgressDataIcon}
showPrimaryButtonAlert={primaryProgressDataAlert}
showSecondaryProgressBar={secondaryProgressDataStoreVisible}
secondaryProgressBarValue={secondaryProgressDataStorePercent}
secondaryProgressBarIcon={secondaryProgressDataStoreIcon}
showSecondaryButtonAlert={secondaryProgressDataStoreAlert}
viewAs={viewAs}
hideAside={
!!fileActionId ||
primaryProgressDataVisible ||
secondaryProgressDataStoreVisible //TODO: use hideArticle action
}
isLoaded={!firstLoad}
isHeaderVisible={isHeaderVisible}
onOpenUploadPanel={this.showUploadPanel}
firstLoad={firstLoad}
>
<PageLayout.ArticleHeader>
<ArticleHeaderContent />
</PageLayout.ArticleHeader>
<PageLayout.ArticleMainButton>
<ArticleMainButtonContent />
</PageLayout.ArticleMainButton>
<PageLayout.ArticleBody>
<ArticleBodyContent onTreeDrop={this.onDrop} />
</PageLayout.ArticleBody>
<PageLayout.SectionHeader>
<SectionHeaderContent />
</PageLayout.SectionHeader>
<PageLayout.SectionFilter>
<SectionFilterContent />
</PageLayout.SectionFilter>
<PageLayout.SectionBody>
<SectionBodyContent />
</PageLayout.SectionBody>
<PageLayout.SectionPaging>
<SectionPagingContent tReady={tReady} />
</PageLayout.SectionPaging>
</PageLayout>
</>
);
}
}
const Home = withTranslation("Home")(PureHome);
export default inject(
({
auth,
filesStore,
uploadDataStore,
treeFoldersStore,
mediaViewerDataStore,
formatsStore,
}) => {
const {
secondaryProgressDataStore,
primaryProgressDataStore,
} = uploadDataStore;
const {
firstLoad,
setFirstLoad,
fetchFiles,
fileActionStore,
selection,
setSelections,
dragging,
setDragging,
setIsLoading,
isLoading,
viewAs,
getFileInfo,
} = filesStore;
({
auth,
filesStore,
uploadDataStore,
treeFoldersStore,
mediaViewerDataStore,
formatsStore,
}) => {
const {
secondaryProgressDataStore,
primaryProgressDataStore,
} = uploadDataStore;
const {
firstLoad,
setFirstLoad,
fetchFiles,
fileActionStore,
selection,
setSelections,
dragging,
setDragging,
setIsLoading,
isLoading,
viewAs,
getFileInfo,
} = filesStore;
const { mediaViewersFormatsStore } = formatsStore;
const { mediaViewersFormatsStore } = formatsStore;
const { id } = fileActionStore;
const {
isRecycleBinFolder,
isPrivacyFolder,
expandedKeys,
setExpandedKeys,
} = treeFoldersStore;
const { id } = fileActionStore;
const {
isRecycleBinFolder,
isPrivacyFolder,
expandedKeys,
setExpandedKeys,
} = treeFoldersStore;
const {
visible: primaryProgressDataVisible,
percent: primaryProgressDataPercent,
icon: primaryProgressDataIcon,
alert: primaryProgressDataAlert,
clearPrimaryProgressData,
} = primaryProgressDataStore;
const {
visible: primaryProgressDataVisible,
percent: primaryProgressDataPercent,
icon: primaryProgressDataIcon,
alert: primaryProgressDataAlert,
clearPrimaryProgressData,
} = primaryProgressDataStore;
const {
visible: secondaryProgressDataStoreVisible,
percent: secondaryProgressDataStorePercent,
icon: secondaryProgressDataStoreIcon,
alert: secondaryProgressDataStoreAlert,
isSecondaryProgressFinished: isProgressFinished,
} = secondaryProgressDataStore;
const {
visible: secondaryProgressDataStoreVisible,
percent: secondaryProgressDataStorePercent,
icon: secondaryProgressDataStoreIcon,
alert: secondaryProgressDataStoreAlert,
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 selectionLength = isProgressFinished ? selection.length : null;
const selectionTitle = isProgressFinished
? filesStore.selectionTitle
: null;
const { setToPreviewFile } = mediaViewerDataStore;
if (!firstLoad) {
if (isLoading) {
showLoader();
} else {
hideLoader();
}
const { setToPreviewFile } = mediaViewerDataStore;
if (!firstLoad) {
if (isLoading) {
showLoader();
} else {
hideLoader();
}
}
return {
homepage: config.homepage,
firstLoad,
dragging,
fileActionId: id,
viewAs,
uploaded,
converted,
isRecycleBinFolder,
isPrivacyFolder,
isVisitor: auth.userStore.user.isVisitor,
expandedKeys,
primaryProgressDataVisible,
primaryProgressDataPercent,
primaryProgressDataIcon,
primaryProgressDataAlert,
clearPrimaryProgressData,
secondaryProgressDataStoreVisible,
secondaryProgressDataStorePercent,
secondaryProgressDataStoreIcon,
secondaryProgressDataStoreAlert,
selectionLength,
isProgressFinished,
selectionTitle,
setExpandedKeys,
setFirstLoad,
setDragging,
setIsLoading,
fetchFiles,
setUploadPanelVisible,
setSelections,
startUpload,
isHeaderVisible: auth.settingsStore.isHeaderVisible,
setHeaderVisible: auth.settingsStore.setHeaderVisible,
setToPreviewFile,
mediaViewersFormatsStore,
getFileInfo,
};
}
return {
homepage: config.homepage,
firstLoad,
dragging,
fileActionId: id,
viewAs,
uploaded,
converted,
isRecycleBinFolder,
isPrivacyFolder,
isVisitor: auth.userStore.user.isVisitor,
expandedKeys,
primaryProgressDataVisible,
primaryProgressDataPercent,
primaryProgressDataIcon,
primaryProgressDataAlert,
clearPrimaryProgressData,
secondaryProgressDataStoreVisible,
secondaryProgressDataStorePercent,
secondaryProgressDataStoreIcon,
secondaryProgressDataStoreAlert,
selectionLength,
isProgressFinished,
selectionTitle,
setExpandedKeys,
setFirstLoad,
setDragging,
setIsLoading,
fetchFiles,
setUploadPanelVisible,
setSelections,
startUpload,
isHeaderVisible: auth.settingsStore.isHeaderVisible,
setHeaderVisible: auth.settingsStore.setHeaderVisible,
setToPreviewFile,
mediaViewersFormatsStore,
getFileInfo,
};
}
)(withRouter(observer(Home)));

View File

@ -0,0 +1,15 @@
import { makeAutoObservable } from "mobx";
class NotificationsStore {
isVisible = false;
constructor() {
makeAutoObservable(this);
}
toggleIsVisible = () => {
isVisible = !this.isVisible;
};
}
export default NotificationsStore;

View File

@ -1,43 +1,44 @@
import FilesStore from "./FilesStore";
import fileActionStore from "./FileActionStore";
import selectedFolderStore from "./SelectedFolderStore";
import TreeFoldersStore from "./TreeFoldersStore";
import thirdPartyStore from "./ThirdPartyStore";
import SettingsStore from "./SettingsStore";
import FilesActionsStore from "./FilesActionsStore";
import FormatsStore from "./FormatsStore";
import iconFormatsStore from "./IconFormatsStore";
import mediaViewersFormatsStore from "./MediaViewersFormatsStore";
import docserviceStore from "./DocserviceStore";
import MediaViewerDataStore from "./MediaViewerDataStore";
import UploadDataStore from "./UploadDataStore";
import SecondaryProgressDataStore from "./SecondaryProgressDataStore";
import PrimaryProgressDataStore from "./PrimaryProgressDataStore";
import VersionHistoryStore from "./VersionHistoryStore";
import DialogsStore from "./DialogsStore";
import selectedFilesStore from "./SelectedFilesStore";
import store from "studio/store";
import DialogsStore from "./DialogsStore";
import docserviceStore from "./DocserviceStore";
import fileActionStore from "./FileActionStore";
import FilesActionsStore from "./FilesActionsStore";
import FilesStore from "./FilesStore";
import FormatsStore from "./FormatsStore";
import iconFormatsStore from "./IconFormatsStore";
import MediaViewerDataStore from "./MediaViewerDataStore";
import mediaViewersFormatsStore from "./MediaViewersFormatsStore";
import NotificationsStore from "./NotificationsStore";
import PrimaryProgressDataStore from "./PrimaryProgressDataStore";
import SecondaryProgressDataStore from "./SecondaryProgressDataStore";
import selectedFilesStore from "./SelectedFilesStore";
import selectedFolderStore from "./SelectedFolderStore";
import SettingsStore from "./SettingsStore";
import thirdPartyStore from "./ThirdPartyStore";
import TreeFoldersStore from "./TreeFoldersStore";
import UploadDataStore from "./UploadDataStore";
import VersionHistoryStore from "./VersionHistoryStore";
const formatsStore = new FormatsStore(
iconFormatsStore,
mediaViewersFormatsStore,
docserviceStore
iconFormatsStore,
mediaViewersFormatsStore,
docserviceStore
);
const treeFoldersStore = new TreeFoldersStore(selectedFolderStore);
const settingsStore = new SettingsStore(thirdPartyStore, treeFoldersStore);
const filesStore = new FilesStore(
store.auth,
store.auth.settingsStore,
store.auth.userStore,
fileActionStore,
selectedFolderStore,
treeFoldersStore,
formatsStore,
settingsStore,
selectedFilesStore
store.auth,
store.auth.settingsStore,
store.auth.userStore,
fileActionStore,
selectedFolderStore,
treeFoldersStore,
formatsStore,
settingsStore,
selectedFilesStore
);
const mediaViewerDataStore = new MediaViewerDataStore(filesStore, formatsStore);
@ -45,46 +46,49 @@ const secondaryProgressDataStore = new SecondaryProgressDataStore();
const primaryProgressDataStore = new PrimaryProgressDataStore();
const dialogsStore = new DialogsStore(
treeFoldersStore,
filesStore,
selectedFolderStore
treeFoldersStore,
filesStore,
selectedFolderStore
);
const uploadDataStore = new UploadDataStore(
formatsStore,
treeFoldersStore,
selectedFolderStore,
filesStore,
secondaryProgressDataStore,
primaryProgressDataStore,
dialogsStore,
settingsStore
formatsStore,
treeFoldersStore,
selectedFolderStore,
filesStore,
secondaryProgressDataStore,
primaryProgressDataStore,
dialogsStore,
settingsStore
);
const filesActionsStore = new FilesActionsStore(
store.auth,
uploadDataStore,
treeFoldersStore,
filesStore,
selectedFolderStore,
settingsStore,
dialogsStore,
mediaViewerDataStore
store.auth,
uploadDataStore,
treeFoldersStore,
filesStore,
selectedFolderStore,
settingsStore,
dialogsStore,
mediaViewerDataStore
);
const versionHistoryStore = new VersionHistoryStore(filesStore);
const notificationsStore = new NotificationsStore();
//const selectedFilesStore = new SelectedFilesStore(selectedFilesStore);
const stores = {
filesStore,
settingsStore,
mediaViewerDataStore,
formatsStore,
versionHistoryStore,
uploadDataStore,
dialogsStore,
treeFoldersStore,
selectedFolderStore,
filesActionsStore,
selectedFilesStore,
filesStore,
settingsStore,
mediaViewerDataStore,
formatsStore,
versionHistoryStore,
uploadDataStore,
dialogsStore,
treeFoldersStore,
selectedFolderStore,
filesActionsStore,
selectedFilesStore,
notificationsStore,
};
export default stores;