diff --git a/docs/src/pages/Tokens.tsx b/docs/src/pages/Tokens.tsx index f6da5213..b035fff8 100644 --- a/docs/src/pages/Tokens.tsx +++ b/docs/src/pages/Tokens.tsx @@ -1,5 +1,6 @@ import { useAdaptivityWithJSMediaQueries } from '@vkontakte/vkui'; import React, { FC, useMemo, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; import { TokensActions, TokensContent, TokensHeader } from '@/components/pages/Tokens'; import tokensData from '@/public/static/data/tokensData.json'; @@ -55,14 +56,30 @@ function findThemeTags(themeNames: string[]): string[] { return tagsList; } +enum QueryParam { + theme = 'theme', + adaptivityMode = 'adaptivityMode', +} + const Tokens: FC = () => { const { viewWidth } = useAdaptivityWithJSMediaQueries(); const isTabletPlus = viewWidth > 3; const themeTags = useMemo(() => findThemeTags(themes), [themes]); const [selectedTags, setSelectedTags] = useState>([]); - const [selectedTheme, setSelectedTheme] = useState(themes[0]); - const [selectedValueType, setSelectedValueType] = useState('regular'); + const [searchParams, setSearchParams] = useSearchParams(); + const [selectedTheme, setSelectedTheme] = useState(() => { + const themeQueryParam = searchParams.get(QueryParam.theme); + + return themeQueryParam && themes.includes(themeQueryParam) ? themeQueryParam : themes[0]; + }); + const [selectedValueType, setSelectedValueType] = useState(() => { + const adaptivityModeQueryParam = searchParams.get(QueryParam.adaptivityMode); + + return adaptivityModeQueryParam === 'regular' || adaptivityModeQueryParam === 'compact' + ? adaptivityModeQueryParam + : 'regular'; + }); const [searchValue, setSearchValue] = useState(''); const searchValueDebounced = useDebounce(searchValue, 500); @@ -71,7 +88,21 @@ const Tokens: FC = () => { }; const changeThemeHandler = (event: React.ChangeEvent) => { - setSelectedTheme(event.target.value); + const newTheme = event.target.value; + + setSelectedTheme(newTheme); + setSearchParams((prev) => { + prev.set(QueryParam.theme, newTheme); + return prev; + }); + }; + + const changeAdaptivityMode = (newAdaptivityMode: ValueType) => { + setSelectedValueType(newAdaptivityMode); + setSearchParams((prev) => { + prev.set(QueryParam.adaptivityMode, newAdaptivityMode); + return prev; + }); }; return ( @@ -93,7 +124,7 @@ const Tokens: FC = () => { }} valueTypesProps={{ value: selectedValueType, - onChange: setSelectedValueType, + onChange: changeAdaptivityMode, }} searchProps={{ value: searchValue,