peter
c3d88d9b20
The 43 react-refresh/only-export-components warnings the gate let through meant an edit to a provider (or AnchoredPopover, Toaster, plexDetailUi, …) could not be hot-swapped: Fast Refresh reloads a module that also exports hooks or helpers. - Each provider's contexts, the types its hooks return and the hooks themselves live in a sibling context module (navigationContext.ts, channelsContext.ts, …); the provider file keeps the component. loadAccountFilters moved next to the feed filters' defaults (feedFiltersInit.ts), following navigationInit/playlistsInit. - Helpers that sat in component files have their own modules: welcomeMode, downloadTitle, plexPlayable, channelSync, ui/anchoredPopoverHooks, ui/pageToolbarSlot, ui/pagerContent, ui/toastLevels, ui/overlayOrder, ui/tableAlign, lib/plexDetail; the cells of the channel columns and the registry's page wrappers are components files of their own (channelCells, modulePages). - usePersistedTab, an alias of useAccountPersistedState, is gone; its callers use the original. npm run lint is now eslint --max-warnings 0, so a warning fails the gate like an error does.
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { useCallback, useState, type ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Modal from "./ui/Modal";
|
|
import { Button } from "./ui/Button";
|
|
import { ChoiceContext, type ChoiceFn, type ChoiceOptions } from "./confirmContext";
|
|
|
|
// The dialog behind useConfirm()/useChoice() (see confirmContext.ts for the hooks and their contract).
|
|
|
|
export function ConfirmProvider({ children }: { children: ReactNode }) {
|
|
const { t } = useTranslation();
|
|
const [state, setState] = useState<{
|
|
opts: ChoiceOptions;
|
|
resolve: (id: string | null) => void;
|
|
} | null>(null);
|
|
|
|
const ask = useCallback<ChoiceFn>(
|
|
(opts) => new Promise<string | null>((resolve) => setState({ opts, resolve })),
|
|
[],
|
|
);
|
|
|
|
function close(id: string | null) {
|
|
state?.resolve(id);
|
|
setState(null);
|
|
}
|
|
|
|
const choices = state?.opts.choices ?? [];
|
|
// Focus Cancel when any offered action is destructive: the confirm button used to take
|
|
// autoFocus unconditionally, so a stray Enter on an open dialog executed "Delete user" or
|
|
// "Clear audit log" without the user ever looking at it.
|
|
const anyDanger = choices.some((c) => c.danger);
|
|
const multi = choices.length > 1;
|
|
|
|
return (
|
|
<ChoiceContext.Provider value={ask}>
|
|
{children}
|
|
{state && (
|
|
<Modal
|
|
title={state.opts.title ?? t("common.confirmTitle")}
|
|
onClose={() => close(null)}
|
|
maxWidth={choices.length > 1 ? "max-w-md" : "max-w-sm"}
|
|
>
|
|
<div className="text-sm text-muted leading-relaxed">{state.opts.message}</div>
|
|
{/* One action: the familiar Cancel/Confirm row. Two or more: a column, because side by
|
|
side they wrap raggedly and a wrapped button reads as a second, lesser group — and
|
|
these are peers. Ordered least to most destructive, top to bottom. */}
|
|
<div
|
|
className={multi ? "flex flex-col gap-2 mt-5" : "flex justify-end gap-2 mt-5 flex-wrap"}
|
|
>
|
|
<Button
|
|
variant="outline"
|
|
autoFocus={anyDanger}
|
|
onClick={() => close(null)}
|
|
fullWidth={multi}
|
|
className={multi ? "order-last" : ""}
|
|
>
|
|
{state.opts.cancelLabel ?? t("common.cancel")}
|
|
</Button>
|
|
{choices.map((c, i) => (
|
|
<Button
|
|
key={c.id}
|
|
variant={c.danger ? "danger" : "primary"}
|
|
autoFocus={!anyDanger && i === choices.length - 1}
|
|
onClick={() => close(c.id)}
|
|
fullWidth={multi}
|
|
>
|
|
{c.label || t("common.confirm")}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</ChoiceContext.Provider>
|
|
);
|
|
}
|