feat(DirectionProvider): add direction to ConfigProvider #8236
Conversation
# Conflicts: # packages/vkui/src/testing/e2e/ComponentPlayground.tsx
size-limit report 📦
|
|
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. |
e2e tests
|
👀 Docs deployed
Commit 610cc81 |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #8236 +/- ##
==========================================
- Coverage 95.54% 95.43% -0.12%
==========================================
Files 404 406 +2
Lines 11605 11610 +5
Branches 3853 3845 -8
==========================================
- Hits 11088 11080 -8
- Misses 517 530 +13
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
# Conflicts: # packages/vkui/src/components/Pagination/Pagination.tsx # packages/vkui/src/testing/e2e/ComponentPlayground.tsx
packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx
Outdated
Show resolved
Hide resolved
| if (!window || !document) { | ||
| return; | ||
| } | ||
| const styleDeclaration = window.getComputedStyle(document.body); |
There was a problem hiding this comment.
dir зачастую определяют на <html>, тут либо нужно возможность завязаться на html или body, либо проверять всё же <html> и в доке об этом говорить
https://www.w3.org/International/questions/qa-html-dir#rtlsetup
There was a problem hiding this comment.
если даже dir будет установлен на html, то у body будет то же значение, так что в целом не важно
There was a problem hiding this comment.
раз у нас всё-равно есть ограничение, то что нам мешает значение для автодетекта брать до рендера? 🌚
const getGlobalDir = () => {
if (!document) {
return document.body.dir || document.documentElement.dir || 'ltr';
}
return 'ltr';
};
// ...
const direction = React.useMemo(getGlobalDir, []);а для SSR в SSRWrapper завести свойство
<SSRWrapper dir="ltr">
// ...
</SSRWrapper>There was a problem hiding this comment.
раз у нас всё-равно есть ограничение, то что нам мешает значение для автодетекта брать до рендера?
Насчет этого согласен
а для SSR в
SSRWrapperзавести свойство
А вот насчет этого, не совсем понял зачем? Можешь объяснить?
There was a problem hiding this comment.
а для SSR в
SSRWrapperзавести свойствоА вот насчет этого, не совсем понял зачем? Можешь объяснить?
в SSR нет доступа к DOM, поэтому нельзя узнать dir, из-за чего в случае разметки:
<html>
<head></head>
<body dir="rtl">
</body>
</html>на сервере у компонентов не будет CSS классов под RTL, а на клиенте будет – получим ошибку гидрации
There was a problem hiding this comment.
понял, получается надо нам надо с помощью DirectionProvider переопределить dir в SSRWrapper?
There was a problem hiding this comment.
Добавил проп direction
Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>
…vider' into e.muhamethanov/rtl/direction-provider
Описание
Текущий подход использует хук
useDirection, который определяетdirectionчерезgetComputedStyleпри каждой первой отрисовке компонента. При большом количестве компонентов это влияет на производительность.Предлагаемое решение
Добавить direction как параметр в
ConfigProvider, который можно:directionуbodyИзменения
directionвConfigProviderDirectionProviderдля переопределения directionuseConfigDirectionComponentPlaygroundтак чтобы поддерживался рендеринг компонентов вrtlmockRtlDirectionRelease notes
Новые компоненты
directionУлучшения
direction, который по умолчанию определяется исходя из атрибутаdirвbodyстраницы