@xstyled/core - npm Package Compare versions

Comparing version 1.13.1 to 1.14.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.14.0](https://github.com/smooth-code/xstyled/compare/v1.13.1...v1.14.0) (2019-11-13)
+
+
+### Features
+
+* add useTheme & useUp / useDown ([36d2909](https://github.com/smooth-code/xstyled/commit/36d290924d6cfaef97dd3144b4895ab944aa1f25))
+
+
+
+
+
 ## [1.13.1](https://github.com/smooth-code/xstyled/compare/v1.13.0...v1.13.1) (2019-09-26)
@@ -8,0 +19,0 @@

dist/xstyled-core.cjs.js

@@ -7,8 +7,79 @@ 'use strict';
 
+var React = _interopDefault(require('react'));
 var system = require('@xstyled/system');
 var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-var React = _interopDefault(require('react'));
 var util = require('@xstyled/util');
 
+/* eslint-disable no-undef */
+function useThemeBreakpoints(theme) {
+  return system.getBreakpoints({
+    theme: theme
+  });
+}
+/**
+ * Minimum breakpoint width.
+ * Null for the smallest breakpoint.
+ */
+
+function useThemeMinValue(theme, key) {
+  var breakpoints = useThemeBreakpoints(theme);
+  var value = breakpoints[key];
+  return value === 0 ? null : value;
+}
+/**
+ * Maximum breakpoint width. Null for the largest (last) breakpoint.
+ * The maximum value is calculated as the minimum of the next one less 0.02px
+ * to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+ * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+ * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+ * See https://bugs.webkit.org/show_bug.cgi?id=178261
+ */
+
+
+function useThemeMaxValue(theme, key) {
+  var breakpoints = useThemeBreakpoints(theme);
+  var breakPoint = breakpoints[key];
+  return breakPoint === 0 ? null : breakPoint - 0.02;
+}
+
+function useViewportWidth() {
+  var _React$useState = React.useState(null),
+      width = _React$useState[0],
+      setWidth = _React$useState[1];
+
+  React.useLayoutEffect(function () {
+    setWidth(window.innerWidth);
+
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return width;
+}
+function useThemeBreakpoint(theme) {
+  var breakpoints = useThemeBreakpoints(theme);
+  var width = useViewportWidth();
+  return React.useMemo(function () {
+    return Object.keys(breakpoints).reverse().find(function (breakpoint) {
+      return width > breakpoints[breakpoint];
+    }) || null;
+  }, [breakpoints, width]);
+}
+function useThemeUp(theme, key) {
+  var value = useThemeMinValue(theme, key);
+  var width = useViewportWidth();
+  return width > value;
+}
+function useThemeDown(theme, key) {
+  var value = useThemeMaxValue(theme, key);
+  var width = useViewportWidth();
+  return width < value;
+}
+
 function createBox() {
@@ -593,1 +664,6 @@ return ["&&{", system.system, "}"];
 exports.useColorModeTheme = useColorModeTheme;
+exports.useThemeBreakpoint = useThemeBreakpoint;
+exports.useThemeBreakpoints = useThemeBreakpoints;
+exports.useThemeDown = useThemeDown;
+exports.useThemeUp = useThemeUp;
+exports.useViewportWidth = useViewportWidth;

dist/xstyled-core.es.js

@@ -1,7 +0,78 @@
-import { system, getColor, getBorderStyle, getShadow, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getSpace, getBorder, getBorderWidth, getSize, getRadius, getZIndex } from '@xstyled/system';
+import React from 'react';
+import { getBreakpoints, system, getColor, getBorderStyle, getShadow, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getSpace, getBorder, getBorderWidth, getSize, getRadius, getZIndex } from '@xstyled/system';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 import _extends from '@babel/runtime/helpers/esm/extends';
-import React from 'react';
 import { obj, string, func } from '@xstyled/util';
 
+/* eslint-disable no-undef */
+function useThemeBreakpoints(theme) {
+  return getBreakpoints({
+    theme: theme
+  });
+}
+/**
+ * Minimum breakpoint width.
+ * Null for the smallest breakpoint.
+ */
+
+function useThemeMinValue(theme, key) {
+  var breakpoints = useThemeBreakpoints(theme);
+  var value = breakpoints[key];
+  return value === 0 ? null : value;
+}
+/**
+ * Maximum breakpoint width. Null for the largest (last) breakpoint.
+ * The maximum value is calculated as the minimum of the next one less 0.02px
+ * to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+ * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+ * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+ * See https://bugs.webkit.org/show_bug.cgi?id=178261
+ */
+
+
+function useThemeMaxValue(theme, key) {
+  var breakpoints = useThemeBreakpoints(theme);
+  var breakPoint = breakpoints[key];
+  return breakPoint === 0 ? null : breakPoint - 0.02;
+}
+
+function useViewportWidth() {
+  var _React$useState = React.useState(null),
+      width = _React$useState[0],
+      setWidth = _React$useState[1];
+
+  React.useLayoutEffect(function () {
+    setWidth(window.innerWidth);
+
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return width;
+}
+function useThemeBreakpoint(theme) {
+  var breakpoints = useThemeBreakpoints(theme);
+  var width = useViewportWidth();
+  return React.useMemo(function () {
+    return Object.keys(breakpoints).reverse().find(function (breakpoint) {
+      return width > breakpoints[breakpoint];
+    }) || null;
+  }, [breakpoints, width]);
+}
+function useThemeUp(theme, key) {
+  var value = useThemeMinValue(theme, key);
+  var width = useViewportWidth();
+  return width > value;
+}
+function useThemeDown(theme, key) {
+  var value = useThemeMaxValue(theme, key);
+  var width = useViewportWidth();
+  return width < value;
+}
+
 function createBox() {
@@ -575,2 +646,2 @@ return ["&&{", system, "}"];
 
-export { ColorModeContext, createBox, createColorModeProvider, createColorStyles, getColorModeInitScriptElement, getColorModeInitScriptTag, propGetters, transform, useColorMode, useColorModeState, useColorModeTheme };
+export { ColorModeContext, createBox, createColorModeProvider, createColorStyles, getColorModeInitScriptElement, getColorModeInitScriptTag, propGetters, transform, useColorMode, useColorModeState, useColorModeTheme, useThemeBreakpoint, useThemeBreakpoints, useThemeDown, useThemeUp, useViewportWidth };

package.json

 {
   "name": "@xstyled/core",
   "description": "xstyled core utilities",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "sideEffects": false,
@@ -19,6 +19,6 @@ "main": "dist/xstyled-core.cjs.js",
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "@xstyled/system": "^1.11.0"
+    "@babel/runtime": "^7.7.2",
+    "@xstyled/system": "^1.14.0"
   },
-  "gitHead": "132bc47410b425294bb321e6ef9724cc26b67c5f"
+  "gitHead": "6e5ffa8f9d820f15e2fe0cb0615720172a044990"
 }

No alert changes

Improved metrics

Total package byte prevSize

46184

increased by11.29%

Lines of code

1135

increased by13.16%

Dependency changes

• Updated@babel/runtime@^7.7.2

• Updated@xstyled/system@^1.14.0