Shared:ModalDialog: Added a header component.
This commit is contained in:
parent
96bf6d1ab6
commit
ceac4c0faf
@ -145,6 +145,7 @@ const StyledHeaderContainer = styled.div`
|
||||
justify-content: space-between;
|
||||
margin: 0 16px;
|
||||
height: 53px;
|
||||
position: relative;
|
||||
|
||||
.additional-icons-container {
|
||||
display: flex;
|
||||
@ -156,14 +157,27 @@ const StyledHeaderContainer = styled.div`
|
||||
}
|
||||
.close-button {
|
||||
margin-inline: auto 0;
|
||||
min-width: 17px;
|
||||
}
|
||||
.header-component {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
::after {
|
||||
content: "";
|
||||
border-bottom: 1px solid rgb(236, 238, 241);
|
||||
width: calc(100% + 32px);
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
bottom: 0;
|
||||
|
||||
/* content: "";
|
||||
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 53px;
|
||||
top: 53px; */
|
||||
}
|
||||
`;
|
||||
export { StyledAside, StyledControlContainer, StyledHeaderContainer };
|
||||
|
@ -37,17 +37,20 @@ export interface AsideProps {
|
||||
header: AsideHeaderProps["header"];
|
||||
isBackButton?: AsideHeaderProps["isBackButton"];
|
||||
isCloseable?: AsideHeaderProps["isCloseable"];
|
||||
hederIcons?: AsideHeaderProps["hederIcons"];
|
||||
headerIcons?: AsideHeaderProps["headerIcons"];
|
||||
onBackClick?: AsideHeaderProps["onBackClick"];
|
||||
onCloseClick?: AsideHeaderProps["onCloseClick"];
|
||||
}
|
||||
export interface AsideHeaderProps {
|
||||
header: string;
|
||||
className?: string;
|
||||
id?: string;
|
||||
isBackButton?: boolean;
|
||||
isCloseable?: boolean;
|
||||
hederIcons?: { id: string; url: string; onClick: () => void }[];
|
||||
headerIcons?: { key: string; url: string; onClick: () => void }[];
|
||||
onBackClick?: () => void;
|
||||
onCloseClick?: () => void;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
export interface StyledAsideProps {
|
||||
visible: boolean;
|
||||
|
@ -38,8 +38,11 @@ const AsideHeader = (props: AsideHeaderProps) => {
|
||||
onBackClick,
|
||||
onCloseClick,
|
||||
header,
|
||||
hederIcons = [],
|
||||
headerIcons = [],
|
||||
isCloseable = true,
|
||||
className,
|
||||
id,
|
||||
style,
|
||||
} = props;
|
||||
|
||||
const backButtonRender = (
|
||||
@ -62,16 +65,20 @@ const AsideHeader = (props: AsideHeaderProps) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledHeaderContainer>
|
||||
<StyledHeaderContainer id={id} className={className} style={style}>
|
||||
{isBackButton && backButtonRender}
|
||||
<Text fontSize="21px" fontWeight={700}>
|
||||
{header}
|
||||
</Text>
|
||||
{hederIcons.length > 0 && (
|
||||
{typeof header === "string" ? (
|
||||
<Text fontSize="21px" fontWeight={700} className="header-component">
|
||||
{header}
|
||||
</Text>
|
||||
) : (
|
||||
header
|
||||
)}
|
||||
{headerIcons.length > 0 && (
|
||||
<div className="additional-icons-container">
|
||||
{hederIcons.map((item) => (
|
||||
{headerIcons.map((item) => (
|
||||
<IconButton
|
||||
key={item.id}
|
||||
key={item.key}
|
||||
size={17}
|
||||
className="close-button"
|
||||
iconName={item.url}
|
||||
|
@ -147,24 +147,6 @@ const Content = styled.div.attrs((props: { modalSwipeOffset?: number }) => ({
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.div<{ currentDisplayType?: ModalDialogType }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: ${(props) =>
|
||||
`1px solid ${props.theme.modalDialog.headerBorderColor}`};
|
||||
height: 52px;
|
||||
margin-bottom: ${(props) =>
|
||||
props.currentDisplayType === "aside" ? "0px" : "16px"};
|
||||
padding: 0 16px 0;
|
||||
|
||||
.heading {
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
color: ${(props) => props.theme.modalDialog.textColor};
|
||||
font-weight: 700;
|
||||
font-size: 21px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledBody = styled(Box)<{
|
||||
currentDisplayType?: ModalDialogType;
|
||||
hasFooter?: boolean;
|
||||
@ -241,7 +223,6 @@ const StyledFooter = styled.div<{
|
||||
`;
|
||||
|
||||
Dialog.defaultProps = { theme: Base };
|
||||
StyledHeader.defaultProps = { theme: Base };
|
||||
Content.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledModal, StyledHeader, Content, Dialog, StyledBody, StyledFooter };
|
||||
export { StyledModal, Content, Dialog, StyledBody, StyledFooter };
|
||||
|
@ -87,6 +87,8 @@ const ModalDialog = ({
|
||||
withBodyScroll = false,
|
||||
withFooterBorder = false,
|
||||
containerVisible = false,
|
||||
|
||||
...rest
|
||||
}: ModalDialogProps) => {
|
||||
const onCloseEvent = React.useCallback(() => {
|
||||
if (embedded) return;
|
||||
@ -173,6 +175,7 @@ const ModalDialog = ({
|
||||
isCloseable={isCloseable && !embedded}
|
||||
embedded={embedded}
|
||||
blur={blur}
|
||||
{...rest}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -24,6 +24,7 @@
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { AsideHeaderProps } from "../aside/Aside.types";
|
||||
import { ModalDialogType } from "./ModalDialog.enums";
|
||||
|
||||
export type ModalDialogTypeDetailed = {
|
||||
@ -160,4 +161,9 @@ export interface ModalSubComponentsProps {
|
||||
embedded?: boolean;
|
||||
withForm?: boolean;
|
||||
blur?: number;
|
||||
|
||||
isBackButton?: AsideHeaderProps["isBackButton"];
|
||||
headerIcons?: AsideHeaderProps["headerIcons"];
|
||||
onBackClick?: AsideHeaderProps["onBackClick"];
|
||||
onCloseClick?: AsideHeaderProps["onCloseClick"];
|
||||
}
|
||||
|
@ -30,18 +30,15 @@ import { isIOS, isMobileOnly, isSafari } from "react-device-detect";
|
||||
import { classNames } from "../../../utils";
|
||||
import { DialogSkeleton, DialogAsideSkeleton } from "../../../skeletons";
|
||||
|
||||
import { Heading, HeadingSize } from "../../heading";
|
||||
import { Scrollbar } from "../../scrollbar";
|
||||
|
||||
import { AsideHeader } from "../../aside";
|
||||
import {
|
||||
StyledModal,
|
||||
StyledHeader,
|
||||
Content,
|
||||
Dialog,
|
||||
StyledBody,
|
||||
StyledFooter,
|
||||
} from "../ModalDialog.styled";
|
||||
import { CloseButton } from "./CloseButton";
|
||||
import { ModalBackdrop } from "./ModalBackdrop";
|
||||
import { FormWrapper } from "./FormWrapper";
|
||||
import { ModalSubComponentsProps } from "../ModalDialog.types";
|
||||
@ -68,10 +65,12 @@ const Modal = ({
|
||||
modalSwipeOffset,
|
||||
containerVisible,
|
||||
isDoubleFooterLine,
|
||||
isCloseable,
|
||||
|
||||
embedded,
|
||||
withForm,
|
||||
blur,
|
||||
|
||||
...rest
|
||||
}: ModalSubComponentsProps) => {
|
||||
const contentRef = React.useRef<null | HTMLDivElement>(null);
|
||||
|
||||
@ -177,32 +176,21 @@ const Modal = ({
|
||||
containerComponent
|
||||
) : (
|
||||
<FormWrapper withForm={withForm || false}>
|
||||
<StyledHeader
|
||||
id="modal-header-swipe"
|
||||
className={
|
||||
classNames(["modal-header", headerProps.className]) ||
|
||||
"modal-header"
|
||||
}
|
||||
{...headerProps}
|
||||
currentDisplayType={currentDisplayType}
|
||||
>
|
||||
{header && (
|
||||
<Heading
|
||||
level={1}
|
||||
className="heading"
|
||||
size={HeadingSize.medium}
|
||||
truncate
|
||||
>
|
||||
{headerComponent}
|
||||
</Heading>
|
||||
)}
|
||||
{isCloseable && (
|
||||
<CloseButton
|
||||
currentDisplayType={currentDisplayType}
|
||||
onClick={onClose}
|
||||
/>
|
||||
)}
|
||||
</StyledHeader>
|
||||
{header && (
|
||||
<AsideHeader
|
||||
id="modal-header-swipe"
|
||||
className={
|
||||
classNames(["modal-header", headerProps.className]) ||
|
||||
"modal-header"
|
||||
}
|
||||
header={headerComponent}
|
||||
onCloseClick={onClose}
|
||||
{...(currentDisplayType === "modal" && {
|
||||
style: { marginBottom: "16px" },
|
||||
})}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
|
||||
{body && (
|
||||
<StyledBody
|
||||
|
Loading…
Reference in New Issue
Block a user