/* eslint-env browser */
/**
* PresetPickerControl — the "Presets" element-control for AAE atomic widgets.
*
* Registered into Elementor's shared controlsRegistry under the type id
* 'aae-preset-picker' (see ./index.js) and rendered by the editing panel
* wherever the PHP side places an AAE_A_Preset_Picker_Control.
*
* This is an ACTION control, not a prop-bound control: it carries no stored
* value. A button opens a Dialog showing every preset for the selected
* element's type as a branded card grid, grouped by category, each with a
* larger thumbnail (or the placeholder image) and a PRO badge for premium
* presets. Picking a card REPLACES the selected element in place with the
* preset's design (settings + styles + children) via the shared
* applyPresetModel() engine in preset-apply.js (the same engine
* editor-bridge/auto-preset.js uses for the drag-drop default preset, so
* both call sites stay in lock-step), then closes the dialog.
*
* Presets are fetched on demand (per element type, on mount) from this
* plugin's own REST proxy — window.AAE_PRESET_CONFIG.restUrl (aae/v1/presets,
* see inc/Atomic/Presets/Rest.php) — which merges remote (themecrowdy.com)
* presets with any bundled local JSON server-side.
*
* Dialog/DialogTitle/DialogContent are the same @elementor/ui components
* FormActionsControl.jsx already uses for its own element-control popup —
* kept consistent with that existing convention rather than introducing a
* different modal primitive. The accent color (#ff7a00) matches this
* plugin's own established brand/upgrade color (see e.g.
* inc/admin/row-actions.php's "Upgrade to Pro" link), not a new palette.
*/
import * as React from "react";
import { useElement } from "@elementor/editor-editing-panel";
import {
__privateUseListenTo as useListenTo,
commandEndEvent,
v1ReadyEvent,
} from "@elementor/editor-v1-adapters";
import {
Box,
Button,
Chip,
CircularProgress,
Dialog,
DialogContent,
DialogTitle,
IconButton,
Skeleton,
Stack,
Typography,
} from "@elementor/ui";
import {
applyPresetModel,
hasOriginalSnapshot,
invalidatePresetsForType,
loadPresetsForType,
resetElementToOriginal,
} from "./preset-apply";
const UPGRADE_URL = "https://animation-addons.com/";
const BRAND = "#ff7a00";
const BRAND_DARK = "#e35f00";
/**
* The trigger button's loading (disabled) skin.
*
* Same hue as the live button so the control stays recognisable, but flat and
* quiet so an inert button never looks clickable. Both values are translucent
* because this button lives in the editor panel, which follows the editor's
* Dark/Light preference — an opaque pale orange would only read correctly on
* one of the two.
*/
const BRAND_TINT_BG = "rgba(255, 122, 0, 0.16)";
const BRAND_TINT_INK = "rgba(255, 138, 26, 0.85)";
/**
* The dialog paints on its OWN light surface rather than the editor theme's
* `background.paper` / `text.*` tokens. Those tokens follow the editor's
* Dark/Light preference, so on a dark editor the panel came out near-black
* while the reference design is a white sheet — the popup is a full-bleed
* gallery of light-background thumbnails, and it has to read the same either
* way. Every colour the dialog uses is therefore fixed here.
*/
const SHEET = "#ffffff";
const SHEET_BORDER = "#e6e8eb";
const INK = "#17181a";
const INK_MUTED = "#6b7280";
const THUMB_BG = "#f1f2f4";
/**
* The card grid. `auto-fill` rather than a fixed column count so the same
* definition gives the ~5 columns of the reference design at the dialog's
* full width and degrades to 2 on a narrow panel — the Grid xs/sm/md props
* it replaces could not express a 5-up row (12 columns don't divide by 5).
*/
const CARD_GRID = {
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(170px, 1fr))",
gap: { xs: 2, sm: 3 },
};
/** Group + sort presets by category for the grouped card grid render. */
function groupByCategory(presets) {
const groups = new Map();
presets.forEach((preset) => {
const category = preset.category || "";
if (!groups.has(category)) {
groups.set(category, []);
}
groups.get(category).push(preset);
});
return Array.from(groups.entries())
.sort((a, b) => a[0].localeCompare(b[0]))
.map(([category, items]) => ({ category, items }));
}
/* eslint-disable react/prop-types --
* Internal-only presentational helpers (not exported, no external callers) —
* prop-types validation is skipped here the same way the pre-existing
* `label` prop on the exported PresetPickerControl below is (this file has
* never used the PropTypes package).
*/
function PresetCard({ preset, placeholderSrc, locked, onSelect }) {
const src = preset.thumbnail_url || placeholderSrc;
return (
onSelect(preset)}
role="button"
tabIndex={0}
sx={{
cursor: "pointer",
// Borderless — the thumbnail's own tinted panel is the card, so the
// grid reads as artwork rather than a table of boxed rows.
"& .aae-preset-thumb": {
transition: "box-shadow 0.16s ease, transform 0.16s ease",
},
"&:hover .aae-preset-thumb": {
boxShadow: locked ? "none" : "0 6px 18px rgba(16, 24, 40, 0.12)",
transform: locked ? "none" : "translateY(-2px)",
},
}}
>
{locked ? (
{"🔒"}
) : null}
{preset.pro ? (
) : null}
{preset.name}
);
}
/* eslint-enable react/prop-types */
/**
* Live read of whether the selected element carries an `aae_preset_snapshot`
* — i.e. whether "Reset to Default" has anything to restore. Same
* useListenTo pattern BtnHoverStyleControl.jsx uses for its own live marker:
* a plain render-time read would already be correct here too (applying or
* resetting a preset always replaces the element with a new id, so this
* component fully re-mounts whenever the answer could change), but this
* keeps it consistent with the rest of this file's undo/redo handling.
*/
function useHasOriginalSnapshot(elementId) {
return useListenTo(
[
v1ReadyEvent(),
commandEndEvent("document/elements/create"),
commandEndEvent("document/elements/delete"),
commandEndEvent("document/elements/settings"),
commandEndEvent("document/elements/set-settings"),
],
() => hasOriginalSnapshot(elementId),
[elementId]
);
}
export function PresetPickerControl({ label }) {
const { element } = useElement();
const elementId = element.id;
const type = element.type || element.model?.get?.("elType");
const hasSnapshot = useHasOriginalSnapshot(elementId);
const [open, setOpen] = React.useState(false);
const [presets, setPresets] = React.useState(null); // null = loading
// The list could not be read in full — a request failure, or a 200 whose
// `remote_failed` flag says the remote half was unreachable. Kept separate
// from an empty list because the two must render differently (see below).
const [failed, setFailed] = React.useState(false);
const [reloadToken, setReloadToken] = React.useState(0);
const config = window.AAE_PRESET_CONFIG || {};
const proActive = !!config.proActive;
const placeholderSrc = config.placeholderThumb || "";
React.useEffect(() => {
let cancelled = false;
setPresets(null);
setFailed(false);
loadPresetsForType(type).then((result) => {
if (!cancelled) {
setPresets(Array.isArray(result?.presets) ? result.presets : []);
setFailed(!!result?.failed);
}
});
return () => {
cancelled = true;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [type, reloadToken]);
const retry = () => {
invalidatePresetsForType(type);
setReloadToken((n) => n + 1);
};
const applyPreset = (preset) => {
if (!preset?.model) {
return;
}
// The target type is always the selected element's own type — even when
// its presets were fetched under an alias (see PRESET_TYPE_ALIASES in
// preset-apply.js), applyPresetModel rewrites a non-container preset
// root to `type` so e.g. a slide item stays a slide item rather than
// becoming the loop-item type its preset was authored against.
applyPresetModel(preset.model, elementId, type, {
title: "Preset",
subtitle: `Applied "${preset.name}"`,
});
};
const handleSelect = (preset) => {
if (preset.pro && !proActive) {
window.open(UPGRADE_URL, "_blank", "noopener");
return;
}
applyPreset(preset);
setOpen(false);
};
const handleReset = () => {
resetElementToOriginal(elementId, {
title: "Reset to Default",
subtitle: "Reverted to original",
});
};
// Nothing resolved for this type from either remote or local, once loaded —
// hide the "Apply a preset…" trigger, matching the control's original empty
// behaviour. This is also the correct end-state once every bundled local
// .json is eventually removed and a type has no remote presets configured
// yet either.
//
// A FAILED read is deliberately excluded: it is not evidence that the type
// has no presets, and hiding on it was the reported "preset sometimes
// disappears" bug — one blip removed the control and, since the failure was
// also cached, nothing re-fetched it for the rest of the session. Now the
// trigger stays put and the dialog offers a retry.
const showApplyButton = !(presets !== null && !presets.length && !failed);
// Nothing at all to offer — no presets to apply AND nothing to reset back
// to — hide the whole control, same as the original behaviour.
if (!showApplyButton && !hasSnapshot) {
return null;
}
const grouped = presets ? groupByCategory(presets) : [];
// `null` is "the fetch has not settled yet" — distinct from `[]` (settled,
// nothing for this type) and from `failed`, both of which are actionable and
// must leave the button live so the dialog can explain / offer a retry.
const loading = presets === null;
return (
{label || "Presets"}
{hasSnapshot ? (
) : null}
);
}