Web: Files: added FileLifetime block

This commit is contained in:
Nikita Gopienko 2023-09-14 15:44:06 +03:00
parent 920e634322
commit 7a3cb28683
4 changed files with 145 additions and 8 deletions

View File

@ -34,5 +34,6 @@
"RestrictCopyAndDownload": "Restrict copy and download",
"RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.",
"AddWatermarksToDocuments": "Add watermarks to documents",
"AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced."
"AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced.",
"FilesOlderThan": "Files older than:"
}

View File

@ -0,0 +1,114 @@
import React, { useState } from "react";
import styled from "styled-components";
import Text from "@docspace/components/text";
import TextInput from "@docspace/components/text-input";
import ComboBox from "@docspace/components/combobox";
const StyledFileLifetime = styled.div`
margin-top: 12px;
.virtual-data-room_file-lifetime_body {
display: flex;
align-items: center;
.virtual-data-room_file-lifetime_input {
min-width: 150px;
margin-right: 4px;
}
.virtual-data-room_file-lifetime_combo-box {
margin-right: 16px;
width: 90px;
}
}
`;
const FileLifetime = ({ t }) => {
const [inputValue, setInputValue] = useState("");
const onChange = (e) => {
// /^(?:[1-9][0-9]*|0)$/
if (e.target.value && !/^(?:[1-9][0-9]*)$/.test(e.target.value)) return;
setInputValue(e.target.value);
};
const isLoading = false;
const onSelectDate = (option) => {
console.log("onDateSelect", option);
};
const onSelectDelete = (option) => {
console.log("onSelectDelete", option);
};
const dateOptions = [
{
key: 1,
label: t("Common:Days"),
"data-type": 1,
},
{
key: 2,
label: t("Common:Months"),
"data-type": 2,
},
{
key: 3,
label: t("Common:Years"),
"data-type": 3,
},
];
const deleteOptions = [
{
key: 1,
label: t("Common:MoveToTrash"),
"data-type": 1,
},
{
key: 2,
label: t("Common:DeletePermanently"),
"data-type": 2,
},
];
return (
<StyledFileLifetime className="virtual-data-room_file-lifetime">
<Text fontWeight={600} fontSize="13px">
{t("FilesOlderThan")}
</Text>
<div className="virtual-data-room_file-lifetime_body">
<TextInput
className="virtual-data-room_file-lifetime_input"
isAutoFocussed={true}
isDisabled={isLoading}
tabIndex={1}
value={inputValue}
onChange={onChange}
scale
/>
<ComboBox
className="virtual-data-room_file-lifetime_combo-box"
options={dateOptions}
isDisabled={isLoading}
showDisabledItems
selectedOption={dateOptions[0]}
scaledOptions={true}
onSelect={onSelectDate}
/>
<ComboBox
options={deleteOptions}
isDisabled={isLoading}
showDisabledItems
selectedOption={deleteOptions[0]}
scale
onSelect={onSelectDelete}
/>
</div>
</StyledFileLifetime>
);
};
export default FileLifetime;

View File

@ -3,6 +3,8 @@ import { Trans } from "react-i18next";
import styled from "styled-components";
import Text from "@docspace/components/text";
import ToggleButton from "@docspace/components/toggle-button";
import FileLifetime from "./FileLifetime";
import { mobile } from "@docspace/components/utils/device";
const StyledVirtualDataRoomBlock = styled.div`
.virtual-data-room-block {
@ -20,12 +22,25 @@ const StyledVirtualDataRoomBlock = styled.div`
}
}
.virtual-data-room-block_description {
max-width: 420px;
@media ${mobile} {
max-width: 315px;
}
color: ${({ theme }) => theme.editLink.text.color};
}
}
`;
const Block = ({ headerText, bodyText, onChange, isDisabled, isChecked }) => {
const Block = ({
headerText,
bodyText,
onChange,
isDisabled,
isChecked,
children,
}) => {
return (
<div className="virtual-data-room-block">
<div className="virtual-data-room-block_header">
@ -47,7 +62,7 @@ const Block = ({ headerText, bodyText, onChange, isDisabled, isChecked }) => {
{bodyText}
</Text>
{isChecked && (
<div className="virtual-data-room-block_content">Content</div>
<div className="virtual-data-room-block_content">{children}</div>
)}
</div>
);
@ -86,14 +101,16 @@ const VirtualDataRoomBlock = ({ t }) => {
onChange={onChangeAutomaticIndexing}
isDisabled={false}
isChecked={automaticIndexingChecked}
/>
></Block>
<Block
headerText={t("FileLifetime")}
bodyText={t("FileLifetimeDescription")}
onChange={onChangeFileLifetime}
isDisabled={false}
isChecked={fileLifetimeChecked}
/>
>
<FileLifetime t={t} />
</Block>
<Block
headerText={t("RestrictCopyAndDownload")}
bodyText={
@ -105,14 +122,14 @@ const VirtualDataRoomBlock = ({ t }) => {
onChange={onChangeRestrictCopyAndDownload}
isDisabled={false}
isChecked={copyAndDownloadChecked}
/>
></Block>
<Block
headerText={t("AddWatermarksToDocuments")}
bodyText={t("AddWatermarksToDocumentsDescription")}
onChange={onChangeAddWatermarksToDocuments}
isDisabled={false}
isChecked={watermarksChecked}
/>
></Block>
</StyledVirtualDataRoomBlock>
);
};

View File

@ -284,5 +284,10 @@
"WantToContinue": "Are you sure you want to continue?",
"Warning": "Warning",
"Website": "Website",
"Yesterday": "Yesterday"
"Yesterday": "Yesterday",
"Days": "Days",
"Months": "Months",
"Years": "Years",
"MoveToTrash": "Move to trash",
"DeletePermanently": "Delete permanently"
}