3ef8b53fad
refs. https://linear.app/tryghost/issue/DES-21/empty-screen-is-missing-for-search-in-settings - Search is one of the most useful functions in Settings and currently the screen when there's no result for a searchterm is just a plain white screen. Very non user-friendly. - This update gives us an opportunity to improve the overall visual hierarchy and focus of Settings in general. --------- Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
import React, {useEffect, useState} from 'react';
|
|
import {SettingGroup as Base, SettingGroupProps} from '@tryghost/admin-x-design-system';
|
|
import {useRouting} from '@tryghost/admin-x-framework/routing';
|
|
import {useScrollSection} from '../hooks/useScrollSection';
|
|
import {useSearch} from './providers/SettingsAppProvider';
|
|
|
|
const TopLevelGroup: React.FC<Omit<SettingGroupProps, 'isVisible' | 'highlight'> & {keywords: string[]}> = ({keywords, navid, ...props}) => {
|
|
const {checkVisible, noResult} = useSearch();
|
|
const {route} = useRouting();
|
|
const [highlight, setHighlight] = useState(false);
|
|
const {ref} = useScrollSection(navid);
|
|
|
|
useEffect(() => {
|
|
setHighlight(route === navid);
|
|
}, [route, navid]);
|
|
|
|
useEffect(() => {
|
|
if (highlight) {
|
|
setTimeout(() => {
|
|
setHighlight(false);
|
|
}, 2000);
|
|
}
|
|
}, [highlight]);
|
|
|
|
return <Base ref={ref} highlight={highlight} isVisible={checkVisible(keywords) || noResult} navid={navid} {...props} />;
|
|
};
|
|
|
|
export default TopLevelGroup;
|