cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 07:00:58 -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;
}
export type ButtonProps = Props & Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'as'>;
export default styled.button<Props>`
z-index: 1;
display: flex;

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

@ -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>

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

@ -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:" && (

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

@ -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>

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

@ -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,
},
}
})
}
/>

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

@ -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,

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

@ -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" />,
},
]}
/>

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

@ -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 */}

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

@ -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),
},
]}>