mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix(layoutSider): dimensionMap for max-width media query

Browse Source 
According to visibility problem (on viewport breakpoints) with Sider menu in our App
And according to Bootstrap responsive breakpoints https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

We should use different values for `min-width` and `max-width`. For example, if we construct query with `min-width: 768px` then we MUST use `max-width: 767.98px` for proper breakpoint determination otherwise they conflict with each other when have similar values.
This commit is contained in:
Nikitenkova 2019-08-29 14:57:12 +06:00 committed by 偏右
parent 774e679ee1
commit 04669002bf
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/layout/Sider.tsx
View File

@ -23,13 +23,13 @@ if (typeof window !== 'undefined') {
window.matchMedia = window.matchMedia || matchMediaPolyfill;
}
const dimensionMap = {
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px',
const dimensionMaxMap = {
xs: '479.98px',
sm: '575.98px',
md: '767.98px',
lg: '991.98px',
xl: '1199.98px',
xxl: '1599.98px',
};
export interface SiderContextProps {
@ -105,8 +105,8 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
if (typeof window !== 'undefined') {
matchMedia = window.matchMedia;
}
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) {
this.mql = matchMedia(`(max-width: ${dimensionMap[props.breakpoint]})`);
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
this.mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
}
let collapsed;
if ('collapsed' in props) {