Delete file · Hold to confirm

Delete file

A file card where delete needs a full press. Let go early and the file stays.

coral-sky-proof-03.tif48.2 MB · Edited 2 hours ago by Mara Lind

Release early, move off the button or press Esc to cancel.

import { createHoldToConfirm } from "@reuse-sh/interactions";
import "@reuse-sh/interactions/styles.css";

const hold = createHoldToConfirm(card.querySelector(".delete"), {
  holdMs: 1200,
  onConfirm: async () => {
    await files.remove(file.id);
    card.replaceWith(deletedNotice(file));
  },
});

import { HoldToConfirmButton } from "@reuse-sh/interactions/react";

export function DeleteFile({ file, onDelete }) {
  return (
    <HoldToConfirmButton holdMs={1200} onConfirm={() => onDelete(file.id)}>
      Hold to delete
    </HoldToConfirmButton>
  );
}