Web: Files: added lifetime dialog
This commit is contained in:
parent
d98a127963
commit
119ba72c1a
@ -178,5 +178,7 @@
|
||||
"WithSubfolders": "With subfolders",
|
||||
"YouLeftTheRoom": "You have left the room",
|
||||
"RoomFilesLifetime": "The file lifetime is set to {{days}} days in this room",
|
||||
"FileWillBeDeleted": "The file will be deleted {{date}}"
|
||||
"FileWillBeDeleted": "The file will be deleted {{date}}",
|
||||
"LifetimeDialogDescription": "Lifetime countdown begins at the file creation date. Some files in this room exceed the proposed lifetime and will be deleted once you enable the setting.",
|
||||
"LifetimeDialogDescriptionHeader": "Older files with exceeded lifetime will be deleted"
|
||||
}
|
||||
|
@ -42,6 +42,7 @@ import FilesSelector from "../FilesSelector";
|
||||
import { FilesSelectorFilterTypes } from "@docspace/common/constants";
|
||||
import LeaveRoomDialog from "../dialogs/LeaveRoomDialog";
|
||||
import ChangeRoomOwnerPanel from "../panels/ChangeRoomOwnerPanel";
|
||||
import LifetimeDialog from "../dialogs/LifetimeDialog";
|
||||
|
||||
const Panels = (props) => {
|
||||
const {
|
||||
@ -56,6 +57,7 @@ const Panels = (props) => {
|
||||
deleteThirdPartyDialogVisible,
|
||||
versionHistoryPanelVisible,
|
||||
deleteDialogVisible,
|
||||
lifetimeDialogVisible,
|
||||
downloadDialogVisible,
|
||||
emptyTrashDialogVisible,
|
||||
newFilesPanelVisible,
|
||||
@ -141,6 +143,7 @@ const Panels = (props) => {
|
||||
<VersionHistoryPanel key="version-history-panel" />
|
||||
),
|
||||
deleteDialogVisible && <DeleteDialog key="delete-dialog" />,
|
||||
lifetimeDialogVisible && <LifetimeDialog key="delete-dialog" />,
|
||||
emptyTrashDialogVisible && <EmptyTrashDialog key="empty-trash-dialog" />,
|
||||
downloadDialogVisible && <DownloadDialog key="download-dialog" />,
|
||||
|
||||
@ -222,6 +225,7 @@ export default inject(
|
||||
connectDialogVisible,
|
||||
deleteThirdPartyDialogVisible,
|
||||
deleteDialogVisible,
|
||||
lifetimeDialogVisible,
|
||||
downloadDialogVisible,
|
||||
emptyTrashDialogVisible,
|
||||
newFilesPanelVisible,
|
||||
@ -280,6 +284,7 @@ export default inject(
|
||||
deleteThirdPartyDialogVisible,
|
||||
versionHistoryPanelVisible,
|
||||
deleteDialogVisible,
|
||||
lifetimeDialogVisible,
|
||||
downloadDialogVisible,
|
||||
emptyTrashDialogVisible,
|
||||
newFilesPanelVisible,
|
||||
|
@ -0,0 +1,46 @@
|
||||
import ModalDialog from "@docspace/components/modal-dialog";
|
||||
import { tablet } from "@docspace/components/utils/device";
|
||||
import styled from "styled-components";
|
||||
import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
|
||||
|
||||
const StyledLifetimeDialog = styled(ModalDialog)`
|
||||
.modal-dialog-content-body {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.modal-dialog-aside-header {
|
||||
margin: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 -24px 0 -16px", theme.interfaceDirection)};
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 0 0 16px", theme.interfaceDirection)};
|
||||
}
|
||||
|
||||
.modal-dialog-aside-footer {
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 32px;`
|
||||
: `padding-right: 32px;`}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.button-dialog-accept {
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button-dialog {
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
`;
|
||||
|
||||
export { StyledLifetimeDialog };
|
@ -0,0 +1,92 @@
|
||||
import { useEffect } from "react";
|
||||
import ModalDialog from "@docspace/components/modal-dialog";
|
||||
import { StyledLifetimeDialog } from "./StyledLifetimeDialog";
|
||||
import Button from "@docspace/components/button";
|
||||
import Text from "@docspace/components/text";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
const LifetimeDialogComponent = (props) => {
|
||||
const { t, setLifetimeDialogVisible, visible, tReady } = props;
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("keyup", onKeyUp, false);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keyup", onKeyUp, false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onKeyUp = (e) => {
|
||||
if (e.keyCode === 27) onClose();
|
||||
if (e.keyCode === 13 || e.which === 13) onDeleteAction();
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
setLifetimeDialogVisible(false);
|
||||
};
|
||||
|
||||
const onAcceptClick = () => {
|
||||
console.log("onAcceptClick");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const onDeleteAction = () => {
|
||||
onAcceptClick();
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledLifetimeDialog
|
||||
isLoading={!tReady}
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
>
|
||||
<ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<div className="modal-dialog-content-body">
|
||||
<Text fontWeight={600} fontSize="13px" noSelect>
|
||||
{t("Files:LifetimeDialogDescriptionHeader")}
|
||||
</Text>
|
||||
<Text fontSize="13px" noSelect>
|
||||
{t("Files:LifetimeDialogDescription")}
|
||||
</Text>
|
||||
</div>
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer>
|
||||
<Button
|
||||
id="delete-file-modal_submit"
|
||||
key="OkButton"
|
||||
label={t("Common:OKButton")}
|
||||
size="normal"
|
||||
primary
|
||||
scale
|
||||
onClick={onDeleteAction}
|
||||
// isDisabled={!selection.length}
|
||||
/>
|
||||
<Button
|
||||
id="delete-file-modal_cancel"
|
||||
key="CancelButton"
|
||||
label={t("Common:CancelButton")}
|
||||
size="normal"
|
||||
scale
|
||||
onClick={onClose}
|
||||
/>
|
||||
</ModalDialog.Footer>
|
||||
</StyledLifetimeDialog>
|
||||
);
|
||||
};
|
||||
|
||||
const LifetimeDialog = withTranslation(["Common", "Files"])(
|
||||
LifetimeDialogComponent
|
||||
);
|
||||
|
||||
export default inject(({ dialogsStore }) => {
|
||||
const { lifetimeDialogVisible: visible, setLifetimeDialogVisible } =
|
||||
dialogsStore;
|
||||
|
||||
return {
|
||||
visible,
|
||||
setLifetimeDialogVisible,
|
||||
};
|
||||
})(observer(LifetimeDialog));
|
@ -20,6 +20,7 @@ class DialogsStore {
|
||||
connectDialogVisible = false;
|
||||
thirdPartyMoveDialogVisible = false;
|
||||
deleteDialogVisible = false;
|
||||
lifetimeDialogVisible = false;
|
||||
downloadDialogVisible = false;
|
||||
emptyTrashDialogVisible = false;
|
||||
newFilesPanelVisible = false;
|
||||
@ -198,6 +199,10 @@ class DialogsStore {
|
||||
this.deleteDialogVisible = deleteDialogVisible;
|
||||
};
|
||||
|
||||
setLifetimeDialogVisible = (lifetimeDialogVisible) => {
|
||||
this.lifetimeDialogVisible = lifetimeDialogVisible;
|
||||
};
|
||||
|
||||
setEventDialogVisible = (eventDialogVisible) => {
|
||||
this.eventDialogVisible = eventDialogVisible;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user