add useResponsive #40
Merged
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
Collaborator
awmleer
commented
Aug 25, 2019
•
awmleer
commented
brickspert
reviewed
Aug 25, 2019
| interface ResponsiveInfo { | ||
| [key: string]: boolean; | ||
| } | ||
| function configResponsive(config: ResponsiveConfig): void |
There was a problem hiding this comment.
文档需要再完善下，比如 ResponsiveConfig 的默认值是什么？如何设置。 光看 这个文档 应该看不太懂。
There was a problem hiding this comment.
@brickspert 文档更新好了～
| { | ||
| ()=>{ | ||
| function Demo(){ | ||
| const responsive = useResponsive(); |
There was a problem hiding this comment.
我个人理解 useResponsive 返回的应该是 'lg' | 'xs' 等，就是一个字符串。
而目前是一个对象，感觉不太好。 @tli4 你觉得呢。
{
'lg': true,
'md': false
}
There was a problem hiding this comment.
我最开始写的时候，是返回的字符串'lg'这样的，但是发现这样其实用起来非常不方便。
例如bootstrap中的.col-md-8，对应到这里的话，就是：
const responsive = useResponsive()
return responsive.md ? (...) : (...)
There was a problem hiding this comment.
如果只是返回一个breakpoint的名字，那么就只能知道满足条件的“最宽”的那个节点。
然而很多时候需要的逻辑是：当前页面的宽度是否已经大于了某个breakpoint，那么就需要写成：
const responsive = useResponsive() // responsive: 'lg' | 'md' | ...
return (responsive === 'md' || responsive === 'lg' || responsive === 'xl') ? (...) : (...)
就会变得非常复杂而且容易出错。
There was a problem hiding this comment.
确实是，我去看了下 antd pro 的用法，它是使用了 react-container-query，也是返回的 object。
brickspert
reviewed
Aug 25, 2019
src/useResponsive/index.mdx
Outdated
|
|
||
| ### 配置 | ||
|
|
||
| 默认的响应式配置和bootstrap是一致的： |
brickspert
reviewed
Aug 25, 2019
.eslintrc.js
Outdated
| @@ -0,0 +1,102 @@ | |||
| "use strict"; | |||
| module.exports = { | |||
| extends: [ | |||
There was a problem hiding this comment.
这个文件扩展下 @umijs/fabric/dist/eslint 就可以吧？
|
+1 |
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.