Web: Files: Removed scroll sticking if you try to move the scroll slider.
This commit is contained in:
parent
30b89d1ae0
commit
056fe260cd
@ -33,92 +33,86 @@ const SelectFileDialogAsideView = ({
|
||||
maxInputWidth,
|
||||
newFilter,
|
||||
}) => {
|
||||
const onMouseEvent = (event) => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
return (
|
||||
<div onMouseUp={onMouseEvent} onMouseDown={onMouseEvent}>
|
||||
<ModalDialog
|
||||
visible={isPanelVisible}
|
||||
onClose={onClose}
|
||||
contentHeight="100%"
|
||||
contentPaddingBottom="0px"
|
||||
displayType="aside"
|
||||
withoutBodyScroll
|
||||
>
|
||||
<ModalDialog.Header>{dialogName}</ModalDialog.Header>
|
||||
<ModalDialog.Body className="select-file_body-modal-dialog">
|
||||
<StyledAsideBody theme={theme}>
|
||||
<div className="selection-panel_aside-body">
|
||||
<div className="selection-panel_folder-info">
|
||||
<Text
|
||||
className="selection-panel_folder-selection-title"
|
||||
fontWeight={600}
|
||||
>
|
||||
{t("Translations:FolderSelection")}
|
||||
</Text>
|
||||
<ModalDialog
|
||||
visible={isPanelVisible}
|
||||
onClose={onClose}
|
||||
contentHeight="100%"
|
||||
contentPaddingBottom="0px"
|
||||
displayType="aside"
|
||||
withoutBodyScroll
|
||||
>
|
||||
<ModalDialog.Header>{dialogName}</ModalDialog.Header>
|
||||
<ModalDialog.Body className="select-file_body-modal-dialog">
|
||||
<StyledAsideBody theme={theme}>
|
||||
<div className="selection-panel_aside-body">
|
||||
<div className="selection-panel_folder-info">
|
||||
<Text
|
||||
className="selection-panel_folder-selection-title"
|
||||
fontWeight={600}
|
||||
>
|
||||
{t("Translations:FolderSelection")}
|
||||
</Text>
|
||||
|
||||
<SelectFolderInput
|
||||
theme={theme}
|
||||
onClickInput={onClickInput}
|
||||
onClose={onCloseSelectFolderDialog}
|
||||
onSelectFolder={onSelectFolder}
|
||||
isPanelVisible={isFolderPanelVisible}
|
||||
foldersType={foldersType}
|
||||
withoutProvider={withoutProvider}
|
||||
id={folderId}
|
||||
onSelectFile={onSelectFile}
|
||||
displayType="aside"
|
||||
hasNextPage={hasNextPage}
|
||||
isNextPageLoading={isNextPageLoading}
|
||||
loadNextPage={loadNextPage}
|
||||
files={files}
|
||||
folderTree={resultingFolderTree}
|
||||
isFolderTreeLoading={!!!resultingFolderTree}
|
||||
isNeedArrowIcon
|
||||
maxInputWidth={maxInputWidth ? maxInputWidth : "446px"}
|
||||
/>
|
||||
<SelectFolderInput
|
||||
theme={theme}
|
||||
onClickInput={onClickInput}
|
||||
onClose={onCloseSelectFolderDialog}
|
||||
onSelectFolder={onSelectFolder}
|
||||
isPanelVisible={isFolderPanelVisible}
|
||||
foldersType={foldersType}
|
||||
withoutProvider={withoutProvider}
|
||||
id={folderId}
|
||||
onSelectFile={onSelectFile}
|
||||
displayType="aside"
|
||||
hasNextPage={hasNextPage}
|
||||
isNextPageLoading={isNextPageLoading}
|
||||
loadNextPage={loadNextPage}
|
||||
files={files}
|
||||
folderTree={resultingFolderTree}
|
||||
isFolderTreeLoading={!!!resultingFolderTree}
|
||||
isNeedArrowIcon
|
||||
maxInputWidth={maxInputWidth ? maxInputWidth : "446px"}
|
||||
/>
|
||||
|
||||
<Text color="#A3A9AE" className="selection-panel_aside-title">
|
||||
{filesListTitle}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="selection-panel_files">
|
||||
<FilesListWrapper
|
||||
<Text color="#A3A9AE" className="selection-panel_aside-title">
|
||||
{filesListTitle}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="selection-panel_files">
|
||||
<FilesListWrapper
|
||||
theme={theme}
|
||||
onSelectFile={onSelectFile}
|
||||
folderId={folderId}
|
||||
displayType="aside"
|
||||
folderSelection={false}
|
||||
fileId={fileId}
|
||||
newFilter={newFilter}
|
||||
/>
|
||||
</div>
|
||||
<div className="selection-panel_aside-footer">
|
||||
{footer}
|
||||
<div className="selection-panel_aside-buttons">
|
||||
<Button
|
||||
theme={theme}
|
||||
onSelectFile={onSelectFile}
|
||||
folderId={folderId}
|
||||
displayType="aside"
|
||||
folderSelection={false}
|
||||
fileId={fileId}
|
||||
newFilter={newFilter}
|
||||
primary
|
||||
size="normalTouchscreen"
|
||||
label={primaryButtonName}
|
||||
onClick={onButtonClick}
|
||||
isDisabled={!fileId}
|
||||
/>
|
||||
<Button
|
||||
theme={theme}
|
||||
size="normalTouchscreen"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
<div className="selection-panel_aside-footer">
|
||||
{footer}
|
||||
<div className="selection-panel_aside-buttons">
|
||||
<Button
|
||||
theme={theme}
|
||||
primary
|
||||
size="normalTouchscreen"
|
||||
label={primaryButtonName}
|
||||
onClick={onButtonClick}
|
||||
isDisabled={!fileId}
|
||||
/>
|
||||
<Button
|
||||
theme={theme}
|
||||
size="normalTouchscreen"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StyledAsideBody>
|
||||
</ModalDialog.Body>
|
||||
</ModalDialog>
|
||||
</div>
|
||||
</div>
|
||||
</StyledAsideBody>
|
||||
</ModalDialog.Body>
|
||||
</ModalDialog>
|
||||
);
|
||||
};
|
||||
export default SelectFileDialogAsideView;
|
||||
|
@ -47,119 +47,109 @@ const SelectionPanelBody = ({
|
||||
isDisableButton,
|
||||
parentId,
|
||||
}) => {
|
||||
const onMouseEvent = (event) => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
return (
|
||||
<div onMouseUp={onMouseEvent} onMouseDown={onMouseEvent}>
|
||||
<StyledModalDialog
|
||||
theme={theme}
|
||||
visible={isPanelVisible}
|
||||
onClose={onClose}
|
||||
className="select-file-modal-dialog"
|
||||
style={{ maxWidth: "773px" }}
|
||||
displayType="modal"
|
||||
modalBodyPadding="0px"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
<ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header>
|
||||
<ModalDialog.Body
|
||||
theme={theme}
|
||||
className="select-file_body-modal-dialog"
|
||||
>
|
||||
<StyledBody header={!!header} footer={!!footer}>
|
||||
<div className="selection-panel_body">
|
||||
<div className="selection-panel_tree-body">
|
||||
<Text
|
||||
fontWeight="700"
|
||||
fontSize="18px"
|
||||
className="selection-panel_folder-title"
|
||||
>
|
||||
{t("Common:Documents")}
|
||||
</Text>
|
||||
<StyledModalDialog
|
||||
theme={theme}
|
||||
visible={isPanelVisible}
|
||||
onClose={onClose}
|
||||
style={{ maxWidth: "773px" }}
|
||||
displayType="modal"
|
||||
modalBodyPadding="0px"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
<ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header>
|
||||
<ModalDialog.Body theme={theme} className="select-file_body-modal-dialog">
|
||||
<StyledBody header={!!header} footer={!!footer}>
|
||||
<div className="selection-panel_body">
|
||||
<div className="selection-panel_tree-body">
|
||||
<Text
|
||||
fontWeight="700"
|
||||
fontSize="18px"
|
||||
className="selection-panel_folder-title"
|
||||
>
|
||||
{t("Common:Documents")}
|
||||
</Text>
|
||||
|
||||
{folderId && resultingFolderTree ? (
|
||||
<FolderTreeBody
|
||||
{folderId && resultingFolderTree ? (
|
||||
<FolderTreeBody
|
||||
theme={theme}
|
||||
folderTree={resultingFolderTree}
|
||||
onSelect={onSelectFolder}
|
||||
withoutProvider={withoutProvider}
|
||||
certainFolders
|
||||
isAvailable={isAvailable}
|
||||
selectedKeys={[`${folderId}`]}
|
||||
parentId={parentId}
|
||||
expandedKeys={expandedKeys}
|
||||
isDisableTree={isDisableTree}
|
||||
displayType="modal"
|
||||
/>
|
||||
) : (
|
||||
<Loaders.NewTreeFolders />
|
||||
)}
|
||||
</div>
|
||||
<div className="selection-panel_files-body">
|
||||
<>
|
||||
<div className="selection-panel_files-header">
|
||||
{header}
|
||||
|
||||
<Text
|
||||
color="#A3A9AE"
|
||||
theme={theme}
|
||||
folderTree={resultingFolderTree}
|
||||
onSelect={onSelectFolder}
|
||||
withoutProvider={withoutProvider}
|
||||
certainFolders
|
||||
isAvailable={isAvailable}
|
||||
selectedKeys={[`${folderId}`]}
|
||||
parentId={parentId}
|
||||
expandedKeys={expandedKeys}
|
||||
isDisableTree={isDisableTree}
|
||||
displayType="modal"
|
||||
/>
|
||||
) : (
|
||||
<Loaders.NewTreeFolders />
|
||||
)}
|
||||
</div>
|
||||
<div className="selection-panel_files-body">
|
||||
<>
|
||||
<div className="selection-panel_files-header">
|
||||
{header}
|
||||
|
||||
<Text
|
||||
color="#A3A9AE"
|
||||
theme={theme}
|
||||
className="selection-panel_title"
|
||||
>
|
||||
{folderSelection
|
||||
? t("FolderContents", { folderTitle })
|
||||
: filesListTitle}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<FilesListWrapper
|
||||
theme={theme}
|
||||
onSelectFile={onSelectFile}
|
||||
folderId={folderId}
|
||||
displayType={"modal"}
|
||||
folderSelection={folderSelection}
|
||||
newFilter={newFilter}
|
||||
fileId={fileId}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<div className="selection-panel_footer">
|
||||
<div>{footer}</div>
|
||||
|
||||
<div className="selection-panel_buttons">
|
||||
<Button
|
||||
theme={theme}
|
||||
className="select-file-modal-dialog-buttons-save"
|
||||
primary
|
||||
size="normalTouchscreen"
|
||||
label={primaryButtonName}
|
||||
onClick={onButtonClick}
|
||||
isDisabled={
|
||||
isDisableButton ||
|
||||
isDisableTree ||
|
||||
isLoadingData ||
|
||||
(!fileId && !folderSelection) ||
|
||||
!canCreate
|
||||
}
|
||||
isLoading={isDisableTree}
|
||||
/>
|
||||
<Button
|
||||
theme={theme}
|
||||
className="modal-dialog-button"
|
||||
size="normalTouchscreen"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
isDisabled={isLoadingData}
|
||||
/>
|
||||
className="selection-panel_title"
|
||||
>
|
||||
{folderSelection
|
||||
? t("FolderContents", { folderTitle })
|
||||
: filesListTitle}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<FilesListWrapper
|
||||
theme={theme}
|
||||
onSelectFile={onSelectFile}
|
||||
folderId={folderId}
|
||||
displayType={"modal"}
|
||||
folderSelection={folderSelection}
|
||||
newFilter={newFilter}
|
||||
fileId={fileId}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
|
||||
<div className="selection-panel_footer">
|
||||
<div>{footer}</div>
|
||||
|
||||
<div className="selection-panel_buttons">
|
||||
<Button
|
||||
theme={theme}
|
||||
className="select-file-modal-dialog-buttons-save"
|
||||
primary
|
||||
size="normalTouchscreen"
|
||||
label={primaryButtonName}
|
||||
onClick={onButtonClick}
|
||||
isDisabled={
|
||||
isDisableButton ||
|
||||
isDisableTree ||
|
||||
isLoadingData ||
|
||||
(!fileId && !folderSelection) ||
|
||||
!canCreate
|
||||
}
|
||||
isLoading={isDisableTree}
|
||||
/>
|
||||
<Button
|
||||
theme={theme}
|
||||
className="modal-dialog-button"
|
||||
size="normalTouchscreen"
|
||||
label={t("Common:CancelButton")}
|
||||
onClick={onClose}
|
||||
isDisabled={isLoadingData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StyledBody>
|
||||
</ModalDialog.Body>
|
||||
</StyledModalDialog>
|
||||
</div>
|
||||
</div>
|
||||
</StyledBody>
|
||||
</ModalDialog.Body>
|
||||
</StyledModalDialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user