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

Re-write types for modal actions.

Browse source
This commit is contained in:
Paul 2021-07-06 11:34:36 +01:00
parent ea65825454
commit 98e0edd331
9 changed files with 31 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/ui/Button.tsx
View file

@ -6,6 +6,8 @@ interface Props {
readonly error?: boolean; readonly error?: boolean;
} }
export type ButtonProps = Props & Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'as'>;
export default styled.button<Props>` export default styled.button<Props>`
z-index: 1; z-index: 1;
display: flex; display: flex;

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

@ -1,10 +1,9 @@
import styled, { css, keyframes } from "styled-components"; import styled, { css, keyframes } from "styled-components";
import classNames from "classnames";
import { createPortal, useEffect } from "preact/compat"; import { createPortal, useEffect } from "preact/compat";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import Button from "./Button"; import Button, { ButtonProps } from "./Button";
const open = keyframes` const open = keyframes`
0% {opacity: 0;} 0% {opacity: 0;}
@ -100,12 +99,9 @@ const ModalActions = styled.div`
background: var(--secondary-background); background: var(--secondary-background);
`; `;
export interface Action { export type Action = Omit<ButtonProps, 'onClick'> & {
text: Children;
onClick: () => void;
confirmation?: boolean; confirmation?: boolean;
contrast?: boolean; onClick: () => void;
error?: boolean;
} }
interface Props { interface Props {
@ -181,15 +177,9 @@ export default function Modal(props: Props) {
{content} {content}
{props.actions && ( {props.actions && (
<ModalActions> <ModalActions>
{props.actions.map((x) => ( {props.actions.map((x) =>
<Button <Button {...x} disabled={props.disabled} />
contrast={x.contrast ?? true} )}
error={x.error ?? false}
onClick={x.onClick}
disabled={props.disabled}>
{x.text}
</Button>
))}
</ModalActions> </ModalActions>
)} )}
</ModalContainer> </ModalContainer>

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

@ -17,7 +17,7 @@ export function ClipboardModal({ onClose, text }: Props) {
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.close" />, children: <Text id="app.special.modals.actions.close" />,
}, },
]}> ]}>
{location.protocol !== "https:" && ( {location.protocol !== "https:" && (

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

@ -17,11 +17,11 @@ export function ErrorModal({ onClose, error }: Props) {
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" />, children: <Text id="app.special.modals.actions.ok" />,
}, },
{ {
onClick: () => location.reload(), onClick: () => location.reload(),
text: <Text id="app.special.modals.actions.reload" />, children: <Text id="app.special.modals.actions.reload" />,
}, },
]}> ]}>
<Text id={`error.${error}`}>{error}</Text> <Text id={`error.${error}`}>{error}</Text>

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

@ -39,7 +39,7 @@ export function InputModal({
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" />, children: <Text id="app.special.modals.actions.ok" />,
onClick: () => { onClick: () => {
setProcessing(true); setProcessing(true);
callback(value) callback(value)
@ -51,7 +51,7 @@ export function InputModal({
}, },
}, },
{ {
text: <Text id="app.special.modals.actions.cancel" />, children: <Text id="app.special.modals.actions.cancel" />,
onClick: onClose, onClick: onClose,
}, },
]} ]}
@ -155,7 +155,7 @@ export function SpecialInputModal(props: SpecialProps) {
status: { status: {
...client.user?.status, ...client.user?.status,
text: text.trim().length > 0 ? text : undefined, text: text.trim().length > 0 ? text : undefined,
}, }
}) })
} }
/> />

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

@ -122,7 +122,7 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: ( children: (
<Text <Text
id={`app.special.modals.actions.${event[1]}`} id={`app.special.modals.actions.${event[1]}`}
/> />
@ -165,7 +165,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
@ -192,7 +192,7 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: ( children: (
<Text id="app.special.modals.actions.delete" /> <Text id="app.special.modals.actions.delete" />
), ),
onClick: async () => { onClick: async () => {
@ -212,10 +212,11 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
plain: true,
}, },
]} ]}
content={ content={
@ -255,12 +256,12 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.create_invite`} />} question={<Text id={`app.context_menu.create_invite`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ok" />, children: <Text id="app.special.modals.actions.ok" />,
confirmation: true, confirmation: true,
onClick: onClose, onClick: onClose,
}, },
{ {
text: <Text id="app.context_menu.copy_link" />, children: <Text id="app.context_menu.copy_link" />,
onClick: () => onClick: () =>
writeClipboard( writeClipboard(
`${window.location.protocol}//${window.location.host}/invite/${code}`, `${window.location.protocol}//${window.location.host}/invite/${code}`,
@ -291,7 +292,7 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.kick_member`} />} question={<Text id={`app.context_menu.kick_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.kick" />, children: <Text id="app.special.modals.actions.kick" />,
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
@ -311,7 +312,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
@ -341,7 +342,7 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.ban_member`} />} question={<Text id={`app.context_menu.ban_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ban" />, children: <Text id="app.special.modals.actions.ban" />,
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
@ -362,7 +363,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
@ -404,7 +405,7 @@ export function SpecialPromptModal(props: SpecialProps) {
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
text: ( children: (
<Text id="app.special.modals.actions.create" /> <Text id="app.special.modals.actions.create" />
), ),
onClick: async () => { onClick: async () => {
@ -432,7 +433,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,

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

@ -16,7 +16,7 @@ export function SignedOutModal({ onClose }: Props) {
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" />, children: <Text id="app.special.modals.actions.ok" />,
}, },
]} ]}
/> />

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

@ -71,7 +71,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
{ {
confirmation: true, confirmation: true,
onClick: handleSubmit(onSubmit), onClick: handleSubmit(onSubmit),
text: children:
field === "email" ? ( field === "email" ? (
<Text id="app.special.modals.actions.send_email" /> <Text id="app.special.modals.actions.send_email" />
) : ( ) : (
@ -80,7 +80,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
}, },
{ {
onClick: onClose, onClick: onClose,
text: <Text id="app.special.modals.actions.close" />, children: <Text id="app.special.modals.actions.close" />,
}, },
]}> ]}>
{/* Preact / React typing incompatabilities */} {/* Preact / React typing incompatabilities */}

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

@ -28,7 +28,7 @@ export function UserPicker(props: Props) {
onClose={props.onClose} onClose={props.onClose}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ok" />, children: <Text id="app.special.modals.actions.ok" />,
onClick: () => props.callback(selected).then(props.onClose), onClick: () => props.callback(selected).then(props.onClose),
}, },
]}> ]}>