refactor: extract Button to component, reformat all files with Prettier
This commit is contained in:
parent
1080d8a0cd
commit
bfdaafeb0a
15 changed files with 504 additions and 335 deletions
65
frontend/components/Button.tsx
Normal file
65
frontend/components/Button.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { MouseEventHandler, ReactNode } from "react";
|
||||
|
||||
export enum ButtonStyle {
|
||||
primary,
|
||||
success,
|
||||
danger,
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
onClick?: MouseEventHandler<HTMLButtonElement>;
|
||||
style?: ButtonStyle;
|
||||
bold?: boolean;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export default function Button(props: Props) {
|
||||
if (props.style === undefined) {
|
||||
return PrimaryButton(props);
|
||||
}
|
||||
|
||||
switch (props.style) {
|
||||
case ButtonStyle.primary:
|
||||
return PrimaryButton(props);
|
||||
case ButtonStyle.success:
|
||||
return SuccessButton(props);
|
||||
case ButtonStyle.danger:
|
||||
return DangerButton(props);
|
||||
}
|
||||
}
|
||||
|
||||
function PrimaryButton(props: Props) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
className="bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 rounded-md text-white"
|
||||
>
|
||||
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function SuccessButton(props: Props) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
className="bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 rounded-md text-white"
|
||||
>
|
||||
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function DangerButton(props: Props) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md text-white"
|
||||
>
|
||||
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,128 +1,129 @@
|
|||
import {
|
||||
EmojiLaughing,
|
||||
HandThumbsDown,
|
||||
HandThumbsUp,
|
||||
Heart,
|
||||
People,
|
||||
Trash3,
|
||||
EmojiLaughing,
|
||||
HandThumbsDown,
|
||||
HandThumbsUp,
|
||||
Heart,
|
||||
People,
|
||||
Trash3,
|
||||
} from "react-bootstrap-icons";
|
||||
|
||||
import Card from "./Card";
|
||||
import TextInput from "./TextInput";
|
||||
import Button, { ButtonStyle } from "./Button";
|
||||
|
||||
export interface EditField {
|
||||
id: number;
|
||||
name: string;
|
||||
pronouns: Record<string, PronounChoice>;
|
||||
id: number;
|
||||
name: string;
|
||||
pronouns: Record<string, PronounChoice>;
|
||||
}
|
||||
|
||||
export enum PronounChoice {
|
||||
favourite,
|
||||
okay,
|
||||
jokingly,
|
||||
friendsOnly,
|
||||
avoid,
|
||||
favourite,
|
||||
okay,
|
||||
jokingly,
|
||||
friendsOnly,
|
||||
avoid,
|
||||
}
|
||||
|
||||
type EditableCardProps = {
|
||||
field: EditField;
|
||||
onChangeName: React.ChangeEventHandler<HTMLInputElement>;
|
||||
onChangeFavourite(
|
||||
e: React.MouseEvent<HTMLButtonElement>,
|
||||
entry: string
|
||||
): void;
|
||||
onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
|
||||
field: EditField;
|
||||
onChangeName: React.ChangeEventHandler<HTMLInputElement>;
|
||||
onChangeFavourite(
|
||||
e: React.MouseEvent<HTMLButtonElement>,
|
||||
entry: string
|
||||
): void;
|
||||
onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
|
||||
onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
|
||||
};
|
||||
|
||||
export function EditableCard(props: EditableCardProps) {
|
||||
const footer = (
|
||||
<div className="flex justify-between">
|
||||
<TextInput value={props.field.name} onChange={props.onChangeName} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClickDelete}
|
||||
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md"
|
||||
>
|
||||
<Trash3 aria-hidden className="inline" />{" "}
|
||||
<span className="font-bold">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
const footer = (
|
||||
<div className="flex justify-between">
|
||||
<TextInput value={props.field.name} onChange={props.onChangeName} />
|
||||
<Button style={ButtonStyle.danger} onClick={props.onClickDelete}>
|
||||
<Trash3 aria-hidden className="inline" /> Delete
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card title={props.field.name} draggable footer={footer}>
|
||||
<ul>
|
||||
{Object.keys(props.field.pronouns).map((pronoun, index) => {
|
||||
const choice = props.field.pronouns[pronoun];
|
||||
return (
|
||||
<li className="flex justify-between my-1" key={index}>
|
||||
<div>{pronoun}</div>
|
||||
<div className="rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeFavourite(e, pronoun)}
|
||||
className={`${choice == PronounChoice.favourite
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<Heart />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeOkay(e, pronoun)}
|
||||
className={`${choice == PronounChoice.okay
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<HandThumbsUp />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeJokingly(e, pronoun)}
|
||||
className={`${choice == PronounChoice.jokingly
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<EmojiLaughing />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeFriends(e, pronoun)}
|
||||
className={`${choice == PronounChoice.friendsOnly
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<People />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeAvoid(e, pronoun)}
|
||||
className={`${choice == PronounChoice.avoid
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<HandThumbsDown />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
|
||||
>
|
||||
<Trash3 />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Card>
|
||||
);
|
||||
return (
|
||||
<Card title={props.field.name} draggable footer={footer}>
|
||||
<ul>
|
||||
{Object.keys(props.field.pronouns).map((pronoun, index) => {
|
||||
const choice = props.field.pronouns[pronoun];
|
||||
return (
|
||||
<li className="flex justify-between my-1" key={index}>
|
||||
<div>{pronoun}</div>
|
||||
<div className="rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeFavourite(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.favourite
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<Heart />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeOkay(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.okay
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<HandThumbsUp />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeJokingly(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.jokingly
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<EmojiLaughing />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeFriends(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.friendsOnly
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<People />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeAvoid(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.avoid
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<HandThumbsDown />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
|
||||
>
|
||||
<Trash3 />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
import { ChangeEventHandler } from "react";
|
||||
|
||||
export type Props = {
|
||||
defaultValue?: string;
|
||||
value?: string;
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
contrastBackground?: boolean;
|
||||
defaultValue?: string;
|
||||
value?: string;
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
};
|
||||
|
||||
export default function TextInput(props: Props) {
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
className="p-1 lg:p-2 rounded-md bg-white border-slate-300 text-black dark:bg-slate-800 dark:border-slate-900 dark:text-white"
|
||||
defaultValue={props.defaultValue}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
);
|
||||
const bg = props.contrastBackground
|
||||
? "bg-slate-50 dark:bg-slate-700"
|
||||
: "bg-white dark:bg-slate-800";
|
||||
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
className={`p-1 lg:p-2 rounded-md ${bg} border-slate-300 text-black dark:border-slate-900 dark:text-white`}
|
||||
defaultValue={props.defaultValue}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue