diff --git a/src/hooks/Setting.js b/src/hooks/Setting.js index a919244..95c1556 100644 --- a/src/hooks/Setting.js +++ b/src/hooks/Setting.js @@ -12,7 +12,10 @@ const SettingContext = createContext({ }); export function SettingProvider({ children }) { - const { data, update, reload } = useStorage(STOKEY_SETTING, DEFAULT_SETTING); + const { data, update, reload, loading } = useStorage( + STOKEY_SETTING, + DEFAULT_SETTING + ); const { sync: { settingUpdateAt }, updateSync, @@ -36,6 +39,10 @@ export function SettingProvider({ children }) { [settingUpdateAt, update, updateSync, syncSetting] ); + if (loading) { + return; + } + return ( { (async () => { - await reload(); + try { + setLoading(true); + await reload(); + } catch (err) { + // + } finally { + setLoading(false); + } })(); }, [reload]); - return { data, save, update, remove, reload }; + return { data, save, update, remove, reload, loading }; } diff --git a/src/libs/shortcut.js b/src/libs/shortcut.js index 66ffd47..b70f64b 100644 --- a/src/libs/shortcut.js +++ b/src/libs/shortcut.js @@ -4,24 +4,34 @@ import { isSameSet } from "./utils"; * 键盘快捷键监听 * @param {*} fn * @param {*} target + * @param {*} timeout * @returns */ -export const shortcutListener = (fn, target = document) => { - // todo: let done = false; +export const shortcutListener = (fn, target = document, timeout = 3000) => { const allkeys = new Set(); const curkeys = new Set(); + let timer = null; const handleKeydown = (e) => { + timer && clearTimeout(timer); + timer = setTimeout(() => { + allkeys.clear(); + curkeys.clear(); + clearTimeout(timer); + timer = null; + }, timeout); + if (e.code) { allkeys.add(e.key); curkeys.add(e.key); + fn([...curkeys], [...allkeys]); } }; const handleKeyup = (e) => { curkeys.delete(e.key); if (curkeys.size === 0) { - fn([...allkeys]); + fn([...curkeys], [...allkeys]); allkeys.clear(); } }; @@ -42,8 +52,8 @@ export const shortcutListener = (fn, target = document) => { * @returns */ export const shortcutRegister = (targetKeys, fn, target = document) => { - return shortcutListener((keys) => { - if (isSameSet(new Set(targetKeys), new Set(keys))) { + return shortcutListener((curkeys) => { + if (isSameSet(new Set(targetKeys), new Set(curkeys))) { fn(); } }, target); diff --git a/src/views/Options/Setting.js b/src/views/Options/Setting.js index 483345e..3bb4be2 100644 --- a/src/views/Options/Setting.js +++ b/src/views/Options/Setting.js @@ -33,23 +33,29 @@ function ShortcutItem({ action, label }) { const { shortcut, setShortcut } = useShortcut(action); const [disabled, setDisabled] = useState(true); const inputRef = useRef(null); + const [formval, setFormval] = useState(shortcut); useEffect(() => { if (disabled) { + setFormval(shortcut); return; } inputRef.current.focus(); - setShortcut([]); + setFormval([]); - const clearShortcut = shortcutListener((keys) => { - setShortcut(keys); + const clearShortcut = shortcutListener((curkeys, allkeys) => { + setFormval(allkeys); + if (curkeys.length === 0) { + setDisabled(true); + setShortcut(allkeys); + } }, inputRef.current); return () => { clearShortcut(); }; - }, [disabled, setShortcut]); + }, [disabled, setShortcut, shortcut]); return ( @@ -57,7 +63,7 @@ function ShortcutItem({ action, label }) { size="small" label={label} name={label} - value={shortcut.join(" + ")} + value={formval.join(" + ")} fullWidth inputRef={inputRef} disabled={disabled}