abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases 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
Download Patch File Download Diff File Expand all files Collapse all files

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>
);
},