Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 10:22:30 +01:00
Code Issues Releases Activity

Modals: add back close button

Browse Source
This commit is contained in:
Puyodead1 2023-12-11 01:35:22 -05:00
parent 6b24fc2985
commit 6d6f97e3c2
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/modals/ModalComponents.tsx
View File

@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import Button, { Props as ButtonProps } from "../Button"; import Button, { Props as ButtonProps } from "../Button";
import Icon from "../Icon";
import { animationFadeIn, animationFadeOut, animationZoomIn, animationZoomOut } from "../common/animations"; import { animationFadeIn, animationFadeOut, animationZoomIn, animationZoomOut } from "../common/animations";
export type ModalAction = Omit<React.HTMLAttributes<HTMLButtonElement>, "as"> & export type ModalAction = Omit<React.HTMLAttributes<HTMLButtonElement>, "as"> &
@ -158,6 +159,22 @@ export const InputContainer = styled.div`
flex-direction: column; flex-direction: column;
`; `;
/**
* Wrapper for modal close button
*/
export const ModalCloseWrapper = styled.div`
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
color: var(--text-disabled);
&:hover {
color: var(--text);
}
`;
export function Modal(props: ModalProps) { export function Modal(props: ModalProps) {
const [closing, setClosing] = useState(false); const [closing, setClosing] = useState(false);
@ -187,6 +204,13 @@ export function Modal(props: ModalProps) {
return createPortal( return createPortal(
<ModalBase closing={closing} onClick={() => !props.nonDismissable && closeModal()}> <ModalBase closing={closing} onClick={() => !props.nonDismissable && closeModal()}>
<ModalWrapper {...props} onClick={(e) => e.stopPropagation()} actions={false}> <ModalWrapper {...props} onClick={(e) => e.stopPropagation()} actions={false}>
<div style={{ position: "relative" }}>
{!props.nonDismissable && (
<ModalCloseWrapper onClick={closeModal}>
<Icon icon="mdiClose" size={1} />
</ModalCloseWrapper>
)}
</div>
{(props.title || props.description) && ( {(props.title || props.description) && (
<ModalHeader> <ModalHeader>
{props.title && <ModalHeaderText>{props.title}</ModalHeaderText>} {props.title && <ModalHeaderText>{props.title}</ModalHeaderText>}