+ {t("presetLocked")} +
+ + ); +}; + +/** One prebuilt page, as the picker lists it. */ +interface NavigationPresetOption { + icon: null | string; + label: string; + pluginId: string; + value: string; +} + +const matchesPresetSearch = ( + option: NavigationPresetOption, + query: string, +): boolean => { + const terms = query.toLowerCase().split(/\s+/).filter(Boolean); + const haystack = `${option.label} ${option.pluginId}`.toLowerCase(); + + return terms.every(term => haystack.includes(term)); +}; + +const NavigationPresetField = ({ + presets, + usedPresetKeys, + ...props +}: ItemAutoFormComponentProps & { + presets: NavigationPreset[]; + usedPresetKeys: string[]; +}) => { + const t = useTranslations("admin.navigation.form"); + const tGlobal = useTranslations("core.global"); + const locale = useLocale(); + const translate = useNavigationTranslate(); + const { form } = useFormApi(); + const { field, otherProps } = props; + + const labelsOf = (preset: NavigationPreset) => + navigationItemLabels({ + item: presetLabelSource(preset), + locale, + translate, + }); + + const options: NavigationPresetOption[] = presets + .map(preset => ({ + icon: preset.icon, + label: labelsOf(preset).title || preset.id, + pluginId: preset.pluginId, + value: navigationPresetKey(preset.pluginId, preset.id), + })) + .filter(option => !usedPresetKeys.includes(option.value)); + + const selected = options.find(option => option.value === field.value) ?? null; + + /** Picking a page names the item, unless the admin already named it. */ + const onSelect = (option: NavigationPresetOption | null) => { + const previous = presetOf(presets, String(field.value ?? "")); + const next = option ? presetOf(presets, option.value) : undefined; + + field.onChange(option?.value ?? ""); + + const values = form.state.values as AdminNavigationFormValues; + const previousLabels = previous ? labelsOf(previous) : undefined; + const nextLabels = next ? labelsOf(next) : undefined; + + const title = autofillNavigationText({ + locale, + nextFallback: nextLabels?.title, + previousFallback: previousLabels?.title, + values: values.title, + }); + if (title) form.setFieldValue("title", title); + + const description = autofillNavigationText({ + locale, + nextFallback: nextLabels?.description, + previousFallback: previousLabels?.description, + values: values.description, + }); + if (description) form.setFieldValue("description", description); + + const icon = autofillNavigationIcon({ + icon: values.icon, + nextIcon: next?.icon, + previousIcon: previous?.icon, + }); + if (icon !== undefined) form.setFieldValue("icon", icon); + }; + + return ( + <> ++ {t("presetEmpty")} +
+ ) : ( +