53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import clsx from "clsx";
|
|
import { useSubmit, useNavigation } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ChevronUpIcon, ChevronDownIcon } from "~/components/ui/icons/vendor";
|
|
|
|
interface Props {
|
|
id: string;
|
|
order: number;
|
|
editable?: boolean;
|
|
}
|
|
export default function RowOrderButtons({ id, order, editable = true }: Props) {
|
|
const { t } = useTranslation();
|
|
const submit = useSubmit();
|
|
const navigation = useNavigation();
|
|
const loading = navigation.state === "submitting";
|
|
function changeOrder(forward: boolean) {
|
|
const form = new FormData();
|
|
form.set("action", forward ? "move-down" : "move-up");
|
|
form.set("id", id);
|
|
submit(form, {
|
|
method: "post",
|
|
});
|
|
}
|
|
return (
|
|
<div className="flex items-center space-x-1 truncate">
|
|
<button
|
|
type="button"
|
|
onClick={() => changeOrder(false)}
|
|
className={clsx(
|
|
!editable || loading ? " bg-secondary/90 cursor-not-allowed text-gray-300" : "hover:text-foreground hover:bg-secondary/90",
|
|
"text-muted-foreground bg-secondary h-4 w-4 px-0.5 py-0.5 focus:outline-hidden"
|
|
)}
|
|
disabled={!editable || loading}
|
|
aria-label={t("shared.moveUp")}
|
|
>
|
|
<ChevronUpIcon className="h-3 w-3" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => changeOrder(true)}
|
|
className={clsx(
|
|
!editable || loading ? " bg-secondary/90 cursor-not-allowed text-gray-300" : "hover:text-foreground hover:bg-secondary/90",
|
|
"text-muted-foreground bg-secondary h-4 w-4 px-0.5 py-0.5 focus:outline-hidden"
|
|
)}
|
|
disabled={!editable || loading}
|
|
aria-label={t("shared.moveDown")}
|
|
>
|
|
<ChevronDownIcon className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|