feat(plugin-layout): add wrapLayout for cover layout token #11780
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
|
Size Change: +58 B (0%) Total Size: 9.89 MB
ℹ️ View Unchanged
|
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #11780 +/- ##
=======================================
Coverage 29.02% 29.02%
=======================================
Files 488 488
Lines 14828 14828
Branches 3512 3512
=======================================
Hits 4304 4304
Misses 9764 9764
Partials 760 760
☔ View full report in Codecov by Sentry. |
|
如果 antd 的 provider 太底的话抬高一点，比 layout 高就好了吧。 另外 layout 的主题不是只能从 Settings 配置吗，加这个有啥用。 同时这个方案感觉是特定于你自己的，应该尽量采用默认普适的方案。 |
|
xiefengnian
changed the title
|
看了一下，你描述的这种定义 layout 的 theme 是合理的，但是直接写在 // app.tsx
export const innerProvider = (children) => {
return <Layout>{children}</Layout>
}因为数据流在 此 PR 里在 layout 外面包一层确实非常不优雅，如果觉得 layout: {
wrapper: '@/layouts/layoutWrapper'
}在 layout plugin 里解析下这个文件的绝对路径之后写到 |
innerProvider 是一个可行的方案（不过为啥 UMI 的文档里没有提到 inner 和 outer 呢） 使用 innerProvider 可以避免使用过多的层带来复杂性，不过token还是会污染initialState。但是使用cloneElement的方案给ProLayout覆盖props也不是一个好的、可以被广泛接受的实践。 我现在想的是，在runtimeConfig里面，wrapLayout和layouts应该作为互斥存在。layouts可以简单地进行配置使用，wrapLayout是一个升级的版本，可以接受initialState以及更多的context操作。 我先继续尝试一下在 innerProvider 下实现的情况如何，现在还是比较坚持 wrapLayout 这个简单直接的方案的。 btw，没想到 antd-style 的全局 theme 在 umi 里居然没有成熟的方案，amazing |
这个 innerProvider 文档搜不到啊.... |
|
你说得对，有一些是属于少数插件特别使用到的层级，通常我们不会遇到此 PR 所特定的修订 token 时还要获取 model 中的数据（此时要求在 model context 之下）。 |
|
求这个 PR 通过 XD 有些自定义组件需要放到顶层 Provider，看了 layout 源码后，真的无解了。：（ |
|
如上文所述，如果需要使用 model 数据流，并且在 antd provider 之下，layout 之上，可以使用 |
我甚至想在 appContext 之上 ，尝试使用 rootContainer 都不好使。目前想实现的是： <React.StrictMode>
<MyProvider>
<Main />
</MyProvider>
</React.StrictMode>看了一下，好像即使这个 PR 也处理不了 |
|
如果要在数据流之下（可以使用数据流相关 hooks 方法），antd provider （或 antd app context provider）之上，可以使用 // src/app.tsx
export const dataflowProvider = (children: React.ReactNode) => {
return <Layout>{children}</Layout>;
};目前有如下 context 层级： const UMI_CLIENT_RENDER_REACT_PLUGIN_LIST = [
// Lowest to the highest priority
'innerProvider',
'i18nProvider',
'accessProvider',
'dataflowProvider',
'outerProvider',
'rootContainer',
];总能找到你需要的。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
layout的层级问题导致其token无法被全局主题覆盖，见 https://codesandbox.io/p/github/xiefengnian/pro-layout-token-demo/main?file=%2Fsrc%2FGlobalContext.tsx%3A27%2C1&workspaceId=10706f71-e362-4ecd-bdf3-783b57978b51
增加额外的一层layout容器