fix(DeviceSize): Update xsmall display handling

ticketmaster · Jul 2, 2018 · 7541815 · 7541815
1 parent a7eff3d
commit 7541815
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/components/DeviceSize/Provider.js b/src/components/DeviceSize/Provider.js
@@ -30,12 +30,10 @@ export default class DeviceSizeProvider extends React.Component {
       return;
     }
 
-    this.xSmallMedia = window.matchMedia(constants.breakpoints.xSmall);
     this.smallMedia = window.matchMedia(constants.breakpoints.small);
     this.mediumMedia = window.matchMedia(constants.breakpoints.medium);
     this.largeMedia = window.matchMedia(constants.breakpoints.large);
     this.xLargeMedia = window.matchMedia(constants.breakpoints.xLarge);
-    this.xSmallMedia.addListener(this.setSize);
     this.smallMedia.addListener(this.setSize);
     this.mediumMedia.addListener(this.setSize);
     this.largeMedia.addListener(this.setSize);
@@ -60,7 +58,6 @@ export default class DeviceSizeProvider extends React.Component {
     }
 
     this.setState(() => ({
-      isXSmall: this.xSmallMedia.matches && !this.smallMedia.matches,
       isSmall: this.smallMedia.matches && !this.mediumMedia.matches,
       isMedium: this.mediumMedia.matches && !this.largeMedia.matches,
       isLarge: this.largeMedia.matches && !this.xLargeMedia.matches,
@@ -70,7 +67,6 @@ export default class DeviceSizeProvider extends React.Component {
   };
 
   unsubscribe = () => {
-    if (this.xSmallMedia) this.xSmallMedia.removeListener(this.setSize);
     if (this.smallMedia) this.smallMedia.removeListener(this.setSize);
     if (this.mediumMedia) this.mediumMedia.removeListener(this.setSize);
     if (this.largeMedia) this.largeMedia.removeListener(this.setSize);

diff --git a/src/theme/constants.js b/src/theme/constants.js
@@ -5,11 +5,11 @@ const constants = {
     large: "4px"
   },
   breakpoints: {
-    xSmall: "(min-width: 1px)",
-    small: "(min-width: 321px)",
+    small: "(max-width: 767px)",
     medium: "(min-width: 768px)",
     large: "(min-width: 1024px)",
     xLarge: "(min-width: 1440px)",
+    xSmallAndDown: "(max-width: 320px)",
     mediumAndUp: "(min-width: 481px)",
     largeAndUp: "(min-width: 769px)",
     xLargeAndUp: "(min-width: 1025px)"

diff --git a/src/theme/mediaQueries.js b/src/theme/mediaQueries.js
@@ -2,6 +2,12 @@ import { css } from "styled-components";
 
 import constants from "./constants";
 
+export const xSmallAndDown = (...args) => css`
+  @media screen and ${constants.breakpoints.xSmallAndDown} {
+    ${css(...args)};
+  }
+`;
+
 export const mediumAndUp = (...args) => css`
   @media screen and ${constants.breakpoints.mediumAndUp} {
     ${css(...args)};