Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | import React, { useCallback, useRef, useState } from "react"; import l10n, { L10NKey } from "shared/lib/lang/l10n"; import SettingsSectionEngineFields from "./section/SettingsSectionEngineFields"; import { Input } from "ui/form/Input"; import { useGroupedEngineFields } from "store/features/engine/hooks/useGroupedEngineFields"; import useWindowSize from "ui/hooks/use-window-size"; import { SettingsContentColumn, SettingsMenuColumn, SettingsMenuItem, SettingsPageWrapper, SettingsSearchWrapper, } from "./style"; import { SearchableCard } from "ui/cards/SearchableCard"; import { useAppDispatch, useAppSelector } from "store/hooks"; import SettingsSectionSceneTypes from "./section/SettingsSectionSceneTypes"; import editorActions from "store/features/editor/editorActions"; import { useRestoreScroll } from "ui/hooks/use-restore-scroll"; import { useSaveScroll } from "ui/hooks/use-save-scroll"; import { SettingsSectionColor } from "./section/SettingsSectionColor"; import { SettingsSectionWeb } from "./section/SettingsSectionWeb"; import { SettingsSectionBuild } from "./section/SettingsSectionBuild"; import { SettingsSectionSGB } from "./section/SettingsSectionSGB"; import { SettingsSectionCart } from "./section/SettingsSectionCart"; import { SettingsSectionControls } from "./section/SettingsSectionControls"; import { SettingsSectionUI } from "./section/SettingsSectionUI"; import { SettingsSectionSprites } from "./section/SettingsSectionSprites"; const SettingsPage = () => { const dispatch = useAppDispatch(); const [searchTerm, setSearchTerm] = useState<string>(""); const groupedFields = useGroupedEngineFields(); const windowSize = useWindowSize(); const showMenu = (windowSize.width || 0) >= 750; const setScrollToId = useCallback((id: string) => { const el = document.getElementById(id); Iif (el) { el.scrollIntoView(); } }, []); const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => { setSearchTerm(e.currentTarget.value); }; const onMenuItem = (id: string) => () => { const el = document.getElementById(id); if (el) { setScrollToId(id); } else { setSearchTerm(""); setScrollToId(id); } }; const scrollRef = useRef<HTMLDivElement>(null); const settingsScrollTop = useAppSelector( (state) => state.editor.settingsScrollTop, ); useSaveScroll( scrollRef, (scrollTop) => { dispatch(editorActions.setSettingsScrollTop(scrollTop)); }, 250, ); useRestoreScroll(scrollRef, settingsScrollTop, { behavior: "auto", }); return ( <SettingsPageWrapper> {showMenu && ( <SettingsMenuColumn> <SearchableCard> <SettingsSearchWrapper> <Input autoFocus type="search" placeholder={l10n("FIELD_SEARCH_SETTINGS")} value={searchTerm} onChange={onSearch} /> </SettingsSearchWrapper> <SettingsMenuItem onClick={onMenuItem("settingsColor")}> {l10n("SETTINGS_COLOR")} </SettingsMenuItem> <SettingsMenuItem onClick={onMenuItem("settingsSuper")}> {l10n("SETTINGS_SGB")} </SettingsMenuItem> <SettingsMenuItem onClick={onMenuItem("settingsSceneTypes")}> {l10n("FIELD_SCENE_TYPES")} </SettingsMenuItem> {groupedFields.map((group) => ( <SettingsMenuItem key={group.name} onClick={onMenuItem(`settings${group.name}`)} $indent={group.sceneType ? 1 : 0} > {l10n(group.name as L10NKey)} </SettingsMenuItem> ))} <SettingsMenuItem onClick={onMenuItem("settingsSprite")}> {l10n("SETTINGS_SPRITE")} </SettingsMenuItem> <SettingsMenuItem onClick={onMenuItem("settingsUI")}> {l10n("MENU_UI_ELEMENTS")} </SettingsMenuItem> <SettingsMenuItem onClick={onMenuItem("settingsControls")}> {l10n("SETTINGS_CONTROLS")} </SettingsMenuItem> <SettingsMenuItem onClick={onMenuItem("settingsCartType")}> {l10n("SETTINGS_CART_TYPE")} </SettingsMenuItem> <SettingsMenuItem onClick={onMenuItem("settingsBuild")}> {l10n("SETTINGS_BUILD")} </SettingsMenuItem> <SettingsMenuItem onClick={onMenuItem("settingsWeb")}> {l10n("SETTINGS_WEB_EXPORT")} </SettingsMenuItem> </SearchableCard> </SettingsMenuColumn> )} <SettingsContentColumn ref={scrollRef}> <SettingsSectionColor searchTerm={searchTerm} /> <SettingsSectionSGB searchTerm={searchTerm} /> <SettingsSectionSceneTypes searchTerm={searchTerm} /> <SettingsSectionEngineFields searchTerm={searchTerm} /> <SettingsSectionSprites searchTerm={searchTerm} /> <SettingsSectionUI searchTerm={searchTerm} /> <SettingsSectionControls searchTerm={searchTerm} /> <SettingsSectionCart searchTerm={searchTerm} /> <SettingsSectionBuild searchTerm={searchTerm} /> <SettingsSectionWeb searchTerm={searchTerm} /> </SettingsContentColumn> </SettingsPageWrapper> ); }; export default SettingsPage; |