GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14062 from storybookjs/search-stories

Browse Source 
UI: Enable search for stories and fix `/` event listener
This commit is contained in:
Michael Shilman 2021-02-26 20:33:35 +08:00 committed by GitHub
commit 0c68ffe182
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/api/src/lib/shortcut.ts
View File

@ -63,11 +63,10 @@ export const shortcutMatchesShortcut = (
inputShortcut: KeyCollection,
shortcut: KeyCollection
): boolean => {
return (
inputShortcut &&
inputShortcut.length === shortcut.length &&
!inputShortcut.find((key, i) => key !== shortcut[i])
);
if (!inputShortcut || !shortcut) return false;
if (inputShortcut.join('') === 'shift/') inputShortcut.shift(); // shift is optional for `/`
if (inputShortcut.length !== shortcut.length) return false;
return !inputShortcut.find((key, i) => key !== shortcut[i]);
};
// Should this keyboard event trigger this keyboard shortcut?

3
lib/api/src/modules/layout.ts
View File

@ -202,13 +202,14 @@ export const init: ModuleFn = ({ store, provider }) => {
);
},
focusOnUIElement(elementId?: string) {
focusOnUIElement(elementId?: string, select?: boolean) {
if (!elementId) {
return;
}
const element = document.getElementById(elementId);
if (element) {
element.focus();
if (select) element.select();
}
},

2
lib/api/src/modules/shortcuts.ts
View File

@ -167,7 +167,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
}
setTimeout(() => {
fullAPI.focusOnUIElement(focusableUIElements.storySearchField);
fullAPI.focusOnUIElement(focusableUIElements.storySearchField, true);
}, 0);
break;
}

42
lib/ui/src/components/sidebar/Search.tsx
View File

@ -5,7 +5,7 @@ import Downshift, { DownshiftState, StateChangeOptions } from 'downshift';
import Fuse, { FuseOptions } from 'fuse.js';
import { document } from 'global';
import { transparentize } from 'polished';
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
import React, { useMemo, useRef, useState, useCallback } from 'react';
import { DEFAULT_REF_ID } from './data';
import {
@ -21,7 +21,6 @@ import {
isCloseType,
} from './types';
import { searchItem } from './utils';
import { matchesKeyCode, matchesModifiers } from '../../keybinding';
const DEFAULT_MAX_SEARCH_RESULTS = 50;
@ -173,26 +172,6 @@ export const Search = React.memo<{
[api, inputRef, showAllComponents, DEFAULT_REF_ID]
);
useEffect(() => {
const focusSearch = (event: KeyboardEvent) => {
if (!enableShortcuts || isLoading || event.repeat) return;
if (!inputRef.current || inputRef.current === document.activeElement) return;
if (
// Shift is required to type `/` on some keyboard layouts
matchesModifiers({ ctrl: false, alt: false, meta: false }, event) &&
matchesKeyCode('Slash', event)
) {
inputRef.current.focus();
inputRef.current.select();
event.preventDefault();
}
};
// Keyup prevents slashes from ending up in the input field when held down
document.addEventListener('keyup', focusSearch);
return () => document.removeEventListener('keyup', focusSearch);
}, [inputRef, isLoading, enableShortcuts]);
const list: SearchItem[] = useMemo(() => {
return dataset.entries.reduce((acc: SearchItem[], [refId, { stories }]) => {
if (stories) {
@ -209,17 +188,20 @@ export const Search = React.memo<{
if (!input) return [];
let results: DownshiftItem[] = [];
const componentResults = (fuse.search(input) as SearchResult[]).filter(
({ item }) => item.isComponent
);
const resultIds: Set<string> = new Set();
const distinctResults = (fuse.search(input) as SearchResult[]).filter(({ item }) => {
if (!(item.isComponent || item.isLeaf) || resultIds.has(item.parent)) return false;
resultIds.add(item.id);
return true;
});
if (componentResults.length) {
results = componentResults.slice(0, allComponents ? 1000 : DEFAULT_MAX_SEARCH_RESULTS);
if (componentResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
if (distinctResults.length) {
results = distinctResults.slice(0, allComponents ? 1000 : DEFAULT_MAX_SEARCH_RESULTS);
if (distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
results.push({
showAll: () => showAllComponents(true),
totalCount: componentResults.length,
moreCount: componentResults.length - DEFAULT_MAX_SEARCH_RESULTS,
totalCount: distinctResults.length,
moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS,
});
}
}