Client/Shared: VersionHistoryPanel: Added a header component.
This commit is contained in:
parent
7a7f239190
commit
f943d3f5f7
@ -27,7 +27,6 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Backdrop } from "@docspace/shared/components/backdrop";
|
||||
import { Heading } from "@docspace/shared/components/heading";
|
||||
import { Aside } from "@docspace/shared/components/aside";
|
||||
|
||||
import { FloatingButton } from "@docspace/shared/components/floating-button";
|
||||
@ -37,13 +36,11 @@ import { withTranslation } from "react-i18next";
|
||||
import {
|
||||
StyledVersionHistoryPanel,
|
||||
StyledContent,
|
||||
StyledHeaderContent,
|
||||
StyledBody,
|
||||
} from "../StyledPanels";
|
||||
import { SectionBodyContent } from "../../../pages/VersionHistory/Section/";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import config from "PACKAGE_FILE";
|
||||
import { ArticleHeaderLoader } from "@docspace/shared/skeletons/article";
|
||||
|
||||
class PureVersionHistoryPanel extends React.Component {
|
||||
onClose = () => {
|
||||
@ -85,26 +82,10 @@ class PureVersionHistoryPanel extends React.Component {
|
||||
visible={visible}
|
||||
onClose={this.onClose}
|
||||
withoutBodyScroll
|
||||
isLoading={!versions && !isLoading}
|
||||
header={versions ? versions[0].title : ""}
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledHeaderContent className="version-history-panel-header">
|
||||
{versions && !isLoading ? (
|
||||
<Heading
|
||||
className="version-history-panel-heading"
|
||||
size="medium"
|
||||
truncate
|
||||
>
|
||||
{versions[0].title}
|
||||
</Heading>
|
||||
) : (
|
||||
<ArticleHeaderLoader
|
||||
className="loader-version-history"
|
||||
height="28"
|
||||
width="688"
|
||||
/>
|
||||
)}
|
||||
</StyledHeaderContent>
|
||||
|
||||
<StyledBody className="version-history-panel-body">
|
||||
<SectionBodyContent onClose={this.onClose} />
|
||||
</StyledBody>
|
||||
|
@ -51,6 +51,7 @@ export interface AsideHeaderProps {
|
||||
onBackClick?: () => void;
|
||||
onCloseClick?: () => void;
|
||||
style?: React.CSSProperties;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
export interface StyledAsideProps {
|
||||
visible: boolean;
|
||||
|
@ -31,6 +31,7 @@ import { IconButton } from "../icon-button";
|
||||
import { Text } from "../text";
|
||||
import { AsideHeaderProps } from "./Aside.types";
|
||||
import { StyledHeaderContainer } from "./Aside.styled";
|
||||
import { RectangleSkeleton } from "../../skeletons/rectangle";
|
||||
|
||||
const AsideHeader = (props: AsideHeaderProps) => {
|
||||
const {
|
||||
@ -43,6 +44,7 @@ const AsideHeader = (props: AsideHeaderProps) => {
|
||||
className,
|
||||
id,
|
||||
style,
|
||||
isLoading,
|
||||
} = props;
|
||||
|
||||
const backButtonRender = (
|
||||
@ -64,8 +66,8 @@ const AsideHeader = (props: AsideHeaderProps) => {
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledHeaderContainer id={id} className={className} style={style}>
|
||||
const mainComponent = (
|
||||
<>
|
||||
{isBackButton && backButtonRender}
|
||||
{typeof header === "string" ? (
|
||||
<Text fontSize="21px" fontWeight={700} className="header-component">
|
||||
@ -88,6 +90,14 @@ const AsideHeader = (props: AsideHeaderProps) => {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const loaderComponent = <RectangleSkeleton height="28" width="100%" />;
|
||||
|
||||
return (
|
||||
<StyledHeaderContainer id={id} className={className} style={style}>
|
||||
{isLoading ? loaderComponent : mainComponent}
|
||||
{isCloseable && closeIconRender}
|
||||
</StyledHeaderContainer>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user