cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 22:52:09 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(@ui): port Modal component

Browse source
This commit is contained in:
Paul Makles 2022-05-30 15:45:14 +01:00
parent 68b9d5ea79
commit 41e533ab59
21 changed files with 58 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

263
src/components/ui/Modal.tsx
View file

@ -1,263 +0,0 @@
/* eslint-disable react-hooks/rules-of-hooks */
import styled, { css, keyframes } from "styled-components/macro";
import { createPortal, useCallback, useEffect, useState } from "preact/compat";
import { Button } from "@revoltchat/ui";
import { Props as ButtonProps } from "@revoltchat/ui/esm/components/design/atoms/inputs/Button";
import { internalSubscribe } from "../../lib/eventEmitter";
import { Children } from "../../types/Preact";
const open = keyframes`
0% {opacity: 0;}
70% {opacity: 0;}
100% {opacity: 1;}
`;
const close = keyframes`
0% {opacity: 1;}
70% {opacity: 0;}
100% {opacity: 0;}
`;
const zoomIn = keyframes`
0% {transform: scale(0.5);}
98% {transform: scale(1.01);}
100% {transform: scale(1);}
`;
const zoomOut = keyframes`
0% {transform: scale(1);}
100% {transform: scale(0.5);}
`;
const ModalBase = styled.div`
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
position: fixed;
max-height: 100%;
user-select: none;
animation-name: ${open};
animation-duration: 0.2s;
display: grid;
overflow-y: auto;
place-items: center;
color: var(--foreground);
background: rgba(0, 0, 0, 0.8);
&.closing {
animation-name: ${close};
animation-fill-mode: forwards;
}
&.closing > div {
animation-name: ${zoomOut};
}
`;
const ModalContainer = styled.div`
overflow: hidden;
max-width: calc(100vw - 20px);
border-radius: var(--border-radius);
animation-name: ${zoomIn};
animation-duration: 0.25s;
animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1);
`;
const ModalContent = styled.div<
{ [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
>`
text-overflow: ellipsis;
border-radius: var(--border-radius);
h3 {
font-size: 14px;
text-transform: uppercase;
margin: 0;
margin-bottom: 10px;
color: var(--foreground);
}
h5 {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--secondary-foreground);
}
form {
display: flex;
flex-direction: column;
gap: 8px;
> div {
margin: 0;
color: var(--secondary-foreground);
font-size: 12px;
}
}
.description {
color: var(--tertiary-foreground);
font-size: 90%;
}
${(props) =>
!props.noBackground &&
css`
background: var(--secondary-header);
`}
${(props) =>
props.padding &&
css`
padding: 1rem;
min-width: 450px;
`}
${(props) =>
props.attachment &&
css`
border-radius: var(--border-radius) var(--border-radius) 0 0;
`}
${(props) =>
props.border &&
css`
border-radius: var(--border-radius);
border: 2px solid var(--secondary-background);
`}
`;
const ModalActions = styled.div`
gap: 8px;
display: flex;
flex-direction: row-reverse;
padding: 1rem;
background: var(--secondary-background);
border-radius: 0 0 var(--border-radius) var(--border-radius);
`;
export type Action = Omit<
JSX.HTMLAttributes<HTMLButtonElement>,
"as" | "onClick"
> & {
palette?: ButtonProps["palette"];
confirmation?: boolean;
onClick: () => void;
};
interface Props {
children?: Children;
title?: Children;
description?: Children;
disallowClosing?: boolean;
noBackground?: boolean;
dontModal?: boolean;
padding?: boolean;
onClose?: () => void;
actions?: Action[];
disabled?: boolean;
palette?: ButtonProps["palette"];
border?: boolean;
visible: boolean;
}
export let isModalClosing = false;
export default function Modal(props: Props) {
if (!props.visible) return null;
const content = (
<ModalContent
attachment={!!props.actions}
noBackground={props.noBackground}
border={props.border}
padding={props.padding ?? !props.dontModal}>
{props.title && <h3>{props.title}</h3>}
{props.description && <h5>{props.description}</h5>}
{props.children}
</ModalContent>
);
if (props.dontModal) {
return content;
}
const [animateClose, setAnimateClose] = useState(false);
isModalClosing = animateClose;
const onClose = useCallback(() => {
setAnimateClose(true);
setTimeout(() => props.onClose!(), 2e2);
}, [setAnimateClose, props]);
useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);
useEffect(() => {
if (props.disallowClosing) return;
function keyDown(e: KeyboardEvent) {
if (e.key === "Escape") {
onClose();
}
}
document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown);
}, [props.disallowClosing, onClose]);
const confirmationAction = props.actions?.find(
(action) => action.confirmation,
);
useEffect(() => {
if (!confirmationAction) return;
// ! TODO: this may be done better if we
// ! can focus the button although that
// ! doesn't seem to work...
function keyDown(e: KeyboardEvent) {
if (e.key === "Enter") {
confirmationAction!.onClick();
}
}
document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown);
}, [confirmationAction]);
return createPortal(
<ModalBase
className={animateClose ? "closing" : undefined}
onClick={(!props.disallowClosing && props.onClose) || undefined}>
<ModalContainer onClick={(e) => (e.cancelBubble = true)}>
{content}
{props.actions && (
<ModalActions>
{props.actions.map((x, index) => (
<Button
palette={props.palette}
key={index}
{...x}
disabled={props.disabled}
/>
))}
</ModalActions>
)}
</ModalContainer>
</ModalBase>,
document.body,
);
}

6
src/context/intermediate/Intermediate.tsx
View file

@ -5,13 +5,13 @@ import { API, Channel, Message, Server, User } from "revolt.js";
import { createContext } from "preact";
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import type { Action } from "@revoltchat/ui/esm/components/design/atoms/layout/Modal";
import { internalSubscribe } from "../../lib/eventEmitter";
import { determineLink } from "../../lib/links";
import { useApplicationState } from "../../mobx/State";
import { Action } from "../../components/ui/Modal";
import { Children } from "../../types/Preact";
import Modals from "./Modals";
@ -24,7 +24,7 @@ export type Screen =
| { id: "clipboard"; text: string }
| { id: "token_reveal"; token: string; username: string }
| { id: "external_link_prompt"; link: string }
| { id: "sessions", confirm: () => void }
| { id: "sessions"; confirm: () => void }
| {
id: "_prompt";
question: Children;

13
src/context/intermediate/Modals.tsx
View file

@ -1,16 +1,15 @@
import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
//import { isModalClosing } from "../../components/ui/Modal";
import { Screen } from "./Intermediate";
import { ClipboardModal } from "./modals/Clipboard";
import { ErrorModal } from "./modals/Error";
import { ExternalLinkModal } from "./modals/ExternalLinkPrompt";
import { InputModal } from "./modals/Input";
import { OnboardingModal } from "./modals/Onboarding";
import { PromptModal } from "./modals/Prompt";
import { SignedOutModal } from "./modals/SignedOut";
import { ExternalLinkModal} from "./modals/ExternalLinkPrompt";
import { SessionsModal } from "./modals/SessionsPrompt";
import { SignedOutModal } from "./modals/SignedOut";
import { TokenRevealModal } from "./modals/TokenReveal";
export interface Props {
@ -20,9 +19,9 @@ export interface Props {
export default function Modals({ screen, openScreen }: Props) {
const onClose = () =>
isModalClosing || screen.id === "onboarding"
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
//isModalClosing || screen.id === "onboarding"
openScreen({ id: "none" });
// : internalEmit("Modal", "close");
switch (screen.id) {
case "_prompt":

8
src/context/intermediate/Popovers.tsx
View file

@ -2,8 +2,6 @@ import { useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { IntermediateContext, useIntermediate } from "./Intermediate";
import { SpecialInputModal } from "./modals/Input";
import { SpecialPromptModal } from "./modals/Prompt";
@ -21,9 +19,9 @@ export default function Popovers() {
const { openScreen } = useIntermediate();
const onClose = () =>
isModalClosing
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
//isModalClosing
openScreen({ id: "none" });
//: internalEmit("Modal", "close");
switch (screen.id) {
case "profile":

3
src/context/intermediate/modals/Clipboard.tsx
View file

@ -1,6 +1,6 @@
import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal";
import { Modal } from "@revoltchat/ui";
interface Props {
onClose: () => void;
@ -10,7 +10,6 @@ interface Props {
export function ClipboardModal({ onClose, text }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id="app.special.modals.clipboard.unavailable" />}
actions={[

3
src/context/intermediate/modals/Error.tsx
View file

@ -1,6 +1,6 @@
import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal";
import { Modal } from "@revoltchat/ui";
interface Props {
onClose: () => void;
@ -10,7 +10,6 @@ interface Props {
export function ErrorModal({ onClose, error }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id="app.special.modals.error" />}
actions={[

5
src/context/intermediate/modals/ExternalLinkPrompt.tsx
View file

@ -1,8 +1,8 @@
import { Text } from "preact-i18n";
import { useApplicationState } from "../../../mobx/State";
import { Modal } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import { useApplicationState } from "../../../mobx/State";
import { useIntermediate } from "../Intermediate";
@ -17,7 +17,6 @@ export function ExternalLinkModal({ onClose, link }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id={"app.special.modals.external_links.title"} />}
actions={[

4
src/context/intermediate/modals/Input.tsx
View file

@ -4,9 +4,8 @@ import { Server } from "revolt.js";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { Category, InputBox } from "@revoltchat/ui";
import { Category, InputBox, Modal } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import { Children } from "../../../types/Preact";
import { I18nError } from "../../Locale";
import { AppContext } from "../../revoltjs/RevoltClient";
@ -35,7 +34,6 @@ export function InputModal({
return (
<Modal
visible={true}
title={question}
description={description}
disabled={processing}

5
src/context/intermediate/modals/Prompt.tsx
View file

@ -7,13 +7,13 @@ import styles from "./Prompt.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Category, Error, InputBox, Radio } from "@revoltchat/ui";
import { Category, Modal, InputBox, Radio } from "@revoltchat/ui";
import type { Action } from "@revoltchat/ui/esm/components/design/atoms/layout/Modal";
import { TextReact } from "../../../lib/i18n";
import Message from "../../../components/common/messaging/Message";
import UserIcon from "../../../components/common/user/UserIcon";
import Modal, { Action } from "../../../components/ui/Modal";
import { Children } from "../../../types/Preact";
import { I18nError } from "../../Locale";
import { AppContext } from "../../revoltjs/RevoltClient";
@ -39,7 +39,6 @@ export function PromptModal({
}: Props) {
return (
<Modal
visible={true}
title={question}
actions={actions}
onClose={onClose}

3
src/context/intermediate/modals/SessionsPrompt.tsx
View file

@ -1,6 +1,6 @@
import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal";
import { Modal } from "@revoltchat/ui";
interface Props {
onClose: () => void;
@ -10,7 +10,6 @@ interface Props {
export function SessionsModal({ onClose, confirm }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id={"app.special.modals.sessions.title"} />}
actions={[

3
src/context/intermediate/modals/SignedOut.tsx
View file

@ -1,6 +1,6 @@
import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal";
import { Modal } from "@revoltchat/ui";
interface Props {
onClose: () => void;
@ -9,7 +9,6 @@ interface Props {
export function SignedOutModal({ onClose }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id="app.special.modals.signed_out" />}
actions={[

3
src/context/intermediate/modals/TokenReveal.tsx
View file

@ -1,6 +1,6 @@
import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal";
import { Modal } from "@revoltchat/ui";
interface Props {
onClose: () => void;
@ -11,7 +11,6 @@ interface Props {
export function TokenRevealModal({ onClose, token, username }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={
<Text

4
src/context/intermediate/popovers/ChannelInfo.tsx
View file

@ -4,7 +4,7 @@ import { Channel } from "revolt.js";
import styles from "./ChannelInfo.module.scss";
import Modal from "../../../components/ui/Modal";
import { Modal } from "@revoltchat/ui";
import Markdown from "../../../components/markdown/Markdown";
import { getChannelName } from "../../revoltjs/util";
@ -24,7 +24,7 @@ export const ChannelInfo = observer(({ channel, onClose }: Props) => {
}
return (
<Modal visible={true} onClose={onClose}>
<Modal onClose={onClose}>
<div className={styles.info}>
<div className={styles.header}>
<h1>{getChannelName(channel, true)}</h1>

4
src/context/intermediate/popovers/CreateBot.tsx
View file

@ -4,9 +4,8 @@ import { API } from "revolt.js";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { Category } from "@revoltchat/ui";
import { Category, Modal } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import FormField from "../../../pages/login/FormField";
import { I18nError } from "../../Locale";
import { AppContext } from "../../revoltjs/RevoltClient";
@ -38,7 +37,6 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id="app.special.popovers.create_bot.title" />}
actions={[

6
src/context/intermediate/popovers/ImageViewer.tsx
View file

@ -3,10 +3,10 @@ import { API } from "revolt.js";
import styles from "./ImageViewer.module.scss";
import { Modal } from "@revoltchat/ui";
import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
import Modal from "../../../components/ui/Modal";
import { useClient } from "../../revoltjs/RevoltClient";
interface Props {
@ -28,7 +28,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
const client = useClient();
return (
<Modal visible={true} onClose={onClose} noBackground>
<Modal onClose={onClose} transparent maxHeight="100vh" maxWidth="100vw">
<div className={styles.viewer}>
{attachment && (
<>

4
src/context/intermediate/popovers/ModifyAccount.tsx
View file

@ -3,9 +3,8 @@ import { SubmitHandler, useForm } from "react-hook-form";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { Category, Error } from "@revoltchat/ui";
import { Category, Error, Modal } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import FormField from "../../../pages/login/FormField";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
@ -69,7 +68,6 @@ export function ModifyAccountModal({ onClose, field }: Props) {
return (
<Modal
visible={true}
onClose={onClose}
title={<Text id={`app.special.modals.account.change.${field}`} />}
disabled={processing}

3
src/context/intermediate/popovers/PendingRequests.tsx
View file

@ -4,7 +4,7 @@ import { User } from "revolt.js";
import styles from "./UserPicker.module.scss";
import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal";
import { Modal } from "@revoltchat/ui";
import { Friend } from "../../../pages/friends/Friend";
@ -16,7 +16,6 @@ interface Props {
export const PendingRequests = observer(({ users, onClose }: Props) => {
return (
<Modal
visible={true}
title={<Text id="app.special.friends.pending" />}
onClose={onClose}>
<div className={styles.list}>

4
src/context/intermediate/popovers/ServerIdentityModal.tsx
View file

@ -5,11 +5,10 @@ import styles from "./ServerIdentityModal.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Button, Category, InputBox } from "@revoltchat/ui";
import { Button, Category, InputBox, Modal } from "@revoltchat/ui";
import { noop } from "../../../lib/js";
import Modal from "../../../components/ui/Modal";
import { FileUploader } from "../../revoltjs/FileUploads";
import { useClient } from "../../revoltjs/RevoltClient";
@ -36,7 +35,6 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
return (
<Modal
visible={true}
title={
<Text
id={"app.special.popovers.server_identity.title"}

4
src/context/intermediate/popovers/UserPicker.tsx
View file

@ -2,8 +2,9 @@ import styles from "./UserPicker.module.scss";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { Modal } from "@revoltchat/ui";
import UserCheckbox from "../../../components/common/user/UserCheckbox";
import Modal from "../../../components/ui/Modal";
import { useClient } from "../../revoltjs/RevoltClient";
interface Props {
@ -20,7 +21,6 @@ export function UserPicker(props: Props) {
return (
<Modal
visible={true}
title={<Text id="app.special.popovers.user_picker.select" />}
onClose={props.onClose}
actions={[

31
src/context/intermediate/popovers/UserProfile.tsx
View file

@ -15,7 +15,14 @@ import styles from "./UserProfile.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import { Button, Category, Error, IconButton, Preloader } from "@revoltchat/ui";
import {
Button,
Category,
Error,
IconButton,
Modal,
Preloader,
} from "@revoltchat/ui";
import { noop } from "../../../lib/js";
@ -27,7 +34,6 @@ import UserIcon from "../../../components/common/user/UserIcon";
import { Username } from "../../../components/common/user/UserShort";
import UserStatus from "../../../components/common/user/UserStatus";
import Markdown from "../../../components/markdown/Markdown";
import Modal from "../../../components/ui/Modal";
import {
ClientStatus,
StatusContext,
@ -143,13 +149,8 @@ export const UserProfile = observer(
const badges = user.badges ?? 0;
const flags = user.flags ?? 0;
return (
<Modal
visible
border={dummy}
padding={false}
onClose={onClose}
dontModal={dummy}>
const children = (
<>
<div
className={styles.header}
data-force={profile?.background ? "light" : undefined}
@ -437,6 +438,18 @@ export const UserProfile = observer(
</div>
))}
</div>
</>
);
if (dummy) return <div>{children}</div>;
return (
<Modal
onClose={onClose}
nonDismissable={dummy}
transparent
maxWidth="560px">
{children}
</Modal>
);
},

5
src/pages/settings/panes/Panes.module.scss
View file

@ -128,8 +128,9 @@
border-radius: var(--border-radius);
width: 100%;
display: flex;
display: grid;
place-items: center;
flex-direction: column;
align-items: center;
justify-content: center;
grid-template-columns: minmax(auto, 100%);
> div {