33 lines
863 B
TypeScript
33 lines
863 B
TypeScript
import { createContext, useContext } from 'react';
|
|
|
|
export type SettingsFocus = {
|
|
/** Stable anchor id for a setting tile (from settingAnchorId). */
|
|
anchorId?: string;
|
|
setAnchorId: (anchorId: string | undefined) => void;
|
|
};
|
|
|
|
const SettingsFocusContext = createContext<SettingsFocus | null>(null);
|
|
|
|
export const SettingsFocusProvider = SettingsFocusContext.Provider;
|
|
|
|
export const useSettingsFocus = (): SettingsFocus => {
|
|
const ctx = useContext(SettingsFocusContext);
|
|
if (!ctx) {
|
|
return {
|
|
anchorId: undefined,
|
|
setAnchorId: () => undefined,
|
|
};
|
|
}
|
|
return ctx;
|
|
};
|
|
|
|
/** Stable DOM id for a settings tile title. */
|
|
export function settingAnchorId(title: string): string {
|
|
const slug = title
|
|
.trim()
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-|-$/g, '');
|
|
return `settings-item-${slug || 'untitled'}`;
|
|
}
|