Web: Files: Added radio/checkbox, added selecting file and save button.
This commit is contained in:
parent
e47ecb1767
commit
e822857eb5
@ -10,6 +10,7 @@ import FilesListBody from "./filesListBody";
|
||||
import Aside from "@appserver/components/aside";
|
||||
import Heading from "@appserver/components/heading";
|
||||
import Backdrop from "@appserver/components/backdrop";
|
||||
import Button from "@appserver/components/button";
|
||||
const DISPLAY_TYPE = "aside";
|
||||
const SelectFileDialogAsideView = ({
|
||||
t,
|
||||
@ -32,8 +33,8 @@ const SelectFileDialogAsideView = ({
|
||||
selectedFolder,
|
||||
header,
|
||||
loadingText,
|
||||
selectedFile,
|
||||
}) => {
|
||||
console.log("isLoadingData", isLoadingData, "selectedFolder", selectedFolder);
|
||||
return (
|
||||
<StyledAsidePanel visible={isPanelVisible}>
|
||||
<Backdrop
|
||||
@ -80,10 +81,28 @@ const SelectFileDialogAsideView = ({
|
||||
selectedFolder={selectedFolder}
|
||||
displayType={DISPLAY_TYPE}
|
||||
loadingText={loadingText}
|
||||
selectedFile={selectedFile}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="select-file-dialog-aside_buttons">
|
||||
<Button
|
||||
className="select-file-dialog-buttons-save"
|
||||
primary
|
||||
size="medium"
|
||||
label={t("Common:SaveButton")}
|
||||
tabIndex={1}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<Button
|
||||
primary
|
||||
size="medium"
|
||||
label={t("Common:CloseButton")}
|
||||
tabIndex={1}
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
</StyledSelectFilePanel>
|
||||
</Aside>
|
||||
</StyledAsidePanel>
|
||||
|
@ -19,9 +19,10 @@ const FilesListBody = ({
|
||||
viewer,
|
||||
listHeight,
|
||||
needRowSelection,
|
||||
emptyFilesList,
|
||||
loadingText,
|
||||
selectedFolder,
|
||||
isMultiSelect,
|
||||
selectedFile,
|
||||
}) => {
|
||||
const { t } = useTranslation(["SelectFile", "Common"]);
|
||||
const filesListRef = useRef(null);
|
||||
@ -66,6 +67,13 @@ const FilesListBody = ({
|
||||
},
|
||||
[loadingText]
|
||||
);
|
||||
const isFileChecked = useCallback(
|
||||
(file) => {
|
||||
const checked = selectedFile ? file.id === selectedFile.id : false;
|
||||
return checked;
|
||||
},
|
||||
[selectedFile]
|
||||
);
|
||||
const Item = useCallback(
|
||||
({ index, style }) => {
|
||||
const isLoaded = isItemLoaded(index);
|
||||
@ -87,6 +95,8 @@ const FilesListBody = ({
|
||||
((viewer.id === file.createdBy.id && t("Common:MeLabel")) ||
|
||||
file.createdBy.displayName);
|
||||
|
||||
const isChecked = isFileChecked(file);
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<ListRow
|
||||
@ -96,6 +106,8 @@ const FilesListBody = ({
|
||||
onSelectFile={onSelectFile}
|
||||
fileName={modifyFileName}
|
||||
fileExst={fileExst}
|
||||
isMultiSelect={isMultiSelect}
|
||||
isChecked={isChecked}
|
||||
>
|
||||
<Text data-index={index} className="files-list_file-owner">
|
||||
{fileOwner}
|
||||
@ -104,7 +116,7 @@ const FilesListBody = ({
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[filesList, renderLoader]
|
||||
[filesList, selectedFile, renderLoader]
|
||||
);
|
||||
return (
|
||||
<>
|
||||
@ -147,6 +159,7 @@ const FilesListBody = ({
|
||||
};
|
||||
FilesListBody.defaultProps = {
|
||||
listHeight: 300,
|
||||
isMultiSelect: false,
|
||||
};
|
||||
export default inject(({ auth }) => {
|
||||
const { user } = auth.userStore;
|
||||
|
@ -26,7 +26,6 @@ class SelectFileDialogBody extends React.Component {
|
||||
defaultFileName: "",
|
||||
filesList: [],
|
||||
width: window.innerWidth,
|
||||
isChecked: false,
|
||||
hasNextPage: true,
|
||||
isNextPageLoading: false,
|
||||
displayType: this.getDisplayType(),
|
||||
@ -119,20 +118,18 @@ class SelectFileDialogBody extends React.Component {
|
||||
};
|
||||
|
||||
onSelectFile = (e) => {
|
||||
const { onSetFileName, onClose } = this.props;
|
||||
const { onSetFileName, onClose, onSelectFile } = this.props;
|
||||
const { filesList } = this.state;
|
||||
const index = e.target.dataset.index;
|
||||
|
||||
if (!index) return;
|
||||
this.setState(
|
||||
{
|
||||
selectedFile: filesList[index].id, //object sent
|
||||
},
|
||||
function () {
|
||||
onClose && onClose();
|
||||
onSetFileName & onSetFileName(filesList[index].title);
|
||||
}
|
||||
);
|
||||
this.setState({
|
||||
selectedFile: filesList[index],
|
||||
fileName: filesList[index].title,
|
||||
});
|
||||
// onSelectFile && onSelectFile(filesList[index]);
|
||||
//onClose && onClose();
|
||||
//onSetFileName & onSetFileName(filesList[index].title);
|
||||
};
|
||||
|
||||
onClickFile = (e) => {
|
||||
@ -218,7 +215,9 @@ class SelectFileDialogBody extends React.Component {
|
||||
selectedFolder,
|
||||
displayType,
|
||||
selectedKeys,
|
||||
selectedFile,
|
||||
} = this.state;
|
||||
|
||||
const loadingText = loadingLabel
|
||||
? loadingLabel
|
||||
: `${t("Common:LoadingProcessing")} ${t("Common:LoadingDescription")}`;
|
||||
@ -244,6 +243,7 @@ class SelectFileDialogBody extends React.Component {
|
||||
selectedFolder={selectedFolder}
|
||||
header={header}
|
||||
loadingText={loadingText}
|
||||
selectedFile={selectedFile}
|
||||
/>
|
||||
) : (
|
||||
<SelectFileDialogModalView
|
||||
@ -266,6 +266,7 @@ class SelectFileDialogBody extends React.Component {
|
||||
header={header}
|
||||
modalHeightContent={modalHeightContent}
|
||||
loadingText={loadingText}
|
||||
selectedFile={selectedFile}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -273,6 +274,7 @@ class SelectFileDialogBody extends React.Component {
|
||||
SelectFileDialogBody.propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
isPanelVisible: PropTypes.bool.isRequired,
|
||||
onSelectFile: PropTypes.func.isRequired,
|
||||
foldersType: PropTypes.oneOf(["common", "third-party"]),
|
||||
folderId: PropTypes.string,
|
||||
withoutProvider: PropTypes.bool,
|
||||
|
@ -3,7 +3,8 @@ import { StyledFilesList } from "../StyledPanels";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Text from "@appserver/components/text";
|
||||
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
import RadioButton from "@appserver/components/radio-button";
|
||||
const ListRow = ({
|
||||
displayType,
|
||||
needRowSelection,
|
||||
@ -13,17 +14,45 @@ const ListRow = ({
|
||||
children,
|
||||
fileExst,
|
||||
iconSrc,
|
||||
isMultiSelect,
|
||||
isChecked,
|
||||
}) => {
|
||||
console.log("isChecked", isChecked);
|
||||
return (
|
||||
<StyledFilesList
|
||||
displayType={displayType}
|
||||
needRowSelection={needRowSelection}
|
||||
isChecked={isChecked}
|
||||
>
|
||||
<div
|
||||
data-index={index}
|
||||
className="modal-dialog_file-name"
|
||||
onClick={onSelectFile}
|
||||
>
|
||||
{isMultiSelect ? (
|
||||
<Checkbox
|
||||
id={option.key}
|
||||
value={`${index}`}
|
||||
label={option.label}
|
||||
isChecked={isChecked}
|
||||
className="option_checkbox"
|
||||
truncate={true}
|
||||
title={option.label}
|
||||
onChange={onOptionChange}
|
||||
/>
|
||||
) : (
|
||||
<RadioButton
|
||||
fontSize="13px"
|
||||
fontWeight="400"
|
||||
name="name"
|
||||
label=""
|
||||
onChange={() => {}}
|
||||
isChecked={isChecked}
|
||||
onClick={function noRefCheck() {}}
|
||||
value=""
|
||||
className="select-file-dialog_checked"
|
||||
/>
|
||||
)}
|
||||
<ReactSVG src={iconSrc} className="select-file-dialog_icon" />
|
||||
<div data-index={index} className="files-list_full-name">
|
||||
<Text data-index={index} className="entry-title">
|
||||
|
@ -106,6 +106,7 @@ class SelectFileDialogModalViewBody extends React.Component {
|
||||
header,
|
||||
modalHeightContent,
|
||||
loadingText,
|
||||
selectedFile,
|
||||
} = this.props;
|
||||
const { isLoading } = this.state;
|
||||
console.log("this.folderList", this.folderList);
|
||||
@ -150,6 +151,7 @@ class SelectFileDialogModalViewBody extends React.Component {
|
||||
loadNextPage={loadNextPage}
|
||||
selectedFolder={selectedFolder}
|
||||
loadingText={loadingText}
|
||||
selectedFile={selectedFile}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@ -168,14 +170,26 @@ class SelectFileDialogModalViewBody extends React.Component {
|
||||
</StyledSelectFilePanel>
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer>
|
||||
<Button
|
||||
className="modal-dialog-button"
|
||||
primary
|
||||
size="big"
|
||||
label={t("Common:CloseButton")}
|
||||
tabIndex={1}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<StyledSelectFilePanel>
|
||||
<div className="select-file-dialog-modal_buttons">
|
||||
<Button
|
||||
className="select-file-dialog-buttons-save"
|
||||
primary
|
||||
size="medium"
|
||||
label={t("Common:SaveButton")}
|
||||
tabIndex={1}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<Button
|
||||
className="modal-dialog-button"
|
||||
primary
|
||||
size="medium"
|
||||
label={t("Common:CloseButton")}
|
||||
tabIndex={1}
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
</StyledSelectFilePanel>
|
||||
</ModalDialog.Footer>
|
||||
</ModalDialog>
|
||||
</StyledAsidePanel>
|
||||
|
@ -585,6 +585,14 @@ const StyledSelectFilePanel = styled.div`
|
||||
border-right: 1px solid #dee2e6;
|
||||
}
|
||||
}
|
||||
.select-file-dialog-aside_buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.select-file-dialog-buttons-save {
|
||||
margin: 0 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledFilesList = styled.div`
|
||||
@ -600,7 +608,7 @@ const StyledFilesList = styled.div`
|
||||
}
|
||||
.files-list_file-owner {
|
||||
margin-left: auto;
|
||||
max-width: 280px;
|
||||
max-width: 260px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -616,7 +624,6 @@ const StyledFilesList = styled.div`
|
||||
}
|
||||
.modal-dialog_file-name:hover {
|
||||
background-color: #eceef1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.files-list_full-name {
|
||||
grid-area: full-name;
|
||||
@ -630,6 +637,9 @@ const StyledFilesList = styled.div`
|
||||
.select-file-dialog_icon {
|
||||
grid-area: icon-name;
|
||||
}
|
||||
.select-file-dialog_checked {
|
||||
grid-area: checked-button;
|
||||
}
|
||||
.files-list_file-owner_wrapper {
|
||||
grid-area: owner-name;
|
||||
margin-right: 16px;
|
||||
@ -640,6 +650,8 @@ const StyledFilesList = styled.div`
|
||||
`}
|
||||
}
|
||||
.modal-dialog_file-name {
|
||||
border-radius: 3px;
|
||||
${(props) => props.isChecked && `background:#eceef1;`}
|
||||
cursor: ${(props) => (props.needRowSelection ? "pointer" : "default")};
|
||||
border-bottom: 1px solid #eceef1;
|
||||
align-items: center;
|
||||
@ -648,13 +660,13 @@ const StyledFilesList = styled.div`
|
||||
props.displayType === "aside"
|
||||
? css`
|
||||
height: 56px;
|
||||
grid-template-areas: "icon-name full-name full-name" "icon-name owner-name owner-name";
|
||||
grid-template-areas: "checked-button icon-name full-name full-name" "checked-button icon-name owner-name owner-name";
|
||||
`
|
||||
: css`
|
||||
height: 36px;
|
||||
grid-template-areas: "icon-name full-name owner-name";
|
||||
grid-template-areas: "checked-button icon-name full-name owner-name";
|
||||
`}
|
||||
grid-template-columns: 32px 1fr;
|
||||
grid-template-columns: 16px 32px 1fr;
|
||||
}
|
||||
`;
|
||||
export {
|
||||
|
Loading…
Reference in New Issue
Block a user