Web: Editor/Files: SelectFile: Refactoring, the component has been extended.

This commit is contained in:
Tatiana Lopaeva 2021-07-30 16:26:26 +03:00
parent 4a0c42e97d
commit b85b2dfa52
6 changed files with 26 additions and 24 deletions

View File

@ -39,13 +39,14 @@ const SelectFileDialogAsideView = ({
displayType,
isTranslationsReady,
passedId,
children,
headerName,
}) => {
const [isLoadingData, setIsLoadingData] = useState(false);
const onSetLoadingData = (loading) => {
setIsLoadingData(loading);
};
const isHeaderChildren = !!children;
const isHeaderChildren = !!header;
return (
<StyledAsidePanel visible={isPanelVisible}>
<Backdrop
@ -65,14 +66,12 @@ const SelectFileDialogAsideView = ({
size="medium"
className="select-file-dialog_aside-header_title"
>
{header ? header : t("SelectFile")}
{headerName ? headerName : t("SelectFile")}
</Heading>
</StyledHeaderContent>
<div className="select-file-dialog_aside-body_wrapper">
<div className="select-file-dialog_aside-children">
{children}
</div>
<div className="select-file-dialog_aside-children">{header}</div>
<Text fontWeight="600" fontSize="14px">
{t("Translations:SelectFolder")}
</Text>

View File

@ -123,12 +123,12 @@ class SelectFileDialogModalViewBody extends React.Component {
loadingText,
selectedFile,
onClickSave,
children,
headerName,
} = this.props;
const { isLoading } = this.state;
const isHeaderChildren = !!children;
const isHeaderChildren = !!header;
return (
<StyledAsidePanel visible={isPanelVisible}>
@ -142,13 +142,13 @@ class SelectFileDialogModalViewBody extends React.Component {
bodyPadding="0"
>
<ModalDialog.Header>
{header ? header : t("SelectFile")}
{headerName ? headerName : t("SelectFile")}
</ModalDialog.Header>
<ModalDialog.Body className="select-file_body-modal-dialog">
<StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
{!isLoading ? (
<div className="modal-dialog_body">
<div className="modal-dialog_children">{children}</div>
<div className="modal-dialog_children">{header}</div>
<div className="modal-dialog_tree-body">
<FolderTreeBody
expandedKeys={expandedKeys}

View File

@ -202,7 +202,7 @@ class SelectFileDialogBody extends React.Component {
folderId,
onSetFileName,
tReady,
children,
headerName,
} = this.props;
const {
isVisible,
@ -239,7 +239,7 @@ class SelectFileDialogBody extends React.Component {
isNextPageLoading={isNextPageLoading}
loadNextPage={this.loadNextPage}
selectedFolder={selectedFolder}
header={header}
headerName={headerName}
loadingText={loadingText}
selectedFile={selectedFile}
folderId={folderId}
@ -248,7 +248,7 @@ class SelectFileDialogBody extends React.Component {
displayType={displayType}
isTranslationsReady={tReady}
passedId={passedId}
children={children}
header={header}
/>
) : (
<SelectFileDialogModalView
@ -265,12 +265,12 @@ class SelectFileDialogBody extends React.Component {
loadNextPage={this.loadNextPage}
selectedFolder={selectedFolder}
withoutProvider={withoutProvider}
header={header}
headerName={headerName}
loadingText={loadingText}
selectedFile={selectedFile}
folderId={folderId}
passedId={passedId}
children={children}
header={header}
/>
);
}
@ -282,11 +282,11 @@ SelectFileDialogBody.propTypes = {
foldersType: PropTypes.oneOf(["common", "third-party"]),
folderId: PropTypes.string,
withoutProvider: PropTypes.bool,
header: PropTypes.string,
headerName: PropTypes.string,
zIndex: PropTypes.number,
};
SelectFileDialogModalView.defaultProps = {
SelectFileDialogBody.defaultProps = {
folderId: "",
header: "",
withoutProvider: false,

View File

@ -34,7 +34,7 @@ class SelectFileInputBody extends React.PureComponent {
withSubfolders,
onSelectFile,
folderId,
header,
headerName,
isImageOnly,
isArchiveOnly,
isDocumentsOnly,
@ -43,7 +43,7 @@ class SelectFileInputBody extends React.PureComponent {
isTablesOnly,
isMediaOnly,
loadingLabel,
children,
header,
} = this.props;
const { fileName } = this.state;
const zIndex = 310;
@ -70,7 +70,7 @@ class SelectFileInputBody extends React.PureComponent {
withSubfolders={withSubfolders}
onSelectFile={onSelectFile}
folderId={folderId}
header={header}
headerName={headerName}
searchParam={searchParam}
isImageOnly={isImageOnly}
isArchiveOnly={isArchiveOnly}
@ -79,7 +79,7 @@ class SelectFileInputBody extends React.PureComponent {
isTables={isTablesOnly}
isMediaOnly={isMediaOnly}
loadingLabel={loadingLabel}
children={children}
header={header}
/>
)}
</StyledComponent>

View File

@ -96,9 +96,9 @@ class SelectFolderInputBody extends React.PureComponent {
dialogWithFiles,
modalHeightContent,
asideHeightContent,
zIndex,
} = this.props;
const { isLoading, baseFolderPath, fullFolderPath } = this.state;
const zIndex = 310;
return (
<StyledComponent>

View File

@ -602,13 +602,16 @@ const Editor = () => {
/>
)}
{/* <SelectFileDialog
<SelectFileDialog
onSelectFile={onSelectFile}
isPanelVisible={isFileDialogVisible}
onClose={onCloseFileDialog}
foldersType="common"
isImageOnly
/> */}
header={<Text>{i18n.t("FileType")}</Text>}
headerName={i18n.t("SelectFileTitle")}
/>
{isFolderDialogVisible && (
<SelectFolderDialog