From 98e0edd3312ad7cb94336a7d3465034b61cfd380 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Tue, 6 Jul 2021 11:34:36 +0100
Subject: [PATCH] Re-write types for modal actions.
---
src/components/ui/Button.tsx | 2 ++
src/components/ui/Modal.tsx | 22 +++++-----------
src/context/intermediate/modals/Clipboard.tsx | 2 +-
src/context/intermediate/modals/Error.tsx | 4 +--
src/context/intermediate/modals/Input.tsx | 6 ++---
src/context/intermediate/modals/Prompt.tsx | 25 ++++++++++---------
src/context/intermediate/modals/SignedOut.tsx | 2 +-
.../intermediate/popovers/ModifyAccount.tsx | 4 +--
.../intermediate/popovers/UserPicker.tsx | 2 +-
9 files changed, 31 insertions(+), 38 deletions(-)
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index ecd4e79..2b72e4e 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -6,6 +6,8 @@ interface Props {
readonly error?: boolean;
}
+export type ButtonProps = Props & Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'as'>;
+
export default styled.button<Props>`
z-index: 1;
display: flex;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 15f47e8..df77a07 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -1,10 +1,9 @@
import styled, { css, keyframes } from "styled-components";
-import classNames from "classnames";
import { createPortal, useEffect } from "preact/compat";
import { Children } from "../../types/Preact";
-import Button from "./Button";
+import Button, { ButtonProps } from "./Button";
const open = keyframes`
0% {opacity: 0;}
@@ -100,12 +99,9 @@ const ModalActions = styled.div`
background: var(--secondary-background);
`;
-export interface Action {
- text: Children;
- onClick: () => void;
+export type Action = Omit<ButtonProps, 'onClick'> & {
confirmation?: boolean;
- contrast?: boolean;
- error?: boolean;
+ onClick: () => void;
}
interface Props {
@@ -181,15 +177,9 @@ export default function Modal(props: Props) {
{content}
{props.actions && (
<ModalActions>
- {props.actions.map((x) => (
- <Button
- contrast={x.contrast ?? true}
- error={x.error ?? false}
- onClick={x.onClick}
- disabled={props.disabled}>
- {x.text}
- </Button>
- ))}
+ {props.actions.map((x) =>
+ <Button {...x} disabled={props.disabled} />
+ )}
</ModalActions>
)}
</ModalContainer>
diff --git a/src/context/intermediate/modals/Clipboard.tsx b/src/context/intermediate/modals/Clipboard.tsx
index d84c43d..03a7e0b 100644
--- a/src/context/intermediate/modals/Clipboard.tsx
+++ b/src/context/intermediate/modals/Clipboard.tsx
@@ -17,7 +17,7 @@ export function ClipboardModal({ onClose, text }: Props) {
{
onClick: onClose,
confirmation: true,
- text: <Text id="app.special.modals.actions.close" />,
+ children: <Text id="app.special.modals.actions.close" />,
},
]}>
{location.protocol !== "https:" && (
diff --git a/src/context/intermediate/modals/Error.tsx b/src/context/intermediate/modals/Error.tsx
index 64cadeb..bef27eb 100644
--- a/src/context/intermediate/modals/Error.tsx
+++ b/src/context/intermediate/modals/Error.tsx
@@ -17,11 +17,11 @@ export function ErrorModal({ onClose, error }: Props) {
{
onClick: onClose,
confirmation: true,
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
},
{
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>
diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx
index 9f2b37a..0af0163 100644
--- a/src/context/intermediate/modals/Input.tsx
+++ b/src/context/intermediate/modals/Input.tsx
@@ -39,7 +39,7 @@ export function InputModal({
actions={[
{
confirmation: true,
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
onClick: () => {
setProcessing(true);
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,
},
]}
@@ -155,7 +155,7 @@ export function SpecialInputModal(props: SpecialProps) {
status: {
...client.user?.status,
text: text.trim().length > 0 ? text : undefined,
- },
+ }
})
}
/>
diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx
index c09e1bb..de7adfd 100644
--- a/src/context/intermediate/modals/Prompt.tsx
+++ b/src/context/intermediate/modals/Prompt.tsx
@@ -122,7 +122,7 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true,
contrast: true,
error: true,
- text: (
+ children: (
<Text
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" />
),
onClick: onClose,
@@ -192,7 +192,7 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true,
contrast: true,
error: true,
- text: (
+ children: (
<Text id="app.special.modals.actions.delete" />
),
onClick: async () => {
@@ -212,10 +212,11 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
+ plain: true,
},
]}
content={
@@ -255,12 +256,12 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.create_invite`} />}
actions={[
{
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
confirmation: true,
onClick: onClose,
},
{
- text: <Text id="app.context_menu.copy_link" />,
+ children: <Text id="app.context_menu.copy_link" />,
onClick: () =>
writeClipboard(
`${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`} />}
actions={[
{
- text: <Text id="app.special.modals.actions.kick" />,
+ children: <Text id="app.special.modals.actions.kick" />,
contrast: true,
error: true,
confirmation: true,
@@ -311,7 +312,7 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
@@ -341,7 +342,7 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.ban_member`} />}
actions={[
{
- text: <Text id="app.special.modals.actions.ban" />,
+ children: <Text id="app.special.modals.actions.ban" />,
contrast: true,
error: true,
confirmation: true,
@@ -362,7 +363,7 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
@@ -404,7 +405,7 @@ export function SpecialPromptModal(props: SpecialProps) {
{
confirmation: true,
contrast: true,
- text: (
+ children: (
<Text id="app.special.modals.actions.create" />
),
onClick: async () => {
@@ -432,7 +433,7 @@ export function SpecialPromptModal(props: SpecialProps) {
},
},
{
- text: (
+ children: (
<Text id="app.special.modals.actions.cancel" />
),
onClick: onClose,
diff --git a/src/context/intermediate/modals/SignedOut.tsx b/src/context/intermediate/modals/SignedOut.tsx
index 7c7f357..7b4979f 100644
--- a/src/context/intermediate/modals/SignedOut.tsx
+++ b/src/context/intermediate/modals/SignedOut.tsx
@@ -16,7 +16,7 @@ export function SignedOutModal({ onClose }: Props) {
{
onClick: onClose,
confirmation: true,
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
},
]}
/>
diff --git a/src/context/intermediate/popovers/ModifyAccount.tsx b/src/context/intermediate/popovers/ModifyAccount.tsx
index 2b8aaf2..f07e23e 100644
--- a/src/context/intermediate/popovers/ModifyAccount.tsx
+++ b/src/context/intermediate/popovers/ModifyAccount.tsx
@@ -71,7 +71,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
{
confirmation: true,
onClick: handleSubmit(onSubmit),
- text:
+ children:
field === "email" ? (
<Text id="app.special.modals.actions.send_email" />
) : (
@@ -80,7 +80,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
},
{
onClick: onClose,
- text: <Text id="app.special.modals.actions.close" />,
+ children: <Text id="app.special.modals.actions.close" />,
},
]}>
{/* Preact / React typing incompatabilities */}
diff --git a/src/context/intermediate/popovers/UserPicker.tsx b/src/context/intermediate/popovers/UserPicker.tsx
index 0dc0792..748bdc0 100644
--- a/src/context/intermediate/popovers/UserPicker.tsx
+++ b/src/context/intermediate/popovers/UserPicker.tsx
@@ -28,7 +28,7 @@ export function UserPicker(props: Props) {
onClose={props.onClose}
actions={[
{
- text: <Text id="app.special.modals.actions.ok" />,
+ children: <Text id="app.special.modals.actions.ok" />,
onClick: () => props.callback(selected).then(props.onClose),
},
]}>
--
GitLab