Skip to content

Создание хука useAdaptivityWithMediaQueries() для всплывающих окон#3062

Merged
inomdzhon merged 4 commits intov5.0.0from
issue3031-AdaptivityProvider-revert-js-math-media
Aug 26, 2022
Merged

Создание хука useAdaptivityWithMediaQueries() для всплывающих окон#3062
inomdzhon merged 4 commits intov5.0.0from
issue3031-AdaptivityProvider-revert-js-math-media

Conversation

@inomdzhon
Copy link
Copy Markdown
Contributor

@inomdzhon inomdzhon commented Aug 24, 2022

Создал хук useAdaptivityWithMediaQueries(), который слушает изменения вьюпорта, в отличии от useAdaptivity().

подробности см. в #3031

Дополнительно

  • Вынес все константы, касаемые адаптива, в отдельный файл adaptivity.ts.
  • Объединил константы с брейкпоинтами (DESKTOP_SIZE, TABLET_SIZE и т.п.) в enum Breakpoints.

Чеклист

Нюанс

  • Alert, ActionSheet, ActionSheetItem, ModalDisimissButton сравнивал с master

@inomdzhon inomdzhon requested review from a team as code owners August 24, 2022 11:43
@inomdzhon inomdzhon changed the base branch from master to v5.0.0 August 24, 2022 11:44
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Aug 24, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2d5f635:

Sandbox Source
VKUI - default example Configuration

@inomdzhon inomdzhon force-pushed the issue3031-AdaptivityProvider-revert-js-math-media branch from 58f3a67 to 991a2b8 Compare August 25, 2022 11:16
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Aug 25, 2022

size-limit report 📦

Path Size
JS 256.46 KB (+1.2% 🔺)
JS (gzip) 76.62 KB (+1.64% 🔺)
JS (brotli) 64.42 KB (+1.45% 🔺)
JS, unstable 27.54 KB (+0.21% 🔺)
CSS 269.42 KB (-4.3% 🔽)
CSS (gzip) 36.79 KB (-2.98% 🔽)
CSS (brotli) 29.75 KB (-2.65% 🔽)
CSS, unstable 1.24 KB (0%)

@github-actions
Copy link
Copy Markdown
Contributor

👀 Styleguide deployed

See the styleguide for this PR at https://vkcom.github.io/VKUI/pull/3062/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Aug 25, 2022

Warnings
⚠️

191 changed screenshots found — review & update them via "Update Screenshots" action before merging.

⚠️

Some screenshots were manually modified in this PR - please use the action next time.

Changed screenshots

actionsheet-android-light-w_2-1
actionsheet-ios-light-w_2-1
actionsheet-vkcom-light-w_5-1
alert-android-light-1
alert-ios-light-1
alert-vkcom-light-1
avatar-android-light-1
avatar-ios-light-1
banner-android-light-1
banner-ios-light-1
banner-vkcom-light-1
button-android-light-1
button-ios-light-1
button-vkcom-light-1
buttongroup-align-android-light-1
buttongroup-align-ios-light-1
buttongroup-align-vkcom-light-1
buttongroup-android-light-1
buttongroup-ios-light-1
buttongroup-vkcom-light-1
calendar-android-light-1
calendar-ios-light-1
calendar-vkcom-light-1
calendarrange-android-light-1
calendarrange-ios-light-1
calendarrange-vkcom-light-1
caption-android-light-1
caption-ios-light-1
caption-vkcom-light-1
card-android-light-1
card-ios-light-1
cardscroll-android-light-1
cardscroll-ios-light-1
cell-android-light-1
cell-ios-light-1
cell-vkcom-light-1
cellbutton-android-light-1
cellbutton-ios-light-1
cellbutton-vkcom-light-1
checkbox-android-light-1
checkbox-ios-light-1
checkbox-simple-android-light-1
checkbox-simple-ios-light-1
checkbox-sizes-and-description-android-light-1
checkbox-sizes-and-description-ios-light-1
checkbox-sizes-and-description-vkcom-light-1
chip-android-light-1
chip-ios-light-1
chip-vkcom-light-1
chipsinput-android-light-1
chipsinput-ios-light-1
chipsinput-vkcom-light-1
chipsselect-scrolls-to-item-via-arrows-1
contentcard-android-light-1
contentcard-ios-light-1
contentcard-vkcom-light-1
counter-android-light-1
counter-ios-light-1
counter-vkcom-light-1
customselect-android-light-1
customselect-ios-light-1
customselect-vkcom-light-1
customselectoption-android-light-1
customselectoption-ios-light-1
customselectoption-vkcom-light-1
dateinput-android-light-1
dateinput-ios-light-1
daterangeinput-android-light-1
daterangeinput-ios-light-1
deviceconditionalrender-android-light-1
deviceconditionalrender-ios-light-1
footnote-android-light-1
footnote-ios-light-1
footnote-vkcom-light-1
formitem-android-light-1
formitem-ios-light-1
formitem-vkcom-light-1
formlayoutgroup-android-light-1
formlayoutgroup-ios-light-1
formlayoutgroup-vkcom-light-1
gridavatar-android-light-1
gridavatar-ios-light-1
header-android-light-1
header-ios-light-1
header-vkcom-light-1
headline-android-light-1
headline-ios-light-1
headline-vkcom-light-1
horizontalscroll-android-light-w_2-1
horizontalscroll-android-light-w_3-1
horizontalscroll-does-not-have-arrows-without-mouse-1
horizontalscroll-has-arrows-on-mouse-hover-1
iconbutton-android-light-1
iconbutton-ios-light-1
inforow-android-light-1
inforow-ios-light-1
inforow-vkcom-light-1
initialsavatar-android-light-1
initialsavatar-ios-light-1
input-android-light-1
input-ios-light-1
miniinfocell-android-light-1
miniinfocell-ios-light-1
miniinfocell-vkcom-light-1
modalcard-mobile-android-light-w_2-1
modalcard-mobile-ios-light-w_2-1
modalcard-tablet-android-light-w_3-1
modalcard-tablet-ios-light-w_3-1
modalcard-vkcom-light-1
modalpageheader-android-light-w_5-1
modalpageheader-ios-light-w_2-1
modalpageheader-ios-light-w_5-1
modalpageheader-vkcom-light-w_2-1
modalpageheader-vkcom-light-w_5-1
nativeselect-android-light-1
nativeselect-ios-light-1
pagination-android-light-1
pagination-ios-light-1
panel-android-light-1
panel-ios-light-1
panel-vkcom-light-1
paragraph-android-light-1
paragraph-ios-light-1
paragraph-vkcom-light-1
placeholder-android-light-1
placeholder-ios-light-1
placeholder-vkcom-light-1
radio-android-light-1
radio-ios-light-1
radio-sizes-and-description-android-light-1
radio-sizes-and-description-ios-light-1
radio-sizes-and-description-vkcom-light-1
radiogroup-android-light-1
radiogroup-ios-light-1
richcell-android-light-1
richcell-ios-light-1
richcell-vkcom-light-1
search-android-light-1
search-ios-light-1
search-shows-after-when-focused-on-ios-1
search-vkcom-light-1
segmentedcontrol-android-light-1
segmentedcontrol-ios-light-1
selectmimicry-android-light-1
selectmimicry-ios-light-1
selectmimicry-vkcom-light-1
simplecell-android-light-1
simplecell-ios-light-1
simplecell-vkcom-light-1
simplecheckbox-android-light-1
simplecheckbox-ios-light-1
sizexconditionalrender-android-light-1
sizexconditionalrender-ios-light-1
sizeyconditionalrender-android-light-1
sizeyconditionalrender-ios-light-1
slider-android-light-1
slider-ios-light-1
subhead-android-light-1
subhead-ios-light-1
subhead-vkcom-light-1
subnavigationbutton-android-light-1
subnavigationbutton-ios-light-1
subnavigationbutton-vkcom-light-1
switch-android-light-1
switch-ios-light-1
tabbar-android-light-1
tabbar-ios-light-1
tabs-android-light-1
tabs-ios-light-1
tabs-vkcom-light-1
text-android-light-1
text-ios-light-1
text-vkcom-light-1
textarea-android-light-1
textarea-fits-size-to-content-1
textarea-ios-light-1
title-android-light-1
title-ios-light-1
title-vkcom-light-1
tooltip-android-light-1
tooltip-ios-light-1
tooltip-vkcom-light-1
usersstack-android-light-1
usersstack-ios-light-1
usersstack-vkcom-light-1
viewwidthconditionalrender-android-light-1
viewwidthconditionalrender-ios-light-1
viewwidthconditionalrender-vkcom-light-1
writebaricon-android-light-1
writebaricon-ios-light-1
writebaricon-vkcom-light-1

Code coverage

lines3748 / 483777.48%
statements3816 / 493177.38%
functions849 / 107279.19%
branches3322 / 465071.44%
branchesTrue0 / 0100.00%

Generated by 🚫 dangerJS against 2d5f635

@inomdzhon inomdzhon force-pushed the issue3031-AdaptivityProvider-revert-js-math-media branch 2 times, most recently from e97966c to 38fac0d Compare August 25, 2022 16:10
@stoope
Copy link
Copy Markdown
Contributor

stoope commented Aug 26, 2022

Скриншоты actionsheet сломались

@inomdzhon inomdzhon force-pushed the issue3031-AdaptivityProvider-revert-js-math-media branch 4 times, most recently from c37963f to 88705e3 Compare August 26, 2022 10:47
Additional:
- create `useMediaQueries()`
- create `MEDIA_QUERIES` const
- create utilities for detect adaptivity params
@inomdzhon inomdzhon force-pushed the issue3031-AdaptivityProvider-revert-js-math-media branch from 88705e3 to 3ef6a94 Compare August 26, 2022 12:04
@inomdzhon inomdzhon force-pushed the issue3031-AdaptivityProvider-revert-js-math-media branch from 3ef6a94 to 2d5f635 Compare August 26, 2022 12:29
@inomdzhon inomdzhon merged commit 7233d12 into v5.0.0 Aug 26, 2022
@inomdzhon inomdzhon deleted the issue3031-AdaptivityProvider-revert-js-math-media branch August 26, 2022 14:37
inomdzhon added a commit that referenced this pull request Jul 10, 2024
Т.к. `/src/shared/breakpoints.js` нужен только для `/scripts/generateCSSCustomMedias.js` внёс следующие изменения:

1. `/src/shared/breakpoints.js` -> `/src/lib/adaptivity/breakpoints.ts`;
2. `/scripts/generateCSSCustomMedias.js` -> `/scripts/generateCSSCustomMedias.mjs`;
3. перенёс `getCustomMedias()` из `shared.config.js` в `/scripts/generateCSSCustomMedias.mjs`;
4. `/src/lib/adaptivity/breakpoints.ts` в `/scripts/generateCSSCustomMedias.mjs` мы импортируем через `fs.readFileSync()` и последующий [ts.transpileModule()](https://github.com/Microsoft/TypeScript-wiki/blob/main/Using-the-Compiler-API.md#a-simple-transform-function). Выполняем код через [import()](https://2ality.com/2019/10/eval-via-import.html#evaluating-simple-code-via-import()).
5. в `/src/lib/adaptivity/types.ts` создал тип `CSSCustomMedias` и применяю его через JSDoc в `getCustomMedias()` – теперь `yarn workspace @vkontakte/vkui run lint:generated-files` будет падать с ошибкой если поменяли брейкпоинты, а в `getCustomMedias()` поправить забыли;
6. в `/styleguide/Components/Preview` заменил импорт `@vkui/shared/breakpoints` на `@vkui/lib/adaptivity`;
7. поправил `docs/ADAPTIVITY_GUIDE.md`

---

- related to #7085
- caused by #3062
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[AdaptivityProvider] Вернуть прослушивание изменения размеров вьюпорта в JS

2 participants