@@ -110,20 +180,23 @@ function Preferences(): JSX.Element {
}
/** Hide invisible preferences. Remote empty categories and subCategories */
-export function usePrefDefinitions() {
+export function usePrefDefinitions(prefType: PreferenceType = 'user') {
const isDarkMode = useDarkMode();
const isRedirecting = React.useContext(userPreferences.Context) !== undefined;
- const preferencesVisibilityContext = React.useMemo(
- () => ({
- isDarkMode,
- isRedirecting,
- }),
- [isDarkMode, isRedirecting]
+
+ const visibilityContext = React.useMemo(
+ () =>
+ prefType === 'user'
+ ? { isDarkMode, isRedirecting }
+ : { isDarkMode: false, isRedirecting: false },
+ [prefType, isDarkMode, isRedirecting]
);
+ const definitions = preferenceDefinitions[prefType];
+
return React.useMemo(
() =>
- Object.entries(userPreferenceDefinitions as GenericPreferences)
+ Object.entries(definitions)
.map(
([category, { subCategories, ...categoryData }]) =>
[
@@ -140,7 +213,7 @@ export function usePrefDefinitions() {
items: Object.entries(items).filter(
([_name, { visible }]) =>
typeof visible === 'function'
- ? visible(preferencesVisibilityContext)
+ ? visible(visibilityContext)
: visible !== false
),
},
@@ -151,157 +224,254 @@ export function usePrefDefinitions() {
] as const
)
.filter(([_name, { subCategories }]) => subCategories.length > 0),
- [preferencesVisibilityContext]
+ [definitions, visibilityContext]
);
}
export function PreferencesContent({
forwardRefs,
+ prefType = 'user',
}: {
readonly forwardRefs?: (index: number, element: HTMLElement | null) => void;
+ readonly prefType?: PreferenceType;
}): JSX.Element {
const isReadOnly = React.useContext(ReadOnlyContext);
- const definitions = usePrefDefinitions();
+ const definitions = usePrefDefinitions(prefType);
+ const basePreferences = preferenceInstances[prefType];
+ const preferences =
+ React.useContext(basePreferences.Context) ?? basePreferences;
+ const resolveDocumentHref = documentHrefResolvers[prefType];
+ const definitionsMap = React.useMemo(
+ () => new Map(definitions),
+ [definitions]
+ );
+
+ const renderSubCategory = React.useCallback(
+ (
+ categoryKey: string,
+ subcategoryKey: string,
+ {
+ title,
+ description = undefined,
+ items,
+ }: {
+ readonly title: LocalizedString | (() => LocalizedString);
+ readonly description?: LocalizedString | (() => LocalizedString);
+ readonly items: readonly (readonly [string, PreferenceItem
])[];
+ },
+ options: { readonly hideTitle?: boolean } = {}
+ ): JSX.Element => {
+ const subcategoryDocument =
+ SUBCATEGORY_DOCS_MAP[categoryKey]?.[subcategoryKey];
+ const { hideTitle = false } = options;
+
+ return (
+
+
+
+ {typeof title === 'function' ? title() : title}
+
+
+
+ items.forEach(([name]) => {
+ const definition = preferences.definition(
+ categoryKey as never,
+ subcategoryKey as never,
+ name as never
+ );
+ preferences.set(
+ categoryKey as never,
+ subcategoryKey as never,
+ name as never,
+ definition.defaultValue as never
+ );
+ })
+ }
+ >
+ {commonText.reset()}
+
+
+
+
+
+
+
+ )}
+ {description !== undefined && (
+
+ {typeof description === 'function' ? description() : description}
+
+ )}
+ {items.map(([name, item]) => {
+ const canEdit =
+ !isReadOnly &&
+ (item.visible !== 'protected' ||
+ hasPermission('/preferences/user', 'edit_protected'));
+ const documentHref = resolveDocumentHref?.(
+ categoryKey,
+ subcategoryKey,
+ name
+ );
+ const stackDocumentation =
+ prefType === 'collection' && documentHref !== undefined;
+ const props = {
+ className: `
+ flex items-start gap-2 md:flex-row flex-col
+ ${canEdit ? '' : '!cursor-not-allowed'}
+ `,
+ key: name,
+ title: canEdit
+ ? undefined
+ : preferencesText.adminsOnlyPreference(),
+ };
+ const children = (
+ <>
+
+
+
+
+ {(item.description !== undefined ||
+ documentHref !== undefined) && (
+
+ {item.description !== undefined && (
+
+ )}
+ {documentHref !== undefined && (
+
+ {headerText.documentation()}
+
+ )}
+
+ )}
+
+
+
+
+ );
+ return 'container' in item && item.container === 'div' ? (
+ {children}
+ ) : (
+
+ );
+ })}
+
+ );
+ },
+ [isReadOnly, prefType, preferences, resolveDocumentHref]
+ );
+
return (
{definitions.map(
(
[category, { title, description = undefined, subCategories }],
index
- ) => (
-
-
-
- {typeof title === 'function' ? title() : title}
-
- {description !== undefined && (
-
- {typeof description === 'function'
- ? description()
- : description}
-
- )}
- {subCategories.map(
- ([subcategory, { title, description = undefined, items }]) => (
-
-
-
- {typeof title === 'function' ? title() : title}
-
-
-
- items.forEach(([name]) => {
- userPreferences.set(
- category as 'general',
- subcategory as 'ui',
- name as 'theme',
- /*
- * Need to get default value via this
- * function as defaults may be changed
- */
- userPreferences.definition(
- category as 'general',
- subcategory as 'ui',
- name as 'theme'
- ).defaultValue
- );
- })
- }
- >
- {commonText.reset()}
-
-
-
- {typeof description === 'function'
- ? description()
- : description}
-
- )}
- {items.map(([name, item]) => {
- const canEdit =
- !isReadOnly &&
- (item.visible !== 'protected' ||
- hasPermission('/preferences/user', 'edit_protected'));
- const props = {
- className: `
- flex items-start gap-2 md:flex-row flex-col
- ${canEdit ? '' : '!cursor-not-allowed'}
- `,
- key: name,
- title: canEdit
- ? undefined
- : preferencesText.adminsOnlyPreference(),
- };
- const children = (
- <>
-
-
-
-
- {item.description !== undefined && (
-
-
-
- )}
-
-
-
-
- );
- return 'container' in item && item.container === 'div' ? (
- {children}
- ) : (
-
- );
- })}
-
- )
- )}
-
-
- )
+ ) => {
+ if (
+ prefType === 'collection' &&
+ category === 'catalogNumberParentInheritance'
+ )
+ return null;
+
+ const isCatalogInheritance =
+ prefType === 'collection' &&
+ category === 'catalogNumberInheritance';
+ const parentDefinition = isCatalogInheritance
+ ? (definitionsMap.get('catalogNumberParentInheritance') ??
+ undefined)
+ : undefined;
+
+ return (
+
+
+
+ {typeof title === 'function' ? title() : title}
+
+ {description !== undefined && (
+
+ {typeof description === 'function'
+ ? description()
+ : description}
+
+ )}
+ {subCategories.map(([subcategory, data]) =>
+ renderSubCategory(category, subcategory, data)
+ )}
+ {isCatalogInheritance &&
+ parentDefinition?.subCategories.map(([subcategory, data]) =>
+ renderSubCategory(
+ 'catalogNumberParentInheritance',
+ subcategory,
+ data
+ )
+ )}
+
+
+ );
+ }
)}